#saf-aster-launcher,
#saf-aster-chat,
#saf-aster-chat * {
    box-sizing: border-box;
}

#saf-aster-launcher,
#saf-aster-livechat-launcher {
    /* Task #462 spacing contract: Aster is the rightmost/primary
       launcher at a 24px inset, 56x56; LiveChat's plugin-owned proxy
       launcher (see class-widget.php and aster.js) docks 16px to its
       left at the same size. Kept as custom properties so both
       launchers -- and their mirrored left-position variants below --
       derive from one source instead of duplicating pixel math. */
    --saf-aster-dock-inset: 24px;
    --saf-aster-dock-gap: 16px;
    --saf-aster-dock-size: 56px;
}

#saf-aster-launcher {
    position: fixed;
    right: var(--saf-aster-dock-inset, 24px);
    bottom: var(--saf-aster-dock-inset, 24px);
    z-index: 99999;
    display: grid;
    width: var(--saf-aster-dock-size, 56px);
    height: var(--saf-aster-dock-size, 56px);
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--saf-aster-accent-color, #5a5ddb);
    color: #fff;
    box-shadow: 0 8px 24px rgba(39, 44, 128, .34);
    cursor: pointer;
}

#saf-aster-launcher svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#saf-aster-launcher.saf-aster-position-left {
    right: auto;
    left: var(--saf-aster-dock-inset, 24px);
}

/* Task #462: LiveChat's own launcher is kept permanently hidden (see
   aster.js) and replaced by this plugin-owned proxy, docked one gap to
   the left of Aster's launcher so the two never overlap and Aster stays
   the rightmost/primary control. */
#saf-aster-livechat-launcher {
    position: fixed;
    right: calc(var(--saf-aster-dock-inset, 24px) + var(--saf-aster-dock-size, 56px) + var(--saf-aster-dock-gap, 16px));
    bottom: var(--saf-aster-dock-inset, 24px);
    z-index: 99998;
    display: grid;
    width: var(--saf-aster-dock-size, 56px);
    height: var(--saf-aster-dock-size, 56px);
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    /* Task #465: matches the reference dock spec's solid-fill launcher
       styling (was a white circle with a bordered outline). Reuses the
       existing contactIconColor appearance field as the fill instead of
       adding a new setting, so staff keep one color control for this
       button. */
    background: var(--saf-aster-contact-icon-color, #555b70);
    color: #fff;
    box-shadow: 0 8px 20px rgba(30, 35, 93, .2);
    cursor: pointer;
}

#saf-aster-livechat-launcher[hidden] {
    display: none;
}

#saf-aster-livechat-launcher svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#saf-aster-livechat-launcher.saf-aster-position-left {
    right: auto;
    left: calc(var(--saf-aster-dock-inset, 24px) + var(--saf-aster-dock-size, 56px) + var(--saf-aster-dock-gap, 16px));
}

/* Task #467: a rounded text pill docked directly to the left of the
   LiveChat icon, matching the reference dock spec. Sized to the icon's
   vertical center via bottom + half the dock size, rather than a fixed
   height, so it stays aligned if --saf-aster-dock-size is ever tuned. */
#saf-aster-livechat-label {
    position: fixed;
    right: calc(var(--saf-aster-dock-inset, 24px) + 2 * (var(--saf-aster-dock-size, 56px) + var(--saf-aster-dock-gap, 16px)));
    bottom: calc(var(--saf-aster-dock-inset, 24px) + (var(--saf-aster-dock-size, 56px) / 2) - 22px);
    z-index: 99998;
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 22px;
    background: #fff;
    color: #24283a;
    font: 600 14px/44px -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(30, 35, 93, .2);
    cursor: pointer;
}

#saf-aster-livechat-label[hidden] {
    display: none;
}

#saf-aster-livechat-label.saf-aster-position-left {
    right: auto;
    left: calc(var(--saf-aster-dock-inset, 24px) + 2 * (var(--saf-aster-dock-size, 56px) + var(--saf-aster-dock-gap, 16px)));
}

@media (max-width: 600px) {
    #saf-aster-livechat-label {
        display: none;
    }
}

#saf-aster-chat {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 100000;
    display: flex;
    width: 390px;
    max-width: calc(100vw - 24px);
    height: min(var(--saf-aster-height, 760px), calc(100vh - 36px));
    max-height: calc(100vh - 36px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(75, 84, 184, .14);
    border-radius: 24px;
    background: #f7f8fc;
    color: #242738;
    box-shadow: 0 22px 60px rgba(30, 35, 93, .28);
    font: 14px/1.42 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

#saf-aster-chat[hidden],
#saf-aster-chat [hidden] {
    display: none !important;
}

#saf-aster-chat.saf-aster-position-left {
    right: auto;
    left: 18px;
}

.saf-aster-header {
    position: relative;
    min-height: 112px;
    padding: 17px 18px 15px;
    flex: 0 0 auto;
    background:
        radial-gradient(circle at 80% 0%, rgba(255, 255, 255, .2), transparent 38%),
        linear-gradient(135deg, var(--saf-aster-header-gradient-start, #5453da) 0%, var(--saf-aster-header-gradient-middle, #7377e8) 50%, var(--saf-aster-header-gradient-end, #9fb4f5) 100%);
    color: #fff;
}

.saf-aster-brand {
    display: flex;
    align-items: center;
    gap: 9px;
}

.saf-aster-flower {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    font: 29px/1 Georgia, serif;
}

.saf-aster-logo {
    display: block;
    max-width: 190px;
    max-height: 40px;
    object-fit: contain;
}

.saf-aster-header-avatar {
    display: block;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    object-fit: cover;
}

.saf-aster-member-badge {
    display: inline-flex;
    padding: 2px 8px;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.saf-aster-close-icon {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    object-fit: cover;
}

.saf-aster-brand-small,
.saf-aster-brand strong {
    display: block;
    color: #fff;
    letter-spacing: .01em;
}

.saf-aster-brand-small {
    margin-bottom: -4px;
    font-size: 15px;
}

.saf-aster-brand strong {
    font-size: 27px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .04em;
}

.saf-aster-header > p {
    max-width: 210px;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .94);
    font-size: 12px;
    line-height: 1.25;
}

.saf-aster-header-actions {
    position: absolute;
    top: 16px;
    right: 14px;
    display: flex;
    gap: 7px;
}

.saf-aster-header-actions button,
.saf-aster-header-actions a {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .17);
    color: #fff;
    cursor: pointer;
}

.saf-aster-header-actions svg,
.saf-aster-access svg,
.saf-aster-form svg,
.saf-aster-support-bar svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.saf-aster-access {
    display: flex;
    min-height: 58px;
    padding: 10px 17px;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    border-bottom: 1px solid #ead887;
    background: #fff7d8;
    color: #6d602d;
}

.saf-aster-access-icon {
    display: grid;
    color: #8b7b39;
}

.saf-aster-access-copy {
    flex: 1;
    font-size: 13px;
}

.saf-aster-login {
    display: inline-flex;
    min-height: 36px;
    padding: 7px 17px;
    align-items: center;
    border-radius: 999px;
    background: #2ea65a;
    color: #fff !important;
    font-weight: 650;
    text-decoration: none;
}

.saf-aster-content {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

/* Staff/tester-only route debug strip -- see isStaffDebug in class-widget.php
   and aster.js. Never shown to an ordinary member. */
.saf-aster-debug {
    margin: 0;
    padding: 5px 14px;
    background: #1e1b4b;
    color: #d7d9ff;
    font-size: 11px;
    line-height: 1.4;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-word;
}

.saf-aster-messages {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 14px 14px 22px;
    overflow: auto;
    background: #f5f6fa;
}

.saf-aster-bubble {
    max-width: 88%;
    margin: 9px 0;
    padding: 12px 13px;
    border: 1px solid #e5e8f0;
    border-radius: 5px 15px 15px 15px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(28, 33, 72, .04);
    line-height: 1.43;
    white-space: pre-wrap;
}

.saf-aster-bubble.welcome {
    position: relative;
    padding-left: 45px;
}

.saf-aster-bubble.welcome::before {
    content: "✣";
    position: absolute;
    top: 11px;
    left: 12px;
    color: #6566dc;
    font: 27px/1 Georgia, serif;
}

.saf-aster-bubble.user {
    margin-left: auto;
    border-color: var(--saf-aster-user-message-color, var(--saf-aster-accent-color, #5a5ddb));
    border-radius: 15px 5px 15px 15px;
    background: var(--saf-aster-user-message-color, var(--saf-aster-accent-color, #5a5ddb));
    color: #fff;
}

.saf-aster-bubble a {
    color: #2f69bf;
}

.saf-aster-paragraph {
    margin: 0 0 8px;
}

.saf-aster-paragraph:last-child {
    margin-bottom: 0;
}

.saf-aster-heading {
    margin: 12px 0 6px;
    font-weight: 700;
    line-height: 1.3;
}

.saf-aster-heading:first-child {
    margin-top: 0;
}

.saf-aster-heading.level-1 {
    font-size: 1.15em;
}

.saf-aster-heading.level-2 {
    font-size: 1.07em;
}

.saf-aster-heading.level-3 {
    font-size: 1em;
}

.saf-aster-inline-link {
    color: #2f69bf;
    text-decoration: underline;
}

.saf-aster-list {
    margin: 0 0 8px;
    padding-left: 20px;
}

.saf-aster-list:last-child {
    margin-bottom: 0;
}

.saf-aster-list li + li {
    margin-top: 4px;
}

.saf-aster-citation-marker {
    display: inline;
    margin-left: 1px;
    /* Task #465: #4a4e78 (set by task #459 for contrast) still read as
       faint at citation-marker size next to normal body text, so the
       default moved to a more saturated, clearly legible blue. Staff can
       override it from Appearance settings (--saf-aster-citation-color,
       see class-widget.php/class-admin.php), same pattern as
       accentColor/contactIconColor. */
    color: var(--saf-aster-citation-color, #1d4ed8) !important;
    font-size: .72em;
    font-weight: 700;
    text-decoration: none;
    vertical-align: super;
    line-height: 0;
}

.saf-aster-citation-marker:hover,
.saf-aster-citation-marker:focus-visible {
    /* Reuses the widget's accent color variable so a staff-configured
       accent still reads as the "active" citation color. */
    color: var(--saf-aster-accent-color, #4549bf) !important;
    text-decoration: underline;
}

.saf-aster-sources {
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid #e3e6f0;
}

.saf-aster-sources ol {
    margin: 6px 0 0;
    padding-left: 0;
    list-style: none;
}

.saf-aster-sources li + li {
    margin-top: 10px;
}

.saf-aster-source-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.saf-aster-source-title {
    color: #2f69bf;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.saf-aster-source-meta {
    color: #8a8fa6;
    font-size: 11px;
}

.saf-aster-contact-link {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.saf-aster-actions {
    display: flex;
    margin-top: 13px;
    flex-wrap: wrap;
    gap: 8px;
}

.saf-aster-action {
    display: inline-flex;
    min-height: 42px;
    padding: 9px 13px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* The "Talk to an SAF staffer" action renders as a <button> (it triggers
   the in-page LiveChat handoff instead of navigating) while every other
   action stays an <a>; reset default button chrome so it matches the
   link styling above exactly. */
button.saf-aster-action {
    border: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
}

.saf-aster-action.primary {
    background: linear-gradient(135deg, #22449c 0%, #17346f 100%);
    color: #fff !important;
    box-shadow: 0 2px 5px rgba(23, 52, 111, .22);
}

.saf-aster-action.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(23, 52, 111, .28);
}

.saf-aster-action.resource {
    border: 1px solid rgba(34, 68, 156, .22);
    background: #eef3ff;
    color: #17346f !important;
}

.saf-aster-action.resource:hover {
    border-color: rgba(34, 68, 156, .42);
    background: #e2eaff;
}

.saf-aster-suggestions {
    display: flex;
    margin-top: 10px;
    flex-direction: column;
    gap: 8px;
}

.saf-aster-suggestion {
    display: flex;
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    align-items: center;
    border: 1px solid rgba(34, 68, 156, .22);
    border-radius: 999px;
    background: #eef3ff;
    color: #17346f;
    font: inherit;
    font-size: 13px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.saf-aster-suggestion:hover,
.saf-aster-suggestion:focus-visible {
    border-color: rgba(34, 68, 156, .42);
    background: #e2eaff;
}

.saf-aster-suggestion:disabled {
    cursor: default;
    opacity: .6;
}

/* Task #508: starter questions + recent-news block rendered below the
   member greeting, outside any answer bubble -- removed once the member
   sends their first real question (see aster.js's removeIntroExtras()). */
.saf-aster-intro-extras {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 4px 0 12px 44px;
    max-width: calc(100% - 44px);
}

.saf-aster-starters {
    margin-top: 0;
}

/* Task #517: "In case you missed it" is presented as a rounded, lightly-
   tinted card -- bell icon + label header, then each item as a bold
   clickable title with its date underneath, divided from the next item. */
.saf-aster-news {
    font-size: 13px;
    color: #4a5170;
    background: #eef2ff;
    border-radius: 12px;
    padding: 12px 14px;
}

.saf-aster-news-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
}

.saf-aster-news-bell {
    flex: none;
    color: #4338ca;
}

.saf-aster-news-lead {
    font-weight: 600;
    color: #312e81;
}

.saf-aster-news-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.saf-aster-news-item {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    border-top: 1px solid rgba(67, 56, 202, 0.15);
}

.saf-aster-news-item:first-child {
    padding-top: 0;
    border-top: none;
}

.saf-aster-news-item:last-child {
    padding-bottom: 0;
}

.saf-aster-news-title {
    font-weight: 600;
    color: #1e2333;
    text-decoration: none;
}

.saf-aster-news-title:hover {
    text-decoration: underline;
}

.saf-aster-news-date {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

/* Formula / worked-example blocks (task #456) -- visually distinct inset
   blocks for a calculation answer, separate from ordinary answer text. */
.saf-aster-formula-example {
    margin: 6px 0 8px;
}

.saf-aster-formula-block,
.saf-aster-example-block {
    margin: 4px 0 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f3f4f6;
    color: #1a1d26;
    letter-spacing: -.01em;
}

.saf-aster-formula-block {
    font-size: 15px;
    font-weight: 650;
    line-height: 1.35;
}

.saf-aster-example-block {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.saf-aster-formula-label,
.saf-aster-example-label {
    display: block;
    margin: 0 0 4px;
    color: #6d7280;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.saf-aster-bubble.thinking {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: 9px;
    color: #4e5270;
}

.saf-aster-thinking-dots {
    display: inline-flex;
    gap: 4px;
}

.saf-aster-thinking-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6265dc;
    animation: saf-aster-thinking 1.2s infinite ease-in-out;
}

.saf-aster-thinking-dots i:nth-child(2) {
    animation-delay: .15s;
}

.saf-aster-thinking-dots i:nth-child(3) {
    animation-delay: .3s;
}

@keyframes saf-aster-thinking {
    0%, 60%, 100% { transform: translateY(0); opacity: .42; }
    30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .saf-aster-thinking-dots i {
        animation: none;
        opacity: .72;
    }
}

/* Task #497: instant click feedback for every LiveChat entry point (the
   proxy launcher/label, panel footer link, "Talk to an SAF staffer"
   action, and the handoff dialog's confirm button) -- applied the moment
   the control is clicked and cleared once the widget actually opens or
   the attempt fails/times out (see aster.js's beginLiveChatAttempt /
   endLiveChatAttempt). Every trigger this applies to is a <button>, so
   `disabled` plus this class together fully suppress a repeat click. */
.saf-aster-livechat-loading {
    position: relative;
    pointer-events: none;
    cursor: wait;
}

.saf-aster-livechat-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, .85);
    border-top-color: currentColor;
    border-radius: 50%;
    background: rgba(0, 0, 0, .12);
    animation: saf-aster-livechat-spin .7s linear infinite;
}

@keyframes saf-aster-livechat-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .saf-aster-livechat-spinner {
        animation: none;
    }
}

.saf-aster-bubble blockquote {
    margin: 8px 0 0;
    padding-left: 10px;
    border-left: 3px solid #c7cdf3;
    color: #555b70;
    font-size: 12px;
}

.saf-aster-notice {
    position: absolute;
    inset: 10px;
    z-index: 2;
    padding: 17px;
    overflow: auto;
    border: 1px solid #dfe3ef;
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 10px 30px rgba(31, 37, 82, .16);
}

.saf-aster-notice .saf-aster-notice-title {
    margin: 0 0 9px;
    color: #323760;
    font-size: 20px;
    font-weight: 700;
}

.saf-aster-notice p {
    margin: 0 0 12px;
    color: #4e5366;
    font-size: 12px;
}

.saf-aster-notice a {
    color: #355fc4;
}

.saf-aster-member-memory {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #dfe3ef;
    border-radius: 10px;
    background: #f6f7fc;
}

.saf-aster-member-memory p {
    margin: 0 0 8px;
}

.saf-aster-member-memory label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #323760;
    font-size: 12px;
    font-weight: 600;
}

.saf-aster-start,
.saf-aster-handoff-confirm {
    border: 0 !important;
    background: var(--saf-aster-accent-color, #575bd9) !important;
    color: #fff !important;
}

.saf-aster-start {
    display: block;
    width: 100%;
    min-height: 42px;
    margin-top: 14px;
    border-radius: 9px;
    font-weight: 650;
}

.saf-aster-form {
    display: flex;
    padding: 10px 12px;
    align-items: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    border-top: 1px solid #e2e5ed;
    background: #fff;
}

.saf-aster-form textarea {
    min-height: 42px;
    max-height: 100px;
    padding: 10px 12px;
    flex: 1;
    resize: none;
    border: 1px solid #d9dce7;
    border-radius: 12px;
    background: #fff;
    color: #242738;
    font: inherit;
}

.saf-aster-form button {
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--saf-aster-accent-color, #575bd9);
    color: #fff;
}

.saf-aster-form button:disabled,
.saf-aster-form textarea:disabled {
    opacity: .55;
}

.saf-aster-support-bar {
    display: flex;
    min-height: 66px;
    padding: 8px 12px 10px;
    justify-content: center;
    align-items: stretch;
    gap: 4px;
    flex: 0 0 auto;
    border-top: 1px solid #e7e9f0;
    background: #fbfcfe;
}

.saf-aster-support-bar:empty {
    display: none;
}

#saf-aster-chat .saf-aster-handoff,
#saf-aster-chat .saf-aster-contact-link {
    display: inline-flex;
    min-width: 0;
    max-width: 140px;
    flex: 1 1 0;
    padding: 4px 8px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--saf-aster-contact-icon-color, #555b70);
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* Task #496: wraps each support-bar icon in a soft rounded-square badge
   (reference screenshot look) instead of a bare floating SVG. The tint
   is derived from the existing --saf-aster-contact-icon-color variable
   via color-mix so it still follows the staff-configured accent; a flat
   fallback background is set first for browsers without color-mix
   support so the badge never renders fully transparent. */
.saf-aster-contact-badge {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: rgba(85, 91, 112, .12);
    background: color-mix(in srgb, var(--saf-aster-contact-icon-color, #555b70) 14%, #fff);
}

.saf-aster-support-bar svg {
    width: 20px;
    height: 20px;
    color: var(--saf-aster-contact-icon-color, #555b70);
}

/* Task #462: guaranteed link back to LiveChat while the panel is open
   (the floating LiveChat launcher is hidden for the duration -- see
   aster.js open()/closePanel()). Deliberately plain and small since it
   is a fallback path, not a promoted action. */
.saf-aster-livechat-footer {
    margin: 0;
    padding: 6px 12px 10px;
    text-align: center;
    flex: 0 0 auto;
}

.saf-aster-livechat-footer-link {
    border: 0;
    background: none;
    padding: 0;
    color: var(--saf-aster-contact-icon-color, #555b70);
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.saf-aster-size-menu {
    position: relative;
}

.saf-aster-size-panel {
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    width: 210px;
    padding: 10px 12px;
    gap: 6px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(31, 37, 82, .22);
    color: #242738;
}

.saf-aster-size-label {
    flex: 0 0 100%;
    margin: 0 0 4px;
    color: #888;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Task #467: restyled to match the reference plugin's minimal segmented
   control (Smart Chat Pro's .saf-size-btn) -- a thin light-gray border,
   small radius, and a plain white/off-white idle state, rather than the
   previous heavier tinted-border pill look. The label above forces a
   wrap via flex-basis: 100%; the three option buttons below then share
   the row as equal flex-basis siblings.
   Bug fix (task #469): these are <button> elements sitting inside
   .saf-aster-header-actions (the "..."/refresh/close icon row), so the
   generic ".saf-aster-header-actions button" rule above -- fixed 36x36
   circle, no border, translucent-white fill, white text -- also matches
   them and, at equal specificity, wins by source order. That's what made
   Wide/Extra Wide render as invisible white-on-near-white text with no
   border; only the selected option was rescued by its own
   higher-specificity [aria-current="true"] rule. Scoping every rule below
   under .saf-aster-size-panel raises specificity (two classes) past
   ".saf-aster-header-actions button" (one class + one type) so this
   styling wins on its own, without needing !important, and explicit
   display/width/height/padding undo the circular-icon-button shape. */
.saf-aster-size-panel .saf-aster-size-option {
    display: block;
    flex: 1 1 0;
    width: auto;
    height: auto;
    padding: 6px 4px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f8f8f8;
    color: #555;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.saf-aster-size-panel .saf-aster-size-option:hover,
.saf-aster-size-panel .saf-aster-size-option:focus-visible {
    border-color: var(--saf-aster-accent-color, #1976d2);
    background: #eef4fc;
}

.saf-aster-size-panel .saf-aster-size-option[aria-current="true"] {
    background: var(--saf-aster-accent-color, #1976d2);
    border-color: var(--saf-aster-accent-color, #1976d2);
    color: #fff;
    font-weight: 700;
}

#saf-aster-chat.saf-aster-size-wide {
    width: 520px;
}

#saf-aster-chat.saf-aster-size-extra-wide {
    width: 720px;
}

.saf-aster-feedback {
    margin: 6px 0 12px;
    color: #5e6376;
    font-size: 12px;
}

.saf-aster-feedback button {
    margin: 4px 3px 0 0;
    padding: 5px 8px;
    border: 1px solid #cfd4e6;
    border-radius: 7px;
    background: #fff;
    color: #353b60;
}

.saf-aster-handoff-dialog {
    position: absolute;
    inset: 10px;
    z-index: 5;
    padding: 18px;
    overflow: auto;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 36px rgba(23, 28, 74, .28);
}

.saf-aster-handoff-dialog h2 {
    margin: 0 0 6px;
    color: #30365e;
    font-size: 20px;
}

.saf-aster-handoff-dialog h3 {
    margin-bottom: 7px;
    font-size: 14px;
}

.saf-aster-handoff-list label {
    display: flex;
    margin: 10px 0;
    gap: 8px;
    white-space: pre-line;
}

.saf-aster-handoff-dialog input[type="text"],
.saf-aster-display-name {
    width: 100%;
    margin-top: 5px;
    padding: 8px;
    border: 1px solid #d5d9e7;
    border-radius: 7px;
}

.saf-aster-handoff-preview {
    padding: 10px;
    border-radius: 8px;
    background: #f3f5fa;
    white-space: pre-line;
}

.saf-aster-dialog-actions {
    display: flex;
    margin-top: 12px;
    gap: 8px;
}

.saf-aster-dialog-actions button {
    padding: 9px 11px;
    border: 1px solid #cfd4e4;
    border-radius: 8px;
    background: #fff;
}

.saf-aster-announcement {
    display: flex;
    padding: 8px 14px;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.4;
}

.saf-aster-announcement-icon {
    flex: 0 0 auto;
}

.saf-aster-announcement-text a {
    color: inherit;
    text-decoration: underline;
}

.saf-aster-announcement-info {
    background: #e5edff;
    color: #1d3a8a;
}

.saf-aster-announcement-warning {
    background: #fff3cd;
    color: #7a5300;
}

.saf-aster-announcement-maintenance {
    background: #ede4ff;
    color: #4a2e8a;
}

.saf-aster-announcement-success {
    background: #dff4e7;
    color: #176b38;
}

/* Task #524: a rounded, stacked card (headline + subtext, then a
   full-width pill CTA) sitting below the access bar and above the
   greeting, rather than the old full-width strip above it. Rendered as
   an <a> (the whole card is the click target) when a CTA URL is
   configured, or a plain <div> otherwise -- see class-widget.php. */
.saf-aster-promo {
    position: relative;
    display: flex;
    margin: 12px 14px 0;
    padding: 14px;
    flex-direction: column;
    gap: 12px;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
}

a.saf-aster-promo {
    cursor: pointer;
}

.saf-aster-promo-content {
    padding-right: 20px;
    text-align: left;
}

.saf-aster-promo-headline {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.25;
}

.saf-aster-promo-subtext {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.35;
    opacity: .92;
}

.saf-aster-promo-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 11px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 650;
    text-align: center;
    white-space: nowrap;
}

.saf-aster-promo-dismiss {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1;
    padding: 2px 6px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    opacity: .75;
    cursor: pointer;
}

.saf-aster-promo-dismiss:hover {
    opacity: 1;
}

.saf-aster-notice-note {
    font-style: italic;
    opacity: .85;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#saf-aster-launcher:focus-visible,
#saf-aster-chat button:focus-visible,
#saf-aster-chat a:focus-visible,
#saf-aster-chat textarea:focus-visible,
#saf-aster-chat input:focus-visible {
    outline: 3px solid #173f9b;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    #saf-aster-launcher,
    #saf-aster-launcher.saf-aster-position-left {
        right: 16px;
        left: auto;
        bottom: 16px;
    }

    /* Task #462: on narrow viewports the two launchers stack instead of
       sitting side by side, so neither shrinks or crowds page content.
       Aster keeps its usual bottom-most, easiest-to-reach spot (it stays
       the primary control at every width); LiveChat's proxy launcher
       docks directly above it with a 12px gap, both inset 16px. */
    #saf-aster-livechat-launcher,
    #saf-aster-livechat-launcher.saf-aster-position-left {
        right: 16px;
        left: auto;
        bottom: calc(16px + var(--saf-aster-dock-size, 56px) + 12px);
    }

    #saf-aster-chat,
    #saf-aster-chat.saf-aster-position-left,
    #saf-aster-chat.saf-aster-size-wide,
    #saf-aster-chat.saf-aster-size-extra-wide {
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
    }

    .saf-aster-size-menu {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #saf-aster-chat *,
    #saf-aster-launcher {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }

    .saf-aster-action:hover {
        transform: none;
    }
}