:root{
  --bg:#0a0f15;
  --panel:#101827;
  --card:#111c2a;
  --card2:#0f1826;
  --text:#e6eefb;
  --muted:#94a3b8;
  --border:rgba(148,163,184,.16);
  --border-strong:rgba(148,163,184,.28);
  --brand:#22d3ee;
  --brand2:#2bd3a5;
  --accent:#f59e0b;
  --danger:#fb7185;
  --warn:#fbbf24;
  --ok:#22c55e;
  --shadow:0 22px 50px rgba(2,6,23,.45);
  --radius:20px;
  --radius2:14px;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans:"Sora", "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-theme="light"]{
  --bg:#f4f6fb;
  --panel:#ffffff;
  --card:#ffffff;
  --card2:#f6f8fc;
  --text:#0f172a;
  --muted:#526377;
  --border:rgba(15,23,42,.12);
  --border-strong:rgba(15,23,42,.2);
  --shadow:0 18px 40px rgba(15,23,42,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  line-height:1.5;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(800px 500px at 90% 0%, rgba(43,211,165,.16), transparent 55%),
    linear-gradient(180deg, rgba(8,12,20,.96), rgba(6,10,16,1)),
    var(--bg);
}
body::before{
  content:"";
  position:fixed;
  inset:-40% -10% auto -10%;
  height:60%;
  background: radial-gradient(closest-side, rgba(34,211,238,.10), transparent 70%);
  pointer-events:none;
  opacity:.6;
  z-index:-1;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

.container{max-width:1280px;margin:0 auto;padding:28px}
.container-full{max-width:none;margin:0;padding:14px 18px;height:calc(100vh - 74px);overflow:hidden}

.topbar{
  position:sticky;
  top:0;
  z-index:80;
  backdrop-filter:blur(16px);
  background:linear-gradient(180deg, rgba(12,18,28,.92), rgba(12,18,28,.6));
  border-bottom:1px solid var(--border);
  box-shadow:0 12px 40px rgba(2,6,23,.25);
}
[data-theme="light"] .topbar{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 28px}
.icon-btn{
  display:none;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--border-strong);
  background:rgba(255,255,255,.04);
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .08s ease;
}
.icon-btn span{
  display:block;
  width:18px;
  height:2px;
  background:var(--text);
  border-radius:999px;
}
.icon-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(34,211,238,.35)}
.icon-btn:active{transform:translateY(1px)}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:40px;height:40px;border-radius:14px;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow:0 16px 30px rgba(34,211,238,.28);
}
.brand-title{font-weight:700;letter-spacing:.2px;font-size:17px}
.brand-sub{font-size:12px;color:var(--muted);margin-top:2px}
.nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.nav-section{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nav-title{
  display:none;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.nav .btn.active{
  border-color:rgba(34,211,238,.7);
  background:linear-gradient(135deg, rgba(34,211,238,.28), rgba(43,211,165,.16));
  box-shadow:0 10px 24px rgba(34,211,238,.18);
}

.quickbar{
  max-width:1280px;
  margin:18px auto 0;
  padding:16px 20px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00)),
    var(--panel);
  box-shadow:var(--shadow);
}
.quick-title{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
.quick-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.sidebar-overlay{
  position:fixed;
  inset:0;
  background:rgba(5,8,12,.55);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:60;
}
body.sidebar-open .sidebar-overlay{
  opacity:1;
  pointer-events:auto;
}
body.sidebar-open{overflow:hidden}

h1,h2,h3{margin:0;letter-spacing:.2px}

.card{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00)),
    var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  overflow:hidden;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(400px 160px at 10% 0%, rgba(34,211,238,.08), transparent 70%);
  opacity:.6;
  pointer-events:none;
}
.card > *{position:relative}

.hr{height:1px;background:var(--border);margin:16px 0}
.small{font-size:12px;color:var(--muted)}
.mono{font-family:var(--mono)}
.row{display:flex;gap:16px}
.col{flex:1;min-width:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:16px;
  border:1px solid var(--border-strong);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-weight:600;
  transition:transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  user-select:none;
}
.btn:hover{background:rgba(255,255,255,.08);border-color:rgba(34,211,238,.35);box-shadow:0 10px 20px rgba(2,6,23,.2)}
.btn:active{transform:translateY(1px)}
.btn-primary{
  border-color:rgba(34,211,238,.6);
  background:linear-gradient(135deg, rgba(34,211,238,.45), rgba(43,211,165,.25));
  box-shadow:0 12px 24px rgba(34,211,238,.18);
}
.btn-danger{border-color:rgba(251,113,133,.55);background:rgba(251,113,133,.14)}
.btn-ghost{background:transparent;border-color:var(--border)}
.btn-chip{padding:8px 12px;border-radius:999px;font-size:12px}

.input, select.input, textarea.input{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--border-strong);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input::placeholder{color:var(--muted)}
textarea.input{resize:vertical}
.input:focus{border-color:rgba(34,211,238,.55);box-shadow:0 0 0 3px rgba(34,211,238,.18)}
label.small{display:block;margin-bottom:6px}
select.input{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(148,163,184,.7) 50%),
    linear-gradient(135deg, rgba(148,163,184,.7) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:34px;
}

.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:12px 12px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.table th{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.table tr:hover td{background:rgba(255,255,255,.04)}
.table td:first-child,.table th:first-child{border-top-left-radius:12px}
.table td:last-child,.table th:last-child{border-top-right-radius:12px}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  font-size:12px;font-weight:600;
  border:1px solid var(--border-strong);
  background:rgba(255,255,255,.04);
}
.badge.ok{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.12)}
.badge.warn{border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.12)}
.badge.danger{border-color:rgba(251,113,133,.55);background:rgba(251,113,133,.14)}
.badge.brand{border-color:rgba(34,211,238,.55);background:rgba(34,211,238,.14)}
.badge.muted{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--muted)}

.notice{
  border:1px dashed var(--border-strong);
  background:rgba(255,255,255,.03);
  border-radius:var(--radius2);
  padding:12px;
}

.kpi{display:flex;gap:10px;flex-wrap:wrap}
.kpi .pill{
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--border-strong);
  background:rgba(255,255,255,.03);
  font-size:12px;font-weight:600;
}

.messages{display:flex;flex-direction:column;gap:10px}
.msg{
  max-width:82%;
  padding:12px 12px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--card2);
  white-space:pre-wrap;
}
.msg.user{align-self:flex-start;border-top-left-radius:10px}
.msg.admin{
  align-self:flex-end;
  border-top-right-radius:10px;
  background:linear-gradient(135deg, rgba(34,211,238,.18), rgba(43,211,165,.12)), var(--card2);
  border-color:rgba(34,211,238,.24);
}
.msg-meta{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:11px;color:var(--muted);font-family:var(--mono)}
.msg-attach{margin-top:8px;font-size:12px;color:var(--muted)}

.grid-2{display:grid;grid-template-columns:1.3fr .7fr;gap:16px}

/* Live chat */
.chat-shell{display:flex;flex-direction:column;gap:10px}
.chat-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(34,211,238,.12), rgba(43,211,165,.08));
}
.chat-top > div{display:flex;align-items:center;gap:10px}
.live-dot{
  width:10px;height:10px;border-radius:999px;
  background:var(--ok);
  box-shadow:0 0 0 0 rgba(34,197,94,.45);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}
  70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
.chat-scroll{
  height:calc(100vh - 360px);
  min-height:360px;
  max-height:640px;
  overflow:auto;
  padding:10px 6px;
  border-radius:18px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
}
#composer{
  position:sticky;
  bottom:0;
  padding-top:10px;
  background:linear-gradient(180deg, rgba(10,15,21,0), rgba(10,15,21,.85) 30%, rgba(10,15,21,1) 65%);
  backdrop-filter:blur(8px);
}

/* Chat layout v2 */
.chat-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:stretch;height:100%}
.sidebar-stack{display:flex;flex-direction:column;gap:16px}

.chat-card{display:flex;flex-direction:column;min-height:0;height:100%}
.chat-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chat-title{margin:0;font-size:22px}
.chat-live{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(135deg, rgba(34,211,238,.12), rgba(43,211,165,.08))}

.msg-bubble{display:flex;flex-direction:column;gap:6px}
.msg-text{white-space:pre-wrap}

.day-sep{display:flex;align-items:center;justify-content:center;margin:14px 0}
.day-sep:before,.day-sep:after{content:"";height:1px;background:var(--border);flex:1}
.day-sep span{font-size:12px;color:var(--muted);padding:0 10px;font-family:var(--mono);text-transform:lowercase}

.chat-composer{
  margin-top:10px;
  position:sticky;
  bottom:0;
  padding-top:12px;
  background:linear-gradient(180deg, rgba(10,15,21,0), rgba(10,15,21,.88) 30%, rgba(10,15,21,1) 65%);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--border);
}

#replyForm{max-width:82%;margin-left:auto}
.chat-input{
  width:100%;
  resize:none;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--card2);
  color:var(--text);
  outline:none;
  min-height:42px;
  line-height:1.25;
}
.chat-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.chat-actions .input{max-width:420px}

.side-title{margin:0;font-size:18px}
.kv{display:grid;grid-template-columns:1fr 1.2fr;gap:8px 10px;align-items:center}

.no-page-scroll{overflow:hidden}

/* Ticket layout sizing */
#chatScroll{flex:1;min-height:0;overflow:auto;padding-right:10px}

.reply-form{
  width:min(720px, 78%);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chat-actions{justify-content:flex-end}
.chat-actions .input{max-width:360px}

.side-card{
  display:flex;
  flex-direction:column;
  min-height:0;
  height:100%;
  position:sticky;
  top:86px;
}
.side-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.side-tabs{
  display:flex;
  gap:8px;
  margin-top:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.tab{
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}
.tab.active{
  border-color:rgba(34,211,238,.6);
  background:linear-gradient(135deg, rgba(34,211,238,.22), rgba(43,211,165,.12));
}
.side-panels{flex:1;min-height:0;overflow:hidden}
.tab-panel{display:none;height:100%}
.tab-panel.active{display:block;height:100%;overflow:auto;padding-top:12px}
.side-card.collapsed .side-tabs,
.side-card.collapsed .side-panels{display:none}
.side-card.collapsed{height:auto}

.notes-list{display:flex;flex-direction:column;gap:10px;padding-bottom:6px}
.msg .msg-bubble{max-width:72ch}
.msg.admin .msg-bubble{max-width:68ch}
.msg-meta{opacity:.85}

/* Scrollbars */
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-thumb{background:rgba(148,163,184,.35);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-track{background:rgba(15,23,42,.08)}

@media(max-width:1180px){
  .chat-grid{grid-template-columns:1fr 360px}
}

@media(max-width:1024px){
  .topbar-inner{padding:12px 16px}
}

@media(max-width:980px){
  .grid-2{grid-template-columns:1fr}
  .msg{max-width:100%}
  .chat-grid{grid-template-columns:1fr}
  .side-card{position:relative;top:auto;height:auto}
  #chatScroll{padding-right:0}
  .container-full{height:auto;overflow:visible}
  .no-page-scroll{overflow:auto}
}

@media(max-width:900px){
  .topbar-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .brand{min-width:0}
  .brand-title{font-size:16px}
  .brand-sub{font-size:11px}
  .icon-btn{display:inline-flex}
  .topbar-inner{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
  }
  .nav{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:min(78vw, 320px);
    padding:84px 18px 18px;
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    background:linear-gradient(180deg, rgba(12,18,28,.96), rgba(12,18,28,.88));
    border-right:1px solid var(--border);
    box-shadow:0 20px 50px rgba(2,6,23,.45);
    transform:translateX(-105%);
    transition:transform .2s ease;
    z-index:60;
    overflow-y:auto;
  }
  .nav-section{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .nav-title{display:block}
  body.sidebar-open .nav{transform:translateX(0)}
  .nav .btn{
    width:100%;
    justify-content:flex-start;
    padding:12px 14px;
    border-radius:14px;
  }
  .container{padding:16px}
  .row{flex-direction:column}
  .col{width:100%}
  .card{padding:14px}
  .quickbar{margin:14px 16px 0}
}

@media(max-width:720px){
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table th,.table td{white-space:nowrap}
  .table .btn{width:auto}
  form[method="get"] > div,
  form[method="post"] > div{flex:1 1 100%;min-width:0 !important}
  .kpi{gap:8px}
  .btn{width:100%}
  .btn.btn-chip{width:auto}
  #replyForm{max-width:100%}
  .reply-form{width:100%}
  .quick-actions{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .quick-actions .btn{width:auto;white-space:nowrap}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}