/*
 * Compagnon vNext — Premium UI layer
 * Additive design system: no route/business logic dependency.
 */
:root {
  --bg-primary:#080A0F;
  --bg-secondary:#0D1118;
  --bg-tertiary:#121824;
  --bg-card:#101620;
  --bg-hover:#172033;
  --border:rgba(148,163,184,.13);
  --border-light:rgba(148,163,184,.21);
  --text-primary:#F7F9FC;
  --text-secondary:#AAB4C3;
  --text-muted:#6F7B8E;
  --accent:#6D6AFB;
  --accent-hover:#5A56F0;
  --accent-soft:rgba(109,106,251,.13);
  --accent-glow:rgba(109,106,251,.26);
  --success:#22C985;
  --warning:#F5B544;
  --danger:#F25D68;
  --sidebar-w:280px;
  --topbar-h:64px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --shadow-lg:0 24px 72px rgba(0,0,0,.42);
  --shadow-card:0 14px 40px rgba(0,0,0,.18);
  --font-main:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

html { background:var(--bg-primary); }
body {
  font-family:var(--font-main)!important;
  letter-spacing:-.005em;
  background:
    radial-gradient(900px 440px at 82% -12%, rgba(109,106,251,.11), transparent 70%),
    radial-gradient(700px 420px at 6% 108%, rgba(34,211,238,.055), transparent 70%),
    var(--bg-primary)!important;
}
::selection { background:rgba(109,106,251,.32); color:#fff; }
:focus-visible { outline:2px solid rgba(109,106,251,.85)!important; outline-offset:2px; }

/* Shell */
.sidebar {
  background:linear-gradient(180deg,rgba(13,17,24,.985),rgba(9,12,18,.99))!important;
  border-right:1px solid var(--border)!important;
  box-shadow:14px 0 48px rgba(0,0,0,.08);
}
.sidebar-logo { padding:17px 16px!important; border-bottom:1px solid rgba(148,163,184,.09)!important; }
.sidebar-logo-row { gap:11px!important; }
.logo-icon {
  width:35px!important;height:35px!important;border-radius:11px!important;
  background:linear-gradient(145deg,#7774FF,#5263F5 52%,#2AA7E7)!important;
  box-shadow:0 10px 28px rgba(89,92,242,.27)!important;
}
.logo-text {
  font-size:16.5px!important;font-weight:760!important;letter-spacing:-.035em!important;
  background:none!important;-webkit-text-fill-color:var(--text-primary)!important;color:var(--text-primary)!important;
}
.sidebar-nav { padding:12px 10px 8px!important; }
.sidebar-btn {
  min-height:43px!important;padding:9px 11px!important;border-radius:10px!important;
  font-size:13.5px!important;font-weight:540!important;color:#919CAF!important;
  border:1px solid transparent!important;
}
.sidebar-btn .icon { font-size:14px!important;color:#718097; }
.sidebar-btn:hover {
  background:rgba(255,255,255,.035)!important;color:#EAF0F9!important;
  border-color:rgba(148,163,184,.08)!important;
}
.sidebar-btn:hover .icon { color:#B7C3D4; }
.sidebar-btn.active {
  background:linear-gradient(90deg,rgba(109,106,251,.14),rgba(109,106,251,.07))!important;
  color:#DAD9FF!important;border-color:rgba(109,106,251,.18)!important;
  box-shadow:inset 3px 0 0 #7774FF;
}
.sidebar-btn.active .icon { color:#8B89FF; }
.new-chat-btn {
  margin-bottom:8px!important;
  background:linear-gradient(135deg,#6D6AFB,#5755E7)!important;
  color:#fff!important;border-color:transparent!important;
  box-shadow:0 10px 26px rgba(109,106,251,.18)!important;
}
.new-chat-btn .icon { color:#fff!important; }
.new-chat-btn:hover { transform:translateY(-1px); filter:brightness(1.06); }
.sidebar-divider { background:rgba(148,163,184,.09)!important;margin:7px 9px!important; }
.sidebar-section-title { color:#5E6B7D!important;letter-spacing:.11em!important;padding:8px 11px 5px!important; }
.conv-item { border:1px solid transparent; border-radius:9px!important; }
.conv-item:hover { border-color:rgba(148,163,184,.08);background:rgba(255,255,255,.03)!important; }
.sidebar-footer { background:rgba(8,11,16,.96)!important;border-top-color:rgba(148,163,184,.09)!important;padding:12px!important; }
.sidebar-logout-row { background:rgba(255,255,255,.025)!important;border-color:rgba(148,163,184,.10)!important;border-radius:12px!important; }
.sidebar-user-av { background:linear-gradient(135deg,#6D6AFB,#24A9E0)!important;box-shadow:0 5px 16px rgba(109,106,251,.18); }

.main { background:transparent!important; }
.topbar {
  min-height:var(--topbar-h)!important;height:var(--topbar-h)!important;
  padding-left:16px!important;padding-right:16px!important;gap:10px!important;
  background:rgba(8,10,15,.78)!important;
  backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);
  border-bottom:1px solid rgba(148,163,184,.10)!important;
}
.topbar-menu,.icon-btn {
  border:1px solid rgba(148,163,184,.12)!important;
  background:rgba(255,255,255,.025)!important;
  color:#8491A4!important;border-radius:10px!important;
}
.topbar-menu:hover,.icon-btn:hover { background:rgba(255,255,255,.06)!important;color:#F4F7FB!important;border-color:rgba(148,163,184,.20)!important; }
.topbar-title { font-weight:650!important;font-size:14.5px!important;letter-spacing:-.018em; }
.chat-agent-pill,.model-pill {
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(148,163,184,.14)!important;
  box-shadow:0 7px 20px rgba(0,0,0,.10);
}
.chat-agent-pill:hover,.model-pill:hover { border-color:rgba(109,106,251,.38)!important;background:rgba(109,106,251,.075)!important; }
.chat-agent-dd,.model-dd {
  background:rgba(14,18,27,.97)!important;
  border:1px solid rgba(148,163,184,.15)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.52)!important;
  backdrop-filter:blur(24px);
  border-radius:14px!important;
}
.chat-dd-item,.model-dd-item { border-radius:10px!important; }
.chat-dd-item:hover,.model-dd-item:hover { background:rgba(255,255,255,.045)!important; }
.chat-dd-item.active,.model-dd-item.active { background:rgba(109,106,251,.12)!important; }

.page-content { padding:28px!important; }
.page-content.no-padding { padding:0!important; }
.page-header { margin-bottom:24px!important;align-items:center!important; }
.page-title { font-size:clamp(22px,2.2vw,30px)!important;font-weight:760!important;letter-spacing:-.04em!important; }
.page-subtitle { color:#7E899B!important;font-size:13.5px!important;margin-top:5px!important; }

/* Surfaces */
.card,.stat-card,.chart-card,.recent-card,.agent-card,.workspace-card,.doc-card,.plan-card,.conversations-container {
  background:linear-gradient(180deg,rgba(18,24,36,.92),rgba(13,18,28,.94))!important;
  border:1px solid rgba(148,163,184,.115)!important;
  box-shadow:var(--shadow-card)!important;
}
.card,.stat-card,.chart-card,.recent-card,.agent-card,.workspace-card,.doc-card,.plan-card { border-radius:16px!important; }
.agent-card,.stat-card,.qa-btn,.workspace-card,.doc-card { transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important; }
.agent-card:hover,.stat-card:hover,.workspace-card:hover,.doc-card:hover {
  transform:translateY(-2px);border-color:rgba(109,106,251,.25)!important;box-shadow:0 20px 48px rgba(0,0,0,.22)!important;
}

/* Buttons */
.btn { border-radius:10px!important;font-weight:650!important;letter-spacing:-.01em;box-shadow:none; }
.btn-primary {
  background:linear-gradient(135deg,#6D6AFB,#5A58EB)!important;color:#fff!important;
  box-shadow:0 8px 22px rgba(109,106,251,.18)!important;
}
.btn-primary:hover { transform:translateY(-1px);filter:brightness(1.055);box-shadow:0 12px 30px rgba(109,106,251,.25)!important; }
.btn-ghost { border-color:rgba(148,163,184,.14)!important;background:rgba(255,255,255,.018)!important; }
.btn-ghost:hover { border-color:rgba(148,163,184,.23)!important;background:rgba(255,255,255,.05)!important; }
.form-control {
  background:rgba(8,12,19,.72)!important;border-color:rgba(148,163,184,.14)!important;
  border-radius:11px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.form-control:focus { border-color:rgba(109,106,251,.65)!important;box-shadow:0 0 0 4px rgba(109,106,251,.10)!important; }

/* Dashboard */
.dash-hd { margin-bottom:22px!important; }
.dash-greeting h1 { font-size:clamp(24px,2.4vw,32px)!important;letter-spacing:-.045em!important;font-weight:770!important; }
.dash-greeting p { font-size:13.5px!important;color:#7F8A9C!important; }
.stats-grid { gap:12px!important; }
.stat-card { padding:18px!important;min-height:132px;position:relative;overflow:hidden; }
.stat-card::after { content:'';position:absolute;width:110px;height:110px;border-radius:50%;right:-55px;top:-55px;background:radial-gradient(circle,rgba(109,106,251,.10),transparent 70%);pointer-events:none; }
.stat-icon { background:rgba(109,106,251,.10)!important;border:1px solid rgba(109,106,251,.13); }
.stat-val { letter-spacing:-.045em!important; }
.tip-strip { border-radius:13px!important;background:linear-gradient(90deg,rgba(109,106,251,.09),rgba(34,211,238,.035))!important;border-color:rgba(109,106,251,.15)!important; }
.qa-btn { border-radius:14px!important;background:rgba(255,255,255,.022)!important;border-color:rgba(148,163,184,.10)!important; }
.qa-btn:hover { background:rgba(109,106,251,.075)!important;border-color:rgba(109,106,251,.23)!important;transform:translateY(-1px); }

/* Chat — focus on content */
.chat-root { background:transparent!important; }
.msgs-area { background:transparent!important; }
.msgs-inner { max-width:920px!important;padding-left:24px!important;padding-right:24px!important; }
.chat-welcome { padding-top:72px!important; }
.welcome-av {
  width:70px!important;height:70px!important;border-radius:22px!important;
  background:linear-gradient(145deg,#7774FF,#5E5AF2 52%,#2EA9E4)!important;
  box-shadow:0 18px 55px rgba(109,106,251,.24)!important;
}
.welcome-title { font-size:27px!important;letter-spacing:-.045em!important;font-weight:760!important; }
.welcome-sub { color:#7F8B9E!important;font-size:14.5px!important;max-width:520px!important; }
.quick-prompts { max-width:650px!important;gap:10px!important; }
.qp-btn { background:rgba(255,255,255,.025)!important;border:1px solid rgba(148,163,184,.11)!important;border-radius:14px!important;padding:13px 14px!important; }
.qp-btn:hover { background:rgba(109,106,251,.065)!important;border-color:rgba(109,106,251,.23)!important;transform:translateY(-1px); }
.msg-group { padding:11px 12px!important;border-radius:14px!important;gap:13px!important; }
.msg-group.ai:hover { background:rgba(255,255,255,.017)!important; }
.msg-av { border-radius:10px!important; }
.msg-av.ai { background:linear-gradient(145deg,rgba(109,106,251,.15),rgba(34,211,238,.07))!important;border-color:rgba(109,106,251,.17)!important; }
.msg-av.user { background:linear-gradient(145deg,#6D6AFB,#4C80E8)!important; }
.msg-ai-content { font-family:var(--font-main)!important;font-size:15.2px!important;line-height:1.78!important;color:#E8EDF5!important; }
.user-bubble { background:linear-gradient(135deg,rgba(109,106,251,.98),rgba(83,93,232,.98))!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 9px 24px rgba(73,73,190,.15); }
.code-wrap { border-radius:12px!important;border-color:rgba(148,163,184,.11)!important;box-shadow:0 12px 30px rgba(0,0,0,.18)!important; }
.code-header { background:#101722!important; }
.code-body { background:#0A0F17!important; }
.input-zone {
  padding:11px 18px calc(16px + var(--safe-bottom))!important;
  background:linear-gradient(180deg,rgba(8,10,15,.15),rgba(8,10,15,.97) 30%)!important;
  border-top:none!important;
}
.input-wrap { max-width:920px!important; }
.input-box {
  background:rgba(16,22,32,.96)!important;
  border:1px solid rgba(148,163,184,.16)!important;
  border-radius:18px!important;padding:10px 10px 10px 15px!important;
  box-shadow:0 16px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.input-box:focus-within { border-color:rgba(109,106,251,.52)!important;box-shadow:0 18px 54px rgba(0,0,0,.3),0 0 0 4px rgba(109,106,251,.075)!important; }
.send-btn { background:linear-gradient(135deg,#7370FF,#5856EA)!important;box-shadow:0 8px 18px rgba(109,106,251,.22)!important; }
.preview-col { background:#0B1018!important;border-left-color:rgba(148,163,184,.10)!important; }
.preview-topbar { background:rgba(13,18,27,.92)!important;backdrop-filter:blur(18px); }

/* Lists / dialogs */
.conversations-container { border-radius:16px!important;overflow:hidden; }
.filter-bar { background:rgba(255,255,255,.018)!important;border-bottom-color:rgba(148,163,184,.10)!important; }
.search-box { background:rgba(8,12,19,.7)!important;border-color:rgba(148,163,184,.12)!important;border-radius:11px!important; }
.modal-content,.del-modal,.share-modal {
  background:rgba(15,20,30,.985)!important;border:1px solid rgba(148,163,184,.14)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.55)!important;border-radius:18px!important;backdrop-filter:blur(24px);
}
.empty-state { min-height:280px; }
.empty-icon { width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:rgba(109,106,251,.08);color:#8C89FF;opacity:1!important;font-size:24px!important;border:1px solid rgba(109,106,251,.13); }

/* Auth */
.auth-container { max-width:460px!important;position:relative;z-index:2; }
.auth-card,.auth-box {
  background:linear-gradient(180deg,rgba(17,23,34,.96),rgba(12,17,26,.98))!important;
  border:1px solid rgba(148,163,184,.13)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.40)!important;
  border-radius:22px!important;
}

/* Marketing/public */
body > nav, .pub-nav {
  background:rgba(8,10,15,.72)!important;
  border-bottom:1px solid rgba(148,163,184,.09)!important;
  backdrop-filter:blur(24px) saturate(135%)!important;
}
.hero { background:transparent!important; }
.hero-grid { opacity:.6; }
.hero-badge { border-color:rgba(109,106,251,.25)!important;background:rgba(109,106,251,.07)!important;color:#C9C8FF!important; }
.hero h1 { letter-spacing:-.055em!important;font-weight:780!important; }
.hero h1 span,.nav-logo-text,.pub-nav-logo-text { background:linear-gradient(120deg,#8D8AFF,#5B8DF2 46%,#38C4DD)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important; }
.btn-register,.hero .btn-primary { background:linear-gradient(135deg,#6D6AFB,#5755E7)!important;box-shadow:0 12px 30px rgba(109,106,251,.22)!important; }

/* Responsive */
@media (min-width:900px) {
  .page-content { padding:30px 34px!important; }
  .page-content.no-padding { padding:0!important; }
}
@media (max-width:899px) {
  :root { --topbar-h:58px; }
  .sidebar { width:min(88vw,310px)!important;min-width:min(88vw,310px)!important; }
  .page-content { padding:18px 14px!important; }
  .page-content.no-padding { padding:0!important; }
  .topbar { padding-left:10px!important;padding-right:10px!important; }
  .chat-welcome { padding:42px 16px 16px!important; }
  .msgs-inner { padding-left:12px!important;padding-right:12px!important; }
  .input-zone { padding-left:9px!important;padding-right:9px!important; }
}
@media (max-width:560px) {
  .page-title { font-size:23px!important; }
  .quick-prompts { grid-template-columns:1fr!important; }
  .welcome-title { font-size:23px!important; }
  .msg-body { max-width:92%!important; }
  .input-box { border-radius:16px!important; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important; }
}