/**
 * Open Trust Center AI chat page styles.
 * Inlined into /trust-center/ask/ via template_redirect.
 * Layered into @layer ettic-otc to avoid theme bleed.
 *
 * Scales in use:
 *   Spacing : 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px
 *   Radius  : 8 / 12 / 16 / 999 px
 *   Weights : 400 / 500 / 600 / 700
 */
@layer ettic-otc {

    /* ─── Page chrome ───────────────────────────── */

    .ettic-otc-chat-body {
        background: #f9fafb;
        color: #111827;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .ettic-otc-chat-main {
        flex: 1;
        padding: 48px 16px 200px; /* bottom: clear the fixed dock */
    }
    .ettic-otc-chat-container {
        max-width: 720px;
        margin: 0 auto;
        width: 100%;
    }

    /* ─── Shell (single unified layout) ─────────── */

    .ettic-otc-chat-shell {
        display: flex;
        flex-direction: column;
    }

    /* Intro visible only when NOT chatting. */
    .ettic-otc-chat-intro {
        text-align: center;
        padding: 32px 0 48px;
    }
    .ettic-otc-chat-intro__title {
        font-size: clamp(24px, 3vw, 32px);
        font-weight: 600;
        letter-spacing: -0.02em;
        margin: 0 0 12px;
        color: #111827;
        line-height: 1.2;
    }
    .ettic-otc-chat-intro__help {
        font-size: 13px;
        color: #6b7280;
        margin: 0;
        line-height: 1.5;
    }
    .ettic-otc-chat-intro__help strong {
        color: #374151;
        font-weight: 600;
    }

    /* Thread — plain flow container, no visual chrome. Messages live directly
       on the page background. */
    .ettic-otc-chat-thread {
        background: transparent;
        border: 0;
        padding: 0;
    }

    .ettic-otc-chat-body:not(.is-chatting) .ettic-otc-chat-thread { display: none; }
    .ettic-otc-chat-body.is-chatting      .ettic-otc-chat-intro  { display: none; }

    /* ─── Messages ──────────────────────────────── */

    .ettic-otc-chat-messages {
        display: flex;
        flex-direction: column;
    }

    .ettic-otc-chat-msg {
        display: grid;
        grid-template-columns: 40px 1fr;
        gap: 12px;
        padding: 24px 0;
        border-bottom: 1px solid #f3f4f6;
    }
    .ettic-otc-chat-msg:last-child { border-bottom: 0; }

    .ettic-otc-chat-msg__avatar {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .ettic-otc-chat-msg--user .ettic-otc-chat-msg__avatar {
        background: #111827;
        color: #ffffff;
    }
    .ettic-otc-chat-msg--assistant .ettic-otc-chat-msg__avatar {
        background: #ffffff;
        color: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l));
        border: 1px solid #e5e7eb;
        overflow: hidden;
    }

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

    /* Kill the SVG baseline gap inside flex-centered parents — ensures
       mathematically-centered icons also render visually centered. */
    .ettic-otc-chat-msg__avatar > svg,
    .ettic-otc-chat-msg__avatar-icon,
    .ettic-otc-chat-msg__avatar-warning {
        display: block;
    }

    .ettic-otc-chat-msg__content {
        min-width: 0;
    }

    .ettic-otc-chat-msg__header {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 8px;
        font-size: 13px;
        line-height: 1.4;
    }
    .ettic-otc-chat-msg__name {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }
    .ettic-otc-chat-msg__separator {
        color: #d1d5db;
        font-size: 12px;
    }
    .ettic-otc-chat-msg__time {
        color: #9ca3af;
        font-size: 12px;
    }
    .ettic-otc-chat-msg__menu {
        margin-left: auto;
        background: transparent;
        border: 0;
        color: #d1d5db;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 8px;
    }
    .ettic-otc-chat-msg__menu:hover { color: #6b7280; background: #f9fafb; }

    .ettic-otc-chat-msg__body {
        font-size: 15px;
        line-height: 1.65;
        color: #1f2937;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Markdown inside .ettic-otc-chat-msg__body */
    .ettic-otc-chat-msg__body p { margin: 0 0 12px; }
    .ettic-otc-chat-msg__body p:last-child { margin-bottom: 0; }
    .ettic-otc-chat-msg__body strong { font-weight: 700; color: #111827; }
    .ettic-otc-chat-msg__body em { font-style: italic; }

    /* Inline hyperlinks inside assistant answers (auto-linked URLs or
       explicit markdown links). Explicit link-state rules so browser UA
       visited/hover colors never override the accent. */
    .ettic-otc-chat-msg__body a,
    .ettic-otc-chat-msg__body a:link,
    .ettic-otc-chat-msg__body a:visited {
        color: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l));
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-thickness: 1px;
        word-break: break-word;
    }
    .ettic-otc-chat-msg__body a:hover,
    .ettic-otc-chat-msg__body a:focus {
        color: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), calc(var(--ettic-otc-accent-l) - 8%));
        text-decoration-thickness: 2px;
    }
    /* The contact CTA inside refused messages is already styled as a filled
       button elsewhere — don't let the generic link rule fight it. */
    .ettic-otc-chat-msg__body a.ettic-otc-chat-contact-btn,
    .ettic-otc-chat-msg__body a.ettic-otc-chat-contact-btn:link,
    .ettic-otc-chat-msg__body a.ettic-otc-chat-contact-btn:visited,
    .ettic-otc-chat-msg__body a.ettic-otc-chat-contact-btn:hover,
    .ettic-otc-chat-msg__body a.ettic-otc-chat-contact-btn:focus {
        text-decoration: none;
    }
    .ettic-otc-chat-msg__body code {
        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
        font-size: 13px;
        padding: 1px 6px;
        background: #f3f4f6;
        border-radius: 4px;
    }
    .ettic-otc-chat-msg__body ol,
    .ettic-otc-chat-msg__body ul {
        margin: 0 0 12px;
        padding: 0 0 0 24px;
    }
    .ettic-otc-chat-msg__body ol:last-child,
    .ettic-otc-chat-msg__body ul:last-child { margin-bottom: 0; }
    .ettic-otc-chat-msg__body li { margin-bottom: 8px; }
    .ettic-otc-chat-msg__body li:last-child { margin-bottom: 0; }

    .ettic-otc-chat-msg__body h3,
    .ettic-otc-chat-msg__body h4,
    .ettic-otc-chat-msg__body h5,
    .ettic-otc-chat-msg__body h6 {
        margin: 16px 0 8px;
        font-weight: 650;
        color: #111827;
        line-height: 1.3;
    }
    .ettic-otc-chat-msg__body h3 { font-size: 1.05em; }
    .ettic-otc-chat-msg__body h4 { font-size: 1em; }
    .ettic-otc-chat-msg__body h5,
    .ettic-otc-chat-msg__body h6 { font-size: 0.95em; }
    .ettic-otc-chat-msg__body > h3:first-child,
    .ettic-otc-chat-msg__body > h4:first-child,
    .ettic-otc-chat-msg__body > h5:first-child,
    .ettic-otc-chat-msg__body > h6:first-child { margin-top: 0; }

    .ettic-otc-chat-msg__body hr {
        border: 0;
        border-top: 1px solid #e5e7eb;
        margin: 16px 0;
    }

    /* Refusal state — signal is on the AVATAR, not the body. The body
       renders as a normal message. The assistant's circle becomes a soft
       yellow with a dark-orange warning triangle. */
    .ettic-otc-chat-msg--refused.ettic-otc-chat-msg--assistant .ettic-otc-chat-msg__avatar {
        background: #fef3c7;
        border-color: #fcd34d;
        color: #b45309;
    }
    .ettic-otc-chat-msg--refused .ettic-otc-chat-msg__avatar .ettic-otc-chat-msg__avatar-img,
    .ettic-otc-chat-msg--refused .ettic-otc-chat-msg__avatar .ettic-otc-chat-msg__avatar-icon {
        display: none;
    }
    .ettic-otc-chat-msg--refused .ettic-otc-chat-msg__avatar-warning {
        display: block;
        color: #b45309;
    }

    /* Citation superscript chips */
    .ettic-otc-chat-msg .ettic-otc-chat-cite {
        display: inline-block;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        margin: 0 2px;
        font-family: inherit;
        font-size: 11px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        vertical-align: 1px;
        background: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l));
        color: #ffffff;
        border-radius: 4px;
        text-decoration: none;
        transition: opacity 0.15s;
    }
    .ettic-otc-chat-msg .ettic-otc-chat-cite:hover,
    .ettic-otc-chat-msg .ettic-otc-chat-cite:focus,
    .ettic-otc-chat-msg .ettic-otc-chat-cite:visited {
        color: #ffffff;
        text-decoration: none;
    }
    .ettic-otc-chat-msg .ettic-otc-chat-cite:hover { opacity: 0.85; }

    .ettic-otc-chat-msg__sources {
        margin-top: 16px;
        padding: 12px 16px;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        font-size: 13px;
    }
    .ettic-otc-chat-msg__sources h4 {
        margin: 0 0 8px;
        font-size: 11px;
        font-weight: 700;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.6px;
    }
    .ettic-otc-chat-msg__sources ol {
        margin: 0;
        padding: 0 0 0 16px;
    }
    .ettic-otc-chat-msg__sources li {
        margin-bottom: 4px;
        color: #4b5563;
        font-size: 13px;
    }
    .ettic-otc-chat-msg__sources li:last-child { margin-bottom: 0; }
    .ettic-otc-chat-msg__sources a {
        color: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l));
        text-decoration: none;
    }
    .ettic-otc-chat-msg__sources a:hover { text-decoration: underline; }

    .ettic-otc-chat-msg__disclaimer {
        margin: 14px 0 0;
        padding-top: 10px;
        border-top: 1px dashed #e5e7eb;
        font-size: 11.5px;
        font-style: italic;
        line-height: 1.5;
        color: #9ca3af;
        letter-spacing: 0.01em;
    }

    @media print {
        .ettic-otc-chat-msg__disclaimer {
            color: #6b7280 !important;
            border-top-color: #d1d5db !important;
        }
    }

    .ettic-otc-chat-msg__actions {
        display: flex;
        gap: 4px;
        align-items: center;
        margin-top: 12px;
    }
    .ettic-otc-chat-msg__actions button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        background: transparent;
        border: 0;
        color: #9ca3af;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        border-radius: 8px;
    }
    .ettic-otc-chat-msg__actions button:hover {
        color: #374151;
        background: #f3f4f6;
    }
    .ettic-otc-chat-msg__actions button.is-success {
        color: #15803d;
        background: #dcfce7;
    }
    .ettic-otc-chat-msg__actions svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    /* ─── Thinking indicator ────────────────────── */

    .ettic-otc-chat-thinking {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #9ca3af;
        font-size: 14px;
    }
    .ettic-otc-chat-thinking-dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: currentColor;
        animation: ettic-otc-chat-pulse 1.4s infinite ease-in-out both;
    }
    .ettic-otc-chat-thinking-dot:nth-child(2) { animation-delay: 0.16s; }
    .ettic-otc-chat-thinking-dot:nth-child(3) { animation-delay: 0.32s; }
    @keyframes ettic-otc-chat-pulse {
        0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
        40%           { transform: scale(1);   opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        .ettic-otc-chat-thinking-dot { animation: none; opacity: 0.6; }
    }
    /* Tool-use label appears next to the dots when the AI is mid-retrieval —
       e.g. "Searching for incident response" or "Reading Privacy Policy".
       Set by the chat.js tool_call SSE handler; cleared when the first
       answer token arrives. */
    .ettic-otc-chat-thinking__label {
        margin-left: 4px;
        color: #6b7280;
        font-size: 13px;
        font-style: italic;
    }
    /* Inline retrieval pill — sits between message segments at the position
       in the conversation where a tool call happened. Two states:
         - default (animated): model is mid-retrieval. Dots pulse, the
           message text below it is paused, the visitor reads the label.
         - .is-static: settled. Dots stop animating; the pill becomes a
           permanent record of "the model looked this up here", like a
           tool-use chip in Claude / ChatGPT / Perplexity. */
    .ettic-otc-chat-tool-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 8px 0;
        padding: 4px 12px 4px 10px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.04);
        color: #9ca3af;
        font-size: 13px;
        animation: ettic-otc-chat-tool-status-in 180ms ease-out;
    }
    .ettic-otc-chat-tool-status .ettic-otc-chat-thinking-dot { background: #9ca3af; }
    .ettic-otc-chat-tool-status .ettic-otc-chat-thinking__label {
        margin-left: 4px;
        color: #6b7280;
        font-style: normal;
    }
    /* Settled state — dots freeze, color shifts toward "completed" without
       a checkmark glyph. Stays a permanent inline log of what was looked up. */
    .ettic-otc-chat-tool-status.is-static .ettic-otc-chat-thinking-dot {
        animation: none;
        opacity: 0.55;
    }
    @keyframes ettic-otc-chat-tool-status-in {
        from { opacity: 0; transform: translateY(2px); }
        to   { opacity: 1; transform: none; }
    }
    @media (prefers-reduced-motion: reduce) {
        .ettic-otc-chat-tool-status { animation: none; }
    }

    /* ─── Post-stream reveal ────────────────────── */
    /* When an assistant message finishes streaming, the Sources panel,
       disclaimer, action bar, and refused-state CTA fade up in a short
       staggered cascade rather than appearing instantly. Only applied to
       live-streamed bubbles — history replay renders fully-formed.
       Per-element animation-delay is set inline by chat.js. */
    @keyframes ettic-otc-chat-reveal {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .ettic-otc-chat-msg__reveal {
        animation: ettic-otc-chat-reveal 360ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
    }
    @media (prefers-reduced-motion: reduce) {
        .ettic-otc-chat-msg__reveal { animation: none; }
    }

    /* Contact CTA inside refused messages. Explicit link-state colors so
       browser UA visited/hover styles can never override the contrast. */
    .ettic-otc-chat-msg .ettic-otc-chat-contact-btn,
    .ettic-otc-chat-msg .ettic-otc-chat-contact-btn:link,
    .ettic-otc-chat-msg .ettic-otc-chat-contact-btn:visited,
    .ettic-otc-chat-msg .ettic-otc-chat-contact-btn:hover,
    .ettic-otc-chat-msg .ettic-otc-chat-contact-btn:focus,
    .ettic-otc-chat-msg .ettic-otc-chat-contact-btn:active {
        display: inline-block;
        margin-top: 16px;
        padding: 10px 16px;
        background: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l));
        color: var(--ettic-otc-accent-contrast, #ffffff);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        border-radius: 8px;
    }
    .ettic-otc-chat-msg .ettic-otc-chat-contact-btn:hover,
    .ettic-otc-chat-msg .ettic-otc-chat-contact-btn:focus {
        background: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), calc(var(--ettic-otc-accent-l) - 6%));
    }

    /* ─── Docked input (fixed at viewport bottom) ─ */

    .ettic-otc-chat-dock {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to top, #f9fafb 70%, rgba(249, 250, 251, 0) 100%);
        pointer-events: none;
    }
    .ettic-otc-chat-dock__inner {
        max-width: 720px;
        margin: 0 auto;
        width: 100%;
        pointer-events: auto;
    }

    /* Suggested question chips — visible when NOT chatting. */
    .ettic-otc-chat-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-bottom: 12px;
    }
    .ettic-otc-chat-shell.is-chatting ~ .ettic-otc-chat-dock .ettic-otc-chat-chips,
    body:has(.ettic-otc-chat-shell.is-chatting) .ettic-otc-chat-chips { display: none; }

    .ettic-otc-chat-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 999px;
        font: inherit;
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        cursor: pointer;
        transition: border-color 0.15s, background-color 0.15s, transform 0.1s, box-shadow 0.15s;
        box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    }
    .ettic-otc-chat-chip:hover {
        border-color: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l));
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(17, 24, 39, 0.06);
    }
    .ettic-otc-chat-chip:active { transform: scale(0.98); }
    .ettic-otc-chat-chip__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #9ca3af;
        flex-shrink: 0;
    }
    .ettic-otc-chat-chip:hover .ettic-otc-chat-chip__icon {
        color: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l));
    }

    /* Input bar — single card, no nested container. */
    .ettic-otc-chat-inputbar {
        /* Transparent wrapper. The visible card is .ettic-otc-chat-inputbar__field. */
        background: transparent;
        border: 0;
        padding: 0;
    }

    .ettic-otc-chat-form { display: block; }

    .ettic-otc-chat-inputbar__field {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 8px 6px 18px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        box-shadow:
            0 1px 2px rgba(17, 24, 39, 0.04),
            0 8px 32px rgba(17, 24, 39, 0.08);
        transition: border-color 0.15s, box-shadow 0.15s;
    }
    .ettic-otc-chat-inputbar:focus-within .ettic-otc-chat-inputbar__field {
        border-color: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l));
        box-shadow:
            0 0 0 3px hsla(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l), 0.1),
            0 8px 32px rgba(17, 24, 39, 0.08);
    }

    .ettic-otc-chat-form textarea {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: none;
        padding: 8px 0;
        font: inherit;
        font-size: 15px;
        line-height: 1.55;
        resize: none;
        background: transparent;
        color: #111827;
        max-height: 180px;
        overflow-y: auto;
    }
    .ettic-otc-chat-form textarea::placeholder {
        color: #9ca3af;
    }

    /* Reset button — ghost, disabled by default. */
    .ettic-otc-chat-reset {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: transparent;
        color: #9ca3af;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        transition: color 0.15s, background-color 0.15s, opacity 0.15s;
    }
    .ettic-otc-chat-reset:hover:not(:disabled) {
        color: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l));
        background: #f3f4f6;
    }
    .ettic-otc-chat-reset:disabled {
        opacity: 0.35;
        cursor: default;
    }

    /* Send button — filled accent, icon only. */
    .ettic-otc-chat-send {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l));
        color: #ffffff;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.15s, transform 0.1s;
    }
    .ettic-otc-chat-send:hover:not(:disabled) {
        background: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), calc(var(--ettic-otc-accent-l) - 6%));
    }
    .ettic-otc-chat-send:active { transform: scale(0.96); }
    .ettic-otc-chat-send:disabled {
        background: #e5e7eb;
        color: #9ca3af;
        cursor: not-allowed;
    }
    .ettic-otc-chat-send svg,
    .ettic-otc-chat-reset svg {
        flex-shrink: 0;
        display: block;
    }
    /* Optical-centering nudge for the paper plane — its mathematical center
       and its visual center of mass are not the same (all the ink is in the
       upper-right quadrant). 1px down-left restores perceived center. */
    .ettic-otc-chat-send svg {
        transform: translate(-1px, 1px);
    }

    .ettic-otc-chat-send--stop { background: #ef4444; }
    .ettic-otc-chat-send--stop:hover { background: #dc2626; }

    /* Legal line below input. */
    .ettic-otc-chat-dock__legal {
        margin: 8px 0 0;
        text-align: center;
        font-size: 11px;
        color: #9ca3af;
        line-height: 1.5;
    }
    .ettic-otc-chat-dock__legal a {
        color: #6b7280;
        text-decoration: underline;
    }

    /* ─── Inline banners / hints ─────────────────── */

    .ettic-otc-chat-banner {
        padding: 12px 16px;
        border-radius: 12px;
        margin: 16px 0;
        font-size: 14px;
    }
    .ettic-otc-chat-banner--error {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #991b1b;
    }
    .ettic-otc-chat-banner--warn {
        background: #fefce8;
        border: 1px solid #fef08a;
        color: #854d0e;
    }
    .ettic-otc-chat-banner button {
        margin-left: 8px;
        padding: 4px 12px;
        background: #ffffff;
        border: 1px solid currentColor;
        color: inherit;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        border-radius: 8px;
    }

    .ettic-otc-chat-long-hint {
        font-size: 12px;
        color: #9ca3af;
        text-align: center;
        margin: 16px 0;
    }
    .ettic-otc-chat-long-hint button {
        background: transparent;
        border: 0;
        color: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l));
        cursor: pointer;
        font: inherit;
        text-decoration: underline;
    }

    /* ─── State pages (unavailable / exhausted) ─── */

    .ettic-otc-chat-state {
        text-align: center;
        padding: 64px 16px;
    }
    .ettic-otc-chat-state__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        border-radius: 999px;
        background: #f3f4f6;
        color: #6b7280;
        margin-bottom: 16px;
    }
    .ettic-otc-chat-state h1 {
        font-size: 22px;
        font-weight: 600;
        margin: 0 0 8px;
    }
    .ettic-otc-chat-state p {
        color: #6b7280;
        margin: 0 auto 24px;
        max-width: 440px;
    }
    .ettic-otc-chat-state__actions {
        display: flex;
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ─── No-JS fallback ─────────────────────────── */

    .ettic-otc-chat-noscript {
        margin-top: 32px;
        padding: 24px;
        background: #fffbeb;
        border: 1px solid #fde68a;
        border-radius: 12px;
    }
    .ettic-otc-chat-noscript p {
        margin: 0 0 12px;
        font-size: 14px;
        color: #713f12;
    }
    .ettic-otc-chat-noscript label {
        display: block;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 600;
        color: #713f12;
    }
    .ettic-otc-chat-noscript textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #fde68a;
        border-radius: 8px;
        font: inherit;
        font-size: 14px;
    }
    .ettic-otc-chat-noscript button {
        margin-top: 8px;
        padding: 10px 16px;
        background: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l));
        color: #ffffff;
        border: 0;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
    }

    /* ─── Utility ───────────────────────────────── */

    .ettic-otc-visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .ettic-otc-button {
        display: inline-block;
        padding: 10px 18px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        border: 0;
        transition: background-color 0.15s, transform 0.1s;
    }
    .ettic-otc-button--primary {
        background: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), var(--ettic-otc-accent-l));
        color: #ffffff;
    }
    .ettic-otc-button--primary:hover {
        background: hsl(var(--ettic-otc-accent-h), var(--ettic-otc-accent-s), calc(var(--ettic-otc-accent-l) - 6%));
    }
    .ettic-otc-button--ghost {
        background: #ffffff;
        color: #374151;
        border: 1px solid #e5e7eb;
    }
    .ettic-otc-button--ghost:hover {
        border-color: #d1d5db;
        background: #f9fafb;
    }

    /* ─── Responsive ────────────────────────────── */

    @media (max-width: 720px) {
        .ettic-otc-chat-main { padding: 32px 16px 220px; }
    }
    @media (max-width: 480px) {
        .ettic-otc-chat-intro { padding: 16px 0 32px; }
        .ettic-otc-chat-intro__title { font-size: 22px; }
        .ettic-otc-chat-chips { gap: 6px; }
        .ettic-otc-chat-chip { font-size: 12px; padding: 6px 12px; }
        .ettic-otc-chat-dock__legal { display: none; }
    }

    /* ─── Print ─────────────────────────────────── */

    @media print {
        .ettic-otc-nav, .ettic-otc-chat-dock, .ettic-otc-chat-chips,
        .ettic-otc-chat-msg__actions, .ettic-otc-chat-noscript {
            display: none !important;
        }
    }
}