/* ============================================================
   Aproject — Sidebar prototype
   Base tokens + layout (shadcn/ui-inspired, original styling)
   ============================================================ */

:root {
  --radius: 0.7rem;
  --radius-sm: 0.5rem;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* dot colors for products / projects */
  --dot-pilot: #c2410c;
  --dot-team: #2563eb;
  --dot-proj: #16a34a;
}

/* ---------- Light theme ---------- */
[data-theme="light"] {
  --background:        oklch(0.992 0.004 70);
  --foreground:        oklch(0.24 0.012 60);
  --card:              oklch(1 0 0);
  --popover:           oklch(1 0 0);
  --popover-foreground:oklch(0.24 0.012 60);
  --muted:             oklch(0.96 0.006 70);
  --muted-foreground:  oklch(0.53 0.012 60);
  --primary:           #c2410c;
  --primary-hover:     #a8380b;
  --primary-foreground:oklch(0.99 0.004 70);
  --border:            oklch(0.915 0.006 70);
  --ring:              #c2410c;

  --sidebar:            oklch(0.978 0.005 70);
  --sidebar-foreground: oklch(0.30 0.012 60);
  --sidebar-muted:      oklch(0.53 0.012 60);
  --sidebar-accent:     oklch(0.945 0.008 65);
  --sidebar-accent-strong: oklch(0.92 0.012 60);
  --sidebar-border:     oklch(0.91 0.006 70);
  --sidebar-ring:       #c2410c;

  --shadow-pop: 0 1px 2px rgba(20,14,8,.06), 0 12px 32px -8px rgba(20,14,8,.16);
  --shadow-card: 0 1px 0 rgba(20,14,8,.03);
  --scrim: rgba(28,22,16,.42);
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  --background:        oklch(0.165 0.006 60);
  --foreground:        oklch(0.93 0.006 70);
  --card:              oklch(0.205 0.007 60);
  --popover:           oklch(0.215 0.007 60);
  --popover-foreground:oklch(0.93 0.006 70);
  --muted:             oklch(0.26 0.008 60);
  --muted-foreground:  oklch(0.68 0.012 70);
  --primary:           #e2693f;
  --primary-hover:     #ef7748;
  --primary-foreground:oklch(0.16 0.006 60);
  --border:            oklch(0.28 0.008 60);
  --ring:              #e2693f;

  --sidebar:            oklch(0.195 0.006 60);
  --sidebar-foreground: oklch(0.86 0.006 70);
  --sidebar-muted:      oklch(0.62 0.012 70);
  --sidebar-accent:     oklch(0.265 0.009 60);
  --sidebar-accent-strong: oklch(0.31 0.011 60);
  --sidebar-border:     oklch(0.275 0.008 60);
  --sidebar-ring:       #e2693f;

  --shadow-pop: 0 2px 4px rgba(0,0,0,.4), 0 16px 40px -10px rgba(0,0,0,.6);
  --shadow-card: 0 1px 0 rgba(0,0,0,.2);
  --dot-team: #5b8def;
  --dot-proj: #34c46a;
  --scrim: rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: color-mix(in oklch, var(--primary) 28%, transparent); }

/* scrollbars */
.scroll { scrollbar-width: thin; scrollbar-color: var(--sidebar-accent-strong) transparent; }
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--sidebar-accent-strong); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   App shell
   ============================================================ */
.app {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  --sb-w: 268px;
  width: var(--sb-w);
  flex: 0 0 var(--sb-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--sidebar);
  color: var(--sidebar-foreground);
  border-right: 1px solid var(--sidebar-border);
  transition: flex-basis .26s cubic-bezier(.4,0,.2,1), width .26s cubic-bezier(.4,0,.2,1);
  position: relative;
  z-index: 5;
}
.sidebar[data-collapsed="true"] { --sb-w: 64px; }

/* header / brand */
.sb-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 12px 10px;
  min-height: 56px;
}
.sb-brand {
  display: flex; align-items: center; gap: 9px;
  min-width: 0; flex: 1;
  border-radius: var(--radius-sm);
  padding: 4px;
  margin: -4px;
}
.sb-logo {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--primary), color-mix(in oklch, var(--primary) 60%, #000 8%));
  display: grid; place-items: center;
  color: var(--primary-foreground);
  font-weight: 650; font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.sb-brand-name {
  font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  color: var(--sidebar-foreground);
  white-space: nowrap; overflow: hidden;
}
.sb-collapse {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--sidebar-muted);
  transition: background .14s, color .14s;
}
.sb-collapse:hover { background: var(--sidebar-accent); color: var(--sidebar-foreground); }

/* body scroll area */
.sb-body {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 4px 8px 8px;
  display: flex; flex-direction: column; gap: 2px;
}

/* sections */
.sb-section { padding: 6px 0 2px; }
.sb-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--sidebar-muted);
  padding: 8px 10px 4px;
  display: flex; align-items: center; justify-content: space-between;
  white-space: nowrap;
}
.sb-divider { height: 1px; background: var(--sidebar-border); margin: 8px 6px; border: 0; }

/* nav item */
.nav-item {
  position: relative;
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-foreground);
  font-size: 13.5px; font-weight: 500;
  text-align: left;
  transition: background .13s, color .13s;
  white-space: nowrap;
}
.nav-item__icon { flex: 0 0 18px; width: 18px; height: 18px; display: grid; place-items: center; color: var(--sidebar-muted); transition: color .13s; }
.nav-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-item__trail { color: var(--sidebar-muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.nav-item__kbd {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--sidebar-muted);
  border: 1px solid var(--sidebar-border);
  border-radius: 5px; padding: 1px 5px; background: var(--sidebar);
}
.nav-item:hover { background: var(--sidebar-accent); }
.nav-item:hover .nav-item__icon { color: var(--sidebar-foreground); }
.nav-item--active { background: var(--sidebar-accent-strong); color: var(--sidebar-foreground); font-weight: 600; }
.nav-item--active .nav-item__icon { color: var(--primary); }

/* new chat — emphasized */
.nav-item--new {
  margin: 2px 0 6px;
  color: var(--sidebar-foreground);
}
.nav-item--new .nav-item__icon { color: var(--primary); }

/* product dot */
.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.dot--pilot { background: var(--dot-pilot); }
.dot--team  { background: var(--dot-team); }
.dot--proj  { background: var(--dot-proj); }

/* recents */
.recent-group { padding-top: 4px; }
.recent-group__label {
  font-size: 11px; font-weight: 600; color: var(--sidebar-muted);
  padding: 10px 10px 3px; white-space: nowrap;
}
.recent-item {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-foreground);
  font-size: 13px; font-weight: 450;
  text-align: left;
  transition: background .12s;
  white-space: nowrap;
}
.recent-item__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.recent-item:hover { background: var(--sidebar-accent); }
.recent-item:hover .recent-item__txt { opacity: 1; }
.recent-item--active { background: var(--sidebar-accent-strong); }
.recent-item--active .recent-item__txt { opacity: 1; font-weight: 550; }
.recent-item__more {
  opacity: 0; flex: 0 0 22px; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 6px;
  color: var(--sidebar-muted);
  transition: opacity .12s, background .12s;
}
.recent-item:hover .recent-item__more { opacity: 1; }
.recent-item__more:hover { background: var(--sidebar-accent-strong); color: var(--sidebar-foreground); }
.recents-more {
  font-size: 12.5px; color: var(--sidebar-muted); font-weight: 500;
  padding: 7px 10px; border-radius: var(--radius-sm); width: 100%; text-align: left;
}
.recents-more:hover { background: var(--sidebar-accent); color: var(--sidebar-foreground); }

/* footer / user */
.sb-footer {
  padding: 8px;
  border-top: 1px solid var(--sidebar-border);
}
.user-btn {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  transition: background .13s;
  white-space: nowrap;
}
.user-btn:hover { background: var(--sidebar-accent); }
.user-btn[data-open="true"] { background: var(--sidebar-accent-strong); }
.avatar {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 650;
  background: linear-gradient(150deg, color-mix(in oklch, var(--primary) 88%, #fff 6%), color-mix(in oklch, var(--primary) 55%, #000 12%));
  color: var(--primary-foreground);
}
.user-meta { flex: 1; min-width: 0; text-align: left; line-height: 1.25; }
.user-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.user-sub  { font-size: 11.5px; color: var(--sidebar-muted); overflow: hidden; text-overflow: ellipsis; }
.user-chev { color: var(--sidebar-muted); flex: 0 0 16px; }

/* ============================================================
   Collapsed rail
   ============================================================ */
.sidebar[data-collapsed="true"] .sb-body { padding-left: 8px; padding-right: 8px; align-items: center; }
.sidebar[data-collapsed="true"] .sb-header { justify-content: center; padding-left: 10px; padding-right: 10px; }
.sidebar[data-collapsed="true"] .sb-brand-name,
.sidebar[data-collapsed="true"] .nav-item__label,
.sidebar[data-collapsed="true"] .nav-item__trail,
.sidebar[data-collapsed="true"] .sb-label,
.sidebar[data-collapsed="true"] .recents-section,
.sidebar[data-collapsed="true"] .user-meta,
.sidebar[data-collapsed="true"] .user-chev { display: none; }
.sidebar[data-collapsed="true"] .sb-brand { flex: 0 0 auto; justify-content: center; }
.sidebar[data-collapsed="true"] .nav-item { justify-content: center; padding: 9px 0; width: 40px; height: 40px; margin: 1px auto; }
.sidebar[data-collapsed="true"] .nav-item__icon { color: var(--sidebar-foreground); }
.sidebar[data-collapsed="true"] .user-btn { justify-content: center; padding: 6px; }
.sidebar[data-collapsed="true"] .sb-divider { width: 28px; margin: 8px auto; }

/* tooltip for rail */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) scale(.96);
  background: var(--popover); color: var(--popover-foreground);
  border: 1px solid var(--border);
  padding: 5px 9px; border-radius: 7px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none;
  transition: opacity .12s, transform .12s;
  z-index: 60;
}
.sidebar[data-collapsed="true"] .tip:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }
.sidebar:not([data-collapsed="true"]) .tip::after { display: none; }