/* Barangay Assistant: a fixed-size side drawer (full screen on a phone).
   Only the thread scrolls; the header and the input stay put, so the panel
   never grows or shrinks with the length of an answer. Crimson Formal
   colours are set here once so the landing page and the Citizen Portal
   show the same drawer whatever their own variables are. */

.asst-panel, .asst-fab, .asst-backdrop {
    --a-bg: #FFFFFF; --a-soft: #F4EFE8; --a-field: #FBF9F6;
    --a-line: #E6E3DC; --a-line-strong: #DCD7CF;
    --a-ink: #1B1A18; --a-ink-soft: #45423C; --a-faint: #63605A;
    --a-red: #9E2A2B; --a-red-hover: #862223; --a-red-soft: #F7E3E1;
    --a-serif: 'Source Serif 4', Georgia, serif;
}

/* ── Launcher ── */
.asst-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 1200;
    display: flex; align-items: center; gap: 9px;
    min-height: 48px; padding: 10px 18px 10px 11px; border: none; border-radius: 30px;
    background: var(--a-ink); color: #fff; cursor: pointer;
    font-family: inherit; font-size: 0.88rem; font-weight: 700;
    box-shadow: 0 6px 20px rgba(27, 26, 24, .3);
    transition: background .15s;
}
.asst-fab:hover { background: var(--a-red); }
.asst-fab img { width: 28px; height: 28px; border-radius: 50%; background: #fff; }

/* ── Drawer ── */
.asst-backdrop {
    position: fixed; inset: 0; z-index: 1201;
    background: rgba(27, 26, 24, .35);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.asst-backdrop.is-open { opacity: 1; pointer-events: auto; }
html.asst-locked, html.asst-locked body { overflow: hidden; }

.asst-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1202;
    width: 420px; max-width: 100vw;
    display: flex; flex-direction: column;
    background: var(--a-bg); color: var(--a-ink);
    box-shadow: -20px 0 50px -20px rgba(27, 26, 24, .4);
    transform: translateX(100%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
}
.asst-panel.is-open { transform: none; visibility: visible; transition: transform .25s ease; }

.asst-panel-head {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 12px;
    padding: 16px 10px 14px 20px;
    border-bottom: 1px solid var(--a-line);
}
.asst-panel-head > img { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.asst-panel-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.asst-panel-title b { font-family: var(--a-serif); font-size: 1.15rem; font-weight: 700; }
.asst-panel-title small { font-size: 0.78rem; color: var(--a-faint); }
.asst-panel-close, .asst-panel-back {
    width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: 10px;
    background: none; color: var(--a-ink-soft); cursor: pointer; font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center;
}
.asst-panel-close:hover, .asst-panel-back:hover { background: var(--a-soft); color: var(--a-ink); }
.asst-panel-back { display: none; }

/* ── Thread: the only part that scrolls ── */
.asst-thread {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; gap: 16px;
    padding: 20px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.asst-panel-intro { padding: 8px 0 0; }
.asst-panel-intro h3 { font-family: var(--a-serif); font-size: 1.35rem; font-weight: 700; color: var(--a-ink); margin: 0 0 6px; }
.asst-panel-intro p { font-size: 0.9rem; color: var(--a-ink-soft); line-height: 1.55; margin: 0; }

.asst-row { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.asst-row.me { align-self: flex-end; max-width: 82%; }

.asst-who { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; color: var(--a-ink-soft); }
.asst-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #fff; flex-shrink: 0; }

.asst-bubble {
    font-size: 0.92rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.asst-row.me .asst-bubble {
    padding: 10px 14px;
    border-radius: 16px 16px 4px 16px;
    background: var(--a-ink); color: #fff;
}
.asst-row.error .asst-bubble {
    padding: 10px 14px; border-radius: 4px 16px 16px 16px;
    background: var(--a-red-soft); color: var(--a-red);
}

/* Quick replies offered by the last answer. */
.asst-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: -4px; }
.asst-chip {
    min-height: 36px; padding: 0 14px;
    border: 1px solid var(--a-line-strong); border-radius: 18px;
    background: var(--a-bg); color: var(--a-ink);
    font-family: inherit; font-size: 0.82rem; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.asst-chip:hover { background: var(--a-soft); border-color: var(--a-ink); }

.asst-link {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
    min-height: 42px; padding: 0 18px; margin-top: -4px;
    background: var(--a-red); color: #fff; border-radius: 10px;
    font-size: 0.86rem; font-weight: 700; text-decoration: none;
}
.asst-link::after { content: "\2192"; }
.asst-link:hover { background: var(--a-red-hover); }

/* Typing indicator, replaced in place by the real answer. */
.asst-dots { display: flex; gap: 4px; padding: 6px 0; }
.asst-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--a-faint);
    animation: asstBlink 1.2s infinite ease-in-out;
}
.asst-dots span:nth-child(2) { animation-delay: .18s; }
.asst-dots span:nth-child(3) { animation-delay: .36s; }

@keyframes asstBlink {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

.asst-hidden { display: none !important; }

/* ── Foot: topics always in reach, then the input ── */
.asst-panel-foot {
    flex-shrink: 0;
    display: flex; flex-direction: column; gap: 10px;
    padding: 10px 16px 16px;
    border-top: 1px solid var(--a-line);
}
.asst-topics { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.asst-topics::-webkit-scrollbar { display: none; }
.asst-topic {
    flex-shrink: 0; min-height: 36px; padding: 0 13px;
    border: none; border-radius: 18px;
    background: var(--a-soft); color: var(--a-ink-soft);
    font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.asst-topic:hover { background: var(--a-line); color: var(--a-ink); }

.asst-panel-form {
    display: flex; align-items: center; gap: 8px;
    border: 1.5px solid var(--a-line-strong); border-radius: 16px;
    padding: 5px 5px 5px 14px; background: var(--a-field);
}
.asst-panel-form:focus-within { border-color: var(--a-ink); }
.asst-panel-form input {
    flex: 1; min-width: 0; height: 40px;
    border: none; outline: none; background: none;
    font-family: inherit; font-size: 0.9rem; color: var(--a-ink);
}
.asst-panel-form button {
    width: 44px; height: 44px; border-radius: 12px; border: none; flex-shrink: 0;
    background: var(--a-red); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.asst-panel-form button:hover { background: var(--a-red-hover); }

@media (prefers-reduced-motion: reduce) {
    .asst-dots span { animation: none; opacity: .5; }
    .asst-thread { scroll-behavior: auto; }
    .asst-panel, .asst-panel.is-open, .asst-backdrop { transition: none; }
}

/* ── Phone: the drawer becomes the whole screen, closed with a back arrow ── */
@media (max-width: 560px) {
    .asst-panel { width: 100vw; height: 100dvh; box-shadow: none; }
    .asst-panel-head { padding: 8px 10px 8px 4px; gap: 8px; }
    .asst-panel-head > img { width: 34px; height: 34px; }
    .asst-panel-back { display: flex; }
    .asst-panel-close { display: none; }
    .asst-thread { padding: 16px; }
    .asst-row.me { max-width: 86%; }
    .asst-panel-foot { padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
    .asst-panel-form input { font-size: 16px; }
    .asst-fab { right: 16px; bottom: 16px; }
}