*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #212121;
  --surface: #2f2f2f;
  --border: #3f3f3f;
  --text: #ececec;
  --muted: #8e8ea0;
  --user-bg: #2f6feb;
  --user-text: #fff;
  --ai-bg: #2f2f2f;
  --ai-text: #ececec;
  --bar-bg: #1a1a1a;
  --input-bg: #2f2f2f;
  --radius: 18px;
  --send: #2f6feb;
}

html, body { height: 100%; font-family: ui-sans-serif, system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; }

.layout { display: flex; flex-direction: column; height: 100dvh; max-width: 760px; margin: 0 auto; }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: var(--bar-bg); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.topbar-title { font-weight: 600; font-size: 1rem; }
.topbar button { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 0.35rem 0.75rem; border-radius: 8px; cursor: pointer; font-size: 0.85rem; transition: color .15s, border-color .15s; }
.topbar button:hover { color: var(--text); border-color: var(--text); }

/* Messages area */
.messages { flex: 1; overflow-y: auto; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 1rem; }
.messages:empty::before { content: 'Commencez une conversation…'; color: var(--muted); text-align: center; margin: auto; }

.bubble-row { display: flex; }
.bubble-row.user  { justify-content: flex-end; }
.bubble-row.ai    { justify-content: flex-start; }

.bubble { max-width: 72%; padding: 0.7rem 1rem; border-radius: var(--radius); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.bubble-row.user .bubble { background: var(--user-bg); color: var(--user-text); border-bottom-right-radius: 4px; }
.bubble-row.ai   .bubble { background: var(--ai-bg); color: var(--ai-text); border-bottom-left-radius: 4px; border: 1px solid var(--border); }

.bubble .typing { display: inline-flex; gap: 4px; align-items: center; height: 1.1em; }
.bubble .typing span { width: 6px; height: 6px; background: var(--muted); border-radius: 50%; animation: blink 1.2s infinite; }
.bubble .typing span:nth-child(2) { animation-delay: .2s; }
.bubble .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }

/* Composer */
.composer { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.75rem 1rem 1rem; background: var(--bar-bg); border-top: 1px solid var(--border); flex-shrink: 0; }
.composer-input { flex: 1; background: var(--input-bg); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-size: 0.95rem; padding: 0.65rem 1rem; resize: none; line-height: 1.5; max-height: 180px; overflow-y: auto; outline: none; transition: border-color .15s; font-family: inherit; }
.composer-input:focus { border-color: var(--send); }
.composer-input::placeholder { color: var(--muted); }
.composer-send { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--send); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .15s; }
.composer-send:hover:not(:disabled) { opacity: .85; }
.composer-send:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 480px) { .bubble { max-width: 88%; } }