/**
 * chat-sim.css — Estilos do componente de Simulação Visual de Chat
 *
 * Escopo isolado sob .csim-* e .sim-* para não colidir
 * com o layout do chat real (assistente/index.php).
 *
 * Incluído em:
 *   - assistente/sobre.php  (3 simulações)
 *   - index.php             (1 simulação compacta na seção IA)
 */

/* ══════════════════════════════════════════════════════════
   GRADE E CARDS DE SIMULAÇÃO
   ══════════════════════════════════════════════════════════ */

/* Grade de cards de simulação */
.sim-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 0.5rem;
    align-items: start;
}

/* Card individual — smartphone vertical */
.sim-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
}

/* Título do card — fica ACIMA do frame */
.sim-card-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--slate-600, #64748b);
    text-align: center;
    margin: 0 0 0.55rem 0;
    letter-spacing: 0.01em;
}

/* ── Frame de smartphone ────────────────────────────── */
.sim-phone {
    width: 100%;
    max-width: 290px;
    aspect-ratio: 9 / 19.5;
    border-radius: 28px;
    background: #1a3158;
    box-shadow:
        0 0 0 6px #0f2341,
        0 12px 48px rgba(15,35,65,.35),
        0 2px 8px rgba(0,0,0,.25);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Entalhe superior (notch decorativo) */
.sim-phone::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 68px;
    height: 5px;
    background: rgba(0,0,0,.4);
    border-radius: 99px;
    z-index: 10;
}

/* Container interno (o "app" dentro do telefone) */
.sim-phone-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f0f2f8;
    padding-top: 22px;
}

/* Slot de simulação pendente */
.sim-slot-placeholder {
    width: 100%;
    max-width: 290px;
    aspect-ratio: 9 / 19.5;
    border-radius: 28px;
    border: 2px dashed var(--slate-200, #e2e8f0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--slate-50, #f8fafc);
}
.sim-slot-icon  { font-size: 1.5rem; opacity: 0.45; }
.sim-slot-text  { font-size: 0.75rem; font-weight: 600; color: var(--slate-400, #94a3b8); text-align: center; padding: 0 1rem; }
.sim-slot-sub   { font-size: 0.68rem; color: var(--slate-300, #cbd5e1); text-align: center; padding: 0 0.75rem; }

/* Quadro de credibilidade */
.sim-cred-badge {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ea 100%);
    border: 1px solid #c3dfe8;
    border-left: 4px solid #2d7d46;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin: 0 0 1.75rem 0;
    max-width: 720px;
}
.sim-cred-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1.3; }
.sim-cred-body { flex: 1; }
.sim-cred-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a4731;
    margin-bottom: 0.28rem;
}
.sim-cred-text {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.55;
    color: #2e5a45;
}

/* Responsive — simulações */
@media (max-width: 860px) {
    .sim-grid { grid-template-columns: 1fr; align-items: center; }
    .sim-phone, .sim-slot-placeholder { max-width: 240px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
    .sim-grid { grid-template-columns: repeat(2, 1fr); }
    .sim-phone, .sim-slot-placeholder { max-width: 240px; }
}

/* ══════════════════════════════════════════════════════════
   OVERLAY DE POSTER / PLAY
   ══════════════════════════════════════════════════════════ */

.csim-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(15,35,65,.82) 0%, rgba(26,49,88,.90) 100%);
    cursor: pointer;
    z-index: 20;
    transition: background 0.2s;
}
.csim-overlay:hover {
    background: linear-gradient(160deg, rgba(15,35,65,.92) 0%, rgba(26,49,88,.97) 100%);
}
.csim-overlay:focus-visible {
    outline: 2px solid #C9A227;
    outline-offset: 2px;
}
.csim-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
}
.csim-play-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #C9A227;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f2341;
    box-shadow: 0 4px 20px rgba(201,162,39,.48);
    transition: transform 0.2s, box-shadow 0.2s;
}
.csim-overlay:hover .csim-play-btn {
    transform: scale(1.09);
    box-shadow: 0 6px 26px rgba(201,162,39,.58);
}
.csim-overlay-label {
    color: rgba(255,255,255,.88);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem 0;
}
.csim-overlay-hint {
    color: rgba(255,255,255,.55);
    font-size: 0.54rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: center;
    margin: 0;
    padding: 0 1.2rem;
    max-width: 200px;
}

/* ══════════════════════════════════════════════════════════
   SHELL DO CHAT (visível durante reprodução)
   ══════════════════════════════════════════════════════════ */

.csim-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.csim-header {
    background: #0f2341;
    color: #fff;
    padding: 0.5rem 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    box-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.csim-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #C9A227;
    color: #0f2341;
    font-size: 0.54rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.csim-header-info { flex: 1; min-width: 0; }
.csim-header-name {
    font-size: 0.6rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.csim-header-sub {
    font-size: 0.5rem;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Área de mensagens */
.csim-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.6rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.csim-messages::-webkit-scrollbar { display: none; }

/* Linhas de mensagem */
.csim-row {
    display: flex;
    gap: 0.38rem;
    align-items: flex-end;
}
.csim-row-user { flex-direction: row-reverse; }

/* Avatar mini */
.csim-msg-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 0.42rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.csim-row-ai   .csim-msg-avatar { background: #C9A227; color: #0f2341; }
.csim-row-user .csim-msg-avatar { background: #0f2341; color: #fff; }

/* Outer wrapper das bolhas */
.csim-bubble-outer { max-width: 82%; }

/* Bolhas */
.csim-bubble {
    padding: 0.42rem 0.58rem;
    border-radius: 0.7rem;
    font-size: 0.58rem;
    line-height: 1.55;
    word-break: break-word;
}
.csim-bubble-ai {
    background: #ffffff;
    color: #1e293b;  /* explícito: evita herdar cor clara do contexto da página */
    box-shadow: 0 2px 8px rgba(15,35,65,.10);
    border-bottom-left-radius: 0.18rem;
}
.csim-bubble-user {
    background: #0f2341;
    color: #fff;
    border-bottom-right-radius: 0.18rem;
}

/* Formatação markdown dentro das bolhas AI */
.csim-bubble-ai p           { margin: 0 0 0.32rem 0; color: #1e293b; }
.csim-bubble-ai p:last-child { margin-bottom: 0; }
.csim-bubble-ai ul,
.csim-bubble-ai ol          { margin: 0.22rem 0 0.32rem 0.75rem; padding: 0; }
.csim-bubble-ai li          { margin-bottom: 0.12rem; }
.csim-bubble-ai strong      { font-weight: 600; }
.csim-bubble-ai em          { font-style: italic; }

/* Indicador de digitação */
.csim-typing-bubble {
    display: flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.45rem 0.6rem;
}
.csim-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #C9A227;
    opacity: 0.7;
    animation: csimBounce 0.9s infinite;
}
.csim-dot:nth-child(2) { animation-delay: 0.15s; }
.csim-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes csimBounce {
    0%, 80%, 100% { transform: translateY(0); }
    40%            { transform: translateY(-4px); }
}

/* Input decorativo */
.csim-input-area {
    background: #fff;
    border-top: 1px solid #e2e8f0;
    padding: 0.38rem 0.55rem;
    flex-shrink: 0;
}
.csim-input-row {
    display: flex;
    gap: 0.38rem;
    align-items: center;
}
.csim-input-fake {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 0.45rem;
    padding: 0.28rem 0.45rem;
    font-size: 0.5rem;
    color: #94a3b8;
    background: #f8fafc;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.csim-send-btn {
    background: #C9A227;
    border-radius: 0.45rem;
    padding: 0.28rem 0.42rem;
    font-size: 0.62rem;
    color: #0f2341;
    font-weight: 700;
    flex-shrink: 0;
}
.csim-input-hint {
    font-size: 0.46rem;
    color: #94a3b8;
    text-align: center;
    margin: 0.18rem 0 0;
}

/* Botão de replay */
.csim-replay-btn {
    margin: 0.38rem auto 0.18rem;
    display: block;
    background: rgba(15,35,65,.07);
    border: 1px solid rgba(15,35,65,.14);
    border-radius: 99px;
    padding: 0.26rem 0.7rem;
    font-size: 0.54rem;
    font-weight: 600;
    color: #0f2341;
    cursor: pointer;
    transition: background 0.18s;
    font-family: inherit;
}
.csim-replay-btn:hover { background: rgba(15,35,65,.13); }

/* ══════════════════════════════════════════════════════════
   ELEMENTOS DE BLOCO — parseToBlocks (v2)
   Revelados completos — zero flash de estrutura vazia.
   ══════════════════════════════════════════════════════════ */

/* Parágrafo regular */
.csim-p {
    margin: 0 0 0.28rem 0;
    font-size: 0.58rem;
    line-height: 1.55;
    color: #1e293b;
}
.csim-p:last-child { margin-bottom: 0; }

/* Item numerado */
.csim-num-block { margin: 0 0 0.38rem 0; }
.csim-num-title-row {
    display: flex;
    gap: 0.22rem;
    align-items: baseline;
    flex-wrap: nowrap;
}
.csim-num-badge {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.58rem;
    line-height: 1.4;
    color: #1e293b;
}
.csim-num-title-text {
    font-weight: 600;
    font-size: 0.58rem;
    line-height: 1.4;
    color: #1e293b;
}
.csim-num-desc {
    margin: 0.1rem 0 0 0.85rem;
    font-size: 0.56rem;
    line-height: 1.52;
    font-weight: 400;
    color: #1e293b;
}

/* Bullet */
.csim-bull-block {
    display: flex;
    gap: 0.25rem;
    align-items: baseline;
    margin: 0 0 0.2rem 0;
    font-size: 0.58rem;
    line-height: 1.5;
    color: #1e293b;
}
.csim-bull-dot {
    flex-shrink: 0;
    font-size: 0.5rem;
    line-height: 1.8;
    color: #C9A227;
}
.csim-bull-text { flex: 1; }

/* ══════════════════════════════════════════════════════════
   TYPEWRITER DO USUÁRIO
   ══════════════════════════════════════════════════════════ */

.csim-typed-text { /* herda da bolha */ }
.csim-cursor {
    display: inline-block;
    width: 0.06em;
    height: 0.8em;
    background: rgba(255,255,255,0.82);
    vertical-align: middle;
    margin-left: 1px;
    border-radius: 1px;
    animation: csimCursorBlink 0.55s step-end infinite;
}
@keyframes csimCursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ══════════════════════════════════════════════════════════
   BARRA DE CONTROLES (⏸/▶ + velocidade)
   Injetada pela engine v3 abaixo do .sim-phone.
   ══════════════════════════════════════════════════════════ */

.csim-controls {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    width: 100%;
}
.csim-controls.csim-controls-visible { display: flex; }

/* Botão pause/play */
.csim-ctrl-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #0f2341;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
    font-family: inherit;
    flex-shrink: 0;
}
.csim-ctrl-btn:hover:not(:disabled) { background: #f8fafc; border-color: #94a3b8; }
.csim-ctrl-btn:disabled { opacity: 0.35; cursor: default; }
.csim-ctrl-icon { font-size: 0.7rem; line-height: 1; }

/* Grupo de velocidade */
.csim-speed-group {
    display: flex;
    gap: 0.18rem;
    background: #f1f5f9;
    border-radius: 99px;
    padding: 0.15rem;
}
.csim-speed-btn {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.18rem 0.52rem;
    border-radius: 99px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
    line-height: 1.4;
}
.csim-speed-btn:hover { background: rgba(15,35,65,.07); color: #0f2341; }
.csim-speed-btn.csim-speed-active {
    background: #0f2341;
    color: #fff;
}