/* Chat pages design system — uniform with wa-insights / wa-flows.
   Tokens copied from resources/js/wa-insights/insights.css so the /chat list and
   conversation pages read as the same product surface.
   Fonts (Bricolage Grotesque + Plus Jakarta Sans) are loaded via <link> in the
   blade views, matching wa-insights / wa-flows. */

.content-wrapper:has(.wa-chat) {
    background: #eef3f0;
}

.wa-chat {
    --wa-green: #0b6b57;
    --wa-accent: #25d366;
    --wa-ink: #10231d;
    --wa-muted: #5c6d67;
    --wa-line: #dde6e2;
    --wa-shadow: 0 10px 30px rgba(10, 40, 35, 0.06);
    /* Flat thread ground. Replaces a two-layer radial-gradient wash that muddied
       the bubbles it sat behind — the bubbles carry the meaning, the ground holds
       still. */
    --wa-paper: #f4f7f5;
    /* Third type role: machine facts. Timestamps, delivery status, workflow names
       and message counts are the bot's output, not prose, so they are set in the
       system mono stack rather than the body face. No webfont, no added bytes. */
    --wa-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    color: var(--wa-ink);
    padding: 22px;
    max-width: 1200px;
    margin-inline: auto;
}
.wa-chat *,
.wa-chat *::before,
.wa-chat *::after {
    box-sizing: border-box;
}

/* Header */
.wa-chat__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.wa-chat__head h1 {
    font-family: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    margin: 0;
}
.wa-chat__head p {
    color: var(--wa-muted);
    margin: 4px 0 0;
    font-size: 14px;
}
.wa-chat__back {
    font-size: 13px;
    font-weight: 600;
    color: var(--wa-green);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wa-chat__back:hover {
    color: #095446;
    text-decoration: none;
}

/* Cards */
.wa-card {
    background: #fff;
    border: 1px solid var(--wa-line);
    border-radius: 16px;
    box-shadow: var(--wa-shadow);
    margin-bottom: 20px;
    overflow: hidden;
}
.wa-card__body {
    padding: 20px 22px;
}
.wa-card__head {
    padding: 16px 22px;
    border-bottom: 1px solid var(--wa-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.wa-card__head h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 600;
    font-size: 17px;
    margin: 0;
}

/* KPIs */
.wa-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.wa-kpi {
    background: linear-gradient(135deg, #f2fbf6, #eafaf1);
    border: 1px solid #d3efe0;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 92px;
}
.wa-kpi__label {
    font-size: 12px;
    color: var(--wa-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.25;
}
.wa-kpi__value {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--wa-green);
    font-variant-numeric: tabular-nums;
    margin-top: auto;
}

/* Toolbar (search / date / page size) */
.wa-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 16px 22px;
    border-bottom: 1px solid var(--wa-line);
}
.wa-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wa-muted);
}
.wa-field--grow {
    flex: 1 1 220px;
}
.wa-input,
.wa-select {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--wa-ink);
    border: 1px solid var(--wa-line);
    border-radius: 10px;
    padding: 9px 12px;
    background: #fff;
    color-scheme: light;
    width: 100%;
}
.wa-input:focus,
.wa-select:focus {
    outline: none;
    border-color: var(--wa-accent);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
}
.wa-toolbar__spacer {
    flex: 1 1 auto;
}

/* Buttons */
.wa-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    padding: 8px 16px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    line-height: 1.2;
}
.wa-btn--primary {
    background: var(--wa-green);
    color: #fff;
}
.wa-btn--primary:hover {
    background: #095446;
    color: #fff;
}
.wa-btn--ghost {
    background: #fff;
    border-color: var(--wa-line);
    color: var(--wa-ink);
}
.wa-btn--ghost:hover {
    border-color: var(--wa-accent);
    color: var(--wa-green);
}
.wa-btn--danger {
    background: #fff;
    border-color: #f4c2c8;
    color: #b0202e;
}
.wa-btn--danger:hover {
    background: #fdecee;
}
.wa-btn--sm {
    padding: 5px 12px;
    font-size: 12px;
}

/* Table */
.wa-table-wrap {
    overflow-x: auto;
}
.wa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.wa-table th,
.wa-table td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--wa-line);
    white-space: nowrap;
}
.wa-table thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wa-muted);
    font-weight: 700;
    background: #f7faf8;
    position: sticky;
    top: 0;
    user-select: none;
}
.wa-table th.wa-sortable {
    cursor: pointer;
}
.wa-table th.wa-sortable:hover {
    color: var(--wa-green);
}
.wa-table th .wa-sort-ind {
    color: var(--wa-accent);
    margin-left: 4px;
}
.wa-table td.wa-cell-msg {
    white-space: normal;
    max-width: 340px;
    color: var(--wa-muted);
}
.wa-table tbody tr:hover {
    background: #f4f8f6;
}
.wa-table tbody tr:last-child td {
    border-bottom: none;
}
.wa-table .wa-idx {
    color: var(--wa-muted);
    font-variant-numeric: tabular-nums;
}
.wa-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.wa-empty {
    color: var(--wa-muted);
    text-align: center;
    padding: 28px 18px;
}

/* Footer / pagination */
.wa-tfoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 22px;
}
.wa-tfoot__info {
    font-size: 13px;
    color: var(--wa-muted);
}
.wa-pager {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.wa-pager button {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--wa-line);
    background: #fff;
    color: var(--wa-ink);
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.wa-pager button:hover:not(:disabled):not(.wa-pager__ellipsis) {
    border-color: var(--wa-accent);
    color: var(--wa-green);
}
.wa-pager button.is-active {
    background: var(--wa-green);
    border-color: var(--wa-green);
    color: #fff;
    cursor: default;
}
.wa-pager button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.wa-pager__ellipsis {
    border: none !important;
    background: none !important;
    cursor: default !important;
    color: var(--wa-muted) !important;
}

/* Badges / pills */
.wa-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #eceff1;
    color: #556;
}
.wa-badge--green {
    background: #e3f8ec;
    color: #14804a;
}

/* Loading */
.wa-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(11, 107, 87, 0.2);
    border-top-color: var(--wa-green);
    border-radius: 50%;
    animation: wa-spin 0.8s linear infinite;
}
@keyframes wa-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .wa-spinner { animation-duration: 2s; }
}

/* ============ Conversation ============ */
/* The conversation is one full-height surface, not two stacked cards: the rail
   and the thread share a single row so the rail's height is the thread's height.
   Previously the rail was a short card with `align-items: start`, which left most
   of the left column empty. */
.wa-convo {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
    height: calc(100vh - 168px);
    min-height: 520px;
}

/* Context rail */
.wa-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
}

/* Profile */
.wa-profile__id {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px 16px;
}
.wa-avatar {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wa-green), var(--wa-accent));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
}
.wa-profile__name {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    word-break: break-word;
}
.wa-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wa-muted);
    margin-top: 3px;
}
.wa-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c2ccc8;
}
.wa-status__dot--on {
    background: var(--wa-accent);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.2);
}
.wa-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 22px;
    border-top: 1px solid var(--wa-line);
    font-size: 14px;
}
.wa-detail__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wa-muted);
}
.wa-detail__value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    word-break: break-all;
    text-align: right;
    font-family: var(--wa-mono);
    font-size: 12.5px;
    letter-spacing: -0.01em;
}
.wa-copy {
    border: none;
    background: none;
    color: var(--wa-muted);
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}
.wa-copy:hover,
.wa-copy:focus-visible {
    color: var(--wa-green);
}
.wa-copy:focus-visible {
    outline: 2px solid var(--wa-green);
    outline-offset: 1px;
    border-radius: 4px;
}

/* Workflow index — the navigational counterpart to the spine in the thread. The
   spine says which workflow you are reading; this says which workflows are
   loaded and jumps to them. Both are derived from the same caption boundaries,
   so it is one idea stated twice rather than two competing ones. It fills the
   rail with content the page already has instead of inventing tags or notes. */
.wa-side__index {
    border-top: 1px solid var(--wa-line);
    padding: 14px 22px 6px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.wa-side__index h3 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wa-muted);
    margin: 0 0 10px;
}
.wa-jump {
    display: block;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    padding: 8px 10px 8px 12px;
    margin: 0 -10px 2px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    color: inherit;
}
.wa-jump::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: var(--wa-line);
}
.wa-jump:hover {
    background: #f2f7f4;
}
.wa-jump:hover::before,
.wa-jump:focus-visible::before {
    background: var(--wa-accent);
}
.wa-jump:focus-visible {
    outline: 2px solid var(--wa-green);
    outline-offset: 1px;
}
.wa-jump__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}
.wa-jump__meta {
    display: block;
    font-family: var(--wa-mono);
    font-size: 11px;
    color: var(--wa-muted);
    margin-top: 2px;
}
.wa-side__empty {
    font-size: 12.5px;
    color: var(--wa-muted);
    line-height: 1.45;
}

/* Chat card */
.wa-chatpane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
}
/* The pane header carries live state, not a title. "Conversation" already appears
   in the page heading; what an operator needs here is whether they can still
   reply and whether the bot is paused — the two facts that change. */
.wa-chatpane__head {
    padding: 12px 22px;
    border-bottom: 1px solid var(--wa-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
}
.wa-state {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--wa-mono);
    font-size: 12px;
}
.wa-state__label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wa-muted);
}
.wa-state__value {
    font-weight: 600;
    color: var(--wa-ink);
}
.wa-state--closed .wa-state__value {
    color: var(--wa-muted);
}
.wa-state--open .wa-state__value {
    color: var(--wa-green);
}

.wa-thread {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 22px 20px;
    background: var(--wa-paper);
    display: flex;
    flex-direction: column;
}

/* "N new messages" — shown only while the operator is scrolled up and something
   arrived. Sticky rather than absolutely positioned so it rides the bottom edge
   of the scrollport without knowing the composer's height; the wrapper is
   zero-height so showing it never reflows the thread it sits over. */
.wa-thread__live {
    position: sticky;
    bottom: 0;
    height: 0;
    display: flex;
    justify-content: center;
}
.wa-newmsg {
    transform: translateY(-14px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border: 0;
    border-radius: 999px;
    background: var(--wa-green);
    color: #fff;
    font-family: var(--wa-mono);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(10, 40, 35, 0.22);
}
.wa-newmsg:hover {
    background: var(--wa-ink);
}
.wa-newmsg:focus-visible {
    outline: none;
    box-shadow: 0 6px 18px rgba(10, 40, 35, 0.22), 0 0 0 3px rgba(37, 211, 102, 0.35);
}

/* THE FLOW SPINE.

   The workflow driving the conversation used to be a centred pill that
   interrupted the transcript once and scrolled away. It is the most useful fact
   on this page for an operator deciding whether to step in, so it becomes
   continuous structure instead: a hairline rail down the thread with the
   workflow's name pinned to the top of the scroller for as long as its messages
   are on screen. `position: sticky` does all of it — no scroll listener.

   Segments are cut at workflow captions, not chat sessions: the backend emits a
   caption at every workflow BOUNDARY and one session can switch workflows more
   than once (see RecipientChatController::chatHistories). There is deliberately
   no 01/02/03 numbering — these runs are whatever happened, not a designed
   sequence — and no inferred "the bot fell back" marker, which would mean
   pattern-matching names the customer chose. */
.wa-seg {
    position: relative;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
}
.wa-seg::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 14px;
    bottom: 0;
    width: 2px;
    border-radius: 2px;
    background: var(--wa-line);
}
.wa-seg--bare::before {
    top: 4px;
}
.wa-seg__label {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-left: -24px;
    padding: 10px 0 8px 24px;
    background: var(--wa-paper);
    font-family: var(--wa-mono);
}
.wa-seg__label::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 13px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wa-green);
    box-shadow: 0 0 0 3px var(--wa-paper);
}
.wa-seg__name {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wa-green);
}
.wa-seg__meta {
    font-size: 11px;
    color: var(--wa-muted);
}
.wa-seg__msgs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 6px;
}

/* Bubbles */
.talk-bubble {
    max-width: 76%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.42;
    box-shadow: 0 1px 1px rgba(10, 40, 35, 0.08);
    word-wrap: break-word;
    position: relative;
}
.talk-bubble p {
    margin: 0 0 2px;
}
/* is_sender (business) -> left, neutral white */
.btm-left-in {
    align-self: flex-start;
    background: #fff;
    border-top-left-radius: 4px;
    color: var(--wa-ink);
}
/* recipient (user) -> right, green tint */
.btm-right-in {
    align-self: flex-end;
    background: #d7f4e3;
    border-top-right-radius: 4px;
    color: #0c2a20;
}
.talk-bubble .header-group {
    font-weight: 700;
}
.talk-bubble .footer-group {
    color: var(--wa-muted);
    font-size: 12px;
}
.talk-bubble .img-wrap a,
.talk-bubble .attach-wrap a {
    display: block;
    padding: 0;
    color: inherit;
}
.talk-bubble .img-wrap img {
    max-width: 100%;
    border-radius: 10px;
    display: block;
}
.talk-bubble .attach-wrap a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(10, 40, 35, 0.05);
    border-radius: 10px;
    font-weight: 600;
}
.talk-bubble .btn-group,
.talk-bubble .section-group,
.talk-bubble .cta-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    border-top: 1px solid rgba(10, 40, 35, 0.08);
    padding-top: 8px;
}
.talk-bubble .btn-group button,
.talk-bubble .section-group button,
.talk-bubble .cta-group button {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--wa-green);
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: center;
    cursor: default;
}
.talk-bubble .section-group button small {
    display: block;
    font-weight: 500;
    color: var(--wa-muted);
}
/* Delivery metadata is machine output: mono, and tucked under the text rather
   than competing with it. */
.read-receipt {
    font-family: var(--wa-mono);
    font-size: 10.5px;
    color: var(--wa-muted);
    text-align: right;
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    letter-spacing: -0.01em;
}
.read-receipt .icon {
    font-size: 10.5px;
}

/* Date divider */
.talk-date {
    align-self: center;
    margin: 8px 0;
}
.talk-date span {
    background: #fff;
    color: var(--wa-muted);
    border: 1px solid var(--wa-line);
    border-radius: 999px;
    padding: 3px 12px;
    font-family: var(--wa-mono);
    font-size: 11px;
    font-weight: 600;
}
.wa-thread__center {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--wa-muted);
    font-size: 14px;
}

/* Composer (reply box docked at the bottom of the chat pane) */
.wa-composer {
    flex: none;
    border-top: 1px solid var(--wa-line);
    padding: 12px 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Closed reply window. States what happened and what changes it, in that order,
   instead of a centred grey line describing only what is forbidden. */
.wa-composer--disabled {
    display: block;
    background: #f7faf8;
    padding: 14px 22px;
    color: var(--wa-muted);
    font-size: 13px;
    line-height: 1.5;
}
.wa-composer__row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wa-composer__text {
    flex: 1 1 auto;
}
.wa-composer__tools {
    display: flex;
    gap: 4px;
}
.wa-composer__tools button {
    border: 1px solid var(--wa-line);
    background: #fff;
    color: var(--wa-muted);
    width: 36px;
    height: 36px;
    border-radius: 9px;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.wa-composer__tools button:hover {
    border-color: var(--wa-accent);
    color: var(--wa-green);
}
.wa-composer__attach {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
}
.wa-composer__or {
    color: var(--wa-muted);
    font-size: 12px;
}
.wa-composer__remove {
    border: none;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: var(--wa-muted);
    cursor: pointer;
}
.wa-composer__remove:hover {
    color: #b0202e;
}
.wa-composer__err {
    color: #b0202e;
    font-size: 12px;
}

/* No entrance animation on the bubbles: CSS cannot tell a genuinely new message
   from the 25 that arrive with the first page, so it would animate the whole
   thread on load to signal nothing. The spine carries this page; the only motion
   left is the agent-mode pulse, which marks a state running down a clock. */

/* Responsive */
@media (max-width: 900px) {
    .wa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wa-convo {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }
    /* Stacked: the rail sizes to its content and the thread takes a fixed slice
       of the viewport, since neither can share a row's height any more. */
    .wa-side__index {
        flex: none;
        max-height: 220px;
    }
    .wa-chatpane { height: 70vh; }
}
@media (max-width: 560px) {
    .wa-chat { padding: 16px; }
    .talk-bubble { max-width: 88%; }
    .wa-seg { padding-left: 18px; }
    .wa-seg__label { margin-left: -18px; padding-left: 18px; }
}

/* Agent-mode banner: sits between the message list and the composer while a
   human has taken over and the bot's auto-replies are paused. */
.wa-agentmode {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--wa-amber-line);
    background: var(--wa-amber-wash);
    font-size: 13px;
    line-height: 1.4;
}
.wa-agentmode .wa-btn {
    flex: none;
}

.wa-agentmode__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e0a800;
    flex: 0 0 auto;
}

.wa-agentmode__text {
    flex: 1 1 auto;
}

.wa-agentmode__meta {
    font-family: var(--wa-mono);
    font-size: 12px;
    color: var(--wa-amber-ink);
}

.wa-agentmode__error {
    color: #dc3545;
}

/* Agent mode on the recipient list.

   Agent mode is a live state belonging to a person, not a channel metric — so it
   rides inside the name cell instead of a column that would be blank for nearly
   every row, and instead of a KPI tile alongside the channel's lifetime counts.
   Amber is carried over from .wa-agentmode above so the state looks the same
   wherever it appears. The pulse is the only animation on this page: it marks
   the states that are genuinely running down a clock, which is why the filter
   chip's legend dot below stays still. */
.wa-chat {
    --wa-amber: #e0a800;
    --wa-amber-wash: #fff8e6;
    --wa-amber-line: #f0d9a8;
    --wa-amber-ink: #8a5a00;
}

.wa-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 2px 9px 2px 7px;
    border: 1px solid var(--wa-amber-line);
    border-radius: 999px;
    background: var(--wa-amber-wash);
    color: var(--wa-amber-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    vertical-align: middle;
    cursor: default;
}

.wa-flag__dot,
.wa-agentmode__dot {
    animation: wa-agentpulse 2.4s ease-out infinite;
}
.wa-flag__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wa-amber);
    flex: 0 0 auto;
}

@keyframes wa-agentpulse {
    0% { box-shadow: 0 0 0 0 rgba(224, 168, 0, 0.55); }
    70% { box-shadow: 0 0 0 6px rgba(224, 168, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(224, 168, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .wa-flag__dot,
    .wa-agentmode__dot { animation: none; }
}

/* Filter rail.

   Search, date range and agent mode narrow the same result set, so they are
   built as one control with hairline dividers rather than three floating boxes:
   the segments are the AND between them. Joining them also retires the stacked
   labels — each segment states its own purpose — which is what was leaving the
   row ragged and the agent-mode toggle stranded in the label gutter. */
.wa-toolbar--rail {
    align-items: center;
}
.wa-rail {
    display: flex;
    align-items: stretch;
    flex: 1 1 560px;
    max-width: 760px;
    border: 1px solid var(--wa-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.12s ease;
}
.wa-rail:focus-within {
    border-color: var(--wa-green);
}
.wa-rail__seg {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 14px;
    border-left: 1px solid var(--wa-line);
    flex: 0 0 auto;
}
.wa-rail__seg:first-child {
    border-left: 0;
}
.wa-rail__seg--grow {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}
.wa-rail__icon {
    color: var(--wa-muted);
    font-size: 12px;
}
.wa-rail__input {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--wa-ink);
    border: 0;
    background: transparent;
    height: 100%;
    width: 100%;
    min-width: 0;
    padding: 0 14px;
}
/* A typed value the backend parses as `d/m/Y - d/m/Y`, so it stays in that
   format and is sized to show all 23 characters — the old field clipped it to
   "01/08/20:". Tabular figures keep the two dates the same width. */
.wa-rail__input--date {
    width: 196px;
    padding: 0;
    font-variant-numeric: tabular-nums;
}
.wa-rail__input:focus {
    outline: none;
}
.wa-rail__input:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(11, 107, 87, 0.35);
    border-radius: 8px;
}
.wa-rail__toggle {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--wa-ink);
    background: #fff;
    cursor: pointer;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    transition: background 0.12s ease, color 0.12s ease;
}
.wa-rail__toggle:hover {
    background: #f6faf8;
}
.wa-rail__toggle:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(11, 107, 87, 0.35);
}
/* Engaged: the segment takes the same amber as the rows it isolates, so the
   control and its result are visibly the same thing. */
.wa-rail__toggle[aria-pressed="true"] {
    background: var(--wa-amber-wash);
    color: var(--wa-amber-ink);
}
.wa-rail__count {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--wa-muted);
}
/* Amber only when someone is actually waiting on a human — a zero stays quiet
   instead of reading as a badge with nothing in it. */
.wa-rail__count.is-live {
    padding: 1px 7px;
    border-radius: 999px;
    background: #f3e3b8;
    color: #6d4700;
}

.wa-select--inline {
    width: auto;
    height: 40px;
    padding: 0 32px 0 12px;
    font-size: 13px;
    font-weight: 600;
}
.wa-toolbar--rail .wa-btn {
    height: 40px;
}

/* Narrow screens: keep the one-control reading, stack the segments. */
@media (max-width: 700px) {
    .wa-rail {
        flex-direction: column;
        flex-basis: 100%;
    }
    .wa-rail__seg {
        border-left: 0;
        border-top: 1px solid var(--wa-line);
        width: 100%;
    }
    .wa-rail__seg:first-child {
        border-top: 0;
    }
    .wa-rail__input--date {
        width: 100%;
    }
    .wa-rail__toggle {
        justify-content: space-between;
    }
}