/*
 * /copilot on the glass shell (Lane F of the glass weave, 2026-09-25).
 *
 * Scoped to `.copilot-glass` — the class `CopilotScreenRefactored.tsx` puts on its root, and (lane CA,
 * 2026-09-26) the brand's own app dock in its customer copy (`CopilotDock.tsx`) — so the pitch dock,
 * the center and every other mount of the shared conversation components render exactly as before.
 * Colours come from the --md-* contract (glass-cleaned, light + dark); no hex here.
 */

/* ── the answer blocks wear the glass values too (lane CA, 2026-09-26) ──
 * The blocks read the app-wide --copilot-* tokens (index.css), which glass-cleaned never remapped:
 * an opaque card (light) / a solid 8% grey slab (dark) inside the glass answer card. Here they take
 * the glass-cleaned ladder from macro-themes.css, written as bare HSL because the blocks read them
 * as hsl(var(--copilot-*)). Accent is left alone so the brand portal's own accent still applies.
 * `.dark` also sits on this same .md-root, so the dark rule carries three classes to win. */
.md-root.copilot-glass {
  --copilot-surface: 0 0% 100% / 0.8;
  --copilot-surface-sunken: 240 20% 10% / 0.04;
  --copilot-border: 240 20% 10% / 0.12;
  --copilot-border-emphasis: 240 20% 10% / 0.22;
  --copilot-text-primary: 220 15% 10%;
  --copilot-text-secondary: 220 12% 32%;
  --copilot-text-muted: 220 10% 48%;
  --copilot-accent-soft: 265 70% 52% / 0.12;
}
.md-root.copilot-glass.dark {
  --copilot-surface: 0 0% 100% / 0.05;
  --copilot-surface-sunken: 0 0% 100% / 0.03;
  --copilot-border: 0 0% 100% / 0.1;
  --copilot-border-emphasis: 0 0% 100% / 0.2;
  --copilot-text-primary: 210 40% 98%;
  --copilot-text-secondary: 0 0% 100% / 0.66;
  --copilot-text-muted: 0 0% 100% / 0.45;
  --copilot-accent-soft: 265 89% 66% / 0.18;
}
.copilot-glass [data-copilot-agentic-block] {
  border-radius: var(--md-radius);
  -webkit-backdrop-filter: blur(var(--md-blur));
  backdrop-filter: blur(var(--md-blur));
}

/* ── the docked Copilot beside an app page (lane CA): the same glass, sized for a panel ── */
.copilot-dock-glass {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
}
.copilot-dock-glass .copilot-canvas-stage {
  margin: 12px 12px 20px;
  max-width: none;
}

/* ── the page canvas: the lab's soft glass wash instead of the old purple radial ── */
.copilot-glass .copilot-canvas-page {
  background: transparent;
}
.md-root.copilot-glass {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, var(--md-accent-soft), transparent 60%),
    var(--md-bg);
}

/* ── the slim page header: the same glass bar as the composer dock ── */
.copilot-glass .copilot-page-header {
  background: var(--md-surface);
  border-bottom-color: var(--md-border);
  -webkit-backdrop-filter: blur(var(--md-blur));
  backdrop-filter: blur(var(--md-blur));
}

/* ── the answer: one glass panel at a readable measure, like the walkthrough's conversation card ── */
.copilot-glass .copilot-canvas-stage {
  max-width: 56rem;
  margin: 24px auto 32px;
  background: var(--md-surface);
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow);
  -webkit-backdrop-filter: blur(var(--md-blur));
  backdrop-filter: blur(var(--md-blur));
  min-width: 0;
  /* copilot-ui.css zeroes the stage's bottom padding for the old bare canvas; a card needs it. */
  padding-bottom: 28px;
}
@media (max-width: 767px) {
  .copilot-glass .copilot-canvas-stage {
    margin: 12px 12px 24px;
    padding-bottom: 20px;
  }
}
.copilot-glass .copilot-canvas-command-head-kicker {
  letter-spacing: 0.16em;
  color: var(--md-text-muted);
}

/* ── the thread rail: the copilot's own left rail (walkthrough s7 `.crail`) ── */
.copilot-glass .copilot-rail {
  /* The glass surface laid over the solid canvas: opaque, so the thread never ghosts through it. */
  background: linear-gradient(var(--md-surface-3), var(--md-surface-3)), var(--md-bg);
  border-right: 1px solid var(--md-border);
  -webkit-backdrop-filter: blur(var(--md-blur));
  backdrop-filter: blur(var(--md-blur));
}
.copilot-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 12px 10px 16px;
}
.copilot-rail-eyebrow {
  white-space: nowrap;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--md-text-muted);
}
.copilot-rail-new {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: var(--md-radius-sm);
  border: 1px solid var(--md-border-strong);
  background: var(--md-surface);
  color: var(--md-text);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.copilot-rail-new:hover {
  background: var(--md-accent-soft);
}
.copilot-rail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--md-radius-sm);
  color: var(--md-text-muted);
  cursor: pointer;
  flex: none;
}
.copilot-rail-icon:hover {
  background: var(--md-surface-2);
  color: var(--md-text);
}
.copilot-rail-empty {
  padding: 8px 8px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--md-text-muted);
}
.copilot-rail-item {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  border-radius: var(--md-radius-sm);
  position: relative;
  transition: background-color 120ms ease;
}
.copilot-rail-item:hover {
  background: var(--md-surface-2);
}
.copilot-rail-item.is-active {
  background: var(--md-accent-soft);
}
.copilot-rail-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--md-accent);
}
.copilot-rail-item-main {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 8px 4px 8px 12px;
  text-align: left;
  cursor: pointer;
}
.copilot-rail-item-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--md-text);
}
.copilot-rail-item-date {
  font-size: 11px;
  color: var(--md-text-muted);
}
.copilot-rail-item-menu {
  opacity: 0.55;
  margin-right: 4px;
}
.copilot-rail-item:hover .copilot-rail-item-menu,
.copilot-rail-item-menu:focus-visible {
  opacity: 1;
}
.copilot-glass .copilot-canvas-command-head {
  border-left-color: var(--md-accent);
}
.copilot-glass .copilot-canvas-command-head-title {
  font-family: var(--gs-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--md-text);
}

/* ── the composer dock: a glass bar, not a hard white slab ── */
.copilot-glass .copilot-agentic-ui .copilot-agentic-composer-dock {
  background: var(--md-surface);
  border-top: 1px solid var(--md-border);
  -webkit-backdrop-filter: blur(var(--md-blur));
  backdrop-filter: blur(var(--md-blur));
}

/* ── the opener ── */
.copilot-opening {
  max-width: 56rem;
  margin: 0 auto;
  padding: 40px 16px 24px;
  min-width: 0;
}
@media (min-width: 768px) {
  .copilot-opening {
    padding: 64px 32px 32px;
  }
}
.copilot-opening-card .gs-headline {
  max-width: 26ch;
}
/* The follow-up asks are whole questions: let them wrap on a phone instead of pushing the page wide. */
.copilot-opening-card .gs-btn {
  white-space: normal;
  text-align: left;
  line-height: 1.35;
  max-width: 100%;
}

/* The mover's line: its share of the conversation by month, the latest month marked. */
.copilot-opening-trend {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 0;
  max-width: 100%;
}
.copilot-opening-trend svg {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: visible;
}
.copilot-opening-trend-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--md-text-muted);
  font-variant-numeric: tabular-nums;
}
@keyframes copilot-trend-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes copilot-trend-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.copilot-opening-trend-line {
  stroke-dasharray: 1;
  animation: copilot-trend-draw 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms both;
}
.copilot-opening-trend-area,
.copilot-opening-trend-dot {
  animation: copilot-trend-fade 400ms ease-out 620ms both;
}
/* The plain question sits in the optical middle of the empty page, like a composer's own heading. */
.copilot-opening-plain {
  text-align: center;
  padding-top: clamp(40px, 20vh, 220px);
}
.copilot-opening-question {
  font-family: var(--gs-serif);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--md-text);
  text-wrap: balance;
}
.copilot-opening-question em {
  font-style: normal;
  color: var(--md-accent-text, var(--md-accent));
}
.copilot-opening-hint {
  margin-top: 10px;
  font-size: 14px;
  color: var(--md-text-secondary);
}
.copilot-opening-wait {
  min-height: 180px;
}

/* The opener lands (opacity + transform only — no layout shift); still for reduced motion. */
@keyframes copilot-opening-land {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.copilot-opening-land {
  animation: copilot-opening-land 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .copilot-opening-land,
  .copilot-opening-trend-line,
  .copilot-opening-trend-area,
  .copilot-opening-trend-dot {
    animation: none;
  }
}