:root {
    color-scheme: light;
    --ink: #172b4d;
    --muted: #65758b;
    --line: #d9e5f2;
    --paper: #f3f8ff;
    --white: #fff;
    --forest: #183b68;
    --green: #3978c5;
    --mint: #dcecff;
    --coral: #df765e;
    --yellow: #e9c45f;
    --forest-hover: #24518b;
    --surface-sidebar: #f8fbff;
    --surface-header: #f1f6fd;
    --surface-chat: #edf4fc;
    --surface-hover: #e5f0ff;
    --accent-soft: #edf5ff;
    --accent-border: #d5e6fb;
    --user-bubble: #dcecff;
    --user-bubble-border: #c4defb;
    --input-bg: #fbfdff;
    --input-border: #d5e0ec;
    --focus-ring: rgba(57, 120, 197, .11);
    --pattern-dot: rgba(24, 59, 104, .05);
    --shadow: 0 18px 48px rgba(29, 78, 137, .08);
    font-family: 'DM Sans', sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

html[data-theme="consultant"] {
    --ink: #34204f;
    --muted: #756889;
    --line: #e6dff0;
    --paper: #faf7ff;
    --forest: #4a2f70;
    --green: #8056bd;
    --mint: #efe5ff;
    --forest-hover: #69449a;
    --surface-sidebar: #fcfaff;
    --surface-header: #f5effc;
    --surface-chat: #f3ecfb;
    --surface-hover: #efe5fa;
    --accent-soft: #f3ebfc;
    --accent-border: #e2d3f2;
    --user-bubble: #eee2ff;
    --user-bubble-border: #dcc9f4;
    --input-bg: #fdfbff;
    --input-border: #e2d9ee;
    --focus-ring: rgba(128, 86, 189, .12);
    --pattern-dot: rgba(74, 47, 112, .05);
    --shadow: 0 18px 48px rgba(66, 42, 99, .08);
}

html[data-theme="admin"] {
    --ink: #51253d;
    --muted: #80687a;
    --line: #f0dce7;
    --paper: #fff7fa;
    --forest: #702b50;
    --green: #c04e83;
    --mint: #fbe4ef;
    --forest-hover: #963d6a;
    --surface-sidebar: #fffafd;
    --surface-header: #fcf0f6;
    --surface-chat: #fbf0f6;
    --surface-hover: #f9e6ef;
    --accent-soft: #fdf0f6;
    --accent-border: #f1d5e3;
    --user-bubble: #fbe4ef;
    --user-bubble-border: #efcadc;
    --input-bg: #fffafd;
    --input-border: #ecd7e2;
    --focus-ring: rgba(192, 78, 131, .12);
    --pattern-dot: rgba(112, 43, 80, .05);
    --shadow: 0 18px 48px rgba(112, 43, 80, .08);
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; overflow: hidden; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--paper); overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
a { color: inherit; }
.app-shell { width: min(1440px, 100%); height: 100vh; height: 100svh; min-height: 100svh; margin: 0 auto; padding: 0 34px; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-y; }
.app-shell::-webkit-scrollbar { width: 0; height: 0; }
.app-shell.chat-only-mode { width: 100%; max-width: none; height: 100vh; height: 100svh; min-height: 100vh; padding: 0; overflow: hidden; }
.chat-only-mode > .topbar, .chat-only-mode > .bottom-nav, .chat-only-mode > .app-footer { display: none; }
.chat-only-mode > .whatsapp-shell { min-height: 0; padding: 8px; padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
.chat-only-mode .wa-app { width: 100%; height: auto; min-height: 0; flex: 1; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 19px 'Manrope', sans-serif; }
.brand-mark, .topic-icon, .welcome-icon, .message-avatar, .network-icon { display: grid; place-items: center; overflow: hidden; }
.brand-mark svg, .topic-icon svg, .welcome-icon svg, .message-avatar svg, .network-icon svg { display: block; width: 68%; height: 68%; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; color: white; background: var(--forest); }
.brand-accent { color: var(--green); }
.topbar-actions { display: flex; align-items: center; gap: 13px; }
.secure-label, .user-label { color: var(--muted); font-size: 12px; }
.status-dot, .online-indicator i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); }
.secure-label.is-offline { color: #946022; }
.secure-label.is-offline .status-dot { background: #d89537; }
.button { min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 6px; font-weight: 700; font-size: 13px; transition: transform .15s ease, background .15s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button-dark { color: white; background: var(--forest); }
.button-dark:hover:not(:disabled) { background: var(--forest-hover); }
.button-quiet { color: var(--ink); background: transparent; border-color: var(--line); }
.button-quiet:hover:not(:disabled) { background: white; }
.button-wide { width: 100%; min-height: 48px; }
.button-icon { font-size: 17px; }
.visitor-flow { flex: 1; min-height: 0; padding: 16px 0; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.visitor-flow:not(.landing-flow) > .landing-content { min-height: 0; align-self: stretch; display: flex; flex-direction: column; }
.landing-flow { display: block; overflow-y: auto; padding: 28px 0 34px; }
.landing-content { width: min(1120px, 100%); margin: 0 auto; }
.landing-welcome { min-height: 230px; padding: 34px clamp(22px, 4vw, 48px); display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; border-left: 4px solid var(--green); background: var(--surface-header); }
.landing-welcome-copy { max-width: 670px; }
.landing-welcome h1, .google-onboarding h1 { margin: 0; font: 800 36px/1.14 'Manrope', sans-serif; }
.landing-welcome-copy > p:last-child, .google-onboarding-heading > p:last-child { max-width: 610px; margin: 13px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.landing-start-button { min-width: 188px; min-height: 48px; flex: 0 0 auto; }
.landing-alert { margin-top: 16px; }
.landing-experts { margin-top: 34px; }
.landing-section-heading { margin-bottom: 17px; display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.landing-section-heading h2 { margin: 0; font: 800 22px/1.2 'Manrope', sans-serif; }
.landing-section-heading p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.landing-search { width: min(290px, 100%); min-height: 40px; padding: 0 12px; display: flex; align-items: center; border: 1px solid var(--input-border); border-radius: 5px; background: var(--white); }
.landing-search input { height: 38px; border: 0; background: transparent; }
.landing-search input:focus { box-shadow: none; }
.landing-expert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.landing-expert-card { min-width: 0; min-height: 0; padding: 17px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.landing-expert-card-head { display: flex; align-items: center; gap: 11px; }
.landing-expert-avatar { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 50%; color: var(--forest); background: var(--mint); font-size: 12px; font-weight: 800; }
.landing-expert-avatar, .wa-consultant-avatar, .public-consultant-avatar, .consultant-avatar-preview { position: relative; overflow: hidden; }
.avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.landing-expert-identity { min-width: 0; flex: 1; }
.landing-expert-identity strong, .landing-expert-identity small { display: block; overflow-wrap: anywhere; }
.landing-expert-identity strong { font: 800 14px 'Manrope', sans-serif; }
.landing-expert-identity small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.landing-online { color: #20744b; font-size: 10px; font-weight: 800; white-space: nowrap; }
.landing-online::before { width: 7px; height: 7px; margin-right: 5px; display: inline-block; border-radius: 50%; background: #31966a; content: ''; }
.landing-expert-actions { margin-top: 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.landing-expert-actions .button { min-height: 34px; padding: 7px 11px; font-size: 10px; }
.landing-expert-fee { color: var(--muted); font-size: 10px; font-weight: 700; }
.landing-pagination { min-height: 48px; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.landing-pagination > div { display: flex; gap: 6px; }
.landing-pagination .icon-button { width: 34px; height: 34px; font-size: 17px; }
.landing-footer { margin-top: 24px; padding: 17px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.google-onboarding { width: min(520px, 100%); margin: 24px auto; padding: clamp(22px, 4vw, 36px); border: 1px solid var(--line); border-radius: 8px; background: var(--white); box-shadow: var(--shadow); }
.google-onboarding h1 { font-size: 28px; }
.google-onboarding .visitor-form { margin-top: 22px; }
.whatsapp-shell { padding: 10px 0; justify-content: stretch; align-items: stretch; }
.wa-app { width: min(1280px, 100%); height: auto; min-height: 0; flex: 1; display: flex; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: white; box-shadow: var(--shadow); }
.wa-sidebar { width: 360px; min-height: 0; flex: 0 0 360px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--surface-sidebar); transition: width .25s ease, flex-basis .25s ease, opacity .15s ease; }
.wa-sidebar.is-collapsed { width: 0; flex-basis: 0; opacity: 0; border-right-width: 0; overflow: hidden; }
.consultant-shell .wa-sidebar.is-collapsed { width: 76px; flex-basis: 76px; opacity: 1; border-right-width: 1px; }
.whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed { width: 76px; flex-basis: 76px; opacity: 1; border-right-width: 1px; }
.wa-sidebar-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); background: var(--surface-header); }
.wa-sidebar-user-actions { display: flex; align-items: center; gap: 5px; }
.wa-sidebar-user-actions .text-link-button { max-width: 110px; font-size: 10px; }
.wa-sidebar-user-actions .wa-close-sidebar { width: auto; min-width: 34px; padding: 0 7px; border-radius: 6px; font-size: 10px; }
.wa-user-pill { display: flex; align-items: center; gap: 10px; }
.wa-avatar-mini { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--forest); }
.wa-avatar-mini svg { width: 68%; height: 68%; }
.wa-user-pill strong, .wa-user-pill small { display: block; }
.wa-user-pill strong { font-size: 12px; }
.wa-user-pill small { color: var(--muted); font-size: 10px; }
.wa-close-sidebar { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--forest); font-size: 18px; }
.wa-search { display: flex; align-items: center; gap: 8px; margin: 12px 12px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); }
.wa-search input { height: auto; border: 0; background: transparent; padding: 0; font-size: 12px; }
.wa-search input:focus { box-shadow: none; }
.wa-sidebar-section { padding: 16px 12px 0; }
.wa-section-label { margin: 0 0 10px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.wa-consultant-list { display: grid; gap: 8px; }
.wa-consultant-item { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 10px; border: 1px solid transparent; border-radius: 12px; color: var(--ink); background: white; text-align: left; }
.wa-consultant-item.is-hidden { display: none; }
.wa-consultant-item.is-active { border-color: var(--accent-border); background: var(--accent-soft); }
.wa-consultant-item strong, .wa-consultant-item small { display: block; }
.wa-consultant-item strong { font-size: 12px; }
.wa-consultant-item small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.wa-consultant-item em { color: var(--green); font-style: normal; font-size: 8px; font-weight: 800; }
.wa-consultant-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--mint), var(--accent-border)); color: var(--forest); font-size: 11px; font-weight: 800; }
.wa-tag-list { display: flex; gap: 8px; flex-wrap: wrap; }
.wa-tag-list span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--green); background: var(--accent-soft); font-size: 10px; font-weight: 700; }
.wa-chat-panel { min-width: 0; min-height: 0; flex: 1; display: flex; flex-direction: column; background: var(--surface-chat); }
.wa-menu-button { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--forest); }
.onboarding-screen, .chat-panel, .admin-panel { border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.onboarding-screen { position: relative; width: min(440px, 100%); padding: 32px; overflow: hidden; box-shadow: var(--shadow); animation: rise-in .35s ease both; }
.wa-chat-panel > .onboarding-screen { align-self: center; margin: auto; }
.onboarding-screen::before { position: absolute; inset: 0 0 auto; height: 4px; content: ''; background: var(--green); }
.eyebrow { margin: 0 0 10px; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.onboarding-heading h1, .page-heading h1 { margin: 0; font: 800 27px/1.17 'Manrope', sans-serif; letter-spacing: 0; }
.onboarding-heading > p:last-child, .subheading { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.visitor-form { margin-top: 25px; display: grid; gap: 17px; }
label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 700; }
input, select, textarea { width: 100%; min-width: 0; border: 1px solid var(--input-border); border-radius: 5px; outline: none; color: var(--ink); background: var(--input-bg); font-size: 13px; }
input, select { height: 42px; padding: 0 11px; }
textarea { padding: 11px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--focus-ring); }
.consent-row { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.5; }
.consent-row input { flex: 0 0 16px; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--green); }
.form-note { margin: -5px 0 0; color: #81908b; font-size: 10px; line-height: 1.5; }
.inline-alert { margin: 0; padding: 10px; border-radius: 5px; color: #854d31; background: #fff3e6; font-size: 12px; }
.field-selection { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--input-border); border-radius: 5px; }
.field-selection legend { padding: 0 5px; color: var(--ink); font-size: 11px; font-weight: 700; }
.field-selection legend span { color: var(--muted); font-weight: 500; }
.field-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.field-choice { min-width: 0; min-height: 36px; padding: 7px 9px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--input-bg); font-size: 11px; font-weight: 500; }
.field-choice input { flex: 0 0 15px; width: 15px; height: 15px; margin: 0; accent-color: var(--green); }
.chat-panel { flex: 1; width: min(1160px, 100%); min-height: 0; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; touch-action: pan-y; box-shadow: var(--shadow); animation: rise-in .3s ease both; }
.chat-topline { min-height: 74px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); background: var(--surface-header); }
.chat-topic { display: flex; align-items: center; gap: 11px; }
.topic-icon, .welcome-icon { width: 38px; height: 38px; border-radius: 8px; color: var(--forest); background: var(--mint); }
.topic-icon { color: white; background: var(--green); }
#visitor-consultant-chat .topic-icon { position: relative; overflow: hidden; }
.chat-topic strong, .chat-topic span { display: block; }
.chat-topic strong { font-size: 13px; }
.chat-topic div > span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.chat-top-actions { display: flex; align-items: center; gap: 12px; }
.chat-menu-wrap { position: relative; }
.chat-menu-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: white; font-size: 22px; line-height: 1; }
.chat-menu-button:hover, .chat-menu-button[aria-expanded="true"] { color: var(--forest); background: var(--surface-hover); }
.chat-menu { position: absolute; z-index: 12; top: calc(100% + 8px); right: 0; width: 205px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: white; box-shadow: 0 12px 32px rgba(20, 35, 52, .18); animation: rise-in .14s ease both; }
.chat-menu button { width: 100%; min-height: 40px; padding: 0 11px; border: 0; border-radius: 5px; color: var(--ink); background: transparent; text-align: left; font-size: 12px; }
.chat-menu a { width: 100%; min-height: 40px; padding: 12px 11px; display: block; border-radius: 5px; color: var(--ink); text-align: left; text-decoration: none; font-size: 12px; }
.chat-menu button:hover { background: var(--surface-hover); }
.chat-menu a:hover { background: var(--surface-hover); }
.chat-menu .chat-menu-logout { color: #b13d3d; }
.chat-menu-divider { height: 1px; margin: 5px 4px; display: block; background: var(--line); }
.chat-visitor-name { color: var(--muted); font-size: 10px; }
.chat-visitor-name strong { color: var(--ink); }
.end-session-button { border: 1px solid var(--line); border-radius: 6px; color: var(--forest); background: white; padding: 7px 10px; font-size: 10px; font-weight: 700; line-height: 1; }
.end-session-button:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.voice-call-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--forest); background: white; font-size: 17px; line-height: 1; }
.voice-call-button:hover:not(:disabled) { border-color: var(--green); color: var(--green); background: var(--surface-hover); }
.voice-call-button:disabled { color: var(--muted); cursor: not-allowed; }
.voice-call-dialog { width: min(390px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: white; box-shadow: 0 24px 70px rgba(20, 35, 52, .28); }
.voice-call-dialog::backdrop { background: rgba(20, 35, 52, .48); backdrop-filter: blur(3px); }
.voice-call-content { padding: 28px; display: grid; justify-items: center; gap: 12px; text-align: center; }
.voice-call-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 27px; animation: voice-call-pulse 1.8s ease-in-out infinite; }
.voice-call-content h2 { margin: 3px 0 0; font: 800 19px 'Manrope', sans-serif; }
.voice-call-name { margin: 0; color: var(--forest); font-weight: 700; }
.voice-call-status, .voice-call-note { margin: 0; color: var(--muted); font-size: 12px; }
.voice-call-dialog audio { width: 100%; min-height: 40px; }
.voice-call-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.voice-call-actions .button { min-height: 38px; padding: 0 13px; font-size: 11px; }
.voice-call-note { max-width: 270px; font-size: 10px; }
@keyframes voice-call-pulse { 50% { box-shadow: 0 0 0 9px rgba(42, 122, 87, .12); } }
.message-list { flex: 1; min-height: 0; max-height: none; padding: 32px clamp(18px, 8vw, 110px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; background-color: var(--surface-chat); background-image: radial-gradient(var(--pattern-dot) .8px, transparent .8px); background-size: 22px 22px; }
.welcome-message { max-width: 490px; margin: 9vh auto 0; text-align: center; animation: rise-in .45s ease both; }
.welcome-icon { width: 48px; height: 48px; margin: 0 auto 17px; background: var(--yellow); }
.welcome-message h2 { margin: 0; font: 800 22px 'Manrope', sans-serif; }
.welcome-message p { max-width: 400px; margin: 9px auto 18px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.suggestion-row { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.suggestion-row span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: rgba(255,255,255,.75); font-size: 10px; }
.message-row { margin: 0 0 18px; display: flex; gap: 9px; align-items: flex-end; animation: rise-in .22s ease both; }
.message-row.is-user { justify-content: flex-end; }
.message-row > div { flex: 1; min-width: 0; }
.message-avatar { position: relative; display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; overflow: hidden; border-radius: 50%; color: var(--forest); background: var(--mint); }
.visitor-consultant-messages .message-row, .ai-message-list .message-row, #consultant-chat-messages .message-row { align-items: flex-start; }
.visitor-consultant-messages .visitor-message-avatar, .ai-message-list .visitor-message-avatar, #consultant-chat-messages .visitor-message-avatar { width: 40px; height: 40px; flex-basis: 40px; color: white; background: var(--green); font-size: 11px; font-weight: 800; }
#consultant-chat-messages .visitor-message-avatar { background: #3978c5; }
.visitor-consultant-messages .visitor-message-avatar.is-user-avatar, .ai-message-list .visitor-message-avatar.is-user-avatar, #consultant-chat-messages .visitor-message-avatar.is-user-avatar { background: var(--coral); }
.message-bubble { width: 100%; max-width: 100%; box-sizing: border-box; padding: 13px 16px; border: 1px solid var(--line); border-radius: 8px 8px 8px 2px; color: var(--ink); background: white; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.is-user .message-bubble { border-color: var(--user-bubble-border); border-radius: 8px 8px 2px 8px; color: var(--ink); background: var(--user-bubble); }
.typing-bubble { width: auto; display: inline-flex; min-width: 168px; align-items: center; gap: 8px; color: #5e7069; white-space: normal; }
.typing-dots { display: inline-flex; align-items: center; gap: 3px; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: typing-pulse 1s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .16s; }
.typing-dots i:nth-child(3) { animation-delay: .32s; }
.message-time { margin-top: 5px; display: grid; gap: 2px; color: #89958f; font-size: 9px; }
.message-time time { display: block; }
.message-read-time { color: var(--green); }
.message-read-time.is-unread { color: #89958f; }
.is-user .message-time { text-align: right; }
.offline-message-meta { margin-top: 5px; display: flex; align-items: center; gap: 8px; }
.is-user .offline-message-meta { justify-content: flex-end; }
.offline-message-status { color: #8a9691; font-size: 9px; }
.offline-message-status.is-read { color: var(--green); font-weight: 700; }
.consultant-offline-message .offline-message-meta { justify-content: flex-start; }
.offline-message-label { width: fit-content; margin: 0 0 5px; padding: 3px 7px; display: block; border-radius: 4px; color: #865b1d; background: #fff0cf; font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.is-user .offline-message-label { margin-left: auto; }
.is-offline-message .is-offline-message-bubble { border-color: #ead49f; background: #fff7e6; }
.message-row.is-user.is-offline-message .is-offline-message-bubble { background: #f7e9c9; }
.message-attachment { width: fit-content; max-width: min(100%, 360px); margin-top: 7px; padding: 7px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: white; text-decoration: none; }
.message-attachment:hover { border-color: var(--green); }
.message-attachment img { max-width: 100%; max-height: 260px; display: block; border-radius: 4px; object-fit: contain; }
.is-offline-message-attachment { border-color: #ead49f; background: #fff7e6; }
.attachment-file-icon { flex: 0 0 auto; padding: 8px 6px; border-radius: 4px; color: #fff; background: #c34f4f; font-size: 9px; font-weight: 800; }
.message-attachment span:last-child { overflow-wrap: anywhere; font-size: 11px; }
.recommendation-title { margin: 9px 0 8px 34px; color: var(--muted); font-size: 10px; font-weight: 700; }
.recommendation-list { margin: 0 0 20px 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.recommendation-card { padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: white; }
.recommendation-card strong, .recommendation-card span { display: block; }
.recommendation-card strong { font-size: 12px; }
.recommendation-card span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.recommendation-card a { display: inline-flex; margin-top: 10px; color: var(--green); font-size: 11px; font-weight: 800; text-decoration: none; }
.recommendation-card a:hover { text-decoration: underline; }
.composer { position: sticky; z-index: 2; bottom: 0; flex: 0 0 auto; padding: 12px clamp(14px, 5vw, 70px) calc(48px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--white); box-shadow: 0 -8px 18px rgba(20, 35, 52, .07); }
.composer-input-row { display: flex; align-items: flex-end; gap: 9px; }
.emoji-picker-wrap { flex: 0 0 38px; width: 38px; position: relative; }
.emoji-picker-toggle { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 1px solid var(--input-border); border-radius: 50%; color: var(--forest); background: var(--white); font-size: 21px; line-height: 1; }
.emoji-picker-toggle:hover, .emoji-picker-toggle[aria-expanded="true"] { border-color: var(--green); background: var(--accent-soft); }
.emoji-picker-toggle:disabled { cursor: not-allowed; opacity: .48; }
.emoji-picker-panel { position: fixed; z-index: 40; width: min(340px, calc(100vw - 24px)); max-height: 380px; max-height: min(380px, calc(100vh - 24px)); max-height: min(380px, calc(100dvh - 24px)); padding: 10px; display: flex; flex-direction: column; gap: 9px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--white); box-shadow: 0 14px 38px rgba(20, 35, 52, .22); }
.emoji-picker-panel[hidden] { display: none; }
.emoji-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.emoji-picker-heading strong { font-size: 13px; }
.emoji-picker-close { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 21px; line-height: 1; }
.emoji-picker-close:hover { color: var(--ink); background: var(--surface-hover); }
.emoji-picker-search { min-height: 34px; padding: 7px 10px; border-radius: 18px; font-size: 12px; }
.emoji-picker-categories { min-height: 36px; flex: 0 0 36px; display: flex; align-items: center; gap: 3px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.emoji-picker-category { flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 18px; }
.emoji-picker-category:hover, .emoji-picker-category[aria-selected="true"] { border-bottom-color: var(--green); color: var(--ink); background: var(--accent-soft); }
.emoji-picker-grid { min-height: 60px; flex: 1 1 auto; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; overflow-y: auto; }
.emoji-picker-choice { min-width: 0; min-height: 34px; padding: 2px; border: 0; border-radius: 6px; background: transparent; font-size: 22px; line-height: 1; }
.emoji-picker-choice:hover, .emoji-picker-choice:focus-visible { background: var(--surface-hover); }
.emoji-picker-empty { grid-column: 1 / -1; padding: 16px 5px; color: var(--muted); text-align: center; font-size: 12px; }
.attachment-button { position: relative; flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--input-border); border-radius: 50%; color: var(--forest); background: white; font-size: 24px; line-height: 1; }
.attachment-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.attachment-button.is-disabled { cursor: not-allowed; opacity: .48; }
.attachment-button.is-disabled input { cursor: not-allowed; }
.attachment-preview { margin: 0 0 8px; padding: 6px 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--accent-border); border-radius: 6px; color: var(--muted); background: var(--accent-soft); font-size: 10px; }
.attachment-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview button { flex: 0 0 25px; width: 25px; height: 25px; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 19px; line-height: 1; }
.attachment-preview button:hover { color: #b13d3d; background: white; }
.composer textarea { min-height: 42px; max-height: 120px; flex: 1; border-color: var(--input-border); border-radius: 22px; background: var(--input-bg); font-size: 13px; resize: none; }
.composer textarea:disabled { cursor: not-allowed; opacity: .6; }
.composer textarea:focus { border-color: var(--input-border); box-shadow: none; }
.composer-bottom { min-height: 13px; margin-top: 4px; display: flex; align-items: center; color: #8a9691; font-size: 9px; }
.send-button { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 0; border-radius: 50%; color: white; background: var(--green); font-size: 21px; line-height: 1; }
.is-hidden { display: none !important; }
.scroll-controls { position: fixed; right: 82px; bottom: 88px; z-index: 10; display: flex; flex-direction: column; gap: 6px; opacity: .42; transition: opacity .2s ease; pointer-events: none; }
.scroll-controls:hover, .scroll-controls:focus-within { opacity: 1; }
.scroll-button { pointer-events: auto; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--forest); background: rgba(255,255,255,.94); box-shadow: 0 8px 20px rgba(18,45,39,.12); font-size: 18px; line-height: 1; transition: transform .15s ease, color .15s ease, border-color .15s ease; }
.scroll-button:hover { border-color: var(--green); color: var(--green); transform: translateY(-1px); }
.bottom-nav { min-height: 58px; padding: 10px 0; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--line); background: rgba(255,255,255,.8); }
.bottom-nav-label, .bottom-nav-user { color: var(--muted); font-size: 11px; }
.bottom-nav-user { color: var(--ink); font-weight: 700; }
.bottom-nav-link { color: var(--green); font-size: 11px; font-weight: 700; text-decoration: none; }
.bottom-nav-link:hover, .bottom-nav-link:focus-visible { color: var(--forest); text-decoration: underline; }
.bottom-nav-link-muted { color: var(--muted); }
.app-footer { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); color: #7d8984; font-size: 10px; }
.info-shell { min-height: 100svh; }
.info-page { width: min(820px, 100%); flex: 1; margin: 0 auto; padding: clamp(34px, 7vw, 80px) 0; }
.info-page h1 { margin: 0; font: 800 clamp(28px, 4vw, 44px)/1.1 'Manrope', sans-serif; }
.info-lead { max-width: 620px; margin: 14px 0 34px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.info-section { padding: 20px 0; border-top: 1px solid var(--line); }
.info-section h2, .career-opening h2 { margin: 0 0 8px; font: 800 18px 'Manrope', sans-serif; }
.info-section p, .career-opening p { margin: 0; color: #52655f; font-size: 13px; line-height: 1.75; }
.career-opening { margin: 30px 0; padding: 24px; border: 1px solid #cfe7da; border-radius: 8px; background: #f4fbf7; }
.career-opening p { margin-bottom: 18px; }
.dashboard-page { flex: 1; padding: 38px 0 52px; }
.page-heading { margin-bottom: 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-heading h1 { font-size: 28px; }
.page-heading .eyebrow { margin-bottom: 8px; }
.role-chip { padding: 8px 11px; border-radius: 5px; color: var(--forest); background: var(--mint); font-size: 10px; font-weight: 800; }
.tabbar { margin-bottom: 14px; display: flex; gap: 5px; border-bottom: 1px solid var(--line); }
.tab-button { padding: 12px 14px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; }
.tab-button.is-active { border-bottom-color: var(--green); color: var(--forest); }
.admin-panel { padding: 22px; margin-bottom: 14px; }
.panel-heading { margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel-heading h2 { margin: 0; font: 800 17px 'Manrope', sans-serif; }
.panel-heading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.admin-list-tools { margin: 0 0 14px; display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: end; gap: 10px; }
.admin-list-tools label { min-width: 0; color: var(--muted); font-size: 10px; font-weight: 700; }
.admin-list-tools input, .admin-list-tools select { margin-top: 5px; font-size: 12px; }
.admin-list-search { max-width: 420px; }
.admin-list-total { padding-bottom: 10px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.admin-pagination { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.admin-pagination span { color: var(--muted); font-size: 11px; }
.consultant-dashboard-nav { position: sticky; top: 0; z-index: 10; flex: 0 0 auto; display: flex; align-items: center; gap: 5px; margin: 0 -8px; padding: 10px 8px; overflow-x: auto; border-bottom: 1px solid var(--line); background: rgba(243, 248, 255, .96); }
.consultant-dashboard-nav a { min-height: 36px; padding: 8px 12px; display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: 6px; color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.consultant-dashboard-nav a:hover, .consultant-dashboard-nav a:focus-visible { border-color: var(--accent-border); color: var(--forest); background: var(--white); }
.consultant-dashboard-nav a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.consultant-dashboard { width: min(1120px, 100%); margin-right: auto; margin-left: auto; }
.consultant-dashboard [id] { scroll-margin-top: 68px; }
.consultant-dashboard .page-heading { align-items: center; }
.consultant-dashboard .dashboard-toolbar { display: flex; align-items: center; gap: 10px; }
.consultant-dashboard .dashboard-toolbar label { color: var(--muted); font-size: 11px; font-weight: 700; }
.consultant-dashboard .dashboard-toolbar select { margin-left: 7px; }
.consultant-dashboard .admin-panel { border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(20, 35, 52, .04); }
.consultant-dashboard .metric-grid { margin-bottom: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.consultant-dashboard .metric { min-height: 118px; }
.consultant-dashboard .dashboard-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.consultant-dashboard .dashboard-profile-item { min-width: 0; }
.consultant-dashboard .dashboard-profile-item span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.consultant-dashboard .dashboard-profile-item strong { display: block; overflow-wrap: anywhere; font-size: 12px; line-height: 1.55; }
.consultant-dashboard .dashboard-profile-long { grid-column: 1 / -1; }
.consultant-dashboard .dashboard-profile-richtext { color: var(--ink); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.consultant-dashboard .dashboard-profile-richtext > :first-child { margin-top: 0; }
.consultant-dashboard .dashboard-profile-richtext > :last-child { margin-bottom: 0; }
.consultant-dashboard .dashboard-map { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.consultant-dashboard .dashboard-map-heading { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.consultant-dashboard .dashboard-map-heading h3 { margin: 0; font: 800 14px 'Manrope', sans-serif; }
.consultant-dashboard .dashboard-map-heading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.consultant-dashboard .dashboard-map-heading .button { flex: 0 0 auto; }
.consultant-dashboard .dashboard-map-frame { min-height: 280px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-chat); }
.consultant-dashboard .dashboard-map-frame iframe { width: 100%; height: 320px; display: block; border: 0; }
.consultant-dashboard .dashboard-map-frame .dashboard-empty { min-height: 280px; margin: 0; display: grid; place-items: center; }
.consultant-dashboard .dashboard-chart { min-height: 190px; padding: 10px 0 0; display: flex; align-items: stretch; gap: 3px; overflow-x: auto; }
.consultant-dashboard .dashboard-chart-column { min-width: 3px; flex: 1 0 3px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
.consultant-dashboard .dashboard-chart-bars { width: 100%; height: 140px; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.consultant-dashboard .dashboard-chart-bar { width: min(9px, 45%); border-radius: 3px 3px 0 0; }
.consultant-dashboard .dashboard-chart-bar.is-visitor { background: #79b7a0; }
.consultant-dashboard .dashboard-chart-bar.is-consultant { background: #315d4f; }
.consultant-dashboard .dashboard-chart-column time { min-height: 14px; color: var(--muted); font-size: 8px; }
.consultant-dashboard .dashboard-legend { display: flex; gap: 16px; margin-top: 10px; color: var(--muted); font-size: 10px; }
.consultant-dashboard .dashboard-legend span::before { width: 8px; height: 8px; margin-right: 6px; display: inline-block; border-radius: 2px; background: #79b7a0; content: ""; }
.consultant-dashboard .dashboard-legend span:last-child::before { background: #315d4f; }
.consultant-dashboard .dashboard-table-wrap { overflow-x: auto; }
.consultant-dashboard .dashboard-table { width: 100%; border-collapse: collapse; text-align: left; }
.consultant-dashboard .dashboard-table th, .consultant-dashboard .dashboard-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 11px; }
.consultant-dashboard .dashboard-table th { color: var(--muted); font-size: 10px; }
.consultant-dashboard .dashboard-table td strong { display: block; }
.consultant-dashboard .dashboard-table td small { display: block; margin-top: 4px; color: var(--muted); }
.consultant-dashboard .dashboard-status { display: inline-block; padding: 5px 7px; border-radius: 12px; color: #315d4f; background: #e8f4ee; font-size: 9px; font-weight: 700; }
.consultant-dashboard .dashboard-status.is-closed { color: #6b7470; background: #eff1f0; }
.consultant-dashboard .dashboard-actions { display: flex; align-items: center; gap: 8px; }
.consultant-dashboard .dashboard-actions .button { min-height: 34px; padding: 7px 10px; font-size: 10px; white-space: nowrap; }
.consultant-dashboard .dashboard-empty { padding: 24px; color: var(--muted); text-align: center; font-size: 12px; }
.consultant-dashboard .dashboard-contact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.consultant-dashboard .dashboard-contact { padding: 12px; border: 1px solid var(--line); border-radius: 7px; }
.consultant-dashboard .dashboard-contact strong { display: block; font-size: 11px; }
.consultant-dashboard .dashboard-contact span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.consultant-dashboard .dashboard-inline-error { color: #a33333; font-size: 11px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.span-two { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 8px; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 10px 11px; color: #84918c; font-size: 9px; font-weight: 800; text-transform: uppercase; }
td { padding: 12px 11px; border-top: 1px solid #e8eeeb; color: #34443f; font-size: 11px; vertical-align: middle; }
td strong { display: block; color: var(--ink); font-size: 11px; }
td small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.table-action { padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--green); background: white; font-size: 10px; font-weight: 700; }
.stack-list { display: grid; gap: 10px; }
.consultant-card { padding: 16px; border: 1px solid var(--line); border-radius: 6px; }
.consultant-card-head { display: flex; justify-content: space-between; gap: 12px; }
.consultant-card h3 { margin: 0; font: 800 14px 'Manrope', sans-serif; }
.consultant-card p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.admin-user-edit-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.consultant-mode-grant { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.consultant-mode-grant .field-selection { min-width: 0; margin: 0; padding: 11px; border: 1px solid var(--input-border); border-radius: 5px; }
.consultant-mode-grant .field-selection legend { padding: 0 5px; font-size: 11px; font-weight: 700; }
.admin-password-reset { margin-top: 14px; padding-top: 14px; display: grid; justify-items: start; gap: 10px; border-top: 1px solid var(--line); }
.admin-password-reset-result { width: 100%; display: grid; gap: 8px; }
.admin-password-reset-result[hidden] { display: none; }
.admin-password-reset-value { max-width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-password-reset-value code { padding: 8px 10px; border: 1px solid var(--input-border); border-radius: 5px; color: var(--ink); background: var(--input-bg); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; user-select: all; }
.admin-user-edit-form label { min-width: 0; }
.admin-user-edit-form input, .admin-user-edit-form select, .admin-user-edit-form textarea { font-size: 12px; }
.admin-user-edit-form input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--green); }
.admin-user-checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.admin-user-note { margin: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 10px; }
.admin-user-details { margin-top: 12px; }
.admin-user-details[hidden] { display: none; }
.admin-rich-text-field { min-width: 0; margin: 0; padding: 0; display: grid; gap: 7px; border: 0; }
.admin-rich-text-field legend { padding: 0; font-size: 11px; font-weight: 700; }
.admin-rich-text-editable, .admin-rich-text-source { min-height: 210px; max-height: 42svh; }
.admin-rich-text-footer { padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); }
.admin-rich-text-footer small, .admin-rich-text-count { color: var(--muted); font-size: 10px; }
.admin-rich-text-count { flex: 0 0 auto; }
.admin-rich-text-count.is-over-limit { color: #b13d3d; font-weight: 800; }
.consultant-settings { margin-top: 14px; padding-top: 12px; display: grid; grid-template-columns: minmax(150px, .6fr) 1.4fr auto; align-items: end; gap: 12px; border-top: 1px solid var(--line); }
.check-grid { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 13px; }
.check-grid small { flex: 0 0 100%; color: var(--muted); font-size: 10px; }
.check-grid label { display: flex; align-items: center; gap: 5px; font-weight: 500; }
.check-grid input { width: 14px; height: 14px; accent-color: var(--green); }
.conversation-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr); gap: 16px; }
.conversation-detail { min-height: 200px; max-height: 65vh; padding: 14px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--input-bg); }
.detail-message { padding: 10px 0; border-bottom: 1px solid var(--line); }
.detail-message strong { color: var(--green); font-size: 10px; }
.detail-message p { margin: 5px 0; color: #34443f; font-size: 11px; line-height: 1.6; white-space: pre-wrap; }
.detail-message time { color: #8a9691; font-size: 9px; }
.empty-state { color: var(--muted); font-size: 11px; line-height: 1.6; }
.statistics-updated { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.statistics-metrics { margin-top: 16px; }
.statistics-section + .statistics-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.statistics-section .panel-heading { margin-bottom: 9px; }
.statistics-section .panel-heading h3 { margin: 0; font: 800 15px 'Manrope', sans-serif; }
.statistics-table { min-width: 820px; }
.statistics-table td { vertical-align: top; }
.statistics-table td small { max-width: 320px; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.metric-grid { margin-bottom: 16px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.metric { min-height: 140px; padding: 19px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.metric > span, .metric small { display: block; color: var(--muted); font-size: 11px; }
.metric strong { display: block; margin: 13px 0 4px; font: 800 29px 'Manrope', sans-serif; }
.metric-green { background: #e6f5ed; border-color: #d5eadf; }
.metric-coral { background: #fff0e9; border-color: #f1ddd2; }
.consultant-reporting { margin-top: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-sidebar); }
.reporting-heading { margin-bottom: 18px; }
.reporting-heading h2 { margin: 0; font: 800 18px 'Manrope', sans-serif; }
.reporting-heading p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.reporting-contacts { margin-bottom: 0; background: white; }
.reporting-contacts h3 { margin: 0; font: 800 15px 'Manrope', sans-serif; }
.availability-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 11px; }
.availability-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.consultant-chat-layout { min-height: 430px; display: grid; grid-template-columns: minmax(240px, 31%) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-sidebar); }
.consultant-chat-threads { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--surface-sidebar); }
.consultant-threads-heading { min-height: 62px; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--surface-header); }
.consultant-threads-heading strong, .consultant-threads-heading span { display: block; }
.consultant-threads-heading strong { font: 800 13px 'Manrope', sans-serif; }
.consultant-threads-heading span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.consultant-threads-heading b { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--mint); font-size: 10px; }
.consultant-thread-list { min-height: 0; overflow: auto; }
.consultant-thread { width: 100%; min-height: 72px; padding: 11px 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.consultant-thread:hover, .consultant-thread.is-active { background: var(--surface-hover); }
.consultant-thread-avatar { position: relative; width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: var(--forest); background: var(--mint); font-size: 11px; font-weight: 800; }
.consultant-thread-copy { min-width: 0; }
.consultant-thread-copy strong, .consultant-thread-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.consultant-thread-copy strong { font-size: 12px; }
.consultant-thread-copy span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.consultant-thread-meta { display: grid; justify-items: end; gap: 6px; }
.consultant-thread-meta time { color: #8a9691; font-size: 9px; white-space: nowrap; }
.consultant-thread-meta small { min-width: 18px; padding: 3px 5px; border-radius: 999px; color: white; background: var(--green); font-size: 9px; text-align: center; }
.consultant-thread-meta small.is-status { color: var(--muted); background: #e3ebe7; }
.consultant-shell .consultant-thread-section { min-height: 0; flex: 1; padding: 0; display: flex; flex-direction: column; }
.consultant-shell .consultant-thread-list { min-height: 0; flex: 1; }
.consultant-shell .wa-sidebar.is-collapsed .wa-sidebar-header { min-height: 54px; justify-content: center; padding: 8px; }
.consultant-shell .wa-sidebar.is-collapsed .wa-user-pill,
.consultant-shell .wa-sidebar.is-collapsed .wa-search,
.consultant-shell .wa-sidebar.is-collapsed .consultant-threads-heading,
.consultant-shell .wa-sidebar.is-collapsed .consultant-thread-copy,
.consultant-shell .wa-sidebar.is-collapsed .consultant-thread-meta,
.consultant-shell .wa-sidebar.is-collapsed .consultant-thread-list > .empty-state { display: none; }
.consultant-shell .wa-close-sidebar { flex: 0 0 28px; cursor: pointer; }
.consultant-shell .wa-close-sidebar:hover { border-color: var(--accent-border); background: var(--accent-soft); }
.consultant-shell .wa-sidebar.is-collapsed .wa-close-sidebar { font-size: 21px; }
.consultant-shell .wa-sidebar.is-collapsed .consultant-thread-list { padding: 8px 0; }
.consultant-shell .wa-sidebar.is-collapsed .consultant-thread { min-height: 54px; padding: 8px; display: flex; justify-content: center; border-bottom: 0; }
.consultant-shell .wa-sidebar.is-collapsed .consultant-thread.is-active { box-shadow: inset 3px 0 var(--green); }
.consultant-shell .wa-sidebar.is-collapsed .consultant-thread-avatar { width: 40px; height: 40px; flex: 0 0 40px; }
.whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed .wa-sidebar-header { min-height: 50px; justify-content: center; padding: 8px; }
.whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed .wa-user-pill,
.whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed .wa-search,
.whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed .visitor-experts-section,
.whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed .visitor-fields-section,
.whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed .visitor-thread-section > .wa-section-label,
.whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed .wa-consultant-item > span:not(.wa-consultant-avatar),
.whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed .wa-consultant-item > em { display: none; }
.whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed .visitor-thread-section { min-height: 0; flex: 1; padding: 0; }
.whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed #visitor-chat-threads,
.whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed #visitor-offline-threads { min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 8px 0; overflow: auto; }
.whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed .wa-consultant-item { min-height: 54px; padding: 7px; display: flex; justify-content: center; border: 0; border-bottom: 0; }
.whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed .wa-consultant-item.is-active { box-shadow: inset 3px 0 var(--green); }
.whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed .wa-consultant-avatar { width: 40px; height: 40px; flex: 0 0 40px; }
.consultant-shell .chat-head-left,
.consultant-shell .chat-topic { min-width: 0; }
.consultant-shell .chat-topic > div { min-width: 0; }
.consultant-shell .chat-head-left { flex: 1; }
.consultant-shell .chat-topic { flex: 1; }
.consultant-shell .chat-topic .topic-icon { position: relative; flex: 0 0 38px; }
.consultant-shell .chat-topic strong,
.consultant-shell .chat-topic div > span { overflow-wrap: anywhere; white-space: normal; }
.consultant-shell #consultant-chat-avatar.is-initials { display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.consultant-chat-workspace { min-width: 0; display: flex; flex-direction: column; }
.consultant-chat-heading { min-height: 62px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: white; }
.consultant-chat-heading strong, .consultant-chat-heading span { display: block; }
.consultant-chat-heading strong { font: 800 13px 'Manrope', sans-serif; }
.consultant-chat-heading span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.consultant-chat-messages { min-height: 250px; max-height: 430px; padding: 18px; flex: 1; overflow: auto; background: var(--surface-chat); background-image: radial-gradient(var(--pattern-dot) .8px, transparent .8px); background-size: 22px 22px; }
.consultant-chat-messages .message-row { margin-bottom: 12px; }
.consultant-chat-messages .message-bubble { max-width: 100%; font-size: 12px; }
.account-dialog { width: min(600px, calc(100% - 26px)); max-height: min(90vh, 850px); padding: 0; border: 0; border-radius: 8px; color: var(--ink); background: white; box-shadow: 0 25px 90px rgba(9, 29, 23, .25); }
.visitor-profile-dialog { width: min(420px, calc(100% - 26px)); }
.visitor-profile-dialog .dialog-head > div { min-width: 0; }
.visitor-profile-dialog .dialog-head strong { font: 800 17px 'Manrope', sans-serif; }
.visitor-profile-dialog .dialog-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.visitor-profile-dialog .account-form { padding-bottom: 8px; }
.visitor-profile-dialog .form-note { margin: -8px 0 0; }
.visitor-avatar-form { padding-bottom: 14px; }
.visitor-avatar-preview { background: var(--visitor-accent, #3978c5); }
.visitor-profile-actions { padding: 0 20px 18px; display: grid; gap: 8px; }
.visitor-profile-actions .button { text-decoration: none; }
.account-dialog::backdrop { background: rgba(13, 36, 31, .55); backdrop-filter: blur(3px); }
.dialog-head { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.icon-button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: white; font-size: 20px; }
.dialog-tabs { padding: 0 20px; display: flex; gap: 6px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.dialog-tab { padding: 13px 2px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; }
.dialog-tab.is-active { border-color: var(--green); color: var(--forest); }
.account-form { padding: 20px; display: grid; gap: 13px; overflow: auto; }
.account-form h2 { margin: 0; font: 800 19px 'Manrope', sans-serif; }
.account-form > p { margin: -7px 0 0; color: var(--muted); font-size: 11px; }
.account-form .form-grid { gap: 11px; }
.text-link-button { justify-self: start; padding: 2px 0; border: 0; color: var(--green); background: transparent; text-align: left; font-size: 12px; font-weight: 700; }
.text-link-button:hover { color: var(--forest); text-decoration: underline; }
.muted-inline { color: #82908b; font-weight: 500; }
.toast { min-height: 0; margin: 0 20px; color: #9a4e36; font-size: 11px; }
.toast:not(:empty) { padding-bottom: 15px; }
.consultant-profile-dialog { width: min(520px, calc(100% - 26px)); max-height: min(92svh, 820px); overflow-y: auto; }
.consultant-profile-dialog .dialog-head > div, .chat-settings-dialog .dialog-head > div { min-width: 0; }
.consultant-profile-dialog .dialog-head strong, .chat-settings-dialog .dialog-head strong { font: 800 17px 'Manrope', sans-serif; }
.consultant-profile-dialog .dialog-head p, .chat-settings-dialog .dialog-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.consultant-profile-dialog .account-form { overflow: visible; }
.public-bio-field { min-width: 0; margin: 0; padding: 0; display: grid; gap: 7px; border: 0; }
.public-bio-field legend { padding: 0; font-size: 11px; font-weight: 700; }
.public-bio-editor { min-width: 0; overflow: hidden; border: 1px solid var(--input-border); border-radius: 6px; background: white; }
.public-bio-toolbar { padding: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); background: var(--input-bg); }
.public-bio-toolbar button { min-height: 34px; padding: 6px 9px; border: 1px solid transparent; border-radius: 5px; color: var(--ink); background: transparent; font-size: 11px; white-space: nowrap; }
.public-bio-toolbar button:hover, .public-bio-toolbar button:focus-visible { border-color: var(--line); background: white; }
.public-bio-toolbar-divider { width: 1px; height: 22px; margin: 0 2px; background: var(--line); }
.public-bio-editable { min-height: 170px; max-height: 36svh; padding: 13px; overflow: auto; color: var(--ink); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; outline: 0; }
.public-bio-source { width: 100%; min-height: 170px; max-height: 36svh; padding: 13px; display: block; resize: vertical; border: 0; color: var(--ink); background: white; font: 12px/1.6 Consolas, 'Courier New', monospace; tab-size: 2; }
.public-bio-source[hidden] { display: none; }
.public-bio-editable:focus { box-shadow: inset 0 0 0 2px rgba(57,120,197,.14); }
.public-bio-editable:empty::before { color: #8997a8; content: attr(data-placeholder); pointer-events: none; }
.public-bio-editable p, .public-bio-editable div, .public-bio-editable h3, .public-bio-editable h4, .public-bio-editable blockquote { margin: 0 0 9px; }
.public-bio-editable h3 { font-size: 15px; line-height: 1.4; }
.public-bio-editable h4 { font-size: 13px; line-height: 1.45; }
.public-bio-editable blockquote { padding-left: 11px; border-left: 3px solid var(--accent-border); color: var(--muted); }
.public-bio-editable ul, .public-bio-editable ol { margin: 0 0 9px; padding-left: 22px; }
.public-bio-footer { padding: 8px 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); }
.public-bio-footer .form-note { margin: 0; line-height: 1.45; }
.public-bio-footer > span { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.public-bio-footer > span.is-over-limit { color: #b13d3d; font-weight: 800; }
.consultant-avatar-form { padding: 18px 20px 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 14px; }
.consultant-avatar-preview { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 20px; font-weight: 800; }
.consultant-avatar-controls { min-width: 0; display: grid; gap: 6px; }
.consultant-avatar-controls label { font-size: 11px; font-weight: 700; }
.consultant-avatar-controls input[type="file"] { margin-top: 6px; padding: 6px; font-size: 10px; }
.consultant-avatar-controls small, .consultant-avatar-controls .toast { margin: 0; color: var(--muted); font-size: 10px; }
.consultant-avatar-controls > div { display: flex; align-items: center; gap: 12px; }
.consultant-avatar-controls .button { min-height: 32px; padding: 6px 10px; font-size: 10px; }
.consultant-password-form { border-top: 1px solid var(--line); }
.consultant-password-form h2 { margin-top: 2px; }
.consultant-profile-message, .consultant-password-message { margin: 0; }
.profile-location { min-width: 0; margin: 0; padding: 12px; display: grid; gap: 9px; border: 1px solid var(--input-border); border-radius: 5px; }
.profile-location legend { padding: 0 5px; font-size: 11px; font-weight: 700; }
.profile-location p, .profile-location small { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.profile-location .button { width: 100%; }
.chat-settings-dialog { width: min(420px, calc(100% - 26px)); }
.chat-settings-content { padding: 18px 20px; }
.chat-settings-dialog { max-height: min(92svh, 760px); overflow-y: auto; }
.consultant-chat-settings-form { margin-top: 18px; padding-top: 17px; display: grid; gap: 12px; border-top: 1px solid var(--line); }
.consultant-chat-settings-form h2 { margin: 0; font: 800 15px 'Manrope', sans-serif; }
.consultant-chat-settings-form > p { margin: -7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.consultant-chat-settings-form .toast { margin: 0; }
.consultation-mode-options { margin: 0; padding: 0; display: grid; gap: 8px; border: 0; }
.consultation-mode-options legend { margin-bottom: 7px; font-size: 11px; font-weight: 700; }
.consultation-mode-options label { min-height: 52px; padding: 9px 11px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 6px; }
.consultation-mode-options input { margin: 0; accent-color: var(--green); }
.consultation-mode-options span, .consultation-mode-options strong, .consultation-mode-options small { display: block; }
.consultation-mode-options strong { font-size: 11px; }
.consultation-mode-options small { margin-top: 3px; color: var(--muted); font-size: 10px; }
#consultation-terms-label.is-hidden { display: none; }
.public-consultant-dialog, .terms-consent-dialog { width: min(520px, calc(100% - 26px)); max-height: min(90svh, 760px); overflow-y: auto; }
.public-consultant-content, .consultation-terms-content { padding: 18px 20px; display: grid; gap: 14px; }
.public-consultant-identity { display: flex; align-items: center; gap: 12px; }
.public-consultant-avatar { width: 64px; height: 64px; flex: 0 0 64px; display: grid; place-items: center; border-radius: 50%; color: var(--forest); background: var(--mint); font-size: 18px; font-weight: 800; }
.public-consultant-identity strong { font-size: 13px; }
.public-consultant-bio { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.public-consultant-bio > :first-child { margin-top: 0; }
.public-consultant-bio > :last-child { margin-bottom: 0; }
.public-consultant-bio p, .public-consultant-bio div, .public-consultant-bio h3, .public-consultant-bio h4, .public-consultant-bio blockquote { margin: 0 0 12px; }
.public-consultant-bio h3 { font: 800 15px/1.45 'Manrope', sans-serif; }
.public-consultant-bio h4 { font: 800 13px/1.5 'Manrope', sans-serif; }
.public-consultant-bio ul, .public-consultant-bio ol { margin: 0 0 12px; padding-left: 22px; }
.public-consultant-bio li + li { margin-top: 5px; }
.public-consultant-bio blockquote { padding: 10px 12px; border-left: 3px solid var(--accent-border); border-radius: 0 5px 5px 0; color: var(--muted); background: var(--input-bg); }
.public-consultant-fee { margin: 0; color: var(--muted); font-size: 11px; }
.terms-consent-dialog .dialog-head strong { font: 800 17px 'Manrope', sans-serif; }
.terms-consent-dialog .dialog-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.consultation-terms-copy { max-height: 42svh; padding: 13px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--input-bg); color: var(--ink); font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.consultation-terms-copy > :first-child { margin-top: 0; }
.consultation-terms-copy > :last-child { margin-bottom: 0; }
.consultation-terms-copy h3, .consultation-terms-copy h4, .consultation-terms-copy p, .consultation-terms-copy blockquote { margin: 0 0 9px; }
.consultation-terms-copy h3 { font-size: 14px; }
.consultation-terms-copy h4 { font-size: 12px; }
.consultation-terms-copy ul, .consultation-terms-copy ol { margin: 0 0 9px; padding-left: 22px; }
.terms-consent-check { display: flex; align-items: flex-start; gap: 9px; color: var(--ink); font-size: 11px; line-height: 1.5; }
.terms-consent-check input { width: 16px; height: 16px; flex: 0 0 16px; margin: 1px 0 0; accent-color: var(--green); }
.consultation-terms-content .form-note { margin: -8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.settings-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.settings-toggle span { min-width: 0; }
.settings-toggle strong, .settings-toggle small { display: block; }
.settings-toggle strong { font-size: 13px; }
.settings-toggle small { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 400; }
.settings-toggle input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; accent-color: var(--green); }
.toast-global { position: fixed; right: 18px; bottom: 18px; z-index: 20; max-width: min(380px, calc(100vw - 36px)); padding: 0; border-radius: 6px; color: white; background: var(--forest); font-size: 12px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s ease; }
.toast-global.is-visible { padding: 12px 16px; opacity: 1; transform: translateY(0); }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes typing-pulse { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

@media (max-width: 880px) {
    .app-shell { padding: 0 18px; }
    .landing-content { width: 100%; }
    .landing-welcome { min-height: 210px; }
    .conversation-layout { grid-template-columns: 1fr; }
    .conversation-detail { max-height: 50vh; }
    .consultant-chat-layout { grid-template-columns: minmax(200px, 34%) minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .landing-expert-actions { align-items: flex-start; flex-direction: column; }
    .consultant-avatar-form { padding: 16px 16px 0; grid-template-columns: 58px minmax(0, 1fr); gap: 11px; }
    .consultant-avatar-preview { width: 58px; height: 58px; }
    .public-consultant-content, .consultation-terms-content { padding: 16px; }
}
@media (max-width: 680px) {
    .app-shell { padding: 0 12px; }
    .topbar { min-height: 64px; }
    .secure-label, .user-label { display: none; }
    .topbar-actions { gap: 7px; }
    .topbar { min-height: 58px; }
    .bottom-nav { min-height: 62px; padding: 10px 0; }
    .bottom-nav { gap: 8px 14px; }
    .bottom-nav-label, .bottom-nav-user { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .scroll-controls { right: 76px; bottom: 84px; opacity: .62; }
    .scroll-button { width: 34px; height: 34px; }
    .whatsapp-shell { padding: 8px 0; }
    .wa-app { height: auto; min-height: 0; border-radius: 12px; }
    .wa-sidebar { position: absolute; top: 0; left: 0; bottom: 0; z-index: 5; width: 86%; max-width: 320px; box-shadow: 12px 0 24px rgba(15,29,26,.08); }
    .wa-sidebar.is-collapsed { width: 0; opacity: 0; }
    .consultant-shell .wa-sidebar.is-collapsed { position: relative; top: auto; left: auto; bottom: auto; width: 68px; max-width: 68px; flex: 0 0 68px; opacity: 1; box-shadow: none; }
    .whatsapp-shell:not(.consultant-shell) .wa-sidebar.is-collapsed { position: relative; top: auto; left: auto; bottom: auto; width: 68px; max-width: 68px; flex: 0 0 68px; opacity: 1; box-shadow: none; }
    .consultant-shell .wa-sidebar.is-collapsed .wa-sidebar-header { min-height: 50px; }
    .visitor-flow { min-height: 0; padding: 8px 0; }
    .landing-flow { padding: 14px 0 24px; }
    .landing-welcome { min-height: 0; padding: 23px 18px; align-items: flex-start; flex-direction: column; gap: 19px; }
    .landing-welcome h1 { font-size: 28px; }
    .landing-welcome-copy > p:last-child { font-size: 13px; }
    .landing-start-button { width: 100%; }
    .landing-experts { margin-top: 25px; }
    .landing-section-heading { align-items: stretch; flex-direction: column; gap: 14px; }
    .landing-section-heading h2 { font-size: 20px; }
    .landing-search { width: 100%; }
    .landing-expert-grid { grid-template-columns: 1fr; gap: 9px; }
    .landing-expert-card { min-height: 0; padding: 14px; }
    .landing-footer { align-items: stretch; flex-direction: column; }
    .landing-footer .button { width: 100%; }
    .google-onboarding { margin: 10px 0; }
    .google-onboarding h1 { font-size: 24px; }
    .onboarding-screen { padding: 24px 20px; }
    .onboarding-heading h1 { font-size: 23px; }
    .visitor-form { margin-top: 20px; gap: 14px; }
    .chat-topline { min-height: 62px; padding: 0 13px; }
    .chat-top-actions { gap: 7px; }
    .chat-visitor-name { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .message-list { min-height: 0; max-height: none; padding: 18px 11px; }
    .welcome-message { margin-top: 8vh; }
    .welcome-message h2 { font-size: 19px; }
    .message-bubble { max-width: 100%; padding: 10px 12px; font-size: 12px; line-height: 1.6; }
    .recommendation-list { margin-left: 0; grid-template-columns: 1fr; }
    .recommendation-title { margin-left: 0; }
    .composer { padding: 10px 12px calc(48px + env(safe-area-inset-bottom, 0px)); }
    .composer-bottom > span { max-width: 75%; }
    .app-footer { min-height: 42px; font-size: 9px; }
    .app-footer span:last-child { text-align: right; }
    .dashboard-page { padding: 24px 0; }
    .page-heading { align-items: flex-start; }
    .page-heading h1 { font-size: 23px; }
    .role-chip { white-space: nowrap; }
    .admin-panel { padding: 14px; }
    .consultant-dashboard .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .consultant-dashboard .dashboard-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .consultant-dashboard .dashboard-contact-list { grid-template-columns: 1fr; }
    .consultant-dashboard .page-heading { flex-direction: column; }
    .consultant-dashboard .dashboard-toolbar { width: 100%; justify-content: space-between; }
    .consultant-dashboard-nav { margin: 0 -12px; padding: 8px 12px; }
    .consultant-dashboard-nav a { min-height: 40px; padding: 8px 10px; }
    .consultant-dashboard .dashboard-map-heading { align-items: flex-start; flex-direction: column; }
    .consultant-dashboard .dashboard-map-heading .button { width: 100%; }
    .consultant-dashboard .dashboard-map-frame, .consultant-dashboard .dashboard-map-frame .dashboard-empty { min-height: 240px; }
    .consultant-dashboard .dashboard-map-frame iframe { height: 260px; }
    .admin-list-tools { grid-template-columns: minmax(0, 1fr) auto; }
    .admin-list-search { grid-column: 1 / -1; max-width: none; }
    .admin-list-total { padding-bottom: 9px; text-align: right; }
    .admin-pagination { gap: 8px; }
    .admin-pagination .button { padding: 8px 10px; font-size: 10px; }
    .tab-button { padding: 11px 9px; font-size: 10px; }
    .form-grid { grid-template-columns: 1fr; }
    .span-two { grid-column: auto; }
    .metric-grid { grid-template-columns: 1fr; gap: 8px; }
    .metric { min-height: 100px; padding: 14px; }
    .metric strong { margin: 7px 0 2px; font-size: 24px; }
    .consultant-settings { grid-template-columns: 1fr; }
    .consultant-inbox-panel .panel-heading { align-items: flex-start; flex-direction: column; }
    .consultant-reporting { padding: 14px; }
    .consultant-chat-layout { grid-template-columns: 1fr; }
    .consultant-chat-threads { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }
    .consultant-thread-list { max-height: 158px; }
    .consultant-chat-messages { min-height: 180px; max-height: 42vh; }
    .account-form { padding: 16px; }
    .info-page { padding: 34px 4px; }
    .info-lead { font-size: 13px; }
    .bottom-nav-link { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (min-width: 681px) and (max-height: 780px) {
    .visitor-flow { padding-top: 16px; padding-bottom: 16px; }
    .message-list { padding-top: 20px; padding-bottom: 20px; }
}