/* =========================================================
   4) RAIL DROIT (#chatrail) — VERSION FACTORISÉE + UNIFIÉE
   ========================================================= */

#chatrail {
  background: var(--panel-bg);
  border: 1px solid var(--rail-border);
  border-radius: 0.75rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  color: var(--panel-text);

  position: fixed;
  right: 1rem;
  top: 4rem;

  width: var(--rail-w);
  min-width: var(--rail-min);
  max-width: var(--rail-max);
  height: calc(100vh - 4rem);
  max-height: calc(100vh - 1rem);

  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 40;
}

@media (max-width: 1023px) {
  body.mobile-rail-open #chatrail {
    position: fixed;
    inset: 0;
    z-index: 50;
    width: 100%;
    max-height: 100vh;
    display: flex !important;
  }
}

@media (min-width: 1600px) {
  :root {
    --rail-w: 520px;
  }
}

/* =========================================================
   CONTENU & PANES
   ========================================================= */

#chatrail .messages {
  overflow-y: auto;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
}

.rail-pane {
  display: none;
  min-height: 0;
}

.rail-pane.active {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rail-pane .messages {
  flex: 1 1 auto;
  overflow: auto;
  padding: .75rem;
}

/* =========================================================
   TABS — FACTORISÉS
   ========================================================= */

:root {
  /* Résumé */
  --chat-gray: #4b5563;
  --chat-gray-bg: rgba(107,114,128,0.15);

  /* Raisonnement */
  --chat-green: #15803d;
  --chat-green-bg: rgba(34,197,94,0.15);

  /* Vérification */
  --chat-amber: #b45309;
  --chat-amber-border: #f59e0b;
  --chat-amber-focus: rgba(245,158,11,0.3);
  --chat-amber-bg: rgba(245,158,11,0.18);

  /* Incohérences */
  --chat-red: #b91c1c;
  --chat-red-bg: rgba(239,68,68,0.15);
}

#chatrail [role="tablist"] { gap: .25rem; }

#chatrail [role="tab"] {
  padding: .5rem .75rem;
  border-radius: .5rem;
  font-size: .875rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

/* Résumé */
.rail-tab--gray     { color: var(--chat-gray); }
.rail-tab--gray:hover { background: var(--chat-gray-bg); }
.rail-tab--gray[aria-selected="true"] {
  background: var(--chat-gray); color: #fff;
}

/* Raisonnement */
.rail-tab--green     { color: var(--chat-green); }
.rail-tab--green:hover { background: var(--chat-green-bg); }
.rail-tab--green[aria-selected="true"] {
  background: var(--chat-green); color: #fff;
}

/* Vérification */
.rail-tab--amber     { color: var(--chat-amber); }
.rail-tab--amber:hover { background: var(--chat-amber-bg); }
.rail-tab--amber[aria-selected="true"] {
  background: var(--chat-amber-border); 
  color: #fff;  /* icône + texte en blanc comme les autres */
}

/* Incohérences */
.rail-tab--red     { color: var(--chat-red); }
.rail-tab--red:hover { background: var(--chat-red-bg); }
.rail-tab--red[aria-selected="true"] {
  background: var(--chat-red); color: #fff;
}

.rail-pane-footer {
  padding: .75rem;
  border-top: 1px solid var(--rail-border);
  background: var(--panel-bg);
  box-shadow: 0 -1px 3px rgba(0,0,0,0.08);
}

.rail-form {
  display: flex;
  align-items: center;
  width: 100%;
  gap: .5rem;
}

.rail-form input {
  flex: 1;
  border-radius: .5rem;
  padding: .6rem .75rem;
  font-size: .9rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.rail-form--gray input {
  border: 1px solid var(--chat-gray);
}
.rail-form--gray input:focus {
  border-color: var(--chat-gray);
  box-shadow: 0 0 0 2px var(--chat-gray-bg);
}

.rail-form--green input {
  border: 1px solid var(--chat-green);
}
.rail-form--green input:focus {
  border-color: var(--chat-green);
  box-shadow: 0 0 0 2px var(--chat-green-bg);
}

.rail-form--amber input {
  border: 1px solid var(--chat-amber-border);
}
.rail-form--amber input:focus {
  border-color: #d97706;
  box-shadow: 0 0 0 2px var(--chat-amber-focus);
}

.rail-form--red input {
  border: 1px solid var(--chat-red);
}
.rail-form--red input:focus {
  border-color: var(--chat-red);
  box-shadow: 0 0 0 2px var(--chat-red-bg);
}


/* ---- BOUTON PRINCIPAL (socle) ---- */
.mf-btn--send {
  display: inline-flex;
  align-items: center;
  gap: .45rem;

  padding: .55rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: .5rem;

  border: 1px solid transparent;
  transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}
/* TABLE DE COULEUR — variations boutons send */
.mf-send--gray {
  --send-bg: var(--chat-gray);
  --send-bg-hover: #374151; /* gray-700 */
  --send-shadow: rgba(75,85,99,.25);
  --send-text: #fff;
}

.mf-send--green {
  --send-bg: var(--chat-green);
  --send-bg-hover: #166534; /* green-700 */
  --send-shadow: rgba(21,128,61,.25);
  --send-text: #fff;
}

.mf-send--amber {
  --send-bg: var(--chat-amber-border);
  --send-bg-hover: #d97706; /* amber-600 */
  --send-shadow: rgba(217,119,6,.25);
  --send-text: #1f2937;
}

.mf-send--red {
  --send-bg: var(--chat-red);
  --send-bg-hover: #991b1b; /* red-800 */
  --send-shadow: rgba(185,28,28,.25);
  --send-text: #fff;
}

/* Utilisation des variables pour toutes les variantes */
.mf-btn--send {
  background: var(--send-bg);
  border-color: var(--send-bg);
  color: var(--send-text);
}

.mf-btn--send:hover {
  background: var(--send-bg-hover);
  color: var(--send-text);
  box-shadow: 0 2px 4px var(--send-shadow);
}
/* ---- Bouton reset (ghost) ---- */
.mf-btn--reset {
  background: transparent;
  color: #6b7280;        /* gray-500 */
  border: 1px solid #d1d5db;  /* gray-300 */

  padding: .45rem .6rem;
  font-size: .8rem;
  border-radius: .45rem;

  display: inline-flex;
  align-items: center;

  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.mf-btn--reset:hover {
  background: #f3f4f6;   /* gray-100 */
  border-color: #9ca3af; /* gray-400 */
  opacity: 1;
}



/* ===============================
   BULLES UTILISATEUR (user)
   =============================== */

#pane-summary   .mf-msg--user { background: var(--chat-gray);  color: #fff; }
#pane-reason    .mf-msg--user { background: var(--chat-green); color: #fff; }
#pane-verify    .mf-msg--user { background: var(--chat-amber-border); color: #1f2937; }
#pane-detect    .mf-msg--user { background: var(--chat-red);   color: #fff; }

/* ===============================
   BULLES ASSISTANT (assistant)
   =============================== */

#pane-summary .mf-msg--assistant {
  background: var(--panel-bg);
  border: 2px solid var(--chat-gray);
  box-shadow: 0 0 4px rgba(75,85,99,0.25);
}

#pane-reason .mf-msg--assistant {
  background: var(--panel-bg);
  border: 2px solid var(--chat-green);
  box-shadow: 0 0 4px rgba(21,128,61,0.25);
}

#pane-verify .mf-msg--assistant {
  background: var(--panel-bg);
  border: 2px solid var(--chat-amber-border);
  box-shadow: 0 0 4px rgba(245,158,11,0.25);
}

#pane-detect .mf-msg--assistant {
  background: var(--panel-bg);
  border: 2px solid var(--chat-red);
  box-shadow: 0 0 4px rgba(185,28,28,0.25);
}


/* Style commun */
.mf-msg {
  max-width: 80%;
  padding: .6rem .8rem;
  border-radius: .75rem;
  font-size: .9rem;
  white-space: pre-wrap;
}