/**
 * layout.css — the app shell skeleton (sidebar / topbar / workspace / dock).
 * Signature element lives here: the "Prompt Dock" — a floating command bar
 * anchored to the bottom of the workspace with a gradient focus ring.
 */

#app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100dvh;
  width: 100%;
  transition: grid-template-columns var(--duration-slow) var(--ease-out);
}

#app-shell.sidebar-collapsed {
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}

/* ---------------------------- Sidebar ---------------------------- */

#sidebar {
  grid-row: 1 / -1;
  height: 100dvh;
  background: var(--color-bg-glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--z-sidebar);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  flex-shrink: 0;
}

.sidebar-brand__mark {
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  background: var(--brand-gradient);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  box-shadow: var(--shadow-sm);
}

.sidebar-brand__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  white-space: nowrap;
  line-height: 1.15;
}
.sidebar-brand__text span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sidebar-collapsed .sidebar-brand__text,
.sidebar-collapsed .nav-item__label,
.sidebar-collapsed .sidebar-section__label,
.sidebar-collapsed .sidebar-search,
.sidebar-collapsed .sidebar-footer__label { display: none; }

.sidebar-search {
  margin: 0 var(--space-4) var(--space-3);
  flex-shrink: 0;
}

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-3) var(--space-4);
}

.sidebar-section { margin-bottom: var(--space-4); }
.sidebar-section__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: var(--space-2) var(--space-3);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.nav-item:hover { background: var(--color-surface-hover); color: var(--color-text); }
.nav-item.is-active {
  background: linear-gradient(135deg, rgba(79,70,229,0.14), rgba(124,58,237,0.14));
  color: var(--color-primary);
  font-weight: 650;
}
.nav-item__icon { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item__star {
  width: 15px; height: 15px;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.nav-item:hover .nav-item__star,
.nav-item__star.is-favorite { opacity: 1; }

.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ---------------------------- Main column ---------------------------- */

#main-col {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  height: 100dvh;
  min-width: 0;
  position: relative;
}

#topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  z-index: var(--z-topbar);
}

#btn-mobile-menu { display: none; }

#topbar .spacer { flex: 1; }

#workspace {
  overflow-y: auto;
  padding: var(--space-6) var(--space-6) calc(var(--dock-h) + var(--space-6));
  scroll-behavior: smooth;
}

.workspace-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* ---------------------------- Prompt Dock (signature element) ---------------------------- */

#prompt-dock {
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  bottom: var(--space-5);
  z-index: var(--z-dock);
  max-width: 960px;
  margin: 0 auto;
}

.dock-shell {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 2px; /* border thickness for the gradient ring */
  background: linear-gradient(135deg, var(--color-border), var(--color-border));
  transition: background var(--duration-base) var(--ease-out);
  box-shadow: var(--shadow-lg);
}

.dock-shell:focus-within {
  background: var(--brand-gradient);
}

.dock-inner {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  background: var(--color-bg-elevated);
  border-radius: calc(var(--radius-xl) - 2px);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
}

#dock-input {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  max-height: 140px;
  min-height: 24px;
  padding: var(--space-3) 0;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
}
#dock-input:focus { outline: none; box-shadow: none; }
#dock-input::placeholder { color: var(--color-text-faint); }

.dock-hint {
  font-size: var(--fs-2xs);
  color: var(--color-text-faint);
  text-align: center;
  margin-top: var(--space-2);
}
.dock-hint kbd {
  font-family: var(--font-mono);
  background: var(--color-surface-hover);
  border-radius: 4px;
  padding: 1px 5px;
  border: 1px solid var(--color-border);
}

/* ---------------------------- Mobile nav ---------------------------- */

#mobile-tabbar { display: none; }

.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11, 10, 18, 0.45);
  z-index: calc(var(--z-sidebar) - 1);
}