/* ===============================
Global Layout Variables
===============================*/

:root {
  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed: 48px;
  --right-sidebar-width: 288px;
  --right-rail-width: 48px;

  /* Boundaries (CRITICAL for layout stability) */
  --left-boundary: var(--sidebar-width);
  --right-boundary: var(--right-rail-width);

  /* LIGHT THEME DEFAULT */

  --os-surface-main: #f2f4f7;          /* warm soft gray */
  --os-surface-elevated: #f7f8fa;      /* not white */
  --os-surface-glass: rgba(247,248,250,.75);

  --os-border-soft: rgba(30,41,59,.06);
  --os-border-strong: rgba(30,41,59,.12);

  --os-shadow-soft: 0 8px 28px rgba(0,0,0,.06);
  --os-shadow-elevated: 0 12px 32px rgba(0,0,0,.10);

  --os-text-primary: #1f2937;          /* deep neutral */
  --os-text-secondary: #475569;
  --os-text-muted: #6b7280;

  --os-text-inverse: #f9fafb;
}

.dark {
  --os-surface-main: #121212;          /* true charcoal */
  --os-surface-elevated: #1a1a1a;      /* layered charcoal */
  --os-surface-glass: rgba(26,26,26,.75);

  --os-border-soft: rgba(255,255,255,.06);
  --os-border-strong: rgba(255,255,255,.14);

  --os-shadow-soft: 0 8px 28px rgba(0,0,0,.55);
  --os-shadow-elevated: 0 12px 40px rgba(0,0,0,.65);

  --os-text-primary: rgba(255,255,255,.88);
  --os-text-secondary: rgba(255,255,255,.65);
  --os-text-muted: rgba(255,255,255,.45);
}


header {
  background: var(--os-surface-glass);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--os-border-soft);

  height: 56px;
  display: flex;
  align-items: center;

  transition: background .25s ease, border-color .25s ease;
}

.header-action {
  color: var(--os-text-muted);
  transition: color .2s ease, transform .15s ease;
}

.header-action:hover {
  color: var(--os-text-primary);
  transform: translateY(-1px);
}

.kuchu-brand {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--os-text-primary);
  user-select: none;
  /* opacity: .85; */
}

/* Companion Identity */
.app-identity {
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--os-text-primary);
}

.app-identity-sub {
  font-weight: 400;
  font-size: 13px;
  margin-left: 6px;
  color: var(--os-text-muted);
}


/* Smooth UI transition */
body {
  background: var(--os-surface-main);
  background-image:
    radial-gradient(
      circle at 50% -20%,
      rgba(109,124,255,.05),
      transparent 60%
    );
  color: inherit;
  /* background: #ffffff; */
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  transition: background-color .3s ease, color .3s ease;
  padding-bottom: calc(var(--composer-h, 80px));

  /* --right-boundary: var(--right-rail-width);
  --left-boundary: var(--sidebar-width); */
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(99,102,241,.06),
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 30%,
      rgba(16,185,129,.04),
      transparent 45%
    );
}

body::after {
  content: "";
  position: fixed;
  left: 120px;
  right: 120px;
  top: 0;
  bottom: 0;
  border-left: 1px solid rgba(255,255,255,.02);
  border-right: 1px solid rgba(255,255,255,.02);
  pointer-events: none;
}



.dark body {
  /* background: #0a0a0a; */
  background: var(--os-surface-main);
}

/* When panel is open */
body.right-open {
--right-boundary: calc(
    var(--right-sidebar-width) + var(--right-rail-width)
  );
}

/* body:not(.right-open) {
--right-boundary: var(--right-rail-width); */
/* } */

body.resizing {
  cursor: col-resize;
}

body.sidebar-collapsed {
  --left-boundary: var(--sidebar-collapsed);
}

/* body.sidebar-collapsed.right-open {
  --right-boundary: var(--right-sidebar-width);
} */

body:not(.sidebar-collapsed) {
  --left-boundary: var(--sidebar-width);
}

/* Scrollbar style */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb {
background: rgba(120, 120, 120, .3);
border-radius: 4px;
}
#sidebar::-webkit-scrollbar-thumb { background: rgba(100,100,100,.35); }
#sidebar:hover::-webkit-scrollbar-thumb { background: rgba(100,100,100,.55); }

/* Card Shadows Dark mode fix */
.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.25); }

html, body {
  height: 100%;
}

/* ===============================
Left Sidebar + Scrollable
===============================*/
#sidebar {
/* background: linear-gradient(to bottom,#f8fafc,#eef2f7); */
/* background: #f8fafc; */
background: var(--os-surface-elevated);
border-right: 1px solid var(--os-border-soft);
background: var(--os-surface-elevated);
height: calc(100vh - 56px);
width: var(--sidebar-width);
max-width:500px;
min-width:180px;
overflow-y:auto;
transition: width .25s ease;
}
.dark #sidebar { 
  /* background:#000000ee;  */
  background: var(--os-surface-elevated);
}


/* Ribbon Collapsed Mode */
body.sidebar-collapsed #sidebar { display:none; }
body.sidebar-collapsed #sidebar-ribbon { display:flex !important; }

/* ===============================
MAIN CONTENT RESPONDS TO SIDEBAR
===============================*/
#mainContent {
  margin-left: var(--left-boundary);
  margin-right: var(--right-boundary);
  /* min-height: 100vh; */
  transition: margin-left .25s ease, margin-right .25s ease;
  /* transition: margin .25s ease; */
  padding-top: 1.25rem;
}

/* ===============================
Sidebar UI Beautification
===============================*/
.sidebar-section-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7280;
  padding-top: .75rem;
  margin-bottom: .25rem;
}

.dark .sidebar-section-title {
  color: #9ca3af;
}

.sidebar-link {
  display: flex;
  align-items: center; 
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  transition: background .15s ease;
}

.dark .sidebar-link {
  color: #e5e7eb;
}

.sidebar-link:hover {
  background: rgba(59,130,246,.12);
}

.workspace-item {
  display:flex;
  justify-content:space-between;
  padding:6px 8px;
  border-radius:6px;
  cursor:pointer;
}

.sidebar-divider {
height:1px;
background:rgba(0,0,0,.08);
margin:.4rem 0;
}
.dark .sidebar-divider { background:rgba(255,255,255,.10); }

#sidebar-wrapper {
  /* width: auto; */
  /* width: var(--left-boundary); */
  width: auto;
  min-width: var(--left-boundary);
  transition: width .25s ease;
}

#sidebar a:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(59,130,246,.45);
border-radius: 6px;
}

/* Conversation item hover lift */
#sidebar .group:hover {
transform: translateY(-1px);
}

#sidebar-ribbon {
  background: var(--os-surface-elevated);
  border-right: 1px solid var(--os-border-soft);
}

#sidebar-ribbon .ribbon-icon {
  opacity: .75;
}

#sidebar-ribbon .ribbon-icon:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.header-action {
  color: var(--os-text-muted);
  opacity: .75;
}

.header-action:hover {
  color: var(--os-text-primary);
  opacity: 1;
}

/* ==== SIDEBAR SURFACE UPGRADE ==== */
#sidebar{
  background: var(--os-surface-glass);
  backdrop-filter: blur(18px);
  border-right: 1px solid var(--os-border-soft);
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.03);
}

.dark #sidebar{
  background: linear-gradient(
    to bottom,
    rgba(26,26,26,.95),
    rgba(18,18,18,.92)
  );
}


/* ==== SIDEBAR SECTION CARDS ==== */
#sidebar details{
  border-radius: 16px;
  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,.55),
    rgba(255,255,255,.35)
  );
  border: 1px solid var(--os-border-soft);
  box-shadow: var(--os-shadow-soft);
  transition: .25s ease;
}

.dark #sidebar details{
  background: linear-gradient(
    to bottom right,
    rgba(30,30,30,.7),
    rgba(22,22,22,.6)
  );
}

#sidebar details:hover{
  transform: translateY(-1px);
  box-shadow: var(--os-shadow-elevated);
}


/* ==== SIDEBAR LINKS POLISH ==== */
.sidebar-link{
  border-radius: 10px;
  transition:
    background .18s ease,
    transform .15s ease,
    box-shadow .18s ease;
}

.sidebar-link:hover{
  background: rgba(59,130,246,.10);
  transform: translateX(2px);
}


/* ==== ACTIVE CONVERSATION ITEM ==== */
#sidebar .group{
  backdrop-filter: blur(10px);
  border-radius: 14px;
  transition:
    transform .18s ease,
    box-shadow .25s ease,
    border-color .2s ease,
    background .2s ease;
}

#sidebar .group:hover{
  transform: translateX(2px);
  box-shadow: var(--os-shadow-soft);
}

#sidebar .group.ring-1{
  box-shadow: 0 4px 18px rgba(59,130,246,.15);
}


/* ==== SIDEBAR HEADERS ==== */
#sidebar summary{
  letter-spacing: .16em;
  font-size: 11px;
  color: var(--os-text-muted);
}

#sidebar summary:hover{
  color: var(--os-text-primary);
}


/* ==== WORKSPACE BUTTON ==== */
#create-workspace-btn{
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(79,70,229,.25);
  transition: .2s ease;
}

#create-workspace-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(79,70,229,.35);
}


/* ==== SIDEBAR SOFT EDGE BLEND ==== */
#sidebar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-right:1px solid rgba(255,255,255,.02);
}


/* ==== RIBBON CONSISTENCY ==== */
#sidebar-ribbon{
  backdrop-filter: blur(16px);
  background: var(--os-surface-glass);
}

.dark #sidebar-ribbon{
  background: var(--os-surface-elevated);
}