:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --atlas-gold: #D4AF37;
  --atlas-gold-hover: #B88A32;
  --atlas-ivory: #FFFBF5;
  --atlas-cream: #F7EFE3;
  --atlas-beige: #E8E1D2;
  --atlas-charcoal: #1F1F1F;
  --atlas-soft-black: #2B2B2B;
  --atlas-surface: #FBF7EF;
  --atlas-surface-elevated: #FFFFFF;
  --atlas-border: rgba(104, 87, 53, 0.15);
  --atlas-text-primary: #1F1F1F;
  --atlas-text-secondary: #746E64;
  --atlas-shadow-sm: 0 4px 11px rgba(70, 55, 29, 0.055);
  --atlas-shadow-md: 0 10px 26px rgba(70, 55, 29, 0.08), 0 2px 6px rgba(70, 55, 29, 0.04);
  --atlas-shadow-lg: 0 21px 51px rgba(70, 55, 29, 0.104), 0 4px 14px rgba(70, 55, 29, 0.056);
  --bg: var(--atlas-cream);
  --surface: var(--atlas-surface);
  --surface-elevated: var(--atlas-surface-elevated);
  --surface-hover: color-mix(in srgb, var(--atlas-gold) 7%, var(--surface-elevated));
  --surface-active: color-mix(in srgb, var(--atlas-gold) 14%, var(--surface-elevated));
  --border: var(--atlas-border);
  --text-primary: var(--atlas-text-primary);
  --text-secondary: var(--atlas-text-secondary);
  --status-success: #4f8768;
  --status-warning: #a97537;
  --status-error: #9b5e50;
  --canvas: var(--atlas-cream);
  --canvas-deep: var(--atlas-beige);
  --panel: var(--atlas-surface);
  --panel-strong: var(--atlas-surface-elevated);
  --panel-soft: #F2EBDD;
  --sidebar: #F4ECDF;
  --line: var(--atlas-border);
  --line-strong: rgba(184, 138, 50, 0.30);
  --ink: var(--atlas-text-primary);
  --ink-soft: #514C45;
  --muted: var(--atlas-text-secondary);
  --olive: var(--atlas-gold-hover);
  --olive-deep: #7A5A1F;
  --sage: #C9A443;
  --gold: var(--atlas-gold-hover);
  --gold-soft: #F0E1B9;
  --success: var(--status-success);
  --warning: var(--status-warning);
  --danger: var(--status-error);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-panel: var(--atlas-shadow-lg);
  --shadow-card: var(--atlas-shadow-md);
  --shadow-hover: 0 15px 32px rgba(70, 55, 29, 0.12), 0 3px 10px rgba(70, 55, 29, 0.056);
  --ease: 200ms cubic-bezier(.2, .8, .2, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --atlas-ivory: #1F1F1F;
  --atlas-cream: #22211F;
  --atlas-beige: #302E2A;
  --atlas-charcoal: #FFFBF5;
  --atlas-soft-black: #171717;
  --atlas-surface: #282724;
  --atlas-surface-elevated: #302F2C;
  --atlas-border: rgba(212, 175, 55, 0.14);
  --atlas-text-primary: #FFF9EE;
  --atlas-text-secondary: #BDB5A7;
  --atlas-shadow-sm: 0 4px 11px rgba(0, 0, 0, 0.16);
  --atlas-shadow-md: 0 10px 26px rgba(0, 0, 0, 0.216), 0 2px 6px rgba(0, 0, 0, 0.144);
  --atlas-shadow-lg: 0 21px 51px rgba(0, 0, 0, 0.28), 0 4px 14px rgba(0, 0, 0, 0.176);
  --canvas: var(--atlas-cream);
  --canvas-deep: #191919;
  --panel: var(--atlas-surface);
  --panel-strong: var(--atlas-surface-elevated);
  --panel-soft: #35332F;
  --sidebar: #262522;
  --line: var(--atlas-border);
  --line-strong: rgba(212, 175, 55, 0.27);
  --ink: var(--atlas-text-primary);
  --ink-soft: #E2DBCF;
  --muted: var(--atlas-text-secondary);
  --olive: var(--atlas-gold);
  --olive-deep: #E4C461;
  --sage: var(--atlas-gold-hover);
  --gold-soft: rgba(212, 175, 55, 0.16);
  --shadow-panel: var(--atlas-shadow-lg);
  --shadow-card: var(--atlas-shadow-md);
  --shadow-hover: 0 15px 32px rgba(0, 0, 0, 0.272), 0 0 0 1px rgba(212, 175, 55, 0.08);
  --bg: var(--atlas-cream);
  --surface: var(--atlas-surface);
  --surface-elevated: var(--atlas-surface-elevated);
  --surface-hover: color-mix(in srgb, var(--atlas-gold) 8%, var(--surface-elevated));
  --surface-active: color-mix(in srgb, var(--atlas-gold) 16%, var(--surface-elevated));
  --border: var(--atlas-border);
  --text-primary: var(--atlas-text-primary);
  --text-secondary: var(--atlas-text-secondary);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 8%, rgba(212, 175, 55, .13), transparent 27rem),
    radial-gradient(circle at 92% 92%, rgba(184, 138, 50, .08), transparent 31rem),
    linear-gradient(145deg, var(--canvas), var(--atlas-ivory) 52%, var(--canvas-deep));
}
button, textarea { font: inherit; }
button { color: inherit; }
svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
button:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(181, 138, 75, .3);
  outline-offset: 2px;
}
[hidden] { display: none !important; }

.owner-auth { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(31,31,31,.62); backdrop-filter: blur(8px); }
.owner-auth-card { width: min(440px, 100%); padding: 32px; border: 1px solid var(--line-strong); border-radius: 24px; color: var(--ink); background: var(--panel-strong); box-shadow: var(--shadow-panel); }
.owner-auth-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px; border: 1px solid var(--line-strong); border-radius: 17px; background: var(--gold-soft); }
.owner-auth-mark img { width: 38px; height: 38px; object-fit: contain; }
.owner-auth-card h1 { margin: 0 0 8px; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.owner-auth-copy { margin: 0 0 22px; color: var(--muted); line-height: 1.6; }
.owner-auth-form, #owner-auth-form { display: grid; gap: 10px; }
.owner-auth-form label, #owner-auth-form label { color: var(--muted); font-size: .85rem; font-weight: 700; }
#owner-auth-token { width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink); background: var(--surface); }

.login-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
}
.login-shell { width: min(100%, 430px); }
.atlas-intro { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; background: var(--atlas-ivory); opacity: 1; transition: opacity 260ms ease; }
.atlas-intro.is-complete { opacity: 0; pointer-events: none; }
.atlas-intro video { width: 100%; height: 100%; object-fit: cover; }
.skip-intro { position: absolute; right: 24px; bottom: 22px; padding: 8px 13px; border: 1px solid rgba(122, 90, 31, .24); border-radius: 999px; background: rgba(255, 251, 245, .76); color: var(--olive-deep); font-size: .75rem; cursor: pointer; backdrop-filter: blur(8px); }
.skip-intro:hover { background: rgba(255, 251, 245, .95); }
.login-card-shell { width: 100%; animation: login-card-in 360ms ease both; }
@keyframes login-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.login-card {
  padding: 42px 40px 34px;
  border: 1px solid var(--atlas-border);
  border-radius: 26px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--atlas-gold) 5%, var(--panel-strong)), var(--panel-strong));
  box-shadow: var(--shadow-panel);
}
.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 30px; }
.login-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(184, 138, 50, .24);
  border-radius: 17px;
  background: linear-gradient(145deg, var(--atlas-ivory), var(--atlas-cream));
  box-shadow: 0 12px 24px rgba(77, 58, 23, .14), inset 0 1px 0 rgba(255,255,255,.6);
}
.login-mark img { width: 42px; height: 42px; object-fit: contain; }
.login-brand .eyebrow { margin: 0; }
.login-card h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.35rem); letter-spacing: -.04em; }
.login-intro { margin: 10px 0 28px; color: var(--muted); line-height: 1.6; }
.login-form { display: grid; gap: 16px; }
.login-form label { display: grid; gap: 7px; color: var(--ink-soft); font-size: .78rem; font-weight: 700; }
.login-form input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel-strong) 86%, var(--atlas-cream));
  color: var(--ink);
  outline: none;
}
.login-form input:focus { border-color: var(--atlas-gold); box-shadow: 0 0 0 4px rgba(212,175,55,.12); }
.login-submit { min-height: 48px; margin-top: 4px; border: 1px solid var(--atlas-gold-hover); border-radius: 13px; background: linear-gradient(145deg, var(--atlas-gold), var(--atlas-gold-hover)); color: #211b10; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-card); transition: transform var(--ease), box-shadow var(--ease), opacity var(--ease); }
.login-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.login-submit:disabled { cursor: wait; opacity: .7; }
.login-error { margin: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-size: .82rem; line-height: 1.45; }
.login-note { margin: 24px 0 0; color: var(--muted); font-size: .72rem; text-align: center; }

[data-theme="dark"] .login-mark { background: linear-gradient(145deg, #2E2D2A, #191919); box-shadow: 0 10px 22px rgba(0,0,0,.32), inset 0 1px 0 rgba(212,175,55,.12); }

@media (max-width: 520px) {
  .login-page { padding: 14px; }
  .login-card { padding: 30px 24px 26px; border-radius: 22px; }
}

.app-shell {
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 13px;
  padding: 13px;
  transition: grid-template-columns var(--ease);
}

.sidebar {
  position: relative;
  z-index: 5;
  height: calc(100vh - 26px);
  height: calc(100dvh - 26px);
  min-height: 0;
  padding: 20px 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--atlas-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 18% 3%, rgba(212, 175, 55, .10), transparent 15rem),
    linear-gradient(160deg, color-mix(in srgb, var(--atlas-gold) 4%, var(--surface-elevated)), var(--sidebar));
  box-shadow: var(--shadow-panel);
  transition: width var(--ease), padding var(--ease), border-radius var(--ease);
}

.brand {
  min-height: 49px;
  padding: 3px 6px 10px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  transition: min-height var(--ease), padding var(--ease), gap var(--ease);
}
.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  overflow: hidden;
  background: linear-gradient(145deg, var(--atlas-ivory), var(--atlas-cream));
  border: 1px solid rgba(184, 138, 50, .20);
  box-shadow: 0 10px 20px rgba(77, 58, 23, .16), inset 0 1px 0 rgba(255,255,255,.55);
}
.brand-mark img { width: 31px; height: 31px; object-fit: contain; }
.brand > div { min-width: 0; display: grid; gap: 2px; transition: opacity var(--ease); }
.brand > div span { font-weight: 760; font-size: 1rem; letter-spacing: -.02em; }
.brand > div small { color: var(--muted); font-size: .69rem; }

.sidebar-collapse {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  color: var(--atlas-gold);
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.sidebar-collapse:hover { background: color-mix(in srgb, var(--atlas-gold) 10%, transparent); border-color: color-mix(in srgb, var(--atlas-gold) 18%, transparent); }
.sidebar-collapse span { display: grid; place-items: center; transition: transform var(--ease); }
.mobile-menu-toggle, .mobile-menu-close, .mobile-backdrop { display: none; }

.ceo-navigation, .atlas-chat-section { display: grid; gap: 6px; }
.ceo-navigation { margin-top: 2px; }
.nav-section { position: relative; display: grid; gap: 3px; }
.nav-section-title {
  position: relative;
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  cursor: pointer;
  background: transparent;
  color: var(--ink-soft);
  font-weight: 680;
  text-align: left;
  transition: transform var(--ease), background var(--ease), box-shadow var(--ease), border-color var(--ease), color var(--ease);
}
.nav-section-title:hover {
  transform: translateY(-2px);
  color: var(--ink);
  border-color: rgba(212, 175, 55, .14);
  background: color-mix(in srgb, var(--atlas-gold) 7%, var(--panel-strong));
  box-shadow: 0 8px 18px rgba(74, 67, 48, .08);
}
.nav-section.is-open > .nav-section-title,
.nav-section-title.active {
  color: var(--olive-deep);
  border-color: rgba(181, 138, 75, .18);
  background: linear-gradient(145deg, color-mix(in srgb, var(--atlas-gold) 17%, var(--panel-strong)), color-mix(in srgb, var(--atlas-gold-hover) 10%, var(--atlas-cream)));
  box-shadow: 0 9px 20px rgba(108, 91, 58, .11), inset 0 1px 0 rgba(255,255,255,.64);
}
.nav-icon { display: grid; place-items: center; font-size: 1rem; color: var(--atlas-gold-hover); text-align: center; }
.nav-chevron { color: var(--muted); text-align: center; transition: transform var(--ease); }
.nav-section.is-open .nav-chevron { transform: rotate(180deg); }

.nav-subitems {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-5px);
  padding: 0 5px 0 38px;
  display: grid;
  gap: 2px;
  transition: max-height 230ms ease, opacity 170ms ease, transform 200ms ease, padding 200ms ease;
}
.nav-section.is-open > .nav-subitems {
  max-height: 290px;
  opacity: 1;
  transform: translateY(0);
  padding-top: 3px;
  padding-bottom: 4px;
}
.nav-section.is-open > .atlas-chat-content { max-height: 560px; }
.nav-subitems button {
  min-height: 31px;
  padding: 6px 9px;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  text-align: left;
  transition: background var(--ease), color var(--ease), transform var(--ease);
}
.nav-subitems button:hover { color: var(--ink); background: var(--surface-hover); transform: translateX(2px); }
.nav-subitems button.active { color: var(--olive-deep); background: color-mix(in srgb, var(--atlas-gold) 16%, transparent); font-weight: 700; }
.atlas-chat-action { display: flex !important; align-items: center; gap: 8px; }
.atlas-chat-menu { display: grid; gap: 3px; }
.atlas-chat-action > span { display: grid; place-items: center; }
.atlas-chat-action b { margin-left: auto; font-size: .72rem; }
.conversation-heading { display: flex; align-items: center; gap: 10px; }
.conversation-heading h1 { margin: 0; }
.conversation-rename { min-height: 28px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: transparent; font-size: .72rem; cursor: pointer; }
.conversation-rename:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-hover); }
.prospect-intake { display: grid; grid-column: 1 / -1; gap: 12px; margin: 6px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.prospect-intake legend { padding: 0 6px; color: var(--olive-deep); font-weight: 750; }
.prospect-intake > .hub-muted { margin: -4px 0 2px; }

.conversation-list {
  display: grid;
  gap: 4px;
  max-height: 205px;
  overflow: auto;
  scrollbar-width: thin;
}
.conversation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
}
.conversation-button {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  background: transparent;
  text-align: left;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.conversation-button:hover { transform: translateX(2px); background: var(--surface-hover); }
.conversation-button.active { border-color: var(--line-strong); background: var(--surface-active); box-shadow: var(--atlas-shadow-sm); }
.conversation-name, .conversation-date { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conversation-name { font-size: .84rem; font-weight: 650; }
.conversation-date { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.conversation-actions { display: flex; }
.conversation-action {
  min-width: 28px; width: auto; height: 28px; padding: 0 7px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--muted); transition: background var(--ease), color var(--ease);
}
.conversation-action svg { width: 14px; height: 14px; }
.conversation-action span { margin-left: 4px; font-size: 11px; }
.conversation-action:hover { background: var(--gold-soft); color: var(--ink); }
.delete-action:hover { color: var(--danger); }
.archived-chats { margin-top: 4px; color: var(--muted); font-size: .78rem; }
.conversation-empty { margin: 6px 4px; padding: 10px; color: var(--muted); font-size: .74rem; line-height: 1.4; }
.client-directory-tools { display: flex; align-items: end; gap: 12px; margin: 0 0 14px; }
.client-directory-tools label { display: grid; gap: 6px; min-width: min(100%, 360px); color: var(--muted); font-size: .78rem; font-weight: 700; }
.client-directory-tools input { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--panel-strong); }
.client-directory-tools input:focus-visible { outline: 3px solid color-mix(in srgb, var(--atlas-gold) 35%, transparent); outline-offset: 2px; border-color: var(--line-strong); }
.client-directory-result { padding-bottom: 11px; color: var(--muted); font-size: .78rem; }
.client-search-results { display: grid; gap: 8px; max-width: 620px; }
.client-search-result { display: grid; gap: 4px; width: 100%; padding: 14px 16px; text-align: left; color: var(--ink); background: var(--panel-strong); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.client-search-result span { color: var(--muted); font-size: .82rem; }
.client-search-result:hover { border-color: var(--line-strong); background: var(--panel); }
.client-detail-card { max-width: 760px; }
.client-archived-dates { margin-top: 22px; }

.sidebar-footer {
  margin-top: auto;
  padding: 9px 7px 3px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  color: var(--muted);
  font-size: .78rem;
  justify-content: space-between;
}
.footer-actions { min-width: 92px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.settings-button {
  min-height: 31px; padding: 6px 8px; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid transparent; border-radius: 11px; cursor: pointer; color: var(--muted); background: transparent;
  transition: transform var(--ease), background var(--ease), color var(--ease);
}
.settings-button:hover, .settings-button.active { color: var(--ink); background: var(--surface-hover); transform: translateY(-1px); }
.online-label { display: inline-flex; align-items: center; gap: 9px; }
.theme-toggle {
  width: 100%;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  color: var(--olive-deep);
  background: var(--panel-strong);
  box-shadow: var(--atlas-shadow-sm);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.theme-toggle:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.theme-toggle[aria-pressed="true"] { color: var(--atlas-gold); background: var(--atlas-soft-black); }
.status-dot, .mode-badge i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--status-success);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--status-success) 16%, transparent);
}

.app-shell.sidebar-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
.sidebar-collapsed .sidebar { padding-inline: 8px; align-items: center; }
.sidebar-collapsed .brand {
  width: 100%;
  min-height: 84px;
  grid-template-columns: 1fr;
  grid-template-rows: 38px 28px;
  justify-items: center;
  gap: 5px;
  padding: 0 0 9px;
}
.sidebar-collapsed .brand-mark { grid-row: 1; }
.sidebar-collapsed .brand .sidebar-collapse { grid-row: 2; }
.sidebar-collapsed .brand > div,
.sidebar-collapsed .nav-section-title > span:nth-child(2),
.sidebar-collapsed .nav-chevron,
.sidebar-collapsed .nav-subitems,
.sidebar-collapsed .conversation-list,
.sidebar-collapsed .archived-chats,
.sidebar-collapsed .online-label, .sidebar-collapsed .settings-button > span:last-child { display: none; }
.sidebar-collapsed .ceo-navigation, .sidebar-collapsed .atlas-chat-section, .sidebar-collapsed .nav-section { width: 100%; }
.sidebar-collapsed .sidebar-footer { width: 100%; justify-content: center; align-items: center; padding-inline: 0; }
.sidebar-collapsed .footer-actions { flex-direction: column; }
.sidebar-collapsed .footer-actions { min-width: 0; }
.sidebar-collapsed .settings-button, .sidebar-collapsed .theme-toggle { width: 34px; height: 34px; padding: 0; justify-content: center; }
.sidebar-collapsed .nav-section-title { min-height: 40px; grid-template-columns: 1fr; place-items: center; padding: 7px 5px; }
.sidebar-collapsed .nav-icon { font-size: 1.1rem; }

.sidebar-flyout {
  position: fixed;
  z-index: 75;
  width: min(292px, calc(100vw - 110px));
  max-height: calc(100dvh - 24px);
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  color: var(--ink);
  background: linear-gradient(155deg, var(--panel-strong), var(--atlas-cream));
  box-shadow: var(--shadow-panel);
  animation: sidebar-flyout-in 180ms ease both;
}
.sidebar-flyout[hidden] { display: none; }
.sidebar-flyout-title { display: block; padding: 3px 7px 10px; color: var(--olive-deep); font-size: .82rem; letter-spacing: .02em; }
.sidebar-flyout-content { display: grid; }
.sidebar-flyout .nav-subitems {
  display: grid;
  max-height: none;
  opacity: 1;
  overflow: visible;
  transform: none;
  padding: 0;
}
.sidebar-flyout .atlas-chat-content { max-height: none; }
.sidebar-flyout .conversation-list { display: grid; }
@keyframes sidebar-flyout-in {
  from { opacity: 0; transform: translateX(-5px) scale(.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

.sidebar-tooltip {
  position: fixed;
  z-index: 90;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: var(--panel-strong);
  box-shadow: var(--shadow-card);
  font-size: .72rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  animation: sidebar-flyout-in 150ms ease both;
}
.sidebar-tooltip[hidden] { display: none; }

.chat-panel {
  min-width: 0;
  height: calc(100vh - 26px);
  height: calc(100dvh - 26px);
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--atlas-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 92% 5%, rgba(212, 175, 55, .10), transparent 25rem),
    linear-gradient(155deg, var(--panel-strong), var(--panel));
  box-shadow: var(--shadow-panel);
}
.topbar {
  min-height: 84px;
  padding: 18px clamp(20px, 3.2vw, 43px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-strong) 84%, transparent);
  backdrop-filter: blur(12px);
}
.eyebrow { margin: 0 0 5px; color: var(--olive); font-size: .67rem; font-weight: 800; letter-spacing: .12em; }
.chat-title-wrap h1 { margin: 0; font-size: clamp(1.16rem, 1.8vw, 1.62rem); letter-spacing: -.03em; }
.chat-panel:has(.workspace-view:not([hidden])) .chat-title-wrap h1 { color: var(--muted); font-size: .78rem; font-weight: 650; letter-spacing: .01em; }
.chat-panel:has(.workspace-view:not([hidden])) .chat-title-wrap .eyebrow { margin-bottom: 3px; font-size: .62rem; }
.mode-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft);
  background: var(--surface-elevated); box-shadow: var(--atlas-shadow-sm); font-size: .71rem;
}

.workspace-view, .messages {
  min-height: 0;
  overflow: auto;
  padding: clamp(21px, 3.2vw, 45px);
}
.workspace-view { width: min(1280px, 100%); margin-inline: auto; }
.knowledge-view-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px;
}
.knowledge-view-heading h2 { margin: 0 0 6px; font-size: clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing: -.04em; }
.knowledge-view-heading p:not(.eyebrow) { max-width: 680px; margin: 0; color: var(--muted); line-height: 1.6; }
.knowledge-view-heading > span {
  flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--olive-deep); background: var(--surface-active); font-size: .75rem; font-weight: 700;
}

.workspace-tabs {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 22px;
  padding: 4px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  box-shadow: inset 0 1px 2px rgba(74,67,48,.05);
}
.workspace-tab {
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 690;
  transition: transform var(--ease), background var(--ease), color var(--ease), box-shadow var(--ease);
}
.workspace-tab:hover { color: var(--ink); transform: translateY(-1px); }
.workspace-tab.active {
  color: var(--olive-deep);
  border-color: rgba(181,138,75,.16);
  background: linear-gradient(145deg, var(--panel-strong), color-mix(in srgb, var(--atlas-gold) 14%, var(--atlas-cream)));
  box-shadow: 0 6px 14px rgba(74,67,48,.1), inset 0 1px 0 rgba(255,255,255,.8);
}
.project-activity-list {
  max-height: 360px;
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-soft) 48%, var(--panel-strong));
}
.project-activity-list p { margin: 0; line-height: 1.45; }

.knowledge-health { margin-top: 0; }
.knowledge-health > h3, .knowledge-health > p { display: none; }
.knowledge-health-checks, .operation-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 13px;
}
.knowledge-health-check, .operation-item {
  min-height: 136px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--surface-elevated), var(--surface));
  box-shadow: var(--shadow-card);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.knowledge-health-check:hover, .operation-item:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-hover);
}
.kpi-icon, .operation-icon {
  width: 34px; height: 34px; margin-bottom: 15px; display: grid; place-items: center;
  border-radius: 11px; color: var(--olive-deep); background: linear-gradient(145deg, color-mix(in srgb, var(--atlas-gold) 14%, var(--panel-strong)), color-mix(in srgb, var(--atlas-gold-hover) 22%, var(--panel)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 13px rgba(74,67,48,.08);
  font-weight: 800;
}
.operation-agent-logo { width: 34px; height: 34px; margin-bottom: 15px; display: grid; place-items: center; }
.operation-agent-logo .agent-logo { width: 34px; height: 34px; border-radius: 11px; }
.intake-heading { margin: 24px 0 12px; color: var(--ink); font-size: 1rem; }
.intake-form { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-strong); box-shadow: var(--shadow-card); }
.intake-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.intake-form label { display: grid; gap: 7px; color: var(--muted); font-size: .76rem; font-weight: 720; }
.intake-form .intake-wide { grid-column: 1 / -1; }
.intake-form input, .intake-form textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--surface); font: inherit; font-size: .86rem; outline: none; resize: vertical; }
.intake-form input:focus, .intake-form textarea:focus { border-color: var(--atlas-gold-hover); box-shadow: 0 0 0 3px color-mix(in srgb, var(--atlas-gold) 16%, transparent); }
.intake-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.primary-action { border: 0; border-radius: 10px; padding: 10px 15px; color: var(--atlas-soft-black); background: var(--atlas-gold); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.primary-action:disabled { opacity: .55; cursor: wait; }
.intake-status { color: var(--muted); font-size: .76rem; }
.knowledge-health-check strong, .operation-item strong { color: var(--muted); font-size: .76rem; font-weight: 720; letter-spacing: .02em; }
.knowledge-health-check > span:not(.kpi-icon), .operation-item > span:not(.operation-icon) {
  margin-top: 7px; color: var(--ink); font-size: 1.14rem; font-weight: 780; line-height: 1.25; letter-spacing: -.02em;
}
.card-secondary { margin-top: auto; padding-top: 13px; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.health-ok { color: var(--success) !important; }
.health-alert { color: var(--warning) !important; }
.operation-item > .health-ok,
.operation-item > .health-alert {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: .72rem !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
}

.operation-documents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 13px; }
.operation-documents {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
  box-shadow: var(--shadow-card);
}
.operation-documents h3 { margin: 0 0 15px; font-size: 1rem; }
.operation-documents ul { margin: 0; padding-left: 18px; color: var(--ink-soft); line-height: 1.75; }
.demo-data-badge { color: var(--olive-deep) !important; background: var(--gold-soft) !important; }
.demo-table-card { margin-top: 13px; }
.demo-table-scroll { margin: 0 -18px -18px; overflow-x: auto; }
.demo-table-card table { min-width: 620px; }
.demo-table-card th:first-child, .demo-table-card td:first-child { padding-left: 18px; }
.demo-table-card th:last-child, .demo-table-card td:last-child { padding-right: 18px; }

.messages { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.empty-state { margin: auto; max-width: 540px; display: grid; justify-items: center; text-align: center; color: var(--muted); line-height: 1.65; }
.empty-state .avatar { margin-inline: auto; }
.empty-state h2 { margin: 18px 0 4px; color: var(--ink); }
.empty-state p { margin: 0; }
.message { width: min(820px, 92%); display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 11px; }
.user-message { margin-left: auto; grid-template-columns: minmax(0,1fr) 38px; }
.user-message .avatar { grid-column: 2; grid-row: 1; }
.user-message .message-body { grid-column: 1; grid-row: 1; }
.avatar {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px;
  color: var(--atlas-ivory); background: linear-gradient(145deg, var(--atlas-charcoal), var(--atlas-soft-black)); box-shadow: var(--shadow-card); font-weight: 800;
}
.avatar img { width: 31px; height: 31px; object-fit: contain; }
.agent-logo {
  width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px;
  color: #fffaf0; font-size: 15px; font-weight: 850; letter-spacing: -.04em;
  border: 1px solid rgba(255,255,255,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.agent-logo-image { width: 31px; height: 31px; display: block; object-fit: contain; border-radius: 9px; }
.agent-logo-atlas { background: linear-gradient(145deg, #c99f32, #7a5a1f); }
.agent-logo-alpha { background: linear-gradient(145deg, #b56a57, #6f332a); }
.agent-logo-vector { background: linear-gradient(145deg, #4d8b8c, #24585a); }
.agent-logo-omega { background: linear-gradient(145deg, #765a9e, #443267); }
.agent-logo-cipher { background: linear-gradient(145deg, #4f6f9f, #273e68); }
.agent-logo-shield { background: linear-gradient(145deg, #66885f, #355337); }
.agent-logo-nexus { background: linear-gradient(145deg, #b07848, #704322); }
.atlas-message .avatar, .empty-state .avatar {
  overflow: hidden;
  border: 1px solid rgba(184, 138, 50, .18);
  background: linear-gradient(145deg, var(--atlas-ivory), var(--atlas-cream));
}
.message-body, .message > div:last-child {
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-strong);
  box-shadow: var(--shadow-card);
}
.user-message .message-body, .user-message > div:last-child { background: linear-gradient(145deg, color-mix(in srgb, var(--atlas-gold) 11%, var(--panel-strong)), var(--atlas-cream)); }
.message-name { margin-bottom: 7px; font-size: .74rem; font-weight: 760; color: var(--olive-deep); }
.message-text { white-space: pre-wrap; line-height: 1.68; color: var(--ink-soft); }
.message-sources { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; }
.typing-message > div:last-child { min-height: 48px; display: flex; align-items: center; }
.typing-dots { display: inline-flex; align-items: center; gap: 6px; }
.typing-dots i { width: 7px; height: 7px; display: block; border-radius: 50%; background: var(--atlas-gold-hover); animation: atlas-typing 1.2s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: 140ms; }
.typing-dots i:nth-child(3) { animation-delay: 280ms; }
@keyframes atlas-typing { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.composer-wrap { padding: 11px clamp(18px, 3.2vw, 42px) 16px; }
.composer {
  width: min(900px, 100%);
  margin-inline: auto;
  padding: 7px 7px 7px 15px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--surface-elevated);
  box-shadow: var(--shadow-card);
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.composer:focus-within { border-color: color-mix(in srgb, var(--atlas-gold) 58%, transparent); box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.composer textarea { flex: 1; min-height: 40px; max-height: 170px; resize: none; padding: 9px 0; border: 0; outline: 0; color: var(--ink); background: transparent; }
.composer textarea::placeholder { color: var(--text-secondary); }
.composer button {
  width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: 12px; cursor: pointer;
  color: var(--atlas-soft-black); background: linear-gradient(145deg, #E1C35A, var(--atlas-gold-hover)); box-shadow: 0 8px 17px rgba(184,138,50,.24);
  transition: transform var(--ease), box-shadow var(--ease), opacity var(--ease);
}
.composer button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 21px rgba(184,138,50,.30); }
.composer button:disabled { opacity: .42; cursor: default; }
.privacy-note { margin: 10px auto 0; max-width: 900px; color: var(--muted); font-size: .69rem; text-align: center; }

.dashboard, .dashboard-grid, .metric-grid, .health-grid, .approval-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 13px;
}
.card, .metric-card, .dashboard-card, .health-card, .approval-card, .table-card {
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-strong); box-shadow: var(--shadow-card);
}
.card, .metric-card, .dashboard-card, .health-card, .approval-card { padding: 17px; transition: transform var(--ease), box-shadow var(--ease); }
.card:hover, .metric-card:hover, .dashboard-card:hover, .health-card:hover, .approval-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.table-card { overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 13px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--muted); background: var(--panel-soft); font-size: .72rem; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }
.status-pill { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: var(--panel-soft); color: var(--olive-deep); font-size: .7rem; font-weight: 700; }

@media (min-width: 701px) and (max-width: 900px) {
  .app-shell { grid-template-columns: 80px minmax(0,1fr); padding: 10px; gap: 10px; }
  .chat-panel { grid-column: 2; }
  .sidebar {
    position: fixed; inset: 10px auto 10px 10px; z-index: 30; width: 70px;
    height: calc(100dvh - 20px); padding-inline: 10px; align-items: center;
  }
  .sidebar-collapse { display: none; }
  .brand { width: 100%; justify-content: center; padding-inline: 0; }
  .brand > div, .nav-section-title > span:nth-child(2), .nav-chevron, .nav-subitems,
  .conversation-list, .archived-chats, .online-label, .settings-button > span:last-child { display: none; }
  .ceo-navigation, .atlas-chat-section, .nav-section { width: 100%; }
  .nav-section-title { grid-template-columns: 1fr; place-items: center; padding-inline: 6px; }
  .sidebar-footer { width: 100%; justify-content: center; padding-inline: 0; }
  .footer-actions { flex-direction: column; }
  .settings-button, .theme-toggle { width: 34px; height: 34px; padding: 0; justify-content: center; }
  .topbar { padding-inline: 24px; }
}

[data-theme="dark"] .sidebar {
  background:
    radial-gradient(circle at 18% 3%, rgba(212, 175, 55, .08), transparent 15rem),
    linear-gradient(160deg, #2B2A27, var(--sidebar));
}
[data-theme="dark"] .brand-mark,
[data-theme="dark"] .atlas-message .avatar,
[data-theme="dark"] .empty-state .avatar {
  background: linear-gradient(145deg, #2E2D2A, #191919);
  border-color: rgba(212, 175, 55, .24);
  box-shadow: 0 10px 22px rgba(0,0,0,.32), inset 0 1px 0 rgba(212,175,55,.12);
}
[data-theme="dark"] .nav-section-title:hover,
[data-theme="dark"] .nav-subitems button:hover,
[data-theme="dark"] .conversation-button:hover { background: rgba(212,175,55,.07); }
[data-theme="dark"] .topbar { background: rgba(31,31,31,.72); }
[data-theme="dark"] .message-body,
[data-theme="dark"] .message > div:last-child,
[data-theme="dark"] .composer,
[data-theme="dark"] .operation-documents { background: var(--panel-strong); }
@media (max-width: 700px) {
  .app-shell { display: block; height: 100dvh; padding: 0; }
  .sidebar {
    position: fixed; inset: 8px auto 8px 8px; z-index: 60;
    width: min(320px, calc(100vw - 40px)); height: calc(100dvh - 16px);
    transform: translateX(calc(-100% - 18px)); visibility: hidden;
    transition: transform var(--ease), visibility var(--ease), box-shadow var(--ease);
  }
  .mobile-drawer-open .sidebar { transform: translateX(0); visibility: visible; }
  .sidebar-collapse { display: none; }
  .mobile-menu-toggle, .mobile-menu-close { display: grid; place-items: center; border: 1px solid var(--line); cursor: pointer; color: var(--olive-deep); background: var(--surface-elevated); box-shadow: var(--shadow-card); }
  .mobile-menu-toggle { position: fixed; top: 18px; left: 16px; z-index: 42; width: 44px; height: 44px; border-radius: 14px; }
  .mobile-menu-close { position: absolute; top: 18px; right: 14px; width: 36px; height: 36px; border-radius: 12px; }
  .mobile-backdrop { display: block; position: fixed; inset: 0; z-index: 50; border: 0; background: rgba(31,31,31,.28); backdrop-filter: blur(2px); }
  body.navigation-open { overflow: hidden; }
  .chat-panel { width: 100%; height: 100dvh; min-height: 0; border: 0; border-radius: 0; }
  .topbar { min-height: 82px; padding: 16px 18px 16px 74px; }
  .mode-badge { display: none; }
  /* Keep the fixed navigation control clear of the first workspace heading. */
  .workspace-view { padding: 56px 18px 24px; }
  .messages { padding: 24px 18px; }
  .workspace-tabs { width: 100%; border-radius: 16px; }
  .dashboard, .dashboard-grid, .metric-grid, .health-grid, .approval-grid,
  .operation-documents-grid { grid-template-columns: 1fr; }
  .message { width: 100%; grid-template-columns: 36px minmax(0,1fr); gap: 9px; }
  .user-message { grid-template-columns: minmax(0,1fr) 36px; }
  .avatar { width: 36px; height: 36px; border-radius: 12px; }
  .avatar img { width: 29px; height: 29px; }
  .message-body, .message > div:last-child { padding: 14px 15px; }
  .composer-wrap { padding: 10px 12px 12px; }
  .composer { border-radius: 17px; }
  .privacy-note { display: none; }
  .knowledge-view-heading { display: block; }
  .knowledge-view-heading > span { display: inline-flex; margin-top: 14px; }
  .knowledge-health-checks, .operation-list { grid-template-columns: 1fr; }
  .intake-form-grid { grid-template-columns: 1fr; }
  .intake-form .intake-wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.topbar-controls { display: flex; align-items: center; gap: 10px; }
.agent-picker-label { font-size: 12px; color: var(--muted); }
.agent-picker { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); padding: 8px 30px 8px 12px; font: inherit; font-size: 12px; }
.workspace-active .chat-title-wrap, .workspace-active .topbar-controls { display: none; }
.workspace-active .topbar { display: none; }
.mode-badge { white-space: nowrap; }
@media (max-width: 720px) { .agent-picker-label { display: none; } .topbar-controls { gap: 6px; } .mode-badge { display: none; } }
/* Business hub: reuse the existing ivory/gold visual language. */
.hub-content { display: grid; gap: 22px; }
.google-calendar-area { margin-bottom: 28px; }
.google-calendar-panel { border: 1px solid var(--border, #d9cbb7); border-radius: 16px; padding: 20px; }
.google-calendar-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.google-calendar-controls label { display: grid; gap: 8px; font-size: 13px; }
.google-calendar-controls select { padding: 8px; max-width: 100%; background: transparent; color: inherit; border: 1px solid var(--border, #d9cbb7); border-radius: 8px; }
.google-calendar-controls .hub-editor { width: 100%; min-width: 0; }
.google-calendar-controls p, .google-calendar-controls code { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.google-calendar-controls input { max-width: 100%; padding: 12px 0; }
.google-calendar-panel a { color: inherit; text-decoration: underline; font-size: 13px; }
.atlas-calendar { min-width: 0; margin-top: 12px; }
.calendar-toolbar, .calendar-navigation { display: flex; align-items: center; gap: 10px; }
.calendar-day-navigation { display: none; align-items: center; gap: 8px; }
.calendar-toolbar { justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.calendar-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 auto; gap: 10px; flex-wrap: wrap; }
.calendar-toolbar-actions .appointment-editor { display: contents; }
.calendar-toolbar-actions .google-calendar-controls { width: auto; }
.calendar-toolbar-actions .google-calendar-controls label { display: inline-flex; align-items: center; gap: 8px; }
.calendar-toolbar-actions .appointment-form, .calendar-toolbar-actions .hub-muted { display: none; }
.calendar-toolbar h3 { font-size: 1.5rem; margin: 0; letter-spacing: -.025em; }
.calendar-navigation button { min-width: 44px; min-height: 44px; font-size: 1rem; }
.calendar-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.calendar-month { table-layout: fixed; width: 100%; border-collapse: collapse; min-width: 570px; background: var(--surface); }
.calendar-month th { padding: 14px 8px; font-size: .875rem; font-weight: 500; color: var(--muted); text-align: left; }
.calendar-month td { padding: 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; }
.calendar-month td:last-child { border-right: 0; }
.calendar-day { display: flex; flex-direction: column; gap: 5px; width: 100%; min-height: 132px; padding: 8px; border: 0; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.calendar-day:hover { background: rgba(180,135,60,.07); }
.calendar-day.outside-month { background: rgba(120,120,120,.04); }
.calendar-day.outside-month .calendar-day-number { opacity: .5; }
.calendar-day.is-selected { box-shadow: inset 0 0 0 2px #b4873c; background: rgba(180,135,60,.06); }
.calendar-day-number { display: grid; place-items: center; width: 30px; height: 30px; font-size: .875rem; margin-bottom: 3px; border-radius: 50%; }
.calendar-day.is-today .calendar-day-number { background: #785521; color: #fff; }
.calendar-event { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; line-height: 1.5; border-left: 3px solid #b4873c; padding-left: 5px; }
.calendar-event.all-day { background: rgba(180,135,60,.15); border-radius: 3px; }
.calendar-more { color: var(--muted); font-size: .75rem; padding-left: 8px; }
.calendar-day-detail { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; display: grid; gap: 12px; }
.calendar-day-detail > h4 { margin: 0; font-size: 1rem; }
.calendar-appointment { border-left: 3px solid #b4873c; padding: 8px 16px; background: var(--surface); }
.calendar-appointment h4 { margin: 6px 0; font-size: 1rem; overflow-wrap: anywhere; }
.calendar-appointment-time { font-size: .875rem; color: var(--muted); }
.appointment-form { border: 1px solid var(--line); padding: 18px; border-radius: 12px; background: var(--surface); }
.appointment-time-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; grid-column: 1 / -1; }
.appointment-wide { grid-column: 1 / -1; margin: 0; }
.appointment-form input[type="checkbox"] { width: 22px; height: 22px; }
.appointment-form label { font-size: .875rem; }
.appointment-form button { min-height: 44px; cursor: pointer; }
.appointment-form button:disabled { opacity: .55; cursor: wait; }
.calendar-delete { display: block; margin-top: 12px; min-height: 44px; border-color: #a54739; color: #a54739; }
[data-theme="dark"] .calendar-delete { color: #f0a49a; border-color: #bd7267; }
.atlas-calendar button:focus-visible { outline: 3px solid #b4873c; outline-offset: -3px; }
@media (max-width:700px) { .google-calendar-panel { padding: 12px; } .calendar-day { min-height: 110px; } .calendar-toolbar h3 { font-size: 1.25rem; } .calendar-toolbar { align-items: stretch; } .calendar-toolbar > .google-calendar-controls { width: 100%; } .calendar-toolbar > .google-calendar-controls label { flex: 1 1 100%; } .calendar-toolbar > .google-calendar-controls select { width: 100%; } .calendar-month { display: none; } .calendar-scroll { display: none; } .calendar-day-detail { margin-top: 0; border-top: 0; padding-top: 10px; } .calendar-day-navigation { display: flex; } .appointment-time-group { grid-template-columns: 1fr; } }
.draft-dialog { border: 1px solid var(--line); border-radius: 16px; padding: 22px; color: var(--ink); background: var(--panel-strong); box-shadow: var(--shadow-panel); max-width: min(460px, calc(100vw - 32px)); }
.draft-dialog::backdrop { background: rgba(31,31,31,.35); backdrop-filter: blur(2px); }
.draft-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.appointment-confirmation { position: fixed; z-index: 20; inset: 50% auto auto 50%; width: min(480px, calc(100vw - 32px)); transform: translate(-50%, -50%); padding: 22px; color: var(--ink); background: var(--panel-strong); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-panel); }
.appointment-confirmation::before { content: ''; position: fixed; z-index: -1; inset: 50vh 50vw; width: 100vw; height: 100vh; transform: translate(-50%, -50%); background: rgba(31,31,31,.52); }
.appointment-confirmation h3 { margin: 0 0 10px; }
.appointment-confirmation p { line-height: 1.6; }
.appointment-confirmation-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hub-content > p, .hub-content > h2 { margin: 0; line-height: 1.6; }
.hub-section { display: grid; gap: 12px; min-width: 0; }
.combined-agenda { margin-top: 8px; }
.combined-agenda-controls { display: flex; justify-content: flex-end; }
.combined-agenda-controls select { padding: 9px 12px; border: 1px solid var(--border, #d9cbb7); border-radius: 8px; background: transparent; color: inherit; }
.hub-section h3 { margin: 12px 0 0; font-size: 16px; }
.hub-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); gap: 14px; }
.hub-record { border: 1px solid var(--border, #d9cbb7); border-radius: 16px; padding: 20px; min-width: 0; background: var(--surface, transparent); }
.hub-record h4 { margin: 10px 0; font-size: 17px; }
.hub-record p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; font-size: 13px; }
.hub-record .workspace-tab { margin-top: 10px; margin-right: 8px; }
.hub-status { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #8c682c; }
.hub-status.failed, .hub-status.blocked { color: #aa6039; }
.hub-muted { font-size: 12px; opacity: .75; line-height: 1.6; }
.casa-atlas-preview { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.casa-atlas-preview-receipt { max-width: 820px; }
.casa-atlas-preview-timeline { display: grid; gap: 10px; }
.casa-atlas-preview-step { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.casa-atlas-preview-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--panel-strong); background: var(--atlas-gold); font-weight: 800; }
.casa-atlas-preview-step-copy { display: grid; gap: 4px; }
.casa-atlas-preview-step-copy p { margin: 0; }
.casa-atlas-preview-step[data-status="active"] { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(184, 138, 50, .12); }
.casa-atlas-preview-step[data-status="complete"] .casa-atlas-preview-number { background: var(--success); color: white; }
.casa-atlas-preview-activity { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.casa-atlas-preview-activity p { margin: 0; line-height: 1.5; }
.casa-atlas-preview-activity p::before { content: '› '; color: var(--gold); font-weight: 800; }
.hub-deliverable { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.7; padding: 22px; border: 1px solid var(--border, #d9cbb7); border-radius: 14px; }
.hub-editor { border: 1px solid var(--border, #d9cbb7); padding: 14px; border-radius: 12px; margin: 10px 0; }
.hub-editor summary, .hub-content summary { cursor: pointer; font-size: 13px; }
.hub-form { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 14px; margin-top: 16px; }
.hub-form label, .intake-form-grid label { display: grid; gap: 6px; font-size: 12px; }
.hub-form input, .hub-form textarea, .hub-form select, .hub-content textarea, .intake-form select { box-sizing: border-box; width: 100%; padding: 10px; background: transparent; color: inherit; border: 1px solid var(--border, #d9cbb7); border-radius: 8px; font: inherit; }
.hub-content button:disabled { opacity: .5; cursor: wait; }
.hub-content button:focus-visible, .hub-content summary:focus-visible { outline: 2px solid #b4873c; outline-offset: 3px; }