/**
 * Homepage hero chat — teaser inside .hero-experience-card, plus the
 * full-screen overlay. All selectors are prefixed .khc- so nothing here can
 * leak into the nausys card styling or the chat app's own .kx- styles.
 */

/* ── Teaser ─────────────────────────────────────────────────────────── */
/* init() sets child.hidden = true on the card's original children, but the
 * nausys stylesheet (assets/css/header-boat-search.css) carries an author
 * rule — .hero-card-cta{display:inline-block} — that outranks the UA
 * [hidden]{display:none} rule, leaving the legacy CTA visible and clickable
 * underneath the teaser. Force it back off. !important is required to beat
 * an author-level display rule from a stylesheet we are not allowed to touch. */
.hero-experience-card > [hidden] {
    display: none !important;
}

/* ── Equal hero columns (chat card = search card) ───────────────────── */
/* Equal columns via Grid. The nausys plugin styles .hero-two-col as
 * display:flex and sizes the two children 60/38 via flex-basis — but with
 * different inner padding on the two cards, flexbox cannot make them equal
 * width (the padded search card grows wider). Grid 1fr/1fr sizes the tracks
 * independently of each item's padding, so the two cards are exactly equal.
 * !important overrides the plugin's display:flex; the plugin's gap:24px is
 * inherited as the grid gap. Everything lives in this file, so switching the
 * feature off restores the plugin's original flex 60/38 untouched.
 * width:100% !important is also required: the parent theme's style.min.css
 * has `.main-search-container.alt-search-box .main-search-input{width:480px}`
 * (higher specificity, 3 classes), which flexbox ignored because a non-auto
 * flex-basis suppresses the `width` property on a flex item — but a grid item
 * has no such suppression, so without this override the search card reverted
 * to a fixed 480px instead of stretching to its grid track. Scoped to
 * `.hero-two-col >` so the sitewide 480px alt-search-box rule is untouched
 * everywhere else it's used. */
.hero-two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    /* start, not stretch: the search card sizes to its own content instead of
     * being pulled down to match the taller chat card (which would leave empty
     * white space at its bottom). Both cards top-align; the chat card is free to
     * be taller. */
    align-items: start;
}
.hero-two-col > .main-search-input,
.hero-two-col > .hero-experience-card {
    width: 100% !important;
    min-width: 0;
}

/* The nausys plugin stacks the two hero cards vertically on tablet/phone via
 * `@media (max-width: 992px){ .hero-two-col{ flex-direction: column } }` in
 * assets/css/header-boat-search.css (not ours to edit). Our unconditional
 * `display: grid !important` above overrides `display` at ALL widths, so that
 * plugin rule can no longer take effect and the two cards stayed side-by-side
 * as two crushed columns on mobile. Collapse the grid to one column at the
 * same 992px breakpoint so the cards stack full-width again, matching the
 * plugin's intended mobile behaviour. */
@media (max-width: 992px) {
    .hero-two-col { grid-template-columns: 1fr; }
}

/* The card becomes a chat column: header top, log grows, composer bottom.
 * Override the nausys card's centred padding for a conversation layout. */
.hero-experience-card {
    padding: 0 !important;
    justify-content: stretch !important;
}

.hero-experience-card .khc-teaser {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 340px;
    padding: 0;
}

/* Header: avatar + name + live status */
.khc-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.khc-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: linear-gradient(135deg, #2bd4c4, #1f9ab0);
}

.khc-titles { display: flex; flex-direction: column; min-width: 0; }

.khc-name { font-size: 15px; font-weight: 700; line-height: 1.2; }

.khc-status {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: rgba(255, 255, 255, .72);
    margin-top: 3px;
}

.khc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .22);
}

/* Message log */
.khc-log {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 22px;
    overflow: hidden;
    min-height: 160px;
}

.khc-msg {
    max-width: 84%;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.45;
    border-radius: 16px;
    opacity: 0;
    transform: translateY(8px);
    animation: khc-rise .4s forwards;
}

@keyframes khc-rise { to { opacity: 1; transform: none; } }

.khc-msg--bot {
    align-self: flex-start;
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .14);
    border-bottom-left-radius: 5px;
}

.khc-msg--me {
    align-self: flex-end;
    background: rgba(255, 255, 255, .92);
    color: #0b1b3a;
    font-weight: 500;
    border-bottom-right-radius: 5px;
}

.khc-msg--card {
    align-self: flex-start;
    width: 76%;
    max-width: 290px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    color: #0b1b3a;
    border-radius: 14px;
}

.khc-msg--card .khc-card-ph {
    height: 96px;
    background: linear-gradient(135deg, #9fd7e8, #2f88a6);
}

.khc-msg--card .khc-card-b { padding: 9px 13px; }
.khc-msg--card .khc-card-b b { display: block; font-size: 14px; }
.khc-msg--card .khc-card-b span { font-size: 12.5px; color: #41506e; }

/* Typing indicator */
.khc-typing {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, .11);
    border-radius: 16px;
    border-bottom-left-radius: 5px;
}

.khc-typing i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
    animation: khc-blink 1.2s infinite;
}

.khc-typing i:nth-child(2) { animation-delay: .2s; }
.khc-typing i:nth-child(3) { animation-delay: .4s; }

@keyframes khc-blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* Hand-over: the demo dims and is tagged; the bot's question to the visitor is bright. */
.khc-log.is-done .khc-msg { opacity: .5; filter: saturate(.85); }

.khc-demo-tag {
    align-self: center;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    opacity: 0;
    animation: khc-rise .4s forwards;
}

.khc-handover {
    align-self: flex-start;
    max-width: 90%;
    padding: 12px 15px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 194, 51, .16);
    border: 1px solid rgba(255, 194, 51, .5);
    border-radius: 16px;
    border-bottom-left-radius: 5px;
    opacity: 0;
    transform: translateY(8px);
    animation: khc-rise .45s forwards;
}

.khc-log.is-done .khc-handover { opacity: 1; filter: none; }

.khc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 22px 12px;
}

.khc-chip {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .20);
    color: inherit;
    border-radius: 999px;
    padding: 7px 13px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}

.khc-chip:hover { background: rgba(255, 255, 255, .20); }

/* Once handed over, chips read as "tap to start". */
.khc-chips.is-live .khc-chip {
    background: rgba(255, 194, 51, .14);
    border-color: rgba(255, 194, 51, .55);
}
.khc-chips.is-live .khc-chip:hover { background: rgba(255, 194, 51, .28); }

/* The composer sits ON the dark card, so it is styled like the bubble and the
   chips rather than as a white pill — the field should read as part of the
   conversation surface, not as a form control dropped on top of it. */
.khc-composer {
    margin: 0 16px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 999px;
    padding: 5px 5px 5px 18px;
}

/* Gold ring while the field waits for the visitor after hand-over. */
.khc-composer.is-live {
    border-color: rgba(255, 194, 51, .75);
    box-shadow: 0 0 0 3px rgba(255, 194, 51, .14);
}

/* The parent theme styles every text input with its own white box, border,
   height and margin, which is what made the field stand out inside the pill.
   Every one of those has to be overridden explicitly. */
.hero-experience-card input.khc-input,
.khc-input {
    flex: 1;
    min-width: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 0;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: #fff;
}

.hero-experience-card input.khc-input:focus,
.khc-input:focus {
    border: 0;
    box-shadow: none;
    background: transparent;
    color: #fff;
}

.khc-input::placeholder { color: rgba(255, 255, 255, .62); opacity: 1; }

.khc-send {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111f52;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The whole card is the entry point to the conversation. */
.hero-experience-card { cursor: pointer; }

.khc-send svg { width: 18px; height: 18px; }

.khc-chip:focus-visible,
.khc-send:focus-visible,
.khc-input:focus-visible,
.khc-close:focus-visible { outline: 2px solid #ffc233; outline-offset: 2px; }

@media (max-width: 860px) {
    .khc-chips { display: none; }
    .hero-experience-card .khc-teaser { min-height: 0; }
    .khc-log { min-height: 120px; }
}

/* ── Full-screen overlay ────────────────────────────────────────────── */
.khc-overlay {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Discovered while verifying Finding 2 live: .main-search-container (the
     * hero section's own wrapper, still a body-level stacking context since
     * none of its ancestors up to <body> create one) carries z-index:999 —
     * same tier as the header bar — and geometrically overlaps this overlay's
     * box. At the old z-index:900 that container painted ON TOP of the whole
     * chat overlay, not just the header, so the × (and parts of the app
     * underneath it) were unclickable independent of the headerBottom() fix.
     * 1000 clears every ordinary page-content z-index (999) and the site's
     * transient in-page widgets sitting at 1000, while staying below the
     * actual sticky header wrapper (#header-container, z-index:1001) so the
     * header stays visibly and functionally on top, as designed. */
    z-index: 1000;
    background: #f6f8fb;
    overflow: hidden;
    transform-origin: top left;
}

.khc-overlay[hidden] { display: none; }

.khc-overlay #kymma-chat-exp-root { height: 100%; }

.khc-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(11, 27, 58, .14);
    background: #fff;
    color: #0b1b3a;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(11, 27, 58, .16);
}

.khc-close:hover { background: #eef2f7; }

body.khc-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .khc-msg,
    .khc-handover,
    .khc-demo-tag { animation: none; opacity: 1; transform: none; }
    .khc-log.is-done .khc-msg { opacity: .5; }
    .khc-typing i { animation: none; }
}