:root {
  color-scheme: light;

  /* Palette claire. Une interface qu'on garde ouverte huit heures par jour
     doit être reposante avant d'être jolie : fond très clair, cartes
     blanches, une seule couleur d'accent qui ne sert qu'à ce sur quoi on
     doit cliquer. */
  --bg:       #fafafb;
  --bg-2:     #ffffff;
  --bg-3:     #f4f4f6;
  --bg-hover: #eeeef1;
  --line:     #ececf0;
  --line-2:   #dededf;
  --txt:      #1b1b1f;
  --txt-2:    #64646f;
  --txt-3:    #9a9aa5;
  --accent:     #8b5cf6;
  --accent-2:   #7c3aed;
  --accent-dim: #f3edfe;
  --ok:   #16a34a;
  --warn: #d97706;
  --err:  #dc2626;
  --ok-dim:   #eafaf0;
  --warn-dim: #fdf4e6;
  --err-dim:  #fdecec;
  --shadow: 0 1px 2px rgba(16, 16, 24, .04);
  --shadow-2: 0 4px 16px rgba(16, 16, 24, .07);
  --radius: 12px;
  --radius-s: 8px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* Mode sombre, au choix. Seules les couleurs changent : toutes les règles
   plus bas s'appuient sur ces variables, et rien d'autre. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:       #0e0e11;
  --bg-2:     #16161b;
  --bg-3:     #1d1d24;
  --bg-hover: #23232c;
  --line:     #26262f;
  --line-2:   #33333f;
  --txt:      #e8e8ec;
  --txt-2:    #a0a0ad;
  --txt-3:    #6b6b7a;
  --accent:     #a78bfa;
  --accent-2:   #c4b5fd;
  --accent-dim: rgba(167, 139, 250, .15);
  --ok-dim:   rgba(22, 163, 74, .15);
  --warn-dim: rgba(217, 119, 6, .15);
  --err-dim:  rgba(220, 38, 38, .15);
  --shadow: none;
  --shadow-2: 0 4px 20px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--txt);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 19px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p { margin: 0; }
a { color: var(--accent-2); }

button, input, select, textarea { font-family: inherit; font-size: 14px; }

/* ---------------------------------------------------------------- layout */

#app { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  padding: 16px 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Pastille de marque : un carré arrondi plutôt qu'un point, pour que
   l'interface ait un repère visuel en haut à gauche comme une vraie app. */
.brand-dot {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  flex-shrink: 0;
}

.bot-switch { padding: 12px; border-bottom: 1px solid var(--line); }

.nav {
  flex: 1; padding: 4px 10px 10px; overflow-y: auto;
  /* La liste défile quand l'écran est court. Le dégradé en bas montre qu'il
     reste quelque chose plutôt que de couper un libellé en deux, ce qui se
     lit comme un bug d'affichage. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent);
}
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 9px;
  padding: 8px 11px;
  border-radius: var(--radius-s);
  color: var(--txt-2);
  cursor: pointer;
  user-select: none;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--bg-3); color: var(--txt); }
.nav-item.active { background: var(--accent-dim); color: var(--accent-2); font-weight: 600; }
.nav-sep {
  padding: 14px 11px 5px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--txt-3); font-weight: 600;
}

.sidebar-foot { padding: 10px 12px 12px; }

/* Bloc épinglé en bas : les réglages qu'on ouvre rarement mais qu'on doit
   toujours retrouver au même endroit. Il ne défile pas avec le reste. */
.nav-bottom {
  padding: 8px 10px 0;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 15px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  position: sticky; top: 0; z-index: 20;
}
.topbar-sub { color: var(--txt-3); font-size: 12.5px; margin-top: 1px; }

.content { padding: 26px; max-width: 1180px; width: 100%; }
.content.wide { max-width: none; }

/* --------------------------------------------------------------- éléments */

.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card-head { margin-bottom: 16px; }
.card-intro {
  color: var(--txt-2); font-size: 13px; margin-top: 7px;
  max-width: 74ch; line-height: 1.6;
}

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }

.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spacer { flex: 1; }

/* boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background: var(--bg-3);
  color: var(--txt);
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  transition: background .12s, border-color .12s, opacity .12s;
}
.btn:hover:not(:disabled) { background: var(--bg-hover); border-color: #454553; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  border-color: transparent; color: #fff;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn-danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.btn-danger:hover:not(:disabled) { background: var(--err-dim); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--txt-2); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-3); color: var(--txt); }

/* champs */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
label.lbl { display: block; font-weight: 500; margin-bottom: 5px; }
.help {
  color: var(--txt-3); font-size: 12.5px; margin-top: 5px;
  max-width: 72ch; line-height: 1.55;
}

input[type=text], input[type=number], input[type=password], select, textarea {
  width: 100%;
  padding: 8px 11px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  color: var(--txt);
  outline: none;
  transition: border-color .12s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
input:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
textarea { resize: vertical; min-height: 68px; line-height: 1.55; }
textarea.tall { min-height: 150px; font-family: var(--mono); font-size: 12.5px; }
input[type=range] { width: 100%; accent-color: var(--accent); }

.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch-ui {
  width: 38px; height: 21px; border-radius: 11px;
  background: var(--line-2); position: relative; transition: background .16s;
  flex-shrink: 0;
}
.switch-ui::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .16s;
}
.switch input:checked + .switch-ui { background: var(--accent); }
.switch input:checked + .switch-ui::after { transform: translateX(17px); }
.switch input:disabled + .switch-ui { opacity: .5; cursor: not-allowed; }

.range-row { display: flex; align-items: center; gap: 12px; }
.range-val {
  min-width: 54px; text-align: right;
  font-family: var(--mono); font-size: 13px; color: var(--accent-2);
}

/* pastilles */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
  background: var(--bg-3); color: var(--txt-2);
  border: 1px solid var(--line-2);
}
.pill.ok   { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 30%, transparent);   background: var(--ok-dim); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); background: var(--warn-dim); }
.pill.err  { color: var(--err);  border-color: color-mix(in srgb, var(--err) 30%, transparent);  background: var(--err-dim); }
.pill.accent { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: var(--accent-dim); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.dot.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* stats */
.stat { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px; }
.stat-val { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.stat-lbl { color: var(--txt-3); font-size: 12px; margin-top: 3px; }
.stat-sub { color: var(--txt-3); font-size: 11.5px; margin-top: 6px; }

/* tableaux */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; padding: 9px 11px;
  color: var(--txt-3); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--line);
}
td { padding: 10px 11px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg-3); }
.num { text-align: right; font-family: var(--mono); font-size: 13px; }

/* listes éditables */
.list-editor { display: flex; flex-direction: column; gap: 7px; }
.list-line { display: flex; gap: 7px; align-items: center; }
.list-line input { flex: 1; }

/* répétables (offres, séquences) */
.repeat-item {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  padding: 15px;
  margin-bottom: 11px;
  background: var(--bg-3);
}
.repeat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.repeat-head .idx {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-dim); color: var(--accent-2);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 600;
  flex-shrink: 0;
}

/* conversations */
.conv-layout { display: grid; grid-template-columns: 316px 1fr 268px; height: calc(100vh - 62px); }
.conv-list { border-right: 1px solid var(--line); overflow-y: auto; background: var(--bg-2); }
.conv-search { padding: 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-2); z-index: 2; }
.conv-item { padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.conv-item:hover { background: var(--bg-3); }
.conv-item.active { background: var(--accent-dim); border-left: 2px solid var(--accent); padding-left: 12px; }
.conv-name { font-weight: 500; display: flex; align-items: center; gap: 7px; }
.conv-preview {
  color: var(--txt-3); font-size: 12.5px; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-meta { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }

.thread { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.thread-head { padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.thread-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 9px; }
.msg { max-width: 66%; padding: 9px 13px; border-radius: 14px; word-wrap: break-word; white-space: pre-wrap; }
.msg.fan { align-self: flex-start; background: var(--bg-3); border-bottom-left-radius: 4px; }
.msg.sarah { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg-time { font-size: 10.5px; opacity: .6; margin-top: 4px; }
.thread-compose { padding: 13px 18px; border-top: 1px solid var(--line); background: var(--bg-2); }
.compose-row { display: flex; gap: 9px; align-items: flex-end; }
.compose-row textarea { min-height: 40px; max-height: 160px; }

.conv-side { border-left: 1px solid var(--line); overflow-y: auto; padding: 16px; background: var(--bg-2); }
.side-block { margin-bottom: 20px; }
.side-lbl { color: var(--txt-3); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: 7px; }

/* médias */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 13px; }
.media-card { background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 13px; }
.media-card audio, .media-card video, .media-card img { width: 100%; border-radius: 5px; margin: 9px 0; display: block; }
.media-card video, .media-card img { max-height: 160px; object-fit: cover; background: #000; }
.dropzone {
  border: 2px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 32px; text-align: center; color: var(--txt-3);
  cursor: pointer; transition: border-color .14s, background .14s;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-dim); color: var(--txt-2); }

/* graphiques */
.chart { width: 100%; height: 190px; display: block; }
.chart-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--txt-3); }
.legend-key { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; }

/* logs */
pre.logs {
  background: #08080a; border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 14px;
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  max-height: 480px; overflow: auto; margin: 0;
  white-space: pre-wrap; word-break: break-word;
}

/* divers */
.empty { text-align: center; padding: 56px 20px; color: var(--txt-3); }
.empty-icon { font-size: 30px; opacity: .3; margin-bottom: 12px; }

.toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 9px; }
.toast {
  background: var(--bg-3); border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-s); padding: 12px 16px;
  max-width: 380px; box-shadow: 0 8px 26px rgba(0,0,0,.45);
  animation: slidein .2s ease;
}
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--err); }
@keyframes slidein { from { transform: translateX(18px); opacity: 0 } }

.modal-back {
  position: fixed; inset: 0; background: rgba(0,0,0,.66);
  display: grid; place-items: center; z-index: 90; padding: 20px;
}
.modal {
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 24px;
  width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
}

.login-wrap { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login-card { width: 100%; max-width: 390px; }

.savebar {
  position: sticky; bottom: 0;
  background: var(--bg-2); border-top: 1px solid var(--line-2);
  padding: 13px 26px; margin: 26px -26px -26px;
  display: flex; align-items: center; gap: 12px;
}

.warn-box {
  background: var(--warn-dim);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: var(--radius-s); padding: 13px 15px;
  color: var(--txt); font-size: 13px; line-height: 1.6;
}
.err-box {
  background: var(--err-dim);
  border: 1px solid color-mix(in srgb, var(--err) 30%, transparent);
  border-radius: var(--radius-s); padding: 13px 15px;
  color: var(--txt); font-size: 13px; line-height: 1.6;
}

.locked-note { color: var(--warn); font-size: 12px; margin-top: 5px; }

@media (max-width: 1080px) {
  .conv-layout { grid-template-columns: 260px 1fr; }
  .conv-side { display: none; }
}
@media (max-width: 780px) {
  .sidebar { display: none; }
  .content { padding: 16px; }
  .conv-layout { grid-template-columns: 1fr; }
  .conv-list { display: none; }
}


/* ------------------------------------------------- bascule clair / sombre */

.theme-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background: var(--bg-2);
  color: var(--txt-2);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.theme-btn:hover { background: var(--bg-3); color: var(--txt); }

/* ==========================================================================
   Fiche du bot et onglets

   Le menu de gauche porte ce qui concerne le compte, les onglets ce qui
   concerne LE bot ouvert. Sans cette séparation, le menu grossit avec chaque
   fonctionnalité et on finit par ne plus rien y trouver.
   ========================================================================== */

.topbar-crumb { padding: 12px 26px; }

.crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.crumb strong { font-weight: 600; }
.crumb-sep { color: var(--txt-3); }
.crumb-link {
  color: var(--txt-2); cursor: pointer;
  border-bottom: 1px solid transparent;
}
.crumb-link:hover { color: var(--accent-2); border-bottom-color: currentColor; }

.bot-head {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 26px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.bot-avatar {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 21px; font-weight: 600;
}

/* La barre d'onglets défile horizontalement plutôt que de passer à la ligne :
   deux rangées d'onglets font perdre le repère de la ligne active. */
.tabs {
  display: flex; gap: 2px;
  padding: 0 18px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky; top: 0; z-index: 15;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 11px 15px 9px;
  border: none; background: none;
  border-bottom: 2px solid transparent;
  color: var(--txt-2);
  font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.tab:hover { color: var(--txt); }
.tab.active { color: var(--accent-2); border-bottom-color: var(--accent); }
.tab svg { opacity: .85; }
.tab .pill { padding: 0 6px; font-size: 10.5px; }

/* Le bouton de thème flotte quand la page a des onglets : il n'a pas de
   place naturelle dans un fil d'Ariane. */
.theme-float {
  position: fixed; top: 12px; right: 22px; z-index: 30;
}

/* Pastilles d'en-tête, à droite du fil d'Ariane. */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 500; color: var(--txt-2);
}
.chip-alert { color: var(--err); background: var(--err-dim);
  border-color: color-mix(in srgb, var(--err) 25%, transparent); }

/* ==========================================================================
   Page d'accueil : la liste des bots
   ========================================================================== */

.search { position: relative; flex: 1; max-width: 420px; }
.search span {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--txt-3); font-size: 17px; font-weight: 600; pointer-events: none;
}
.search input { padding-left: 34px; }

/* Contrôle segmenté : un seul choix visible à la fois, pas un menu déroulant.
   Sur trois à six options, voir les autres est ce qui donne envie de comparer. */
.seg {
  display: inline-flex; border: 1px solid var(--line-2);
  border-radius: var(--radius-s); overflow: hidden; background: var(--bg-2);
}
.seg button {
  border: none; background: none; cursor: pointer; font-family: inherit;
  padding: 6px 13px; font-size: 12.5px; font-weight: 500; color: var(--txt-2);
  border-right: 1px solid var(--line);
}
.seg button:last-child { border-right: none; }
.seg button:hover { background: var(--bg-3); color: var(--txt); }
.seg button.on {
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: #fff;
}

/* Graphique en CSS pur : pas de bibliothèque à charger pour quelques barres,
   et ça s'affiche même si le serveur n'a aucun accès réseau. */
.bars {
  display: flex; gap: 30px; align-items: flex-end; justify-content: space-around;
  min-height: 190px; overflow-x: auto; padding: 8px 4px 0;
}
.bar-group { display: flex; flex-direction: column; align-items: center;
  gap: 7px; min-width: 74px; }
.bar-pair { display: flex; align-items: flex-end; gap: 8px; height: 150px;
  border-bottom: 1px solid var(--line-2); }
/* Chaque barre porte sa valeur juste au-dessus d'elle : un chiffre posé en
   haut du cadre, loin de sa barre, oblige à faire le lien à l'œil. */
.bar-col { display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 5px; }
.bar-col span { font-size: 12px; font-weight: 600; }
.bar { width: 22px; min-height: 3px; border-radius: 4px 4px 0 0; }
.bar-lbl { display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--txt-2); }
.bar-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
}
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Cartes de bots : deux colonnes sur large, une sur étroit. */
.bot-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
}
.bot-card {
  display: flex; gap: 15px; align-items: flex-start;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow);
}
.bot-thumb {
  width: 92px; height: 92px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 34px; font-weight: 600;
}
.bot-sub { color: var(--txt-2); font-size: 13px; margin-top: 3px; }
.bot-meta { color: var(--txt-3); font-size: 12px; margin-top: 2px; }
.bot-nums { display: flex; gap: 16px; margin-top: 10px;
  font-size: 12.5px; color: var(--txt-3); }
.bot-nums b { color: var(--txt); font-size: 14px; font-weight: 600; }
.bot-actions { display: flex; gap: 2px; }
.icon-btn {
  width: 30px; height: 30px; border: none; background: none; cursor: pointer;
  border-radius: 7px; color: var(--txt-3); font-size: 14px; line-height: 1;
}
.icon-btn:hover { background: var(--bg-3); color: var(--txt); }
.icon-btn.danger:hover { background: var(--err-dim); color: var(--err); }

/* Un média sans description n'est jamais choisi par le bot : on le signale
   visuellement plutôt que de laisser croire qu'il est utilisable. */
.media-nodesc { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.media-card textarea { font-size: 12.5px; min-height: 46px; }

/* ===================================================================
   VARIANTES — mise en forme du générateur de combinaisons
   =================================================================== */

/* Case à cocher + libellé sur une ligne, réutilisée dans les listes
   « Multi » et dans la sélection groupée des variantes. */
.check {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  font-size: 13px; line-height: 1.45; user-select: none;
}
.check input { margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }

/* Bloc repliable : le titre reste visible, le contenu se déplie. */
.fold { border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); margin-bottom: 14px; overflow: hidden; }
.fold > summary {
  padding: 13px 16px; cursor: pointer; font-weight: 600; font-size: 13.5px;
  list-style: none; display: flex; align-items: center; gap: 9px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: "›"; font-size: 17px; line-height: 1; color: var(--txt-3);
  transition: transform .15s; display: inline-block;
}
.fold[open] > summary::before { transform: rotate(90deg); }
.fold > summary:hover { background: var(--bg-3); }
.fold-body { padding: 0 16px 16px; }
.fold-count { color: var(--txt-3); font-weight: 400; font-size: 12.5px; }

/* Barre d'outils de la page : titre à gauche, actions à droite. */
.vtoolbar { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 16px; }

/* Une ligne de variante : compacte, lisible même à 200 lignes. */
.vrow {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px;
}
.vrow.off { opacity: .55; }
.vrow.sel { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-2)); }
.vrow-name { font-weight: 600; font-size: 13.5px; }
.vrow-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.vrow-acts { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap;
  justify-content: flex-end; }

/* Une ligne de « Filtres avancés » : segment inclure/exclure + menu. */
.filt-row { display: grid; grid-template-columns: 150px 150px 1fr;
  gap: 10px; align-items: center; margin-bottom: 8px; }
.filt-row > label { font-size: 13px; color: var(--txt-2); }
@media (max-width: 720px) {
  .filt-row { grid-template-columns: 1fr; }
}

/* Une section du générateur : menu de mode + liste « Multi » dépliée. */
.gen-sec { border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; background: var(--bg-3); }
.gen-sec > label { display: block; font-size: 12.5px; font-weight: 600;
  margin-bottom: 7px; }
.gen-multi { margin-top: 9px; max-height: 210px; overflow: auto;
  border: 1px solid var(--line); border-radius: 7px;
  padding: 9px; background: var(--bg-2); }
.gen-foot { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line); }

/* ===================================================================
   TELEGRAM — intégrations connectées + configuration
   =================================================================== */

/* Une intégration branchée : bordure verte quand elle marche vraiment.
   Un voyant optimiste sur un branchement à moitié fait est pire que
   pas de voyant du tout, d'où le `.on` conditionnel. */
.tg-int {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px; background: var(--bg-3);
}
.tg-int:last-child { margin-bottom: 0; }
.tg-int.on { border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  background: color-mix(in srgb, var(--ok) 5%, var(--bg-3)); }

/* L'état vide : un cadre pointillé, pas un vide silencieux — on dit où
   aller pour le remplir. */
.tg-empty {
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  padding: 34px 20px; text-align: center; color: var(--txt-2);
}

/* Le formulaire du mode choisi, dans son propre cadre. */
.tg-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; background: var(--bg-3);
}

/* Les étapes de connexion : teintées accent pour qu'on les lise avant
   de chercher pourquoi ça ne marche pas. */
.steps-box {
  margin-top: 16px; background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius-s); padding: 14px 16px;
  font-size: 13px; line-height: 1.65;
}
.steps-box li { margin-bottom: 7px; }
.steps-box li:last-child { margin-bottom: 0; }
/* Une étape déjà vérifiée par le panel s'efface : il reste ce qui te
   reste à faire. */
.steps-box li.done { color: var(--txt-3); }
.steps-box li.done::marker { content: "✓ "; }
.steps-box code {
  font-family: var(--mono); font-size: 12px; padding: 1px 5px;
  border-radius: 4px; background: var(--bg-2); border: 1px solid var(--line);
}
.steps-box a, .field-help a { color: var(--accent-2); }

.card-head h2 svg { vertical-align: -3px; margin-right: 6px; opacity: .8; }

/* ===================================================================
   CRÉDITS FOURNISSEURS — en haut de la page d'accueil
   Une clé à sec est la panne la plus coûteuse parce qu'elle est
   invisible : le bot tourne, les fans écrivent, rien ne part.
   =================================================================== */
.credit-row {
  display: flex; gap: 12px; align-items: stretch;
  margin-bottom: 18px; flex-wrap: wrap;
}
.credit {
  flex: 1 1 240px; min-width: 220px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
}
.credit.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn) 6%, var(--bg-2)); }
.credit.err  { border-color: color-mix(in srgb, var(--err) 50%, transparent);
  background: color-mix(in srgb, var(--err) 7%, var(--bg-2)); }
.credit-name { font-size: 12.5px; color: var(--txt-2); font-weight: 600; }
.credit-val {
  font-size: 25px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.15; margin-top: 4px;
}
.credit-sub { color: var(--txt-3); font-size: 11.5px; margin-top: 5px; line-height: 1.5; }
#credits-refresh { align-self: center; font-size: 15px; padding: 8px 11px; }