:root {
  --blue: #385cad;
  --blue-hover: #2d4d96;
  --navy: #1e3a8a;
  --gold: #eba900;
  --ink: #1f2937;
  --text: #555555;
  --muted: #6b7280;
  --surface: #ffffff;
  --canvas: #f5f7fb;
  --canvas-top: #fbfcff;
  --line: #dce3f2;
  --line-strong: #b9c6e3;
  --nav-bg: rgba(255, 255, 255, 0.9);
  --nav-border: rgba(56, 92, 173, 0.12);
  --nav-hover: #f0f4fc;
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --hero-on: #ffffff;
  --on-primary: #ffffff;
  --badge-bg: #edf2fc;
  --badge-fg: #1e3a8a;
  --heading: var(--navy);
  --link: var(--navy);
  --link-hover: var(--blue);
  --success: #087a47;
  --success-bg: #eaf8f1;
  --success-line: #c9edda;
  --danger: #a1262f;
  --danger-bg: #fff1f2;
  --danger-line: #ffd6da;
  --shadow: 0 16px 42px rgba(30, 58, 138, 0.09);
  --shadow-hover: 0 20px 50px rgba(30, 58, 138, 0.15);
  --radius: 18px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f3f6fc;
  --text: #d8e1f0;
  --muted: #aebbd0;
  --surface: #141c2f;
  --canvas: #0b1224;
  --canvas-top: #0e172b;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.22);
  --nav-bg: rgba(11, 18, 36, 0.92);
  --nav-border: rgba(255, 255, 255, 0.1);
  --nav-hover: rgba(255, 255, 255, 0.08);
  --input-bg: #10182a;
  --input-border: rgba(255, 255, 255, 0.22);
  --badge-bg: rgba(86, 125, 215, 0.18);
  --badge-fg: #c8d8ff;
  --heading: #f3f6fc;
  --link: #a9c2ff;
  --link-hover: #cad8ff;
  --success: #79dfb0;
  --success-bg: rgba(8, 122, 71, 0.22);
  --success-line: rgba(121, 223, 176, 0.32);
  --danger: #ff9da4;
  --danger-bg: rgba(161, 38, 47, 0.24);
  --danger-line: rgba(255, 157, 164, 0.34);
  --shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
  --shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.46);
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 0%, rgba(235, 169, 0, 0.13), transparent 25rem),
    linear-gradient(180deg, var(--canvas-top) 0%, var(--canvas) 100%);
  font-family: 'Crimson Text', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-tap-highlight-color: rgba(56, 92, 173, 0.16);
}
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }

[data-shared-nav] { display: contents; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  padding: max(14px, env(safe-area-inset-top)) max(18px, calc((100vw - 1180px) / 2), env(safe-area-inset-right)) 14px max(18px, calc((100vw - 1180px) / 2), env(safe-area-inset-left));
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(18px);
}
.site-nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}
.nav-brand {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  overflow: hidden;
  color: var(--link);
  font: 800 14px/1.2 'Mulish', Verdana, sans-serif;
  letter-spacing: .055em;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-short { display: none; }
.nav-links-container {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
}
.nav-link {
  min-height: 44px;
  padding: 12px 13px;
  border-radius: 10px;
  color: var(--muted);
  font: 800 11px/20px 'Mulish', Verdana, sans-serif;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-link:hover { color: var(--link); background: var(--nav-hover); }
.nav-link.active { color: var(--on-primary); background: var(--navy); }
.nav-signout { display: flex; margin: 0; }
.nav-link.nav-signout-btn,
.nav-link.nav-signout-btn:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  touch-action: manipulation;
}
.nav-link.nav-signout-btn { background: transparent; }
.nav-link.nav-signout-btn:hover { background: var(--nav-hover); }
.theme-toggle, .mobile-nav-toggle {
  min-width: 44px;
  min-height: 44px;
  padding: 9px;
  color: var(--link);
  background: var(--nav-hover);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.theme-toggle {
  display: inline-flex;
  grid-column: 3;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  justify-self: end;
}

.theme-toggle .theme-icon.sun { display: none; }
.theme-toggle .theme-icon.moon { display: block; }
html[data-theme="dark"] .theme-toggle .theme-icon.moon { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon.sun { display: block; }
.mobile-nav-toggle { display: none; grid-column: 2; grid-row: 1; }

.page { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 42px env(safe-area-inset-right) calc(72px + env(safe-area-inset-bottom)) env(safe-area-inset-left); }
.topbar {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
  padding: clamp(30px, 5vw, 54px);
  color: var(--hero-on);
  background: linear-gradient(130deg, var(--navy), var(--blue));
  border: 0;
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.topbar::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  right: -90px;
  top: -110px;
  border: 38px solid rgba(235, 169, 0, .2);
  border-radius: 50%;
}
.topbar > * { position: relative; z-index: 1; }
.topbar h1, .topbar h2, .topbar h3, .topbar a { color: var(--hero-on); }
.topbar p { max-width: 68ch; color: rgba(255,255,255,.84); }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in { animation: fade-in-up 500ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-1 { animation-delay: 50ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 150ms; }
.stagger-4 { animation-delay: 200ms; }
.stagger-5 { animation-delay: 250ms; }
/* The shared nav renders up to nine items (eight links + Sign out) and stamps stagger-N by index;
   without these the tail links animate at 0ms while the head staggers. */
.stagger-6 { animation-delay: 300ms; }
.stagger-7 { animation-delay: 350ms; }
.stagger-8 { animation-delay: 400ms; }
.stagger-9 { animation-delay: 450ms; }
.eyebrow {
  margin: 0;
  color: var(--gold) !important;
  font: 800 12px/1.3 'Mulish', Verdana, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
h1, h2, h3, h4 {
  margin: 0;
  color: var(--heading);
  font-family: 'Mulish', Verdana, sans-serif;
  font-weight: 800;
  line-height: 1.13;
  text-transform: uppercase;
}
h1 { max-width: 18ch; font-size: clamp(2.15rem, 5vw, 4rem); letter-spacing: -.04em; }
h2 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); letter-spacing: -.025em; }
h3 { font-size: 1rem; letter-spacing: .015em; }
p { margin: 0; }

.grid { display: grid; gap: 22px; align-items: start; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card, .section-item, .issue-item, .notice, .link-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.card { padding: clamp(22px, 3vw, 32px); }
.stack { display: grid; gap: 17px; align-content: start; }
.card.stack form.stack {
  align-content: start;
  align-self: start;
  width: 100%;
}
.stack.tight { gap: 10px; }
.users-directory { display: grid; gap: 22px; }
.user-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.user-password-form .checkline { align-items: center; }
.issue-list, .section-list { display: grid; gap: 14px; }
.collapsible-list {
  display: grid;
  align-content: start;
  gap: 22px;
}
.collapsible-list > .collapse-toggle { width: fit-content; }
.collapsible-list > [hidden] { display: none !important; }
.issue-item, .section-item {
  display: grid;
  gap: 12px;
  padding: 20px;
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.issue-item:hover, .section-item:hover { border-color: rgba(56,92,173,.38); box-shadow: var(--shadow); transform: translateY(-2px); }
.reply-body {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.muted { color: var(--muted); }
.actions, .kpis { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.topbar .kpis { gap: 12px; margin-top: 4px; }
.topbar .actions { gap: 14px; }
.topbar .button { padding: 12px 22px; }

form { min-width: 0; }
label, .field { display: grid; gap: 7px; }
label, .field span {
  color: var(--ink);
  font: 700 13px/1.4 'Mulish', Verdana, sans-serif;
}
input, textarea, select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 11px;
  font: 400 17px/1.45 'Crimson Text', Georgia, serif;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
textarea { min-height: 140px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(56,92,173,.14);
}
input[type='checkbox'] { width: 18px; min-height: 18px; accent-color: var(--blue); }
.checkline { display: flex; align-items: flex-start; gap: 10px; }
.audience-picker {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 17px;
}
.audience-picker > * { min-width: 0; }
.audience-empty { margin: 0; }


button, .button {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 18px;
  color: var(--on-primary);
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 11px;
  cursor: pointer;
  font: 800 11px/1.2 'Mulish', Verdana, sans-serif;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  touch-action: manipulation;
}
button:hover, .button:hover { color: var(--on-primary); background: var(--blue-hover); border-color: var(--blue-hover); box-shadow: 0 10px 24px rgba(56,92,173,.22); transform: translateY(-1px); }
button:focus-visible, .button:focus-visible, .nav-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.button.secondary { color: var(--link); background: var(--surface); border-color: var(--line-strong); }
.button.secondary:hover { color: var(--link); background: var(--nav-hover); }
.button.danger { color: var(--on-primary); background: var(--danger); border-color: var(--danger); }
.delete-form { display: inline-flex; }
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  color: var(--badge-fg);
  background: var(--badge-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 800 10px/1 'Mulish', Verdana, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pill.success { color: var(--success); background: var(--success-bg); border-color: var(--success-line); }
.pill.danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.run-details { display: grid; gap: 12px; }
.run-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--ink);
  font: 700 13px/1.4 'Mulish', Verdana, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.run-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.run-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.run-stat dt {
  margin: 0;
  color: var(--muted);
  font: 800 10px/1.2 'Mulish', Verdana, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.run-stat dd {
  margin: 0;
  color: var(--heading);
  font: 800 1.4rem/1.1 'Mulish', Verdana, sans-serif;
  letter-spacing: -.03em;
}
.run-stat .hint {
  margin: 0;
  color: var(--muted);
  font: 400 14px/1.35 'Crimson Text', Georgia, serif;
}
.notice { margin-bottom: 18px; padding: 15px 18px; color: var(--success); background: var(--success-bg); box-shadow: none; }
.notice.info { color: var(--badge-fg); background: var(--badge-bg); }
.notice.danger, .danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.link-box { display: block; padding: 13px 15px; overflow-wrap: anywhere; box-shadow: none; }
.preview-frame { width: 100%; min-height: 560px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }

@media (max-width: 820px) {
  .site-nav { padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); }
  .site-nav-inner { grid-template-columns: minmax(0, 1fr) auto auto; }
  .mobile-nav-toggle { display: inline-flex; width: 44px; min-height: 44px; padding: 9px; }
  .nav-links-container { display: none; width: 100%; grid-column: 1 / -1; grid-row: 2; padding-top: 10px; border-top: 1px solid var(--line); }
  .nav-links-container.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-link { text-align: center; }
  .nav-signout, .nav-link.nav-signout-btn { width: 100%; }
  .grid.two { grid-template-columns: 1fr; }
  .page { width: min(100% - 24px, 1180px); padding: 24px env(safe-area-inset-right) calc(48px + env(safe-area-inset-bottom)) env(safe-area-inset-left); }
  .topbar { border-radius: 18px; }
}

/* Cross-document page-to-page transitions (Chromium; no-op elsewhere). */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: 200ms cubic-bezier(0.16, 1, 0.3, 1) both page-fade-out;
}

::view-transition-new(root) {
  animation: 320ms cubic-bezier(0.16, 1, 0.3, 1) both page-fade-in-up;
}

@keyframes page-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

@keyframes page-fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
  .brand-full { display: none; }
  .brand-short { display: inline; }
  .nav-links-container.open { grid-template-columns: 1fr; }
  .user-search { grid-template-columns: 1fr; }
  .card { padding: 19px; }
  .checkline { width: auto; }
  h1 { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .01ms !important; }
}

/* Board minutes: a rendered document page, so the body column is narrower
   than the hub grid and set in the brand serif rather than the UI font. */
.minutes-doc {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.minutes-header { padding-bottom: 18px; margin-bottom: 26px; border-bottom: 3px solid var(--blue); }
.minutes-eyebrow {
  margin: 0 0 8px;
  color: var(--gold);
  font: 800 12px/1.3 'Mulish', Verdana, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.minutes-title {
  margin: 0;
  color: var(--heading);
  font: 800 clamp(1.6rem, 4vw, 2.2rem)/1.2 'Mulish', Verdana, sans-serif;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.minutes-date { margin: 10px 0 0; color: var(--muted); font: 400 15px/1.4 'Crimson Text', Georgia, 'Times New Roman', serif; }
.minutes-body p {
  margin: 0 0 1em;
  color: var(--text);
  font: 400 17px/1.7 'Crimson Text', Georgia, 'Times New Roman', serif;
  overflow-wrap: anywhere;
}
.minutes-body p:last-child { margin-bottom: 0; }
.minutes-raw { width: min(760px, 100%); margin: 20px auto 0; text-align: right; }

/* YCP Copilot overlay. The launcher floats above the page on every surface
   the assistant serves; the drawer slides in beside it. Both sit above the
   sticky nav (z-index 100) so the drawer is never clipped by it. */
.copilot-launcher {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 120;
  padding: 13px 24px;
  font: 800 15px/1 'Mulish', system-ui, sans-serif;
  color: var(--on-primary);
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 999px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.copilot-launcher:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.copilot-launcher:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.copilot-launcher:active { transform: scale(.97); }

.copilot-drawer {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 64px);
  z-index: 121;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(420px, calc(100vw - 32px));
  /* The drawer is a viewport-bounded column, never a content-sized one:
     height (not just max-height) is what keeps the transcript's flex share
     alive on a short screen — a max-height-only drawer collapses to its
     content and the transcript's share goes to zero, which is exactly the
     short-viewport bug. dvh tracks the visual viewport (keyboard open);
     the vh fallback covers older engines. The offsets are the launcher row
     (64px) plus breathing room top and bottom. */
  height: min(calc(100vh - 128px), 720px);
  height: min(calc(100dvh - 128px), 720px);
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(14px) scale(.98);
  pointer-events: none;
  transform-origin: bottom right;
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1), transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* The script toggles the `hidden` attribute; without this the flex display
   above would keep the drawer visible. */
.copilot-drawer[hidden] { display: none; }
.copilot-drawer.is-open { opacity: 1; transform: none; pointer-events: auto; }

.copilot-drawer-head { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; }
.copilot-drawer-head h2 { margin: 0; font-size: 19px; }
.copilot-close {
  padding: 2px 10px;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.copilot-close:hover { color: var(--ink); background: var(--nav-hover); }
.copilot-blurb { margin: 0; font-size: 14px; }

.copilot-transcript {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  /* Basis 0, not auto: with an auto basis a long transcript's content height
     claims the drawer's free space before the composer gets any, starving
     the form on a short viewport until the submit button overflows the
     drawer. Basis 0 makes the transcript take exactly what is LEFT after
     the header, blurb, and composer are laid out, and scroll inside it. */
  flex: 1 1 0;
  min-height: 0;
}
.copilot-message {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--nav-hover);
  border-radius: 12px;
  animation: fade-in-up 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.copilot-message .meta-label { margin: 0; }
/* Model output arrives as a text node with real newlines in it: the
   whitespace is the only structure a plain-text draft has. */
.copilot-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.copilot-typing-dots { display: flex; gap: 4px; font-size: 22px; line-height: 1; color: var(--blue); }
.copilot-typing-dots span { animation: copilot-dot 900ms ease-in-out infinite; }
.copilot-typing-dots span:nth-child(2) { animation-delay: 150ms; }
.copilot-typing-dots span:nth-child(3) { animation-delay: 300ms; }
@keyframes copilot-dot {
  0%, 70%, 100% { opacity: .4; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .copilot-typing-dots span { animation: none; }
}

/* Model and reasoning render as small chips beside the send button (drawer)
   or above the actions row (inline revise pages). */
.copilot-pickers { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.copilot-pickers[hidden] { display: none; }
.copilot-chip { position: relative; display: inline-flex; align-items: center; gap: 4px; margin: 0; min-width: 0; font: 700 10px/1 'Mulish', system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.copilot-chip::before { content: attr(data-cue); }
.copilot-chip select {
  width: auto;
  min-height: 28px;
  padding: 3px 24px 3px 10px;
  color: var(--ink);
  background-color: var(--nav-hover);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: 700 11px/1.2 'Mulish', system-ui, sans-serif;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  field-sizing: content;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
}
.copilot-chip select:hover { border-color: var(--blue); }

.copilot-composer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.copilot-composer-bar .copilot-pickers { flex: 1 1 auto; min-width: 0; }
/* Icon-only send button, shared by the drawer and the inline revise pages.
   40px keeps a comfortable tap target without growing the chips row. */
.copilot-send { flex: 0 0 auto; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
.copilot-send svg { display: block; width: 18px; height: 18px; pointer-events: none; }
.copilot-composer-bar .copilot-send { margin-left: auto; }

.copilot-form { display: flex; flex-direction: column; flex-shrink: 1; min-height: 0; gap: 10px; }
.copilot-field { display: flex; flex-direction: column; gap: 6px; font: 700 13px/1.4 'Mulish', system-ui, sans-serif; color: var(--muted); }
/* The page-wide textarea floor (140px) is a form-field affordance; inside the
   drawer it would crowd the transcript to zero on a short viewport, so the
   drawer's box carries a smaller floor instead. */
.copilot-form textarea { width: 100%; resize: vertical; min-height: 96px; }
@media (max-height: 640px) {
  /* A short drawer (landscape phone, keyboard-reduced height) tightens its
     gutters and clamps the blurb to two lines so the transcript keeps a
     usable share; the base height rule already bounds the drawer to the
     viewport. */
  .copilot-drawer { gap: 10px; padding: 14px; height: min(calc(100vh - 120px), 720px); height: min(calc(100dvh - 120px), 720px); }
  .copilot-blurb {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .copilot-form textarea { min-height: 72px; height: 72px; }
}

@media (max-width: 560px) {
  /* A narrow drawer spans the viewport gutters. Its height bound is the same
     viewport rule with the tighter offsets. */
  .copilot-drawer { right: 8px; left: 8px; width: auto; height: min(calc(100vh - 120px), 720px); height: min(calc(100dvh - 120px), 720px); }
}

@media (max-height: 480px) {
  /* The shortest drawers (844x390-class landscape, keyboard-reduced ~280px):
     there is no room for instructional copy, so the blurb is dropped — the
     heading still names the drawer — the composer drops to two rows, and
     every remaining pixel goes to the transcript and the submit button. */
  .copilot-blurb { display: none; }
  /* Keep wrapped picker rows reachable when landscape keyboard shrinks height. */
  .copilot-drawer { overflow-y: auto; }
  .copilot-form textarea { min-height: 48px; height: 48px; }
}

@media (max-height: 300px) {
  /* Keyboard-reduced heights (~280px): the 120px launcher offset would leave
     a 160px drawer with no room for a transcript at all, so the drawer takes
     the full viewport height minus small gutters — the launcher sits at the
     drawer's edge and stays visible above it — and the composer drops to
     compact affordances. The label keeps wrapping the textarea so the
     association survives its hidden text. */
  .copilot-drawer { top: 12px; bottom: 8px; height: auto; padding: 10px; gap: 8px; }
  .copilot-form { gap: 6px; }
  .copilot-drawer .copilot-pickers { gap: 4px; }
  .copilot-field { font-size: 0; gap: 0; }
  .copilot-form textarea { height: 36px; min-height: 36px; padding: 6px 10px; }
  .copilot-form .copilot-send { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
}