:root {
  --navy: #0b1f33;
  --navy-2: #132a42;
  --ink: #102033;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --surface: #ffffff;
  --bg: #f1f5f9;
  --bg-2: #e8eef5;
  --teal: #0d8a7d;
  --teal-hover: #0a7167;
  --teal-soft: rgba(13,138,125,.12);
  --danger: #b42318;
  --warn: #b54708;
  --ok: #067647;
  --info: #175cd3;
  --sidebar-w: 248px;
  --top-h: 52px;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.04);
  --font: "IBM Plex Sans", system-ui, sans-serif;
  --display: "Sora", "IBM Plex Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.45}
a{color:inherit;text-decoration:none}
a:hover{color:var(--teal)}
button,input,select,textarea{font:inherit}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;margin:0 0 .4rem;font-weight:600;color:var(--ink)}
h1{font-size:1.35rem}
h2{font-size:1.05rem}
p{margin:0 0 .75rem;color:var(--ink-2)}
img{max-width:100%;display:block}

/* ========== CUSTOMER ========== */
.app-customer{min-height:100vh;display:flex;flex-direction:column;background:
  radial-gradient(900px 380px at 8% -10%, rgba(13,138,125,.10), transparent 55%),
  radial-gradient(700px 320px at 100% 0%, rgba(11,31,51,.07), transparent 50%),
  var(--bg)}
.topbar{position:sticky;top:0;z-index:30;height:60px;backdrop-filter:blur(12px);background:rgba(241,245,249,.88);border-bottom:1px solid var(--line)}
.topbar-inner{width:min(1120px,100% - 2rem);margin:0 auto;height:60px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.65rem;font-family:var(--display);font-weight:600;color:var(--navy)}
.brand img{height:32px;width:auto}
.topnav{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.topnav a{padding:.4rem .7rem;border-radius:999px;color:var(--ink-2);font-weight:500;font-size:.92rem}
.topnav a.is-active,.topnav a:hover{background:var(--teal-soft);color:var(--teal-hover)}
.topnav-user{margin-left:.4rem;color:var(--muted);font-size:.85rem}
.customer-main{flex:1;padding:1.5rem 0 2.5rem}
.customer-wrap{width:min(1120px,100% - 2rem);margin:0 auto}
.customer-footer{border-top:1px solid var(--line);padding:1.25rem 0;background:rgba(255,255,255,.55)}
.footer-row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
.footer-row span,.footer-links{color:var(--muted);font-size:.85rem}
.footer-links{display:flex;gap:1rem}

.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
.page-head .lead{max-width:36rem;margin:0;color:var(--muted)}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0 0 .35rem}

.stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-bottom:1rem}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.85rem 1rem;display:flex;flex-direction:column;gap:.15rem;transition:border-color .2s var(--ease), transform .2s var(--ease)}
.stat span{font-family:var(--display);font-size:1.35rem;font-weight:700;color:var(--navy)}
.stat:hover,.stat.is-active{border-color:var(--teal);transform:translateY(-1px)}
.stat.is-active{background:linear-gradient(180deg,#fff,rgba(13,138,125,.06))}

.panel,.ticket-table-wrap,.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.panel{padding:1.15rem 1.25rem}
.auth-card{width:min(440px,100%);margin:1.5rem auto;padding:1.5rem 1.4rem}
.auth-card h1{font-size:1.45rem}
.auth-card .lead{font-size:.95rem}

.form-grid{display:grid;gap:.85rem}
.form-grid.two{grid-template-columns:1fr 1fr;gap:.85rem}
.form-section{margin:0 0 1rem;padding:0 0 .9rem;border-bottom:1px solid var(--line)}
.form-section:last-of-type{border-bottom:0;margin-bottom:.25rem;padding-bottom:0}
.form-section h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .65rem;font-weight:700}
.form-span-2{grid-column:1 / -1}
label{display:grid;gap:.35rem;font-size:.82rem;font-weight:600;color:var(--ink-2)}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=file],select,textarea{
  width:100%;border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:.55rem .7rem;background:#fff;color:var(--ink);transition:border-color .15s, box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
textarea{resize:vertical;min-height:110px}
.check{display:flex;align-items:center;gap:.5rem;font-weight:500}
.actions{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border-radius:var(--radius-sm);border:1px solid transparent;padding:.5rem .9rem;font-weight:600;font-size:.88rem;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-hover);color:#fff}
.btn-outline{background:#fff;border-color:var(--line-2);color:var(--ink-2)}
.btn-outline:hover{border-color:var(--teal);color:var(--teal)}
.btn-danger{background:#fff;border-color:#fecdca;color:var(--danger)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-sm{padding:.32rem .6rem;font-size:.8rem}
.btn-block{width:100%}

.ticket-table{width:100%;border-collapse:collapse}
.ticket-table th,.ticket-table td{padding:.7rem .9rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.ticket-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;background:#f8fafc}
.ticket-table tbody tr{transition:background .12s}
.ticket-table tbody tr:hover{background:#f8fafc}
.ticket-table a{color:var(--navy);font-weight:600}
.ticket-table a:hover{color:var(--teal)}
.muted{color:var(--muted);font-size:.82rem}
.empty-state{padding:2.5rem 1.5rem;text-align:center}
.empty-state h2{margin-bottom:.35rem}

.badge{display:inline-flex;align-items:center;padding:.15rem .45rem;border-radius:999px;font-size:.72rem;font-weight:650;letter-spacing:.01em}
.badge-open{background:#ecfdf3;color:#067647}
.badge-pending{background:#fffaeb;color:#b54708}
.badge-closed{background:#f2f4f7;color:#475467}
.badge-p-low{background:#f2f4f7;color:#475467}
.badge-p-normal{background:#eff8ff;color:#175cd3}
.badge-p-high{background:#fffaeb;color:#b54708}
.badge-p-urgent{background:#fef3f2;color:#b42318}

.tag-row{display:inline-flex;flex-wrap:wrap;gap:.25rem}
.tag-chip{display:inline-flex;align-items:center;padding:.1rem .4rem;border-radius:999px;font-size:.68rem;font-weight:650;background:color-mix(in srgb, var(--tag) 16%, white);color:var(--tag);border:1px solid color-mix(in srgb, var(--tag) 35%, white)}

.thread{display:grid;gap:.75rem;margin:1rem 0}
.msg{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;animation:rise .35s var(--ease) both}
.msg .msg-hd{display:flex;justify-content:space-between;gap:.75rem;margin-bottom:.45rem;font-size:.82rem}
.msg .msg-hd time{color:var(--muted)}
.msg-body{white-space:pre-wrap;color:var(--ink);line-height:1.55}
.msg-customer{border-left:3px solid var(--line-2)}
.msg-staff{border-left:3px solid var(--teal)}
.msg-internal{background:#fffbeb;border-color:#fde68a;border-left:3px solid #f59e0b}
.att-list{margin:.5rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.att-list a{display:inline-flex;padding:.25rem .5rem;border:1px solid var(--line);border-radius:6px;font-size:.78rem;background:#f8fafc}

.flash{padding:.7rem .9rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.9rem;border:1px solid transparent;animation:rise .3s var(--ease)}
.flash-ok,.flash.ok{background:#ecfdf3;border-color:#abefc6;color:#067647}
.flash-err,.flash.err{background:#fef3f2;border-color:#fecdca;color:#b42318}
.flash-warn,.flash.warn{background:#fffaeb;border-color:#fedf89;color:#b54708}

.meta-line{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;color:var(--muted);font-size:.85rem;margin:0}
.avatar{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;font-size:.7rem;font-weight:700}

/* ========== STAFF SHELL ========== */
.app-staff{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) 1fr;background:var(--bg)}
.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,var(--navy),var(--navy-2));color:#dbe4ee;display:flex;flex-direction:column;padding:.9rem .7rem;z-index:40}
.sidebar-brand{display:flex;align-items:center;gap:.65rem;padding:.45rem .55rem 1rem;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:.7rem}
.sidebar-brand img{height:28px;width:auto;filter:brightness(1.05)}
.sidebar-brand strong{display:block;font-family:var(--display);font-size:.92rem;color:#fff}
.sidebar-brand span{font-size:.7rem;color:#8aa0b5}
.sidebar-nav{display:grid;gap:.2rem;flex:1;overflow:auto}
.side-link{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .65rem;border-radius:8px;color:#c5d2df;font-weight:500;font-size:.88rem}
.side-link:hover{background:rgba(255,255,255,.06);color:#fff}
.side-link.is-active{background:rgba(13,138,125,.28);color:#fff;box-shadow:inset 0 0 0 1px rgba(13,138,125,.45)}
.side-label{display:inline-flex;align-items:center;gap:.55rem}
.side-label svg{width:16px;height:16px;opacity:.9}
.side-badge{background:rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:.05rem .4rem;font-size:.7rem;font-weight:700}
.sidebar-foot{border-top:1px solid rgba(255,255,255,.08);padding-top:.7rem;margin-top:.5rem;display:grid;gap:.35rem}
.sidebar-user{padding:0 .55rem}
.sidebar-user strong{display:block;color:#fff;font-size:.85rem}
.sidebar-user span{font-size:.72rem;color:#8aa0b5;text-transform:uppercase;letter-spacing:.04em}

.staff-frame{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.staff-top{height:var(--top-h);display:flex;align-items:center;gap:.75rem;padding:0 1rem;border-bottom:1px solid var(--line);background:rgba(255,255,255,.9);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
.staff-top-title{font-family:var(--display);font-weight:600;font-size:.98rem;color:var(--navy)}
.staff-top-meta{margin-left:auto;display:flex;gap:.4rem}
.pill{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:999px;background:#eef2f6;color:var(--ink-2);font-size:.75rem;font-weight:600}
.pill.muted{color:var(--muted)}
.nav-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:6px;padding:.25rem .5rem;cursor:pointer}
.staff-content{padding:1rem 1.1rem 1.5rem;min-width:0}

.toolbar{display:flex;flex-wrap:wrap;gap:.55rem;align-items:end;margin-bottom:.75rem;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem}
.toolbar .field{display:grid;gap:.25rem;min-width:120px}
.toolbar .field.grow{flex:1;min-width:180px}
.toolbar label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.queue-stats{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.75rem}
.queue-stats a{padding:.35rem .7rem;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.8rem;font-weight:600;color:var(--ink-2)}
.queue-stats a.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.queue-stats a b{margin-right:.25rem}

.dense-table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:auto;box-shadow:var(--shadow)}
.dense-table{width:100%;border-collapse:collapse;min-width:860px}
.dense-table th,.dense-table td{padding:.55rem .7rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;font-size:.84rem}
.dense-table th{position:sticky;top:0;background:#f8fafc;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);z-index:1}
.dense-table tbody tr{cursor:pointer;transition:background .1s}
.dense-table tbody tr:hover{background:#f8fafc}
.dense-table .subject{font-weight:600;color:var(--navy)}
.dense-table .id-col{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;color:var(--muted);white-space:nowrap}
.bulk-bar{display:flex;gap:.5rem;align-items:center;padding:.55rem .7rem;background:#f8fafc;border-bottom:1px solid var(--line)}

/* Ticket workspace */
.workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:.85rem;align-items:start;min-height:calc(100vh - 100px)}
.ws-meta,.ws-main{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.ws-meta{padding:.85rem;position:sticky;top:calc(var(--top-h) + .75rem);display:grid;gap:.85rem}
.ws-meta h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .45rem}
.meta-block{display:grid;gap:.45rem}
.meta-block .row{display:grid;gap:.25rem}
.meta-block .row > span{font-size:.7rem;color:var(--muted);font-weight:600}
.requester{display:flex;gap:.6rem;align-items:center}
.requester strong{display:block;font-size:.9rem}
.ws-main{display:flex;flex-direction:column;min-height:640px}
.ws-head{padding:.85rem 1rem;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.ws-head h1{font-size:1.15rem;margin:0}
.ws-thread{flex:1;padding:1rem;display:grid;gap:.7rem;align-content:start;background:linear-gradient(180deg,#f8fafc,#fff 120px)}
.ws-composer{border-top:1px solid var(--line);padding:.85rem 1rem;background:#fff;border-radius:0 0 10px 10px}
.composer-tabs{display:flex;gap:.3rem;margin-bottom:.65rem}
.composer-tabs button{border:1px solid var(--line);background:#f8fafc;border-radius:999px;padding:.3rem .7rem;font-size:.8rem;font-weight:600;cursor:pointer;color:var(--ink-2)}
.composer-tabs button.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.composer-tabs button[data-tab=internal].is-active{background:#b54708;border-color:#b54708}
.composer-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.55rem;align-items:end}
.canned-select{min-width:200px}
.timeline{display:grid;gap:.4rem;margin-top:.2rem}
.timeline-item{font-size:.75rem;color:var(--muted);padding:.35rem .5rem;border-left:2px solid var(--line);background:#f8fafc;border-radius:0 6px 6px 0}

.report-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-bottom:1rem}
.report-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1rem;box-shadow:var(--shadow)}
.report-card b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--navy)}
.report-card span{color:var(--muted);font-size:.8rem}
.bars{display:grid;gap:.45rem}
.bar-row{display:grid;grid-template-columns:110px 1fr 36px;gap:.5rem;align-items:center;font-size:.82rem}
.bar-track{height:8px;background:#e8eef5;border-radius:999px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--teal),#14b8a6);border-radius:999px}

.split-2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.list-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1rem;box-shadow:var(--shadow)}

@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.reveal{animation:rise .4s var(--ease) both}

@media (max-width:1100px){
  .workspace{grid-template-columns:1fr}
  .ws-meta{position:static}
  .report-grid,.stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-2,.form-grid.two{grid-template-columns:1fr}
}
@media (max-width:860px){
  .app-staff{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-105%);transition:transform .25s var(--ease);width:min(280px,86vw)}
  body.sidebar-open .sidebar{transform:none;box-shadow:20px 0 40px rgba(0,0,0,.25)}
  .nav-toggle{display:inline-flex}
  .stats-row,.report-grid{grid-template-columns:1fr 1fr}
}

/* customer-picker */
.customer-picker input[type=search]{margin-bottom:.2rem;padding:.35rem .5rem;font-size:.8rem}

/* SLA */
.sla-chip{display:inline-flex;align-items:center;gap:.25rem;flex-wrap:wrap;max-width:14rem;font-size:.72rem;font-weight:600;line-height:1.25;color:var(--ink-2);padding:.2rem .45rem;border-radius:6px;background:#f8fafc;border:1px solid var(--line)}
.sla-chip.sla-agent{background:#eff8ff;border-color:#b2ddff;color:#175cd3}
.sla-chip.sla-customer{background:#f0fdfa;border-color:#99f6e4;color:#0f766e}
.sla-chip.sla-overdue{background:#fef3f2;border-color:#fecdca;color:#b42318}
.sla-chip.sla-closed{background:#f2f4f7;color:#475467}
.sla-flag{display:inline-block;padding:.05rem .3rem;border-radius:4px;background:#b42318;color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.sla-cell{min-width:9.5rem}
.row-sla-overdue td{background:rgba(180,35,24,.035)}
.sla-panel{margin:.75rem 0;padding:.75rem .8rem;border:1px solid var(--line);border-radius:8px;background:#f8fafc}
.sla-panel.is-overdue{border-color:#fecdca;background:#fff8f7}
.sla-panel h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .55rem}
.sla-rows{display:grid;gap:.4rem}
.sla-row{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start;font-size:.8rem}
.sla-row span{color:var(--muted)}
.sla-note{font-size:.72rem;margin:.55rem 0 0}
.sla-expect{margin:.45rem 0 0;font-size:.88rem;max-width:36rem;line-height:1.45}

/* live refresh */
.live-bar{display:flex;align-items:center;gap:.4rem;font-size:.75rem;margin-bottom:.15rem;padding:.25rem 0}
.live-bar.is-fresh{color:var(--teal)}
.live-dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(13,138,125,.45);animation:livepulse 2s ease-out infinite;flex:0 0 auto}
.live-stale{color:var(--warn);font-weight:600}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(13,138,125,.4)}70%{box-shadow:0 0 0 8px rgba(13,138,125,0)}100%{box-shadow:0 0 0 0 rgba(13,138,125,0)}}
.thread{display:grid;gap:.7rem}