:root {
    --bg: #0e1013;
    --bg-2: #16191e;
    --bg-3: #1e232b;
    --line: #2a3038;
    --text: #e6e9ee;
    --muted: #8a94a3;
    --accent: #4f8cff;
    --accent-2: #2f6ae0;
    --user-bubble: #29405f;
    --agent-bubble: #1e232b;
    --ok: #35c47b;
    --off: #5b636e;
    --danger: #ff5b6a;
    --radius: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Login ---------- */
.auth-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.auth-card {
    width: 100%;
    max-width: 360px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
}
.auth-card h1 { margin: 0 0 4px; font-size: 22px; }
.auth-card .sub { color: var(--muted); margin: 0 0 22px; font-size: 14px; }
.field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; color: var(--muted); }
input[type=email], input[type=password], input[type=text], textarea {
    background: var(--bg-3);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 15px;
    width: 100%;
    outline: none;
    font-family: inherit;
}
input:focus, textarea:focus { border-color: var(--accent); }
.btn {
    background: var(--accent);
    color: white;
    border: 0;
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}
.btn:hover { background: var(--accent-2); }
.alert {
    background: rgba(255, 91, 106, .12);
    border: 1px solid rgba(255, 91, 106, .4);
    color: #ffbcc2;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 16px;
}

/* ---------- App shell ---------- */
.shell {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: 100vh;
}
.sidebar {
    background: var(--bg-2);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.sidebar-head {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand { font-weight: 700; letter-spacing: .3px; }
.brand small { color: var(--muted); font-weight: 400; }
.agent-list { overflow-y: auto; flex: 1; padding: 8px; }
.agent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--text);
}
.agent-item:hover { background: var(--bg-3); text-decoration: none; }
.agent-item.active { background: var(--bg-3); }
.avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34405a, #202634);
    display: grid; place-items: center;
    font-size: 18px;
    flex: none;
}
.agent-meta { min-width: 0; flex: 1; }
.agent-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-sub { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--off); flex: none; }
.dot.online { background: var(--ok); box-shadow: 0 0 0 3px rgba(53,196,123,.18); }
/* ---------- Topics (sidebar sub-list) ---------- */
/* Only the current agent's topics are listed, indented under it. min-width: 0 on
   the name is what keeps a long title from widening the 300px column — the same
   trap that once gave the whole page a horizontal scrollbar. */
.topic-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 10px 26px;
    padding-left: 12px;
    border-left: 1px solid var(--line);
}
.topic-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 13px;
    min-width: 0;
}
.topic-item:hover { background: var(--bg-3); color: var(--text); text-decoration: none; }
.topic-item.active { background: var(--bg-3); color: var(--text); font-weight: 600; }
.topic-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topic-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
}
.topic-dot[hidden] { display: none; }
/* The topic you are reading never nags you about itself. Doing this in CSS
   rather than in the payload keeps it in sync with the highlighted row, and
   lets the server publish one dot for every tab without knowing what each is
   showing. */
.topic-item.active .topic-dot { display: none; }
.topic-new input {
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--text);
}
.topic-new input:focus { border-style: solid; border-color: var(--accent); }
.topic-crumb { color: var(--muted); font-weight: 400; }
.topic-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
.topic-actions input {
    width: 180px;
    padding: 7px 10px;
    font-size: 13px;
}

.sidebar-foot {
    border-top: 1px solid var(--line);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--muted);
}

/* ---------- Chat ---------- */
/* min-width: 0 — sans ça, l'élément de grille refuse de passer sous la largeur
   min-content de son contenu (nom de fichier long, pièce jointe) et élargit
   toute la .shell, d'où un défilement horizontal de la page. */
.chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background:
        radial-gradient(1200px 400px at 70% -10%, rgba(79,140,255,.06), transparent),
        var(--bg);
}
.chat-head {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-2);
}
.chat-head .agent-name { font-size: 16px; }
.messages {
    flex: 1;
    overflow-y: auto;
    padding: 22px 20px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.msg { display: flex; max-width: 74%; min-width: 0; }
.msg.user { align-self: flex-end; }
.msg.agent, .msg.system { align-self: flex-start; }
.bubble {
    padding: 10px 13px;
    border-radius: 14px;
    background: var(--agent-bubble);
    border: 1px solid var(--line);
    line-height: 1.45;
    min-width: 0;
    max-width: 100%;
}
/* Only the message body preserves newlines — keeping pre-wrap on the whole
   bubble made the template's whitespace render as a phantom gap under the time. */
.bubble .text {
    white-space: pre-wrap;
    word-wrap: break-word;
}
.msg.user .bubble { background: var(--user-bubble); border-color: transparent; }
.msg.system .bubble { background: transparent; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
.bubble .meta { font-size: 11px; color: var(--muted); margin-top: 5px; display: flex; gap: 8px; }
.bubble.progress { opacity: .85; font-style: italic; }
/* Delivery receipt on a user bubble: the message reached the agent's session. */
.bubble .meta .receipt { color: var(--ok); white-space: nowrap; }

/* "agent is writing…". Lives between the thread and the composer rather than
   inside .messages, so it stays put instead of scrolling away with the bubbles.
   The [hidden] rule is load-bearing: display:flex would otherwise beat the
   browser's default [hidden] { display: none }. */
.typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 20px 8px;
    font-size: 12px;
    font-style: italic;
    color: var(--muted);
}
.typing[hidden] { display: none; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--muted);
    animation: typing-blink 1.4s infinite both;
}
.typing-dots i:nth-child(2) { animation-delay: .2s; }
.typing-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes typing-blink {
    0%, 80%, 100% { opacity: .25; }
    40% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .typing-dots i { animation: none; opacity: .6; }
}
.attach {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text);
    max-width: 100%;
    min-width: 0;
}
/* Un nom de fichier long n'a aucun point de coupure naturel : sans
   overflow-wrap il impose sa largeur entière à la bulle. min-width: 0 laisse
   le lien rétrécir pour que 📎 et la taille restent sur la même ligne. */
.attach a {
    min-width: 0;
    overflow-wrap: anywhere;
}
.attach > .file-chip { flex: none; }
/* Le plafond des vignettes porte sur le conteneur, pas sur l'image : un
   pourcentage dans le max-width de l'image fait dimensionner la puce sur la
   largeur native du fichier (d'où une puce étirée avec un grand vide à droite). */
.attach:has(img) { max-width: min(260px, 100%); }
.attach img { max-width: 100%; max-height: 220px; border-radius: 8px; display: block; }

.composer {
    border-top: 1px solid var(--line);
    padding: 12px 16px;
    background: var(--bg-2);
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.composer textarea {
    resize: none;
    max-height: 160px;
    min-height: 44px;
}
.composer .send { width: auto; padding: 11px 18px; }
.icon-btn {
    background: var(--bg-3);
    border: 1px solid var(--line);
    color: var(--muted);
    border-radius: 10px;
    padding: 11px 13px;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
}
.icon-btn:hover { color: var(--text); }
.file-chip { font-size: 12px; color: var(--muted); padding: 0 4px; align-self: center; }

.empty {
    display: grid;
    place-items: center;
    height: 100vh;
    text-align: center;
    color: var(--muted);
    padding: 24px;
}
.empty code {
    background: var(--bg-3);
    border: 1px solid var(--line);
    padding: 2px 6px;
    border-radius: 6px;
    color: var(--text);
}