/* Lion Chatbot widget - premium chat surface.
   Kept in its own stylesheet so the widget frame never inherits admin styles. */

:root {
    color-scheme: light;
    --w-brand: #20a461;
    /* the accent, used on the visitor's own message bubble */
    --w-brand-2: #17804b;
    --w-ink: #0f2740;
    --w-muted: #64798f;
    --w-line: #e3ecf5;
    --w-surface: #ffffff;
    --w-surface-2: #f6fafd;
    /* flat message-list fill: the "New" divider label paints itself with this so the
       hairline appears to run behind the word */
    --w-thread: #f7fafd;
    --w-alert: #e11d48;
    --w-disabled: #cbd5e1;
    --w-radius: 20px;
    --w-shadow: 0 18px 40px rgba(15, 39, 64, 0.10);
    --w-pop-shadow: 0 14px 34px rgba(15, 39, 64, 0.18);
    --w-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Every brand surface is a single flat colour, so these tints are all derived from
       --w-brand alone. They used to be hard-coded copies of the default teal, so a site
       that picked purple got purple panels but teal borders, focus rings and chips. */
    --w-brand-tint: color-mix(in srgb, var(--w-brand) 8%, transparent);
    --w-brand-tint-2: color-mix(in srgb, var(--w-brand) 15%, transparent);
    --w-brand-edge: color-mix(in srgb, var(--w-brand) 32%, transparent);
    --w-brand-ring: color-mix(in srgb, var(--w-brand) 20%, transparent);
    --w-brand-glow: color-mix(in srgb, var(--w-brand) 28%, transparent);
    --w-alert-soft: color-mix(in srgb, var(--w-alert) 34%, transparent);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    color: var(--w-ink);
    background: var(--w-thread);
    -webkit-font-smoothing: antialiased;
}

.shell {
    position: relative; /* anchors the end-chat sheet overlay */
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--w-thread);
}

/* ---------- header ---------- */

/* The bar itself is invisible: the identity sits on a floating pill and the controls
   sit in the corners, so the message list reads as one continuous surface. */
.hdr {
    position: relative;
    /* the overflow menu is anchored here and has to escape the bar */
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 12px 8px;
    color: var(--w-ink);
    background: transparent;
    flex: 0 0 auto;
}

.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;
}

/* the centred identity capsule */
.hdr__pill {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    max-width: calc(100% - 120px);
    padding: 6px 14px 6px 7px;
    border-radius: 999px;
    background: var(--w-surface);
    box-shadow: 0 3px 12px rgba(15, 39, 64, 0.13);
}

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

.hdr__pill--status {
    gap: 7px;
    padding: 9px 15px;
    color: #7c4a03;
    background: #fbbf24;
    font-weight: 700;
    font-size: 0.83rem;
}

.hdr__pill--status svg { flex: 0 0 auto; }

.hdr__actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

/* corner controls: size toggle on the left, menu and close on the right */
.hdr__corner {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: transparent;
    color: var(--w-muted);
    cursor: pointer;
    transition: background 0.18s var(--w-ease), color 0.18s var(--w-ease), transform 0.15s var(--w-ease);
}

.hdr__corner svg { width: 18px; height: 18px; display: block; }
.hdr__corner:hover { background: rgba(15, 39, 64, 0.07); color: var(--w-ink); }
.hdr__corner:active { transform: scale(0.92); }

.hdr__corner:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--w-brand-ring);
}

.hdr__corner[aria-expanded="true"] { background: rgba(15, 39, 64, 0.09); color: var(--w-ink); }

.hdr__avatar {
    position: relative;
    isolation: isolate; /* keeps the pulsing halo behind the avatar face */
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
    background: #1f2937;
}

/* live presence dot on the profile: solid green core plus a pulsing halo */
.hdr__dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid var(--w-surface);
    transition: background 0.25s var(--w-ease);
}

.hdr__dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.55);
    animation: livePulse 1.9s ease-out infinite;
    z-index: -1;
}

@keyframes livePulse {
    0%   { transform: scale(0.7); opacity: 0.85; }
    70%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}

/* offline: grey and no pulse */
.hdr__dot--off { background: #94a3b8; border-color: #64748b; }
.hdr__dot--off::after { animation: none; opacity: 0; }

.hdr__title { display: block; font-weight: 700; font-size: 0.88rem; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr__sub {
    margin: 0;
    font-size: 0.7rem;
    color: var(--w-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* overflow card under the three-dots button */
.menu {
    position: absolute;
    top: 60px;
    right: 12px;
    z-index: 40;
    width: 200px;
    padding: 6px;
    display: grid;
    gap: 2px;
    background: var(--w-surface);
    border: 1px solid var(--w-line);
    border-radius: 12px;
    box-shadow: var(--w-pop-shadow);
    color: var(--w-ink);
    animation: rise 0.16s var(--w-ease) both;
}

/* nested in the header (the usual case) it hangs off the bar itself */
.hdr .menu { top: calc(100% - 6px); }

.menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--w-ink);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s var(--w-ease);
}

.menu__item svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--w-muted);
}

.menu__item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__item:hover { background: var(--w-surface-2); }

/* Hit-testing still reaches a disabled button, so :hover would otherwise light up
   a row that swallows the click. Nothing to download until a chat exists. */
.menu__item:disabled { color: var(--w-muted); opacity: 0.5; cursor: default; }
.menu__item:disabled:hover { background: transparent; }

.menu__item:focus-visible {
    outline: none;
    background: var(--w-brand-tint);
    box-shadow: inset 0 0 0 2px var(--w-brand-edge);
}

/* ---------- tabs ---------- */

.tabs {
    flex: 0 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 12px 14px 0;
    padding: 4px;
    background: var(--w-surface-2);
    border: 1px solid var(--w-line);
    border-radius: 14px;
}

.tabs__ink {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 10px;
    background: var(--w-brand);
    box-shadow: 0 6px 14px var(--w-brand-glow);
    transition: transform 0.32s var(--w-ease);
}

.tabs__ink--right { transform: translateX(100%); }

.tab {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    padding: 9px 10px;
    border-radius: 10px;
    font: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--w-muted);
    cursor: pointer;
    transition: color 0.25s var(--w-ease);
}

.tab--active { color: #fff; }

/* ---------- status ---------- */

/*
 * Only surfaced for warnings and errors. Routine chatter like "Connected to live
 * chat" is noise, but the bar still has to exist so a failed send or an ended chat
 * can be reported.
 */
.status {
    flex: 0 0 auto;
    margin: 10px 14px 0;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.79rem;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: rise 0.24s var(--w-ease) both;
}

.status--warn { background: rgba(217, 119, 6, 0.12); color: #92400e; }
.status--err { background: rgba(190, 18, 60, 0.10); color: #9f1239; }

.status__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* ---------- panels ---------- */

.body {
    flex: 1;
    min-height: 0;
    min-width: 0;
    padding: 12px 14px 14px;
    display: flex;
}

.panel {
    position: relative; /* fallback anchor for the emoji panel */
    flex: 1;
    min-height: 0;
    /* Load-bearing. .panel is a flex item of the row container .body, so min-width:
       auto pins it to its min-content width -- one nowrap suggestion chip then
       stretches it past the frame, where .shell (overflow-x:hidden) clips it. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: rise 0.34s var(--w-ease) both;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: #d6e3ee; border-radius: 99px; }

/* ---------- FAQ ---------- */

.node { display: flex; flex-direction: column; gap: 8px; }
.node h1 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.node p { margin: 0; color: var(--w-muted); font-size: 0.88rem; line-height: 1.5; }

.node__desc {
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--w-surface-2);
    border: 1px solid var(--w-line);
    white-space: pre-wrap;
    line-height: 1.55;
    font-size: 0.89rem;
}

.options { display: grid; gap: 9px; padding: 2px; }

.option {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    width: 100%;
    border: 1px solid var(--w-line);
    background: var(--w-surface);
    border-radius: 14px;
    padding: 12px 14px;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(17, 50, 76, 0.045);
    transition: transform 0.18s var(--w-ease), box-shadow 0.18s var(--w-ease), border-color 0.18s var(--w-ease);
    animation: rise 0.3s var(--w-ease) both;
}

.option:hover {
    transform: translateY(-2px);
    border-color: var(--w-brand-edge);
    box-shadow: 0 10px 22px var(--w-brand-tint-2);
}

.option:active { transform: translateY(0); }

.option__body { flex: 1; min-width: 0; }
.option strong { display: block; font-size: 0.9rem; }
.option span { display: block; color: var(--w-muted); font-size: 0.79rem; margin-top: 2px; }
.option__chev { color: #a9bccd; flex: 0 0 auto; transition: transform 0.2s var(--w-ease); }
.option:hover .option__chev { transform: translateX(3px); }

.foot { display: flex; gap: 9px; flex: 0 0 auto; }

.btn {
    border: 0;
    border-radius: 13px;
    padding: 11px 14px;
    font: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.16s var(--w-ease), filter 0.16s var(--w-ease), opacity 0.16s var(--w-ease);
}

.btn:active { transform: scale(0.975); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn--ghost { background: var(--w-surface-2); color: var(--w-ink); border: 1px solid var(--w-line); flex: 0 0 auto; }
.btn--ghost:hover { filter: brightness(0.97); }

.btn--primary {
    flex: 1;
    color: #fff;
    background: var(--w-brand);
    box-shadow: 0 8px 18px var(--w-brand-glow);
}

.btn--primary:hover { filter: brightness(1.06); }

/* ---------- returning visitor ---------- */

.prev { display: grid; gap: 9px; }
.prev__head { display: flex; flex-direction: column; gap: 3px; }
.prev__head h2 { margin: 0; font-size: 0.98rem; }
.prev__head p { margin: 0; color: var(--w-muted); font-size: 0.83rem; }

.prev__item {
    width: 100%;
    text-align: left;
    border: 1px solid var(--w-line);
    background: var(--w-surface);
    border-radius: 14px;
    padding: 11px 13px;
    font: inherit;
    cursor: pointer;
    display: grid;
    gap: 3px;
    transition: border-color 0.18s var(--w-ease), transform 0.18s var(--w-ease);
}

.prev__item:hover { border-color: var(--w-brand-edge); transform: translateY(-1px); }
.prev__item b { font-size: 0.86rem; }
.prev__meta { display: flex; justify-content: space-between; gap: 8px; color: var(--w-muted); font-size: 0.76rem; }
.prev__snippet {
    color: var(--w-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- messages ---------- */

.thread {
    flex: 1;
    min-height: 0;
    /* Row-axis twin of min-height. Without it this flex item keeps min-width:auto
       and cannot shrink below its min-content width. */
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Extra room at the top so the hover tooltip on the first message is not
       clipped by this scroll container. */
    padding: 26px 12px 12px;
    border-radius: 16px;
    /* flat rather than a gradient so inline cards and the "New" divider can match it */
    background: var(--w-thread);
    border: 1px solid var(--w-line);
    scroll-behavior: smooth;
}

.thread::-webkit-scrollbar { width: 8px; }
.thread::-webkit-scrollbar-thumb { background: #d6e3ee; border-radius: 99px; }

.msg {
    max-width: 85%;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    animation: pop 0.3s var(--w-ease) both;
}

@keyframes pop {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.msg--me { align-self: flex-end; flex-direction: row-reverse; }

.msg__avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    background: #64748b;
}

.msg--agent .msg__avatar { background: #1f2937; }

/* The visitor needs no avatar to know which side is theirs, and dropping it lets
   their own line sit flush against the edge. */
.msg--me .msg__avatar { display: none; }

.msg__bubble {
    padding: 9px 13px;
    border-radius: 18px;
    background: var(--w-surface);
    border: 1px solid var(--w-line);
    box-shadow: 0 2px 6px rgba(19, 46, 72, 0.04);
    min-width: 0;
}

/* The visitor's own line is the one surface that carries the accent colour, so the
   second admin colour still does something. Set both site colours to the same value
   for a single-colour widget. */
.msg--me .msg__bubble {
    background: var(--w-brand-2);
    border-color: transparent;
    color: #fff;
}

/* Who said it and when float above the bubble on hover, as a tooltip. They used to
   sit inside the bubble, which reserved an empty row on every single message. */
.msg__bubble { position: relative; }

.msg__meta {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 6;
    display: flex;
    gap: 6px;
    align-items: baseline;
    width: max-content;
    max-width: 240px;
    padding: 4px 9px;
    border-radius: 7px;
    background: #0f2740;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    /* Non-interactive, so it can never swallow a click meant for the bubble. */
    pointer-events: none;
    transition: opacity 0.14s var(--w-ease);
}

/* The visitor's own bubbles hug the right edge, so their tooltip does too. */
.msg--me .msg__meta { left: auto; right: 0; }

.msg:hover .msg__meta,
.msg:focus-within .msg__meta { opacity: 1; }

.msg__who { font-size: 0.71rem; font-weight: 700; }
.msg__time { font-size: 0.68rem; opacity: 0.75; }

/* Text and tick on one row: the tick sits against the last line for a wrapped
   message and beside the words for a short one. */
.msg__line { display: flex; align-items: flex-end; gap: 9px; }
.msg__line .msg__text { flex: 1 1 auto; min-width: 0; }

/* Never fades - a receipt has to be readable without hovering. */
.msg__receipt {
    flex: 0 0 auto;
    font-size: 0.72rem;
    line-height: 1.7;
    letter-spacing: -0.09em;
    opacity: 0.65;
}

.msg__receipt--seen { color: #38bdf8; opacity: 1; }

@media (hover: none) {
    /* No hover on touch: tapping the bubble reveals it instead. */
    .msg:focus-within .msg__meta { opacity: 1; }
}
.msg__text { margin: 0; white-space: pre-wrap; word-break: break-word; line-height: 1.5; font-size: 0.88rem; }

/* quoted reply inside a bubble */
.msg__quote {
    display: block;
    margin: 0 0 6px;
    padding: 6px 9px;
    border-left: 3px solid var(--w-brand);
    border-radius: 8px;
    background: var(--w-brand-tint);
    font-size: 0.78rem;
    line-height: 1.4;
    cursor: pointer;
}

.msg--me .msg__quote {
    border-left-color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.16);
}

.msg__quote b { display: block; font-size: 0.74rem; opacity: 0.9; }
.msg__quote span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0.85;
}

/* hover action to reply to a message */
.msg__reply-btn {
    align-self: center;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--w-muted);
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.16s var(--w-ease), background 0.16s var(--w-ease);
}

.msg:hover .msg__reply-btn,
.msg__reply-btn:focus-visible { opacity: 1; }
.msg__reply-btn:hover { background: var(--w-surface-2); color: var(--w-ink); }

/* reply composer banner */
.reply-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border-radius: 11px;
    background: var(--w-surface-2);
    border: 1px solid var(--w-line);
    border-left: 3px solid var(--w-brand);
    animation: rise 0.22s var(--w-ease) both;
}

.reply-bar__body { flex: 1; min-width: 0; }
.reply-bar__body b { display: block; font-size: 0.75rem; color: var(--w-brand); }
.reply-bar__body span {
    display: block;
    font-size: 0.79rem;
    color: var(--w-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-bar__cancel {
    border: 0;
    background: transparent;
    color: var(--w-muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 7px;
}

.reply-bar__cancel:hover { background: #e7eef5; color: var(--w-ink); }

/* inactivity nudge that reveals the end-chat action */
.idle-nudge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(217, 119, 6, 0.09);
    border: 1px solid rgba(217, 119, 6, 0.22);
    color: #92400e;
    font-size: 0.81rem;
    animation: rise 0.3s var(--w-ease) both;
}

.idle-nudge span { flex: 1; }

.idle-nudge button {
    border: 1px solid rgba(146, 64, 14, 0.3);
    background: #fff;
    color: #92400e;
    border-radius: 9px;
    padding: 6px 11px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.idle-nudge button:hover { background: #fffbeb; }

/* end-chat rating sheet */
.sheet {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 39, 64, 0.32);
    backdrop-filter: blur(3px);
    animation: fade 0.22s var(--w-ease) both;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet__card {
    width: 100%;
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 24px 50px rgba(15, 39, 64, 0.28);
    animation: rise 0.28s var(--w-ease) both;
}

.sheet__card h2 { margin: 0 0 3px; font-size: 1rem; }
.sheet__card p { margin: 0 0 13px; color: var(--w-muted); font-size: 0.83rem; }

.stars { display: flex; gap: 5px; margin-bottom: 13px; }

.star {
    border: 0;
    background: transparent;
    font-size: 1.65rem;
    line-height: 1;
    padding: 2px;
    cursor: pointer;
    color: #d6e0ea;
    transition: transform 0.16s var(--w-ease), color 0.16s var(--w-ease);
}

.star:hover { transform: scale(1.16); }
.star.is-on { color: #f59e0b; }

.sheet__label {
    display: block;
    font-size: 0.79rem;
    font-weight: 700;
    color: #45607a;
    margin-bottom: 5px;
}

.sheet select,
.sheet textarea {
    width: 100%;
    border: 1px solid var(--w-line);
    border-radius: 11px;
    padding: 9px 11px;
    font: inherit;
    font-size: 0.85rem;
    background: #fff;
    color: var(--w-ink);
    margin-bottom: 12px;
}

.sheet textarea { min-height: 62px; resize: vertical; }

.sheet select:focus,
.sheet textarea:focus {
    outline: none;
    border-color: var(--w-brand);
    box-shadow: 0 0 0 3px var(--w-brand-ring);
}

.sheet__actions { display: flex; gap: 9px; }
.sheet__actions .btn { flex: 1; }

/* closed conversation notice */
.closed-note {
    display: grid;
    gap: 9px;
    justify-items: center;
    text-align: center;
    padding: 14px;
    border-radius: 14px;
    background: var(--w-surface-2);
    border: 1px dashed var(--w-line);
    color: var(--w-muted);
    font-size: 0.84rem;
    animation: rise 0.28s var(--w-ease) both;
}

.closed-note strong { color: var(--w-ink); font-size: 0.9rem; }

/* "read more" link under an answer */
.msg__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding: 7px 12px;
    border-radius: 10px;
    background: var(--w-brand-tint);
    border: 1px solid var(--w-brand-edge);
    color: var(--w-brand);
    font-size: 0.79rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.16s var(--w-ease), transform 0.16s var(--w-ease);
}

.msg__link:hover { background: var(--w-brand-tint-2); transform: translateY(-1px); }
.msg__link::after { content: "→"; }

/* inline links found inside answer text */
.msg__text a {
    color: var(--w-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}

.msg--me .msg__text a { color: #fff; }

/* suggestion chips offered inside the conversation */
.chips {
    display: flex;
    flex-wrap: wrap;
    /* Bounded so a wide chip cannot stretch the row past the panel. */
    min-width: 0;
    max-width: 100%;
    gap: 7px;
    padding: 2px 0 2px 34px;
    animation: rise 0.3s var(--w-ease) both;
}

.chips--intro { padding-left: 0; }

.chip-btn {
    border: 1px solid var(--w-brand-edge);
    background: #fff;
    color: var(--w-brand);
    border-radius: 999px;
    padding: 8px 13px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    /* One line only. An analysed page can produce a question long enough to fill the
       panel; the full text is on the title attribute, shown on hover.

       min-width: 0 is the load-bearing part. A flex item defaults to min-width: auto,
       which refuses to shrink below its own text width, so the chip would push past
       the panel edge and text-overflow would never engage. */
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.16s var(--w-ease), transform 0.16s var(--w-ease), box-shadow 0.16s var(--w-ease);
}

.chip-btn:hover {
    background: var(--w-brand-tint);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px var(--w-brand-tint-2);
}

.chip-btn:active { transform: translateY(0); }

/* the escalation chip stands apart from the question chips */
.chip-btn--live {
    background: var(--w-brand);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 14px var(--w-brand-glow);
}

.chip-btn--live:hover { background: var(--w-brand); filter: brightness(1.07); }

.chips__label {
    width: 100%;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--w-muted);
    margin-bottom: 1px;
}

/* typing indicator */
.typing { display: flex; gap: 4px; align-items: center; padding: 3px 2px; }
.typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--w-muted);
    animation: blink 1.3s infinite ease-in-out;
}
.typing i:nth-child(2) { animation-delay: 0.18s; }
.typing i:nth-child(3) { animation-delay: 0.36s; }

@keyframes blink {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- unread boundary ---------- */

/*
 * The label paints itself with the thread fill so the rule reads as one continuous
 * hairline running behind the word.
 */
.new-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 2px;
    animation: rise 0.24s var(--w-ease) both;
}

.new-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--w-alert-soft);
}

.new-divider span {
    position: relative;
    padding: 0 10px;
    background: var(--w-thread);
    color: var(--w-alert);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ---------- message attribution ---------- */

/* sits under the last message of a consecutive agent run, aligned past the avatar */
.attrib {
    margin: -4px 0 2px;
    padding-left: 34px;
    color: var(--w-muted);
    font-size: 0.72rem;
    line-height: 1.3;
}

/* ---------- answer sources ---------- */

.sources {
    display: grid;
    gap: 3px;
    margin-top: 7px;
    font-size: 0.75rem;
    line-height: 1.4;
}

.sources b { color: var(--w-ink); font-weight: 700; }

.sources a {
    color: var(--w-brand);
    text-decoration: none;
    word-break: break-word;
}

.sources a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* inverted when the block lands inside a visitor-side bubble */
.msg--me .sources b,
.msg--me .sources a { color: #fff; }

/* rendered as a thread sibling rather than inside the bubble */
.thread > .sources { padding-left: 34px; margin-top: 0; }

/* ---------- inline rating card ---------- */

.rate {
    align-self: stretch;
    margin: 4px 0 2px;
    padding: 14px 12px 12px;
    background: var(--w-surface);
    border: 1px solid var(--w-line);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(19, 46, 72, 0.05);
    animation: rise 0.3s var(--w-ease) both;
}

.rate__prompt {
    margin: 0 0 12px;
    text-align: center;
    color: var(--w-muted);
    font-size: 0.84rem;
    font-weight: 600;
}

.rate__faces {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

/*
 * Faces rest slightly desaturated; picking one saturates it and greys the rest, so the
 * choice is obvious without any extra chrome.
 */
.rate__face {
    border: 0;
    background: transparent;
    padding: 2px;
    border-radius: 50%;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    filter: saturate(0.7);
    transition: transform 0.18s var(--w-ease), filter 0.18s var(--w-ease), opacity 0.18s var(--w-ease);
}

.rate__face:hover { filter: none; transform: scale(1.12); }

.rate__face:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--w-brand-ring);
}

.rate__face.is-picked { filter: none; transform: scale(1.15); }
.rate__face.is-dim { filter: grayscale(1); opacity: 0.42; transform: none; }

.rate__more {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--w-line);
    animation: rise 0.22s var(--w-ease) both;
}

.rate__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 6px 2px;
    font: inherit;
    font-size: 0.86rem;
    color: var(--w-ink);
}

.rate__input:focus { outline: none; }
.rate__input::placeholder { color: var(--w-muted); }

.rate__send {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    padding: 0;
    color: #fff;
    background: var(--w-brand);
    box-shadow: 0 4px 10px var(--w-brand-glow);
    cursor: pointer;
    transition: filter 0.16s var(--w-ease), transform 0.16s var(--w-ease);
}

.rate__send svg {
    width: 16px;
    height: 16px;
    display: block;
}

.rate__send:hover { filter: brightness(1.07); }
.rate__send:active { transform: scale(0.94); }

.rate__send:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--w-brand-ring);
}

/* the card is replaced in place once the rating is submitted */
.rate--done {
    padding: 14px 12px;
    text-align: center;
}

.rate__done {
    margin: 0;
    color: var(--w-ink);
    font-size: 0.86rem;
    font-weight: 700;
}

.rate__thanks {
    margin: 4px 0 0;
    color: var(--w-muted);
    font-size: 0.8rem;
}

/* ---------- forms ---------- */

.card {
    background: #fff;
    border: 1px solid var(--w-line);
    border-radius: 16px;
    padding: 15px;
}

.card h2 { margin: 0 0 3px; font-size: 0.98rem; }
.card p { margin: 0; color: var(--w-muted); font-size: 0.83rem; line-height: 1.45; }

.form { display: grid; gap: 11px; margin-top: 13px; }
.form label { display: grid; gap: 5px; font-size: 0.82rem; font-weight: 600; color: #45607a; }

.field-hint {
    font-size: 0.74rem;
    font-weight: 400;
    color: var(--w-muted);
    line-height: 1.35;
}

.form input {
    width: 100%;
    border: 1px solid var(--w-line);
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    font-size: 0.88rem;
    background: #fff;
    color: var(--w-ink);
    transition: border-color 0.18s var(--w-ease), box-shadow 0.18s var(--w-ease);
}

.form input:focus {
    outline: none;
    border-color: var(--w-brand);
    box-shadow: 0 0 0 3px var(--w-brand-ring);
}

.empty {
    display: grid;
    place-items: center;
    gap: 6px;
    min-height: 150px;
    padding: 22px;
    text-align: center;
    color: var(--w-muted);
    font-size: 0.85rem;
    border: 1px dashed #cfe0ea;
    border-radius: 16px;
    background: rgba(255,255,255,0.6);
}

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

/* one rounded bar: borderless textarea, emoji toggle, round send button */
.composer {
    position: relative; /* anchors the emoji panel */
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 6px 6px 6px 12px;
    background: var(--w-surface);
    border: 1px solid var(--w-line);
    border-radius: 22px;
    box-shadow: 0 2px 10px rgba(19, 46, 72, 0.05);
    transition: border-color 0.18s var(--w-ease), box-shadow 0.18s var(--w-ease);
}

.composer:focus-within {
    border-color: var(--w-brand-edge);
    box-shadow: 0 0 0 3px var(--w-brand-ring);
}

/*
 * The textarea and the accessory buttons are wrapped in .composer__box, so the row
 * layout lives here rather than on .composer - the emoji panel is the composer's other
 * child and must stay out of the flow.
 */
.composer__box {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.composer__tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.composer textarea {
    flex: 1;
    min-width: 0;
    width: 100%;
    min-height: 32px;
    max-height: 110px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--w-ink);
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.45;
    resize: none;
}

.composer textarea:focus { outline: none; box-shadow: none; }
.composer textarea::placeholder { color: var(--w-muted); }

/*
 * .btn--primary is matched as well so the bar still looks right if the submit button
 * keeps the shared button class.
 */
.composer__send,
.composer .btn--primary {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--w-brand);
    box-shadow: 0 4px 10px var(--w-brand-glow);
    cursor: pointer;
    transition: background 0.18s var(--w-ease), filter 0.16s var(--w-ease), transform 0.16s var(--w-ease), box-shadow 0.18s var(--w-ease);
}

.composer__send svg,
.composer .btn--primary svg {
    width: 16px;
    height: 16px;
    display: block;
}

.composer__send:hover:not(:disabled),
.composer .btn--primary:hover:not(:disabled) { filter: brightness(1.07); }

.composer__send:active:not(:disabled),
.composer .btn--primary:active:not(:disabled) { transform: scale(0.94); }

/* grey and inert until the textarea has something in it */
.composer__send:disabled,
.composer .btn--primary:disabled {
    background: var(--w-disabled);
    box-shadow: none;
    opacity: 1;
    cursor: default;
}

.composer__send:focus-visible,
.composer .btn--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--w-brand-ring);
}

/* .composer__icon is the class the composer markup uses for the emoji toggle. */
.emoji-button,
.composer__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--w-muted);
    font: inherit;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.16s var(--w-ease), color 0.16s var(--w-ease);
}

.emoji-button svg,
.composer__icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.emoji-button:hover,
.composer__icon:hover { background: var(--w-surface-2); color: var(--w-ink); }

.emoji-button[aria-expanded="true"],
.composer__icon[aria-expanded="true"] { background: var(--w-brand-tint); color: var(--w-brand); }

.emoji-button:focus-visible,
.composer__icon:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--w-brand-ring);
}

/* self-contained emoji grid, opens above the composer */
.emoji-panel {
    position: absolute;
    bottom: 60px;
    left: 8px;
    z-index: 25;
    width: min(268px, calc(100vw - 40px));
    max-height: 180px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2px;
    padding: 8px;
    background: var(--w-surface);
    border: 1px solid var(--w-line);
    border-radius: 14px;
    box-shadow: var(--w-pop-shadow);
    animation: rise 0.18s var(--w-ease) both;
}

.composer .emoji-panel { bottom: calc(100% + 8px); left: 6px; }

.emoji-panel::-webkit-scrollbar { width: 8px; }
.emoji-panel::-webkit-scrollbar-thumb { background: #d6e3ee; border-radius: 99px; }

.emoji-panel button {
    height: 28px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.14s var(--w-ease), transform 0.14s var(--w-ease);
}

.emoji-panel button:hover { background: var(--w-surface-2); transform: scale(1.12); }

.emoji-panel button:focus-visible {
    outline: none;
    background: var(--w-brand-tint);
    box-shadow: 0 0 0 2px var(--w-brand-edge);
}

/* brand credit under the composer */
.powered-by {
    flex: 0 0 auto;
    margin-top: 8px;
    text-align: center;
    font-size: 0.71rem;
    letter-spacing: 0.01em;
    color: #9a9a9a;
}

/* Small enough to attribute without competing with the tenant's own branding. */
.powered-by img {
    height: 13px;
    width: auto;
    vertical-align: middle;
    margin-left: 3px;
    opacity: 0.85;
}

/* ---------- expanded frame ---------- */

/*
 * The host widens the iframe to ~720px on "Expand window". Without this the thread
 * simply stretches and the conversation reads as one very long line.
 */
.shell.is-expanded .hdr { padding: 16px 20px 16px 18px; }
.shell.is-expanded .body { padding: 16px 20px 18px; }

.shell.is-expanded .panel {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.shell.is-expanded .thread { padding: 18px 20px; gap: 12px; }
.shell.is-expanded .msg { max-width: 72%; }
.shell.is-expanded .composer { padding-left: 14px; }

@media (max-width: 400px) {
    .body { padding: 10px; }
    .tabs { margin: 10px 10px 0; }
    .status { margin: 8px 10px 0; }
    /* five header controls have to fit, so the avatar gives up a few pixels */
    .hdr { gap: 8px; padding: 12px 8px 12px 10px; }
    .hdr__avatar { width: 34px; height: 34px; font-size: 0.85rem; }
    .hdr__corner { width: 30px; height: 30px; }
    .menu { right: 8px; width: 190px; }
    .rate__faces { gap: 8px; }
    .rate__face { font-size: 26px; }
    .composer { padding-left: 10px; }
    .emoji-panel,
    .composer .emoji-panel { left: 4px; right: 4px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        /* Without this the infinite animations (the presence dot, the status pulse,
           the typing dots) do not stop - they run ~100k cycles a second and the
           compositor samples a random phase each frame, which strobes. */
        animation-iteration-count: 1 !important;
        animation-delay: -1ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    /* the smooth jump to a quoted message is motion too */
    .thread { scroll-behavior: auto !important; }
}

/* ---------- waiting for a person ---------- */

.connecting {
    display: flex;
    align-items: center;
    gap: 9px;
    align-self: center;
    max-width: 92%;
    margin: 2px 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--w-brand-tint);
    color: var(--w-muted);
    font-size: 0.79rem;
    animation: rise 0.28s var(--w-ease) both;
}

.connecting--done {
    background: var(--w-brand-tint-2);
    color: var(--w-ink);
    font-weight: 600;
}

.connecting__dots { display: inline-flex; gap: 3px; }

.connecting__dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--w-brand);
    animation: connectingPulse 1.3s ease-in-out infinite;
}

.connecting__dots i:nth-child(2) { animation-delay: 0.18s; }
.connecting__dots i:nth-child(3) { animation-delay: 0.36s; }

@keyframes connectingPulse {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .connecting__dots i { animation: none; opacity: 0.75; }
}

/* ---------- rewrite helpers in the composer ---------- */

.wand-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 8px;
    z-index: 45;
    width: 186px;
    padding: 6px;
    display: grid;
    gap: 2px;
    border-radius: 12px;
    background: var(--w-surface);
    border: 1px solid var(--w-line);
    box-shadow: var(--w-pop-shadow);
    animation: rise 0.16s var(--w-ease) both;
}

.wand-menu__item {
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--w-ink);
    font: inherit;
    font-size: 0.84rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s var(--w-ease);
}

.wand-menu__item:hover { background: var(--w-surface-2); }

.wand-menu__item:focus-visible {
    outline: none;
    background: var(--w-brand-tint);
}

/* Set apart, because it undoes rather than performs. */
.wand-menu__item--undo {
    margin-top: 2px;
    border-top: 1px solid var(--w-line);
    border-radius: 0 0 8px 8px;
    color: var(--w-muted);
    font-weight: 600;
}

/* ---------- files sent in a chat ---------- */

.attach { margin-top: 6px; }

.attach__image {
    display: block;
    max-width: 100%;
    max-height: 220px;
    border-radius: 10px;
    object-fit: cover;
}

.attach__file {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid var(--w-line);
    color: inherit;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    /* A long filename must not stretch the bubble past the panel. */
    max-width: 100%;
    overflow: hidden;
}

.attach__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach__file small { opacity: 0.7; font-weight: 500; }
.attach__file:hover { filter: brightness(1.05); }

/* the visitor's own bubble is dark, so the card needs its own contrast there */
.msg--agent .attach__file { background: var(--w-surface-2); }

/* Agent photo in the header pill, sitting where the initial would be. */
.hdr__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* ==========================================================================
   Short viewports - phones in landscape, and any host page that gives the
   frame very little height.

   Measured before this block: at 640x360 the message thread was 48px tall and
   at 820x400 it was 88px. The header, greeting card and composer are all fixed
   height, so every pixel they take comes straight out of the conversation.
   Here the chrome gives way so the messages keep the room.
   ========================================================================== */
@media (max-height: 460px) {
    .hdr { padding: 6px 10px 4px; }
    .hdr__avatar { width: 30px; height: 30px; font-size: 0.8rem; }
    .hdr__corner { width: 28px; height: 28px; }
    .hdr__sub { display: none; }

    .body { padding: 6px 10px 8px; }
    .panel { gap: 6px; }
    .thread { padding: 10px 10px 8px; border-radius: 12px; }

    /* The greeting is a welcome, not information; the thread needs the space. */
    .empty { display: none !important; }

    .status { margin: 5px 10px 0; padding: 4px 8px; font-size: 0.72rem; }
    .powered-by { display: none; }
}

/* Very short. The identity pill stays: knowing who is replying is worth more
   than the few pixels it costs, and the thread still measured 250px+ with it. */
@media (max-height: 380px) {
    .hdr__pill { padding: 4px 10px 4px 4px; }
    .hdr__pill strong { font-size: 0.84rem; }
    .thread { padding: 8px; }
}

/* A picture fills the circle; the white ground keeps the transparent company mark
   readable on the dark avatar fill it replaces. */
.msg__avatar--img {
    background: #fff !important;
    overflow: hidden;
    padding: 0;
}

.msg__avatar--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- continue with Google, on the pre-chat form ---------- */

.gbtn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 13px;
    border: 1px solid var(--w-line);
    border-radius: 10px;
    /* Google's mark on a neutral surface, per their brand guidance - not recoloured
       to the tenant's palette. */
    background: #fff;
    color: #3c4043;
    font: inherit;
    font-size: 0.87rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s var(--w-ease), box-shadow 0.16s var(--w-ease);
}

.gbtn:hover { background: #f7f8f8; box-shadow: 0 2px 6px rgba(19, 46, 72, 0.08); }
.gbtn:disabled { opacity: 0.6; cursor: default; }
.gbtn svg { flex: 0 0 auto; }

.gbtn__or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0;
    color: var(--w-muted);
    font-size: 0.75rem;
}

.gbtn__or::before,
.gbtn__or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--w-line);
}

.gbtn__note {
    margin: 0;
    font-size: 0.78rem;
    color: var(--w-brand);
    font-weight: 600;
}

.gbtn__note b { font-weight: 700; word-break: break-all; }

/* A verified address is the server's to decide, so the field stops looking editable. */
.form input.is-locked {
    background: var(--w-surface-2);
    color: var(--w-muted);
    cursor: not-allowed;
}

/* Sign-in failures belong beside the button that caused them; the header status
   pill is too far away to be noticed from here. */
.gbtn__error {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #b42318;
}

/* ---------- human check on the pre-chat form ---------- */

.cap { display: grid; gap: 6px; }

.cap__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--w-ink);
}

.cap__row { display: flex; align-items: center; gap: 8px; }

/* The challenge is a fixed-size SVG; the box holds its shape while it reloads. */
.cap__img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 44px;
    padding: 2px 6px;
    border: 1px solid var(--w-line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.cap__img svg { max-width: 100%; height: 100%; display: block; }

.cap__refresh {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 1px solid var(--w-line);
    border-radius: 8px;
    background: #fff;
    color: var(--w-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.cap__refresh:hover { background: var(--w-surface-2); color: var(--w-ink); }

.cap__input { text-transform: uppercase; letter-spacing: 0.14em; }