/* ===========================================================
   AccessPulse marketing — AI chat widget.

   Design tokens copied from the inline <style> blocks in index.html so the
   widget matches the site rather than introducing a second palette:
     primary #6a5cff · accent #22d3ee · ink #0b1020 · muted #5b6076
     border #eef0f6 · radius 12-18px · shadow 0 12px 34px rgba(20,20,50,.07)
     Montserrat headings / Roboto body

   PLACEMENT: bottom-LEFT, and z-index deliberately below the real accessibility
   widget's launcher (which is fixed bottom-right at z-index 500000, see
   apps/widget/src/views/widget/widget.css). The hero copy points visitors at that
   button — it is the product being sold, so nothing here may cover or outrank it.
   =========================================================== */

.apc-launcher,
.apc-panel {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    z-index: 499000; /* below the accessibility widget's 500000 */
}

/* ---- Launcher bubble ---- */
.apc-launcher {
    position: fixed;
    left: 24px;
    bottom: 24px;
    width: 56px;   /* >= 44px minimum touch target (WCAG 2.5.8) */
    height: 56px;
    border-radius: 50%;
    border: none;
    background: #6a5cff;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 34px rgba(20, 20, 50, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, background .18s ease;
}

.apc-launcher:hover { background: #5a4cf0; transform: translateY(-2px); }
.apc-launcher[hidden] { display: none; }

/* Visible focus ring on every interactive element — 2px solid, offset so it
   reads against both the purple button and the white panel. */
.apc-launcher:focus-visible,
.apc-panel button:focus-visible,
.apc-panel input:focus-visible,
.apc-panel textarea:focus-visible {
    outline: 3px solid #0b1020;
    outline-offset: 2px;
}

.apc-panel input:focus,
.apc-panel textarea:focus { border-color: #6a5cff; }

/* ---- Panel ---- */
.apc-panel {
    position: fixed;
    left: 24px;
    bottom: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 48px);
    background: #fff;
    border: 1px solid #eef0f6;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(20, 20, 50, .18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.apc-panel[hidden] { display: none; }

.apc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #0f172a;
    color: #fff;
    flex: 0 0 auto;
}

.apc-head h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    flex: 1 1 auto;
}

.apc-head .apc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22d3ee;
    flex: 0 0 auto;
}

.apc-close {
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    width: 44px;   /* full-size touch target despite the small glyph */
    height: 44px;
    border-radius: 8px;
    flex: 0 0 auto;
}

.apc-close:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* ---- Scrolling body ---- */
.apc-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    background: #fbfbfe;
}

.apc-intro {
    font-size: 13px;
    color: #5b6076;
    margin: 0 0 14px;
    line-height: 1.55;
}

/* ---- Lead capture form ---- */
.apc-field { margin-bottom: 12px; }

.apc-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #18212e;
    margin-bottom: 5px;
}

.apc-field .apc-req { color: #b3261e; }

.apc-field input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    color: #0b1020;
    border: 1px solid #e4e7f0;
    border-radius: 10px;
    background: #fff;
}

.apc-field input[aria-invalid="true"] { border-color: #b3261e; }

.apc-hint { font-size: 11px; color: #8a90a6; margin-top: 4px; }

.apc-btn {
    width: 100%;
    padding: 12px 16px;
    min-height: 44px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #6a5cff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.apc-btn:hover { background: #5a4cf0; }
.apc-btn[disabled] { opacity: .6; cursor: not-allowed; }

.apc-privacy { font-size: 11px; color: #8a90a6; margin: 10px 0 0; line-height: 1.5; }

/* ---- Transcript ---- */
.apc-msg {
    max-width: 88%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 10px;
    white-space: normal;
    overflow-wrap: break-word;
}

.apc-msg p { margin: 0 0 8px; }
.apc-msg p:last-child { margin-bottom: 0; }
.apc-msg ul { margin: 0 0 8px; padding-left: 18px; }

.apc-msg-bot {
    background: #fff;
    color: #18212e;
    border: 1px solid #eef0f6;
    border-bottom-left-radius: 4px;
}

.apc-msg-user {
    background: #6a5cff;
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.apc-msg-error {
    background: #fdecec;
    color: #b3261e;
    border: 1px solid #f7c5c2;
    max-width: 100%;
}

/* ---- Quick-reply chips ---- */
.apc-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 12px;
}

.apc-chip {
    padding: 9px 13px;
    min-height: 38px;
    font-size: 13px;
    color: #6a5cff;
    background: #fff;
    border: 1px solid #d9d5ff;
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
}

.apc-chip:hover { background: #f4f2ff; border-color: #6a5cff; }

/* ---- Typing indicator ---- */
.apc-typing { display: flex; gap: 4px; align-items: center; padding: 4px 0; }

.apc-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8a90a6;
    animation: apc-bounce 1.2s infinite ease-in-out;
}

.apc-typing span:nth-child(2) { animation-delay: .15s; }
.apc-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes apc-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* ---- Composer ---- */
.apc-foot {
    flex: 0 0 auto;
    border-top: 1px solid #eef0f6;
    padding: 10px;
    background: #fff;
}

.apc-composer { display: flex; gap: 8px; align-items: flex-end; }

.apc-composer textarea {
    flex: 1 1 auto;
    resize: none;
    max-height: 96px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: #0b1020;
    border: 1px solid #e4e7f0;
    border-radius: 10px;
}

.apc-send {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: #6a5cff;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.apc-send:hover { background: #5a4cf0; }
.apc-send[disabled] { opacity: .5; cursor: not-allowed; }

.apc-disclaimer {
    font-size: 10.5px;
    color: #8a90a6;
    text-align: center;
    margin: 7px 0 0;
}

/* Screen-reader-only, for the live region label and status text. */
.apc-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Small screens: full-width sheet ---- */
@media (max-width: 480px) {
    .apc-panel {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        height: calc(100vh - 16px);
        max-height: none;
        border-radius: 14px;
    }
    .apc-launcher { left: 16px; bottom: 16px; }
}

/* ---- Respect a reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce) {
    .apc-launcher { transition: none; }
    .apc-launcher:hover { transform: none; }
    .apc-typing span { animation: none; opacity: .7; }
}

/* ---- Forced-colours / high-contrast mode ---- */
@media (forced-colors: active) {
    .apc-panel,
    .apc-msg,
    .apc-chip { border: 1px solid CanvasText; }
}