:root {
    /* API Platform Conference brand palette */
    --navy: #001226;
    --navy-2: #06182e;
    --panel: #0b1d36;
    --panel-2: #12294a;
    --border: #1d3a5f;
    --text: #eaf1f9;
    --muted: #8ba0bf;
    --teal: #2fc1c1;
    --cyan: #11e6f0;
    --magenta: #d52189;

    --font-body: "Raleway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-head: "Poppins", var(--font-body);
    --radius: 16px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text);
    background:
        radial-gradient(900px 500px at 80% -10%, rgba(17, 230, 240, .14) 0%, transparent 60%),
        radial-gradient(900px 600px at 0% 110%, rgba(213, 33, 137, .12) 0%, transparent 55%),
        var(--navy);
    min-height: 100vh;
    min-height: 100dvh;
}

.page {
    max-width: 760px;
    margin: 0 auto;
    padding: 2.25rem 1rem 1.5rem;
}

.page__head { text-align: center; margin-bottom: 1.25rem; }
.page__head h1 {
    font-family: var(--font-head);
    font-weight: 700;
    margin: 0 0 .35rem;
    font-size: clamp(1.4rem, 5vw, 1.9rem);
    background: linear-gradient(90deg, var(--teal), var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.page__sub { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.page__by { font-size: .8rem; opacity: .8; }

/* ── Chat panel ───────────────────────────────────────────── */
.chat {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    height: min(72vh, 640px);
}

.chat__auth {
    display: flex;
    flex-shrink: 0;
    gap: .5rem;
    align-items: center;
    padding: .55rem .9rem;
    border-bottom: 1px solid var(--border);
    background: var(--navy-2);
    font-size: .82rem;
    color: var(--muted);
}
.chat__auth a { color: var(--cyan); text-decoration: none; }
.chat__auth a:hover { text-decoration: underline; }
.chat__auth-ok { color: var(--teal); font-weight: 600; }

/* ── Help "?" popover (native <details>, no JS) ───────────── */
.chat__help { margin-left: auto; position: relative; }
.chat__help summary {
    list-style: none;
    cursor: pointer;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--cyan);
    font-weight: 700;
    user-select: none;
}
.chat__help summary::-webkit-details-marker { display: none; }
.chat__help summary:hover { border-color: var(--teal); background: rgba(47, 193, 193, .1); }
.chat__help[open] summary { background: rgba(47, 193, 193, .15); border-color: var(--teal); }
.chat__help-panel {
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    width: min(320px, 86vw);
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .9rem 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
    z-index: 5;
    color: var(--text);
    font-size: .82rem;
    line-height: 1.5;
}
.chat__help-panel h3 { font-family: var(--font-head); margin: 0 0 .4rem; font-size: .95rem; }
.chat__help-panel p { margin: 0 0 .5rem; }
.chat__help-h { color: var(--cyan); text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; font-weight: 600; margin-top: .6rem !important; }
.chat__help-sov {
    margin-top: .7rem !important;
    padding-top: .6rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
}
.chat__help-sov strong { color: var(--magenta); }

/* ── Log / messages ───────────────────────────────────────── */
.chat__log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.chat__welcome {
    margin: auto;
    max-width: 42ch;
    text-align: center;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem .5rem;
}
.chat__welcome-title { font-family: var(--font-head); margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--text); }
.chat__welcome-text { margin: 0; line-height: 1.55; font-size: .92rem; }
.chat__welcome-try { margin: .6rem 0 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cyan); }
.chat__examples { display: flex; flex-direction: column; gap: .45rem; text-align: left; }
.chat__example {
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 12px;
    padding: .6rem .8rem;
    font: inherit;
    font-size: .88rem;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.chat__example:hover { border-color: var(--teal); background: #18335a; }

@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.chat__msg { display: flex; flex-direction: column; gap: .15rem; max-width: 88%; animation: msgIn .22s ease both; }
@media (prefers-reduced-motion: reduce) { .chat__msg { animation: none; } }
.chat__msg--user { align-self: flex-end; align-items: flex-end; }
.chat__msg--assistant { align-self: flex-start; align-items: flex-start; }

.chat__role { font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 0 .35rem; }

.chat__bubble {
    padding: .7rem .95rem;
    border-radius: 14px;
    line-height: 1.55;
    font-size: .95rem;
    overflow-wrap: anywhere;
}
.chat__msg--user .chat__bubble {
    background: linear-gradient(135deg, var(--teal), #1f9bd1);
    color: #04121f;
    font-weight: 500;
    border-bottom-right-radius: 5px;
    white-space: pre-wrap;
}
.chat__msg--assistant .chat__bubble {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-bottom-left-radius: 5px;
}

/* Light formatting only (bold / line breaks / rule / links) — no tables/headings */
.chat__bubble strong { color: #fff; font-weight: 700; }
.chat__bubble hr { border: 0; border-top: 1px solid var(--border); margin: .6rem 0; }
.chat__bubble a { color: var(--cyan); text-decoration: underline; overflow-wrap: anywhere; }
.chat__bubble a:hover { color: var(--teal); }
.chat__msg--user .chat__bubble strong { color: #04121f; }
.chat__msg--user .chat__bubble a { color: #04121f; }

.chat__bubble--typing { display: inline-flex; gap: 5px; align-items: center; padding: .2rem 0; }
.chat__bubble--typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: blink 1.2s infinite both; }
.chat__bubble--typing span:nth-child(2) { animation-delay: .2s; }
.chat__bubble--typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ── Input bar ────────────────────────────────────────────── */
.chat__form {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    gap: .5rem;
    padding: .75rem;
    border-top: 1px solid var(--border);
    background: var(--navy-2);
    font-size: .95rem;
    position: relative;
    z-index: 1;
}
.chat__form input {
    flex: 1;
    min-width: 0;
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 12px;
    padding: .75rem .9rem;
    font: inherit;
    line-height: 1.3;
    outline: none;
}
.chat__form input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47, 193, 193, .18); }
.chat__form input::placeholder { color: var(--muted); }
.chat__form button {
    background: linear-gradient(135deg, var(--teal), var(--cyan));
    color: #04121f;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: .75rem 1.2rem;
    font: inherit;
    line-height: 1.3;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}
.chat__form button:disabled { opacity: .5; cursor: default; }

/* ── Credit ───────────────────────────────────────────────── */
.chat__credit {
    flex-shrink: 0;
    text-align: center;
    padding: .5rem;
    font-size: .72rem;
    color: var(--muted);
    background: var(--navy-2);
    border-top: 1px solid var(--border);
    margin-block: 0;
}
.chat__credit a { color: var(--cyan); text-decoration: none; }
.chat__credit a:hover { text-decoration: underline; }

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 640px) {
    body { font-size: 17px; }
    .page { padding: 1rem .6rem 1rem; }
    .page__head { margin-bottom: .8rem; }
    .chat { height: calc(100dvh - 8.5rem); border-radius: 14px; }
    .chat__bubble { font-size: 1rem; }
    .chat__form { font-size: 1rem; }
    .chat__form input { padding: .85rem 1rem; }
    .chat__form button { padding: .85rem 1.1rem; }
    .chat__example { font-size: .95rem; padding: .75rem .85rem; }
    .chat__help-panel { width: min(300px, 92vw); }
}