/* ECB, TX LLC — site.css (the one shared stylesheet) */

:root {
  --paper: #F3F4F1;
  --ink: #101820;
  --ink-2: #45505A;
  --rule: #D6DAD5;
  --accent: #0B5159;
  --accent-soft: #DCEDE8;
  --brass: #9A5A24;
  --header-bg: rgba(243, 244, 241, 0.86);
  --hero-scrim: rgba(243, 244, 241, 0.78);
  --font-head: "Archivo", "Arial Black", Arial, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F1417;
    --ink: #E9ECEA;
    --ink-2: #A7B0B5;
    --rule: #26303A;
    --accent: #78BFAD;
    --accent-soft: #15353A;
    --brass: #C1793F;
    --header-bg: rgba(15, 20, 23, 0.82);
    --hero-scrim: rgba(15, 20, 23, 0.80);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: break-word;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

h3 {
  font-size: 1.15rem;
}

p, li {
  max-width: 68ch;
}

p {
  margin-top: 0.75rem;
}

.muted {
  color: var(--ink-2);
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 100;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  padding: 10px 16px;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* Header — sticky, blurred; bottom rule appears after 24px of scroll
   (class toggled by js/site.js) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--rule);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brand { gap: 0; align-items: baseline; }
.brand-mark { display: block; line-height: 0; }
.brand-mark img {
  display: block;
  height: 48px;
  width: auto;
}
.brand-word {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--brass);
}
.brand-comma { font-weight: 400; color: var(--ink-2); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
}

.site-nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.site-nav .nav-external {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  border: 1px solid var(--rule);
  padding: 6px 12px;
}

.site-nav .nav-external:hover {
  border-color: var(--accent);
  text-decoration: none;
}

@media (max-width: 479px) {
  .site-nav {
    gap: 0 18px;
  }

  .site-nav .nav-external {
    margin-left: 0;
  }
}

/* Scroll reveals — gated on html.js (inline script at top of body); see
   js/site.js. Without JS, or with reduced motion, everything is visible. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 350ms ease, transform 350ms ease;
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Sections */
main {
  display: block;
}

.section {
  margin-top: 96px;
}

main > .section:first-child {
  margin-top: 0;
}

section[id],
#main {
  scroll-margin-top: 88px;
}

.section > .section-head {
  margin-bottom: 28px;
}

.section p + p {
  margin-top: 1rem;
}

/* Hero — live teal field over a static poster, calm-zone scrim behind the
   copy. Poster is always present: it IS the final frame on
   reduced-motion / no-WebGL / saveData; on capable desktops the canvas
   fades in over it after the field's first drawn frame (js/field.js). */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72vh;
  padding: 88px 0;
  overflow: hidden;
}

.hero-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-poster {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(221, 237, 233, 0.9), rgba(221, 237, 233, 0) 60%),
    radial-gradient(90% 70% at 88% 92%, rgba(11, 81, 89, 0.28), rgba(11, 81, 89, 0) 58%),
    radial-gradient(70% 60% at 78% 15%, rgba(10, 74, 67, 0.14), rgba(10, 74, 67, 0) 60%),
    var(--paper);
}

@media (prefers-color-scheme: dark) {
  .hero-poster {
    background:
      radial-gradient(120% 90% at 12% 8%, rgba(22, 59, 55, 0.9), rgba(22, 59, 55, 0) 60%),
      radial-gradient(90% 70% at 88% 92%, rgba(120, 191, 173, 0.2), rgba(120, 191, 173, 0) 58%),
      radial-gradient(70% 60% at 78% 15%, rgba(158, 220, 209, 0.1), rgba(158, 220, 209, 0) 60%),
      var(--paper);
  }
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Permanent base state, not a toggleable class: hidden until
     js/field.js's one-shot inline-style write reveals it after the first
     drawn frame. */
  opacity: 0;
}

/* Calm-zone scrim: keeps hero text AA-contrast over the live field. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 55% at 38% 48%, var(--hero-scrim), rgba(0, 0, 0, 0) 70%);
}

.hero-copy {
  position: relative;
  max-width: 640px;
}

.hero .eyebrow {
  display: block;
  margin-bottom: 20px;
}

.hero h1 {
  max-width: 18ch;
}

.hero .lede {
  margin-top: 24px;
  font-size: 1.25rem;
  line-height: 1.55;
  max-width: 58ch;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

.hero-byline {
  margin-top: 18px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

@media (max-width: 479px) {
  .hero .cta-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero .cta-row .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid var(--accent);
}

.btn-primary {
  background: var(--accent);
  color: var(--paper);
}

.btn-primary:hover {
  text-decoration: none;
  filter: brightness(1.08);
}

.btn-secondary {
  color: var(--accent);
  background: transparent;
}

.btn-secondary:hover {
  text-decoration: none;
  background: var(--accent-soft);
}

/* Proof strip — four count-up figures on a surface band */
.proof-strip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--accent-soft);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-top: 44px;
  padding-bottom: 44px;
}

.proof-num {
  margin-top: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.proof-label {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Who this is for */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.fit-grid ul {
  list-style: none;
}

.fit-grid li {
  padding: 14px 0 14px 20px;
  border-top: 1px solid var(--rule);
}

.fit-grid li:last-child {
  border-bottom: 1px solid var(--rule);
}

.fit-label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
  margin-bottom: 12px;
}

.ai-grid {
    margin-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.ai-card {
  border: 1px solid var(--rule);
  padding: 1.25rem;
}

@media (min-width: 760px) {
  .ai-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* How it works — drawn connector behind the stage numbers */
.stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.stages-line {
  position: absolute;
  z-index: 0;
  color: var(--brass);
  pointer-events: none;
}

.stages-line path {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.stages-line-h {
  top: 45px;
  left: 0;
  width: 100%;
  height: 2px;
}

.stages-line-v {
  display: none;
}

html.js .stages-line path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1100ms ease;
}

html.js .stages.is-drawn .stages-line path {
  stroke-dashoffset: 0;
}

.stage {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}

.stage-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--brass);
  /* Knock the connector line out behind the digits. */
  display: inline-block;
  background: var(--paper);
  padding-right: 12px;
}

.stage h3 {
  margin-top: 16px;
  font-size: 1.25rem;
}

.stage p {
  margin-top: 10px;
  color: var(--ink-2);
}

/* Proof cases — text + line-icon diagram */
.case {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px 40px;
  align-items: center;
}

.case-body {
  grid-column: 1;
  grid-row: 1;
}

.case-diagram {
  grid-column: 2;
  grid-row: 1;
  width: 220px;
  max-width: 100%;
  height: auto;
  color: var(--ink-2);
}

.case + .case {
  margin-top: 40px;
}

.case h3 {
  font-size: 1.25rem;
}

.case p {
  margin-top: 8px;
  color: var(--ink-2);
}

/* Products — screenshot gallery */
.products-intro {
  margin-bottom: 32px;
}

.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.product {
  border: 1px solid var(--rule);
  background: var(--paper);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.product:hover {
  transform: translateY(-4px);
  border-color: var(--ink-2);
  box-shadow: 0 6px 20px rgba(16, 24, 32, 0.10);
}

.product-frame {
  border-bottom: 1px solid var(--rule);
}

.frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-bottom: 1px solid var(--rule);
}

.frame-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rule);
}

.frame-domain {
  flex: 1;
  min-width: 0;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.aeo-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--paper);
}

.aeo-panel p {
  margin: 0;
}

.aeo-kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.aeo-num {
  font-family: var(--font-head);
  font-size: clamp(3.5rem, 9vw, 5.5rem);
  line-height: 1;
  font-weight: 800;
  color: var(--accent);
}

.aeo-label {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
}

.aeo-engines {
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.aeo-muted {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  opacity: 0.85;
}

.aeo-muted-head {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.aeo-muted ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 0.875rem;
}

.aeo-muted li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 14px;
  align-items: baseline;
  padding: 3px 0;
}

.aeo-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.aeo-n {
  min-width: 8ch;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.product-body {
  padding: 20px 24px 24px;
}

.products .product:nth-child(5) {
  grid-column: 1 / -1;
}

.product h3 {
  font-size: 1.2rem;
}

.product h3 a {
  color: var(--ink);
  text-decoration: none;
}

.product h3 a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.product .product-url {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  margin-top: 6px;
}

.product p {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 0.9687rem;
}

/* FAQ */
.faq-item {
  border-top: 1px solid var(--rule);
  padding: 24px 0;
}

.faq-item:last-child {
  border-bottom: 1px solid var(--rule);
}

.faq-item h3 {
  font-size: 1.15rem;
}

.faq-item p {
  margin-top: 8px;
  color: var(--ink-2);
}

/* Contact */
.contact-box {
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  background: var(--accent-soft);
  padding: 40px;
}

.contact-box .contact-lines {
  margin-top: 16px;
}

.contact-lines a {
  font-family: var(--font-mono);
  font-size: 1.05rem;
}

/* Footer */
.site-footer {
  margin-top: 120px;
  border-top: 1px solid var(--rule);
  padding: 36px 0 48px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: baseline;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.footer-inner .sep {
  color: var(--rule);
}

.footer-inner a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
}

.footer-inner a:hover {
  color: var(--accent);
}

@media (max-width: 479px) {
  .footer-inner {
    gap: 0 16px;
    align-items: center;
  }

  .footer-inner .sep {
    display: none;
  }
}

/* Legal pages (privacy, terms) */
.legal-head {
  padding: 72px 0 0;
}

.legal-head h1 {
  max-width: 24ch;
}

.last-updated {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--ink-2);
  margin-top: 16px;
}

.legal-body {
  margin-top: 48px;
}

.legal-body h2 {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 1.375rem;
}

.legal-body h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-body ul, .legal-body ol {
  margin: 12px 0 0 22px;
}

.legal-body li {
  margin-top: 6px;
  color: var(--ink-2);
}

.legal-body li strong {
  color: var(--ink);
}

.legal-note {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  padding: 20px 24px;
  margin-top: 32px;
  max-width: 68ch;
}

/* Page hero for secondary pages */
.page-head {
  padding: 72px 0 0;
}

.page-head h1 {
  max-width: 24ch;
}

.page-head .lede {
  margin-top: 20px;
  font-size: 1.1875rem;
  color: var(--ink-2);
  max-width: 62ch;
}

/* Product detail sections (work.html) */
.work-item {
  border-top: 1px solid var(--rule);
  padding-top: 32px;
}

.work-item + .work-item {
  margin-top: 56px;
}

.work-item h2 {
  font-size: 1.5rem;
}

.work-item .product-url {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  margin-top: 8px;
  display: inline-block;
}

.work-item dl {
  margin-top: 20px;
}

.work-item dt {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 18px;
}

.work-item dd {
  margin-top: 6px;
}

/* Company page */
.entity-list {
  list-style: none;
  margin-top: 8px;
}

.entity-list li {
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}

.entity-list li:last-child {
  border-bottom: 1px solid var(--rule);
}

.entity-list .product-url {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--ink-2);
}

@media (max-width: 860px) {
  .stages {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  /* Connector runs vertically down a left gutter beside the text. */
  .stages-line-h {
    display: none;
  }

  .stages-line-v {
    display: block;
    top: 45px;
    bottom: 0;
    left: 30px;
    width: 2px;
    height: auto;
  }

  .stage {
    padding-left: 72px;
  }

  .stage-num {
    margin-left: -72px;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 1rem;
  }

  .section {
    margin-top: 56px;
  }

  .hero {
    /* content-sized on mobile */
    min-height: 0;
    padding-top: 56px;
    padding-bottom: 64px;
  }

  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }

  .fit-grid,
  .products {
    grid-template-columns: 1fr;
  }

  .case {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .case-body {
    grid-column: 1;
    grid-row: 1;
  }

  .case-diagram {
    grid-column: 1;
    grid-row: 2;
  }

  .contact-box {
    padding: 28px;
  }

  .site-footer {
    margin-top: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Static full connector line, no draw animation. */
  html.js .stages-line path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* Phil — voice & chat assistant widget; DOM built by js/curator.js.
   --surface: raised panel/bubble color for both color schemes. */
:root { --surface: #FFFFFF; }

@media (prefers-color-scheme: dark) {
  :root { --surface: #182027; }
}

.phil-launchers { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; gap: 12px; }

.phil-launch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: var(--accent); color: var(--paper); cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 24, 32, 0.22);
}

.phil-launch:hover { filter: brightness(1.08); }
.phil-launch svg { display: block; width: 22px; height: 22px; }

.phil-panel {
  position: fixed; right: 16px; bottom: 80px; z-index: 81;
  display: flex; flex-direction: column;
  width: min(360px, calc(100vw - 32px)); max-height: 70vh;
  background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 0 12px 32px rgba(16, 24, 32, 0.18);
}

.phil-panel[hidden], .phil-panel [hidden] { display: none !important; }

.phil-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.phil-mark { flex: none; width: 28px; height: 28px; background: url("/images/ecb-mono-icon.svg") no-repeat center / contain; border-radius: 6px; }
.phil-headtext { flex: 1; min-width: 0; }
.phil-title { font-family: var(--font-head); font-size: 1.05rem; line-height: 1.2; }
.phil-sub { margin-top: 2px; font-size: 0.75rem; color: var(--ink-2); }

.phil-close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0;
  background: transparent; color: var(--ink-2); cursor: pointer;
}

.phil-close:hover { color: var(--ink); }
.phil-close svg { width: 18px; height: 18px; }

.phil-voice {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--rule); background: var(--accent-soft);
  font-size: 0.8125rem;
}

.phil-voice-status { flex: 1; min-width: 0; }
.phil-timer { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.phil-end {
  padding: 6px 12px; border: 1px solid var(--brass); background: transparent;
  color: var(--brass); font-size: 0.8125rem; cursor: pointer;
}

.phil-log {
  flex: 1; min-height: 120px; padding: 14px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}

.phil-empty p { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
.phil-sugs { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.phil-sug {
  padding: 9px 12px; border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink); font-size: 0.875rem; text-align: left; cursor: pointer;
}

.phil-sug:hover { border-color: var(--accent); color: var(--accent); }

.phil-msg {
  max-width: 85%; padding: 9px 12px; font-size: 0.9rem; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: break-word;
}

.phil-msg-user { align-self: flex-end; background: var(--accent-soft); }
.phil-msg-bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--rule); }
.phil-msg-err { border-color: var(--brass); }

.phil-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.phil-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); animation: phil-dot 1.2s infinite; }
.phil-typing span:nth-child(2) { animation-delay: 0.2s; }
.phil-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes phil-dot {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

.phil-cap-form {
  display: flex; gap: 8px; padding: 8px;
  border: 1px solid var(--rule); background: var(--surface);
}

.phil-cap-input {
  flex: 1; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 0.875rem;
}

.phil-cap-ok { font-size: 0.875rem; color: var(--accent); }

.phil-foot {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px 12px; border-top: 1px solid var(--rule);
}

.phil-foot-row { display: flex; align-items: flex-end; gap: 8px; }

.phil-input {
  flex: 1; min-width: 0; max-height: 116px; padding: 9px 10px;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 0.9rem; line-height: 1.5; resize: none;
}

.phil-send {
  padding: 9px 14px; border: 1px solid var(--accent); background: var(--accent);
  color: var(--paper); font-weight: 600; font-size: 0.875rem; cursor: pointer;
}

.phil-send:disabled, .phil-callbtn:disabled { opacity: 0.5; cursor: default; }

.phil-callbtn {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  font-weight: 600; font-size: 0.875rem; cursor: pointer;
}

.phil-callbtn svg { width: 16px; height: 16px; }

#phil-audio { display: none; }

/* Under 480px only the chat launcher shows, pinned to the bottom safe area.
   Voice stays reachable from the panel's "Call Phil" button. The body gets
   bottom padding so the footer can scroll clear of the launcher, and the
   panel opens as a full-height sheet. */
@media (max-width: 479px) {
  .phil-launchers { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); right: 12px; }
  .phil-launch[data-phil-launch="call"] { display: none; }
  body { padding-bottom: 72px; }

  .phil-panel {
    inset: 0; width: 100%; height: 100%; max-height: none;
    border-left: 0; border-right: 0;
  }
}