/* MekaChat's visual design: deep navy ink on cool slate paper, teal as the one accent, serif headlines with a
 * plain, highly legible body. Dark text on light surfaces (easier for older eyes than light-on-dark), body and secondary
 * text at 7:1 contrast or better, 19px text, Atkinson Hyperlegible Next for everything but headlines. Scoped to :root
 * so it overrides the base layer at the end of application.css. */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/assets/atkinson-hyperlegible-next-1e4cea71.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/assets/atkinson-hyperlegible-next-italic-6e221fe2.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

/* Reserve scrollbar space so navigation between scrolling pages and chat stays aligned. */
html { scrollbar-gutter: stable; }

:root {
  --ink: #1c2a3a;         /* 14.6:1 on white */
  --muted: #3d4957;       /* 9.2:1 on white, 8.1:1 on paper */
  --paper: #edf1f4;
  --surface: #fcfdfe;
  --surface-2: #e1e8ee;
  --line: #c9d2db;
  --green: #1c2a3a;
  --accent: #0b4f57;      /* deep teal */
  --red-text: #0b4f57;    /* 8.1:1 on paper */
  --airmail-blue: #0b4f57; /* the accent for focus, hover and emphasis (name kept from the earlier design) */
  --link: #0b4f57;        /* 9.3:1 on white */
  --sans: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  & body.mekachat-app { font: 19px/1.6 var(--sans); background: var(--paper); color: var(--ink); }
  & .mekachat-app h1, & .mekachat-app h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; } & .mekachat-app h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; } & .mekachat-app h1, & .mekachat-app h2, & .mekachat-app h3 { line-height: 1.15; color: var(--ink); }
  & .mekachat-app :focus-visible { outline: 3px solid var(--airmail-blue); outline-offset: 3px; }
  & .mekachat-app .text-muted, & .mekachat-app .lede, & .mekachat-app .helper-text, & .mekachat-app .option-sub, & .companion-label { color: var(--muted); }

  /* Masthead: plain paper-white */
  & .site-header { position: relative; flex: none; width: 100%; max-width: none; margin: 0; padding: 1.45rem max(2rem, calc((100% - 1136px) / 2)) 1rem; background: var(--surface); border-bottom: 1px solid var(--line); }
  & .brand { gap: 0; font: 400 1.45rem/1 var(--serif); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
  & .brand-dot { color: var(--accent); }
  & .site-nav { gap: .35rem; }
  & .mekachat-app .site-nav a { color: var(--ink); font-size: 1rem; font-weight: 600; padding: .5rem 1rem; border-radius: 999px; }
  & .mekachat-app .site-nav a:hover, & .mekachat-app .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: none; background: var(--surface-2); }

  & .mekachat-app .page { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 20px 44px -30px rgb(28 42 58 / .35); }
  & .mekachat-app .page > h1 { font-size: clamp(2.2rem, 4vw, 2.8rem); }
  & .eyebrow { color: var(--red-text); letter-spacing: .1em; }
  & .mekachat-app .field-group legend, & .mekachat-app .page h2.section-title { font: 700 1.1rem/1.4 var(--sans); letter-spacing: 0; color: var(--ink); }

  & .mekachat-app .btn { border-radius: 999px; font: 700 1.05rem/1.5 var(--sans); padding: .75rem 1.6rem; }
  & .mekachat-app .btn-primary, & .mekachat-app .btn-call { background: var(--ink); color: #fff; }
  & .mekachat-app .btn-primary:hover, & .mekachat-app .btn-call:hover { background: var(--airmail-blue); box-shadow: 0 0 0 6px #0b4f571f; }
  & .mekachat-app .btn-secondary { background: var(--surface); border: 1.5px solid var(--ink); color: var(--ink); }
  & .mekachat-app .btn-danger { background: #a3262f; color: #fff; }
  & .mekachat-app .text-input { background: var(--surface); border: 1.5px solid #8794a2; border-radius: 16px; color: var(--ink); }
  & .mekachat-app .text-input::placeholder { color: #56626f; }
  & .mekachat-app .text-input:focus { outline: 3px solid var(--airmail-blue); outline-offset: 1px; border-color: var(--airmail-blue); }
  & .mekachat-app input[type="checkbox"], & .mekachat-app input[type="radio"] { accent-color: var(--ink); }
  & .mekachat-app .option-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: 20px; }
  & .mekachat-app .option-card:hover { border-color: #8794a2; }
  & .mekachat-app .option-card:has(:checked) { background: var(--surface-2); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  & .mekachat-app .option-title { font-weight: 700; }
  & .mekachat-app .consent-box { background: var(--paper); border: 0; border-radius: 20px; color: var(--ink); }
  & .mekachat-app .alert { border-radius: 16px; }
  & .mekachat-app .alert-success { color: #17452d; background: #e0f0e6; }
  & .mekachat-app .alert-error { color: #8a1f28; background: #fbe6e7; }
  & .mekachat-app .alert-warning { color: #5e430c; background: #fbefd2; }
  & .mekachat-app .session-list li, & .mekachat-app .settings-list li, & .mekachat-app .settings-list { border-color: var(--line); }
  & .mekachat-app .settings-list li:hover { background: var(--surface-2); }
  & .mekachat-app .session-list li p { margin: 0; }
  & .mekachat-app .session-list li p + p { margin-top: .2rem; }
  & .mekachat-app .danger-zone { background: #fdf1f1; border-color: #ecc2c5; }
  & .mekachat-app .danger-zone p { color: #6e2a2f; }
  & .mekachat-app .btn-secondary:hover { background: var(--surface-2); border-color: var(--ink); }
  & .mekachat-app .plan-card { background: var(--surface-2); border: 0; border-radius: 24px; }
  & .mekachat-app .plan-price { font: 400 3rem/1.1 var(--serif); letter-spacing: -.01em; }
  & .mekachat-app .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
  & .mekachat-app .plan-grid > .usage-card { display: flex; flex-direction: column; margin: 0; }
  & .mekachat-app .plan-grid > .usage-card > form { margin-top: auto; }
  & .mekachat-app .plan-grid .plan-price { font-size: 2.25rem; margin-bottom: .25rem; }
  & .mekachat-app .pack-card { background: var(--surface); }
  & .mekachat-app .pack-price { font: 700 1.6rem/1.2 var(--sans); margin: .25rem 0 1rem; }
  & .mekachat-app .faq-contents ul, & .mekachat-app .faq-contents ol { padding-left: 1.3rem; line-height: 2.1; }
  & .mekachat-app .faq > h2 { margin: 2rem 0 .75rem; font-size: 1.6rem; }
  & .mekachat-app .faq-item { scroll-margin-top: 1rem; }
  & .mekachat-app .faq-item + .faq-item { margin-top: 1.5rem; }
  & .mekachat-app .faq-item .section-title { margin-bottom: .35rem; }
  & .mekachat-app .faq-item p { margin-top: 0; }
  & .mekachat-app .call-page { background: var(--surface); }

  /* Landing: plain paper, laid out in still.css */
  & .mekachat-app .container:has(.landing) { margin-top: 0; }
  & .mekachat-app .companion-card { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; }
  & .mekachat-app .landing-footer { color: var(--muted); }

  /* Conversation: her words in dark ink, the companion's on pale slate */
  & .mekachat-app .conversation-header, & .mekachat-app .composer-dock { background: var(--surface); border-color: var(--line); }
  /* Messages scrolled up under the sticky header fade out, so there's visibly more above */
  & .mekachat-app .conversation-header::after { content: ""; position: absolute; top: calc(100% + 1px); left: 0; right: 0; height: 3rem; background: linear-gradient(var(--surface), transparent); opacity: 0; pointer-events: none; transition: opacity .2s; }
  & .mekachat-app .conversation-header { transition: box-shadow .2s; }
  & .mekachat-app .has-hidden-above .conversation-header { box-shadow: 0 10px 14px -12px rgb(28 42 58 / .45); }
  & .mekachat-app .has-hidden-above .conversation-header::after { opacity: 1; }
  & .mekachat-app .day-separator { color: var(--muted); }
  & .mekachat-app .day-separator::before, & .mekachat-app .day-separator::after { border-color: var(--line); }
  & .mekachat-app .bubble { font-size: 1.1rem; padding: .95rem 1.25rem; border-radius: 22px; }
  & .mekachat-app .message-assistant .bubble { background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 6px; }
  & .mekachat-app .message-user .bubble { background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
  & .mekachat-app .message-meta { color: var(--muted); font-size: .8rem; }
  & .mekachat-app .history mark, & .search-results mark { background: #ffe08a; color: var(--ink); }
  & .mekachat-app .earlier-link a { border-color: var(--line); color: var(--link); }
  & .mekachat-app .earlier-link a:hover, & .mekachat-app .password-toggle:hover { background: var(--surface-2); }
  & .mekachat-app .password-toggle { color: var(--link); }

  @media (max-width: 760px) {
    & .site-header { padding: 1.3rem 1.25rem .9rem; }
    & .mekachat-app .page { border-radius: 22px; }
  }
  @media (max-width: 480px) {
    /* The conversation fills the phone screen instead of sitting on a card */
    & .mekachat-app .conversation-page { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
    & .mekachat-app .conversation-header, & .mekachat-app .composer-dock { background: var(--paper); }
    & .mekachat-app .conversation-header::after { background: linear-gradient(var(--paper), transparent); }
    & .mekachat-app .message-assistant .bubble { background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
    & .mekachat-app .composer-input { background: var(--surface); }
  }
}

/* The public pages' language switcher: each language named in itself, the current one plain */
:root {
  & .site-footer { max-width: 1136px; margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem; }
  & .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem; margin-bottom: .75rem; }
  & .footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; color: var(--link); font-size: 1rem; }
  & .language-suggestion { margin: 0; padding: .7rem 1rem; text-align: center; background: var(--surface-2); }
  & .country-switcher { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
  & .country-option { display: inline-flex; align-items: center; gap: .45rem; font: 600 1rem/1 var(--sans); color: var(--link); background: none; border: 0; border-radius: 999px; padding: .6rem 1rem; cursor: pointer; }
  & .country-option:hover { background: var(--surface-2); }
  & .country-option[aria-current="true"] { color: var(--ink); background: var(--surface-2); cursor: default; }
  & .country-flag { font-size: 1.2em; line-height: 1; }
}

/* The landing page's offer next to each invitation */
:root {
  & .hero-offer { margin: .75rem 0 0; color: var(--ink); font-weight: 600; font-size: 1rem; }
  & .landing-cta-repeat { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 2.5rem auto 0; }
}

/* Pricing: the three memberships side by side on wide screens, with the rules beside the offer */
:root {
  & .mekachat-app .pricing-page { max-width: 1040px; }
  @media (min-width: 900px) { & .mekachat-app .pricing-page .plan-grid:has(> .plan-card:nth-child(3)) { grid-template-columns: repeat(3, 1fr); } }
  & .mekachat-app .pricing-rules { margin: 1.5rem 0 2rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: 20px; }
  & .mekachat-app .pricing-rules .section-title { margin-top: 0; }
}

/* Out of replies: a calm panel with both ways to keep writing */
:root {
  & .mekachat-app .allowance-panel { display: block; text-align: left; padding: 1rem 1.25rem; border-radius: 16px; background: var(--surface-2); color: var(--ink); }
  & .mekachat-app .allowance-panel p { margin: 0 0 .5rem; }
  & .mekachat-app .allowance-heading { font-weight: 700; }
  & .mekachat-app .allowance-options { margin: .25rem 0 .75rem; padding-left: 1.2rem; }
  & .mekachat-app .allowance-options li { margin: .4rem 0; }
  & .mekachat-app .allowance-options .text-muted { display: block; }
}

/* Phones: a short masthead (brand, then every link on one row) leaves the screen for the conversation */
:root {
  @media (max-width: 560px) {
    & .site-header { padding: .6rem .75rem .35rem; gap: .25rem; }
    & .brand { font-size: 1.25rem; }
    & .site-nav { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 0; }
    & .mekachat-app .site-nav a { padding: .45rem .55rem; font-size: .95rem; white-space: nowrap; }
  }
  @media (max-width: 360px) {
    & .mekachat-app .site-nav a { padding: .4rem .35rem; font-size: .875rem; }
  }
}

/* Phones: once the conversation header has scrolled away, a slim bar keeps the companion in view */
:root {
  & .conversation-minibar { display: none; }
  @media (max-width: 760px) {
    & .mekachat-app .header-out-of-view .conversation-minibar { display: flex; align-items: center; gap: .6rem; position: fixed; z-index: 20; top: 0; left: 0; right: 0; padding: .4rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 6px 12px -10px rgb(28 42 58 / .45); }
    & .conversation-minibar .companion-avatar { margin: 0; flex-shrink: 0; }
    & .minibar-name { flex: 1; min-width: 0; font-weight: 700; }
    & .minibar-name .companion-label { font-weight: 400; margin-left: .25rem; }
    & .mekachat-app main a.minibar-latest { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0 .9rem; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
  }
}

/* One treatment per kind of action: filled for the main one, outlined for others, outlined red for destructive
   ones (which always confirm first), and plain links for inline actions like trying again. */
:root {
  & .mekachat-app .btn-link { color: var(--link); }
  & .mekachat-app .btn-link-danger { color: #94212a; }
  & .mekachat-app .btn-small { min-height: 44px; padding: .45rem 1rem; font-size: .95rem; }
}

/* Help: shortcuts to the commonest needs, a filter, and questions that fold away under their titles */
:root {
  & .help-shortcuts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.5rem; }
  & .faq-filter { margin: 0 0 1.5rem; }
  & .faq-filter label { display: block; margin-bottom: .4rem; }
  & .mekachat-app details.faq-item { border-bottom: 1px solid var(--line); }
  & .mekachat-app details.faq-item + details.faq-item { margin-top: 0; }
  & .mekachat-app details.faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .6rem 0; cursor: pointer; list-style: none; }
  & .mekachat-app details.faq-item > summary::-webkit-details-marker { display: none; }
  & .mekachat-app details.faq-item > summary::after { content: "+"; flex-shrink: 0; font-size: 1.4rem; line-height: 1; color: var(--link); }
  & .mekachat-app details.faq-item[open] > summary::after { content: "−"; }
  & .mekachat-app details.faq-item > summary h3 { margin: 0; }
  & .mekachat-app details.faq-item > p { margin: 0 0 1rem; }
}