:root {
  --font: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --shell: #0e0e0e;      /* fond de la barre latérale et du cadre */
  --panel: #151515;      /* zone principale, arrondie dans le cadre */
  --card: #1c1c1c;       /* zone de saisie, cartes, bulles */
  --card-2: #232323;     /* survol, badges */
  --line: #262626;
  --line-2: #303030;
  --ink: #ececec;
  --ink-2: #b4b4b4;
  --ink-3: #7a7a7a;
  --blue: #3b82f6;
  --blue-2: #2f6fe0;
  --blue-soft: rgba(59, 130, 246, .16);
  --orange: #f59e0b;
  --danger: #ef4444;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  --r: 12px;
  --r-lg: 18px;
}
* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--shell); -webkit-font-smoothing: antialiased; font-size: 14.5px; line-height: 1.55 }
button, input, textarea { font: inherit; color: inherit }
button { cursor: pointer; border: 0; background: none; padding: 0 }
[hidden] { display: none !important }
.grow { flex: 1 }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none }
.ic.sm { width: 14px; height: 14px; opacity: .7 }
::selection { background: rgba(59, 130, 246, .35) }
::-webkit-scrollbar { width: 10px } ::-webkit-scrollbar-thumb { background: #2c2c2c; border-radius: 10px; border: 3px solid var(--panel) } ::-webkit-scrollbar-track { background: transparent }

.mark { display: inline-block; width: 18px; height: 18px; border-radius: 5px; flex: none;
  background: linear-gradient(#3b82f6, #3b82f6) 0 0 / 45% 45% no-repeat, linear-gradient(#22c55e, #22c55e) 100% 0 / 45% 45% no-repeat,
    linear-gradient(#f59e0b, #f59e0b) 0 100% / 45% 45% no-repeat, linear-gradient(#ef4444, #ef4444) 100% 100% / 45% 45% no-repeat }

/* ---------- contrôles ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 12px; font-weight: 500; font-size: 14px; color: var(--ink); background: var(--card); border: 1px solid var(--line-2); transition: background .12s, border-color .12s, transform .1s; white-space: nowrap }
.btn:hover { background: var(--card-2) }
.btn:active { transform: translateY(1px) }
.btn.blue { background: var(--blue); border-color: var(--blue); color: #fff }
.btn.blue:hover { background: var(--blue-2) }
.btn.wide { width: 100%; justify-content: center; height: 42px }
.btn.sort { height: 34px; font-size: 13.5px }
.icon { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--ink-2); transition: background .12s, color .12s }
.icon:hover { background: var(--card-2); color: var(--ink) }
.ghost { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 10px; font-size: 14px; color: var(--ink-2) }
.ghost:hover { background: var(--card-2); color: var(--ink) }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 10px; border-radius: 12px; font-weight: 500; color: var(--ink-2) }
.pill.on { background: var(--card-2); color: var(--ink) }
.search { position: relative; display: flex; flex: 1; min-width: 0 }
.search input { width: 100%; height: 38px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); padding: 0 38px 0 12px; outline: none; color: var(--ink) }
.search input::placeholder { color: var(--ink-3) }
.search input:focus { border-color: #3a3a3a }
.search .ic { position: absolute; right: 12px; top: 10px; color: var(--ink-3); pointer-events: none }
.menu { position: absolute; z-index: 20; background: #1a1a1a; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; min-width: 200px }
.menu > button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px; color: var(--ink); font-size: 14px }
.menu > button:hover { background: var(--card-2) }
.menu > button.danger { color: #f87171 }
.avatar { display: inline-grid; place-items: center; border-radius: 10px; font-weight: 600; color: #fff; flex: none; user-select: none; width: 40px; height: 40px; font-size: 16px }
.avatar.sm { width: 28px; height: 28px; border-radius: 50%; font-size: 12px }
.avatar.xs { width: 20px; height: 20px; border-radius: 50%; font-size: 10px }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--card-2); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--ink) }

/* ---------- login ---------- */
#login { min-height: 100%; display: grid; place-items: center; padding: 24px }
.login-card { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 32px 28px; box-shadow: var(--shadow) }
.login-card .brand { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 22px }
.login-card h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; font-weight: 600 }
.login-card .hint { margin: 0 0 18px; color: var(--ink-3) }
.login-card input { width: 100%; height: 42px; border: 1px solid var(--line-2); background: var(--panel); border-radius: 12px; padding: 0 12px; margin-bottom: 12px; outline: none }
.login-card input:focus { border-color: var(--blue) }
.err { color: #f87171; font-size: 13px; margin: 12px 0 0 }

/* ---------- coquille ---------- */
#app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; background: var(--shell) }
#sidebar { width: 290px; flex: none; display: flex; flex-direction: column; min-height: 0; padding: 8px 8px 8px 10px; position: relative; transition: width .18s ease, opacity .18s }
#app.collapsed #sidebar { width: 0; padding: 0; opacity: 0; overflow: hidden }
.side-top { display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 2px }
.side-search { display: flex; gap: 8px; margin: 6px 0 10px }
.side-search .btn.blue { padding: 0 14px 0 12px }
.side-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px }
.side-nav button { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 10px; color: var(--ink); font-size: 15px; text-align: left }
.side-nav button:hover { background: var(--card-2) }
.side-nav .ic { color: var(--ink-2) }
#conv-list { flex: 1; overflow-y: auto; min-height: 0; padding-right: 2px }
.group-label { font-size: 12px; color: var(--ink-3); padding: 14px 10px 6px }
.conv { display: flex; align-items: center; gap: 6px; width: 100%; height: 40px; padding: 0 6px 0 10px; border-radius: 10px; text-align: left; color: var(--ink-2); font-size: 15px }
.conv:hover { background: var(--card); color: var(--ink) }
.conv.active { background: var(--card-2); color: var(--ink) }
.conv .t { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.conv .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: pulse 1.2s ease-in-out infinite; flex: none }
.conv .x { opacity: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); flex: none }
.conv .x .ic { width: 15px; height: 15px }
.conv:hover .x, .conv.active .x { opacity: 1 } .conv .x:hover { color: #f87171; background: var(--panel) }
.empty-list { padding: 20px 10px; color: var(--ink-3); font-size: 13.5px }
.side-user { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 12px; text-align: left; margin-top: 6px }
.side-user:hover { background: var(--card) }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, #cfcfcf 45%, #8a8a8a 100%); color: #111; display: grid; place-items: center; font-weight: 600; font-size: 14px; flex: none }
.user-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.2 }
.user-text b { font-weight: 600; font-size: 15px } .user-text small { color: var(--ink-2); font-size: 13.5px }
.side-user .ic { color: var(--ink-2) }
#user-menu { left: 12px; bottom: 64px; min-width: 260px }

#main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); border-radius: 16px; margin: 8px 8px 8px 0; position: relative; overflow: hidden }
#app.collapsed #main { margin-left: 8px }
#topbar { height: 60px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 16px 0 20px; position: relative }
#menu { display: none }
#conv-title { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60% }
#more-menu { right: 16px; top: 50px }

#thread { flex: 1; overflow-y: auto; min-height: 0; scroll-behavior: smooth }
#messages { max-width: 900px; margin: 0 auto; padding: 18px 24px 8px; display: flex; flex-direction: column; gap: 6px }

/* ---------- état vide ---------- */
#empty { max-width: 900px; margin: 0 auto; padding: 22vh 24px 40px }
#greeting { text-align: center; font-size: 34px; font-weight: 500; letter-spacing: -.01em; margin: 0 0 30px; color: #f2f2f2 }
.chat-with { margin-top: 56px }
.chat-with h2 { font-size: 20px; font-weight: 600; margin: 0 0 16px }
.chat-with-tools { display: flex; gap: 10px; margin-bottom: 16px }
.chat-with-tools .btn { height: 38px }
.tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px }
.tabs > button:not(.btn) { height: 42px; padding: 0 14px; color: var(--ink-2); font-size: 15px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px }
.tabs > button:not(.btn):hover { color: var(--ink) }
.tabs > button.on { color: var(--ink); border-bottom-color: var(--ink) }
.agent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.agent-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); text-align: left; transition: background .12s, border-color .12s; min-height: 120px }
.agent-card:hover { background: var(--card-2); border-color: #3a3a3a }
.agent-card.selected { border-color: var(--blue) }
.agent-card .head { display: flex; align-items: center; gap: 12px }
.agent-card .n { font-weight: 600; font-size: 15px } .agent-card .by { color: var(--ink-2); font-size: 13.5px; display: block; line-height: 1.2 }
.agent-card .d { color: var(--ink-2); font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }

/* ---------- messages ---------- */
.msg.user { display: flex; flex-direction: column; align-items: flex-end; margin: 10px 0 18px }
.msg.user .time { font-size: 12.5px; color: var(--ink-3); margin: 0 12px 6px 0 }
.msg.user .bubble { max-width: 78%; background: var(--card-2); border-radius: 16px; padding: 10px 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px }
.msg.assistant { margin: 4px 0 18px; font-size: 15px }
.msg.assistant .head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px }
.msg.assistant .name { font-weight: 600 } .msg.assistant .time { color: var(--ink-3); font-size: 13px }
.msg.assistant .meta { color: var(--ink-3); font-size: 14px; margin: 0 0 14px }
.msg.assistant .body { padding-left: 0 }
.tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px }
.tool { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); background: var(--card); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px }
.tool .ic { width: 13px; height: 13px } .tool.live .ic { animation: spin 1s linear infinite }
.thinking { display: inline-flex; gap: 5px; align-items: center; height: 22px }
.thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: pulse 1.2s ease-in-out infinite }
.thinking i:nth-child(2) { animation-delay: .2s } .thinking i:nth-child(3) { animation-delay: .4s }
.msg .actions { display: flex; align-items: center; gap: 2px; margin-top: 14px; color: var(--ink-2) }
.msg .actions .icon { width: 30px; height: 30px } .msg .actions .icon .ic { width: 17px; height: 17px }
.msg .actions .credits { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px; border-radius: 10px; font-size: 13.5px; color: var(--ink-2) }
.msg .actions .credits:hover { background: var(--card-2) }
.msg-err { color: #fca5a5; font-size: 13.5px; background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .3); border-radius: 10px; padding: 8px 12px; margin-top: 10px }
.cursor::after { content: ""; display: inline-block; width: 7px; height: 16px; background: var(--ink); vertical-align: -3px; margin-left: 2px; animation: pulse .9s steps(2) infinite }

.md { overflow-wrap: anywhere; line-height: 1.6 }
.md > :first-child { margin-top: 0 } .md > :last-child { margin-bottom: 0 }
.md p { margin: 0 0 14px } .md ul, .md ol { padding-left: 26px; margin: 0 0 14px } .md li { margin: 4px 0 }
.md h1, .md h2, .md h3, .md h4 { margin: 20px 0 10px; line-height: 1.3; font-weight: 600 } .md h1 { font-size: 22px } .md h2 { font-size: 18px } .md h3 { font-size: 16px } .md h4 { font-size: 15px }
.md blockquote { margin: 0 0 14px; padding: 2px 14px; border-left: 3px solid var(--line-2); color: var(--ink-2) }
.md a { color: #7aa8ff }
.md code { font-family: var(--mono); font-size: 13px; background: var(--card-2); padding: 1px 6px; border-radius: 6px }
.md pre { position: relative; background: #0c0c0c; border: 1px solid var(--line); color: #e6e6e6; border-radius: 12px; padding: 14px 16px; overflow-x: auto; margin: 0 0 14px; font-size: 13px; line-height: 1.55 }
.md pre code { background: none; padding: 0; color: inherit; font-size: inherit }
.md pre .copy { position: absolute; top: 8px; right: 8px; font-size: 11.5px; color: var(--ink-2); background: var(--card-2); padding: 3px 9px; border-radius: 7px; opacity: 0; transition: opacity .12s }
.md pre:hover .copy { opacity: 1 }
.md table { border-collapse: collapse; margin: 0 0 14px; font-size: 14px; display: block; overflow-x: auto; max-width: 100% }
.md th, .md td { border: 1px solid var(--line-2); padding: 7px 12px; text-align: left } .md th { background: var(--card); font-weight: 600 }
.md hr { border: 0; border-top: 1px solid var(--line-2); margin: 16px 0 }
.md img { max-width: 100%; border-radius: 10px }
.md strong { font-weight: 600 }

/* ---------- zone de saisie ---------- */
#composer-wrap { max-width: 900px; margin: 0 auto; width: 100%; padding: 0 24px }
#composer-slot-bottom:not(:empty) { flex: none; padding: 6px 0 14px }
#composer-slot-top:not(:empty) { margin: 0 auto; max-width: 900px }
.composer { border: 1px solid var(--line-2); border-radius: 18px; background: var(--card); padding: 14px 14px 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); transition: border-color .12s }
.composer:focus-within { border-color: #3d3d3d }
#input { width: 100%; border: 0; outline: none; resize: none; padding: 2px 4px 8px; max-height: 40vh; line-height: 1.5; background: transparent; font-size: 16px; color: var(--ink) }
#input::placeholder { color: var(--ink-3) }
.composer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.composer-row .left, .composer-row .right { display: flex; align-items: center; gap: 6px; position: relative }
.agent-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 5px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line-2); font-size: 14px; font-weight: 500 }
.agent-chip:hover { border-color: #3a3a3a }
.round { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--card-2); border: 1px solid var(--line-2); color: var(--ink-2) }
.round:hover { color: var(--ink) }
.round .ic { width: 15px; height: 15px }
#agent-menu { left: 0; bottom: 38px; min-width: 320px }
#agent-menu .avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 13px }
#agent-menu .txt { display: flex; flex-direction: column; min-width: 0 } #agent-menu .txt small { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hint { font-size: 13px; color: var(--ink-3); margin-right: 6px }
.model-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; height: 32px; padding: 0 6px 0 8px; border-radius: 10px; color: var(--ink); font-size: 15px }
.model-btn:hover { background: var(--card-2) }
.model-btn .ic:first-child { color: var(--ink-2) }
.picker { right: 0; bottom: 40px; display: flex; gap: 6px; padding: 8px; min-width: 460px }
.picker-col { flex: 1; min-width: 200px }
.picker-title { font-size: 12px; color: var(--ink-3); padding: 6px 10px 4px; text-transform: uppercase; letter-spacing: .04em }
.picker button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px }
.picker button:hover { background: var(--card-2) }
.picker button .txt { display: flex; flex-direction: column; flex: 1; min-width: 0 } .picker button small { color: var(--ink-3); font-size: 12px }
.picker button .ic { width: 15px; height: 15px; opacity: 0; color: var(--blue) } .picker button.on .ic { opacity: 1 }
.send { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; transition: background .12s, transform .1s }
.send .ic { width: 16px; height: 16px; stroke-width: 2.2 }
.send:hover { background: var(--blue-2) } .send:active { transform: scale(.95) }
.send.stop { background: var(--card-2); color: var(--ink); border: 1px solid var(--line-2) }
#mic.on { color: #f87171 }

#composer-slot-top .menu { bottom: auto; top: 40px }
#scrim { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 9 }
@keyframes pulse { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
@keyframes spin { to { transform: rotate(360deg) } }

@media (max-width: 900px) {
  #sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 10; background: var(--shell); transform: translateX(-100%); transition: transform .2s ease; width: 300px; padding: 8px }
  #app.side-open #sidebar { transform: none } #app.side-open #scrim { display: block }
  #menu { display: inline-grid } #main { margin: 0; border-radius: 0 }
  #topbar { padding: 0 8px } .ghost { display: none }
  .agent-grid { grid-template-columns: 1fr } .chat-with-tools .btn { display: none }
  #empty { padding-top: 12vh } #greeting { font-size: 26px }
  #messages, #composer-wrap { padding: 12px 12px 0 }
  .msg.user .bubble { max-width: 92% }
  .picker { min-width: 0; flex-direction: column; right: -60px }
  .hint, #mic, .model-btn .ic:first-child, .round, .tabs .sort { display: none }
  .model-btn { padding-left: 4px; font-size: 14px; gap: 6px }
  #topbar { display: flex !important; height: 48px } #topbar[hidden] #more-btn { display: none } /* le bouton menu doit rester accessible sur l'accueil */
  .composer-row .left { min-width: 0; overflow: hidden } .composer-row .right { flex: none }
  .agent-chip { max-width: 130px } .agent-chip > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .tabs { overflow-x: auto; white-space: nowrap } .tabs > button:not(.btn) { padding: 0 10px; font-size: 14px; flex: none }
  .chat-with-tools .search { flex: 1 }
}