/* src/frontend/features/chat/chat.css â€” V11.6 (Send button fixed, RAG styles, mobile ergonomics++) */
:root{
  --glass-bg: rgba(22,22,26,.55);
  --glass-blur: 18px;
  --glass-border-color: rgba(255,255,255,.10);
  --glass-shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius-xl: 18px;
  --color-text-primary:#e9e9ef;
  --chat-bubble-width: 880px;
  --bubbleW: min(var(--chat-bubble-width), calc(100% - 32px));
  --color-user-start:#6d28d9;
  --color-user-end:#a855f7;
  --color-anima-start:#be123c;
  --color-anima-end:#fb7185;
  --color-neo-start:#1d4ed8;
  --color-neo-end:#38bdf8;
  --color-nexus-start:#0f766e;
  --color-nexus-end:#34d399;
  --color-global-start:#facc15;
  --color-global-end:#fde047;
  --chat-gap: 12px;
  --chat-gap-lg: 16px;
  --input-height: 52px;
  --input-radius: 14px;
  --btn-height: 38px;
  --btn-radius: 12px;
  --badge-radius: 999px;
  --shadow-soft: 0 8px 20px rgba(0,0,0,.25);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --ui: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
/* === Conteneur chat === */
.chat-container{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid var(--glass-border-color);
  border-radius:var(--radius-xl);
  box-shadow: var(--glass-shadow);
  display:flex; flex-direction:column; height:100%;
  min-height:0;
  overflow:hidden;
  position:relative;
  z-index:1;
}
.chat-body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.chat-auth-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:32px 24px;
  text-align:center;
  background:rgba(15,23,42,.78);
  color:#f8fafc;
  z-index:6;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.chat-auth-overlay[hidden]{display:none;}
.chat-auth-overlay__content{
  max-width:360px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.chat-auth-overlay__title{
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.01em;
}
.chat-auth-overlay__text{
  font-size:1rem;
  line-height:1.5;
  color:rgba(226,232,240,.82);
}
.chat-auth-overlay__action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:.55rem 1.6rem;
  border-radius:999px;
  border:1px solid rgba(96,165,250,.6);
  background:rgba(37,99,235,.28);
  color:#f1f5f9;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.chat-auth-overlay__action:hover{
  background:rgba(59,130,246,.42);
  box-shadow:0 12px 32px rgba(30,64,175,.35);
  transform:translateY(-1px);
}
.chat-auth-overlay__action:focus-visible{
  outline:3px solid rgba(191,219,254,.9);
  outline-offset:2px;
}
.chat-auth-required .chat-footer,
.chat-auth-required .chat-body{
  pointer-events:none;
}

.chat-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:16px 18px 12px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.chat-header-left{
  display:flex; align-items:center; gap:12px;
}
.chat-header .agent-selector{
  margin-left:auto;
  margin-right:auto;
  padding-top:8px;
  overflow:visible;
}

.chat-header .tabs-container,
.chat-container .tabs-container{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:4px 4px 6px;
  border-radius:999px;
  border:none;
  background:transparent;
  box-shadow:none;
  max-width:100%;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.chat-header .tabs-container::-webkit-scrollbar,
.chat-container .tabs-container::-webkit-scrollbar{ display:none; }
.chat-header .agent-selector .button-tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.43rem 1.04rem;
  border-radius:999px;
  border:1px solid var(--agent-tab-border, rgba(148,163,184,.28));
  background:var(--agent-tab-bg, rgba(15,23,42,.6));
  color:var(--agent-tab-color, rgba(226,232,240,.9));
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .25s var(--ease-out-quint), box-shadow .25s var(--ease-out-quint), border-color .25s var(--ease-out-quint), color .25s var(--ease-out-quint), background .25s var(--ease-out-quint);
  white-space:nowrap;
  flex-shrink:0;
  min-width:0;
  overflow:hidden;
}
.chat-header .agent-selector .button-tab:hover{
  transform:translateY(-1px);
  background:var(--agent-tab-bg-hover, rgba(15,23,42,.55));
  border-color:var(--agent-tab-border-hover, rgba(148,163,184,.4));
  color:var(--agent-tab-color-hover, #f8fafc);
}
.chat-header .agent-selector .button-tab:focus-visible{
  outline:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.28);
}
.chat-header .agent-selector .button-tab.active{
  transform:translateY(-1px);
  background:var(--agent-tab-bg-active, var(--agent-tab-bg-hover, rgba(37,99,235,.24)));
  border-color:var(--agent-tab-border-active, rgba(59,130,246,.65));
  color:var(--agent-tab-color-active, #f8fafc);
}
.button-tab .tab-icon{ display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.button-tab .tab-icon svg{ width:14px; height:14px; display:block; }
.button-tab .tab-label{ display:inline-block; }
.button-tab:hover{ color:#fff; border-color: rgba(148,163,184,.35); background: rgba(15,23,42,.2); }
.button-tab.active{
  color:#fff;
  border-color: rgba(59,130,246,.65);
  transform: translateY(-1px);
}
.chat-header .agent-selector .button-tab.agent--anima{
  --agent-tab-bg: linear-gradient(140deg, rgba(244,63,94,.26), rgba(248,113,113,.1));
  --agent-tab-bg-hover: linear-gradient(140deg, rgba(244,63,94,.34), rgba(248,113,113,.18));
  --agent-tab-bg-active: linear-gradient(140deg, rgba(244,63,94,.48), rgba(248,113,113,.24));
  --agent-tab-border: rgba(244,63,94,.38);
  --agent-tab-border-hover: rgba(244,63,94,.52);
  --agent-tab-border-active: rgba(244,63,94,.62);
  --agent-tab-color: #fff;
  --agent-tab-color-hover: #fff;
  --agent-tab-color-active: #fff;
}
.chat-header .agent-selector .button-tab.agent--neo{
  --agent-tab-bg: linear-gradient(140deg, rgba(59,130,246,.22), rgba(37,99,235,.1));
  --agent-tab-bg-hover: linear-gradient(140deg, rgba(59,130,246,.3), rgba(37,99,235,.16));
  --agent-tab-bg-active: linear-gradient(140deg, rgba(59,130,246,.45), rgba(37,99,235,.22));
  --agent-tab-border: rgba(59,130,246,.42);
  --agent-tab-border-hover: rgba(59,130,246,.56);
  --agent-tab-border-active: rgba(59,130,246,.68);
  --agent-tab-color: #f8fafc;
  --agent-tab-color-hover: #f8fafc;
  --agent-tab-color-active: #f8fafc;
}
.chat-header .agent-selector .button-tab.agent--nexus{
  --agent-tab-bg: linear-gradient(140deg, rgba(34,197,94,.22), rgba(15,118,110,.08));
  --agent-tab-bg-hover: linear-gradient(140deg, rgba(34,197,94,.3), rgba(15,118,110,.16));
  --agent-tab-bg-active: linear-gradient(140deg, rgba(34,197,94,.45), rgba(15,118,110,.22));
  --agent-tab-border: rgba(34,197,94,.38);
  --agent-tab-border-hover: rgba(34,197,94,.52);
  --agent-tab-border-active: rgba(34,197,94,.62);
  --agent-tab-color: #f8fafc;
  --agent-tab-color-hover: #f8fafc;
  --agent-tab-color-active: #f8fafc;
}
.chat-header .agent-selector .button-tab.agent--global{
  --agent-tab-bg: linear-gradient(140deg, rgba(250,204,21,.3), rgba(253,224,71,.12));
  --agent-tab-bg-hover: linear-gradient(140deg, rgba(250,204,21,.38), rgba(253,224,71,.18));
  --agent-tab-bg-active: linear-gradient(140deg, rgba(250,204,21,.5), rgba(253,224,71,.24));
  --agent-tab-border: rgba(250,204,21,.45);
  --agent-tab-border-hover: rgba(250,204,21,.6);
  --agent-tab-border-active: rgba(250,204,21,.72);
  --agent-tab-color: #f8fafc;
  --agent-tab-color-hover: #f8fafc;
  --agent-tab-color-active: #f8fafc;
}
.chat-header .agent-selector .button-tab.agent--assistant{
  --agent-tab-bg: linear-gradient(140deg, rgba(71,85,105,.36), rgba(15,23,42,.6));
  --agent-tab-bg-hover: linear-gradient(140deg, rgba(71,85,105,.44), rgba(15,23,42,.68));
  --agent-tab-bg-active: linear-gradient(140deg, rgba(71,85,105,.54), rgba(15,23,42,.75));
  --agent-tab-border: rgba(148,163,184,.38);
  --agent-tab-border-hover: rgba(148,163,184,.5);
  --agent-tab-border-active: rgba(148,163,184,.6);
  --agent-tab-shadow: 0 8px 20px rgba(15,23,42,.28);
  --agent-tab-shadow-hover: 0 12px 30px rgba(15,23,42,.32);
  --agent-tab-shadow-active: 0 18px 36px rgba(15,23,42,.36);
  --agent-tab-color: #e2e8f0;
  --agent-tab-color-hover: #f8fafc;
  --agent-tab-color-active: #f8fafc;
}

.chat-header-right{
  display:flex; align-items:center; gap:12px;
}
.chat-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.chat-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(15,23,42,.35);
  color:#e2e8f0;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.chat-action-btn svg{ pointer-events:none; }
.chat-action-btn:hover{
  background:rgba(30,41,59,.65);
  border-color:rgba(148,163,184,.4);
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(15,23,42,.35);
}
.chat-action-btn:disabled,
.chat-action-btn.is-disabled{
  opacity:.45;
  pointer-events:none;
  box-shadow:none;
  transform:none;
}
.chat-header-right .auth-badge{
  position:static;
  top:auto; right:auto;
  box-shadow:0 8px 18px rgba(15,23,42,.45);
}
.chat-title{
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.02em;
}
.chat-auth-host{
  display:flex;
  align-items:center;
  gap:10px;
}
.auth-badge{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.25);
  background: rgba(15,23,42,.6);
  color:#e2e8f0;
  font-size:12px;
  box-shadow:0 10px 24px rgba(2,6,23,.35);
  backdrop-filter: blur(16px);
}
.auth-badge.is-floating{
  position:fixed;
  top:16px;
  right:16px;
  z-index:2147483647;
}
.auth-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#f97316;
  box-shadow:0 0 0 2px rgba(255,255,255,.12);
}
.auth-button{
  background:none;
  border:none;
  color:inherit;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  padding:4px 0;
}
.auth-button:hover{ color:#93c5fd; }
.auth-model-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.25);
  background: rgba(15,23,42,.5);
  font-size:11px;
  letter-spacing:.03em;
}
.model-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.55);
  border:1px solid rgba(148,163,184,.28);
  color:#e5e7eb;
  font-size:12px;
  font-weight:500;
  letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(2,6,23,.35);
}
.model-badge[hidden]{display:none!important;}
.model-badge.is-fallback{
  border-color:rgba(245,158,11,.65);
  color:#fef3c7;
  background:linear-gradient(135deg, rgba(63,36,9,.9), rgba(234,179,8,.45));
  box-shadow:0 12px 28px rgba(250,204,21,.25);
}
/* === Zone messages === */
.messages{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:18px 18px 140px 18px;
  scroll-behavior:smooth;
}
.messages .placeholder{
  opacity:.6;
  padding:18px;
  text-align:center;
  font-size:14px;
}
.message{
  display:flex;
  flex-direction:column;
  gap:8px;
  width: var(--bubbleW);
  margin: var(--chat-gap) auto;
  align-items:flex-start;
}
.message--user{
  align-items:flex-end;
  text-align:right;
}
.message-meta .meta-separator{ opacity:.65; }
.message-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.message-meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  min-width:0;
}
.message-actions{
  display:flex;
  align-items:center;
  gap:6px;
  color:rgba(226,232,240,.82);
  flex-shrink:0;
}
.message-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.35);
  color:#e2e8f0;
  padding:0;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
}

.opinion-actions{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.message-meta__title{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.message-meta__title .opinion-actions{
  margin-left:6px;
}
.opinion-request-btn{
  --agent-color: rgba(148,163,184,.45);
  width:26px;
  height:26px;
  border-radius:50%;
  border:0;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--agent-color);
  box-shadow:inset 0 0 0 2px rgba(15,23,42,.45);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.opinion-request-btn::after{
  content:'';
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(15,23,42,.85);
  opacity:.55;
}
.opinion-request-btn:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 0 0 2px rgba(15,23,42,.6),0 8px 16px rgba(15,23,42,.35);
}
.opinion-request-btn:focus-visible{
  outline:2px solid var(--agent-color);
  outline-offset:2px;
}
.opinion-request-btn[disabled],
.opinion-request-btn[aria-disabled="true"]{
  opacity:.35;
  pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(15,23,42,.25);
}
.message-badge{
  display:inline-block;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
  color:rgba(226,232,240,.85);
  margin-top:2px;
}
.message-badge--opinion{
  background:rgba(244,114,182,.22);
  color:rgba(255,241,242,.95);
}
.message-action svg{ width:16px; height:16px; }
.message-action:hover{
  background:rgba(30,41,59,.65);
  border-color:rgba(148,163,184,.45);
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(15,23,42,.35);
}
.message-action[disabled],
.message-action[aria-disabled="true"],
.message-action.is-disabled{
  opacity:.45;
  pointer-events:none;
  box-shadow:none;
  transform:none;
}
.message-action.is-copied{
  border-color:rgba(34,197,94,.55);
  background:rgba(22,163,74,.35);
  color:#bbf7d0;
}
.message-action.is-error{
  border-color:rgba(248,113,113,.6);
  background:rgba(127,29,29,.4);
  color:#fecaca;
}
.message-text{ margin-top:2px; }
.message--user .message-header{ justify-content:flex-end; color:#f3e8ff; }
.message--anima .message-header{ color:#fee2e2; }
.message--neo .message-header{ color:#e0f2fe; }
.message--nexus .message-header{ color:#dcfce7; }
.message--global .message-header{ color:#fef08a; }
.message--assistant .message-header{ color:rgba(226,232,240,.85); }
.message-name{ font-weight:700; }
.message-separator{ opacity:.6; }
.message-time{ font-size:12px; letter-spacing:.02em; }
.message-bubble{
  background: rgba(15,23,42,.65);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:12px 16px;
  color:var(--color-text-primary);
  line-height:1.55;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  align-self:flex-start;
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.message--user .message-bubble{
  background: var(--metal-blue-gradient, linear-gradient(140deg, #60a5fa, #3b82f6, #2563eb));
  border-color: rgba(59,130,246,.5);
  color:#eff6ff;
  align-self:flex-end;
  text-align:left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 8px 20px rgba(59,130,246,0.25);
}
.message--anima .message-bubble{
  background: linear-gradient(140deg,var(--color-anima-start),var(--color-anima-end));
  border-color: rgba(244,114,182,.45);
  color:#fff5f7;
}
.message--neo .message-bubble{
  background: linear-gradient(140deg,var(--color-neo-start),var(--color-neo-end));
  border-color: rgba(59,130,246,.45);
  color:#eff6ff;
}
.message--nexus .message-bubble{
  background: linear-gradient(140deg,var(--color-nexus-start),var(--color-nexus-end));
  border-color: rgba(45,212,191,.45);
  color:#ecfdf5;
}
.message--global .message-bubble{
  background: linear-gradient(140deg,var(--color-global-start),var(--color-global-end));
  border-color: rgba(250,204,21,.4);
  color:#1f2937;
}
.message--assistant .message-bubble{
  background: rgba(30,41,59,.75);
  border-color: rgba(148,163,184,.28);
  color:#e2e8f0;
}
.message-text{ font-size:0.95rem; line-height:1.6; }
.message-text p{ margin-bottom:0.75rem; }
.message-text p:last-child{ margin-bottom:0; }
/* Code/pre */
.message-bubble pre,
.message-bubble code{
  font-family: var(--mono);
  font-size: 13px;
  background: rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 10px;
  overflow:auto;
}
/* Citations / sources (RAG) */
.rag-sources{
  padding:0 18px 18px;
  margin-top:12px;
}

.rag-sources-panel{
  background:rgba(15,23,42,.6);
  border:1px solid rgba(148,163,184,.22);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 18px 34px rgba(2,6,23,.45);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.rag-sources-panel.is-open{
  border-color:rgba(148,163,184,.28);
  background:rgba(15,23,42,.68);
}
.rag-sources-panel.is-collapsed{
  padding:10px 14px;
  border-color:rgba(148,163,184,.18);
  box-shadow:0 12px 24px rgba(2,6,23,.35);
}

.rag-sources-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.rag-sources-summary{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(226,232,240,.72);
}
.rag-sources-panel.is-collapsed .rag-sources-summary{
  color:rgba(226,232,240,.58);
}

.rag-sources-count{
  font-weight:600;
  color:rgba(94,234,212,.78);
}
.rag-sources-panel.is-collapsed .rag-sources-count{
  color:rgba(148,163,184,.65);
}

.rag-sources-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.26);
  background:rgba(15,23,42,.45);
  color:rgba(226,232,240,.82);
  transition:background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rag-sources-toggle:hover{
  background:rgba(30,41,59,.65);
  border-color:rgba(148,163,184,.4);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.35);
}
.rag-sources-toggle-icon{
  position:relative;
  width:12px;
  height:12px;
}
.rag-sources-toggle-icon::before,
.rag-sources-toggle-icon::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:12px;
  height:2px;
  background:currentColor;
  border-radius:1px;
  transform:translate(-50%,-50%);
}
.rag-sources-toggle-icon::after{
  width:2px;
  height:12px;
}
.rag-sources-panel.is-open .rag-sources-toggle-icon::after{
  opacity:0;
}

.rag-source-list{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.rag-sources-panel.is-collapsed .rag-source-list{
  display:none;
}

.rag-source-button{
  width:100%;
  text-align:left;
  border:1px solid rgba(148,163,184,.24);
  border-radius:12px;
  background:rgba(17,24,39,.6);
  color:#e2e8f0;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.rag-source-button:hover{
  border-color:rgba(56,189,248,.5);
  background:rgba(17,24,39,.78);
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(2,6,23,.45);
}

.rag-source-button:focus-visible{
  outline:2px solid rgba(94,234,212,.7);
  outline-offset:2px;
}

.rag-source-line{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.86rem;
  font-weight:600;
}

.rag-source-index{
  width:22px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(59,130,246,.28);
  color:#bfdbfe;
  font-size:.72rem;
  font-weight:700;
}

.rag-source-icon svg{
  width:14px;
  height:14px;
  display:block;
  color:rgba(226,232,240,.75);
}

.rag-source-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rag-source-excerpt{
  font-size:.74rem;
  line-height:1.4;
  color:rgba(226,232,240,.7);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.25);
  background: rgba(15,23,42,.45);
  color:#e2e8f0;
  font-size:12px;
  line-height:1;
  letter-spacing:.01em;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.chip svg{ width:14px; height:14px; display:block; }

/* Loader dans la zone messages */
.loader{
  width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  animation: spin 1s linear infinite;
  margin: 6px auto;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.blinking-cursor{
  display:inline-block;
  margin-left:2px;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink{ to { opacity: 0; } }
/* === Footer (input + actions) === */
.chat-footer{
  position:sticky;
  bottom:0;
  left:0;
  right:0;
  margin-top:auto;
  padding:12px 18px 16px;
  background:linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.7) 48%, rgba(15,23,42,.92) 100%);
  backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.08);
}
.chat-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  max-width:var(--bubbleW);
  margin:0 auto;
}
.chat-composer{
  display:flex;
  width:100%;
}

.chat-input-shell{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:6px 10px;
  padding:8px 10px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.92);
  box-shadow:0 18px 38px rgba(2,6,23,.45);
  transition:border-color .2s ease, box-shadow .2s ease;
  position:relative;
  z-index:1;
}

.chat-input-shell:focus-within{
  border-color:rgba(129,140,248,.6);
  box-shadow:0 22px 48px rgba(99,102,241,.32);
}

.chat-rag-toggle{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  order:0;
}

.chat-rag-toggle__button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.32);
  background:linear-gradient(135deg, rgba(15,23,42,.9), rgba(30,41,59,.78));
  color:rgba(226,232,240,.85);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
  box-shadow:0 12px 28px rgba(2,6,23,.45);
}

.chat-rag-toggle__button:hover{
  transform:translateY(-1px);
  border-color:rgba(59,130,246,.45);
  color:#f8fafc;
}

.chat-rag-toggle__button:focus-visible{
  outline:2px solid rgba(94,234,212,.7);
  outline-offset:2px;
}

.chat-rag-toggle__button.is-on{
  border-color:rgba(45,212,191,.65);
  background:linear-gradient(135deg, rgba(17,94,89,.88), rgba(13,148,136,.64));
  color:#e0f2f1;
  box-shadow:0 16px 34px rgba(15,118,110,.45);
}

.chat-rag-toggle__label{
  font-size:.62rem;
  letter-spacing:.16em;
}

.chat-rag-toggle__icon svg{
  width:14px;
  height:14px;
  display:block;
}

.chat-rag-toggle__state{
  font-size:.64rem;
  letter-spacing:.04em;
  text-transform:none;
  color:rgba(226,232,240,.65);
}

.chat-rag-toggle__button.is-on .chat-rag-toggle__state{
  color:#5eead4;
}

.chat-doc-chips{
  display:flex;
  flex-direction:column;
  width:100%;
  order:1;
  gap:6px;
}
.chat-doc-chips[hidden]{ display:none !important; }
.chat-doc-chips__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.chat-doc-chips__title{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(226,232,240,.72);
}
.chat-doc-chips__clear{
  background:none;
  border:none;
  color:rgba(148,163,184,.9);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  padding:2px 6px;
  border-radius:999px;
  transition:color .2s ease, background .2s ease;
}
.chat-doc-chips__clear:hover{
  color:#bfdbfe;
  background:rgba(59,130,246,.12);
}
.chat-doc-chips__clear:disabled{
  opacity:.4;
  cursor:default;
  background:transparent;
}
.chat-doc-chips__list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.chat-doc-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.32);
  background:rgba(15,23,42,.7);
  color:#e2e8f0;
  font-size:.75rem;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.chat-doc-chip:hover{
  border-color:rgba(148,163,184,.6);
  background:rgba(30,41,59,.8);
  transform:translateY(-1px);
}
.chat-doc-chip:focus-visible{
  outline:0;
  box-shadow:0 0 0 2px rgba(148,163,184,.6);
}
.chat-doc-chip__icon{
  width:12px;
  height:12px;
  border:1px solid currentColor;
  border-radius:3px;
  opacity:.8;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.chat-doc-chip__icon::after{
  content:'';
  width:6px;
  height:6px;
  border-radius:2px;
  background:currentColor;
  opacity:.4;
}
.chat-doc-chip__label{
  white-space:nowrap;
}
.chat-doc-chip__status{
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  padding:1px 6px;
  border-radius:999px;
  background:rgba(94,234,212,.14);
  color:#5eead4;
}
.chat-doc-chip__status--processing{
  background:rgba(250,204,21,.16);
  color:#facc15;
}
.chat-doc-chip__status--error{
  background:rgba(248,113,113,.16);
  color:#f87171;
}
.chat-doc-chip__close{
  font-size:.8rem;
  line-height:1;
  opacity:.7;
}
.chat-doc-chips.is-disabled .chat-doc-chip{
  opacity:.6;
}
.chat-doc-chips.is-disabled .chat-doc-chips__title{
  color:rgba(148,163,184,.6);
}

.chat-input{
  flex:1 1 320px;
  order:2;
  min-width:0;
  width:100%;
  min-height:40px;
  max-height:40vh;
  background:transparent;
  border:none;
  color:#f8fafc;
  font-size:1rem;
  line-height:1.55;
  padding:0;
  margin:0;
  resize:none;
  outline:none;
  overflow-y:auto;
}
.chat-input::placeholder{
  color:rgba(226,232,240,.5);
  font-style:italic;
}
.chat-send-button{
  display:flex;
  align-items:center;
  justify-content:center;
  order:3;
  align-self:flex-end;
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(129,140,248,.5);
  background:linear-gradient(145deg, rgba(99,102,241,.85), rgba(59,130,246,.9));
  color:#fff;
  box-shadow:0 16px 28px rgba(59,130,246,.35);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.chat-send-button:hover{
  transform:translateY(-1px);
  box-shadow:0 20px 34px rgba(59,130,246,.45);
}
.chat-send-button:active{
  transform:translateY(0);
}
.chat-send-button svg{
  width:16px;
  height:16px;
  pointer-events:none;
}
.chat-form .helper-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:12px;
  color:rgba(148,163,184,.75);
}
.chat-metrics{
  margin-top:4px;
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:2px;
  color:rgba(226,232,240,.75);
}

/* === Control panel (sidebar) === */
#settings-container{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:auto;
  padding-right:4px;
}
.chat-controls-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.chat-controls-panel.is-hidden{ display:none !important; }
.chat-controls-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,42,.82);
  box-shadow:0 14px 32px rgba(2,6,23,.45);
  backdrop-filter:blur(14px);
}
.chat-controls-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.chat-controls-title{
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(226,232,240,.82);
}
.chat-controls-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(148,163,184,.35);
  box-shadow:0 0 8px rgba(148,163,184,.45);
}
.chat-controls-dot.is-on{
  background:#34d399;
  box-shadow:0 0 12px rgba(52,211,153,.75);
}
.chat-controls-status{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  color:rgba(226,232,240,.75);
}
.memory-label{
  font-weight:600;
  letter-spacing:.04em;
}
.memory-label.is-off{
  color:rgba(248,113,113,.85);
}
#memory-counters{
  font-family:var(--mono);
  font-size:11px;
  color:rgba(148,163,184,.75);
}
.chat-controls-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chat-controls-actions .button{
  flex:1 1 45%;
  min-width:120px;
  justify-content:center;
}
#chat-metrics{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:11.5px;
  color:rgba(148,163,184,.78);
}
#chat-metrics span{
  display:flex;
  align-items:center;
  gap:6px;
}
#chat-metrics span::before{
  content:'';
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(148,163,184,.45);
}
@media (max-width: 960px){
  #settings-container{
    flex-direction:row;
    margin-top:8px;
    margin-left:auto;
    width:100%;
    gap:10px;
    overflow-x:auto;
    padding-right:0;
  }
  .chat-controls-panel{
    flex-direction:row;
    gap:10px;
  }
  .chat-controls-card{
    min-width:220px;
  }
}
/* Buttons */
.button{
  height:34px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.2);
  background: rgba(15,23,42,.6);
  color:#e2e8f0;
  font-weight:500;
  font-size:12px;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
  box-shadow:0 8px 18px rgba(15,23,42,.45);
}
.button:hover{
  background: rgba(59,130,246,.25);
  border-color: rgba(59,130,246,.45);
  color:#ffffff;
}
.button:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(.35);
  box-shadow:none;
}
/* Notifications toast (optionnel) */
.toast{
  position:fixed; right:12px; bottom:12px; z-index:9999;
  background: rgba(0,0,0,.7);
  color:#fff; padding:10px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-soft);
}
/* Petits Ã©crans */
@media (max-width: 760px){
  .chat-container.card{
    height: auto;
    min-height: calc(100dvh - var(--mobile-topbar-height, 56px) - var(--mobile-nav-height, 64px) - 24px);
  }
  .chat-container .card-body{
    padding: 12px 14px;
  }
  .chat-messages{
    padding: 16px 12px calc(140px + env(safe-area-inset-bottom, 0px));
  }
  .chat-container .card-footer{
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .chat-header{
    align-items:flex-start;
  }
  .chat-header-left{
    gap:12px;
  }
  .chat-header .tabs-container,
  .chat-container .tabs-container{
    gap:8px;
    padding:3px 4px 5px;
  }
  .chat-header .agent-selector .button-tab{
    padding:.38rem .9rem;
    font-size:.62rem;
    letter-spacing:.12em;
  }
  .chat-header .agent-selector .button-tab .tab-icon svg{
    width:13px;
    height:13px;
  }
}

@media (max-width: 640px){
  :root{
    --chat-bubble-width: 640px;
    --input-height: 36px;
  }
  .chat-header{
    padding:10px;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .chat-header-right{
    width:100%;
    justify-content:space-between;
    flex-wrap:nowrap;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  #model-badge{
    flex:1 1 auto;
    min-width:0;
    max-width:60%;
    padding:3px 10px;
    font-size:.68rem;
    gap:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .chat-header-right .auth-badge{
    flex:0 0 auto;
    padding:4px 10px;
    gap:8px;
    font-size:.6rem;
  }
  .chat-header-right .auth-button{
    font-size:.58rem;
    letter-spacing:.12em;
  }
  .chat-header-right .auth-model-chip{
    font-size:.58rem;
    padding:3px 8px;
  }
  .chat-header-right .auth-dot{
    width:8px;
    height:8px;
  }
  .chat-header-left{
    width:100%;
    gap:10px;
  }
  .chat-title{
    font-size:.95rem;
  }
  .chat-header .tabs-container,
  .chat-container .tabs-container{
    gap:6px;
    padding:3px 4px 5px;
    border-radius:16px;
  }
  .chat-header .agent-selector .button-tab{
    padding:.36rem .9rem;
    font-size:.62rem;
    letter-spacing:.14em;
  }
  .chat-header .agent-selector .button-tab .tab-icon svg{
    width:13px;
    height:13px;
  }
  .chat-header .agent-selector .button-tab .tab-label{
    font-size:.58rem;
  }
  .messages{
    padding:12px 12px 110px 12px;
  }
  .chat-footer{
    padding:8px 12px 10px;
  }
  .chat-form{
    max-width:100%;
  }
  .chat-composer{
    flex-direction:row;
    align-items:flex-start;
    gap:8px;
    padding:0;
  }
  .chat-input-shell{
    position:relative;
    padding:4px 40px 6px 8px;
    gap:6px;
    min-height:var(--input-height);
  }
  .chat-rag-toggle__button{
    padding:5px 8px;
    gap:6px;
  }
  .chat-rag-toggle__state{
    font-size:.6rem;
  }
  .chat-rag-toggle__label{
    display:none;
  }
  .rag-sources{
    padding:0 12px 14px;
  }
  .rag-source-button{
    padding:9px 10px;
  }
  .rag-source-line{
    font-size:.78rem;
  }
  .rag-source-excerpt{
    font-size:.68rem;
  }
  .chat-input{
    flex-basis:100%;
    min-height:24px;
    padding-right:38px;
  }
  .chat-doc-chips{
    gap:4px;
    margin-bottom:2px;
  }
  .chat-doc-chips__title{
    font-size:.62rem;
  }
  .chat-doc-chips__clear{
    font-size:.55rem;
    padding:2px 4px;
  }
  .chat-doc-chip{
    font-size:.68rem;
    padding:3px 8px;
  }
  .chat-doc-chip__icon{
    width:10px;
    height:10px;
  }
  .chat-send-button{
    position:absolute;
    bottom:6px;
    right:8px;
    width:20px;
    height:14px;
    border-radius:5px;
  }
  .chat-send-button svg{
    width:8px;
    height:8px;
  }
}





/* Thread metadata strip */
.chat-thread-meta{display:flex;align-items:center;gap:12px;padding:0 18px 12px 18px;font-size:.85rem;color:rgba(203,213,225,.78);}
.chat-thread-meta[hidden]{display:none!important;}
.chat-thread-meta__item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.chat-thread-meta__separator{opacity:.45;font-weight:600;}
