/* ============================================================
   Navidi AI — Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* Surfaces */
  --bg:               #0A0A0F;
  --bg-elevated:      #0E0E15;
  --card:             #13131A;
  --card-hover:       #16161F;
  --card-border:      #1E1E2E;
  --card-border-hover:#2A2A3E;
  --overlay:          rgba(10,10,15,0.72);

  /* Accent */
  --primary:          #6366F1;
  --primary-hover:    #7C7FF4;
  --primary-pressed:  #4F52DB;
  --primary-soft:     rgba(99,102,241,0.12);
  --primary-ring:     rgba(99,102,241,0.32);

  /* Status */
  --success:          #22C55E;
  --success-soft:     rgba(34,197,94,0.12);
  --warning:          #F59E0B;
  --warning-soft:     rgba(245,158,11,0.12);
  --error:            #EF4444;
  --error-soft:       rgba(239,68,68,0.12);
  --info:             #38BDF8;
  --info-soft:        rgba(56,189,248,0.12);

  /* Text */
  --text:             #F8F8FF;
  --text-secondary:   #8B8B9E;
  --text-muted:       #4B4B5E;

  /* Spacing (8px grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.55);
  --shadow-ring: 0 0 0 1px var(--card-border);
  --shadow-ring-hover: 0 0 0 1px var(--card-border-hover);
  --shadow-focus: 0 0 0 3px var(--primary-ring);

  /* Motion */
  --t-fast: 120ms cubic-bezier(.2,.7,.3,1);
  --t-base: 150ms cubic-bezier(.2,.7,.3,1);
  --t-slow: 250ms cubic-bezier(.2,.7,.3,1);

  /* Layout */
  --sidebar-w: 220px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
}

/* ============================================================
   Reset & base
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1.5;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--primary-soft);color:var(--text)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#1E1E2E;border-radius:var(--r-pill);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#2A2A3E}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;outline:none}

img{display:block;max-width:100%}

/* ============================================================
   Typography
   ============================================================ */
.h1{font-size:28px;font-weight:600;letter-spacing:-0.02em;line-height:1.2}
.h2{font-size:22px;font-weight:600;letter-spacing:-0.015em;line-height:1.25}
.h3{font-size:18px;font-weight:600;letter-spacing:-0.01em;line-height:1.3}
.h4{font-size:15px;font-weight:600;line-height:1.4}
.body{font-size:14px;font-weight:400;line-height:1.55}
.body-sm{font-size:13px;font-weight:400;line-height:1.5;color:var(--text-secondary)}
.caption{font-size:12px;font-weight:400;color:var(--text-secondary)}
.eyebrow{
  font-size:11px;font-weight:500;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--text-secondary);
}
.muted{color:var(--text-secondary)}
.subtle{color:var(--text-muted)}
.mono{font-feature-settings:"tnum" 1,"ss01" 1}

/* ============================================================
   Layout primitives
   ============================================================ */
.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100vh;
}

.main{
  display:flex;
  flex-direction:column;
  min-width:0; /* allow children to truncate */
  background:var(--bg);
}

.content{
  padding:var(--s-8);
  flex:1;
  min-width:0;
  animation:fadeUp .35s ease both;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(6px)}
  to  {opacity:1;transform:none}
}

.stack-1{display:flex;flex-direction:column;gap:var(--s-1)}
.stack-2{display:flex;flex-direction:column;gap:var(--s-2)}
.stack-3{display:flex;flex-direction:column;gap:var(--s-3)}
.stack-4{display:flex;flex-direction:column;gap:var(--s-4)}
.stack-6{display:flex;flex-direction:column;gap:var(--s-6)}
.stack-8{display:flex;flex-direction:column;gap:var(--s-8)}

.row{display:flex;align-items:center;gap:var(--s-3)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.spacer{flex:1}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6)}
.grid-cols-2-1{display:grid;grid-template-columns:2fr 1fr;gap:var(--s-6)}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar{
  position:sticky;top:0;
  height:100vh;
  width:var(--sidebar-w);
  background:var(--bg-elevated);
  border-right:1px solid var(--card-border);
  display:flex;
  flex-direction:column;
  padding:var(--s-4) var(--s-3);
  gap:var(--s-2);
  z-index:10;
}

.sidebar-brand{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-3) var(--s-4);
  border-bottom:1px solid var(--card-border);
  margin-bottom:var(--s-3);
}
.sidebar-brand .logo-mark{
  width:32px;height:32px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--primary) 0%,#8B5CF6 100%);
  display:grid;place-items:center;
  font-weight:700;color:#fff;font-size:14px;
  box-shadow:0 4px 10px rgba(91,110,245,0.35);
  flex-shrink:0;
}

/* ============================================================
   Navidi.AI brand — icon mark + wordmark
   ============================================================ */
.brand-mark{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#6366F1 0%,#8B5CF6 100%);
  color:#fff;flex-shrink:0;
}
.brand-mark svg.brand-n{display:block}
.brand-mark .live-dot{
  position:absolute;top:-3px;right:-3px;
  width:10px;height:10px;border-radius:50%;
  background:#10B981;
  border:2px solid #0A0A0F;
}
/* Size variants — width/height pair with the inner SVG size */
.brand-mark.sm{width:32px;height:32px;border-radius:9px}
.brand-mark.sm svg.brand-n{width:18px;height:18px}
.brand-mark.md{width:48px;height:48px;border-radius:13px}
.brand-mark.md svg.brand-n{width:28px;height:28px}
.brand-mark.lg{width:64px;height:64px;border-radius:17px}
.brand-mark.lg svg.brand-n{width:38px;height:38px}
.brand-mark.xl{width:80px;height:80px;border-radius:20px}
.brand-mark.xl svg.brand-n{width:48px;height:48px}
/* Larger icons get a slightly larger dot */
.brand-mark.lg .live-dot,.brand-mark.xl .live-dot{width:14px;height:14px;top:-4px;right:-4px;border-width:2.5px}

/* If the brand-mark sits on a non-bg surface (auth card, etc), match the dot border */
.auth-brand .brand-mark .live-dot{border-color:var(--card)}

.brand-wordmark{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:800;letter-spacing:-0.05em;
  color:#FFFFFF;line-height:1;white-space:nowrap;
}
.brand-wordmark .accent{color:#6366F1}
.brand-wordmark.sm{font-size:14px}
.brand-wordmark.md{font-size:18px}
.brand-wordmark.lg{font-size:28px}
.brand-wordmark.xl{font-size:36px}

.brand-row{display:inline-flex;align-items:center;gap:12px}
.sidebar-brand .brand-text{
  font-weight:600;font-size:15px;letter-spacing:-0.01em;
}
.sidebar-brand .brand-sub{
  font-size:11px;color:var(--text-muted);
}

.nav-section-label{
  font-size:10px;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-muted);
  padding:var(--s-3) var(--s-3) var(--s-2);
}

.nav-item{
  display:flex;align-items:center;gap:var(--s-3);
  padding:8px var(--s-3);
  border-radius:var(--r-md);
  color:var(--text-secondary);
  font-size:13.5px;font-weight:500;
  transition:background var(--t-base),color var(--t-base);
  cursor:pointer;
  user-select:none;
  position:relative;
}
.nav-item .nav-icon{
  width:18px;height:18px;flex-shrink:0;
  stroke-width:1.75;
}
.nav-item:hover{background:var(--card);color:var(--text)}
.nav-item.active{
  background:var(--primary-soft);
  color:var(--text);
}
.nav-item.active::before{
  content:'';
  position:absolute;left:-12px;top:8px;bottom:8px;
  width:2px;background:var(--primary);border-radius:var(--r-pill);
}
.nav-item .nav-badge{
  margin-left:auto;
  font-size:11px;font-weight:600;
  background:var(--primary-soft);color:var(--primary);
  padding:1px 7px;border-radius:var(--r-pill);
  min-width:18px;text-align:center;
}

.sidebar-foot{
  margin-top:auto;
  padding-top:var(--s-4);
  border-top:1px solid var(--card-border);
}

.user-chip{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:background var(--t-base);
}
.user-chip:hover{background:var(--card)}
.avatar{
  width:32px;height:32px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,#6366F1,#8B5CF6);
  display:grid;place-items:center;
  font-weight:600;font-size:13px;color:#fff;
  flex-shrink:0;
}
.avatar.lg{width:40px;height:40px;font-size:15px}
.user-chip .user-name{font-size:13px;font-weight:500;line-height:1.2}
.user-chip .user-role{font-size:11px;color:var(--text-muted);line-height:1.2}

/* ============================================================
   Topbar
   ============================================================ */
.topbar{
  height:var(--topbar-h);
  display:flex;align-items:center;
  padding:0 var(--s-8);
  border-bottom:1px solid var(--card-border);
  background:var(--bg);
  position:sticky;top:0;z-index:9;
  gap:var(--s-4);
}
.topbar .page-title{font-size:15px;font-weight:600;letter-spacing:-0.01em}

.search{
  display:flex;align-items:center;gap:var(--s-2);
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--r-md);
  padding:6px var(--s-3);
  height:34px;
  width:100%;max-width:360px;
  transition:border-color var(--t-base),box-shadow var(--t-base);
}
.search:focus-within{border-color:var(--primary);box-shadow:var(--shadow-focus)}
.search svg{width:14px;height:14px;color:var(--text-muted);flex-shrink:0}
.search input{flex:1;font-size:13px;color:var(--text)}
.search input::placeholder{color:var(--text-muted)}

.icon-btn{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:var(--r-md);
  border:1px solid transparent;
  color:var(--text-secondary);
  transition:background var(--t-base),color var(--t-base),border-color var(--t-base);
  position:relative;
}
.icon-btn:hover{background:var(--card);color:var(--text);border-color:var(--card-border)}
.icon-btn svg{width:16px;height:16px;stroke-width:1.75}
.icon-btn .dot{
  position:absolute;top:6px;right:6px;
  width:7px;height:7px;border-radius:50%;
  background:var(--error);
  box-shadow:0 0 0 2px var(--bg);
}

@keyframes shake{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(-8deg)}
  40%{transform:rotate(8deg)}
  60%{transform:rotate(-6deg)}
  80%{transform:rotate(4deg)}
}
.icon-btn.has-new svg{animation:shake .6s ease}

/* ============================================================
   Card
   ============================================================ */
.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--r-lg);
  padding:var(--s-6);
  position:relative;
  transition:border-color var(--t-base),transform var(--t-base),background var(--t-base);
}
.card.interactive{cursor:pointer}
.card.interactive:hover{
  border-color:var(--card-border-hover);
  background:var(--card-hover);
  transform:translateY(-1px);
}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--s-5);
  gap:var(--s-3);
}
.card-title{font-size:15px;font-weight:600;letter-spacing:-0.01em}
.card-sub{font-size:12px;color:var(--text-secondary);margin-top:2px}

/* Stat card */
.stat{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--r-lg);
  padding:var(--s-6);
  position:relative;
  overflow:hidden;
  transition:border-color var(--t-base),transform var(--t-base);
}
.stat:hover{border-color:var(--card-border-hover);transform:translateY(-1px)}
.stat .stat-label{
  font-size:11px;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--text-secondary);
  display:flex;align-items:center;gap:var(--s-2);
}
.stat .stat-label svg{width:14px;height:14px;color:var(--text-muted)}
.stat .stat-value{
  font-size:28px;font-weight:600;letter-spacing:-0.02em;
  margin-top:var(--s-3);line-height:1.1;
  font-feature-settings:"tnum" 1;
}
.stat .stat-meta{
  margin-top:var(--s-3);
  font-size:12px;color:var(--text-secondary);
  display:flex;align-items:center;gap:var(--s-2);
}
.stat .stat-meta.up{color:var(--success)}
.stat .stat-meta.down{color:var(--error)}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:36px;padding:0 var(--s-4);
  border-radius:var(--r-md);
  font-size:13px;font-weight:500;
  border:1px solid transparent;
  transition:background var(--t-base),border-color var(--t-base),transform var(--t-fast),color var(--t-base);
  white-space:nowrap;
  user-select:none;
}
.btn:active{transform:scale(0.97)}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn svg{width:14px;height:14px;stroke-width:1.75}

.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover)}
.btn-primary:active{background:var(--primary-pressed)}

.btn-secondary{background:var(--card);color:var(--text);border-color:var(--card-border)}
.btn-secondary:hover{background:var(--card-hover);border-color:var(--card-border-hover)}

.btn-ghost{background:transparent;color:var(--text-secondary)}
.btn-ghost:hover{background:var(--card);color:var(--text)}

.btn-danger{background:var(--error-soft);color:var(--error);border-color:rgba(239,68,68,0.25)}
.btn-danger:hover{background:rgba(239,68,68,0.18)}

.btn-lg{height:44px;padding:0 var(--s-6);font-size:14px}
.btn-sm{height:30px;padding:0 var(--s-3);font-size:12.5px}
.btn-block{width:100%}

/* ============================================================
   Form
   ============================================================ */
.field{display:flex;flex-direction:column;gap:6px}
.label{
  font-size:11px;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--text-secondary);
}
.input,.textarea,.select{
  width:100%;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--r-md);
  color:var(--text);
  padding:10px var(--s-3);
  height:38px;
  font-size:14px;
  transition:border-color var(--t-base),box-shadow var(--t-base),background var(--t-base);
}
.input::placeholder,.textarea::placeholder{color:var(--text-muted)}
.input:hover,.textarea:hover,.select:hover{border-color:var(--card-border-hover)}
.input:focus,.textarea:focus,.select:focus{
  border-color:var(--primary);
  box-shadow:var(--shadow-focus);
}
.textarea{height:auto;min-height:96px;padding:var(--s-3);resize:vertical;line-height:1.55}
.select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B8B9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
}

.input-with-icon{position:relative}
.input-with-icon svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;color:var(--text-muted);pointer-events:none;
}
.input-with-icon .input{padding-left:34px}

.field-error{color:var(--error);font-size:12px;margin-top:4px}
.field-hint{color:var(--text-muted);font-size:12px;margin-top:4px}

/* ============================================================
   Badge
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:500;
  padding:3px 8px;border-radius:var(--r-pill);
  background:var(--card);color:var(--text-secondary);
  border:1px solid var(--card-border);
  line-height:1;white-space:nowrap;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.success{background:var(--success-soft);color:var(--success);border-color:transparent}
.badge.warning{background:var(--warning-soft);color:var(--warning);border-color:transparent}
.badge.error  {background:var(--error-soft);color:var(--error);border-color:transparent}
.badge.info   {background:var(--info-soft);color:var(--info);border-color:transparent}
.badge.primary{background:var(--primary-soft);color:var(--primary);border-color:transparent}

/* ============================================================
   Table
   ============================================================ */
.table{
  width:100%;
  border-collapse:separate;border-spacing:0;
  font-size:13px;
}
.table th{
  text-align:left;
  font-size:11px;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--text-secondary);
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--card-border);
  background:var(--bg-elevated);
}
.table td{
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--card-border);
  color:var(--text);
  vertical-align:middle;
}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:var(--card-hover)}

/* ============================================================
   Activity feed
   ============================================================ */
.activity{display:flex;flex-direction:column}
.activity-item{
  display:flex;gap:var(--s-3);
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--card-border);
}
.activity-item:last-child{border-bottom:none}
.activity-icon{
  width:32px;height:32px;border-radius:var(--r-md);
  background:var(--primary-soft);color:var(--primary);
  display:grid;place-items:center;flex-shrink:0;
}
.activity-icon svg{width:14px;height:14px;stroke-width:1.75}
.activity-icon.success{background:var(--success-soft);color:var(--success)}
.activity-icon.warning{background:var(--warning-soft);color:var(--warning)}
.activity-icon.error{background:var(--error-soft);color:var(--error)}
.activity-body{flex:1;min-width:0}
.activity-title{font-size:13px;font-weight:500;line-height:1.45;color:var(--text)}
.activity-meta{font-size:12px;color:var(--text-muted);margin-top:2px}

/* ============================================================
   Empty + skeleton
   ============================================================ */
.empty{
  text-align:center;padding:var(--s-10) var(--s-6);
  color:var(--text-secondary);font-size:13px;
}
.empty svg{width:28px;height:28px;color:var(--text-muted);margin-bottom:var(--s-3)}

.skel{
  background:linear-gradient(90deg,#1A1A24 0%,#23232F 50%,#1A1A24 100%);
  background-size:200% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
  border-radius:var(--r-sm);
}
.skel-text{height:12px;width:100%}
.skel-title{height:18px;width:60%}
.skel-block{height:64px;width:100%}
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ============================================================
   Toast
   ============================================================ */
.toast{
  position:fixed;bottom:var(--s-6);right:var(--s-6);
  background:var(--card);border:1px solid var(--card-border);
  padding:var(--s-3) var(--s-4);border-radius:var(--r-md);
  color:var(--text);font-size:13px;
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity var(--t-base),transform var(--t-base);
  z-index:1000;display:flex;align-items:center;gap:var(--s-2);
}
.toast.show{opacity:1;transform:none;pointer-events:auto}
.toast.success{border-color:rgba(34,197,94,0.4)}
.toast.error{border-color:rgba(239,68,68,0.4)}
.toast .toast-dot{width:8px;height:8px;border-radius:50%;background:var(--primary)}
.toast.success .toast-dot{background:var(--success)}
.toast.error .toast-dot{background:var(--error)}

/* ============================================================
   Auth pages
   ============================================================ */
.auth-shell{
  min-height:100vh;
  display:grid;place-items:center;
  padding:var(--s-8);
  background:
    radial-gradient(900px 540px at 18% -10%, rgba(91,110,245,0.18), transparent 60%),
    radial-gradient(700px 480px at 88% 110%, rgba(139,92,246,0.16), transparent 65%),
    var(--bg);
}
.auth-card{
  width:100%;max-width:400px;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--r-xl);
  padding:var(--s-8);
  box-shadow:var(--shadow-lg);
  animation:fadeUp .35s ease both;
}
.auth-brand{
  display:flex;flex-direction:column;align-items:center;gap:var(--s-3);
  margin-bottom:var(--s-7);
}
.auth-brand .logo-mark{
  width:44px;height:44px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--primary) 0%,#8B5CF6 100%);
  display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:18px;
  box-shadow:0 6px 24px rgba(91,110,245,0.45);
}
.auth-title{font-size:20px;font-weight:600;letter-spacing:-0.015em}
.auth-sub{font-size:13px;color:var(--text-secondary)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px){
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed;bottom:0;left:0;right:0;top:auto;
    height:auto;width:100%;
    flex-direction:row;
    padding:var(--s-2) var(--s-3);
    border-right:none;border-top:1px solid var(--card-border);
    overflow-x:auto;
  }
  .sidebar-brand,.nav-section-label,.sidebar-foot{display:none}
  .nav-item{flex-direction:column;gap:2px;font-size:10px;padding:6px 10px;text-align:center}
  .nav-item.active::before{display:none}
  .content{padding:var(--s-4)}
  .topbar{padding:0 var(--s-4)}
  .grid-2,.grid-3,.grid-4,.grid-cols-2-1{grid-template-columns:1fr}
}

/* ============================================================
   Modal / overlay
   ============================================================ */
.modal-backdrop{
  position:fixed;inset:0;
  background:var(--overlay);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:grid;place-items:center;
  z-index:100;padding:var(--s-6);
  opacity:0;pointer-events:none;
  transition:opacity var(--t-base);
}
.modal-backdrop.show{opacity:1;pointer-events:auto}
.modal-card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--r-lg);
  padding:var(--s-6);
  width:100%;max-width:480px;
  box-shadow:var(--shadow-lg);
  max-height:90vh;overflow-y:auto;
  transform:translateY(8px);
  transition:transform var(--t-base);
}
.modal-backdrop.show .modal-card{transform:none}
.modal-card.lg{max-width:640px}
.modal-card.sm{max-width:380px}
.modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s-3);margin-bottom:var(--s-5);
}
.modal-head .modal-title{font-size:16px;font-weight:600;letter-spacing:-0.01em}
.modal-head .modal-sub{font-size:12.5px;color:var(--text-secondary);margin-top:2px}
.modal-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);
  margin-top:var(--s-6);
}

/* ============================================================
   Tabs (segmented)
   ============================================================ */
.tabs{
  display:inline-flex;align-items:center;gap:2px;
  background:var(--bg-elevated);
  border:1px solid var(--card-border);
  border-radius:var(--r-md);
  padding:3px;
}
.tab{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:6px var(--s-3);height:30px;
  border-radius:6px;
  font-size:13px;font-weight:500;
  color:var(--text-secondary);
  transition:background var(--t-base),color var(--t-base);
  white-space:nowrap;
}
.tab:hover{color:var(--text)}
.tab.active{background:var(--card);color:var(--text);box-shadow:var(--shadow-sm)}
.tab .tab-count{
  background:var(--card-border);color:var(--text-secondary);
  font-size:11px;font-weight:600;padding:1px 6px;border-radius:var(--r-pill);
  min-width:18px;text-align:center;
}
.tab.active .tab-count{background:var(--primary-soft);color:var(--primary)}

/* Vertical tab list (settings-style) */
.tablist-v{display:flex;flex-direction:column;gap:2px;min-width:200px}
.tablist-v .tab-v{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  border-radius:var(--r-md);
  font-size:13px;font-weight:500;line-height:1.3;
  color:var(--text-secondary);
  cursor:pointer;
  transition:background var(--t-base),color var(--t-base);
  text-align:left;user-select:none;
}
.tablist-v .tab-v:hover{background:var(--card);color:var(--text)}
.tablist-v .tab-v.active{background:var(--primary-soft);color:var(--primary)}
.tablist-v .tab-v svg{width:14px;height:14px;color:var(--text-muted);stroke-width:1.75;flex-shrink:0}
.tablist-v .tab-v.active svg{color:var(--primary)}

/* ============================================================
   File tiles + list rows
   ============================================================ */
.files-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:var(--s-4);
}
.file-tile{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--r-lg);
  padding:var(--s-4);
  display:flex;flex-direction:column;gap:var(--s-3);
  cursor:pointer;position:relative;
  transition:border-color var(--t-base),transform var(--t-base),background var(--t-base);
  min-height:160px;
}
.file-tile:hover{border-color:var(--card-border-hover);background:var(--card-hover);transform:translateY(-1px)}
.file-tile .file-thumb{
  height:80px;border-radius:var(--r-md);
  background:var(--bg-elevated);
  display:grid;place-items:center;color:var(--text-muted);
  overflow:hidden;
}
.file-tile .file-thumb img{width:100%;height:100%;object-fit:cover}
.file-tile .file-thumb svg{width:32px;height:32px;stroke-width:1.5}
.file-tile .file-name{
  font-size:13px;font-weight:500;line-height:1.35;
  word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.file-tile .file-meta{font-size:11.5px;color:var(--text-muted);margin-top:-2px}
.file-tile .file-actions{display:flex;gap:6px;margin-top:auto}

.files-list{display:flex;flex-direction:column;gap:2px}
.file-row{
  display:grid;
  grid-template-columns:36px 1fr auto auto auto;
  align-items:center;gap:var(--s-3);
  padding:10px var(--s-3);
  border:1px solid transparent;border-radius:var(--r-md);
  transition:background var(--t-base),border-color var(--t-base);
  cursor:pointer;
}
.file-row:hover{background:var(--card-hover);border-color:var(--card-border)}
.file-row .file-icon{
  width:36px;height:36px;border-radius:var(--r-md);
  background:var(--bg-elevated);display:grid;place-items:center;color:var(--text-secondary);
}
.file-row .file-icon svg{width:16px;height:16px}
.file-row .file-name{font-size:13.5px;font-weight:500;color:var(--text)}
.file-row .file-sub{font-size:11.5px;color:var(--text-muted);margin-top:1px}
.file-row .file-actions{display:flex;gap:6px}

/* Upload zone (dashed) */
.dropzone{
  border:1.5px dashed var(--card-border-hover);
  border-radius:var(--r-lg);
  background:var(--card);
  padding:var(--s-7) var(--s-6);
  text-align:center;
  color:var(--text-secondary);
  cursor:pointer;
  transition:background var(--t-base),border-color var(--t-base),color var(--t-base);
}
.dropzone:hover{background:var(--card-hover);color:var(--text)}
.dropzone.drag-over{
  background:var(--primary-soft);
  border-color:var(--primary);
  color:var(--text);
}
.dropzone svg{width:24px;height:24px;color:var(--text-muted);margin-bottom:var(--s-2);stroke-width:1.5}
.dropzone.vault{border-color:rgba(245,158,11,0.5)}
.dropzone.vault:hover{background:rgba(245,158,11,0.06)}
.dropzone.vault svg{color:var(--warning)}

/* ============================================================
   Chat
   ============================================================ */
.chat-shell{
  display:flex;flex-direction:column;
  height:calc(100vh - var(--topbar-h));
  min-height:0;
}
.agent-bar{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-4) var(--s-6);
  border-bottom:1px solid var(--card-border);
  background:var(--bg);
}
.agent-bar .avatar{width:36px;height:36px;font-size:14px}
.agent-bar .agent-name{font-size:14.5px;font-weight:600;letter-spacing:-0.005em;display:flex;align-items:center;gap:var(--s-2)}
.agent-bar .agent-sub{font-size:12px;color:var(--text-secondary);margin-top:2px}

.agent-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--text-muted);
  display:inline-block;flex-shrink:0;
}
.agent-dot.online{background:var(--success);box-shadow:0 0 8px rgba(34,197,94,0.55);animation:pulse 2.4s ease-in-out infinite}
.agent-dot.offline{background:var(--error)}
.agent-dot.reconnecting{background:var(--warning);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,0.55)}
  70%{opacity:0.7;box-shadow:0 0 0 6px rgba(34,197,94,0)}
}

.chat-area{
  flex:1;overflow-y:auto;
  padding:var(--s-6) var(--s-6) var(--s-3);
  display:flex;flex-direction:column;gap:var(--s-4);
  scroll-behavior:smooth;
}
.chat-area.drag-over{background:linear-gradient(transparent,var(--primary-soft));outline:2px dashed var(--primary);outline-offset:-12px}

.msg-row{display:flex;gap:var(--s-3);max-width:78%;align-items:flex-end;animation:msgIn .25s ease both}
.msg-row.user{margin-left:auto;flex-direction:row-reverse}
.msg-row .avatar{width:28px;height:28px;font-size:11px}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.msg-bubble{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:10px var(--s-4);
  font-size:14px;line-height:1.55;
  color:var(--text);
  word-wrap:break-word;
  white-space:pre-wrap;
  max-width:100%;
}
.msg-row.user .msg-bubble{
  background:var(--primary);
  border-color:transparent;color:#fff;
  border-bottom-right-radius:6px;
}
.msg-row.bot .msg-bubble{border-bottom-left-radius:6px}

.msg-time{
  font-size:11px;color:var(--text-muted);margin-top:4px;
  opacity:0;transition:opacity var(--t-base);
}
.msg-row:hover .msg-time{opacity:1}

.msg-attach{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:6px 10px;border-radius:var(--r-md);
  background:rgba(255,255,255,0.08);
  font-size:12px;margin-bottom:6px;
}
.msg-row.bot .msg-attach{background:var(--bg-elevated);border:1px solid var(--card-border)}

/* Inline cards in chat */
.inline-card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-left:3px solid var(--primary);
  border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4);
  font-size:13px;line-height:1.5;
  display:flex;flex-direction:column;gap:6px;
}
.inline-card.task{border-left-color:var(--success)}
.inline-card.save{border-left-color:var(--warning)}
.inline-card.cap{border-left-color:var(--info)}
.inline-card .ic-title{font-weight:600;font-size:13px;display:flex;align-items:center;gap:var(--s-2)}
.inline-card .ic-meta{font-size:12px;color:var(--text-secondary)}
.inline-card .ic-actions{display:flex;gap:6px;margin-top:var(--s-2)}

/* Thinking indicator */
.typing{
  display:inline-flex;align-items:center;gap:5px;
  padding:10px var(--s-4);border-radius:14px;
  background:var(--card);border:1px solid var(--card-border);
  border-bottom-left-radius:6px;
}
.typing span{
  width:6px;height:6px;border-radius:50%;
  background:var(--text-secondary);
  animation:dot-bounce 1.2s ease-in-out infinite;
}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes dot-bounce{
  0%,80%,100%{transform:scale(.6);opacity:.4}
  40%{transform:scale(1);opacity:1}
}

/* Chat composer */
.composer{
  padding:var(--s-3) var(--s-6) var(--s-5);
  border-top:1px solid var(--card-border);
  background:var(--bg);
}
.composer-row{
  display:flex;align-items:center;gap:var(--s-2);
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--r-lg);
  padding:6px 8px 6px var(--s-3);
  transition:border-color var(--t-base),box-shadow var(--t-base);
}
.composer-row:focus-within{border-color:var(--primary);box-shadow:var(--shadow-focus)}
.composer-row .composer-input{
  flex:1;background:none;border:none;color:var(--text);
  font-size:14px;padding:8px 4px;outline:none;
  resize:none;line-height:1.4;min-height:24px;max-height:140px;
}
.composer-row .composer-input::placeholder{color:var(--text-muted)}
.composer-btn{
  width:34px;height:34px;border-radius:var(--r-md);
  display:grid;place-items:center;color:var(--text-secondary);
  transition:background var(--t-base),color var(--t-base);
}
.composer-btn:hover:not(:disabled){background:var(--bg-elevated);color:var(--text)}
.composer-btn:disabled{opacity:0.35;cursor:not-allowed}
.composer-btn svg{width:16px;height:16px;stroke-width:1.75}
.composer-send{
  background:var(--primary);color:#fff;
  width:34px;height:34px;border-radius:var(--r-md);
  display:grid;place-items:center;
  transition:background var(--t-base),transform var(--t-fast);
}
.composer-send:hover{background:var(--primary-hover)}
.composer-send:active{transform:scale(0.95)}
.composer-send:disabled{background:var(--card-border);color:var(--text-muted);cursor:not-allowed}
.composer-send svg{width:16px;height:16px;stroke-width:2}

.attach-chip{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:5px 10px;border-radius:var(--r-pill);
  background:var(--primary-soft);color:var(--primary);
  font-size:12px;font-weight:500;
  margin-bottom:var(--s-2);max-width:280px;
}
.attach-chip .x{cursor:pointer;color:var(--primary);opacity:0.7}
.attach-chip .x:hover{opacity:1}
.attach-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================
   Sidebar agent header (GM/Staff variant)
   ============================================================ */
.sidebar-agent{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-3) var(--s-4);
  border-bottom:1px solid var(--card-border);
  margin-bottom:var(--s-3);
}
.sidebar-agent .avatar{width:36px;height:36px}
.sidebar-agent .sa-name{font-size:14px;font-weight:600;line-height:1.2}
.sidebar-agent .sa-sub{font-size:11.5px;color:var(--text-muted);line-height:1.2;display:flex;align-items:center;gap:6px}

/* ============================================================
   Misc
   ============================================================ */
.divider{height:1px;background:var(--card-border);width:100%}
.kbd{
  display:inline-block;
  padding:1px 6px;border-radius:5px;
  background:var(--bg-elevated);border:1px solid var(--card-border);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;color:var(--text-secondary);
}
.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;
  background:var(--bg-elevated);
  border:1px solid var(--card-border);
  border-radius:var(--r-md);
  padding:8px var(--s-3);
  word-break:break-all;
  display:flex;align-items:center;gap:var(--s-2);
}

.copy-btn{
  background:var(--card);border:1px solid var(--card-border);
  border-radius:var(--r-sm);padding:3px 8px;font-size:11.5px;
  color:var(--text-secondary);cursor:pointer;
  transition:background var(--t-base),color var(--t-base);
}
.copy-btn:hover{background:var(--card-hover);color:var(--text)}

.tag-row{display:flex;flex-wrap:wrap;gap:6px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}