/* Persistent navigation and appearance controls shared by every main-frame view. */
.chat-header [hidden] { display: none !important; }
.appearance-controls, .appearance-panel { display: contents; }
.profile-short-label, .theme-label { display: none; }
.chat-header { min-height: 60px; padding: 8px 24px; gap: 24px; }
.career-navigation { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.career-navigation button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--text-secondary); font: 400 .75rem/1.6 var(--font); white-space: nowrap; cursor: pointer; }
.career-navigation button:hover { color: var(--accent-warm); }
.chat-header .chat-header-left { display: flex; min-width: 0; width: 100%; }
.chat-header .header-retro { width: 100%; }
.chat-header .chat-header-right { flex-shrink: 0; width: auto; gap: 12px; }
.chat-header :is(button, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.chat-header.is-compact { padding-inline: 12px; gap: 8px; }
.chat-header.is-compact .career-navigation { gap: 16px; }
.chat-header.is-compact .chat-header-right { gap: 0; }
.appearance-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.appearance-toggle:hover { background: var(--bg-input); }
.chat-header.is-compact .appearance-controls { display: block; position: relative; }
.chat-header.is-compact .appearance-panel { display: flex; flex-direction: column; align-items: stretch; gap: 10px; position: absolute; top: calc(100% + 8px); right: 0; min-width: 176px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-panel); box-shadow: var(--shadow-elevated); z-index: 100; }
.chat-header.is-compact .color-picker-wrap { display: contents; }
.chat-header.is-compact .color-picker-toggle { display: none !important; }
.chat-header.is-compact .color-picker-popover { display: block; position: static; transform: none; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.chat-header.is-compact .accent-picker { display: flex; flex-direction: row; gap: 6px; padding: 0; }
.chat-header.is-compact .accent-dot { display: block; position: relative; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 8px; background: transparent !important; box-shadow: none; }
.chat-header.is-compact .accent-dot.active { border-color: var(--text-secondary); }
.chat-header.is-compact .accent-dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; }
.chat-header.is-compact .accent-dot[data-color="blue"]::after { background: #2563EB; }
.chat-header.is-compact .accent-dot[data-color="green"]::after { background: #16A34A; }
.chat-header.is-compact .accent-dot[data-color="orange"]::after { background: #EA580C; }
[data-theme="dark"] .chat-header.is-compact .accent-dot[data-color="blue"]::after { background: #7BA3FF; }
[data-theme="dark"] .chat-header.is-compact .accent-dot[data-color="green"]::after { background: #4ADE80; }
[data-theme="dark"] .chat-header.is-compact .accent-dot[data-color="orange"]::after { background: #FB923C; }
.chat-header.is-compact .theme-toggle { width: 100% !important; min-width: 44px; height: 44px !important; gap: 12px; justify-content: space-between; padding: 0 10px; border-radius: 8px; font: 400 .75rem/1.5 var(--font); color: var(--text-secondary); }
.chat-header.is-compact .theme-label { display: inline; }
@media (max-width: 900px) {
  .chat-header { padding-inline: 10px; gap: 4px; }
  .chat-header .chat-header-left { display: none; }
  .chat-header .chat-header-right { margin-left: auto; }
  .chat-header #mobileContextBtn { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; border: 0; background: transparent; font: 500 .75rem/1.5 var(--mono); }
  .chat-header #mobileContextBtn .profile-long-label, .chat-header #mobileContextBtn > svg { display: none; }
  .chat-header .profile-short-label { display: inline; }
}

.chat-header { display: flex; align-items: center; flex-shrink: 0; border-bottom: 1px solid var(--border); position: relative; z-index: 10; background: var(--bg); }
.chat-header-left { align-items: center; }
.chat-header-right { display: flex; align-items: center; }
.chat-header .theme-toggle { width: 44px; height: 44px; }
/* Size the lane against the main pane, leaving balanced space for both controls. */
.chat-panel { container: main-panel / inline-size; }
@media (min-width: 901px) {
  .chat-header {
    display: grid;
    grid-template-columns: minmax(132px, 1fr) clamp(180px, calc(100cqi - 440px), 360px) minmax(132px, 1fr);
  }
  .chat-header .chat-header-right { justify-self: end; }
}
.career-navigation button { position: relative; font-weight: 500; }
.career-navigation button[aria-current="page"] { color: var(--text); font-weight: 500; }
.career-navigation button[aria-current="page"]::after { content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 2px; background: var(--accent-warm); }

/* The same outer grid and type scale anchor Portfolio and Experience. */
.welcome { padding: 0; }
.page-content { --page-gutter: 48px; width: 100%; max-width: calc(1120px + 2 * var(--page-gutter)); margin-inline: auto; padding: 32px var(--page-gutter) 36px; }
.page-title { font: 600 clamp(2.5rem, 6cqi, 4rem)/1.05 var(--serif); letter-spacing: -.045em; margin: 0 0 20px; }
.page-title span { color: var(--accent-warm); }
.page-content :is(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.landing-eyebrow, .cg-kicker { font: 500 .6875rem/1.65 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); margin: 0 0 12px; }
.landing-deck, .cg-deck { font: 400 .93rem/1.8 var(--font); max-width: 740px; color: var(--text-secondary); margin: 0; }
.landing-deck + .landing-deck { margin-top: 12px; }
.landing-button, .cg-primary { display: inline-flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 44px; padding: 12px 17px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel); color: var(--text); font: 500 .8rem/1.5 var(--font); text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s; }
.landing-button-primary, .cg-primary { color: var(--bg-elevated); background: var(--text); border-color: var(--text); }
.cg-primary:disabled { background: var(--bg-input); border-color: var(--border); color: var(--text-secondary); cursor: default; }

/* The familiar geometry stays at the edge, with quieter contrast while reading. */
.chat-panel:is(.view-welcome, .view-ideas, .view-chat-welcome, .view-chat)::before {
  content: ''; position: absolute; inset: 61px 0 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(115deg, transparent 0 47px, var(--signal-line-strong) 47px 48px, transparent 49px 74px), repeating-linear-gradient(90deg, transparent 0 53px, var(--signal-line-soft) 53px 54px), linear-gradient(90deg, transparent, var(--signal-wash));
  mask-image: linear-gradient(90deg, transparent 58%, #000 100%); opacity: .65;
}
.chat-panel.view-chat::before { opacity: .22; }
@container (max-width: 760px) { .page-content { --page-gutter: 28px; } }
@container (max-width: 480px) {
  .page-content { --page-gutter: 22px; padding-top: 26px; padding-bottom: 28px; }
  .page-title { font-size: clamp(2rem, 10cqi, 2.44rem); line-height: 1.08; }
  .landing-deck, .cg-deck { font-size: .88rem; }
}
@container (max-width: 360px) {
  .landing-intro > .landing-eyebrow, .cg-intro > .cg-kicker { min-height: 3.3em; }
}
@media (max-width: 900px) {
  .page-content { --page-gutter: 24px; }
  .chat-panel:is(.view-welcome, .view-ideas, .view-chat-welcome)::before { opacity: .35; }
}
@media (max-width: 480px) { .page-content { --page-gutter: 22px; } }
@media (prefers-reduced-motion: reduce) { .landing-button, .cg-primary { transition: none; } }