/*
 * REBA brand palette — approximated from getreba.com's blue-forward B2B SaaS look
 * (no shared stylesheet exists yet in this stack to import from). Documented as CSS
 * custom properties so these can be swapped in one place after marketing/UI review.
 *   --reba-blue-700: #0747A6  deep blue — header text accents, focus rings
 *   --reba-blue-600: #0B5FFF  primary brand blue — buttons, links, Scout's icon
 *   --reba-blue-500: #2E7BFF  hover/active state on primary blue
 *   --reba-blue-100: #E8F0FF  light blue tint — assistant chat bubbles, subtle fills
 *   --reba-ink:      #101828  near-black body text
 *   --reba-slate:    #475467  secondary/muted text
 *   --reba-border:   #D0D5DD  hairline borders
 *   --reba-bg:       #F7F9FC  page background
 *   --reba-white:    #FFFFFF
 * Typography: system font stack (no external font dependency for a POC); getreba.com
 * reads as a geometric sans, which the stack below approximates well enough pending review.
 */
:root {
    --reba-blue-700: #0747A6;
    --reba-blue-600: #0B5FFF;
    --reba-blue-500: #2E7BFF;
    --reba-blue-100: #E8F0FF;
    --reba-ink: #101828;
    --reba-slate: #475467;
    --reba-border: #D0D5DD;
    --reba-bg: #F7F9FC;
    --reba-white: #FFFFFF;
    --reba-ok: #067647;
    --reba-ok-bg: #ECFDF3;
    --reba-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --reba-card-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.08);
    --reba-card-shadow-hover: 0 8px 16px -4px rgba(16,24,40,0.12), 0 2px 6px rgba(16,24,40,0.06);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --reba-ink: #F2F4F7;
        --reba-slate: #AEB7C4;
        --reba-border: #30384A;
        --reba-bg: #0B1220;
        --reba-white: #141B2B;
        --reba-blue-100: #112042;
        --reba-ok-bg: #0D2A1D;
        --reba-card-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4);
        --reba-card-shadow-hover: 0 8px 16px -4px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --reba-ink: #F2F4F7;
    --reba-slate: #AEB7C4;
    --reba-border: #30384A;
    --reba-bg: #0B1220;
    --reba-white: #141B2B;
    --reba-blue-100: #112042;
    --reba-ok-bg: #0D2A1D;
    --reba-card-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4);
    --reba-card-shadow-hover: 0 8px 16px -4px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35);
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

.theme-toggle {
    /* Bottom-right, not top-right: the Index page's topbar already has a "Team sign-in"
       pill in the top-right corner, and a fixed top-right button sits almost exactly on
       top of it on any screen width, worst on a narrow phone with no slack to separate
       them. Bottom-right is clear of every page's top bar/tab content. */
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 10;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid var(--reba-border);
    background: var(--reba-white);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
    cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    border-color: var(--reba-blue-500);
}

/* The HTML `hidden` attribute has the same specificity as a class selector, so without
   this, rules like `.booking-form { display: flex; }` below would win over the browser's
   default `[hidden] { display: none; }` and the element would stay visible. */
[hidden] {
    display: none !important;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--reba-bg);
    color: var(--reba-ink);
    font-family: var(--reba-font);
    line-height: 1.5;
    /* Phone-width base (320-420px): no horizontal scroll, content fills the viewport. */
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 16px 56px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Hero / brand header ---- */

.hero {
    text-align: center;
    padding-block: 8px 28px;
}

.hero h1 {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
    line-height: 1.2;
    margin: 0 0 10px;
    text-wrap: balance;
    color: var(--reba-ink);
}

.hero-sub {
    margin: 0 auto 22px;
    max-width: 46ch;
    color: var(--reba-slate);
    font-size: 1rem;
}

/* ---- Chat shell ---- */

.chat-shell {
    background: var(--reba-white);
    border: 1px solid var(--reba-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 0 var(--reba-border);
}

.chat-log {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    max-height: 56vh;
    min-height: 220px;
    overflow-y: auto;
}

.chat-bubble {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 82%;
}

.chat-bubble p {
    margin: 0;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.4;
    word-break: break-word;
}

.chat-bubble-assistant {
    align-self: flex-start;
}

.chat-bubble-assistant p {
    background: var(--reba-blue-100);
    color: var(--reba-ink);
    border-bottom-left-radius: 4px;
}

.chat-bubble-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-bubble-user p {
    background: var(--reba-blue-600);
    color: var(--reba-white);
    border-bottom-right-radius: 4px;
}

.typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 2px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--reba-slate);
    opacity: 0.4;
    animation: typingBounce 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ---- Next-step quick replies ("Tell me more" / "Schedule a call") ---- */

.quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quick-reply-btn {
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--reba-white);
    background: var(--reba-blue-600);
    border: 1px solid var(--reba-blue-600);
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
}

.quick-reply-btn-secondary {
    color: var(--reba-blue-700);
    background: var(--reba-blue-100);
    border-color: var(--reba-blue-500);
}

.quick-reply-btn:hover {
    filter: brightness(0.97);
}

/* ---- Slot picker ---- */

.slot-picker {
    padding: 0 16px 12px;
    border-top: 1px solid var(--reba-border);
    padding-top: 12px;
}

.slot-picker-label {
    margin: 0 0 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--reba-slate);
}

.slot-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.slot-btn {
    font-family: inherit;
    font-size: 0.9rem;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--reba-blue-600);
    background: var(--reba-white);
    color: var(--reba-blue-600);
    cursor: pointer;
}

.slot-btn:hover,
.slot-btn:focus-visible {
    background: var(--reba-blue-100);
}

/* ---- Booking mini-form ---- */

.booking-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--reba-border);
}

.booking-form-label {
    margin: 0 0 4px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--reba-slate);
}

.booking-form input {
    font-family: inherit;
    font-size: 1rem;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--reba-border);
    width: 100%;
}

.booking-form input:focus-visible {
    outline: 2px solid var(--reba-blue-500);
    outline-offset: 1px;
}

.booking-form input:disabled {
    background: var(--reba-border);
    color: var(--reba-slate);
    cursor: not-allowed;
}

/* ---- Booking confirmation modal ---- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 100;
}

.modal-dialog {
    position: relative;
    background: var(--reba-white);
    border-radius: 14px;
    box-shadow: var(--reba-card-shadow-hover);
    padding: 28px 24px;
    max-width: 360px;
    width: 100%;
    text-align: center;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--reba-slate);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.modal-close:hover,
.modal-close:focus-visible {
    background: var(--reba-bg);
    color: var(--reba-ink);
}

.booking-confirmation-content p {
    margin: 0 0 16px;
    font-weight: 600;
    color: var(--reba-ink);
}

/* ---- Buttons ---- */

.btn-primary {
    display: inline-block;
    background: var(--reba-blue-600);
    color: var(--reba-white);
    border: none;
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--reba-blue-500);
}

.btn-primary:disabled {
    background: var(--reba-border);
    color: var(--reba-slate);
    cursor: not-allowed;
}

/* ---- Chat composer ---- */

.chat-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--reba-border);
    background: var(--reba-white);
}

.chat-form textarea {
    flex: 1;
    font-family: inherit;
    font-size: 1rem;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--reba-border);
    resize: none;
    max-height: 120px;
    overflow-y: auto;
}

.chat-form textarea:focus-visible {
    outline: 2px solid var(--reba-blue-500);
    outline-offset: 1px;
}

.chat-form textarea:disabled {
    background: var(--reba-border);
    color: var(--reba-slate);
    cursor: not-allowed;
}

.btn-send {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--reba-blue-600);
    color: var(--reba-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-send:hover,
.btn-send:focus-visible {
    background: var(--reba-blue-500);
}

.btn-send:disabled {
    background: var(--reba-border);
    color: var(--reba-slate);
    cursor: not-allowed;
}

/* ---- Tablet and up ---- */

@media (min-width: 600px) {
    .chat-log {
        max-height: 50vh;
    }
}

/* ---- Topbar / admin link ---- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 2px 10px;
}
.topbar-brand { display: flex; align-items: center; gap: 6px; }
.topbar-logo-chip {
    display: flex;
    align-items: center;
    background: #0B1220;
    border: 1px solid var(--reba-border);
    border-radius: 10px;
    padding: 8px 14px;
}
.topbar-logo { height: 34px; width: auto; display: block; }
.admin-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--reba-slate);
    text-decoration: none;
    border: 1px solid var(--reba-border);
    border-radius: 999px;
    padding: 5px 11px;
    white-space: nowrap;
}
.admin-link:hover { border-color: var(--reba-blue-500); color: var(--reba-blue-600); }

/* ---- Fit-check CTA ---- */
.fit-cta {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--reba-white);
    background: linear-gradient(135deg, var(--reba-blue-600), var(--reba-blue-700));
    border: none;
    border-radius: 12px;
    padding: 14px 24px;
    cursor: pointer;
    margin-top: 6px;
    box-shadow: 0 10px 24px -10px rgba(11, 95, 255, 0.5);
}
.fit-cta:hover { box-shadow: 0 12px 28px -8px rgba(11, 95, 255, 0.55); }
.fit-cta:focus-visible { outline: 3px solid var(--reba-blue-500); outline-offset: 3px; }

/* ---- Chat reveal: expands in place, pushes the cards down (no scroll) ---- */
.chat-reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(.2,.8,.2,1);
}
.chat-reveal.is-open { grid-template-rows: 1fr; margin-bottom: 20px; }
.chat-reveal-inner { overflow: hidden; min-height: 0; }

/* ---- Cards section ---- */
.cards-section { margin-top: 8px; }
.cards-intro { text-align: center; margin: 0 0 16px; }
.cards-intro h2 { font-size: 1.1rem; margin: 0 0 4px; }
.cards-intro p { color: var(--reba-slate); font-size: 0.9rem; margin: 0; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
/* Generously sized to show the full front-face summary with no scrolling needed -- a
   scrollable teaser is bad UX (nothing tells a prospect to scroll a marketing card, so the
   last line just silently vanishes under the tap-hint, which is exactly what a shorter
   height + overflow-y:auto was doing). Scrolling stays reserved for the back's Details
   text, where "tap to see more" already sets the expectation of more content underneath. */
.flip-card { perspective: 1200px; min-width: 0; height: 320px; }
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
    transform-style: preserve-3d;
    cursor: pointer;
}
.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 14px;
    border: 1px solid var(--reba-border);
    background: var(--reba-white);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    box-shadow: var(--reba-card-shadow);
    transition: box-shadow 0.18s ease;
}
.flip-card:hover .flip-face { box-shadow: var(--reba-card-shadow-hover); }
.flip-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--reba-blue-100);
    color: var(--reba-blue-600);
    flex-shrink: 0;
}
/* Always flex to fill the space above .tap-hint, so the eyebrow/title sits at the
   same fixed position (flush under the card's top padding) on every card regardless
   of how much summary/detail text that product has -- the old justify-content:
   space-between let short text "float" differently from text long enough to fill
   or overflow the fixed card height. */
.flip-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.flip-front .eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--reba-blue-600); line-height: 1.2; }
.flip-front p {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}
.flip-back { transform: rotateY(180deg); background: var(--reba-blue-100); }
.flip-back .title { font-size: 0.78rem; font-weight: 700; color: var(--reba-blue-700); letter-spacing: 0.02em; }
.flip-back p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--reba-ink);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.tap-hint { font-size: 0.78rem; font-weight: 600; color: var(--reba-blue-600); flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.ask-scout-btn {
    font-family: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ask-scout-btn:hover,
.ask-scout-btn:focus-visible {
    color: var(--reba-blue-700);
}

@media (prefers-reduced-motion: reduce) {
    .flip-card-inner, .chat-reveal { transition: none; }
    .typing-dots span { animation: none; opacity: 0.7; }
}

/* ---- Admin pages (Content, Availability, Dashboard) ---- */

.admin-page-sub { color: var(--reba-slate); font-size: 0.88rem; margin: 0 0 18px; }

.vp-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.vp-row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid var(--reba-border);
    border-radius: 10px;
    background: var(--reba-white);
}
.vp-row label { font-size: 0.72rem; color: var(--reba-slate); display: block; margin-bottom: 3px; }
.vp-row input, .vp-row textarea {
    width: 100%;
    font-family: inherit;
    font-size: 0.88rem;
    padding: 7px 9px;
    border-radius: 7px;
    border: 1px solid var(--reba-border);
    background: var(--reba-bg);
    color: var(--reba-ink);
    resize: vertical;
}
.vp-row textarea { min-height: 54px; }
.vp-details { grid-column: 1 / -1; }
.help-tip {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid var(--reba-border);
    color: var(--reba-slate);
    font-size: 11px;
    font-weight: bold;
    cursor: help;
}
.vp-remove {
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--reba-slate);
    background: none;
    border: 1px solid var(--reba-border);
    border-radius: 7px;
    padding: 6px 10px;
    cursor: pointer;
    align-self: start;
    margin-top: 18px;
}
.cap-note { font-size: 0.78rem; color: var(--reba-slate); margin: 0 0 14px; }

.primary-btn {
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--reba-white);
    background: var(--reba-blue-600);
    border: none;
    border-radius: 9px;
    padding: 10px 18px;
    cursor: pointer;
}
.primary-btn:hover, .primary-btn:focus-visible { background: var(--reba-blue-500); }
.ghost-btn {
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--reba-blue-700);
    background: var(--reba-blue-100);
    border: 1px solid var(--reba-blue-500);
    border-radius: 9px;
    padding: 9px 14px;
    cursor: pointer;
}

@media (max-width: 560px) {
    .vp-row { grid-template-columns: 1fr; }
    .vp-remove { margin-top: 0; justify-self: start; }
}

.window-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.window-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--reba-border);
    border-radius: 10px;
    background: var(--reba-white);
    font-size: 0.9rem;
}
.window-row .slot-chip {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--reba-blue-700);
    background: var(--reba-blue-100);
    border-radius: 999px;
    padding: 2px 9px;
    margin-left: 8px;
}
.window-row button {
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--reba-slate);
    background: none;
    border: 1px solid var(--reba-border);
    border-radius: 7px;
    padding: 5px 10px;
    cursor: pointer;
}

.add-window-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 14px;
    border: 1px dashed var(--reba-border);
    border-radius: 12px;
    background: var(--reba-white);
}
.add-window-form label { display: block; font-size: 0.72rem; color: var(--reba-slate); margin-bottom: 4px; }
.add-window-form input, .add-window-form select {
    width: 100%;
    font-family: inherit;
    font-size: 0.86rem;
    padding: 7px 8px;
    border-radius: 7px;
    border: 1px solid var(--reba-border);
    background: var(--reba-bg);
    color: var(--reba-ink);
}
@media (max-width: 680px) {
    .add-window-form { grid-template-columns: 1fr 1fr; }
}

.booking-card {
    border: 1px solid var(--reba-border);
    border-radius: 12px;
    background: var(--reba-white);
    padding: 14px;
    margin-bottom: 12px;
}
.booking-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: baseline;
    justify-content: space-between;
}
.booking-who { font-weight: 700; font-size: 0.98rem; }
.booking-meta { font-size: 0.82rem; color: var(--reba-slate); }
.booking-brief {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--reba-blue-100);
    font-size: 0.88rem;
    color: var(--reba-ink);
}
.booking-brief .label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--reba-blue-700); display: block; margin-bottom: 3px; }
.transcript-toggle {
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--reba-blue-700);
    cursor: pointer;
}
.transcript-toggle summary { list-style: none; }
.transcript-toggle summary::-webkit-details-marker { display: none; }
.transcript-body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.t-bubble { font-size: 0.84rem; padding: 7px 10px; border-radius: 9px; max-width: 85%; }
.t-assistant { background: var(--reba-bg); border: 1px solid var(--reba-border); }
.t-user { background: var(--reba-ink); color: var(--reba-white); align-self: flex-end; }
.employee-pill {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--reba-ok);
    background: var(--reba-ok-bg);
    border-radius: 999px;
    padding: 2px 9px;
}