/* ===================================================================
   Private WhatsApp Chat - stylesheet
   Plain CSS only. No frameworks, no build step.
   =================================================================== */

:root {
    /* WhatsApp's own interface colours, not its 2015 logo greens. #008069 is
       the header green, #00A884 the one every interactive thing uses, and the
       greys are what stop the whole window reading as one white sheet. */
    --wa-dark-green: #008069;
    --wa-dark-green-hover: #006D5B;
    /* Every `background: var(--wa-green)` in here carries white text, so this
       has to be the darker of the two: #00A884 leaves white at about 2.5:1.
       The lighter green survives as a tint, on the active rail item. */
    --wa-green: #008069;
    --wa-green-hover: #006D5B;
    --wa-out-bubble: #D9FDD3;
    --wa-chat-bg: #EFEAE2;
    --white: #FFFFFF;
    --text: #111B21;
    --text-muted: #566670;
    --border: #E9EDEF;
    /* The rail and the headers. A grey this close to white (1.12:1) read as
       white; this green is 1.27:1 from it and still carries dark text at
       13.7:1. The panel edges below are tinted to match. */
    --panel-bg: #D3E9DF;
    --panel-edge: #B2D5C4;
    --panel-hover: #C0DECF;
    --danger: #B42318;
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.08);
    --shadow-md: 0 10px 35px rgba(17, 24, 39, 0.10);
    --header-h: 62px;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    font-size: 15px;
    background: var(--wa-chat-bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

/* -------------------------------------------------------------------
   Top header (main page + chat page)
   ------------------------------------------------------------------- */

header {
    height: var(--header-h);
    background: var(--wa-dark-green);
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 5;
}

header b {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

header a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-size: 14px;
    padding: 7px 12px;
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.15s ease;
}

header a:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
}

/* Push the last header action to the right edge */
header > a:last-child,
header > .settings {
    margin-left: auto;
}

/* -------------------------------------------------------------------
   Settings menu (right side of the header)
   ------------------------------------------------------------------- */

.settings {
    position: relative;
}

.settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: background 0.15s ease;
}

.settings-btn:hover,
.settings-menu.open + .settings-btn {
    background: rgba(255, 255, 255, 0.16);
    color: var(--white);
}

.settings-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    padding: 6px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.18);
    display: none;
    z-index: 40;
}

.settings-menu.open {
    display: block;
}

.settings-menu a,
.settings-menu button[role="menuitem"] {
    display: block;
    width: 100%;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.settings-menu a:hover,
.settings-menu button[role="menuitem"]:hover {
    background: var(--panel-bg);
    color: var(--text);
}

.settings-menu a.danger {
    color: var(--danger);
}

.settings-sep {
    height: 1px;
    margin: 6px 4px;
    background: var(--border);
}

header .subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
}

header .title-block {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

header .title-block b,
header .title-block .subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -------------------------------------------------------------------
   Main page: sidebar + empty panel
   ------------------------------------------------------------------- */

.layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    height: calc(100vh - var(--header-h));
    background: var(--panel-bg);
}

aside {
    background: var(--white);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 18px 16px 24px;
}

aside h3 {
    margin: 4px 0 14px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--text-muted);
}

/* -------------------------------------------------------------------
   Chat list: compact header, new-chat popup, per-row delete
   ------------------------------------------------------------------- */

.aside-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 14px;
}

.aside-head h3 {
    margin: 0;
}

.add-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--wa-green);
    color: var(--white);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.add-btn:hover {
    background: var(--wa-green-hover);
}

.contact-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border);
}

.contact-row:last-of-type {
    border-bottom: 0;
}

.contact-row .contact {
    flex: 1;
    min-width: 0;
    border-bottom: 0;
}

.row-delete {
    display: flex;
    align-items: center;
}

/* Per-chat three-dot menu */
.row-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.row-menu .dots {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
}

.row-menu .dots:hover,
.row-menu.open .dots {
    background: var(--panel-bg);
    color: var(--text);
}

.row-menu-list {
    position: absolute;
    top: calc(100% - 4px);
    right: 4px;
    min-width: 150px;
    padding: 5px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(17, 24, 39, 0.16);
    display: none;
    z-index: 30;
}

.row-menu.open .row-menu-list {
    display: block;
}

.row-menu-list button {
    display: block;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.row-menu-list button:hover {
    background: var(--panel-bg);
}

.row-menu-list button.danger {
    color: var(--danger);
}

.row-menu-list button.danger:hover {
    background: #FEF3F2;
}

.row-delete button,
.header-delete button {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
}

.row-delete button:hover {
    background: #FEF3F2;
    color: var(--danger);
}

.header-delete {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.header-delete button {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    padding: 8px;
}

.header-delete button:hover {
    background: rgba(255, 255, 255, 0.16);
    color: var(--white);
}

/* When a delete button is present it takes the auto margin instead. */
header > .header-delete ~ .settings {
    margin-left: 0;
}

/* -------------------------------------------------------------------
   Modal (new chat)
   ------------------------------------------------------------------- */

.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 24, 39, 0.45);
    z-index: 60;
}

.modal[hidden] {
    display: none;
}

.modal-card {
    width: 400px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 22px;
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.modal-head h2 {
    margin: 0;
    font-size: 18px;
    color: var(--wa-dark-green);
}

.modal-close {
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}

.modal-close:hover {
    color: var(--text);
}

/* -------------------------------------------------------------------
   Contacts (address book)
   ------------------------------------------------------------------- */

.search-form {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.search-form input {
    flex: 1;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #D1D7DB;
    border-radius: 9px;
    font-family: inherit;
    font-size: 14px;
}

.search-form input:focus {
    border-color: var(--wa-green);
    box-shadow: 0 0 0 3px rgba(0, 128, 105, 0.18);
    outline: none;
}

.search-form button {
    padding: 11px 18px;
    border: 0;
    border-radius: 9px;
    background: var(--wa-green);
    color: var(--white);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}

.book-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.book-row:last-of-type {
    border-bottom: 0;
}

.book-row .meta {
    font-size: 13px;
    color: var(--text-muted);
}

.book-row button {
    padding: 8px 16px;
    border: 1px solid #D1D7DB;
    border-radius: 8px;
    background: var(--white);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.book-row button:hover {
    border-color: var(--wa-green);
}

.new-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    margin-bottom: 18px;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.new-contact input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #D1D7DB;
    border-radius: 9px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--white);
    outline: none;
}

.new-contact input:focus {
    border-color: var(--wa-green);
    box-shadow: 0 0 0 3px rgba(0, 128, 105, 0.18);
}

.new-contact button {
    padding: 11px 14px;
    border: 0;
    border-radius: 9px;
    background: var(--wa-green);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}

.new-contact button:hover {
    background: var(--wa-green-hover);
}

/* A chat row reads left to right, the way every messenger lays it out:
   picture, then who and what they said, then when. */
.contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
}

.contact:last-of-type {
    border-bottom: 0;
}

.contact:hover {
    background: var(--panel-bg);
}

.contact strong {
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact small {
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact .meta {
    flex: none;
    align-self: flex-start;
    padding-top: 2px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.contact strong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* The name and the preview stack in the middle column, between the avatar
   and the time. Without this they would sit beside each other. */
.contact .row-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

/* Unread count, so a message from a website visitor cannot be missed. */
.unread {
    flex: none;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--wa-green);
    color: var(--white);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}

.unread[hidden] {
    display: none;
}

.empty {
    display: grid;
    place-content: center;
    text-align: center;
    color: var(--text-muted);
    padding: 24px;
}

.empty h2 {
    margin: 0 0 8px;
    color: var(--wa-dark-green);
    font-size: 22px;
    font-weight: 600;
}

.empty p {
    margin: 0;
    font-size: 14px;
}

/* -------------------------------------------------------------------
   Chat page
   ------------------------------------------------------------------- */

.chat-wrap {
    max-width: 960px;
    height: calc(100vh - var(--header-h));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--wa-chat-bg);
    border-left: 1px solid rgba(17, 24, 39, 0.06);
    border-right: 1px solid rgba(17, 24, 39, 0.06);
}

/* Inside the split layout the conversation fills the right-hand pane. */
.chat-pane {
    min-width: 0;
    height: calc(100vh - var(--header-h));
    background: var(--wa-chat-bg);
}

.chat-pane .chat-wrap {
    /* NOT height:100% - the pane also holds the 66px header, so a full-height
       wrap overflows by exactly that much and pushes the composer off the
       bottom, leaving the history scrolling in a short window. Taking what is
       left over instead makes the conversation fill the pane. */
    flex: 1;
    min-height: 0;
    height: auto;
    /* And NOT margin:0 auto. This block used to be a centred 960px column;
       an auto side margin stops a flex item stretching, so the conversation
       shrank to its content and sat in the middle of the pane with its
       scrollbar there too. Both have to go for it to fill the width. */
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
}

/* Only the history scrolls. Without this the pane scrolls as well, which is a
   second scrollbar for the same content. */
.chat-pane { overflow: hidden; }

/* Highlight the conversation currently open in the list. */
.contact-row.active {
    background: #E8F1EE;
}

.contact-row.active .contact strong {
    color: var(--wa-dark-green);
}

/* The split view keeps the list visible, so the back link is only needed
   on narrow screens where the panes stack. */
.back-link {
    display: none;
}

.messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-behavior: smooth;
}

.messages .empty-chat {
    margin: auto;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.bubble {
    max-width: 68%;
    padding: 8px 11px 6px;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    font-size: 14.5px;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.bubble.in {
    align-self: flex-start;
    margin-right: auto;
    background: var(--white);
    border-top-left-radius: 3px;
}

.bubble.out {
    align-self: flex-end;
    margin-left: auto;
    background: var(--wa-out-bubble);
    border-top-right-radius: 3px;
}

.bubble small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}

.composer {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: var(--panel-bg);
    border-top: 1px solid var(--border);
}

.composer input {
    flex: 1;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid #D1D7DB;
    border-radius: 22px;
    background: var(--white);
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    outline: none;
}

.composer input::placeholder {
    color: var(--text-muted);
}

.composer input:focus {
    border-color: var(--wa-green);
    box-shadow: 0 0 0 3px rgba(0, 128, 105, 0.18);
}

.composer button {
    padding: 13px 26px;
    border: 0;
    border-radius: 22px;
    background: var(--wa-green);
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}

.composer button:hover {
    background: var(--wa-green-hover);
}

.composer button:active {
    transform: translateY(1px);
}

/* Delivery errors from the WhatsApp Cloud API, shown above the composer */
.alerts {
    padding: 12px 12px 0;
    background: var(--panel-bg);
    border-top: 1px solid var(--border);
}

.alerts .error {
    margin-top: 0;
}

.alerts .error + .error {
    margin-top: 8px;
}

/* Token health line on the API numbers page */
.token-status {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 11px;
    border-radius: 8px;
    display: none;
}

.token-status.checking,
.token-status.good,
.token-status.warn,
.token-status.bad {
    display: block;
}

.token-status.checking {
    background: var(--panel-bg);
    color: var(--text-muted);
}

.token-status.good {
    background: #E7F8EE;
    color: #067647;
}

.token-status.warn {
    background: #FFF4E5;
    color: #B54708;
}

.token-status.bad {
    background: #FEF3F2;
    color: var(--danger);
}

/* Compact template row, revealed by the Template button beside Send */
.template-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 0;
    background: var(--panel-bg);
}

.template-row[hidden] {
    display: none;
}

/* The row wraps now: picker, values, Send on one line, and the preview of
   what will actually be sent underneath it. */
.template-row { flex-wrap: wrap; }

.tpl-params { display: flex; gap: 6px; flex-wrap: wrap; }

#template-manual {
    width: 200px;
    padding: 6px 9px;
    border: 1px solid #D1D7DB;
    border-radius: 6px;
    font-size: 13px;
}

/* Both of these are swapped with [hidden], and neither sets display of
   its own - but saying so is cheaper than finding out the hard way. */
#template-manual[hidden], #template-name[hidden],
#tpl-add-slot[hidden] { display: none; }

/* There is no generic .ghost rule, only one scoped to the composer, so this
   row needs its own or the button renders as a raw browser default. */
.template-row button.ghost {
    padding: 6px 11px;
    background: #FFFFFF;
    color: var(--text-muted, #566670);
    border: 1px solid #D1D7DB;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.template-row button.ghost:hover {
    background: var(--panel-bg, #D3E9DF);
    color: var(--text, #111B21);
}

.tpl-params input {
    width: 130px;
    padding: 6px 9px;
    border: 1px solid #D1D7DB;
    border-radius: 6px;
    font-size: 13px;
}

/* Quoted, so it never reads as part of the console's own interface. */
.tpl-preview {
    flex-basis: 100%;
    margin: 2px 0 0;
    padding: 7px 10px;
    border-left: 3px solid var(--wa-green, #00A884);
    background: #FFFFFF;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    line-height: 1.45;
    color: #111B21;
    white-space: pre-wrap;
}

.tpl-error {
    flex-basis: 100%;
    margin: 2px 0 0;
    font-size: 12px;
    color: #B23A2F;
}

.tpl-preview[hidden], .tpl-error[hidden] { display: none; }

.tpl-note {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: help;
}

.template-row select {
    flex: 1;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid #D1D7DB;
    border-radius: 8px;
    background: var(--white);
    font-family: inherit;
    font-size: 13px;
}

.template-row button {
    padding: 9px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--wa-dark-green);
    color: var(--white);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

#tpl-toggle.active {
    border-color: var(--wa-green);
    color: var(--wa-dark-green);
}

/* 24-hour window warning + template sender */
.window-bar {
    padding: 12px;
    background: #FFF8E6;
    border-top: 1px solid #F5D98B;
}

.window-msg {
    font-size: 13px;
    line-height: 1.55;
    color: #7A5A00;
}

.template-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.template-form select {
    flex: 1;
    min-width: 180px;
    padding: 9px 11px;
    border: 1px solid #E0C578;
    border-radius: 8px;
    background: var(--white);
    font-family: inherit;
    font-size: 13px;
}

.template-form button {
    padding: 9px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--wa-dark-green);
    color: var(--white);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.template-form button:hover {
    background: var(--wa-dark-green-hover);
}

/* Merge two conversations that belong to the same person */
.merge-bar {
    padding: 10px 12px;
    background: var(--panel-bg);
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}

.merge-bar summary {
    cursor: pointer;
    color: var(--wa-dark-green);
    font-weight: 600;
}

.merge-bar form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.merge-bar select {
    flex: 1;
    min-width: 180px;
    padding: 8px 10px;
    border: 1px solid #D1D7DB;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    background: var(--white);
}

.merge-bar button {
    padding: 8px 16px;
    border: 1px solid #D1D7DB;
    border-radius: 8px;
    background: var(--white);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.merge-bar button:hover {
    background: var(--white);
    border-color: var(--wa-green);
}

/* Secondary "Receive" action - local testing only, hidden in meta mode */
.composer button.ghost {
    padding: 13px 18px;
    background: var(--white);
    color: var(--text-muted);
    border: 1px solid #D1D7DB;
    font-weight: 500;
}

.composer button.ghost:hover {
    background: var(--panel-bg);
    color: var(--text);
}

/* -------------------------------------------------------------------
   Login page
   ------------------------------------------------------------------- */

.login-page {
    min-height: 100vh;
    display: grid;
    place-content: center;
    padding: 24px;
    background: linear-gradient(160deg, #EEF3F8 0%, #E4EBF3 100%);
}

.login-card {
    width: 380px;
    max-width: 100%;
    padding: 34px 32px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}

.login-card h1 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: var(--wa-dark-green);
}

.login-card p {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
}

.login-card label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.login-card input {
    width: 100%;
    padding: 13px 14px;
    margin-bottom: 16px;
    border: 1px solid #D1D7DB;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    outline: none;
}

.login-card input:focus {
    border-color: var(--wa-green);
    box-shadow: 0 0 0 3px rgba(0, 128, 105, 0.18);
}

.login-card button {
    width: 100%;
    padding: 13px;
    border: 0;
    border-radius: 10px;
    background: var(--wa-dark-green);
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}

.login-card button:hover {
    background: var(--wa-dark-green-hover);
}

.error {
    margin-top: 16px;
    padding: 11px 13px;
    background: #FEF3F2;
    border: 1px solid #FDA29B;
    border-radius: 9px;
    color: var(--danger);
    font-size: 13.5px;
}

/* -------------------------------------------------------------------
   Multi-number support: "Send from" selector and per-message labels
   ------------------------------------------------------------------- */

.composer-wrap {
    display: flex;
    flex-direction: column;
}

.send-from {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 0;
    background: var(--panel-bg);
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}

.send-from label {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.send-from select {
    flex: 1;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid #D1D7DB;
    border-radius: 9px;
    background: var(--white);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    outline: none;
}

.send-from select:focus {
    border-color: var(--wa-green);
    box-shadow: 0 0 0 3px rgba(0, 128, 105, 0.18);
}

.send-from .hint {
    font-size: 13px;
}

.composer-wrap .composer {
    border-top: 0;
}

.bubble .via {
    font-weight: 600;
    color: var(--wa-dark-green);
}

/* -------------------------------------------------------------------
   Delivery ticks
   one grey  = sent to WhatsApp
   two grey  = delivered to their phone
   two blue  = read
   ------------------------------------------------------------------- */

.ticks {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    vertical-align: -1px;
    color: var(--text-muted);
}

.ticks svg {
    display: block;
}

.ticks.read {
    color: #53BDEB;          /* WhatsApp blue ticks */
}

.ticks.failed {
    color: var(--danger);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
}

.ticks.pending {
    opacity: 0.7;
}

/* -------------------------------------------------------------------
   WhatsApp Numbers management page
   ------------------------------------------------------------------- */

.page {
    max-width: 860px;
    margin: 0 auto;
    padding: 22px 18px 40px;
}

.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.card h2 {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 600;
    color: var(--wa-dark-green);
}

.notice {
    padding: 12px 14px;
    margin-bottom: 20px;
    background: #FFF8E6;
    border: 1px solid #F5D98B;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #7A5A00;
}

.notice code {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 5px;
    border-radius: 4px;
}

.number-form .field {
    margin-bottom: 12px;
}

.number-form label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.number-form input,
.number-form select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #D1D7DB;
    border-radius: 9px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--white);
    outline: none;
}

.number-form input:focus,
.number-form select:focus {
    border-color: var(--wa-green);
    box-shadow: 0 0 0 3px rgba(0, 128, 105, 0.18);
}

.number-form button {
    margin-top: 6px;
    padding: 11px 20px;
    border: 0;
    border-radius: 9px;
    background: var(--wa-green);
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.number-form button:hover {
    background: var(--wa-green-hover);
}

.number-row {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.number-row:last-of-type {
    border-bottom: 0;
}

.number-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.number-head strong {
    font-size: 15px;
}

.number-head button.ghost {
    padding: 7px 14px;
    border: 1px solid #D1D7DB;
    border-radius: 8px;
    background: var(--white);
    color: var(--text-muted);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.number-head button.ghost:hover {
    background: var(--panel-bg);
    color: var(--text);
}

.pill {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
}

.pill.on {
    background: #E7F8EE;
    color: #067647;
}

.pill.off {
    background: #F2F4F7;
    color: var(--text-muted);
}

.number-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 13px;
    color: var(--text-muted);
}

.number-row details {
    margin-top: 12px;
}

.number-row summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--wa-dark-green);
}

.number-row details .number-form {
    margin-top: 14px;
    padding: 16px;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.hint {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.snippet {
    margin: 10px 0 0;
    padding: 12px 14px;
    background: #0F1B18;
    color: #D6F5E3;
    border-radius: 10px;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre;
}

/* -------------------------------------------------------------------
   Linked-device sessions: status pills, QR linking page
   ------------------------------------------------------------------- */

.pill.warn {
    background: #FFF4E5;
    color: #B54708;
}

.warn-text {
    color: #B54708;
}

.row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-link {
    padding: 7px 14px;
    border: 1px solid #D1D7DB;
    border-radius: 8px;
    background: var(--white);
    color: var(--wa-dark-green);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.btn-link:hover {
    background: var(--panel-bg);
}

.qr-card {
    text-align: center;
}

.qr-card h2 {
    text-align: left;
}

.qr-status {
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--text-muted);
}

.qr-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    margin: 0 auto 18px;
    padding: 16px;
    max-width: 340px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.qr-holder img {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
}

.qr-placeholder {
    font-size: 14px;
    color: var(--text-muted);
}

.pairing-block {
    margin: 0 auto 18px;
    padding: 16px;
    max-width: 340px;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.pairing-code {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 6px;
    color: var(--wa-dark-green);
    word-break: break-all;
}

.connected-block {
    padding: 20px;
    margin-bottom: 18px;
    background: #E7F8EE;
    border: 1px solid #A6E9C5;
    border-radius: 12px;
}

.connected-msg {
    margin: 0 0 12px;
    font-size: 15px;
    color: #067647;
}

.steps {
    max-width: 420px;
    margin: 0 auto 14px;
    text-align: left;
    padding-left: 20px;
}

.steps li {
    margin-bottom: 5px;
}

/* -------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------- */

@media (max-width: 860px) {
    .layout {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100vh - var(--header-h));
    }

    aside {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    /* Too narrow for two panes: show the conversation alone, with the list
       one tap away via the back link. */
    .chat-pane ~ aside,
    .layout > aside:has(~ .chat-pane) {
        display: none;
    }

    .back-link {
        display: inline-block;
    }

    .chat-pane {
        height: calc(100vh - var(--header-h));
    }

    .empty {
        padding: 40px 24px;
    }

    .bubble {
        max-width: 82%;
    }
}

@media (max-width: 560px) {
    header {
        padding: 0 12px;
        gap: 10px;
    }

    header b {
        font-size: 16px;
    }

    header a {
        padding: 6px 9px;
        font-size: 13px;
    }

    aside {
        padding: 14px 12px 20px;
    }

    .messages {
        padding: 16px 12px;
    }

    .composer {
        padding: 10px;
        gap: 8px;
    }

    .composer button {
        padding: 13px 18px;
    }

    .bubble {
        max-width: 88%;
    }

    .login-card {
        padding: 26px 22px;
    }

    .send-from {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .page {
        padding: 16px 12px 32px;
    }

    .card {
        padding: 16px;
    }

    .number-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------------------------------------------------------------------------
   Google sign-in
   Signing in and signing up share one button: Google already knows whether
   the account exists, so offering two identical forms would only invite
   picking the wrong one.
   --------------------------------------------------------------------------- */

.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, box-shadow .15s;
}

.google-btn:hover {
    background: #F6F8FA;
    box-shadow: var(--shadow-sm);
}

.google-btn svg { flex: none; }

.login-note {
    margin: 12px 0 0 !important;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

.login-or {
    position: relative;
    margin: 20px 0 18px;
    text-align: center;
}

.login-or::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
}

.login-or span {
    position: relative;
    padding: 0 10px;
    background: var(--white);
    font-size: 12px;
    color: var(--text-muted);
}

.ghost-link {
    display: inline-block;
    margin-top: 18px;
    font-size: 13px;
    color: var(--wa-dark-green);
    text-decoration: none;
    font-weight: 600;
}

.ghost-link:hover { text-decoration: underline; }

/* Who is signed in, at the top of the settings menu. */
.settings-who {
    padding: 8px 12px 6px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
    word-break: break-all;
}

.settings-who strong { color: var(--text); }


/* Multi-line credential boxes (the Vonage private key) and the small note
   under a field that explains why it is needed. */
.number-form textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
    resize: vertical;
}

.number-form textarea:focus {
    outline: none;
    border-color: var(--wa-green);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.15);
}

.field-note {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}


/* ===========================================================================
   Authentication screens
   One centred white card on a light page, used by welcome, sign in, sign up,
   verification and the success screens so the whole flow feels like one thing.
   =========================================================================== */

/* Two colours across the whole sign-in flow: this green, and paper. Every
   other value here is a tint of one of them, so nothing arrives from a third
   palette. */
.auth-page {
    --auth-green: #008069;
    --auth-green-dark: #095448;
    --auth-green-tint: #E7F1EE;
    --auth-line: #DCE8E5;
    --auth-ink: #12362F;
    --auth-ink-soft: #6B7C79;

    min-height: 100vh;
    display: grid;
    place-content: center;
    padding: 28px 18px;
    background: linear-gradient(165deg, #F4F8F7 0%, #E9F1EF 100%);
}

.auth-card {
    width: 400px;
    max-width: 100%;
    padding: 34px 32px 30px;
    background: var(--white);
    border: 1px solid #E4EBE9;
    border-radius: 18px;
    box-shadow: 0 10px 34px rgba(11, 71, 60, 0.10);
    text-align: center;
}

.auth-card-wide { width: 430px; }

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 6px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--wa-dark-green, #008069);
    color: #FFFFFF;
}

.brand-name {
    font-size: 21px;
    font-weight: 700;
    color: #12362F;
    letter-spacing: -0.2px;
}

.brand-sub { margin-top: 2px !important; }

.auth-title {
    margin: 18px 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #12362F;
}

.auth-sub {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-muted, #6B7C79);
}

.auth-sub.small { font-size: 13px; margin-bottom: 4px; }

.auth-art { margin: 6px 0 10px; }
.welcome-art { margin: 16px 0 20px; }

/* --- buttons ------------------------------------------------------------ */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, box-shadow .15s, border-color .15s, transform .05s;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--wa-dark-green, #008069);
    color: #FFFFFF;
}

.btn-primary:hover { background: #095448; box-shadow: 0 4px 14px rgba(11, 107, 90, .28); }

.btn-ghost {
    background: var(--white);
    border-color: #CFDEDA;
    color: var(--wa-dark-green, #008069);
}

.btn-ghost:hover { background: #F3F8F7; border-color: #B4CCC6; }

.btn-google {
    /* The card is brand green and white, and this button is no exception: a
       blue block was the one thing on the screen belonging to another palette.
       Google's mark keeps its letterform, in the white version meant for
       coloured backgrounds, so it is still recognisable at a glance. */
    justify-content: center;
    gap: 11px;
    padding: 13px 18px;
    background: var(--auth-green, #008069);
    border-color: var(--auth-green, #008069);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
}

.btn-google:hover {
    background: var(--auth-green-dark, #095448);
    border-color: var(--auth-green-dark, #095448);
    box-shadow: 0 4px 14px rgba(11, 107, 90, .26);
}

.btn-google:active {
    background: #073F36;
    border-color: #073F36;
}

.g-tile {
    display: grid;
    place-items: center;
    color: #FFFFFF;
}

.g-label { padding: 0; }

.btn-link {
    background: none;
    border: none;
    color: var(--wa-dark-green, #008069);
    font-weight: 600;
    padding: 4px;
    margin-bottom: 8px;
}

.btn-link:hover { text-decoration: underline; }

.btn:disabled, .btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

.auth-actions { display: flex; gap: 12px; margin-top: 4px; }
.auth-actions .btn { margin-bottom: 0; }

/* --- the OR divider ----------------------------------------------------- */

.auth-or {
    position: relative;
    margin: 14px 0 12px;
}

.auth-or::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #E4EBE9;
}

.auth-or span {
    position: relative;
    padding: 0 12px;
    background: var(--white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    color: #9AAAA6;
}

/* --- forms -------------------------------------------------------------- */

.auth-form { text-align: left; margin-top: 4px; }

.auth-form .field { margin-bottom: 13px; }

.auth-form label {
    display: block;
    margin-bottom: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: #3D4F4B;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input:not([type]) {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #D6E0DD;
    border-radius: 9px;
    font-size: 14.5px;
    font-family: inherit;
    color: var(--text, #1F2C29);
    background: var(--white);
    transition: border-color .15s, box-shadow .15s;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--wa-green, #00A884);
    box-shadow: 0 0 0 3px rgba(18, 163, 127, .15);
}

.auth-form input[aria-invalid="true"] {
    border-color: #D94A3D;
    background: #FEF7F6;
}

.with-reveal { position: relative; }

.with-reveal input { padding-right: 42px; }

.reveal {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 7px;
    background: none;
    color: #7B8B87;
    cursor: pointer;
}

.reveal:hover { background: #F1F5F4; color: #3D4F4B; }

.field-error {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    color: #C0392B;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 4px 0 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted, #6B7C79);
    cursor: pointer;
}

.check input { margin-top: 2px; accent-color: var(--wa-dark-green, #008069); }
.check a { color: var(--wa-dark-green, #008069); }

.auth-error {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #F0C6C0;
    border-radius: 9px;
    background: #FDF3F2;
    font-size: 13px;
    line-height: 1.5;
    color: #A93226;
    text-align: left;
}

.auth-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #CDE7DD;
    border-radius: 9px;
    background: #F1FAF6;
    font-size: 13px;
    line-height: 1.5;
    color: #1B5E4C;
    text-align: left;
}

.auth-foot {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--text-muted, #6B7C79);
}

.auth-foot a { color: var(--wa-dark-green, #008069); font-weight: 600; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* ===========================================================================
   Dashboard navigation rail
   =========================================================================== */

body.has-rail { display: flex; min-height: 100vh; }

.navrail {
    flex: none;
    width: 210px;
    display: flex;
    flex-direction: column;
    background: var(--wa-dark-green, #008069);
    color: #FFFFFF;
    /* Stays put while the page behind it scrolls, and scrolls internally on a
       short screen so Logout is always reachable. */
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
}

.navrail-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 17px 16px;
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
}

.navrail-brand .brand-mark {
    width: 28px;
    height: 28px;
    background: #FFFFFF;
    color: var(--wa-dark-green, #008069);
}

.navrail-links { flex: 1; padding: 6px 10px; }

.navrail-links a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    margin-bottom: 3px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.navrail-links a:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; }

.navrail-links a.on {
    background: rgba(255, 255, 255, .16);
    color: #FFFFFF;
    font-weight: 600;
}

.navrail-me {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.navrail-me img,
.navrail-me .avatar-letter {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.navrail-me .avatar-letter {
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .22);
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
}

.navrail-who { min-width: 0; line-height: 1.3; }

.navrail-who strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navrail-who .online {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .72);
}

.navrail-who .online::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ADE80;
}

.rail-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* The body no longer scrolls - it is a fixed-height messenger frame - so
       the settings pages have to scroll inside themselves. */
    height: 100vh;
    overflow-y: auto;
}

/* --- chat search in the list -------------------------------------------- */

.chat-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 10px 8px;
    padding: 8px 11px;
    border: 1px solid var(--border, #E4EBE9);
    border-radius: 9px;
    background: var(--white);
    color: #8A9A96;
}

.chat-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--text, #1F2C29);
}

.aside-head .add-btn {
    width: auto;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
}

/* These turned the old wide rail into a top bar on a narrow screen. The rail
   is 56px of icons now and stays a column at every width, so they are scoped
   to the layout that wanted them rather than left to fire on this one. */
@media (max-width: 820px) {
    body.has-rail { flex-direction: column; }
    body.has-rail .navrail {
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        overflow-y: visible;
        z-index: 5;
    }
    body.has-rail .navrail-brand { padding: 12px 14px; }
    body.has-rail .navrail-links { display: flex; flex: 1; padding: 0 6px; overflow-x: auto; }
    body.has-rail .navrail-links a { margin-bottom: 0; white-space: nowrap; }
    body.has-rail .navrail-links a span { display: none; }
    body.has-rail .navrail-me { border-top: none; border-left: 1px solid rgba(255,255,255,.14); }
    body.has-rail .navrail-who { display: none; }
}


/* The quiet way out of the Google-first sign-in: present, but not competing
   with the button above it. */
.auth-alt {
    margin: 10px 0 0;
    font-size: 12.5px;
}

.auth-alt a {
    color: var(--text-muted, #6B7C79);
    text-decoration: none;
    border-bottom: 1px solid #DCE5E3;
}

.auth-alt a:hover {
    color: var(--wa-dark-green, #008069);
    border-bottom-color: currentColor;
}


/* ===========================================================================
   WhatsApp-style conversation
   =========================================================================== */

/* The faint doodle field behind the messages. Drawn here rather than fetched,
   so the page stays self-contained and nothing extra has to load. */
.chat-pane, .messages {
    /* Nothing here may widen the column: a stray pixel makes the whole
       conversation scroll sideways. */
    overflow-x: hidden;
    background-color: #EFE7DE;
    background-image:
        radial-gradient(circle at 12px 10px, rgba(0,0,0,.028) 2px, transparent 2.5px),
        radial-gradient(circle at 46px 34px, rgba(0,0,0,.022) 1.6px, transparent 2.2px),
        radial-gradient(circle at 74px 12px, rgba(0,0,0,.026) 1.2px, transparent 1.8px),
        radial-gradient(circle at 30px 62px, rgba(0,0,0,.020) 2.2px, transparent 2.8px),
        radial-gradient(circle at 88px 70px, rgba(0,0,0,.024) 1.4px, transparent 2px);
    background-size: 110px 90px;
}

/* --- day separator ------------------------------------------------------ */

.day-sep {
    display: flex;
    justify-content: center;
    margin: 14px 0 10px;
}

.day-sep span {
    padding: 5px 12px;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 1px rgba(11, 20, 26, .13);
    font-size: 12px;
    font-weight: 500;
    color: #54656F;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* --- bubbles ------------------------------------------------------------ */

.bubble {
    position: relative;
    max-width: 65%;
    margin-bottom: 8px;
    padding: 6px 9px 8px;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(11, 20, 26, .13);
    font-size: 14.5px;
    line-height: 1.45;
}

.bubble.in  { background: #FFFFFF; border-top-left-radius: 0; }
.bubble.out { background: #D9FDD3; border-top-right-radius: 0; }

.bubble .text {
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #111B21;
}

/* The stamp sits on its own line, pushed right. It holds "13:59" and
   "via Twilio Sandbox - 13:59" equally well, which a fixed corner could not. */
.bubble small {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1;
    color: #566670;
}

.bubble .via {
    color: #566670;
    font-weight: 500;
}

.bubble .ticks { display: inline-flex; color: #566670; }
.bubble .ticks[data-status="read"] { color: #53BDEB; }

/* --- the chat list ------------------------------------------------------ */

.avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 600;
    color: #FFFFFF;
    text-transform: uppercase;
    user-select: none;
}

.av0 { background: #008069; }
.av1 { background: #6B4FA1; }
.av2 { background: #C1584E; }
.av3 { background: #2E6DA4; }
.av4 { background: #B07C2A; }
.av5 { background: #157A6E; }
.av6 { background: #8E4585; }
.av7 { background: #4A6A2F; }

header .avatar { width: 36px; height: 36px; font-size: 15px; margin-right: 2px; }

/* The row layout itself lives with the original .contact rule; only the
   typography of the middle column is set here. */
.row-main strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: #111B21;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* --- the All / Unread chips --------------------------------------------- */

.chat-filters {
    display: flex;
    gap: 8px;
    margin: 0 10px 8px;
}

.chip {
    padding: 5px 13px;
    border: none;
    border-radius: 999px;
    background: #D3E9DF;
    color: #54656F;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.chip:hover { background: #E4E7EA; }

.chip.on {
    background: #D9FDD3;
    color: #008069;
    font-weight: 600;
}

/* --- the composer ------------------------------------------------------- */

.composer-wrap { background: #D3E9DF; }

.composer input[name="body"] {
    border-radius: 999px;
    padding: 11px 16px;
    border: 1px solid transparent;
    background: #FFFFFF;
}

.composer input[name="body"]:focus {
    border-color: transparent;
    box-shadow: none;
    outline: none;
}


/* ===========================================================================
   Messenger layout: icon rail | conversation list | conversation
   The whole thing is exactly one viewport tall. Only the list and the message
   area scroll, so the header and composer never leave the screen.
   =========================================================================== */

/* The messenger owns the whole window: two panes, nothing above or below. */
body.app-body, body.has-rail {
    display: flex;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

.app {
    flex: 1;
    min-width: 0;
    display: flex;
    height: 100vh;
}

/* --- the icon rail ------------------------------------------------------ */

.navrail {
    width: 56px;
    align-items: center;
    padding: 0;
    background: var(--panel-bg, #D3E9DF);
    border-right: 1px solid var(--panel-edge, #B2D5C4);
    color: #54656F;
}

.navrail-brand {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 10px 0 4px;
    border-radius: 10px;
    background: var(--wa-dark-green, #008069);
    color: #FFFFFF;
}

.navrail-brand span:not(.brand-mark) { display: none; }

.navrail-links {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
}

.navrail-links a,
.navrail-foot a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    color: #54656F;
}

.navrail-links a span,
.navrail-foot a span { display: none; }

.navrail-links a:hover,
.navrail-foot a:hover { background: var(--panel-hover, #C0DECF); color: #111B21; }

.navrail-links a.on {
    background: #FFFFFF;
    color: var(--wa-dark-green, #008069);
    box-shadow: 0 1px 2px rgba(11, 20, 26, .10);
}

.navrail-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 0 12px;
    border-top: 1px solid var(--panel-edge, #B2D5C4);
}

.navrail-me img,
.navrail-me .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 13px;
}

/* --- the conversation list ---------------------------------------------- */

aside {
    flex: none;
    width: 31%;
    min-width: 300px;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    border-right: 1px solid #E9EDEF;
    background: #FFFFFF;
    overflow: hidden;
}

.aside-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 12px 0 16px;
    background: var(--panel-bg, #D3E9DF);
    border-bottom: 1px solid var(--panel-edge, #B2D5C4);
}

.aside-head h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #111B21;
}

.head-icons {
    display: flex;
    align-items: center;
    gap: 2px;
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: none;
    color: #54656F;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.icon-btn:hover { background: var(--panel-hover, #C0DECF); color: #111B21; }
.icon-btn.on { background: #D9FDD3; color: var(--wa-dark-green, #008069); }

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.side-tools {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px 5px;
}

.side-tools .chat-search {
    flex: 1;
    margin: 0;
    padding: 7px 12px;
    border: none;
    border-radius: 8px;
    background: #D3E9DF;
}

.chat-filters {
    flex: none;
    margin: 2px 10px 6px;
}

.chat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Compact rows: about a dozen fit on a laptop screen. */
.contact-row { border-bottom: 0; }

.contact-row .contact {
    padding: 8px 12px;
    border-radius: 0;
    border-bottom: 1px solid #D3E9DF;
    gap: 11px;
}

.contact-row:hover .contact { background: #F5F6F6; }
.contact-row.active .contact { background: #D3E9DF; }

.avatar { width: 46px; height: 46px; font-size: 17px; }

.contact .row-main strong { font-size: 15px; font-weight: 500; }
.contact .preview { font-size: 13px; }

/* --- the conversation --------------------------------------------------- */

.chat-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.chat-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 11px;
    height: 66px;
    padding: 0 12px 0 16px;
    background: var(--panel-bg, #D3E9DF);
    border-bottom: 1px solid var(--panel-edge, #B2D5C4);
}

.chat-head .avatar { width: 40px; height: 40px; font-size: 16px; }

.chat-head .who { flex: 1; min-width: 0; line-height: 1.3; }

.chat-head .who b {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #111B21;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-head .status { font-size: 12.5px; color: #566670; }

.chat-head .back-link {
    display: none;
    color: #54656F;
    text-decoration: none;
    font-size: 18px;
}

.chat-head .header-delete { display: flex; }

/* This button was white-on-dark when the conversation header was dark green.
   The header is pale now, so a white icon is an invisible one - it matches the
   other header icons instead. */
.chat-head .header-delete button {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    color: #54656F;
}

.chat-head .header-delete button:hover { background: #E9EDEF; color: #111B21; }

.chat-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.messages {
    flex: 1;
    min-height: 0;
    padding: 12px 5% 10px;
    gap: 3px;
}

/* --- bubbles: compact, so many fit on screen ---------------------------- */

.bubble {
    max-width: 72%;
    margin-bottom: 5px;
    padding: 6px 10px 5px;
    border-radius: 8px;
    font-size: 14.2px;
    line-height: 1.42;
    /* NOT pre-wrap here. The bubble's markup is indented across several lines,
       and preserving whitespace at this level renders that indentation as
       blank lines - which is what was making every bubble tall and hollow.
       The message text keeps its own newlines; .bubble .text does that. */
    white-space: normal;
}

.bubble small { margin-top: 1px; font-size: 11px; }

/* --- the composer ------------------------------------------------------- */

.composer-wrap {
    flex: none;
    padding: 0;
    background: #D3E9DF;
    border-top: 1px solid #E9EDEF;
}

.composer {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 62px;
    padding: 8px 14px;
}

.composer input[name="body"] {
    flex: 1;
    min-width: 0;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 14.5px;
}

.send-btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* A filled control with a white glyph, so it needs the darker green: the
       lighter one leaves the arrow at about 2.5:1 against its own button. */
    background: var(--wa-dark-green, #008069);
    color: #FFFFFF;
    cursor: pointer;
}

.send-btn:hover { background: #0E8C6C; }

/* `.composer button` is more specific than `.icon-btn`, so the generic green
   pill was landing on emoji and attach and turning them into two big green
   blobs. These two say plainly what each button is: emoji and attach are quiet
   icons on the bar, send is the one green circle. */
.composer .icon-btn {
    width: 40px;
    height: 40px;
    flex: none;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: #54656F;
    font-weight: 400;
}

.composer .icon-btn:hover { background: var(--panel-hover, #C0DECF); color: #111B21; }

.composer .send-btn {
    width: 42px;
    height: 42px;
    flex: none;
    padding: 0;
    border-radius: 50%;
    background: var(--wa-dark-green, #008069);
    color: #FFFFFF;
}

.composer .send-btn:hover { background: var(--wa-dark-green-hover, #006D5B); }

.send-from { padding: 6px 14px 0; }

/* --- nothing selected --------------------------------------------------- */

.no-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #566670;
    background-color: #D3E9DF;
    background-image: none;
}

.no-chat h2 { margin: 4px 0 0; font-size: 22px; font-weight: 400; color: #41525D; }
.no-chat p { margin: 0; font-size: 13.5px; }

/* ===========================================================================
   The icon rail, the list header, and the filter chips
   ---------------------------------------------------------------------------
   Three columns, the way the reference has them: a 56px rail of icons, the
   conversation list, then the conversation. The rail is a shortcut - every
   place it leads is also in the list header's menu, so nothing depends on it.
   =========================================================================== */

.navrail {
    /* Fixed, never sticky: the window itself no longer scrolls. */
    position: static;
    align-self: stretch;
    justify-content: flex-start;
    gap: 0;
}

.navrail-links { gap: 6px; }

/* A divider under the navigation, matching the reference's grouped rail. */
.navrail-links::after {
    content: "";
    width: 26px;
    margin: 8px 0 0;
    border-top: 1px solid var(--panel-edge, #B2D5C4);
}

/* The unread count rides on the Chats icon. */
.navrail-links a { position: relative; }

.rail-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #D3E9DF;
    border-radius: 9px;
    /* Small white text, so it needs the darker green to stay legible. */
    background: var(--wa-dark-green, #008069);
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

.rail-badge[hidden] { display: none; }

/* --- the list header ---------------------------------------------------- */

.aside-head { background: var(--panel-bg, #D3E9DF); border-bottom: 1px solid var(--panel-edge, #B2D5C4); }

.aside-head .brand-name {
    font-size: 22px;
    font-weight: 700;
    /* The old list heading was a small uppercase label; this is a wordmark. */
    text-transform: none;
    letter-spacing: -.3px;
    /* The darker green, not the interactive one: #00A884 on this grey is about
       2.4:1, under the 3:1 floor for large text. Same brand, and readable. */
    color: var(--wa-dark-green, #008069);
}

/* The new-chat control is an icon here, not the wide labelled pill an earlier
   header used - the label lives in its title and its screen-reader text. */
.aside-head .icon-btn,
.aside-head .add-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    color: #111B21;
}

/* --- the filter chips --------------------------------------------------- */

.chat-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 2px 14px 8px;
}

.chip {
    padding: 5px 15px;
    border: 1px solid #E9EDEF;
    border-radius: 999px;
    background: #FFFFFF;
    color: #41525D;
    font-size: 13.5px;
    line-height: 1.35;
    cursor: pointer;
}

.chip:hover { background: #F3F5F6; }

.chip.on {
    border-color: #C7F0DE;
    background: #DDFBEC;
    color: #0B7A5A;
    font-weight: 500;
}

/* --- the sign-in log ---------------------------------------------------- */

.log-table {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #E9EDEF;
}

.log-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid #D3E9DF;
    font-size: 13px;
}

.log-row .log-who { min-width: 0; }
.log-row .log-who strong { display: block; overflow-wrap: anywhere; }
.log-row .meta { color: #566670; white-space: nowrap; }
.log-refused { background: #FFF6F4; }

/* Six columns is more than reads at a glance without labels. */
.log-head {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8696A0;
    border-bottom: 1px solid #E9EDEF;
}

.log-dur { color: #8696A0; }

/* An absent sign-out is an absence of knowledge, not an event. Muted and
   italic so it never reads as a recorded time. */
.log-noout {
    color: #8696A0;
    font-style: italic;
    cursor: help;
}

/* On a narrow screen the columns stack rather than squeeze the address. */
@media (max-width: 700px) {
    .log-row { grid-template-columns: 1fr auto; row-gap: 4px; }
    .log-row .meta { white-space: normal; }
    /* Stacked rows put every value on its own line, where a header row
       of six labels no longer lines up with anything. */
    .log-head { display: none; }
}

/* --- narrow screens: one pane at a time --------------------------------- */

@media (max-width: 900px) {
    aside { width: 100%; max-width: none; }
    .chat-pane { display: none; }
    body.chat-open aside { display: none; }
    body.chat-open .chat-pane { display: flex; }
    .chat-head .back-link { display: block; }
    /* The rail stays: 56px is affordable even on a phone, and it is the only
       way back to Contacts once the list is hidden behind a conversation. */
    .navrail { width: 52px; }
}


/* ===========================================================================
   The welcome card
   ---------------------------------------------------------------------------
   Two columns on a wide screen: what this is on the left, a picture of it on
   the right. One column on a narrow one, picture last. Still the same two
   colours as the rest of the flow - the brand green and paper.
   =========================================================================== */

.auth-page {
    /* The waves sit behind the card and belong to every auth screen, so the
       whole flow shares one background rather than the welcome page alone. */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20900%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%230B6B5A%27%20stroke-width%3D%271.2%27%3E%3Cpath%20d%3D%27M-40%20150C240%2040%20520%20250%20800%20150S1220%2020%201500%20130%27%20stroke-opacity%3D%27.05%27%2F%3E%3Cpath%20d%3D%27M-40%20250C260%20130%20540%20340%20820%20240S1240%20110%201500%20230%27%20stroke-opacity%3D%27.045%27%2F%3E%3Cpath%20d%3D%27M-40%20690C260%20590%20560%20800%20840%20700S1250%20570%201500%20680%27%20stroke-opacity%3D%27.05%27%2F%3E%3Cpath%20d%3D%27M-40%20790C280%20690%20560%20890%20860%20800S1260%20670%201500%20780%27%20stroke-opacity%3D%27.04%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
                      linear-gradient(165deg, #F4F8F7 0%, #E9F1EF 100%);
    background-size: cover, auto;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;

    /* Flex, not grid: a grid track sizes itself to the card, so the card's own
       `width: min(1120px, 100%)` had nothing solid to measure against and the
       wide layout came out narrower than it asked for. */
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card-split {
    /* The shell hands us three children - the brand, the copy, the picture -
       so each is placed by hand: brand and copy stacked in the left column,
       the picture filling the right one beside both. Left to flow they would
       wrap into an L. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: 48px;
    row-gap: 20px;
    align-content: center;
    width: min(1120px, 100%);
    /* A flex item will not shrink below its content by default, which is how
       a card on a phone ends up wider than the phone. */
    min-width: 0;
    max-width: 100%;
    padding: 54px 56px;
    border-radius: 26px;
}

.auth-card-split .brand { grid-column: 1; grid-row: 1; }
.auth-card-split .split-copy { grid-column: 1; grid-row: 2; }

.auth-card-split .split-art {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

/* The shell stacks its brand in a row; here the mark sits above the name so
   the left column reads straight down. */
.auth-card-split .brand {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 0;
}

.auth-card-split .brand-mark {
    width: 62px;
    height: 62px;
    border-radius: 18px;
}

.auth-card-split .brand-mark svg { width: 34px; height: 34px; }

.auth-card-split .brand-name {
    font-size: 42px;
    line-height: 1.05;
    letter-spacing: -1px;
}

.auth-card-split .auth-sub { margin: 0; font-size: 16px; }
.auth-card-split .brand-sub { margin-top: 0 !important; }

.split-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

/* A hairline with the shield sitting in it, marking off the promise below. */
.rule-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 330px;
    margin: 2px 0;
}

.rule-badge .rule {
    flex: 1;
    height: 1px;
    background: var(--auth-line, #DCE8E5);
}

.rule-badge .badge {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: var(--auth-green-tint, #E7F1EE);
    color: var(--auth-green, #008069);
}

.split-lede {
    margin: 0;
    max-width: 38ch;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--auth-ink-soft, #6B7C79);
}

.auth-card-split .auth-actions {
    width: 100%;
    max-width: 420px;
    margin-top: 4px;
}

.auth-card-split .btn-google {
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 16px;
}

/* What the console actually promises, kept short enough to be read. */
.trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    color: var(--auth-ink-soft, #6B7C79);
}

.trust-row li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trust-row li svg { color: var(--auth-green, #008069); flex: none; }
.trust-row .dot { color: #C3D5D0; }

.split-art {
    display: block;
    min-width: 0;
    align-self: stretch;
}

.split-art svg { display: block; width: 100%; height: auto; }

/* --- one column when there is no room for two ---------------------------- */

@media (max-width: 940px) {
    .auth-card-split {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
        width: min(520px, 100%);
        padding: 38px 30px 32px;
        text-align: center;
    }
    /* One column: brand, then the copy, then the picture underneath. */
    .auth-card-split .brand { grid-column: 1; grid-row: 1; }
    .auth-card-split .split-copy { grid-column: 1; grid-row: 2; }
    .auth-card-split .split-art { grid-column: 1; grid-row: 3; }
    .auth-card-split .brand,
    .split-copy { align-items: center; }
    .auth-card-split .brand-name { font-size: 34px; }
    .split-lede { max-width: none; }
    .trust-row { justify-content: center; }
    /* The picture goes last: on a phone the button should be reachable
       without scrolling past a drawing. */
    .split-art { max-width: 420px; margin: 0 auto; }
    .rule-badge { align-self: center; }
}

@media (max-width: 520px) {
    .split-art { display: none; }
}

/* --- attachments ---------------------------------------------------------
   A bubble carrying a photo, a clip, a voice note or a file. The padding
   shrinks so a picture reaches the bubble's edges the way it does on a phone,
   and the caption and stamp get their own inset back. */

.bubble.has-media { padding: 4px 4px 6px; max-width: min(340px, 78%); }
.bubble.has-media .text { padding: 5px 5px 0; }
.bubble.has-media small { padding: 0 5px; }

.media-img { display: block; }
.media-img img {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 6px;
}

.media-video {
    display: block;
    width: 100%;
    max-height: 380px;
    border-radius: 6px;
    background: #000000;
}

.media-audio { display: block; width: 100%; min-width: 240px; margin: 2px 0; }

/* Anything WhatsApp does not render inline: named, sized and downloadable. */
.media-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 210px;
    padding: 9px 10px;
    border-radius: 6px;
    background: rgba(11, 20, 26, .05);
    color: #111B21;
    text-decoration: none;
}

.media-doc:hover { background: rgba(11, 20, 26, .09); }

.doc-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #54656F;
}

.doc-meta { display: flex; flex-direction: column; min-width: 0; }
.doc-meta b {
    font-size: 13.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-meta small { font-size: 11.5px; color: #566670; }

/* --- the nudge to switch alerts on --------------------------------------- */

/* Sits under the list header only while notifications are off. Browsers grant
   permission solely from a real click, so there has to be something to click -
   the old code asked silently on the first click anywhere, and a prompt missed
   once was a prompt gone for good. */
.alert-nudge {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 16px;
    border: 0;
    border-bottom: 1px solid var(--panel-edge, #B2D5C4);
    background: #FFF8E6;
    color: #7A5B0B;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.alert-nudge:hover { background: #FFF2D2; }

.alert-nudge svg { flex: none; }

/* Blocked is not something a click can undo - only the browser's own site
   settings can - so it stops looking like a button. */
.alert-nudge.blocked {
    background: #FEF3F2;
    color: #B23A2F;
    cursor: default;
}

.alert-nudge.blocked:hover { background: #FEF3F2; }

.alert-nudge[hidden] { display: none; }

/* --- recording a voice message ------------------------------------------- */

.record-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    padding: 8px 12px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(11, 20, 26, .13);
}

/* Same trap as .attach-strip: a class that sets display beats the
   browser's own [hidden] rule, so the bar must opt out explicitly. */
.record-bar[hidden] {
    display: none;
}

.record-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E4483D;
    animation: record-pulse 1.2s ease-in-out infinite;
}

@keyframes record-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

/* Tabular figures so the seconds do not shuffle the row as they tick. */
.record-time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 14px;
    color: #111B21;
}

.record-hint { flex: 1; font-size: 13px; color: #566670; }

/* The microphone stays lit while it is open, the way the paperclip does
   while a file is chosen. */
#mic-btn.on { background: #FDE7E5; color: #E4483D; }

#record-note { display: block; margin-top: 3px; font-size: 11.5px; color: #566670; }

@media (prefers-reduced-motion: reduce) {
    .record-dot { animation: none; }
}

/* --- the file waiting to be sent ----------------------------------------- */

.attach-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    padding: 8px 12px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(11, 20, 26, .13);
}

/* A class that sets display beats the browser's own [hidden] rule, so the
   strip has to opt out explicitly or it can never hide - which leaves an empty
   bar sitting above the composer for good. Same reason as .template-row above. */
.attach-strip[hidden] {
    display: none;
}

.attach-thumb {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 6px;
    background: #E9EDEF;
    color: #54656F;
    font-size: 11px;
    font-weight: 600;
}

.attach-thumb img { width: 100%; height: 100%; object-fit: cover; }

.attach-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.attach-info b {
    font-size: 13.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attach-info small { font-size: 11.5px; color: #566670; }

/* Only shown while an upload is actually in flight. */
.attach-progress {
    height: 3px;
    margin-top: 5px;
    border-radius: 2px;
    background: #E9EDEF;
    overflow: hidden;
}
.attach-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--wa-dark-green, #008069);
    transition: width .15s linear;
}