/* ═══════════════════════════════════════════════════════════════════
   SupportChat — Console d'administration
   Palette violet → rose, angles très arrondis, ombres douces.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --a:#7C3AED; --b:#EC4899;
  --grad:linear-gradient(135deg,#7C3AED 0%,#EC4899 100%);
  --grad-soft:linear-gradient(135deg,rgba(124,58,237,.10),rgba(236,72,153,.10));
  --ink:#1c1a2b; --muted:#767490; --faint:#a5a2b8;
  --bg:#f6f5fb; --card:#ffffff; --line:#eceaf4; --soft:#f7f5fd;
  --ok:#12a150; --warn:#c2760a; --err:#e11d48;
  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-sm:11px;
  --sh:0 10px 34px rgba(58,28,110,.08);
  --sh-lift:0 16px 44px rgba(58,28,110,.15);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);color:var(--ink);background:var(--bg);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
body.is-full{height:100vh;overflow:hidden;display:flex;flex-direction:column}
a{color:var(--a)}
h1,h2,h3{letter-spacing:-.02em;margin:0}
h1{font-size:1.5rem;font-weight:680}
h2{font-size:1.12rem;font-weight:660}
h3{font-size:.98rem;font-weight:640}

/* ── Barre supérieure ────────────────────────────────────────────── */
.topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:22px;
  padding:0 20px;height:62px;background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:60;
}
.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;
  color:var(--ink);text-decoration:none;letter-spacing:-.02em;white-space:nowrap}
.brand b{font-weight:750;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.brand-dot{width:26px;height:26px;border-radius:9px;background:var(--grad);
  box-shadow:0 4px 12px rgba(124,58,237,.4)}

.nav{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{position:relative;padding:8px 15px;border-radius:14px;text-decoration:none;
  color:var(--muted);font-size:14px;font-weight:550;white-space:nowrap;transition:.15s}
.nav a:hover{background:var(--soft);color:var(--ink)}
.nav a.on{background:var(--grad-soft);color:var(--a);font-weight:640}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;margin-left:7px;border-radius:10px;
  background:var(--err);color:#fff;font-size:11px;font-weight:700}

.topbar-right{display:flex;gap:6px;flex:0 0 auto}
.icon-btn{width:36px;height:36px;border:0;border-radius:12px;background:var(--soft);
  cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:.15s;color:inherit}
.icon-btn:hover{background:#efecf9;transform:translateY(-1px)}
.icon-btn.off{opacity:.4}

/* ── Conteneurs ──────────────────────────────────────────────────── */
.main-page{max-width:1120px;margin:0 auto;padding:28px 20px 70px}
.main-full{flex:1;min-height:0;display:flex}

.page-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head p{margin:4px 0 0;color:var(--muted);font-size:14px}
.spacer{flex:1}

.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);
  padding:24px;margin-bottom:20px}
.card>h2{margin-bottom:6px}
.card .hint{color:var(--muted);font-size:13.5px;margin:0 0 18px}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

/* ── Formulaires ─────────────────────────────────────────────────── */
label.field{display:block;margin-bottom:16px}
label.field>span{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#4b4863}
label.field small{display:block;font-weight:400;color:var(--faint);font-size:12px;margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],
textarea,select{
  width:100%;padding:12px 14px;border:1.6px solid var(--line);border-radius:var(--r-md);
  font:inherit;font-size:14.5px;background:#fff;color:var(--ink);outline:none;
  transition:border-color .15s, box-shadow .15s}
input:focus,textarea:focus,select:focus{border-color:var(--a);box-shadow:0 0 0 4px rgba(124,58,237,.10)}
textarea{resize:vertical;min-height:96px;line-height:1.55}
input[type=color]{width:52px;height:40px;padding:3px;border:1.6px solid var(--line);
  border-radius:12px;background:#fff;cursor:pointer}
.row-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.switch{display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none;
  padding:11px 0;font-size:14px}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch i{width:44px;height:25px;border-radius:14px;background:#ded9ec;position:relative;
  flex:0 0 auto;transition:background .2s}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;
  border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked + i{background:var(--grad)}
.switch input:checked + i::after{transform:translateX(19px)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:var(--r-md);background:var(--grad);color:#fff;
  font:inherit;font-size:14.5px;font-weight:640;padding:12px 22px;cursor:pointer;
  text-decoration:none;box-shadow:0 8px 22px rgba(124,58,237,.30);
  transition:transform .16s, box-shadow .16s, opacity .16s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(124,58,237,.40)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.btn.ghost{background:#fff;color:var(--a);box-shadow:none;border:1.6px solid #e7e2f6}
.btn.ghost:hover{background:var(--soft);border-color:var(--a);box-shadow:none}
.btn.danger{background:linear-gradient(135deg,#f43f5e,#e11d48);box-shadow:0 8px 22px rgba(225,29,72,.3)}
.btn.sm{padding:8px 15px;font-size:13.5px;border-radius:12px}

.flash{padding:14px 18px;border-radius:var(--r-md);margin-bottom:20px;font-size:14px;
  display:flex;gap:10px;align-items:flex-start}
.flash.ok{background:#e9faf1;color:#0b6b36}
.flash.err{background:#fff0f3;color:#9f1239}
.flash.info{background:#f2effd;color:#5b21b6}
.flash.warn{background:#fff7e8;color:#8a5300}

.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:12px;font-weight:600;background:var(--soft);color:var(--muted)}
.pill.ok{background:#e9faf1;color:#0b6b36}
.pill.warn{background:#fff7e8;color:#8a5300}
.pill.err{background:#fff0f3;color:#9f1239}
.pill.ai{background:var(--grad-soft);color:var(--a)}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--faint);font-weight:650;padding:0 12px 10px}
td{padding:13px 12px;border-top:1px solid var(--line);vertical-align:middle}
tr:hover td{background:#fbfaff}

code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
pre.snippet{background:#1a1730;color:#e9e6ff;padding:16px 18px;border-radius:var(--r-md);
  overflow-x:auto;margin:0;line-height:1.6;white-space:pre-wrap;word-break:break-all}
pre.snippet b{color:#f9a8d4;font-weight:600}

/* ═══════════════════════════════════════════════════════════════════
   Console de conversation (3 colonnes)
   ═══════════════════════════════════════════════════════════════════ */
.console{flex:1;min-height:0;display:grid;grid-template-columns:330px 1fr 280px}

/* Colonne 1 — liste */
.convlist{border-right:1px solid var(--line);background:#fff;display:flex;flex-direction:column;min-height:0}
.convlist-head{flex:0 0 auto;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.filters{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.filters button{border:0;background:var(--soft);color:var(--muted);font:inherit;font-size:12.5px;
  font-weight:600;padding:6px 12px;border-radius:11px;cursor:pointer;transition:.15s}
.filters button:hover{background:#efecf9}
.filters button.on{background:var(--grad);color:#fff;box-shadow:0 4px 12px rgba(124,58,237,.3)}
.search{width:100%;padding:9px 13px;font-size:13.5px;border-radius:13px;border:1.6px solid var(--line)}

.convs{flex:1;overflow-y:auto;min-height:0;padding:8px}
.convs::-webkit-scrollbar{width:7px}
.convs::-webkit-scrollbar-thumb{background:#e2ddf0;border-radius:4px}

.conv{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:12px 13px;border-radius:var(--r-md);margin-bottom:3px;font:inherit;
  transition:background .13s;position:relative}
.conv:hover{background:var(--soft)}
.conv.on{background:var(--grad-soft);box-shadow:inset 0 0 0 1.5px rgba(124,58,237,.22)}
.conv-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.conv-site{font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px;
  color:#fff;white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.conv-time{margin-left:auto;font-size:11px;color:var(--faint);white-space:nowrap}
.conv-name{font-size:14px;font-weight:600;margin-bottom:2px}
.conv-prev{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2}
.conv-badge{position:absolute;top:12px;right:11px;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;background:var(--err);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.conv.unread .conv-name{font-weight:750}
.conv.unread .conv-prev{color:var(--ink)}

/* Colonne 2 — fil */
.thread{display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.thread-head{flex:0 0 auto;background:#fff;border-bottom:1px solid var(--line);
  padding:13px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.thread-head .who{font-weight:660;font-size:15px}
.thread-head .meta{font-size:12.5px;color:var(--muted)}
.thread-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.thread-body{flex:1;overflow-y:auto;min-height:0;padding:22px 24px;
  display:flex;flex-direction:column;gap:12px}
.thread-body::-webkit-scrollbar{width:8px}
.thread-body::-webkit-scrollbar-thumb{background:#e2ddf0;border-radius:4px}

/* Largeur DÉFINIE sur la colonne, et non un max-width en pourcentage sur la
   bulle : sinon la largeur de l'enfant dépend de celle du parent qui dépend de
   celle de l'enfant, et le navigateur tranche par la largeur minimale du
   contenu. Associé à `overflow-wrap:anywhere` — qui autorise la coupure au
   milieu d'un mot dans ce calcul — ce minimum tombe à un caractère et les
   bulles courtes s'affichent en colonne de lettres. */
.m{display:flex;flex-direction:column;align-items:flex-start;width:min(620px,74%)}
.m.me{align-self:flex-end;align-items:flex-end}
.m-who{font-size:11.5px;font-weight:650;color:var(--faint);margin:0 4px 4px}
.m-bub{max-width:100%;padding:12px 16px;border-radius:var(--r-lg);font-size:14.5px;line-height:1.55;
  background:#fff;box-shadow:0 2px 10px rgba(40,20,80,.05);border-bottom-left-radius:8px;
  word-wrap:break-word;overflow-wrap:break-word}
.m.bot .m-bub{background:#f4f1fe;box-shadow:none}
.m.me .m-bub{background:var(--grad);color:#fff;border-bottom-left-radius:var(--r-lg);
  border-bottom-right-radius:8px;box-shadow:0 6px 18px rgba(124,58,237,.28)}
.m.me .m-bub a{color:#fff}
.m-time{font-size:11px;color:var(--faint);margin:5px 5px 0}
.m-sys{align-self:center;font-size:12px;color:var(--muted);background:#fff;
  padding:6px 14px;border-radius:999px;box-shadow:var(--sh);max-width:90%;text-align:center}
.m-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.m-file{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;
  background:rgba(124,58,237,.07);text-decoration:none;color:inherit;font-size:13px;max-width:100%}
.m.me .m-file{background:rgba(255,255,255,.2);color:#fff}
.m-file img{max-width:260px;max-height:220px;border-radius:12px;display:block}
.m-file.thumb{padding:0;background:none}

.composer{flex:0 0 auto;background:#fff;border-top:1px solid var(--line);padding:14px 20px 16px}
.composer-files{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:9px}
.composer-files:empty{display:none}
.fpill{display:flex;align-items:center;gap:7px;background:var(--soft);border-radius:11px;
  padding:6px 10px;font-size:12.5px}
.fpill button{border:0;background:none;cursor:pointer;color:var(--muted);font-size:16px;line-height:1}
.composer-row{display:flex;align-items:flex-end;gap:10px}
.composer textarea{flex:1;border:1.6px solid var(--line);border-radius:var(--r-md);
  padding:12px 15px;font:inherit;font-size:14.5px;resize:none;max-height:170px;min-height:46px}
.quick{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px}
.quick button{border:1.4px solid var(--line);background:#fff;border-radius:11px;padding:5px 12px;
  font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;transition:.15s}
.quick button:hover{border-color:var(--a);color:var(--a);background:var(--soft)}

/* Colonne 3 — fiche visiteur */
.aside{border-left:1px solid var(--line);background:#fff;overflow-y:auto;padding:20px 18px;min-height:0}
.aside h3{margin-bottom:14px}
.info{margin-bottom:15px}
.info dt{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);
  font-weight:650;margin-bottom:3px}
.info dd{margin:0;font-size:13.5px;word-break:break-word}
.info dd a{word-break:break-all}

.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;color:var(--faint);text-align:center;padding:40px}
.empty .big{font-size:46px}

/* ── Base de connaissances ───────────────────────────────────────── */
.doc{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--line);
  border-radius:var(--r-md);margin-bottom:10px;background:#fff}
.doc-ic{width:40px;height:40px;border-radius:13px;background:var(--grad-soft);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.doc-main{flex:1;min-width:0}
.doc-main b{display:block;font-size:14px;font-weight:620;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.doc-main span{font-size:12.5px;color:var(--muted)}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;background:var(--grad);width:0;transition:width .4s}

.dropzone{border:2px dashed #ded8f2;border-radius:var(--r-lg);padding:26px;text-align:center;
  color:var(--muted);background:#fdfcff;cursor:pointer;transition:.15s}
.dropzone:hover,.dropzone.over{border-color:var(--a);background:var(--soft);color:var(--a)}

.tabs{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:2px}
.tabs button{border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--muted);
  padding:10px 16px;border-radius:12px 12px 0 0;cursor:pointer;position:relative}
.tabs button.on{color:var(--a)}
.tabs button.on::after{content:"";position:absolute;left:16px;right:16px;bottom:-3px;height:3px;
  border-radius:3px;background:var(--grad)}

/* ── Fenêtre modale ──────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(24,16,48,.48);backdrop-filter:blur(3px);
  animation:modalIn .16s ease}
.modal[hidden]{display:none}
@keyframes modalIn{from{opacity:0}to{opacity:1}}
.modal-box{background:#fff;border-radius:var(--r-xl);padding:26px 28px;width:100%;max-width:740px;
  max-height:88vh;overflow-y:auto;box-shadow:var(--sh-lift);animation:modalBox .2s cubic-bezier(.21,1.02,.36,1)}
@keyframes modalBox{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}
.modal-head h2{margin:0}
.modal-head .icon-btn{flex:0 0 auto;margin-left:auto}
.modal-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.modal-box textarea{min-height:220px;font-size:14px;line-height:1.6}
.modal-box .bar{margin:14px 0 0}

/* ── Écran de connexion ──────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px;
  background:radial-gradient(1000px 600px at 15% -10%,rgba(124,58,237,.16),transparent 60%),
             radial-gradient(900px 600px at 110% 110%,rgba(236,72,153,.18),transparent 60%),var(--bg)}
.login{width:100%;max-width:400px;background:#fff;border-radius:var(--r-xl);padding:36px 32px;
  box-shadow:var(--sh-lift)}
.login .logo{width:56px;height:56px;border-radius:19px;background:var(--grad);margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;font-size:26px;
  box-shadow:0 10px 26px rgba(124,58,237,.4)}
.login h1{text-align:center;font-size:1.32rem;margin-bottom:6px}
.login p.sub{text-align:center;color:var(--muted);font-size:14px;margin:0 0 26px}
.login .btn{width:100%;margin-top:6px}

/* ── Réactivité ──────────────────────────────────────────────────── */
@media (max-width:1100px){
  .console{grid-template-columns:300px 1fr}
  .aside{display:none}
}
@media (max-width:820px){
  .console{grid-template-columns:1fr;position:relative}
  .convlist{position:absolute;inset:0;z-index:5;border-right:0}
  .thread{position:absolute;inset:0;z-index:6;display:none}
  body.thread-open .convlist{display:none}
  body.thread-open .thread{display:flex}
  .back-btn{display:inline-flex!important}
  .main-page{padding:20px 14px 60px}
  .topbar{gap:12px;padding:0 12px}
  .brand span:last-child{display:none}
}
.back-btn{display:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}