/* Agente de perguntas — estilos auto-contidos (não dependem do build do Tailwind). Tema claro. */

/* Bloqueio de scroll do fundo com a gaveta aberta (sem position:fixed no body). */
html.ask-lock, html.ask-lock body { overflow: hidden; }

:root {
    --ask-teal: #2dbba5;
    --ask-teal-dark: #0e7c6b;      /* teal legível sobre branco (links) */
    --ask-ink: #1f2937;            /* texto principal */
    --ask-ink-strong: #111827;     /* títulos */
    --ask-muted: #6b7280;          /* texto secundário */
    --ask-border: #e5e7eb;
    --ask-font: Arial, Helvetica, "Segoe UI", system-ui, sans-serif;
}

#ask-toggle {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border: 0;
    border-radius: 9999px;
    background: var(--ask-teal);
    color: #05372f;
    font-family: var(--ask-font);
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    transition: filter .15s ease;
}
#ask-toggle:hover { filter: brightness(1.05); }

#ask-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
#ask-backdrop.ask-open { opacity: 1; pointer-events: auto; }

#ask-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 70;
    height: 100%;
    width: 100%;
    max-width: 28rem;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: var(--ask-ink);
    font-family: var(--ask-font);
    font-size: .95rem;
    line-height: 1.55;
    box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-x: hidden;
}
#ask-drawer.ask-open { transform: translateX(0); }
#ask-drawer, #ask-drawer * { box-sizing: border-box; }
/* Quebrar texto longo (títulos/URLs) para não causar scroll horizontal no mobile */
.ask-a-body, .ask-q span, .ask-source, .ask-snippet, .ask-cite { overflow-wrap: anywhere; word-break: break-word; }

.ask-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--ask-border);
}
.ask-header h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ask-ink-strong); }
.ask-header-actions { display: flex; align-items: center; gap: .25rem; }
#ask-clear {
    background: none;
    border: 0;
    color: var(--ask-muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    padding: .15rem .3rem;
    border-radius: .35rem;
}
#ask-clear:hover { background: #f3f4f6; }
#ask-close {
    background: none;
    border: 0;
    color: var(--ask-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
#ask-close:hover { color: var(--ask-ink-strong); }

#ask-thread {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain; /* não arrastar a página de trás */
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ask-hint { color: var(--ask-muted); }

.ask-q { text-align: right; }
.ask-q span {
    display: inline-block;
    padding: .5rem .75rem;
    border-radius: .75rem;
    background: rgba(45, 187, 165, .15);
    color: var(--ask-ink-strong);
}
.ask-a-body {
    border-radius: .75rem;
    padding: .6rem .85rem;
    background: #f3f4f6;
    color: var(--ask-ink);
    white-space: pre-line;
}
/* Marcadores de citação inline: [2], [3]… clicáveis dentro da resposta */
.ask-cite {
    color: var(--ask-teal-dark);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.ask-cite:hover { text-decoration: underline; }

.ask-sources { margin-top: .5rem; display: flex; flex-direction: column; gap: .35rem; }
.ask-source { display: block; font-size: .8rem; color: var(--ask-teal-dark); font-weight: 600; text-decoration: none; }
.ask-source:hover { text-decoration: underline; }
.ask-snippet { margin: .1rem 0 .35rem 1rem; font-size: .8rem; color: var(--ask-muted); }
.ask-loading { color: var(--ask-muted); }

#ask-form { border-top: 1px solid var(--ask-border); padding: .75rem; }
.ask-form-row { display: flex; gap: .5rem; }
#ask-input {
    flex: 1 1 auto;
    min-width: 0; /* permite encolher no mobile (senão o placeholder empurra a linha para fora) */
    border: 1px solid var(--ask-border);
    border-radius: .5rem;
    background: #fff;
    color: var(--ask-ink-strong);
    padding: .55rem .75rem;
    font-family: var(--ask-font);
    font-size: .95rem;
    outline: none;
}
#ask-input:focus { border-color: var(--ask-teal); box-shadow: 0 0 0 2px rgba(45, 187, 165, .35); }
#ask-send {
    flex: 0 0 auto;
    border: 0;
    border-radius: .5rem;
    background: var(--ask-teal);
    color: #05372f;
    padding: .55rem 1rem;
    font-family: var(--ask-font);
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
}
#ask-send:hover { filter: brightness(1.05); }
#ask-send:disabled { opacity: .5; cursor: default; }