/* Helpdesk Triage · Support Ticket Triage — friendly helpdesk styles. Light. */
@font-face{font-family:"Rubik";src:url("/assets/fonts/rubik-latin.woff2") format("woff2");font-weight:100 900;font-display:swap;}

:root{
  --page:#f5f7fb;
  --card:#ffffff;
  --card-2:#f9fbff;
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --teal:#06b6d4;
  --urgent:#f97316;
  --text:#1f2937;
  --text-soft:#4b5563;
  --muted:#8a94a6;
  --border:#e6eaf1;
  --border-strong:#d7deeb;

  --low:#10b981;      --low-bg:#e7f8f1;    --low-ink:#047857;
  --medium:#f59e0b;   --medium-bg:#fdf3e0;  --medium-ink:#b45309;
  --high:#f97316;     --high-bg:#fdeede;    --high-ink:#c2410c;
  --urgent-red:#ef4444;--urgent-bg:#fdecec; --urgent-ink:#dc2626;

  --primary-soft:#e8f0ff;
  --teal-soft:#dcf6fb;

  --shadow-sm:0 1px 2px rgba(31,41,55,.05), 0 2px 6px rgba(31,41,55,.05);
  --shadow-md:0 2px 6px rgba(31,41,55,.06), 0 10px 30px rgba(37,99,235,.08);
  --shadow-lg:0 8px 34px rgba(37,99,235,.14);
  --radius:20px;
  --radius-sm:12px;
  --font:"Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  background:
    radial-gradient(900px 420px at 88% -8%, rgba(6,182,212,.10), transparent 60%),
    radial-gradient(760px 380px at 4% -4%, rgba(37,99,235,.10), transparent 58%),
    var(--page);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}

/* ---- local sub-header (sits below the injected navy nav) ---- */
.topbar{
  display:flex; align-items:center; gap:13px;
  padding:14px 26px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:11px; font-weight:600; letter-spacing:-.01em; color:var(--text);}
.brand .logo{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:18px;
  background:linear-gradient(135deg, var(--primary), var(--teal));
  box-shadow:0 4px 12px rgba(37,99,235,.32);
}
.brand .sub{color:var(--muted); font-weight:500; font-size:13px;}
.topbar .spacer{flex:1;}
.topbar .badge{
  font-size:12px; font-weight:600; color:var(--low-ink);
  background:var(--low-bg); border:1px solid rgba(16,185,129,.28);
  padding:5px 12px; border-radius:999px;
  display:inline-flex; align-items:center; gap:7px;
}
.topbar .badge .dot{
  width:8px; height:8px; border-radius:50%; background:var(--low);
  box-shadow:0 0 0 3px rgba(16,185,129,.2);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.45;}}

/* ---- layout ---- */
.wrap{max-width:1040px; margin:0 auto; padding:34px 26px 80px;}
.hero{margin-bottom:24px;}
.hero h1{
  margin:0; font-size:30px; font-weight:700; letter-spacing:-.025em;
  color:var(--text);
}
.hero p{margin:9px 0 0; color:var(--text-soft); font-size:15.5px; max-width:700px;}

/* ---- cards ---- */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-md); padding:24px;
}
.input-card{position:relative;}

.notes-head{display:flex; align-items:baseline; justify-content:space-between; margin:0 0 8px;}
.notes-head label{font-size:13px; font-weight:600; color:var(--text-soft);}
.link-btn{
  background:none; border:none; color:var(--primary); font-family:inherit;
  font-size:13px; font-weight:600; cursor:pointer; padding:0;
}
.link-btn:hover{color:var(--primary-dark); text-decoration:underline;}

textarea{
  width:100%; font-family:inherit; font-size:14px; color:var(--text);
  background:var(--card-2); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); padding:14px; outline:none;
  min-height:210px; resize:vertical; line-height:1.6;
  transition:border-color .15s, box-shadow .15s;
}
textarea::placeholder{color:var(--muted);}
textarea:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(37,99,235,.14);}
.helper{color:var(--muted); font-size:12.5px; margin-top:8px;}

.actions{display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:inherit;
  font-size:14.5px; font-weight:600; color:#fff; cursor:pointer;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  border:none; border-radius:999px; padding:12px 24px;
  box-shadow:0 6px 16px rgba(37,99,235,.28);
  transition:transform .12s, box-shadow .12s, filter .12s;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(37,99,235,.34);}
.btn:active{transform:translateY(0);}
.btn.ghost{
  background:#fff; color:var(--primary); border:1.5px solid var(--border-strong);
  box-shadow:none;
}
.btn.ghost:hover{border-color:var(--primary); background:var(--primary-soft);}
.btn.small{padding:8px 16px; font-size:12.5px;}
.btn:disabled{opacity:.6; cursor:default; transform:none; box-shadow:none;}
.btn .spinner{
  width:15px; height:15px; border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.hint{color:var(--muted); font-size:12.5px;}

.banner{
  margin-top:18px; padding:12px 16px; border-radius:var(--radius-sm);
  font-size:13.5px; border:1px solid var(--border);
  display:flex; gap:10px; align-items:flex-start;
}
.banner.error{
  background:var(--urgent-bg); border-color:rgba(239,68,68,.32); color:var(--urgent-ink);
}
.banner .i{
  font-weight:800; display:inline-grid; place-items:center;
  width:20px; height:20px; border-radius:50%; flex:none;
  background:var(--urgent-red); color:#fff; font-size:13px;
}

/* ---- results ---- */
#results{margin-top:24px; display:none;}
#results.show{display:block; animation:rise .4s ease both;}
@keyframes rise{from{opacity:0; transform:translateY(14px);}to{opacity:1; transform:translateY(0);}}

/* summary bar */
.summary-bar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.summary-bar .stats{display:flex; gap:12px; flex-wrap:wrap;}
.stat{
  border:1px solid var(--border); border-radius:16px; padding:14px 20px;
  background:var(--card); box-shadow:var(--shadow-sm); min-width:132px;
}
.stat .s-val{font-size:27px; font-weight:800; letter-spacing:-.02em; color:var(--text); line-height:1.1;}
.stat .s-val.urgent{color:var(--urgent-ink);}
.stat .s-lab{color:var(--muted); font-size:12px; font-weight:500; margin-top:3px;}
.summary-bar .headline{
  flex:1; min-width:220px; font-size:14px; font-weight:500; color:var(--text-soft);
}
.sample-tag{
  display:inline-block; margin-left:8px; vertical-align:middle;
  background:var(--teal-soft); color:#0e7490; border:1px solid rgba(6,182,212,.4);
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px;
}

/* ticket cards — triage lanes */
.ticket{
  border:1px solid var(--border); border-radius:18px; background:var(--card);
  box-shadow:var(--shadow-sm); padding:18px 20px 18px 22px; margin-bottom:14px;
  position:relative; overflow:hidden;
  transition:box-shadow .16s, transform .16s;
}
.ticket::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:var(--border-strong);
}
.ticket:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.ticket.urgent::before{background:linear-gradient(var(--urgent-red), var(--urgent));}
.ticket.high::before{background:var(--high);}
.ticket.medium::before{background:var(--medium);}
.ticket.low::before{background:var(--low);}

.ticket-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.ticket-head .excerpt{
  font-size:15.5px; font-weight:600; letter-spacing:-.01em; color:var(--text);
  flex:1; min-width:200px; line-height:1.45;
}

.pill{
  font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px;
  border:1px solid transparent; white-space:nowrap;
}
.pill.cat{color:var(--primary); background:var(--primary-soft); border-color:rgba(37,99,235,.24);}
.pill.urg{text-transform:uppercase; letter-spacing:.05em; font-size:10.5px;}
.pill.urg.urgent{color:#fff; background:var(--urgent-red); border-color:var(--urgent-red);}
.pill.urg.high{color:var(--high-ink); background:var(--high-bg); border-color:rgba(249,115,22,.4);}
.pill.urg.medium{color:var(--medium-ink); background:var(--medium-bg); border-color:rgba(245,158,11,.42);}
.pill.urg.low{color:var(--low-ink); background:var(--low-bg); border-color:rgba(16,185,129,.4);}

.ticket-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:13px 0 2px;}
.sent{
  font-size:11px; font-weight:700; text-transform:capitalize;
  padding:3px 11px; border-radius:999px; border:1px solid var(--border);
  background:#fff; color:var(--text-soft);
}
.sent.positive{color:var(--low-ink); border-color:rgba(16,185,129,.4); background:var(--low-bg);}
.sent.neutral{color:var(--text-soft); border-color:var(--border-strong); background:#f4f6fa;}
.sent.negative{color:var(--high-ink); border-color:rgba(249,115,22,.4); background:var(--high-bg);}
.sent.frustrated{color:var(--urgent-ink); border-color:rgba(239,68,68,.4); background:var(--urgent-bg);}
.team{
  font-size:12.5px; font-weight:600; color:var(--text);
  background:var(--teal-soft); border:1px solid rgba(6,182,212,.3);
  padding:3px 12px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px;
}
.team span{color:#0e7490; font-weight:500;}

/* expandable response panel */
.resp{
  margin-top:14px; border:1px solid var(--border); border-radius:14px;
  overflow:hidden; background:var(--card-2);
}
.resp summary{
  cursor:pointer; list-style:none; padding:12px 15px;
  font-weight:600; font-size:13.5px; color:var(--text);
  display:flex; align-items:center; gap:9px;
}
.resp summary::-webkit-details-marker{display:none;}
.resp summary:hover{color:var(--primary);}
.resp summary .spacer{flex:1;}
.resp summary .chev{
  color:var(--muted); font-size:18px; transition:transform .18s; line-height:1;
}
.resp[open] summary .chev{transform:rotate(90deg); color:var(--primary);}
.resp .body{padding:0 15px 15px;}
.resp .mail{
  white-space:pre-wrap; font-size:13px; line-height:1.65; color:var(--text-soft);
  border-top:1px solid var(--border); padding-top:12px;
}
.copy-mail{letter-spacing:0;}

.usage{margin-top:22px; text-align:center; color:var(--muted); font-size:12px;}
.foot-note{
  color:var(--muted); font-size:12px; margin-top:36px; text-align:center;
  line-height:1.6; max-width:640px; margin-left:auto; margin-right:auto;
}

@media (max-width:560px){
  .hero h1{font-size:25px;}
  .wrap{padding:26px 18px 60px;}
  .card{padding:20px;}
  .stat{flex:1; min-width:100px;}
}