/* PAS-3080: redesigned embedded chatbot widget (visual only).
 *
 * Kill switch: remove the <link> tag for this file from
 * app/templates/channel/chat.html. All rules are scoped under
 * .message-area.embedded-widget so they only affect the embedded
 * widget iframe — never the pastors.ai-hosted /channelChat page or
 * any other surface.
 *
 * Design tokens are duplicated locally rather than imported so this
 * file is fully self-contained and removable in one step.
 *
 * !important is used where the existing inline <style> block in
 * channel/chat.html (and base chatbox.css overrides for the
 * embedded-widget scope) already use !important. Without it those
 * rules win on equal specificity.
 */

.message-area.embedded-widget {
    --pa-sage: #4E796B;
    --pa-sage-2: #42624f;
    --pa-sage-soft: rgba(78, 121, 107, 0.10);
    --pa-dark: #183B56;
    --pa-muted: #5A7184;
    --pa-light: #FAFBFB;
    --pa-light-2: #f1f4f6;
    --pa-border-soft: #e6ebef;
    --pa-border: #d7d7d7;
    --pa-gray-300: #cbd1d8;
    --pa-gray-500: #8a9aab;
    --pa-radius-pill: 999px;

    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

/* ── neutralise legacy chrome inside the widget ── */
.message-area.embedded-widget .chat-area {
    background: #fff !important;
    border: none !important;
    margin-top: 0 !important;
}
.message-area.embedded-widget .modal-content {
    border: none !important;
    background: #fff !important;
}

/* ── compact header (logo + name + subtitle + collapse chevron) ── */
.message-area.embedded-widget .msg-head {
    padding: 0 !important;
    border-bottom: 1px solid var(--pa-border-soft) !important;
}
.message-area.embedded-widget .widget-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
}
.message-area.embedded-widget .widget-header-logo {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pa-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
}
.message-area.embedded-widget .widget-header-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    max-width: none !important;
    padding: 0 !important;
    border: none !important;
}
.message-area.embedded-widget .widget-header-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.message-area.embedded-widget .widget-header-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--pa-dark);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.message-area.embedded-widget .widget-header-sub {
    font-size: 11.5px;
    color: var(--pa-sage);
    background: var(--pa-sage-soft);
    padding: 1px 7px;
    border-radius: 4px;
    align-self: flex-start;
    line-height: 1.4;
}
.message-area.embedded-widget .widget-header-collapse {
    margin-left: auto;
    flex: none;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--pa-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    padding: 0;
}
.message-area.embedded-widget .widget-header-collapse:hover {
    background: var(--pa-light-2);
    color: var(--pa-dark);
}
.message-area.embedded-widget .widget-header-collapse svg {
    display: block;
}

/* Hide any leftover legacy widget-logo markup if it still ships. */
.message-area.embedded-widget .msg-head .widget-logo:not(.widget-header) {
    display: none !important;
}

/* ── message bubbles ── */
.message-area.embedded-widget .msg-body {
    padding: 0 4px;
}
.message-area.embedded-widget .msg-body ul li {
    margin: 12px 0 !important;
}
.message-area.embedded-widget .msg-body ul li.sender:before {
    display: none !important; /* drop legacy speech-bubble triangle */
}
.message-area.embedded-widget .msg-body ul li.sender p {
    background: var(--pa-light-2) !important;
    color: var(--pa-dark) !important;
    padding: 11px 15px !important;
    border: none !important;
    border-radius: 16px 16px 16px 5px !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    max-width: 82% !important;
    margin-bottom: 0 !important;
}
.message-area.embedded-widget .msg-body ul li.repaly p {
    background: var(--pa-sage) !important;
    color: #fff !important;
    padding: 11px 15px !important;
    border: none !important;
    border-radius: 16px 16px 5px 16px !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    max-width: 82% !important;
}

/* Inline links inside bot answers (non-timestamp / non-YouTube). */
.message-area.embedded-widget .msg-body ul li.sender p a:not(.yt-ts-pill) {
    color: var(--pa-sage) !important;
    border-bottom: 1px solid rgba(78, 121, 107, 0.35);
    text-decoration: none !important;
    font-weight: 500;
    word-break: break-word;
}
.message-area.embedded-widget .msg-body ul li.sender p a:not(.yt-ts-pill):hover {
    border-bottom-color: var(--pa-sage);
}

/* Thumbs / copy / share icons inside the bot bubble — keep them
 * readable but not loud against the new lighter background. */
.message-area.embedded-widget .msg-body .thumbs-up-down {
    margin-top: 8px;
    display: inline-flex;
    gap: 6px;
    opacity: 0.7;
}
.message-area.embedded-widget .msg-body .thumbs-up-down:hover {
    opacity: 1;
}

/* ── YouTube/sermon timestamp pill chips ── */
.message-area.embedded-widget .msg-body a.yt-ts-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    vertical-align: baseline;
    margin: 1px 2px;
    padding: 1px 9px 1px 7px !important;
    border-radius: var(--pa-radius-pill) !important;
    background: var(--pa-sage) !important;
    color: #fff !important;
    font-size: 0.82em !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.15s;
    line-height: 1.6;
    border: none !important;
}
.message-area.embedded-widget .msg-body a.yt-ts-pill:hover {
    background: var(--pa-sage-2) !important;
    color: #fff !important;
}
.message-area.embedded-widget .msg-body a.yt-ts-pill svg {
    flex: none;
    fill: currentColor;
}

/* ── new typing dots animation (replaces the GIF inside the widget) ── */
.message-area.embedded-widget .msg-body li.sender.loader p {
    background: var(--pa-light-2) !important;
    padding: 14px 18px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    border-radius: 16px 16px 16px 5px !important;
    margin-bottom: 0 !important;
    min-height: auto;
    border: none !important;
}
.message-area.embedded-widget .msg-body li.sender.loader p img {
    display: none !important;
}
.message-area.embedded-widget .msg-body li.sender.loader p::before,
.message-area.embedded-widget .msg-body li.sender.loader p::after,
.message-area.embedded-widget .msg-body li.sender.loader p .wgt-dot {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pa-muted);
    display: inline-block;
    animation: pa3080-dot 1.2s infinite ease-in-out;
    opacity: 0.35;
}
.message-area.embedded-widget .msg-body li.sender.loader p::before {
    animation-delay: 0s;
}
.message-area.embedded-widget .msg-body li.sender.loader p .wgt-dot {
    animation-delay: 0.18s;
}
.message-area.embedded-widget .msg-body li.sender.loader p::after {
    animation-delay: 0.36s;
}
@keyframes pa3080-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ── pre-question pills ──
 * widget_redesign.js relocates this block out of .send-box and into
 * .msg-body (right after #qa) so the pills sit directly under the
 * greeting bubble. Style as a column of left-aligned pills.
 *
 * NOTE: `display` is intentionally NOT !important here so that the
 * legacy $('.pre-questions').hide()/show() (and the widget redesign
 * click handler) — both of which set element.style.display without
 * !important — can still toggle visibility. */
.message-area.embedded-widget .send-btns.pre-questions {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px;
    padding: 4px 4px 8px;
    margin: 0 !important;
}
/* Any other .send-btns that might exist (e.g. legacy sub-questions) — keep the row layout. */
.message-area.embedded-widget .send-btns:not(.pre-questions) {
    display: flex;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8px;
    padding: 8px 16px 0;
    margin: 0 !important;
}
.message-area.embedded-widget .send-btns .button-wrapper {
    background: #fff !important;
    border: 1px solid var(--pa-sage) !important;
    color: var(--pa-sage) !important;
    border-radius: var(--pa-radius-pill) !important;
    padding: 7px 14px !important;
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    transition: background 0.18s ease, color 0.18s ease;
    cursor: pointer;
    box-shadow: none !important;
}
.message-area.embedded-widget .send-btns .button-wrapper:hover {
    background: var(--pa-sage) !important;
}
.message-area.embedded-widget .send-btns .button-wrapper:hover span.label {
    color: #fff !important;
}
.message-area.embedded-widget .send-btns .button-wrapper span.label {
    color: var(--pa-sage) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

/* ── composer (input + send button) ── */
.message-area.embedded-widget .send-box {
    padding: 12px 16px 10px !important;
    border-top: 1px solid var(--pa-border-soft) !important;
    background: #fff;
}
.message-area.embedded-widget .send-box form {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0;
    position: relative;
}
.message-area.embedded-widget .send-box .form-control {
    flex: 1;
    background: #fff !important;
    border: 1px solid var(--pa-border) !important;
    border-radius: var(--pa-radius-pill) !important;
    padding: 11px 16px !important;
    padding-right: 56px !important;
    font-size: 14px !important;
    color: var(--pa-dark) !important;
    outline: none;
    transition: border-color 0.2s;
    box-shadow: none !important;
    height: auto;
    line-height: 1.4;
}
.message-area.embedded-widget .send-box .form-control:focus {
    border-color: var(--pa-sage) !important;
    box-shadow: none !important;
}
.message-area.embedded-widget .send-box .form-control::placeholder {
    color: var(--pa-gray-500);
}
.message-area.embedded-widget .send-box button {
    position: absolute !important;
    right: 5px !important;
    top: 50%;
    transform: translateY(-50%);
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: var(--pa-sage) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    margin: 0 !important;
}
.message-area.embedded-widget .send-box button:hover {
    background: var(--pa-sage-2) !important;
}
.message-area.embedded-widget .send-box button:disabled,
.message-area.embedded-widget .send-box button[disabled] {
    background: var(--pa-gray-300) !important;
    cursor: default;
    pointer-events: none;
    opacity: 0.7;
}
.message-area.embedded-widget .send-box button:disabled svg path,
.message-area.embedded-widget .send-box button[disabled] svg path {
    fill: #fff !important;
}
/* The legacy send-icon SVG ships with fill="black". Force white so it
 * reads on the sage button. */
.message-area.embedded-widget .send-box button svg {
    width: 18px;
    height: 18px;
    display: block;
}
.message-area.embedded-widget .send-box button svg path {
    fill: #fff !important;
}
.message-area.embedded-widget .send-box button i {
    color: #fff !important;
    margin: 0 !important;
    font-size: 14px;
}

/* ── footer "powered by Pastors.ai" ── */
.message-area.embedded-widget .powered-by,
.message-area.embedded-widget .send-box ~ .powered-by {
    display: block !important;
    background: transparent !important;
    text-align: center !important;
    padding: 6px 0 8px !important;
    font-size: 11px !important;
    color: var(--pa-gray-500) !important;
    letter-spacing: 0.2px;
    margin: 0 !important;
    border: none !important;
}
.message-area.embedded-widget .powered-by a {
    color: var(--pa-muted) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.message-area.embedded-widget .powered-by a:hover {
    color: var(--pa-sage) !important;
    text-decoration: underline !important;
}

/* ── scrollbar polish (WebKit only — degrades gracefully) ── */
.message-area.embedded-widget .modal-body::-webkit-scrollbar {
    width: 6px;
}
.message-area.embedded-widget .modal-body::-webkit-scrollbar-thumb {
    background: var(--pa-border);
    border-radius: var(--pa-radius-pill);
}
.message-area.embedded-widget .modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--pa-gray-500);
}

/* ── responsive guardrails ── */
@media (max-width: 360px) {
    .message-area.embedded-widget .widget-header {
        padding: 12px 14px;
        gap: 10px;
    }
    .message-area.embedded-widget .widget-header-logo {
        width: 36px;
        height: 36px;
    }
    .message-area.embedded-widget .widget-header-name {
        font-size: 14px;
    }
    .message-area.embedded-widget .widget-header-sub {
        font-size: 11px;
    }
    .message-area.embedded-widget .send-btns .button-wrapper {
        padding: 6px 11px !important;
    }
    .message-area.embedded-widget .send-btns .button-wrapper span.label {
        font-size: 12px !important;
    }
}