/* Shared chrome uses its own tokens so page-specific themes cannot recolor it. */
body {
    --nav-ink: #073b2d;
    --nav-green: #126548;
    --nav-mint: #e7f4ec;
    --nav-paper: #fbfefc;
    --nav-line: #c8ddd1;
    --nav-muted: #486759;
    --nav-orange: #ff922e;
    --nav-orange-ink: #4b260b;
    --nav-ease: cubic-bezier(.2,.8,.2,1);
    --nav-width: var(--ui-width, 1120px);
    --nav-header-inset-left: max(24px, env(safe-area-inset-left, 0px));
    --nav-header-inset-right: max(24px, env(safe-area-inset-right, 0px));
}
.ui-legacy-navigation { --nav-width: 750px; }
/* The measured footer height already includes its safe-area padding. */
body.ui-footer-present {
    padding-bottom: var(--ui-footer-space);
}
body .ui-header.ui-shell-header {
    position: fixed; inset: 0 0 auto; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center; gap: 12px; width: 100%; max-width: var(--nav-width); height: auto;
    min-height: calc(64px + env(safe-area-inset-top, 0px)); margin: 0 auto;
    padding: calc(10px + env(safe-area-inset-top, 0px)) var(--nav-header-inset-right) 10px var(--nav-header-inset-left);
    color: #fff; background: linear-gradient(115deg, #073b2d, #126548) !important;
    border: 0; border-bottom: 1px solid #77bf9d55; border-radius: 0 0 20px 20px;
    box-shadow: 0 6px 20px #073b2d18; z-index: 1000;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body .ui-header.ui-shell-header .ui-header-title {
    position: static; margin: 0; padding: 0; color: #fff; text-align: center;
    font: 650 18px/1.4 system-ui, sans-serif; letter-spacing: .02em; overflow-wrap: anywhere;
}
body .ui-header.ui-shell-header .ui-icon-button {
    display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px;
    padding: 10px; border: 1px solid #ffffff45; border-radius: 14px;
    color: #fff; background: #ffffff12; cursor: pointer; text-decoration: none;
}
body .ui-shell-header .ui-icon-button:active { background: #ffffff28; }
/* Conversation header shares the palette, but stays in its message-pane layout. */
.customer header.ui-header { background: linear-gradient(115deg, #073b2d, #126548); color: #fff; border-bottom-color: #77bf9d55; box-shadow: 0 4px 16px #073b2d18; }
.customer header.ui-header .ui-header-title,
.customer header.ui-header .ui-header-title #title { color: #fff; }
.customer header.ui-header :is(.ui-icon-button,#openSearch,#openCustomerLanguage,#subtitle) { background: #ffffff12; border-color: #ffffff45; color: #fff; border-radius: 14px; }
.customer header.ui-header :is(.ui-icon-button,#openSearch,#openCustomerLanguage,#subtitle):hover { background: #ffffff28; }
body .ui-header-spacer { height: calc(var(--ui-header-height, 65px) + var(--ui-header-gap, 16px)); flex-shrink: 0; }
body .footer.ui-footer.ui-shell-footer {
    position: fixed; inset: auto 0 var(--ui-viewport-bottom, 0px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%; max-width: var(--nav-width); height: auto; min-height: 70px; margin: 0 auto;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--nav-line); border-bottom: 0; border-radius: 20px 20px 0 0;
    background: var(--nav-paper); box-shadow: 0 -6px 24px #073b2d10;
    backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 1000;
}
body .footer.ui-footer.ui-shell-footer[data-ui-keyboard-hidden] { visibility: hidden; pointer-events: none; }
body .ui-shell-footer .footer_item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; width: auto; min-width: 0; min-height: 56px; padding: 6px;
    border: 0; border-radius: 14px; background: transparent; color: var(--nav-muted);
    font: inherit; text-decoration: none; cursor: pointer; overflow-wrap: anywhere;
    transition: background .2s, color .2s, transform .2s var(--nav-ease);
}
body .ui-shell-footer .footer_info { margin: 0; color: inherit; font: 600 12px/1.4 system-ui, sans-serif; text-align: center; overflow-wrap: anywhere; }
body .ui-shell-footer .footer_item.is-active,
body .ui-shell-footer .footer_item[aria-expanded="true"] { color: var(--nav-green); background: var(--nav-mint); }
body .ui-shell-footer [data-ui-nav="task"] { color: var(--nav-orange-ink); }
body .ui-shell-footer [data-ui-nav="task"] svg { padding: 3px; width: 30px; height: 30px; margin: -3px 0; border-radius: 9px; background: var(--nav-orange); }
body .ui-shell-footer [data-ui-nav="task"].is-active { background: #fff0df; color: var(--nav-orange-ink); }
body .ui-shell-footer .footer_item::before { display: none; }
body:is([data-member-motion], .ui-luminous) .ui-shell-footer .footer_item > :is(svg, .footer_info) { position: relative; z-index: 1; }
body:is([data-member-motion], .ui-luminous) .ui-shell-header,
body.customer[data-member-motion] header.ui-header { overflow: hidden; }
body.customer[data-member-motion] header.ui-header { position: relative; }
body:is([data-member-motion], .ui-luminous) .ui-shell-header > *,
body.customer[data-member-motion] header.ui-header > * { position: relative; }
body .ui-account-backdrop.is-closing { pointer-events: none; }
body .ui-account-backdrop.is-closing .ui-account-drawer { animation: nav-drawer-out 180ms ease-in both; }
body .ui-account-backdrop {
    position: fixed; inset: 0; z-index: 1800; background: #052a2080;
    animation: nav-scrim-in .18s ease-out both;
}
body .ui-account-backdrop[hidden] { display: none !important; }
body .ui-drawer.ui-account-drawer {
    display: flex; flex-direction: column; width: min(304px, calc(100vw - 48px));
    height: 100vh; height: 100dvh; background: #f4faf6; color: var(--nav-ink);
    border-radius: 0 24px 24px 0; overflow: hidden;
    box-shadow: 16px 0 60px #052a2033; animation: nav-drawer-in .32s var(--nav-ease) both;
}
body .ui-account-drawer *, body .ui-shell-header *, body .ui-shell-footer * { box-sizing: border-box; }
body .ui-account-drawer { color: var(--nav-ink); }
body .ui-account-drawer a { text-decoration: none; }
body .ui-account-drawer .ui-drawer-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
    border: 0; background: linear-gradient(115deg, #073b2d, #126548); color: #fff;
}
body .ui-account-drawer .ui-drawer-heading h2 { margin: 0; color: #fff; font: 650 18px/1.4 system-ui, sans-serif; overflow-wrap: anywhere; }
body .ui-account-drawer .ui-close {
    position: relative; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px;
    padding: 10px; border: 1px solid #ffffff45; border-radius: 14px; background: #ffffff12; color: #fff; cursor: pointer;
}
body .ui-account-drawer .ui-close svg { width: 24px; height: 24px; margin: 0; }
body .ui-account-drawer .ui-drawer-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px calc(20px + env(safe-area-inset-bottom, 0px)); }
body .ui-account-drawer .ui-drawer-identity {
    display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
    gap: 14px; padding: 16px; border: 1px solid var(--nav-line); border-radius: 20px; background: #fff;
}
body .ui-account-drawer .ui-identity-visual {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-width: 0; padding: 0 16px; margin: -16px -16px 0; border-bottom: 1px solid var(--nav-line);
    background: radial-gradient(ellipse at 0 100%, #3a987144, transparent 70%), linear-gradient(125deg, #073b2d, #186448);
}
body .ui-account-drawer .ui-drawer-avatar {
    display: block; width: 56px; height: 56px; flex-shrink: 0; margin: 0; border: 2px solid #fff;
    border-radius: 18px; overflow: hidden; background: var(--nav-mint);
    box-shadow: 0 0 0 4px #ffffff14, 0 8px 16px #00251c40;
}
body .ui-account-drawer .ui-drawer-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
body .ui-account-drawer .ui-identity-content { min-width: 0; }
body .ui-account-drawer .ui-eyebrow { display: block; margin: 0 0 3px; font: 500 12px/1.5 system-ui, sans-serif; color: var(--nav-muted); letter-spacing: 0; }
body .ui-account-drawer .ui-identity-name { display: block; margin: 0 0 12px; font: 650 19px/1.5 system-ui, sans-serif; overflow-wrap: anywhere; }
body .ui-account-drawer .ui-copy-identity {
    display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%;
    min-height: 44px; margin: 0; padding: 6px 0; border: 0; background: transparent;
    color: var(--nav-ink); font: 600 14px/1.5 system-ui, sans-serif; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer;
}
body .ui-account-drawer .ui-copy-identity span { min-width: 0; overflow-wrap: anywhere; }
body .ui-account-drawer .ui-copy-identity svg, body .ui-account-drawer .ui-drawer-code svg { width: 16px; height: 16px; color: var(--nav-green); }
body .ui-account-drawer .ui-drawer-code { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--nav-line); color: var(--nav-muted); font: 12px/1.5 system-ui, sans-serif; }
body .ui-account-drawer .ui-drawer-code button { display: flex; align-items: center; gap: 6px; max-width: 65%; min-height: 44px; padding: 8px; border: 1px solid var(--nav-line); border-radius: 10px; background: var(--nav-mint); color: var(--nav-green); font: 600 13px/1.5 system-ui, sans-serif; overflow-wrap: anywhere; cursor: pointer; }
body .ui-account-drawer .ui-drawer-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; padding: 16px 14px; border: 1px solid var(--nav-line); border-radius: 18px; background: linear-gradient(120deg, #e2f1e8, #fff); }
body .ui-account-drawer .ui-drawer-balances span { min-width: 0; }
body .ui-account-drawer .ui-drawer-balances small { display: block; margin: 0 0 8px; font: 12px/1.5 system-ui, sans-serif; color: var(--nav-muted); }
body .ui-account-drawer .ui-drawer-balances strong { display: block; color: var(--nav-ink); font: 650 20px/1.4 system-ui, sans-serif; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body .ui-account-drawer .ui-drawer-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
body .ui-account-drawer :is(.ui-primary, .ui-secondary) { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 8px; border: 1px solid var(--nav-line); border-radius: 14px; font: 600 14px/1.5 system-ui, sans-serif; text-align: center; overflow-wrap: anywhere; }
body .ui-account-drawer .ui-primary { background: var(--nav-orange); color: var(--nav-orange-ink); border-color: #e5842b; }
body .ui-account-drawer .ui-secondary { color: var(--nav-green); background: #fff; }
body .ui-account-drawer .ui-drawer-actions svg { width: 20px; height: 20px; }
body .ui-account-drawer .ui-drawer-group { margin: 10px 0 0; padding: 0 8px 6px; border: 1px solid var(--nav-line); border-radius: 16px; background: #fff; }
body .ui-account-drawer .ui-drawer-group summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 12px 4px; list-style: none; font: 650 13px/1.5 system-ui, sans-serif; color: var(--nav-muted); cursor: pointer; }
body .ui-account-drawer summary::-webkit-details-marker { display: none; }
body .ui-account-drawer summary > svg { width: 16px; height: 16px; transition: transform .2s var(--nav-ease); }
body .ui-account-drawer details[open] > summary > svg { transform: rotate(90deg); }
body .ui-account-drawer .ui-drawer-link {
    position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    width: 100%; min-height: 48px; padding: 10px 8px; border: 0; border-radius: 10px;
    color: var(--nav-ink); background: transparent; font: 14px/1.5 system-ui, sans-serif; text-align: left; cursor: pointer;
}
body .ui-account-drawer .ui-drawer-link .ui-link-label { flex: 1; min-width: 0; font: inherit; color: inherit; overflow-wrap: anywhere; }
body .ui-account-drawer .ui-drawer-link > svg:first-child { width: 20px; height: 20px; color: var(--nav-green); }
body .ui-account-drawer .ui-drawer-link > svg:last-of-type { width: 14px; height: 14px; color: var(--nav-muted); }
body .ui-account-drawer .ui-drawer-logout { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; min-height: 46px; padding: 10px; border: 1px solid #e5c8c4; border-radius: 14px; color: #973c33; background: #fff8f6; font: 600 14px/1.5 system-ui, sans-serif; }
body .ui-account-drawer .ui-drawer-logout svg { width: 20px; height: 20px; }
body .ui-account-drawer.ui-account-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 16px; padding: 0; width: 100%; height: auto; border-radius: 0; background: transparent; box-shadow: none; animation: none; overflow: visible; }
body .ui-account-overview .ui-drawer-identity { grid-row: span 2; align-content: center; }
body .ui-account-overview .ui-drawer-balances, body .ui-account-overview .ui-drawer-actions,
body .ui-account-overview .ui-drawer-group, body .ui-account-overview .ui-drawer-logout { margin: 0; }
body .ui-account-overview .ui-drawer-logout { grid-column: 1 / -1; }
body .ui-account-frozen { display: flex; justify-content: space-between; gap: 16px; padding: 16px; margin-top: 16px; color: var(--nav-muted); font: 14px/1.5 system-ui, sans-serif; overflow-wrap: anywhere; }
body .ui-account-frozen strong { color: var(--nav-ink); font-variant-numeric: tabular-nums; }
body .ui-wallet-dialog { position: fixed; inset: 0; z-index: 1900; display: grid; place-items: center; padding: 20px; background: #052a2080; }
body .ui-wallet-dialog.none { display: none !important; }
body .ui-wallet-dialog .dialogCon { position: relative; width: min(460px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 28px 22px 22px; border: 1px solid var(--nav-line); border-radius: 22px; background: var(--nav-paper); color: var(--nav-ink); }
body .ui-wallet-dialog h2 { margin: 0 40px 22px 0; font: 650 19px/1.5 system-ui, sans-serif; overflow-wrap: anywhere; }
body .ui-wallet-dialog .ui-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--nav-line); border-radius: 12px; background: #fff; color: var(--nav-green); cursor: pointer; }
body .ui-wallet-dialog .ui-close svg { width: 24px; height: 24px; margin: 0; }
body .ui-wallet-dialog label { display: block; margin-bottom: 8px; font: 14px/1.5 system-ui, sans-serif; }
body .ui-wallet-dialog input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--nav-line); border-radius: 12px; background: #fff; color: var(--nav-ink); font: 16px/1.5 system-ui, sans-serif; }
body .ui-wallet-dialog .ui-primary { display: block; width: 100%; min-height: 48px; margin-top: 18px; border: 1px solid #e5842b; border-radius: 12px; background: var(--nav-orange); color: var(--nav-orange-ink); font: 600 16px/1.5 system-ui, sans-serif; cursor: pointer; }
body .ui-wallet-dialog button:disabled { opacity: .55; cursor: default; }
body .ui-wallet-dialog #walletPasswordStatus { margin: 12px 0 0; color: #973c33; font: 14px/1.5 system-ui, sans-serif; }
body .ui-account-drawer :is(.ui-drawer-link, .ui-copy-identity):active { background: var(--nav-mint); }
@keyframes nav-drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes nav-drawer-out { to { transform: translateX(-100%); opacity: .6; } }
@keyframes nav-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
    body .ui-shell-header .ui-icon-button:hover { background: #ffffff28; }
    body .ui-shell-footer .footer_item:hover, body .ui-account-drawer .ui-drawer-link:hover { background: var(--nav-mint); }
}
@media (max-width: 600px) {
    body {
        --nav-header-inset-left: max(12px, env(safe-area-inset-left, 0px));
        --nav-header-inset-right: max(12px, env(safe-area-inset-right, 0px));
    }
    body .ui-header.ui-shell-header { border-radius: 0 0 16px 16px; }
    body .ui-header.ui-shell-header .ui-header-title { font-size: 16px; }
    body .footer.ui-footer.ui-shell-footer { padding-left: max(6px, env(safe-area-inset-left, 0px)); padding-right: max(6px, env(safe-area-inset-right, 0px)); border-radius: 16px 16px 0 0; }
    body .ui-account-drawer.ui-account-overview { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    body .ui-account-overview .ui-drawer-identity { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
    body :is(.ui-shell-header, .ui-shell-footer, .ui-account-backdrop, .ui-account-drawer) *,
    body .ui-account-backdrop, body .ui-account-drawer { animation: none !important; transition: none !important; }
    body .ui-shell-header::before, body.customer header.ui-header::before,
    body .ui-shell-footer .footer_item::before, body .ui-account-drawer .ui-drawer-avatar::after { display: none !important; }
}