/*
 * SEO Stormtrooper — front-end customer terminal.
 * Self-contained, scoped under .sst-term so it never fights the host theme.
 */

/* Screen font — the same Didact Gothic bundled in the plugin root that the
 * admin Command Center uses, so the customer terminals match and need no
 * external / Google Fonts dependency. (This file lives in /public, so the
 * font sits one level up.) */
@font-face {
    font-family: 'Didact Gothic';
    src: url('../didact-gothic.regular.otf') format('opentype');
    font-weight: 400; font-style: normal; font-display: swap;
}

.sst-term {
    --sst-term-bg:    #0c1014;
    --sst-term-panel: #0f1519;
    --sst-term-fg:    #cfe9d6;
    --sst-term-accent:#39d353;
    --sst-term-user:  #7fd0ff;
    --sst-term-line:  #1f2a30;
    max-width: 640px;
    margin: 18px auto;
    border: 1px solid var(--sst-term-line);
    border-radius: 10px;
    background: var(--sst-term-bg);
    box-shadow: 0 6px 26px rgba(0,0,0,.35);
    overflow: hidden;
    font-family: "Roboto Condensed", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--sst-term-fg);
}

.sst-term-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    background: var(--sst-term-panel);
    border-bottom: 1px solid var(--sst-term-line);
}
.sst-term-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--sst-term-accent);
    box-shadow: 0 0 8px var(--sst-term-accent);
    flex: 0 0 auto;
}
.sst-term-title {
    font-weight: 600;
    letter-spacing: .04em;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--sst-term-fg);
}

.sst-term-log {
    height: 340px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
    background:
        repeating-linear-gradient(transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
}

.sst-term-msg {
    max-width: 86%;
    padding: 9px 12px;
    border-radius: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.sst-term-bot {
    align-self: flex-start;
    background: var(--sst-term-panel);
    border: 1px solid var(--sst-term-line);
    color: var(--sst-term-fg);
}
.sst-term-user {
    align-self: flex-end;
    background: rgba(127,208,255,.10);
    border: 1px solid rgba(127,208,255,.35);
    color: var(--sst-term-user);
}
.sst-term-err {
    align-self: center;
    background: rgba(255,90,90,.10);
    border: 1px solid rgba(255,90,90,.45);
    color: #ff9b9b;
    font-size: 13px;
    text-align: center;
}

/* blinking caret while the reply streams in */
.sst-term-typing::after {
    content: "▋";
    margin-left: 1px;
    animation: sst-term-blink 1s steps(1) infinite;
    color: var(--sst-term-accent);
}
@keyframes sst-term-blink { 50% { opacity: 0; } }

.sst-term-input {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--sst-term-line);
    background: var(--sst-term-panel);
    margin: 0;
}
.sst-term-field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--sst-term-line);
    background: var(--sst-term-bg);
    color: var(--sst-term-fg);
    font-size: 15px;
    font-family: inherit;
}
.sst-term-field:focus {
    outline: none;
    border-color: var(--sst-term-accent);
    box-shadow: 0 0 0 2px rgba(57,211,83,.18);
}
.sst-term-send {
    flex: 0 0 auto;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: var(--sst-term-accent);
    color: #06210d;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}
.sst-term-send:disabled { opacity: .5; cursor: default; }
.sst-term-send:hover:not(:disabled) { filter: brightness(1.08); }

@media (max-width: 480px) {
    .sst-term-log { height: 300px; font-size: 14px; }
}

/* ===================================================================
 * Skinned mode — chat drawn INSIDE the screen area of a background photo
 * (e.g. a Commodore 64). The image sets the size; an absolutely-positioned
 * "screen" overlay (inset via inline top/right/bottom/left %) holds the text,
 * clipped so it can never spill past the edges you set.
 * =================================================================== */
.sst-term-skinned {
    position: relative;
    /* 460px on desktop, fluid down to any phone width. */
    max-width: 460px;
    width: 100%;
    margin: 18px auto;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.sst-term-skinned .sst-term-bg {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    pointer-events: none;
}
/* ANTI-COLLAPSE FLOOR — "the terminal falls down".
 *
 * This container's ONLY source of height is the skin image above; the chat and input
 * zones are absolutely positioned by PERCENTAGE insets, so they contribute nothing to
 * it. A zero-height container therefore puts every zone at top:0 and, since the
 * container is overflow:visible, they spill out over the page.
 *
 * The proper fix is server-side: class-front-assistant.php puts real width/height
 * ATTRIBUTES on the <img>, which every browser turns into an intrinsic aspect ratio
 * and uses to reserve the correct box BEFORE the image loads. Author CSS (height:auto
 * above) always beats those presentational-hint attributes, so they can never force a
 * wrong height — they only supply the ratio.
 *
 * This floor is the fallback for the ONE case where that is impossible: an external
 * image URL we cannot measure server-side, which arrives with no width attribute. The
 * selector keys off the missing attribute, so it needs no JavaScript and no class
 * toggling — the previous version gated the floor behind a JS-applied class and so
 * switched the guard OFF at exactly the moment it was needed. */
.sst-term-skinned .sst-term-bg:not([width]) { min-height: 200px; }
.sst-term-screen {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;                 /* hard clip: text can't leave the screen */
    /* Anti-collapse guard: the box is pinned by BOTH a top and a bottom inset, so
     * as the top inset is dragged down toward the bottom the box shrinks. Without a
     * floor, once top% + bottom% >= 100 the height hits zero and overflow:hidden
     * erases the whole chat. min-height keeps at least a couple of lines visible —
     * the text stays anchored at the top inset and never vanishes, whatever the two
     * insets add up to. In normal use (a tall box) this never bites. */
    min-height: 3em;
    /* Screen text: the HOST THEME's body/<p> font (Divi etc.), plain — no CRT
     * monospace/glow. Viewport-based clamp (NOT container units — those silently
     * void the whole rule where unsupported, dropping back to Divi's big font). */
    font-family: inherit;
    font-size: clamp(11px, 1.4vw, 13px);
    font-weight: 400;                 /* normal weight — never bold */
    line-height: 1.35;
    letter-spacing: 0;
    text-shadow: none;
    /* Don't pull the text up — the 25px top gap on the log below leaves a clean
     * band at the top of the screen for your own heading. */
    margin-top: 0;
}
.sst-term-screen .sst-term-log {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    /* No fixed pixel offset: the top of the text is the top of the screen inset
     * box, so it lands exactly on the 'top' inset % at EVERY resolution. Reserve
     * any heading band by setting the screen 'top' inset lower (it scales with the
     * image); a hardcoded px pad here would not scale and would shove the first
     * line down off the mark. */
    padding: 0;
    gap: 6px;
    background: none;
    overflow-y: auto;
    scrollbar-width: thin;
    text-align: left;                 /* left-justify the messages */
}
.sst-term-screen .sst-term-msg {
    max-width: 100%;
    padding: 0;
    border: none !important;
    background: none !important;
    color: inherit;
    border-radius: 0;
}
/* Near-white, slightly grey text for the whole skinned screen. The !important
 * overrides the per-terminal Text Colour inline style (so on a skin the chat is
 * always this neutral colour); everything inside inherits it. */
.sst-term-skinned .sst-term-screen,
.sst-term-skinned .sst-term-inputzone {
    color: #dcdce0 !important;
}
/* Force the size + weight onto the text-bearing elements themselves, so Divi's
 * body/content font-size can't win by targeting them directly. Same !important
 * guarantee the colour already relies on. */
.sst-term-skinned .sst-term-msg,
.sst-term-skinned .sst-term-field,
.sst-term-skinned .sst-term-log,
.sst-term-skinned .sst-term-inputzone {
    font-size: clamp(11px, 1.4vw, 13px) !important;
    font-weight: 400 !important;
    font-family: inherit !important;
    line-height: 1.35 !important;
}
/* The typing "prompt" (placeholder) in the same near-white, just dimmer. */
.sst-term-skinned .sst-term-field::placeholder {
    color: #dcdce0;
    opacity: .55;
}
.sst-term-screen .sst-term-user { opacity: .85; }
.sst-term-screen .sst-term-user::before { content: "> "; }
.sst-term-screen .sst-term-err {
    background: none;
    border: none;
    color: #ff9b9b;
    text-align: inherit;
}
.sst-term-screen .sst-term-input {
    flex: 0 0 auto;
    padding: 4px 0 0;
    margin: 0;
    background: none;
    border: none;
}
.sst-term-screen .sst-term-field {
    flex: 1 1 auto;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    box-shadow: none;
}
.sst-term-screen .sst-term-field:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

.sst-term-screen .sst-term-send { display: none; } /* press Enter to send */
.sst-term-screen .sst-term-typing::after { color: currentColor; }

/* ===================================================================
 * Split input zone — terminal setting "Separate input box" (split_input).
 * The chat log stays in the screen zone (the "chat" box); the typing line
 * gets its own absolutely-positioned zone (the "input" box), each placed by
 * its own edge insets. Lets a skin with a distinct message area + input bar
 * line up exactly. Off = the input sits at the bottom of the screen zone.
 * =================================================================== */
.sst-term-split .sst-term-screen { margin-top: 0; } /* use the exact insets, no line-nudge */
.sst-term-inputzone {
    position: absolute;
    display: flex;
    align-items: center;
    overflow: hidden;                 /* clip: the input can't leave its box */
    /* Same anti-collapse guard as the screen zone: pinned by top + bottom insets,
     * so it would vanish once top% + bottom% >= 100. Keep a one-line floor so the
     * typing line is always visible wherever the insets place it. */
    min-height: 2em;
    font-family: inherit;             /* match the screen: theme <p> font, no glow */
    font-size: clamp(11px, 1.4vw, 13px);
    line-height: 1.35;
    letter-spacing: 0;
    text-shadow: none;
}
.sst-term-inputzone .sst-term-input {
    flex: 1 1 auto;
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
}
.sst-term-inputzone .sst-term-field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    box-shadow: none;
}
.sst-term-inputzone .sst-term-field:focus { outline: none; box-shadow: none; border: none; }
.sst-term-inputzone .sst-term-send { display: none; } /* press Enter to send */

/* ===================================================================
 * Docked / slide-out mode — [stormtrooper_terminal dock="right"|"left"].
 * A fixed tab sits on the viewport edge; clicking it slides the whole
 * terminal (skinned or plain) in from that edge. Concealed until opened.
 * The container is a zero-size fixed anchor so it never disturbs page flow;
 * the tab + panel are themselves fixed to the viewport edge.
 * =================================================================== */
.sst-dock {
    position: fixed;
    top: 0; left: 0;
    width: 0; height: 0;
    z-index: 2147483000;
}

/* --- the edge tab (always visible while closed) --- */
.sst-dock-tab {
    position: fixed;
    top: 50%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    border: 1px solid #1f2a30;
    background: #0f1519;
    color: #cfe9d6;
    cursor: pointer;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: "Roboto Condensed", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 13px;
    box-shadow: 0 6px 26px rgba(0,0,0,.35);
    transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .2s, filter .15s;
}
.sst-dock-tab:hover { filter: brightness(1.12); }
.sst-dock-tab-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #39d353;
    box-shadow: 0 0 8px #39d353;
    flex: 0 0 auto;
}
.sst-dock-right .sst-dock-tab {
    right: 0;
    transform: translateY(-50%);
    border-right: none;
    border-radius: 10px 0 0 10px;
}
.sst-dock-left .sst-dock-tab {
    left: 0;
    transform: translateY(-50%);
    border-left: none;
    border-radius: 0 10px 10px 0;
}

/* --- the sliding panel (holds the real terminal) --- */
/* Sized to the (now smaller) terminal and tucked into the lower corner rather
 * than stretched to full viewport height, so it reads as a compact card that
 * slides out from the edge tab. Height fits the skin/terminal; only scrolls if
 * it would exceed the viewport. */
.sst-dock-panel {
    position: fixed;
    bottom: 24px;
    width: min(460px, calc(100vw - 24px));
    max-height: 92vh;
    height: auto;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform .38s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
    box-shadow: 0 12px 48px rgba(0,0,0,.55);
    border-radius: 10px;
    background: #0a0e12; /* subtle frame behind skinned images or plain terminal */
}
.sst-dock-panel .sst-term,
.sst-dock-panel .sst-term-skinned {
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
}
.sst-dock-right .sst-dock-panel {
    right: 12px;
    transform: translateX(120%); /* parked fully off the right edge */
}
.sst-dock-left .sst-dock-panel {
    left: 12px;
    transform: translateX(-120%); /* parked fully off the left edge */
}

/* --- open state: panel slides in from the anchored side, tab tucks away --- */
.sst-dock[data-open="1"] .sst-dock-panel {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
.sst-dock[data-open="1"] .sst-dock-right .sst-dock-tab,
.sst-dock-right[data-open="1"] .sst-dock-tab { transform: translate(120%, -50%); opacity: 0; pointer-events: none; }
.sst-dock[data-open="1"] .sst-dock-left .sst-dock-tab,
.sst-dock-left[data-open="1"] .sst-dock-tab { transform: translate(-120%, -50%); opacity: 0; pointer-events: none; }

/* --- close (✕) button, top corner of the panel --- */
.sst-dock-close {
    position: absolute;
    top: 6px; right: 6px;
    width: 30px; height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1f2a30;
    border-radius: 50%;
    background: #0f1519;
    color: #cfe9d6;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 2px 10px rgba(0,0,0,.4);
    transition: filter .15s;
}
.sst-dock-close:hover { filter: brightness(1.2); }

@media (max-width: 820px) {
    .sst-dock-panel {
        width: min(340px, calc(100vw - 16px));
        bottom: 16px;
        max-height: 88vh;
        border-radius: 8px;
    }
    .sst-dock-right .sst-dock-panel { right: 8px; }
    .sst-dock-left  .sst-dock-panel { left: 8px; }
}

/* Very short viewports (landscape phones): sit tighter to the bottom edge and
 * allow the panel to use nearly the full height, scrolling if the skin is tall. */
@media (max-height: 620px) {
    .sst-dock-panel { bottom: 8px; max-height: 96vh; }
}

@media (prefers-reduced-motion: reduce) {
    .sst-dock-tab, .sst-dock-panel { transition: opacity .2s; }
}

/* ===================================================================
 * TERMINAL TEXT VISIBILITY + FIT  (appended override block)
 *
 * Three fixes, deliberately at the END of the file so they win on source
 * order without anyone having to hunt through the rules above.
 *
 * 1. COLOUR. The zone was forced to #dcdce0 !important but the FIELD inside
 *    it only said `color: inherit` — no !important. Divi styles form controls
 *    directly (.et_pb_module input {color:#333}), which beats a plain
 *    `inherit`, so the typing text rendered near-black on a black skin:
 *    present, focusable, typeable, invisible. Forced here, including
 *    -webkit-text-fill-color, which Safari/Chrome honour ABOVE `color` on
 *    form controls and which would otherwise silently undo the fix.
 * 2. FIT. The field is now a <textarea> and fills the input box you already
 *    positioned, so a long prompt wraps through the height you gave it
 *    instead of scrolling sideways one line at a time. No pixel heights, no
 *    min-heights: the box is yours, the field just fills it.
 * 3. SCALE. Text sized from the TERMINAL's width (--sst-fs, set by the JS),
 *    not the viewport. Insets are % of the image, so viewport-based text
 *    drifted out of alignment at other screen sizes — tune it on desktop,
 *    find it wrong on a laptop. Now text and boxes scale from the same
 *    thing, so aligning once holds everywhere. Falls back to the old clamp
 *    if the JS hasn't run.
 * =================================================================== */
.sst-term-skinned .sst-term-field,
.sst-term-inputzone .sst-term-field,
.sst-term-screen .sst-term-field {
    color: #dcdce0 !important;
    -webkit-text-fill-color: #dcdce0 !important;
    opacity: 1 !important;
    resize: none;
    overflow-y: auto;
    caret-color: #dcdce0;
}
.sst-term-skinned .sst-term-field::placeholder,
.sst-term-inputzone .sst-term-field::placeholder {
    color: #dcdce0 !important;
    -webkit-text-fill-color: #dcdce0 !important;
    opacity: .55 !important;
}

/* The typing box fills the zone you positioned, top-aligned so the first line
 * starts at the zone's `top` inset exactly like the chat text does. */
.sst-term-inputzone { align-items: stretch; }
.sst-term-inputzone .sst-term-input { height: 100%; align-items: stretch; }
.sst-term-inputzone .sst-term-field { height: 100%; }

/* Non-split skins: the input shares the chat box, so it takes a modest two
 * lines and the log keeps the rest. It must never starve the log — that is
 * exactly what blanked the screen earlier. */
.sst-term-screen .sst-term-field { height: 2.6em; }

/* Text scales from the terminal's own width (JS sets --sst-fs in px). */
.sst-term-skinned .sst-term-screen,
.sst-term-skinned .sst-term-inputzone,
.sst-term-skinned .sst-term-msg,
.sst-term-skinned .sst-term-field,
.sst-term-skinned .sst-term-log {
    font-size: var(--sst-fs, clamp(11px, 1.4vw, 13px)) !important;
}

/* ---- Alignment guides: add ?sst_guides=1 to the page URL ----------------
 * Outlines both boxes and names them, so you can see exactly where they sit
 * and adjust the four numbers in one pass instead of reloading blind.
 * Nothing is drawn without the URL parameter. */
.sst-term-guides .sst-term-screen {
    outline: 2px dashed #39d353;
    background: rgba(57,211,83,.10);
}
.sst-term-guides .sst-term-inputzone {
    outline: 2px dashed #ff7b7b;
    background: rgba(255,123,123,.14);
}
.sst-term-guides .sst-term-screen::before,
.sst-term-guides .sst-term-inputzone::before {
    position: absolute;
    top: 0; left: 0;
    padding: 1px 5px;
    font: 700 10px/1.4 system-ui, sans-serif;
    color: #000;
    letter-spacing: .04em;
    z-index: 5;
}
.sst-term-guides .sst-term-screen::before    { content: "CHAT BOX";  background: #39d353; }
.sst-term-guides .sst-term-inputzone::before { content: "INPUT BOX"; background: #ff7b7b; }

/* Force wrapping on the typing field. A <textarea> wraps by default, so if the
 * text is still running off to the right something in the theme is overriding
 * it — Divi sets white-space and width on form controls. Pin all three: wrap,
 * break long words, and keep the field inside its box rather than letting an
 * `auto`/fixed width push the text sideways. */
.sst-term-field,
.sst-term-skinned .sst-term-field,
.sst-term-inputzone .sst-term-field,
.sst-term-screen .sst-term-field {
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    text-align: left !important;
}

/* ===================================================================
 * "Type here" affordance. On a skin the typing line is transparent and
 * borderless, so there is nothing to aim at. Until the visitor first
 * interacts, the input box breathes gently — a soft glow that fades in and
 * out — and shows a blinking block caret at the text start position. Both
 * stop for good once they engage (JS adds .sst-engaged), so it draws the eye
 * without nagging anyone who is already typing.
 * =================================================================== */
@keyframes sst-hint-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 0 0 0 rgba(255,255,255,0); background: rgba(255,255,255,.05); }
    50%      { box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), 0 0 12px 2px rgba(255,255,255,.13); background: rgba(255,255,255,.11); }
}
.sst-term-inputzone:not(.sst-engaged),
.sst-term-skinned:not(.sst-term-split) .sst-term-input:not(.sst-engaged) {
    border-radius: 4px;
    cursor: text;
    animation: sst-hint-pulse 2.4s ease-in-out infinite;
}
.sst-term-inputzone.sst-engaged,
.sst-term-input.sst-engaged { animation: none; background: none; box-shadow: none; }

/* Blinking caret marking exactly where typing starts. Drawn with a border,
 * not a glyph, so a missing font character can never render it as tofu. */
.sst-term-inputzone:not(.sst-engaged) .sst-term-input::before,
.sst-term-skinned:not(.sst-term-split) .sst-term-input:not(.sst-engaged)::before {
    content: "";
    flex: 0 0 auto;
    align-self: flex-start;
    width: 0;
    height: 1.15em;
    margin-right: 3px;
    border-left: 2px solid currentColor;
    opacity: .9;
    animation: sst-term-blink 1.1s steps(1) infinite;
}
/* The whole box is a click target, not just the text line. */
.sst-term-inputzone, .sst-term-inputzone * { cursor: text; }

@media (prefers-reduced-motion: reduce) {
    .sst-term-inputzone:not(.sst-engaged),
    .sst-term-skinned:not(.sst-term-split) .sst-term-input:not(.sst-engaged) {
        animation: none;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.30);
        background: rgba(255,255,255,.08);
    }
}

/* ===================================================================
 * LEFT-EDGE CLIP FIX  (appended override — wins on source order)
 *
 * Symptom: on a skin the first character of the placeholder ("Click…" → the
 * "C") was cut in half, and clicking the box showed no typing caret.
 *
 * Cause: the input row starts its text and the native caret at x=0, but the
 * zone is `overflow:hidden` and its left edge sits on the skin image's drawn
 * box border — so the first glyph's left bearing AND the caret at position 0
 * are both clipped away. Starting the box "further out" would break its
 * alignment to the skin art, so instead we inset only the CONTENT with a
 * small left padding. The box stays exactly where the insets place it; the
 * text and caret just clear the edge.
 *
 * Applied to the input ROW (not the field) so the decorative hint-caret
 * ::before and the real textarea shift together. box-sizing:border-box keeps
 * the row exactly the zone width so nothing spills off the right.
 * =================================================================== */
/* ===================================================================
 * FIRST-CHARACTER CLIP — fixed at the source, NOT by indenting the text.
 *
 * The eaten "C" was never a margin we needed to add — it was one the THEME
 * (Divi) adds: Divi styles form controls directly and can push a textarea's
 * text a couple of px to the LEFT via its own margin / text-indent. That
 * negative offset put the first glyph left of the input box, where the box's
 * overflow:hidden sliced it. So:
 *   (1) zero the theme's offset — the text then starts exactly at the field's
 *       OWN left edge (no artificial indent; it just starts where it should);
 *   (2) drop the hard clip on the input box — the field is a <textarea> that
 *       wraps and scrolls its own overflow, so the box never needed to clip to
 *       contain text. With no clip, no glyph can be cut regardless of position.
 *
 * WHERE the text sits horizontally (left vs "middle") is NOT set here — it's
 * the per-terminal Left/Right % insets you set in the admin (written inline as
 * left:NN%). Set the Left inset low to start the text at the left of the skin.
 * The chat SCREEN zone keeps its overflow:hidden — it must clip the log to the
 * screen art; only the INPUT box changes below.
 * =================================================================== */
.sst-term-inputzone .sst-term-field,
.sst-term-screen .sst-term-field {
    margin: 0 !important;
    text-indent: 0 !important;
    padding-left: 0 !important;
}
.sst-term-inputzone .sst-term-input,
.sst-term-screen .sst-term-input {
    margin-left: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box;
}
.sst-term-inputzone {
    overflow: visible !important;
}

/* ===================================================================
 * REMOVE the "type here" affordance — THE box in the corner.
 *
 * The glowing pulse-box (sst-hint-pulse: an inset white border + white
 * background that breathes on the input before you engage) and the blinking
 * caret bar (.sst-term-input::before, with margin-right:3px nudging the text)
 * were meant to say "type here". On a dark skin they read as a mystery box
 * sitting in the input's corner, blocking/shoving the prompt text — which is
 * exactly the "what is this, remove it" complaint. Disabled here (the original
 * rules above are kept, just neutralised, so it's a one-line revert if ever
 * wanted). The input is now a clean transparent typing line; clicking it still
 * focuses (that's JS, untouched), so nothing about usability is lost.
 * =================================================================== */
.sst-term-inputzone,
.sst-term-inputzone:not(.sst-engaged),
.sst-term-inputzone.sst-engaged,
.sst-term-skinned:not(.sst-term-split) .sst-term-input,
.sst-term-skinned:not(.sst-term-split) .sst-term-input:not(.sst-engaged) {
    animation: none !important;
    background: none !important;
    box-shadow: none !important;
}
.sst-term-inputzone:not(.sst-engaged) .sst-term-input::before,
.sst-term-skinned:not(.sst-term-split) .sst-term-input:not(.sst-engaged)::before {
    content: none !important;
    display: none !important;
    border: 0 !important;
    width: 0 !important;
    margin: 0 !important;
}

/* ===================================================================
 * NUCLEAR CORNER KILL (v1.610) — unconditional, every terminal variant.
 * The box is a CSS pseudo-element in the input row, NOT the background PNG
 * (text is on a layer above the image, so the image can't block it). Earlier
 * kills were scoped to :not(.sst-engaged) / non-split only; this one removes
 * EVERY ::before/::after on the input row + zone regardless of state or skin,
 * and forces the text to start hard against the left edge. Nothing decorative
 * can render in that corner after this.
 * =================================================================== */
.sst-term-input::before,  .sst-term-input::after,
.sst-term-inputzone::before, .sst-term-inputzone::after,
.sst-term-inputzone .sst-term-input::before, .sst-term-inputzone .sst-term-input::after,
.sst-term-screen .sst-term-input::before,   .sst-term-screen .sst-term-input::after,
.sst-term-skinned .sst-term-input::before,  .sst-term-skinned .sst-term-input::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
.sst-term-input, .sst-term-inputzone, .sst-term-inputzone .sst-term-input, .sst-term-screen .sst-term-input {
    animation: none !important;
    background: none !important;
    box-shadow: none !important;
}
.sst-term-field, .sst-term-inputzone .sst-term-field, .sst-term-screen .sst-term-field {
    margin: 0 !important;
    text-indent: 0 !important;
    padding-left: 0 !important;
}

/* ===================================================================
 * MOBILE INPUT-ZONE FLOOR (appended override — wins on source order)
 *
 * Symptom: on phone-width viewports the typing caret sits up out of its
 * box. Cause: the input zone's height comes from percentage insets against
 * the skin PHOTO, which scales down with the viewport (width:100%, height:
 * auto) — on a narrow phone the photo's rendered pixel height shrinks, so
 * the zone can become physically shorter than one line of text needs. The
 * existing `min-height: 2em` floor above doesn't save it, because `em` is
 * relative to the same font that is ALSO clamped down to its 11px floor on
 * small screens — the guard shrinks together with the problem it exists to
 * catch. And overflow is deliberately `visible` on this zone already (see
 * the LEFT-EDGE CLIP FIX earlier in this file), so once the box IS too
 * short nothing hides the overflow — the caret just pokes out above it.
 *
 * Fix: a real floor in PX, not em, sized for the smallest mobile font this
 * zone ever renders (11px, line-height 1.35) plus headroom for the caret's
 * ascent/descent — big enough that the box can't fall short of one line on
 * any phone, however small the skin photo itself scales down to. Desktop
 * is untouched: this lives only inside the phone breakpoint.
 * =================================================================== */
@media (max-width: 480px) {
    .sst-term-inputzone { min-height: 34px; }
}