/* =========================================================================
   NIZU Chat — iOS "Liquid Glass" (2026) skin
   -------------------------------------------------------------------------
   A non-destructive restyle of the Team Messenger widget (.rise-chat-wrapper)
   into a translucent, frosted-glass mobile-app aesthetic. Loaded AFTER
   app.all.css / custom-style.css so it overrides the base chat styles; it
   changes visuals only and keeps every existing class / JS hook intact.

   Structure it themes (unchanged markup):
     .rise-chat-wrapper  → floating glass panel
       .rise-chat-header → frosted top bar + control chips
       .nizu-chat-body-web   → scrollable message area
         .chat-row.chat-me / .chat-other > .chat-msg  → glass bubbles
       .rise-chat-footer → floating glass composer (textarea + send/attach)
     .init-chat-icon     → glass launcher bubble
   ========================================================================= */

:root {
    /* Liquid-glass design tokens (light) */
    /* --- frosted "smoked glass": a faint cool tint so the pane reads as glass even over
       the white app (pure-white translucency is invisible over white), plus a deep blur.
       ROLLBACK to the airy white: --lg-panel-bg: rgba(255,255,255,0.62); blur(30px). */
    --lg-panel-bg:        rgba(226, 232, 241, 0.22);   /* near-clear glass — very see-through */
    --lg-panel-blur:      saturate(180%) blur(40px);   /* deep background blur keeps it frosted */
    --lg-bar-bg:          rgba(255, 255, 255, 0.55);
    --lg-hairline:        rgba(255, 255, 255, 0.55);
    --lg-edge-hi:         rgba(255, 255, 255, 0.65);   /* specular top highlight */
    --lg-panel-shadow:    0 20px 60px rgba(17, 24, 39, 0.22), 0 2px 10px rgba(17, 24, 39, 0.10);
    --lg-chip-bg:         rgba(255, 255, 255, 0.5);
    --lg-chip-brd:        rgba(255, 255, 255, 0.6);

    --lg-bubble-in-bg:    rgba(120, 120, 128, 0.14);
    --lg-bubble-in-text:  #1c1c1e;
    --lg-blue-1:          #3aa0ff;
    --lg-blue-2:          #0a84ff;
    --lg-blue-3:          #0a6cf0;

    --lg-text:            #1c1c1e;
    --lg-text-soft:       #6b7280;
    --lg-radius:          26px;
    --lg-field-bg:        rgba(255, 255, 255, 0.55);
    --lg-field-brd:       rgba(60, 60, 67, 0.14);
}

/* -------------------------------------------------------------------------
   Panel
   ------------------------------------------------------------------------- */
.rise-chat-wrapper:not(.rise-cart-wrapper) {
    background: var(--lg-panel-bg) !important;
    -webkit-backdrop-filter: var(--lg-panel-blur);
    backdrop-filter: var(--lg-panel-blur);
    border: 1px solid var(--lg-hairline);
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-panel-shadow);
    overflow: hidden;                       /* clip children to the rounded panel */
    color: var(--lg-text);
}
.rise-chat-wrapper:not(.rise-cart-wrapper).full-screen {
    border-radius: 0;
    border: none;
}

/* -------------------------------------------------------------------------
   Header — frosted bar with a hairline and floating control chips
   ------------------------------------------------------------------------- */
.rise-chat-wrapper .rise-chat-header,
.rise-chat-wrapper .chat-topbar {
    background: var(--lg-bar-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(60, 60, 67, 0.10) !important;
    box-shadow: inset 0 1px 0 var(--lg-edge-hi);
    height: 60px;
}
.chat-title {
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--lg-text);
}
.chat-title .avatar img {
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* Control chips (back / more / close / full-screen) — circular glass buttons */
.rise-chat-wrapper .rise-chat-header .chat-topbar-btn,
.rise-chat-wrapper .chat-topbar .chat-topbar-btn {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lg-chip-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--lg-chip-brd);
    box-shadow: 0 2px 6px rgba(17, 24, 39, 0.10), inset 0 1px 0 var(--lg-edge-hi);
    color: var(--lg-text);
    opacity: 1;
    transition: transform 0.15s ease, background 0.15s ease;
}
.rise-chat-wrapper .rise-chat-header .chat-topbar-btn:hover,
.rise-chat-wrapper .chat-topbar .chat-topbar-btn:hover {
    transform: scale(1.06);
    background: rgba(255, 255, 255, 0.75);
    opacity: 1;
}
/* The backdrop-filter above makes the header its own STACKING CONTEXT. Without a z-index
   that whole context paints below .nizu-chat-body-web (which comes later in the DOM), so the
   "more options" menu disappeared behind the message bubbles. Raising the header fixes it.
   Doing so re-anchors the absolutely-positioned chips to the header, so pin them vertically
   instead of relying on their static position. */
.rise-chat-wrapper .rise-chat-header {
    position: relative;
    z-index: 3;
}
.rise-chat-wrapper .rise-chat-header .chat-topbar-btn {
    top: 50%;
    transform: translateY(-50%);
}
.rise-chat-wrapper .rise-chat-header .chat-topbar-btn:hover {
    transform: translateY(-50%) scale(1.06);
}
.rise-chat-wrapper .rise-chat-header .dropdown-menu { z-index: 1001; }

.rise-chat-wrapper .rise-chat-header .chat-topbar-btn.chat-back { left: 12px; }
.rise-chat-wrapper .rise-chat-header .chat-topbar-btn.chat-close { right: 12px; }
.rise-chat-wrapper .rise-chat-header .chat-topbar-btn.more-options { right: 54px; }
.rise-chat-wrapper .rise-chat-header .chat-topbar-btn svg { width: 18px; height: 18px; }
.rise-chat-wrapper .rise-chat-header .chat-topbar-btn i { font-size: 17px; line-height: 1; }

/* The chips float ABOVE the header (position:absolute), so the title must reserve room
   for them — otherwise the back arrow (left:12px + 34px) sits on top of the avatar and a
   long name slides under the close/more/speaker chips. The title is a flex item, so it is
   made to FILL the bar first; only then does the padding reliably measure from the header
   edge. min-width:0 lets it shrink instead of overflowing on a narrow chat window. */
.rise-chat-wrapper .rise-chat-header .chat-title {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 56px;
    padding-right: 100px;
}

/* Inbox / tabs list rows */
.rise-chat-wrapper .message-row {
    border-bottom: 1px solid rgba(60, 60, 67, 0.08) !important;
    border-radius: 14px;
    transition: background 0.15s ease;
}
.rise-chat-wrapper .message-row:hover {
    background: rgba(120, 120, 128, 0.10) !important;
}

/* -------------------------------------------------------------------------
   Message area
   ------------------------------------------------------------------------- */
.nizu-chat-body-web {
    background: transparent;
    scroll-behavior: smooth;
}
#js-chat-messages-container { padding: 6px 6px 4px; }

/* Slim, unobtrusive scrollbar */
.nizu-chat-body-web::-webkit-scrollbar { width: 7px; }
.nizu-chat-body-web::-webkit-scrollbar-thumb {
    background: rgba(60, 60, 67, 0.22);
    border-radius: 10px;
}
.nizu-chat-body-web::-webkit-scrollbar-track { background: transparent; }

/* Date separator ("Today" / "1 July" / "31 December 2025") between day groups */
.rise-chat-wrapper .chat-date-separator {
    display: flex;
    justify-content: center;
    margin: 14px 0 8px;
}
.rise-chat-wrapper .chat-date-separator span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--lg-text-soft);
    background: var(--lg-chip-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--lg-chip-brd);
    padding: 3px 12px;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 var(--lg-edge-hi);
}

/* Per-message time (hour:minute) under each bubble */
.rise-chat-wrapper .chat-time {
    font-size: 10.5px;
    line-height: 1;
    color: var(--lg-text-soft);
    margin: 2px 4px 3px;
    opacity: 0.85;
}
.rise-chat-wrapper .chat-me .chat-time { text-align: right; }
.rise-chat-wrapper .chat-other .chat-time { text-align: left; padding-left: 40px; }

/* -------------------------------------------------------------------------
   Bubbles — frosted glass, iMessage grouping preserved
   ------------------------------------------------------------------------- */
.chat-msg {
    padding: 9px 13px;
    line-height: 1.35;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.12s ease;
}

/* Received — light frosted glass */
.chat-other .chat-msg {
    background: var(--lg-bubble-in-bg) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--lg-bubble-in-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.chat-other .avatar img { border-radius: 50%; }

/* Sent — glossy iOS-blue glass */
.chat-me .chat-msg {
    background: linear-gradient(180deg, var(--lg-blue-1) 0%, var(--lg-blue-2) 48%, var(--lg-blue-3) 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 3px 12px rgba(10, 132, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.chat-me .chat-msg a { color: #fff; text-decoration: underline; }

/* Marvin / rich replies keep readable spacing inside the glass */
.chat-msg .marvin-md { display: block; }

/* -------------------------------------------------------------------------
   Composer — a floating frosted bar with a pill field + round send button
   ------------------------------------------------------------------------- */
.rise-chat-footer {
    background: var(--lg-bar-bg) !important;
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border-top: 1px solid rgba(60, 60, 67, 0.10) !important;
    box-shadow: inset 0 1px 0 var(--lg-edge-hi);
    border-radius: 0;
    padding: 0 !important;                 /* the form fills the footer edge-to-edge */
}
/* The reply form occupies the whole footer; only the form carries a 3px inset. */
.rise-chat-footer #chat-reply-form-dropzone {
    padding: 0;
    margin: 0;
    width: 100%;
}
.rise-chat-footer #chat-message-reply-form {
    margin: 0;
    padding: 3px;
    /* keep the mobile safe-area clear without dropping below the 3px minimum */
    padding-bottom: calc(3px + env(safe-area-inset-bottom, 0px));
}

/* Text field as a rounded translucent pill */
.rise-chat-footer .chat-message-textarea {
    background: var(--lg-field-bg);
    border: 1px solid var(--lg-field-brd);
    border-radius: 20px;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.05);
    padding: 2px 6px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.rise-chat-footer textarea {
    background: transparent !important;
    color: var(--lg-text) !important;
    padding: 10px 12px;
    height: 44px;
    font-size: 15px;
}
.rise-chat-footer textarea::placeholder { color: var(--lg-text-soft); }

/* Button row: attach + mic on the left, send on the right — all glass chips */
.rise-chat-footer .chat-button-section { padding: 6px 2px 0; }
.rise-chat-footer .chat-file-upload-icon .upload-file-button,
.rise-chat-footer .chat-button-section .upload-file-button,
.rise-chat-footer .record-start-btn,
.rise-chat-footer .record-end-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    background: var(--lg-chip-bg) !important;
    border: 1px solid var(--lg-chip-brd) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 var(--lg-edge-hi);
    color: var(--lg-text) !important;
    transition: transform 0.15s ease;
}
.rise-chat-footer .chat-file-upload-icon .upload-file-button:hover,
.rise-chat-footer .record-start-btn:hover { transform: scale(1.06); }
.rise-chat-footer .upload-file-button i,
.rise-chat-footer .record-start-btn i,
.rise-chat-footer .record-end-btn i { font-size: 16px; line-height: 1; }
.rise-chat-footer .upload-file-button .hidden-xs { display: none; }  /* icon-only chip */

.rise-chat-footer .message-send-button {
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, var(--lg-blue-1), var(--lg-blue-3)) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 14px rgba(10, 132, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rise-chat-footer .message-send-button:hover {
    transform: scale(1.07);
    box-shadow: 0 6px 18px rgba(10, 132, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
.rise-chat-footer .message-send-button svg { width: 18px; height: 18px; color: #fff; }
.rise-chat-footer .message-send-button i { font-size: 17px; line-height: 1; color: #fff; }

/* -------------------------------------------------------------------------
   Emoji picker — glass trigger chip + floating panel above the composer
   ------------------------------------------------------------------------- */
/* The panel is `position:absolute`, so its wrapper MUST be a positioning
   context — otherwise it anchors to whatever ancestor happens to be positioned
   and lands somewhere unrelated to the button. This rule used to exist only in
   its `.rise-chat-footer` form, which is why the picker rendered off the top of
   the viewport the first time another screen reused it (WhatsApp Shop's channel
   composer). Unscoped, it is the same computed value the chat already had. */
.chat-emoji-wrap { position: relative; }
.rise-chat-footer .chat-emoji-wrap { position: relative; }
.rise-chat-footer .chat-emoji-button {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    border-radius: 50% !important;
    background: var(--lg-chip-bg) !important;
    border: 1px solid var(--lg-chip-brd) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 var(--lg-edge-hi);
    color: var(--lg-text) !important;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
}
.rise-chat-footer .chat-emoji-button:hover { transform: scale(1.06); }
.rise-chat-footer .chat-emoji-button i { font-size: 16px; line-height: 1; }
.rise-chat-footer .chat-emoji-button.active { color: var(--lg-blue-2) !important; }

.chat-emoji-panel {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    width: 316px;
    max-width: calc(100vw - 32px);
    height: min(320px, 52vh);
    display: none;
    flex-direction: column;
    z-index: 60;
    /* Strong frosted "fog" — near-opaque so emojis stay readable over the
       chat messages behind it (the glass tokens were too see-through here). */
    background: rgba(249, 250, 253, 0.97);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    border: 1px solid var(--lg-hairline);
    border-radius: 18px;
    box-shadow: var(--lg-panel-shadow);
    overflow: hidden;
    color: var(--lg-text);
}
.chat-emoji-panel.open { display: flex; }

/* Search row */
.chat-emoji-panel .chat-emoji-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 8px;
    flex: 0 0 auto;
}
.chat-emoji-panel .chat-emoji-search i { color: var(--lg-text-soft); font-size: 13px; }
.chat-emoji-panel .chat-emoji-search input {
    flex: 1 1 auto;
    border: 1px solid var(--lg-field-brd);
    background: var(--lg-field-bg);
    color: var(--lg-text);
    border-radius: 14px;
    padding: 7px 12px;
    font-size: 14px;
    outline: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.chat-emoji-panel .chat-emoji-search input::placeholder { color: var(--lg-text-soft); }

/* Emoji grid — scrolls internally */
.chat-emoji-panel .chat-emoji-grid {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 8px 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 2px;
    align-content: start;
}
.chat-emoji-panel .chat-emoji-section {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--lg-text-soft);
    padding: 6px 4px 2px;
}
.chat-emoji-panel .chat-emoji-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--lg-text-soft);
    font-size: 13px;
    padding: 24px 8px;
}
.chat-emoji-panel .chat-emoji-item {
    border: 0;
    background: transparent;
    padding: 0;
    width: 36px;
    height: 36px;
    line-height: 1;
    font-size: 22px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, transform 0.12s ease;
    /* keep native color emoji rendering, not the text/glyph theme */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}
.chat-emoji-panel .chat-emoji-item:hover {
    /* neutral tint that reads on the near-opaque fog in both themes */
    background: rgba(120, 120, 128, 0.16);
    transform: scale(1.12);
}

/* Category tab bar */
.chat-emoji-panel .chat-emoji-tabs {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    padding: 4px 6px;
    border-top: 1px solid rgba(60, 60, 67, 0.12);
}
.chat-emoji-panel .chat-emoji-tab {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    padding: 5px 0;
    font-size: 17px;
    line-height: 1;
    border-radius: 9px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.12s ease, background 0.12s ease;
}
.chat-emoji-panel .chat-emoji-tab:hover { opacity: 0.9; }
.chat-emoji-panel .chat-emoji-tab.active {
    opacity: 1;
    background: rgba(120, 120, 128, 0.18);
}
/* Dark theme: darker fog + matching separators */
body.color-1E202D .chat-emoji-panel { background: rgba(30, 34, 48, 0.975); }
body.color-1E202D .chat-emoji-panel .chat-emoji-tabs { border-top-color: rgba(255, 255, 255, 0.1); }

/* Typing indicator / reply indicator subtle */
#js-chat-reply-indicator { padding: 0 12px; color: var(--lg-text-soft); }

/* -------------------------------------------------------------------------
   Tab bar — iOS-26 segmented control (Messages / Team / Clients / plugin tabs)
   The list-view footer (.footer-buttons-section) hosts the tabs; we turn the
   flat button row into a frosted segmented control with a floating active pill.
   ------------------------------------------------------------------------- */
.rise-chat-footer.footer-buttons-section {
    padding: 7px !important;
}
.rise-chat-footer .chat-tab {
    display: flex;
    gap: 4px;
    align-items: stretch;
    justify-content: stretch;
    margin: 0;
    padding: 4px;
    list-style: none;
    border-radius: 20px;
    background: var(--lg-field-bg);
    border: 1px solid var(--lg-field-brd);
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.06);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.rise-chat-footer .chat-tab .box-content {
    flex: 1 1 0;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
.rise-chat-footer .chat-tab .btn.chat-button {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    padding: 8px 4px !important;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: var(--lg-text-soft);
    transition: background 0.22s ease, color 0.22s ease, transform 0.12s ease, box-shadow 0.22s ease;
}
.rise-chat-footer .chat-tab .btn.chat-button > div { line-height: 0; }
.rise-chat-footer .chat-tab .btn.chat-button .icon,
.rise-chat-footer .chat-tab .btn.chat-button i { font-size: 18px; line-height: 1; }
.rise-chat-footer .chat-tab .btn.chat-button svg.icon { width: 18px; height: 18px; }
.rise-chat-footer .chat-tab .chat-tab-text {
    display: block;
    max-width: 100%;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* selected / hovered segment → floating frosted pill with the iOS-blue glyph */
.rise-chat-footer .chat-tab .btn.chat-button.active,
.rise-chat-footer .chat-tab .btn.chat-button:hover,
.rise-chat-footer .chat-tab .btn.chat-button:focus {
    background: var(--lg-chip-bg) !important;
    color: var(--lg-blue-2) !important;
    box-shadow: 0 1px 5px rgba(17, 24, 39, 0.14), inset 0 1px 0 var(--lg-edge-hi);
}
.rise-chat-footer .chat-tab .btn.chat-button.active { transform: translateY(-0.5px); }
.rise-chat-footer .chat-tab .btn.chat-button:active { transform: scale(0.95); }

/* The active tab pane fills the messenger body (which has a definite height:
   413px floating, calc(100vh - 142px) full-screen), so a plugin tab such as
   Marvin's Guests inbox can flex-fill its own height in BOTH modes rather than
   being pinned to a fixed max-height. Only the container is stretched here —
   each pane opts in to height:100% itself (see the Guests embed view). */
.nizu-chat-body-web > .tab-content { height: 100%; }

/* -------------------------------------------------------------------------
   Launcher bubble
   ------------------------------------------------------------------------- */
.init-chat-icon {
    background: rgba(255, 255, 255, 0.6) !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--lg-chip-brd);
    box-shadow: 0 10px 26px rgba(17, 24, 39, 0.22), inset 0 1px 0 var(--lg-edge-hi) !important;
    color: var(--lg-text);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.init-chat-icon:hover { transform: translateY(-2px) scale(1.04); }
.init-chat-icon.has-message {
    background: linear-gradient(180deg, #ff5f6d, #f5325c) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.4);
}

/* -------------------------------------------------------------------------
   Mobile — full-screen glass sheet with safe-area padding
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .rise-chat-wrapper:not(.rise-cart-wrapper) {
        border-radius: 0;
        border: none;
    }
    .rise-chat-wrapper .rise-chat-header,
    .rise-chat-wrapper .chat-topbar {
        padding-top: env(safe-area-inset-top, 0px);
        height: calc(60px + env(safe-area-inset-top, 0px));
    }
}

/* -------------------------------------------------------------------------
   Dark theme (body.color-1E202D) — dark liquid glass
   ------------------------------------------------------------------------- */
body.color-1E202D {
    --lg-panel-bg:       rgba(28, 32, 45, 0.26);   /* near-clear glass (ROLLBACK: 0.66) */
    --lg-bar-bg:         rgba(28, 32, 45, 0.6);
    --lg-hairline:       rgba(255, 255, 255, 0.12);
    --lg-edge-hi:        rgba(255, 255, 255, 0.14);
    --lg-panel-shadow:   0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4);
    --lg-chip-bg:        rgba(255, 255, 255, 0.10);
    --lg-chip-brd:       rgba(255, 255, 255, 0.16);
    --lg-bubble-in-bg:   rgba(255, 255, 255, 0.10);
    --lg-bubble-in-text: #e9eaf0;
    --lg-text:           #e9eaf0;
    --lg-text-soft:      #9aa0b4;
    --lg-field-bg:       rgba(255, 255, 255, 0.08);
    --lg-field-brd:      rgba(255, 255, 255, 0.14);
}
body.color-1E202D .rise-chat-wrapper .rise-chat-header,
body.color-1E202D .rise-chat-wrapper .chat-topbar,
body.color-1E202D .rise-chat-footer {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.color-1E202D .chat-other .chat-msg { border-color: rgba(255, 255, 255, 0.12); }
body.color-1E202D .init-chat-icon { background: rgba(40, 45, 60, 0.7) !important; }

/* -------------------------------------------------------------------------
   Motion preferences
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .rise-chat-wrapper,
    .init-chat-icon,
    .rise-chat-footer .message-send-button,
    .rise-chat-wrapper .chat-topbar-btn { transition: none !important; animation: none !important; }
}