/* Noah Live in the Noah Predict homepage design.
   The Live app ships as a compiled bundle, so this sheet only re-skins it: it loads
   after the bundle's CSS and moves colour, type and chrome onto the cusp palette
   (teal bar, night rail, lime action, pink full stop). Layout and behaviour stay
   with the bundle and noah-v4-polish.css. */

@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

body.pp-product-live {
  --lime: #88FF82;
  --lime-deep: #6FF268;
  --teal: #017288;
  --teal-deep: #015F71;
  --night: #022F38;
  --night-text: #CFE3E7;
  --pink: #FF7EC4;
  --stone: #E5E5E5;
  --stone-line: #D4D4D4;
  --paper: #FAFAFA;
  --ink: #141414;
  --mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --background: #FAFAFA;
  --card: #FAFAFA;
  --foreground: #141414;
  --primary: #141414;
  --primary-foreground: #88FF82;
  --muted: #EFEFEF;
  --muted-foreground: #6B6B6B;
  --accent: #E5E5E5;
  --border: #D4D4D4;
  --input: #D4D4D4;
  --ring: #017288;
  --noah-ink: #141414;
  --noah-fg-soft: #3A3A3A;
  --noah-fg-mute: #6B6B6B;
  --noah-fg-faint: #8A8A8A;
  --noah-rule: #D4D4D4;
  --noah-rule-soft: #E5E5E5;
  --noah-rail: #022F38;
  --noah-accent: #017288;
  --pp-ink: #141414;
  --pp-muted: #6B6B6B;
  --pp-rule: #D4D4D4;
  --pp-paper: #FAFAFA;
  --pp-rail: #E5E5E5;
  --pp-orange: #FF7EC4;
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: -0.01em;
  background: #FAFAFA;
}

body.pp-product-live,
body.pp-product-live .nh-pane,
body.pp-product-live .nh-thread-wrap,
body.pp-product-live .aui-root.aui-thread-root { background: #FAFAFA; }
body.pp-product-live ::selection { background: #88FF82; color: #141414; }

/* ---------- Top bar: teal, paper wordmark, pink full stop ---------- */
body.pp-product-live .pp-masthead {
  background: #017288 !important;
  color: #FAFAFA !important;
  border-bottom: 0 !important;
}
body.pp-product-live .predict-wordmark {
  color: #FAFAFA !important;
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
}
body.pp-product-live .predict-wordmark__dot { color: #FF7EC4; }
body.pp-product-live .pp-context-label {
  color: #88FF82;
  border-left-color: rgba(250,250,250,.3);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}
body.pp-product-live .pp-icon-button {
  color: #FAFAFA !important;
  background: rgba(250,250,250,.14) !important;
  border: 0 !important;
  border-radius: 999px !important;
}
body.pp-product-live .pp-icon-button:hover { background: rgba(250,250,250,.28) !important; color: #FAFAFA !important; }

/* Burger and menu: identical to the homepage. Two bars top right (a lime X when open),
   a night panel from the left, mono numbered-style items, lime for the current page. */
body.pp-product-live .pp-menu-button {
  position: relative;
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  background: none !important;
  border-radius: 0 !important;
  align-items: flex-end;
  gap: 8px;
  z-index: 1300;
}
body.pp-product-live .pp-menu-button span {
  display: block;
  width: 26px !important; height: 2px !important;
  border-radius: 0;
  background: #FAFAFA !important;
  transition: transform .25s cubic-bezier(.2,.7,.1,1), width .2s;
}
body.pp-product-live .pp-menu-button span:nth-child(2) { width: 17px !important; }
body.pp-product-live .pp-menu-button span:nth-child(3) { display: none; }
body.pp-product-live .pp-menu-button:hover span:nth-child(2) { width: 26px !important; }
body.pp-product-live .pp-menu-button:hover { background: none !important; }
body.pp-product-live .pp-menu-button[aria-expanded="true"] span { background: #88FF82 !important; }
body.pp-product-live .pp-menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.pp-product-live .pp-menu-button[aria-expanded="true"] span:nth-child(2) { width: 26px !important; transform: translateY(-5px) rotate(-45deg); }

body.pp-product-live .pp-menu {
  position: fixed;
  top: 0; left: 0; right: auto; bottom: 0;
  width: min(308px, 84vw);
  display: flex; flex-direction: column;
  padding: 96px 20px 28px;
  color: #FAFAFA;
  background: #022F38;
  border: 0; border-radius: 0;
  overflow-y: auto;
  transform: translateX(-100%);
  visibility: hidden;
  box-shadow: none;
  transition: transform .35s cubic-bezier(.2,.7,.1,1), visibility 0s .35s;
}
body.pp-product-live .pp-menu.is-open {
  display: flex;
  transform: none;
  visibility: visible;
  transition: transform .35s cubic-bezier(.2,.7,.1,1), visibility 0s;
  box-shadow: 0 0 0 100vmax rgba(2,47,56,.45);
}
body.pp-product-live .pp-menu a,
body.pp-product-live .pp-menu button {
  width: auto;
  display: flex; justify-content: flex-start; gap: 10px;
  padding: 3px 6px; margin: 0 0 11px -6px;
  color: #FAFAFA !important;
  background: transparent;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 15px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0;
  align-self: flex-start;
}
body.pp-product-live .pp-menu a:hover,
body.pp-product-live .pp-menu button:hover { background: rgba(250,250,250,.1); }
body.pp-product-live .pp-menu a[aria-current="page"] { background: #88FF82; color: #141414 !important; }
body.pp-product-live .pp-menu .pp-new-label { color: #88FF82; font-family: var(--mono); font-size: 10px; letter-spacing: 0; }
body.pp-product-live .pp-menu-account { border-bottom: 1px solid rgba(250,250,250,.14); padding: 0 0 16px; margin-bottom: 18px; }
body.pp-product-live .pp-menu-account strong { color: #FAFAFA; font-family: var(--mono); font-size: 13px; font-weight: 500; text-transform: uppercase; }
body.pp-product-live .pp-menu-account span { color: #8FB3BA; font-size: 12px; }
body.pp-product-live .pp-menu-separator { background: rgba(250,250,250,.14); margin: 6px 0 16px; }
body.pp-product-live .pp-menu .pp-sign-out { margin-top: auto; margin-bottom: 0; color: #CFE3E7 !important; font-size: 12.5px; }
body.pp-product-live .pp-menu .pp-sign-out:hover { color: #88FF82 !important; }

/* ---------- Rail: night teal, lime marker ---------- */
body.pp-product-live .nh-rail {
  background: #022F38;
  color: #CFE3E7;
  border-right: 0;
}
body.pp-product-live .nh-live-rail-title {
  color: #88FF82;
  border-bottom-color: rgba(250,250,250,.14);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}
body.pp-product-live .nh-chat-item { color: #CFE3E7; background: transparent; }
body.pp-product-live .nh-chat-item:hover { background: rgba(250,250,250,.08); color: #FAFAFA; }
body.pp-product-live .nh-chat-item.active { background: rgba(250,250,250,.1); color: #FAFAFA; border-left: 2px solid #88FF82; }
body.pp-product-live .nh-chat-title { color: inherit; }
body.pp-product-live .nh-chat-date { color: #8FB3BA; }
body.pp-product-live .nh-chat-empty,
body.pp-product-live .nh-side-note { color: #8FB3BA; border-color: rgba(250,250,250,.12); }
body.pp-product-live .nh-rail-handle:hover,
body.pp-product-live .nh-rail-handle.dragging { background: #88FF82; }
body.pp-product-live .nh-new-chat { background: #88FF82; color: #141414; border-radius: 999px; font-family: var(--mono); text-transform: uppercase; font-weight: 500; }

/* ---------- Welcome ---------- */
body.pp-product-live .nh-welcome h1 {
  color: #141414;
  font-family: 'Inter', sans-serif;
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.04em;
}
body.pp-product-live .nh-rotate-line { color: #6B6B6B; font-size: 16px; }
body.pp-product-live .nh-take-noah { border-top-color: #D4D4D4; color: #3A3A3A; }
body.pp-product-live .nh-take-noah .kick { color: #017288; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0; }
body.pp-product-live .nh-take-noah a,
body.pp-product-live .nh-md a { color: #017288; text-underline-offset: 3px; }
body.pp-product-live .nh-take-noah a:hover,
body.pp-product-live .nh-md a:hover { color: #015F71; }

/* ---------- Composer ---------- */
body.pp-product-live .aui-composer-root > div {
  background: #FAFAFA;
  border: 1px solid #D4D4D4;
  border-radius: 14px;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
body.pp-product-live .aui-composer-root > div:focus-within {
  border-color: #017288;
  box-shadow: 0 0 0 3px rgba(1,114,136,.14);
}
body.pp-product-live .aui-composer-input { color: #141414; }
body.pp-product-live .aui-composer-input::placeholder { color: #8A8A8A; }

/* ---------- Live run status ---------- */
body.pp-product-live .nh-run-status { background: #F2F2F2; border-color: #D4D4D4; border-left: 3px solid #017288; border-radius: 8px; }
body.pp-product-live .nh-run-activity-mark { border-color: rgba(1,114,136,.35); }
body.pp-product-live .nh-run-activity-mark:after { background: #017288; }
body.pp-product-live .nh-run-history li:before { background: #017288; }
body.pp-product-live .nh-run-history li[data-tone=done]:before { background: #1E7A4B; }
body.pp-product-live .nh-run-label { color: #141414; font-weight: 500; }
body.pp-product-live .nh-run-resume { border-radius: 999px; border-color: #141414; font-family: var(--mono); text-transform: uppercase; font-size: 11px; }
body.pp-product-live .nh-run-resume:hover { background: #141414; color: #FAFAFA; }

/* ---------- Tool activity and links that used the old orange ---------- */
body.pp-product-live .nh-pulse { background: #FF7EC4; }
body.pp-product-live .nh-ad-bar a:hover { color: #017288; }
body.pp-product-live .nh-tool.running { border-left-color: #017288; }
body.pp-product-live .nh-tool.running .nh-dot { background: #017288; }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  body.pp-product-live .predict-wordmark { font-size: 22px !important; }
  body.pp-product-live .nh-welcome h1 { font-size: clamp(30px, 9vw, 40px); }
}