/* ---------------------------------------------------------------------------------------------
   The support chat bubble that sits in the bottom right corner of the page.

   Loaded by the support widget partial, on any page that includes it. That partial may be shown
   inside an iframe on a page we did not write, so this stylesheet assumes nothing about the
   document around it: it positions everything against the window rather than a parent, sets its
   own typeface, and stacks itself above everything else.

   Every colour and corner size comes from tokens.css, which the partial loads first.
   --------------------------------------------------------------------------------------------- */

/* The widget as a whole, pinned to the bottom right corner of the window. */
.support-widget {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: var(--layer-support-widget);
    font-family: var(--font-support-widget);
    color: var(--support-text);
}

/* The round button that opens the chat. It lifts slightly under the pointer. */
.support-widget-launcher {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-circle);
    background: var(--support-green);
    color: var(--surface-white);
    border: none;
    box-shadow: 0 12px 28px var(--support-shadow-launcher);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease;
}

.support-widget-launcher:hover {
    transform: translateY(-2px);
    background: var(--support-green-dark);
}

.support-widget-launcher svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

/* The small red circle on the launcher carrying the number of replies not yet read. */
.support-widget-launcher .support-widget-unread {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    border-radius: var(--radius-message);
    background: var(--support-unread-red);
    color: var(--surface-white);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* The chat panel itself, which opens above the launcher. It never grows wider or taller than the
   window leaves room for, so it still fits on a phone. */
.support-widget-panel {
    position: fixed;
    right: 18px;
    bottom: 90px;
    width: 360px;
    max-width: calc(100vw - 36px);
    height: 520px;
    max-height: calc(100vh - 120px);
    background: var(--surface-white);
    border-radius: var(--radius-panel);
    box-shadow: 0 24px 60px var(--support-shadow-panel);
    border: 1px solid var(--support-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.support-widget-panel.hidden {
    display: none;
}

/* The green strip across the top of the panel, holding the title and the close button. */
.support-widget-header {
    background: var(--support-green);
    color: var(--surface-white);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.support-widget-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.support-widget-header p {
    margin: 2px 0 0;
    font-size: 12px;
    opacity: 0.85;
}

.support-widget-close {
    background: transparent;
    border: none;
    color: var(--surface-white);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: var(--radius-medium);
}

.support-widget-close:hover {
    background: var(--support-close-hover);
}

/* The scrolling list of messages between the header and the text box. */
.support-widget-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    background: var(--support-surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* What is shown in that list before anybody has said anything. */
.support-widget-empty {
    color: var(--support-text-muted);
    font-size: 13px;
    text-align: center;
    margin: auto 0;
    padding: 12px;
}

/* One message: a small line of who and when, above the bubble carrying the words. */
.support-message {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    font-size: 13.5px;
    line-height: 1.4;
}

.support-message-meta {
    font-size: 11px;
    color: var(--support-text-muted);
    margin-bottom: 3px;
}

/* The bubble itself. Line breaks the sender typed are kept, and a long unbroken word is forced
   to wrap rather than pushing the bubble out of the panel. */
.support-message-body {
    padding: 9px 13px;
    border-radius: var(--radius-bubble);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* The customer's own messages sit on the right in green, and staff replies sit on the left in
   white. Each has the corner nearest its own side squared off, which is what makes a bubble
   point back at whoever sent it. */
.support-message.customer {
    align-self: flex-end;
    align-items: flex-end;
}

.support-message.customer .support-message-body {
    background: var(--support-green);
    color: var(--surface-white);
    border-bottom-right-radius: var(--radius-small);
}

.support-message.staff {
    align-self: flex-start;
    align-items: flex-start;
}

.support-message.staff .support-message-body {
    background: var(--surface-white);
    color: var(--support-text);
    border: 1px solid var(--support-border);
    border-bottom-left-radius: var(--radius-small);
}

/* The strip along the bottom holding the text box and the send button. */
.support-widget-form {
    flex-shrink: 0;
    border-top: 1px solid var(--support-border);
    padding: 10px 12px;
    background: var(--surface-white);
    display: flex;
    gap: 8px;
}

/* The box the customer types into. It grows with what they write, up to a point, and then
   scrolls; the reader cannot drag it larger because that would push the send button out. */
.support-widget-form textarea {
    flex: 1 1 auto;
    resize: none;
    border: 1px solid var(--support-border);
    border-radius: var(--radius-message);
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--support-text);
    min-height: 38px;
    max-height: 120px;
    outline: none;
}

/* The ring around the text box while it has the keyboard's attention, replacing the outline
   removed above. */
.support-widget-form textarea:focus {
    border-color: var(--support-green);
    box-shadow: 0 0 0 2px var(--support-focus-ring);
}

/* The send button, which fades and refuses the pointer while there is nothing to send. */
.support-widget-form button {
    background: var(--support-green);
    color: var(--surface-white);
    border: none;
    border-radius: var(--radius-message);
    padding: 0 14px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
}

.support-widget-form button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* The line under the text box reporting whether the last message got through. It keeps its
   height even when empty, so the panel does not jump as messages come and go. */
.support-widget-status {
    font-size: 11px;
    color: var(--support-text-muted);
    padding: 4px 14px 0;
    min-height: 14px;
}

.support-widget-status.error {
    color: var(--support-error-red);
}