:root {
  color-scheme: dark;
  --bg: #050505;
  --panel: #0a0a0a;
  --panel-2: #0f0f0f;
  --line: rgba(255,255,255,.085);
  --line-strong: rgba(255,255,255,.15);
  --text: #f3f4f6;
  --muted: #8d9198;
  --dim: #555b63;
  --cyan: #00e7f2;
  --green: #38d39f;
  --amber: #f4b740;
  --red: #ff5b67;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -15%, rgba(0,231,242,.06), transparent 35%),
    var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
a { color: inherit; text-decoration: none; }
::selection { background: #fff; color: #000; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #070707; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 999px; }

.mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
}

.hidden { display: none !important; }

.app-shell {
  min-height: 100dvh;
  height: 100dvh;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(5,5,5,.94);
  backdrop-filter: blur(18px);
  position: relative;
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px;
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.brand-mark::after {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(0,231,242,.8);
}

.brand-name {
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .11em;
}

.brand-sub {
  margin-top: 5px;
  font-size: 9px;
  color: var(--dim);
  text-transform: uppercase;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-button {
  height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #7c8188;
  font-size: 11px;
  font-weight: 600;
  transition: .16s ease;
}
.nav-button:hover { color: #fff; background: rgba(255,255,255,.025); }
.nav-button.active {
  color: #fff;
  border-color: var(--line-strong);
  background: #101010;
}

.user-cluster { display: flex; align-items: center; gap: 10px; }
.org-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.018);
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(56,211,159,.75);
}
.org-chip strong { display:block; font-size:10px; font-weight:700; color:#d5d7db; }
.org-chip span { display:block; margin-top:2px; font-size:8px; color:var(--dim); }

.logout-button {
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b0b0b;
  color: #848a91;
  font-size: 10px;
  font-weight: 650;
}
.logout-button:hover { color:#fff; border-color:var(--line-strong); }

.workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
}

.sidebar {
  min-height: 0;
  border-right: 1px solid var(--line);
  background: #070707;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.side-label {
  margin: 0 8px 8px;
  color: var(--dim);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.side-button {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 20px minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #7b8087;
  text-align: left;
  font-size: 11px;
  transition: .15s ease;
}
.side-button:hover { color: #fff; background: rgba(255,255,255,.025); }
.side-button.active {
  color: #fff;
  background: #101010;
  border-color: var(--line);
}
.side-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  color: #555b63;
}

.main {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.inbox-grid {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, 30%) minmax(360px, 1fr) minmax(330px, 34%);
}

.panel {
  min-width: 0;
  min-height: 0;
  background: #070707;
  display: flex;
  flex-direction: column;
}
.panel + .panel { border-left: 1px solid var(--line); }

.panel-head {
  min-height: 74px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.eyebrow {
  color: #666c73;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.panel-title {
  margin: 5px 0 0;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -.01em;
}

.icon-button {
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b0b0b;
  color: #757b82;
  font-size: 15px;
}
.icon-button:hover { color:#fff; border-color:var(--line-strong); }

.search-area { padding: 12px 14px; border-bottom:1px solid rgba(255,255,255,.05); }
.search-box {
  height: 39px;
  display:flex; align-items:center; gap:9px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#0b0b0b;
}
.search-box:focus-within { border-color: rgba(0,231,242,.32); }
.search-box input {
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  color:#e7e9ec; font-size:11px;
}
.search-box input::placeholder { color:#484d53; }

.ticket-list { min-height:0; overflow-y:auto; padding:8px; }
.ticket-row {
  width:100%;
  padding:13px 12px;
  margin-bottom:5px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  text-align:left;
  color:#8e949a;
}
.ticket-row:hover { background:#0c0c0c; border-color:rgba(255,255,255,.06); }
.ticket-row.active { background:#111; border-color:var(--line-strong); box-shadow: inset 2px 0 0 var(--cyan); }
.ticket-row-top { display:flex; align-items:center; gap:7px; }
.priority-dot { width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
.ticket-customer { min-width:0; flex:1; color:#d8dade; font-size:11px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ticket-age { font-size:8px; color:#555b63; }
.ticket-subject { margin-top:6px; font-size:10px; color:#858a91; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ticket-meta { margin-top:7px; font-size:8px; color:#4e545b; text-transform:uppercase; letter-spacing:.05em; }

.empty {
  flex:1;
  min-height:0;
  display:grid;
  place-items:center;
  padding:26px;
  text-align:center;
}
.empty-inner { max-width:390px; }
.empty-symbol {
  width:38px; height:38px;
  display:grid; place-items:center;
  margin:0 auto 18px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  transform:rotate(45deg);
}
.empty-symbol::after {
  content:"";
  width:8px; height:8px;
  background:var(--cyan);
  box-shadow:0 0 12px rgba(0,231,242,.75);
}
.empty h2 { margin:0; font-size:16px; font-weight:700; }
.empty p { margin:9px auto 0; color:#666c73; font-size:11px; line-height:1.7; }
.empty-code {
  margin-top:16px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#0b0b0b;
  color:#686e75;
  font:500 9px/1.5 "IBM Plex Mono", monospace;
}

.ticket-detail, .copilot-body { min-height:0; overflow-y:auto; }
.ticket-detail { padding:18px; }

.customer-head { display:flex; align-items:center; gap:10px; }
.avatar {
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:10px; background:#101010;
  color:#a6abb1; font-size:10px; font-weight:700;
}
.customer-name { font-size:13px; font-weight:700; }
.customer-email { margin-top:3px; color:#656b72; font-size:9px; }
.subject { margin:20px 0 0; font-size:19px; font-weight:720; letter-spacing:-.02em; }
.message-card {
  margin-top:16px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0b0b0b;
  color:#bfc3c8;
  font-size:12px;
  line-height:1.8;
  white-space:pre-wrap;
}
.detail-meta { margin-top:14px; display:flex; flex-wrap:wrap; gap:7px; }
.meta-pill {
  padding:6px 8px; border:1px solid var(--line); border-radius:7px;
  color:#686e75; background:#090909; font-size:8px; text-transform:uppercase;
}

.copilot-body { padding:15px; }
.copilot-state {
  padding:12px;
  border:1px solid rgba(0,231,242,.13);
  border-radius:9px;
  background:rgba(0,231,242,.025);
}
.copilot-state strong { display:block; color:var(--cyan); font-size:10px; }
.copilot-state p { margin:6px 0 0; color:#666c73; font-size:10px; line-height:1.6; }

.field-label {
  display:block; margin:17px 0 8px;
  color:#5d636a; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
}
.draft {
  width:100%; min-height:280px; resize:vertical;
  padding:14px;
  border:1px solid var(--line);
  border-radius:9px;
  outline:0;
  background:#0b0b0b;
  color:#c9cdd1;
  font-size:11px;
  line-height:1.75;
}
.draft:focus { border-color:rgba(0,231,242,.3); }
.copilot-actions {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:8px;
  padding:12px 14px;
  border-top:1px solid var(--line);
  background:#070707;
}
.action {
  height:41px;
  border-radius:8px;
  font-size:10px;
  font-weight:750;
}
.action.secondary { border:1px solid var(--line); background:#0b0b0b; color:#8c9198; }
.action.primary { border:1px solid #fff; background:#fff; color:#000; }

.setup-view {
  height:100%; overflow-y:auto; padding:clamp(28px,6vw,88px);
}
.setup-kicker { color:var(--cyan); font-size:9px; font-weight:750; text-transform:uppercase; letter-spacing:.09em; }
.setup-title { margin:14px 0 0; max-width:760px; font-size:clamp(34px,5vw,66px); line-height:1.02; letter-spacing:-.045em; }
.setup-copy { max-width:720px; margin:18px 0 0; color:#747a81; font-size:13px; line-height:1.8; }
.setup-grid { margin-top:34px; max-width:950px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.setup-card { padding:18px; border:1px solid var(--line); border-radius:11px; background:#0a0a0a; }
.setup-card span { display:block; color:#5f656c; font-size:9px; font-weight:700; text-transform:uppercase; }
.setup-card strong { display:block; margin-top:10px; font-size:13px; }
.setup-card p { margin:8px 0 0; color:#5f656c; font-size:10px; line-height:1.6; }

.auth-page {
  min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);
}
.auth-visual {
  padding:50px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--line);
  background:
    radial-gradient(circle at 40% 35%, rgba(0,231,242,.07), transparent 30%),
    #050505;
}
.auth-visual h1 {
  margin:0;
  max-width:720px;
  font-size:clamp(46px,7vw,100px);
  line-height:.93;
  letter-spacing:-.06em;
}
.auth-visual p { max-width:560px; color:#6f757c; font-size:13px; line-height:1.8; }
.auth-panel {
  display:grid; place-items:center;
  padding:30px;
  background:#080808;
}
.auth-card { width:min(420px,100%); }
.auth-card h2 { margin:0; font-size:27px; letter-spacing:-.035em; }
.auth-card > p { color:#6b7178; margin:9px 0 26px; font-size:12px; line-height:1.6; }
.auth-field { margin-top:13px; }
.auth-field label { display:block; margin-bottom:7px; color:#737981; font-size:10px; font-weight:650; }
.auth-input {
  width:100%; height:44px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:9px;
  outline:0;
  background:#0d0d0d;
  color:#f4f4f5;
  font-size:12px;
}
.auth-input:focus { border-color:rgba(0,231,242,.38); box-shadow:0 0 0 3px rgba(0,231,242,.025); }
.auth-submit {
  width:100%; height:45px; margin-top:20px;
  border:1px solid #fff; border-radius:9px;
  background:#fff; color:#000; font-size:11px; font-weight:800;
}
.auth-submit:hover { background:#e5e5e5; }
.auth-message {
  display:none;
  margin-top:13px; padding:10px;
  border:1px solid var(--line); border-radius:8px;
  color:#8c9299; background:#0b0b0b;
  font-size:10px; line-height:1.5;
}
.auth-message.show { display:block; }
.auth-message.error { border-color:rgba(255,91,103,.25); color:#ff838c; }
.auth-message.success { border-color:rgba(56,211,159,.25); color:#6be0b4; }
.auth-footer { margin-top:22px; color:#60666d; font-size:10px; text-align:center; }
.auth-footer a { color:#d5d7da; }
.dev-notice {
  margin-bottom:18px; padding:10px 11px;
  border:1px solid rgba(244,183,64,.22); border-radius:8px;
  background:rgba(244,183,64,.025); color:#a88b4c;
  font-size:10px; line-height:1.55;
}

@media (max-width: 1080px) {
  .workspace { grid-template-columns:150px minmax(0,1fr); }
  .inbox-grid { grid-template-columns:280px minmax(360px,1fr); }
  .copilot-panel { display:none; }
}
@media (max-width: 760px) {
  .app-shell { height:auto; min-height:100dvh; overflow:visible; }
  .top-nav, .org-chip { display:none; }
  .workspace { display:block; }
  .sidebar { display:none; }
  .main { overflow:visible; }
  .inbox-grid { display:block; }
  .panel { min-height:520px; border-left:0 !important; border-bottom:1px solid var(--line); }
  .copilot-panel { display:flex; }
  .auth-page { display:block; }
  .auth-visual { min-height:330px; padding:28px; border-right:0; border-bottom:1px solid var(--line); }
  .auth-panel { padding:28px 18px 50px; }
  .setup-grid { grid-template-columns:1fr; }
}