/* ============================================================
   builders.mk — Manrope (marketing / Expressive register)
   Self-hosted variable font, Latin + Cyrillic (bilingual EN/MK).
   Replaces the design system's Figtree, which has no Cyrillic.
   One weight-axis file per subset; browser picks by unicode-range.
   ============================================================ */
@font-face {
  font-family: 'Manrope';
  src: url("/assets/Manrope-latin-822bc47d.woff2") format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url("/assets/Manrope-latin-ext-3c111aa4.woff2") format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  src: url("/assets/Manrope-cyrillic-397e3398.woff2") format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  src: url("/assets/Manrope-cyrillic-ext-af6aded3.woff2") format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'SkolaSans';
  src: url("/assets/SkolaSans-Light-ada8ef0b.otf") format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SkolaSans';
  src: url("/assets/SkolaSans-LightItalic-b5e9acde.otf") format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SkolaSans';
  src: url("/assets/SkolaSans-Regular-6baf11d6.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SkolaSans';
  src: url("/assets/SkolaSans-RegularItalic-5845737d.otf") format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SkolaSans';
  src: url("/assets/SkolaSans-Medium-66525759.otf") format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SkolaSans';
  src: url("/assets/SkolaSans-MediumItalic-5a546f9a.otf") format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SkolaSans';
  src: url("/assets/SkolaSans-Bold-771d7660.otf") format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SkolaSans';
  src: url("/assets/SkolaSans-BoldItalic-b04dbaeb.otf") format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SkolaSans';
  src: url("/assets/SkolaSans-Black-3b82bb3e.otf") format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SkolaSans';
  src: url("/assets/SkolaSans-BlackItalic-9b6ec335.otf") format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   builders.mk — Design tokens (ported from the design system)
   One foundation, two registers. Primitives + ramps + semantic.
   Product UI should read the --ui-* semantic tokens, not raw --bm-*.
   Expressive (default :root) = marketing/social. Functional
   ([data-register="app"]) = the app. See app/views/layouts/*.
   ============================================================ */
:root {
  /* ---- Families ------------------------------------------------- */
  --bm-font-sans:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bm-font-accent: 'SkolaSans', 'Manrope', serif; /* used ITALIC only */
  --bm-font-mono:   ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, monospace;
  --bm-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---- Surface -------------------------------------------------- */
  --bm-bg:           #FFF9F0;
  --bm-bg-cream:     #FFF8E7;
  --bm-cream-light:  #FFF9E6;
  --bm-cream-lighter:#FFF4D6;
  --bm-cream-soft:   #FFFEF8;
  --bm-cream-softest:#FEFDF5;
  --bm-surface:      #FFFFFF;
  --bm-surface-2:    #FAFAF7;
  --bm-ink:          #111111;
  --bm-ink-2:        #1a1a1a;

  /* ---- Text ----------------------------------------------------- */
  --bm-fg-1: #111827;
  --bm-fg-2: #1F2937;
  --bm-fg-3: #4B5563;
  --bm-fg-4: #9CA3AF;

  /* ---- Brand primary: builder blue ------------------------------ */
  --bm-blue:       #2B5CE7;
  --bm-blue-hover: #1e4dd8;
  --bm-blue-50:    #EEF5FF;
  --bm-blue-100:   #E0F2FE;
  --bm-blue-200:   #BFDBFE;

  /* ---- Brand accent: THE DOT (yellow) --------------------------- */
  --bm-yellow:      #FFB84D;
  --bm-yellow-warm: #FFD93D;
  --bm-yellow-mid:  #FFD916;
  --bm-yellow-soft: #FFE5A3;

  /* ---- Secondary accents ---------------------------------------- */
  --bm-pink:        #FF0084;
  --bm-pink-soft:   #FA44A2;
  --bm-orange:      #FF7F5C; /* craft-orange */
  --bm-orange-mid:  #E7832B;
  --bm-purple:      #9B87FF;
  --bm-purple-deep: #7B68EE;

  /* ---- Status --------------------------------------------------- */
  --bm-success:    #16A34A;
  --bm-success-bg: #DCFCE7;
  --bm-danger:     #DC2626;
  --bm-danger-bg:  #FEE2E2;

  /* ---- Neutral / blue / amber ramps ----------------------------- */
  --bm-gray-50:  #F9FAFB;  --bm-gray-100: #F3F4F6;  --bm-gray-200: #E5E7EB;
  --bm-gray-300: #D1D5DB;  --bm-gray-400: #9CA3AF;  --bm-gray-500: #6B7280;
  --bm-gray-600: #4B5563;  --bm-gray-700: #374151;  --bm-gray-800: #1F2937;
  --bm-gray-900: #111827;
  --bm-blue-300: #93B4F4;  --bm-blue-400: #5B86EC;  --bm-blue-500: #2B5CE7;
  --bm-blue-600: #1E4DD8;  --bm-blue-700: #1A41B8;  --bm-blue-800: #163793;
  --bm-amber-50:  #FFF8EC; --bm-amber-100: #FFEFD0; --bm-amber-200: #FFE0A8;
  --bm-amber-300: #FFCE74; --bm-amber-500: #E7832B;

  /* ---- Borders -------------------------------------------------- */
  --bm-border:        #E5E7EB;
  --bm-border-soft:   #F3F4F6;
  --bm-border-dashed: #D1D5DB;

  /* ---- Spacing (4px) -------------------------------------------- */
  --bm-space-1: 4px;  --bm-space-2: 8px;  --bm-space-3: 12px; --bm-space-4: 16px;
  --bm-space-5: 20px; --bm-space-6: 24px; --bm-space-8: 32px; --bm-space-10: 40px;
  --bm-space-12: 48px; --bm-space-16: 64px; --bm-space-20: 80px; --bm-space-24: 96px;
  --bm-space-32: 128px;

  /* ---- Radii ---------------------------------------------------- */
  --bm-radius-sm: 8px; --bm-radius-md: 12px; --bm-radius-lg: 16px;
  --bm-radius-xl: 24px; --bm-radius-2xl: 32px; --bm-radius-full: 9999px;

  /* ---- Shadows — warm-neutral, no blue cast --------------------- */
  --bm-shadow-sm:      0 1px 2px rgba(17,17,17,0.05);
  --bm-shadow:         0 4px 12px rgba(17,17,17,0.06);
  --bm-shadow-lg:      0 16px 40px rgba(17,17,17,0.08), 0 2px 4px rgba(17,17,17,0.04);
  --bm-shadow-2xl:     0 32px 80px rgba(17,17,17,0.18), 0 4px 12px rgba(17,17,17,0.06);
  --bm-shadow-sticker: 0 2px 6px rgba(17,17,17,0.10);

  /* ---- Type tracking -------------------------------------------- */
  --bm-track-tight:   -0.02em;
  --bm-track-eyebrow:  0.06em;

  /* ========== SEMANTIC (--ui-*) — EXPRESSIVE default ============= */
  --ui-font-ui:      var(--bm-font-sans);   /* Manrope */
  --ui-font-display: var(--bm-font-sans);
  --ui-font-accent:  var(--bm-font-accent); /* SkolaSans italic */

  --ui-surface-page:   var(--bm-bg);
  --ui-surface-card:   var(--bm-surface);
  --ui-surface-sunken: var(--bm-surface-2);

  --ui-text:        var(--bm-fg-1);
  --ui-text-muted:  var(--bm-fg-3);
  --ui-text-subtle: var(--bm-fg-4);
  --ui-text-on-accent: #ffffff;

  --ui-border:        var(--bm-gray-200);
  --ui-border-strong: var(--bm-gray-300);

  --ui-accent:       var(--bm-blue);
  --ui-accent-hover: var(--bm-blue-hover);
  --ui-accent-soft:  var(--bm-blue-50);

  --ui-nav-active:    var(--bm-blue);
  --ui-nav-active-bg: var(--bm-blue-50);

  --ui-success: var(--bm-success);
  --ui-warn:    var(--bm-orange-mid);
  --ui-danger:  var(--bm-danger);

  --ui-focus-ring: 0 0 0 3px rgba(43, 92, 231, 0.35);

  --ui-radius-button: var(--bm-radius-full); /* pills — ALWAYS, both registers */
  --ui-radius-input:  var(--bm-radius-md);   /* 12 */
  --ui-radius-card:   var(--bm-radius-xl);   /* 24 */
  --ui-radius-chip:   var(--bm-radius-full);

  --ui-elev-card: var(--bm-shadow);
  --ui-elev-pop:  var(--bm-shadow-lg);

  --ui-control-h-sm: 38px;
  --ui-control-h-md: 46px;
  --ui-control-h-lg: 54px;

  --ui-card-pad:  var(--bm-space-8); /* 32 */
  --ui-stack-gap: var(--bm-space-6); /* 24 */

  --ui-motion: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== FUNCTIONAL — the app =============================== */
/* System font, value over style, denser, craft-orange active nav.
   Cream page kept. Buttons stay pills. */
[data-register="app"],
.bm-app {
  --ui-font-ui:      var(--bm-font-system);
  --ui-font-display: var(--bm-font-system);

  --ui-nav-active:    var(--bm-orange);
  --ui-nav-active-bg: var(--bm-amber-50);

  --ui-radius-input: var(--bm-radius-sm); /* 8 */
  --ui-radius-card:  var(--bm-radius-lg); /* 16 */
  --ui-elev-card:    var(--bm-shadow-sm);

  --ui-control-h-sm: 32px;
  --ui-control-h-md: 40px;
  --ui-control-h-lg: 46px;

  --ui-card-pad:  var(--bm-space-6); /* 24 */
  --ui-stack-gap: var(--bm-space-4); /* 16 */
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    font-family: var(--ui-font-ui, var(--bm-font-system));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /* Register UI font on any scoped subtree (e.g. an app panel on a marketing page). */
  [data-register] { font-family: var(--ui-font-ui); }

  /* Installed-PWA polish: app-like scroll, no rubber-band bounce. Scoped to
     standalone so normal browser tabs keep pull-to-refresh. */
  @media (display-mode: standalone) {
    body { overscroll-behavior-y: none; }
  }
}

/* Safe-area helpers (notch / home indicator). env() insets are 0 when there's
   nothing to inset, so these are inert off-device and additive on it. */
@layer utilities {
  .safe-top { padding-top: env(safe-area-inset-top); }
  .safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
  .safe-x {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ============================================================
   builders.mk — component atoms (@layer components)
   The brand's most-used patterns as classes. All read the semantic
   ui- and bm- tokens, so they are register-correct automatically.
   Composed pieces live as ERB partials in app/views/shared/components/.
   ============================================================ */
@layer components {
  /* The signature italic accent word inside a bold-sans headline.
     <h1>Let's <span class="bm-italic">build</span> together</h1> */
  .bm-italic {
    font-family: var(--bm-font-accent);
    font-style: italic;
    font-weight: 300;
  }
  /* Back-compat alias — existing marketing views use .font-serif-italic. */
  .font-serif-italic {
    font-family: var(--bm-font-accent);
    font-style: italic;
  }

  /* The sacred yellow dot — closes a wordmark/headline. */
  .bm-dot { color: var(--bm-yellow); }

  /* Rotated yellow sticker eyebrow ("CASE STUDY", "KEEP BUILDING"). */
  .bm-sticker {
    display: inline-block;
    background: var(--bm-yellow-soft);
    color: var(--bm-fg-1);
    padding: 8px 20px;
    border-radius: var(--bm-radius-lg);
    box-shadow: var(--bm-shadow-sticker);
    transform: rotate(-1.5deg);
    font-family: var(--bm-font-accent);
    font-style: italic;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: var(--bm-track-eyebrow);
    text-transform: uppercase;
    transition: transform var(--ui-motion);
  }
  .bm-sticker:hover { transform: rotate(0deg); }

  /* Flat tracked eyebrow — the quieter label for dense app surfaces. */
  .bm-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--bm-track-eyebrow);
    text-transform: uppercase;
    color: var(--bm-fg-3);
  }

  /* Buttons — ALWAYS pills, in both registers. */
  .bm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--ui-font-ui);
    font-weight: 600;
    border-radius: var(--ui-radius-button);
    border: 0;
    cursor: pointer;
    transition: background var(--ui-motion), color var(--ui-motion),
                transform var(--ui-motion), box-shadow var(--ui-motion);
  }
  .bm-btn:focus-visible { outline: 0; box-shadow: var(--ui-focus-ring); }
  .bm-btn-primary {
    background: var(--ui-accent);
    color: var(--ui-text-on-accent);
  }
  .bm-btn-primary:hover {
    background: var(--ui-accent-hover);
    color: var(--ui-text-on-accent);
    box-shadow: var(--ui-elev-pop);
    text-decoration: none;
  }
  .bm-btn-secondary {
    background: #fff;
    color: var(--bm-gray-800);
    border: 1px solid var(--bm-gray-300);
  }
  .bm-btn-secondary:hover { background: var(--bm-gray-50); color: var(--bm-gray-900); text-decoration: none; }
  .bm-btn-ghost {
    background: transparent;
    color: var(--bm-fg-3);
  }
  .bm-btn-ghost:hover { color: var(--bm-fg-1); text-decoration: none; }
  .bm-btn-danger { background: var(--ui-danger); color: #fff; }
  .bm-btn-danger:hover { background: #b91c1c; color: #fff; }
  /* Sizes map to the register's control heights. */
  .bm-btn-sm { height: var(--ui-control-h-sm); padding: 0 16px; font-size: 14px; }
  .bm-btn-md { height: var(--ui-control-h-md); padding: 0 22px; font-size: 15px; }
  .bm-btn-lg { height: var(--ui-control-h-lg); padding: 0 30px; font-size: 17px; }

  /* Default flat-white card. */
  .bm-card {
    background: var(--ui-surface-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--ui-elev-card);
    transition: border-color var(--ui-motion), box-shadow var(--ui-motion);
  }
  .bm-card-interactive:hover { box-shadow: var(--ui-elev-pop); }

  /* Dashed "torn paper" divider. */
  .bm-divider-dashed {
    border-top: 2px dashed var(--bm-border-dashed);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

/* Hide the page-level Turbo progress bar while a chat turn is in flight — the in-chat
   optimistic typing bubble already signals progress, so the top bar is redundant noise.
   Scoped to .intake-busy (toggled by intake_controller) so real navigations — switching
   conversations, Start research — still show the bar. */
html.intake-busy .turbo-progress-bar {
  display: none;
}

/* Streaming reply animation (ported from ../as-av copilot): thinking dots until the first
   token, then the text in an .intake-tw span with a blinking .intake-caret that drops once
   the stream settles. Driven by intake_stream_controller on an actively streaming turn. */
.intake-tw { white-space: pre-wrap; }

.intake-caret {
  display: inline-block;
  width: 7px;
  height: 1.02em;
  margin-left: 1px;
  vertical-align: -2px;
  background: currentColor;
  animation: intake-blink 1.05s steps(1) infinite;
}
@keyframes intake-blink { 50% { opacity: 0; } }

.intake-thinking { display: inline-flex; gap: 5px; align-items: center; }
.intake-thinking i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ca3af; /* gray-400 — muted dots against the bubble's gray-900 text */
  animation: intake-bounce 1.15s infinite;
}
.intake-thinking i:nth-child(2) { animation-delay: 0.16s; }
.intake-thinking i:nth-child(3) { animation-delay: 0.32s; }
@keyframes intake-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
  40% { transform: translateY(-4px); opacity: 1; }
}