:root{
  --bg:#F6F7FB; --card:#fff; --ink:#1B1340; --muted:#5B6773; --line:#E8EAF3;
  --primary:#4F46E5; --primary-2:#7C3AED; --primary-soft:#EEF0FF; --primary-ink:#3730A3;
  --shadow:0 6px 24px rgba(20,20,60,.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.45}
h1,h2,h3{margin:0}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--primary-ink)}
.muted{color:var(--muted)}
.center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.card{background:var(--card);border-radius:20px;box-shadow:var(--shadow)}
.login{width:100%;max-width:400px;padding:32px;display:flex;flex-direction:column;gap:14px}
.logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
label.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{padding:12px 14px;border:1.5px solid #D7DAEA;border-radius:12px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:1px}
.btn{border:0;border-radius:999px;padding:12px 22px;font-weight:700;font-size:14px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--primary-ink);border:1.5px solid var(--primary)}
.btn.small{padding:8px 14px;font-size:13px}
.btn.danger{background:#fff;color:#9B1C1C;border:1.5px solid #9B1C1C}
.error{color:#9B1C1C;font-size:13px;font-weight:600}
header.top{background:#fff;padding:14px 32px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;box-shadow:0 1px 0 var(--line);position:sticky;top:0;z-index:5}
header.top .brand{font-weight:800;font-size:17px}
header.top nav{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tab{border:0;background:none;padding:9px 16px;border-radius:999px;font-weight:600;color:var(--muted);font-size:14px}
.tab.active{background:var(--primary-soft);color:var(--primary-ink)}
.tab:disabled{opacity:.5;cursor:default}
main{max-width:1180px;margin:0 auto;padding:28px 32px;display:flex;flex-direction:column;gap:20px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.stat{padding:18px 22px}
.stat .n{font-size:30px;font-weight:800}
.stat .l{font-size:13px;color:var(--muted)}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.toolbar input[type=search]{max-width:340px;border-radius:999px}
.toolbar select{max-width:220px;border-radius:999px}
.row{padding:16px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;cursor:pointer;border:0;width:100%;text-align:left;background:#fff;border-radius:20px;box-shadow:var(--shadow)}
.row:hover{outline:2px solid var(--primary-soft)}
.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.row .main{flex:1;min-width:220px}
.row .t{font-weight:700}
.row .s{font-size:13px;color:var(--muted);margin-top:2px}
.badge{display:inline-block;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.b-new{background:#E0E7FF;color:#3730A3}.b-open{background:#DCEFF1;color:#0B5A62}.b-paused{background:#EDEDF2;color:#4B5563}
.b-waiting_customer{background:#FFF1D6;color:#7A4B00}.b-closed{background:#DFF3E4;color:#14532D}.b-esc{background:#FDE8E8;color:#9B1C1C}
.b-high{background:#FDE8E8;color:#9B1C1C}.b-normal{background:#EEF0FF;color:#3730A3}.b-low{background:#EDEDF2;color:#4B5563}
.detail{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.thread{flex:1;min-width:340px;display:flex;flex-direction:column;gap:14px}
.side{width:300px;flex:none;display:flex;flex-direction:column;gap:16px}
@media(max-width:760px){.side{width:100%}header.top,main{padding-left:16px;padding-right:16px}}
.msg{padding:16px 20px;border-radius:20px;white-space:pre-wrap;word-break:break-word}
.msg .meta{font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
.msg.customer{background:#fff;box-shadow:var(--shadow)}
.msg.staff{background:var(--primary-soft)}
.msg.internal{background:#FFF6DB}
.msg.internal .meta{color:#7A4B00}
.msg.system{background:none;text-align:center;font-size:13px;color:var(--muted);padding:2px}
.composer{padding:20px;display:flex;flex-direction:column;gap:12px}
.seg{display:inline-flex;background:var(--primary-soft);border-radius:999px;padding:4px;align-self:flex-start}
.seg button{border:0;background:none;padding:8px 16px;border-radius:999px;font-weight:700;font-size:13px;color:var(--primary-ink)}
.seg button.on{background:#fff;box-shadow:0 2px 8px rgba(20,20,60,.12)}
.panel{padding:20px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.panel .kv{display:flex;justify-content:space-between;gap:10px}
.panel .kv span:first-child{color:var(--muted)}
.empty{padding:40px;text-align:center;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:20}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.back{border:0;background:none;color:var(--primary-ink);font-weight:700;padding:0;align-self:flex-start}
.overlay{position:fixed;inset:0;background:rgba(20,19,64,.45);display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;overflow:auto;z-index:30}
.modal{width:100%;max-width:520px;padding:24px;margin:auto}
.row-static{padding:16px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.row-static .main{flex:1;min-width:220px}
.row-static .t{font-weight:700}.row-static .s{font-size:13px;color:var(--muted);margin-top:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;gap:10px;align-items:center;font-size:14px}
.check input{width:18px;height:18px}
input[type=number],input[type=color]{padding:12px 14px;border:1.5px solid #D7DAEA;border-radius:12px;background:#fff;width:100%}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}

/* publicités */
.ad-wrap{position:relative;display:grid}
.ad-slide{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .6s}
.ad-slide.on{opacity:1;pointer-events:auto}
.ad-dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:6px}
.ad-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5)}.ad-dots i.on{background:#fff}
.ad{position:relative;overflow:hidden;border-radius:24px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#fff;min-height:160px;box-shadow:0 10px 30px rgba(20,20,60,.18)}
.ad::after{content:"";position:absolute;inset:-40% auto auto -20%;width:60%;height:200%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:rotate(12deg);animation:adshine 5s ease-in-out infinite;pointer-events:none}
@keyframes adshine{0%{left:-60%}60%,100%{left:130%}}
.ad-txt{display:flex;flex-direction:column;gap:10px;align-items:flex-start;max-width:560px;position:relative;z-index:1}
.ad-badge{background:#fff;color:#1B1340;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.ad-title{font-size:28px;font-weight:800;line-height:1.1}
.ad-body{font-size:15px;opacity:.95}
.ad-cta{background:#fff;color:#1B1340;font-weight:800;border-radius:999px;padding:12px 24px;text-decoration:none;font-size:14px;animation:adpulse 2.2s infinite;cursor:pointer}
@keyframes adpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.ad-img{max-height:130px;max-width:38%;object-fit:contain;border-radius:16px;transform:rotate(3deg);animation:adfloat 4s ease-in-out infinite;position:relative;z-index:1}
@keyframes adfloat{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-8px)}}
.ad-small{padding:18px 22px;min-height:0}.ad-small .ad-title{font-size:20px}.ad-small .ad-img{max-height:80px}
.ad-t-indigo{background:linear-gradient(120deg,#4F46E5,#7C3AED)}
.ad-t-sunset{background:linear-gradient(120deg,#FF512F,#F09819)}
.ad-t-emerald{background:linear-gradient(120deg,#0BA360,#3CBA92)}
.ad-t-night{background:linear-gradient(120deg,#0F2027,#2C5364)}
.ad-t-pink{background:linear-gradient(120deg,#EE0979,#FF6A00)}
@media(max-width:620px){.ad{flex-direction:column;align-items:flex-start}.ad-img{max-width:60%}.ad-title{font-size:22px}}
@media(prefers-reduced-motion:reduce){.ad::after,.ad-cta,.ad-img{animation:none}}