/* ==========================================================================
   HAVE A SEAT — App shell (sidebar + topbar) & Ava assistant
   Injected by app.js on pages with .app-shell
   ========================================================================== */

.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; position: relative; z-index: 2; }

/* ---- Sidebar ----------------------------------------------------------- */
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--c-cream) 0%, var(--c-cream-deep) 100%);
  border-right: 1px solid var(--c-line); padding: var(--s-5) var(--s-4);
  z-index: var(--z-nav);
}
.sidebar-brand { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3) var(--s-5); }
.sidebar-brand .mark { width: 38px; height: 38px; flex: none; }
.sidebar-brand .name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1.1; }
.sidebar-brand .name small { display: block; font-family: var(--font-body); font-size: var(--fs-3xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-muted); }

.nav-group { margin-bottom: var(--s-5); }
.nav-group-label { font-size: var(--fs-3xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-muted); padding: 0 var(--s-3); margin-bottom: var(--s-2); }
.nav-item {
  display: flex; align-items: center; gap: var(--s-3); padding: 0.65em var(--s-3);
  border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-soft);
  transition: background var(--t-fast), color var(--t-fast); margin-bottom: 2px; position: relative;
}
.nav-item svg { width: 1.2em; height: 1.2em; flex: none; opacity: 0.8; }
.nav-item:hover { background: rgba(255,253,248,0.7); color: var(--c-ink); }
.nav-item.is-active { background: var(--c-paper); color: var(--c-green-deep); box-shadow: var(--sh-xs); }
.nav-item.is-active svg { opacity: 1; color: var(--c-green); }
.nav-item .badge { margin-left: auto; }
.nav-item .tail { margin-left: auto; font-size: var(--fs-3xs); }

.sidebar-foot { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.userchip { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); transition: background var(--t-fast); }
.userchip:hover { background: rgba(255,253,248,0.7); }
.userchip .meta { line-height: 1.2; min-width: 0; }
.userchip .meta b { font-size: var(--fs-sm); display: block; }
.userchip .meta span { font-size: var(--fs-3xs); color: var(--c-ink-muted); }

/* ---- Topbar ------------------------------------------------------------ */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky); height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-6);
  background: rgba(250,245,236,0.85); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.topbar .search { flex: 1; max-width: 420px; }
.topbar-spacer { flex: 1; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-pill); color: var(--c-ink-soft); background: transparent; transition: background var(--t-fast), color var(--t-fast); position: relative; }
.icon-btn:hover { background: var(--c-cream-deep); color: var(--c-ink); }
.icon-btn svg { width: 1.3em; height: 1.3em; }
.icon-btn .badge { position: absolute; top: 4px; right: 4px; min-width: 1.05em; height: 1.05em; font-size: 9px; }
.menu-toggle { display: none; }

.page { padding: var(--s-7) var(--s-6) var(--s-9); flex: 1; }
.page-head { margin-bottom: var(--s-6); }
.page-title { font-size: var(--fs-2xl); }
.breadcrumb { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--c-ink-muted); margin-bottom: var(--s-2); }
.breadcrumb a:hover { color: var(--seat-accent-deep); }
.breadcrumb .sep { opacity: 0.5; }

/* ---- Ava assistant ----------------------------------------------------- */
.ava-fab {
  position: fixed; bottom: var(--s-6); right: var(--s-6); z-index: var(--z-nav);
  display: flex; align-items: center; gap: var(--s-3); padding: 0.6em 1.1em 0.6em 0.6em;
  background: var(--c-ink); color: var(--c-cream); border-radius: var(--r-pill);
  box-shadow: var(--sh-lg); transition: transform var(--t-med) var(--ease-back), box-shadow var(--t-med);
}
.ava-fab:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--sh-xl); }
.ava-fab .ava-orb { width: 34px; height: 34px; }
.ava-fab .lbl { font-size: var(--fs-sm); font-weight: 600; }
.ava-fab .lbl small { display: block; font-size: var(--fs-3xs); opacity: 0.7; font-weight: 500; }

.ava-orb {
  border-radius: 50%; flex: none; position: relative;
  background: radial-gradient(circle at 32% 30%, var(--c-honey) 0%, var(--c-clay) 55%, var(--c-clay-deep) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), 0 2px 8px rgba(193,95,60,0.4);
}
.ava-orb::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: rgba(255,255,255,0.35); filter: blur(3px); }

.ava-panel {
  position: fixed; bottom: var(--s-6); right: var(--s-6); z-index: var(--z-modal);
  width: 380px; max-width: calc(100vw - 2 * var(--s-5)); max-height: min(620px, calc(100vh - 3rem));
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-xl);
  box-shadow: var(--sh-xl); display: none; flex-direction: column; overflow: hidden;
}
.ava-panel.is-open { display: flex; animation: modalIn var(--t-slow) var(--ease-back); }
.ava-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); background: linear-gradient(120deg, var(--c-clay-wash), var(--c-honey-soft)); border-bottom: 1px solid var(--c-line); }
.ava-head .ava-orb { width: 40px; height: 40px; }
.ava-head .who b { font-family: var(--font-display); font-size: var(--fs-md); display: block; line-height: 1.1; }
.ava-head .who span { font-size: var(--fs-3xs); color: var(--c-ink-soft); }
.ava-log { flex: 1; overflow-y: auto; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.ava-msg { max-width: 88%; font-size: var(--fs-sm); line-height: var(--lh-base); }
.ava-msg.bot { align-self: flex-start; background: var(--c-cream-deep); color: var(--c-ink); padding: var(--s-3) var(--s-4); border-radius: 4px var(--r-md) var(--r-md) var(--r-md); }
.ava-msg.user { align-self: flex-end; background: var(--seat-accent); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r-md) 4px var(--r-md) var(--r-md); }
.ava-suggest { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 var(--s-5) var(--s-4); }
.ava-suggest button { font-size: var(--fs-xs); font-weight: 600; padding: 0.5em 0.9em; border-radius: var(--r-pill); background: var(--c-paper); border: 1px solid var(--seat-accent-soft); color: var(--seat-accent-deep); transition: background var(--t-fast); }
.ava-suggest button:hover { background: var(--seat-accent-soft); }
.ava-foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--c-line); display: flex; gap: var(--s-2); }
.ava-typing { display: inline-flex; gap: 4px; padding: var(--s-3) var(--s-4); background: var(--c-cream-deep); border-radius: var(--r-md); align-self: flex-start; }
.ava-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ink-muted); animation: bounce 1.2s infinite; }
.ava-typing span:nth-child(2) { animation-delay: 0.15s; }
.ava-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---- Responsive shell -------------------------------------------------- */
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; width: 280px; transform: translateX(-100%);
    transition: transform var(--t-med) var(--ease-out); box-shadow: var(--sh-xl);
  }
  .app.nav-open .sidebar { transform: none; }
  .app.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(36,28,21,0.4); z-index: calc(var(--z-nav) - 1); }
  .menu-toggle { display: inline-flex; }
  .page { padding: var(--s-5) var(--s-4) var(--s-8); }
  .topbar { padding: 0 var(--s-4); }
}