:root {
  --navy: #063d31;
  --navy-2: #0f503e;
  --ink: #163c32;
  --muted: #53655b;
  --line: #e1e9e3;
  --paper: #ffffff;
  --canvas: #fcfdfb;
  --mint: #16a36b;
  --mint-deep: #0d7e55;
  --indigo: #3d8f62;
  --amber: #c59248;
  --rose: #d96776;
  --shadow: 0 12px 38px rgba(14, 30, 62, .08);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 16px; background: var(--canvas); }
body { margin: 0; color: var(--ink); font-family: "DM Sans", system-ui, sans-serif; background: var(--canvas); min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(22,163,107,.32); outline-offset: 2px; }

.auth-gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 18% 16%, rgba(117,219,165,.17), transparent 30%), linear-gradient(145deg, #052c24, #0b4b3b); }
.auth-gate[hidden] { display: none; }
.auth-card { width: min(430px, 100%); padding: 30px; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: #fff; color: #132039; box-shadow: 0 24px 70px rgba(0,0,0,.3); }
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 32px; }
.auth-brand-avatar { position: relative; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #063d31; background: #75dba5; font: 800 1.15rem "Manrope", sans-serif; }
.auth-brand-avatar > span { display: grid; place-items: center; width: 100%; height: 100%; }
.auth-brand-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand strong { font: 800 1rem "Manrope", sans-serif; }
.auth-brand small { margin-top: 1px; color: #667085; font-size: .72rem; }
.auth-kicker { margin-bottom: 7px; color: #16835c; font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.auth-card h1 { margin-bottom: 12px; font: 800 1.7rem/1.2 "Manrope", sans-serif; letter-spacing: -.035em; }
.auth-copy { margin-bottom: 22px; color: #596579; font-size: .9rem; line-height: 1.55; }
.auth-primary { width: 100%; min-height: 46px; border: 0; border-radius: 12px; color: #fff; background: #063d31; font-weight: 800; cursor: pointer; }
.auth-primary:hover { background: #0b513e; }
.auth-primary:disabled { opacity: .55; cursor: wait; }
.email-form, .pin-form { display: grid; gap: 10px; }
.email-form[hidden], .pin-form[hidden] { display: none; }
.email-form label, .pin-form label { font-size: .76rem; font-weight: 800; }
.email-form input { width: 100%; height: 48px; padding: 0 13px; border: 1px solid #cfd9d2; border-radius: 12px; outline: 0; color: #132039; background: #fff; font-size: .9rem; }
.email-form input:focus, .pin-form input:focus { border-color: #4a9271; box-shadow: 0 0 0 3px rgba(22,131,92,.12); }
.auth-email-summary { margin-bottom: 4px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; border: 1px solid #dce5df; border-radius: 11px; background: #f5f9f6; }
.auth-email-summary span, .auth-email-summary strong { display: block; min-width: 0; }
.auth-email-summary span { color: #667085; font-size: .68rem; }
.auth-email-summary strong { overflow-wrap: anywhere; color: #244437; font-size: .78rem; }
.auth-email-summary .auth-link { grid-column: 2; grid-row: 1 / span 2; padding: 4px; }
.pin-form[hidden] { display: none; }
.pin-form input { width: 100%; height: 54px; border: 1px solid #cfd9d2; border-radius: 12px; outline: 0; color: #132039; background: #fff; text-align: center; font: 800 1.5rem "Manrope", sans-serif; letter-spacing: .35em; }
.auth-link { border: 0; padding: 7px; color: #376653; background: transparent; font-size: .78rem; font-weight: 700; cursor: pointer; }
.auth-link:disabled { color: #9ca6a0; cursor: default; }
.auth-status { min-height: 20px; margin: 13px 0 0; color: #376653; font-size: .78rem; line-height: 1.4; text-align: center; }
.auth-status.error { color: #b3364a; }
.auth-note { display: block; margin-top: 16px; color: #7c8796; font-size: .7rem; text-align: center; }

.app-shell { --sidebar-width: 250px; min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); transition: grid-template-columns .22s ease; }
.sidebar { position: sticky; top: 0; width: var(--sidebar-width); height: 100vh; padding: 28px 20px 20px; overflow: visible; background: var(--navy); color: #fff; display: flex; flex-direction: column; z-index: 10; transition: width .22s ease, padding .22s ease; }
.sidebar-toggle { position: fixed; top: 24px; left: 232px; z-index: 70; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(6,61,49,.18); border-radius: 50%; color: var(--navy); background: var(--paper); box-shadow: 0 7px 20px rgba(3,28,22,.18); cursor: pointer; transition: left .22s ease, transform .16s ease, background .16s ease; }
.sidebar-toggle:hover, .sidebar-toggle:focus-visible { background: #edf8f1; transform: scale(1.06); }
.sidebar-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; }
.app-shell.sidebar-collapsed { --sidebar-width: 78px; }
.app-shell.sidebar-collapsed .sidebar { padding-right: 10px; padding-left: 10px; }
.app-shell.sidebar-collapsed .sidebar-toggle { left: 60px; }
.app-shell.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 30px; }
.brand-mark { position: relative; width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: var(--mint); color: var(--navy); font: 800 1.2rem "Manrope", sans-serif; box-shadow: 0 8px 20px rgba(110, 231, 198, .2); }
.brand-mark > span { display: grid; place-items: center; width: 100%; height: 100%; }
.brand-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brand-mark img[hidden], .brand-mark > span[hidden] { display: none; }
.brand strong, .brand span { display: block; }
.brand strong { font: 800 1.02rem "Manrope", sans-serif; letter-spacing: .01em; }
.brand span { margin-top: 2px; color: #a9d7b6; font-size: .8rem; }
.side-nav { display: grid; gap: 8px; }
.nav-item { position: relative; width: 100%; border: 0; border-radius: 13px; padding: 13px 14px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; background: transparent; color: #b7d0c0; text-align: left; cursor: pointer; transition: .2s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active { color: #fff; background: rgba(110, 231, 198, .13); }
.nav-icon { width: 22px; height: 22px; display: grid; place-items: center; color: var(--mint); }
.nav-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count { min-width: 25px; padding: 3px 7px; border-radius: 999px; background: var(--mint); color: var(--navy); text-align: center; font-size: .72rem; font-weight: 700; }
.app-shell.sidebar-collapsed .brand { justify-content: center; padding-right: 0; padding-left: 0; }
.app-shell.sidebar-collapsed .brand > div:last-child, .app-shell.sidebar-collapsed .nav-label { display: none; }
.app-shell.sidebar-collapsed .nav-item { min-height: 50px; padding: 13px; grid-template-columns: 1fr; justify-items: center; }
.app-shell.sidebar-collapsed .nav-count { position: absolute; top: 4px; right: 3px; min-width: 18px; padding: 1px 4px; font-size: .58rem; }
.app-shell.sidebar-collapsed .desktop-account-menu { padding-right: 0; padding-left: 0; display: flex; justify-content: center; }
.app-shell.sidebar-collapsed .account-menu-panel { left: 48px; }
.account-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #285342; color: var(--mint); font-size: .75rem; font-weight: 700; line-height: 1; text-align: center; }
.account-menu-shell { position: relative; }
.desktop-account-menu { margin-top: auto; padding: 14px 8px 4px; border-top: 1px solid rgba(255,255,255,.1); }
.account-menu-trigger { width: 44px; height: 44px; padding: 3px; display: grid; place-items: center; border: 0; border-radius: 50%; color: inherit; background: transparent; cursor: pointer; transition: .18s ease; }
.account-menu-trigger:hover, .account-menu-trigger[aria-expanded="true"], .account-menu-trigger.active { background: rgba(255,255,255,.1); }
.account-menu-panel { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 80; width: 244px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--paper); box-shadow: 0 18px 48px rgba(3,28,22,.28); }
.account-menu-owner { width: 100%; padding: 15px; display: flex; align-items: center; gap: 11px; border: 0; border-bottom: 1px solid var(--line); color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; transition: background .18s ease; }
.account-menu-owner:hover, .account-menu-owner:focus-visible { background: var(--canvas); outline: 0; }
.account-menu-owner > span:last-child, .account-menu-owner strong, .account-menu-owner small { display: block; min-width: 0; }
.account-menu-owner strong { font-size: .84rem; }
.account-menu-owner small { margin-top: 2px; color: var(--muted); font-size: .7rem; }
.account-menu-owner > span:nth-child(2) { flex: 1; overflow: hidden; }
.account-menu-owner strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-owner-chevron { flex: 0 0 auto !important; color: var(--muted); font-size: 1.3rem; line-height: 1; }
.account-menu-item { width: 100%; padding: 12px 15px; display: block; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.account-menu-item:last-child { border-bottom: 0; }
.account-menu-item:hover, .account-menu-item.active { background: #edf6ef; }
.account-menu-item span, .account-menu-item small { display: block; }
.account-menu-item span { font-size: .78rem; font-weight: 800; }
.account-menu-item small { margin-top: 3px; color: var(--muted); font-size: .67rem; line-height: 1.35; }
.account-alert-settings { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 76%, transparent); }
.account-toggle-item { width: 100%; min-height: 54px; padding: 10px 15px; display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.account-toggle-item:last-child { border-bottom: 0; }
.account-toggle-item:hover { background: #edf6ef; }
.account-toggle-item > span:first-child, .account-toggle-item strong, .account-toggle-item small { display: block; min-width: 0; }
.account-toggle-item strong { font-size: .76rem; }
.account-toggle-item small { margin-top: 2px; color: var(--muted); font-size: .64rem; line-height: 1.3; }
.account-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #b9c5bd; transition: background .18s ease; }
.account-switch i { position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.22); transition: transform .18s ease; }
.account-toggle-item[aria-pressed="true"] .account-switch { background: var(--mint); }
.account-toggle-item[aria-pressed="true"] .account-switch i { transform: translateX(14px); }
.account-menu-logout { color: #b13e4f; }
.account-menu-logout:hover { color: #9b3041; background: #fff0f2; }

.main-stage { min-width: 0; padding: 30px 34px 34px; }
.topbar { min-height: 61px; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.eyebrow { margin: 0 0 5px; color: var(--muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font: 800 1.75rem/1.15 "Manrope", sans-serif; letter-spacing: -.03em; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #dce4e1; border-radius: 999px; padding: 8px 12px; background: #fff; color: #366448; font-size: .78rem; font-weight: 700; cursor: pointer; }
.live-pill:hover { border-color: #bfcfc4; background: #f4f8f4; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #16a36b; box-shadow: 0 0 0 4px rgba(32,201,151,.12); }
.live-pill.loading i { background: var(--amber); box-shadow: 0 0 0 4px rgba(197,146,72,.14); animation: pulse 1.1s ease-in-out infinite; }
.live-pill.error { color: #a33a49; border-color: #e9c1c7; }
.live-pill.error i { background: var(--rose); box-shadow: 0 0 0 4px rgba(220,92,113,.12); }
.spinning { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }
.theme-toggle { min-height: 36px; padding: 7px 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: .75rem; font-weight: 700; cursor: pointer; }
.theme-toggle:hover { background: var(--pale, #eff7f2); }
.theme-icon { font-size: 1rem; line-height: 1; }
.icon-button { border: 0; background: transparent; min-width: 36px; height: 36px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; }
.icon-button:hover { background: rgba(19,32,57,.06); }
.conversation-refresh-button:disabled { cursor: wait; opacity: .72; }
.conversation-refresh-button .button-loading-spinner { width: 16px; height: 16px; }
.conversation-refresh-icon { display: inline-grid; place-items: center; font-size: 1.1rem; line-height: 1; }
.notification-button { position: relative; background: #fff; border: 1px solid var(--line); font-size: 1.15rem; }
.notification-button span { position: absolute; right: -5px; top: -6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--rose); color: #fff; font-size: .65rem; font-weight: 700; }

.view { display: none; }
.view.active { display: block; }

.reminders-heading-row { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.reminders-heading-row .eyebrow { margin-bottom: 6px; }
.reminders-heading-row h2 { margin: 0 0 5px; font: 800 1.4rem "Manrope", sans-serif; }
.reminders-heading-row p:not(.eyebrow) { max-width: 720px; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.reminders-summary { margin-bottom: 14px; padding: 18px 20px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 13px; align-items: center; border: 1px solid #b7ddc5; border-radius: 18px; background: #edf8f1; }
.reminders-summary.unavailable { border-color: #e7c789; background: #fff7e8; }
.reminders-summary-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #087253; background: #d8f2e2; font-size: 1.3rem; font-weight: 800; }
.reminders-summary strong, .reminders-summary span { display: block; }
.reminders-summary strong { margin-bottom: 3px; font-size: .92rem; }
.reminders-summary span, .reminders-summary small { color: var(--muted); font-size: .73rem; line-height: 1.45; }
.reminders-summary small { white-space: nowrap; }
.reminder-list { display: grid; gap: 11px; }
.reminder-table-list { gap: 14px; }
.reminder-table-section { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 7px 22px rgba(18,52,35,.03); }
.reminder-table-heading { min-height: 58px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); background: #fbfdfb; }
.reminder-table-heading h3 { margin: 0 0 2px; font: 800 .9rem "Manrope", sans-serif; }
.reminder-table-heading p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.reminder-table-heading > span { flex: 0 0 auto; min-width: 28px; height: 28px; padding: 0 8px; display: grid; place-items: center; border-radius: 999px; color: #087253; background: #e2f5e9; font-size: .7rem; font-weight: 800; }
.reminder-table-scroll { overflow-x: auto; }
.reminder-table { width: 100%; min-width: 700px; border-collapse: collapse; table-layout: fixed; }
.reminder-table th { padding: 9px 12px; color: var(--muted); background: var(--canvas); border-bottom: 1px solid var(--line); text-align: left; font-size: .62rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.reminder-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .72rem; line-height: 1.42; vertical-align: middle; overflow-wrap: anywhere; }
.reminder-table tbody tr:last-child td { border-bottom: 0; }
.reminder-table tbody tr:hover td { background: #fbfdfb; }
.reminder-table th:first-child, .reminder-table td:first-child { width: 31%; }
.reminder-table strong, .reminder-table small { display: block; }
.reminder-table td > strong { font-size: .75rem; }
.reminder-table td > small { margin-top: 3px; color: var(--muted); font-size: .65rem; line-height: 1.4; }
.reminder-table-empty td { padding: 18px 12px; color: var(--muted); text-align: center; font-style: italic; }
.reminder-pagination { min-height: 48px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); background: #fbfdfb; }
.reminder-pagination > span { color: var(--muted); font-size: .66rem; }
.reminder-pagination > div { display: flex; align-items: center; gap: 8px; }
.reminder-pagination strong { min-width: 96px; color: var(--muted); text-align: center; font-size: .66rem; }
.reminder-pagination button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--paper); font-size: .66rem; font-weight: 750; cursor: pointer; }
.reminder-pagination button:hover:not(:disabled) { border-color: #8db49b; background: #edf8f1; }
.reminder-pagination button:disabled { opacity: .42; cursor: default; }
.reminder-card { padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 8px 24px rgba(18,52,35,.035); }
.reminder-card-heading { display: flex; align-items: flex-start; gap: 12px; }
.reminder-card-icon { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #087253; background: #e2f5e9; font-weight: 800; }
.reminder-card-copy strong { display: block; margin: 1px 0 5px; font-size: .9rem; }
.reminder-card-copy p { max-width: 760px; margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.reminder-status { align-self: start; padding: 6px 10px; border: 1px solid #b9ddc5; border-radius: 999px; color: #13724e; background: #edf8f1; font-size: .68rem; font-weight: 800; }
.reminder-status.paused { color: #8d6019; border-color: #ead09a; background: #fff6e5; }
.reminder-status.resolved { color: #176d4b; border-color: #b9ddc5; background: #edf8f1; }
.reminder-status.ignored { color: #68756d; border-color: #d7ded9; background: #f4f6f4; }
.reminder-card-details { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.reminder-detail { padding: 11px 12px; border-radius: 12px; background: var(--canvas); }
.reminder-detail span, .reminder-detail strong { display: block; }
.reminder-detail span { margin-bottom: 4px; color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; }
.reminder-detail strong { font-size: .73rem; line-height: 1.4; overflow-wrap: anywhere; }
.reminders-empty { padding: 48px 24px; border: 1px dashed var(--line); border-radius: 18px; background: var(--paper); text-align: center; }
.reminders-empty > span { width: 48px; height: 48px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 15px; color: #087253; background: #e2f5e9; font-size: 1.45rem; }
.reminders-empty strong { display: block; margin-bottom: 6px; font-size: .95rem; }
.reminders-empty p { max-width: 520px; margin: 0 auto; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.reminders-privacy-note { margin: 14px 2px 0; color: var(--muted); font-size: .68rem; }
.email-heading-row { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.email-heading-row .eyebrow { margin-bottom: 6px; }
.email-heading-row h2 { display: none !important; }
.email-heading-row p:not(.eyebrow) { max-width: 720px; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.email-heading-actions { display: flex; align-items: center; gap: 9px; }
.gmail-compose-button { min-height: 42px; padding: 9px 16px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 14px; color: #17342a; background: #c2e7ff; box-shadow: 0 1px 2px rgba(30,60,50,.12); font: 750 .75rem "DM Sans", sans-serif; cursor: pointer; }
.gmail-compose-button:hover { background: #b3ddfa; box-shadow: 0 2px 5px rgba(30,60,50,.16); }
.gmail-compose-button span { font-size: 1rem; }
.email-summary { margin-bottom: 14px; padding: 16px 18px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 13px; align-items: center; border: 1px solid #c9ded1; border-radius: 16px; background: var(--paper); }
.email-summary.unavailable { border-color: #e7c789; background: #fff7e8; }
.email-summary-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: #d93025; font: 800 .9rem "Manrope", sans-serif; }
.email-summary strong, .email-summary span { display: block; }
.email-summary strong { margin-bottom: 2px; font-size: .9rem; }
.email-summary span, .email-summary small { color: var(--muted); font-size: .72rem; }
.email-summary small { white-space: nowrap; }
.email-toolbar { min-height: 48px; padding: 5px 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; background: #fbfdfb; }
.email-folder-tabs { display: flex; align-items: center; gap: 3px; }
.email-folder-tab { min-height: 36px; padding: 7px 13px; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: .75rem; font-weight: 750; cursor: pointer; }
.email-folder-tab:hover { color: var(--ink); background: var(--canvas); }
.email-folder-tab.active { color: #0b57d0; background: #eaf1fb; }
.email-folder-tab.loading::after { width: 11px; height: 11px; content: ""; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: .65; animation: spin .7s linear infinite; }
.email-folder-tab b { min-width: 20px; padding: 2px 6px; border-radius: 999px; color: inherit; background: rgba(11,87,208,.1); font-size: .62rem; }
.email-read-legend { padding-right: 8px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .67rem; }
.email-read-legend[hidden] { display: none; }
.email-read-legend i { width: 8px; height: 8px; border-radius: 50%; background: #0b57d0; }
.email-toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.email-read-filters { padding: 8px 10px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-bottom: 0; background: var(--paper); }
.email-read-filter { min-height: 32px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--paper); font: 750 .69rem "DM Sans", sans-serif; cursor: pointer; }
.email-read-filter:hover { color: var(--ink); background: var(--canvas); }
.email-read-filter.active { color: #0b57d0; border-color: #a9c7ef; background: #eaf1fb; }
.email-list-shell { overflow: hidden; min-height: 260px; border: 1px solid var(--line); border-radius: 0 0 16px 16px; background: var(--paper); }
.email-list-status { padding: 52px 24px; color: var(--muted); text-align: center; font-size: .78rem; }
.email-list { display: flex; flex-direction: column; }
.email-pagination { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); }
.email-pagination[hidden] { display: none; }
.email-pagination > span { min-width: 94px; padding-right: 6px; font-size: .69rem; text-align: right; white-space: nowrap; }
.email-pagination button { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; }
.email-pagination button:hover:not(:disabled) { color: var(--ink); background: var(--canvas); }
.email-pagination button:focus-visible { outline: 2px solid #0b57d0; outline-offset: 1px; }
.email-pagination button:disabled { opacity: .35; cursor: default; }
.email-pagination svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.email-row { position: relative; width: 100%; min-width: 0; min-height: 64px; display: block; flex: 0 0 auto; overflow: hidden; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: var(--paper); box-sizing: border-box; }
.email-row-toggle { width: 100%; min-height: 64px; padding: 0; display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; align-items: stretch; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; box-sizing: border-box; }
button.email-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; align-items: stretch; text-align: left; cursor: pointer; }
.email-row:last-child { border-bottom: 0; }
.email-row-toggle:hover { box-shadow: inset 0 0 0 999px rgba(10,70,48,.035); }
.email-row-actions { position: absolute; top: 50%; right: 9px; display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--paper); box-shadow: 0 2px 10px rgba(24,58,45,.13); opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity .15s ease; }
.email-row:hover .email-row-actions, .email-row:focus-within .email-row-actions { opacity: 1; pointer-events: auto; }
.email-row-actions button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: .95rem; cursor: pointer; }
.email-row-actions button:hover { color: var(--ink); background: var(--canvas); }
.email-delete-icon { width: 18px; height: 18px; display: block; fill: currentColor; }
.email-row-actions button.danger:hover, .email-thread-title-actions button.danger:hover { color: #b3261e; background: #fce8e6; }
.email-row-actions button:disabled, .email-thread-title-actions button:disabled { opacity: .45; cursor: wait; }
.email-row.unread { color: var(--ink); background: #f4f8ff; }
.email-row-main { min-width: 0; padding: 13px 14px; display: flex; flex-direction: column; justify-content: center; }
.email-row-party { min-width: 0; padding: 13px 8px 13px 16px; display: flex; align-items: center; gap: 9px; }
.email-unread-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.email-row.unread .email-unread-dot { background: #0b57d0; }
.email-row-party strong, .email-row-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; font-weight: 500; }
.email-row.unread .email-row-party strong, .email-row.unread .email-row-main strong, .email-row.unread .email-row-date { font-weight: 800; }
.email-row-main span { margin-top: 2px; display: block; overflow: hidden; color: var(--muted); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.email-row-date { padding: 13px 16px 13px 8px; display: flex; align-items: center; color: var(--muted); font-size: .66rem; white-space: nowrap; }
.email-attachment-mark { margin-left: 5px; color: var(--muted); }
.email-mailbox-screen[hidden], .email-thread-screen[hidden] { display: none; }
.email-thread-screen { min-height: 480px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper); }
.email-thread-toolbar { min-height: 52px; padding: 7px 14px; display: flex; align-items: center; border-bottom: 1px solid var(--line); background: #fbfdfb; }
.email-thread-toolbar > span { color: var(--muted); font-size: .7rem; font-weight: 700; }
.email-back-button { min-height: 38px; padding: 7px 11px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; color: var(--ink); background: transparent; font: 700 .76rem "DM Sans", sans-serif; cursor: pointer; }
.email-back-button:hover { background: var(--canvas); }
.email-back-button span { font-size: 1.1rem; line-height: 1; }
.email-thread-heading { padding: 21px 24px 16px 56px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.email-thread-title-line { min-width: 0; display: flex; align-items: center; gap: 10px; }
.email-thread-heading h2 { margin: 0; font: 800 1.25rem/1.35 "Manrope", sans-serif; }
.email-thread-folder { flex: 0 0 auto; padding: 3px 7px; border-radius: 5px; color: #5f6368; background: #e8eaed; font-size: .65rem; line-height: 1; }
.email-thread-count { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; color: var(--muted); background: var(--canvas); font-size: .67rem; font-weight: 700; }
.email-thread-title-actions { flex: 0 0 auto; display: flex; gap: 4px; }
.email-thread-title-actions button, .email-message-meta button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #4f5b55; background: transparent; font-size: 1rem; cursor: pointer; }
.email-thread-title-actions button:hover, .email-message-meta button:hover { background: var(--canvas); }
.email-calendar-card { position: relative; margin: 0 0 10px 49px; padding: 14px 16px 13px; overflow: hidden; border-radius: 10px; color: #263238; background: #eef3fb; }
.email-calendar-kicker { margin-bottom: 5px; color: #4c5b68; font-size: .62rem; font-weight: 800; letter-spacing: .03em; }
.email-calendar-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.email-calendar-title strong { display: block; font: 750 .9rem/1.35 "Manrope", sans-serif; }
.email-calendar-title p { max-width: 720px; margin: 4px 0 0; color: #53616e; font-size: .68rem; line-height: 1.45; }
.email-calendar-title > span { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; background: #dfe8f6; font-size: 1.35rem; }
.email-calendar-facts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.email-calendar-facts span { display: inline-flex; align-items: center; gap: 7px; color: #4f5d68; font-size: .66rem; }
.email-calendar-facts i { color: #617589; font-style: normal; }
.email-calendar-facts b { font-weight: 650; }
.email-calendar-buttons { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 8px; }
.email-calendar-buttons a { min-height: 32px; padding: 8px 13px; display: inline-flex; align-items: center; border-radius: 999px; color: #fff; background: #0b67a3; font-size: .68rem; font-weight: 800; text-decoration: none; }
.email-calendar-buttons a.secondary { color: #23536d; background: #d9ebf7; }
.email-calendar-status { position: absolute; right: 15px; bottom: 15px; color: #39714f; font-size: .64rem; font-weight: 800; }
.email-calendar-source { margin: 0 0 13px 49px; color: var(--muted); font-size: .62rem; }
.email-thread-status { padding: 56px 24px; color: var(--muted); text-align: center; font-size: .78rem; }
.email-thread-list { padding: 0 24px 12px; display: grid; gap: 0; }
.email-thread-message { padding: 16px 18px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--paper); }
.email-thread-message:first-child { border-top: 0; }
.email-thread-message.latest { box-shadow: none; background: var(--paper); }
.email-thread-message header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.email-thread-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #16835c; font: 800 .78rem "Manrope", sans-serif; }
.email-thread-message header div { min-width: 0; }
.email-thread-message header strong, .email-thread-message header span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-thread-message header strong { font-size: .8rem; }
.email-thread-message header strong small { margin-left: 4px; color: var(--muted); font: 500 .68rem "DM Sans", sans-serif; }
.email-thread-message header div span, .email-thread-message time { color: var(--muted); font-size: .67rem; }
.email-thread-message header div span i { font-style: normal; }
.email-thread-message time { white-space: nowrap; }
.email-message-meta { display: flex; align-items: center; gap: 5px; }
.email-thread-body { padding: 17px 3px 4px 49px; color: var(--ink); font-size: .78rem; line-height: 1.68; overflow-wrap: anywhere; white-space: pre-wrap; }
.email-html-frame { width: calc(100% - 49px); height: 620px; margin: 14px 0 2px 49px; display: block; border: 0; background: #fff; }
.email-thread-attachments { padding: 13px 3px 2px 49px; display: flex; flex-wrap: wrap; gap: 7px; }
.email-thread-attachments span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--canvas); font-size: .68rem; }
.email-thread-actions { padding: 12px 24px 22px; display: flex; gap: 9px; }
.email-thread-actions[hidden] { display: none; }
.email-thread-actions .outline-button { min-width: 112px; gap: 7px; }
.email-compose-dialog { width: min(720px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: var(--paper); box-shadow: 0 22px 70px rgba(12,36,28,.3); }
.email-compose-dialog::backdrop { background: rgba(14,34,28,.48); backdrop-filter: blur(3px); }
.email-compose-form { display: flex; max-height: calc(100vh - 28px); flex-direction: column; }
.email-compose-heading { min-height: 52px; padding: 10px 12px 10px 18px; display: flex; align-items: center; justify-content: space-between; color: #1f1f1f; background: #f2f6fc; }
.email-compose-heading strong { font-size: .82rem; }
.email-compose-fields { padding: 0 18px; overflow: auto; }
.email-compose-from, .email-recipient-row { min-height: 47px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .77rem; }
.email-compose-from strong { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.email-recipient-row input, .email-subject-input, .email-body-input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font: 400 .8rem "DM Sans", sans-serif; }
.email-recipient-row input { min-height: 45px; }
.email-recipient-tools { display: flex; gap: 7px; }
.email-recipient-tools button { padding: 4px 1px; border: 0; color: var(--muted); background: transparent; font: 600 .72rem "DM Sans", sans-serif; cursor: pointer; }
.email-recipient-tools button:hover { color: var(--ink); }
.email-subject-input { min-height: 48px; border-bottom: 1px solid var(--line); }
.email-body-input { min-height: 230px; padding: 16px 0; resize: vertical; line-height: 1.6; }
.email-attachment-list { padding: 0 0 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.email-attachment-list[hidden] { display: none; }
.email-attachment-chip { max-width: 100%; padding: 7px 8px 7px 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--canvas); font-size: .69rem; }
.email-attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-attachment-chip small { color: var(--muted); white-space: nowrap; }
.email-attachment-chip button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; }
.email-attachment-chip button:hover { color: #b42318; background: #fee4e2; }
.email-compose-actions { min-height: 66px; padding: 10px 18px; display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--line); }
.email-compose-actions[hidden] { display: none; }
.email-compose-spacer { flex: 1; }
.email-attach-button { min-height: 38px; padding: 8px 10px; display: inline-flex; align-items: center; gap: 7px; border-radius: 9px; color: var(--muted); font-size: .72rem; font-weight: 700; cursor: pointer; }
.email-attach-button:hover { color: var(--ink); background: var(--canvas); }
.email-compose-status { min-height: 0; margin: 0; padding: 0 18px; color: #b42318; font-size: .7rem; }
.email-compose-status:not(:empty) { padding-top: 9px; }
.email-send-review { padding: 24px; overflow: auto; }
.email-send-review h3 { margin: 5px 0 16px; font: 800 1.05rem "Manrope", sans-serif; }
.email-send-review dl { margin: 0 0 16px; display: grid; gap: 8px; }
.email-send-review dl div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
.email-send-review dt { color: var(--muted); font-size: .7rem; }
.email-send-review dd { margin: 0; overflow-wrap: anywhere; font-size: .75rem; }
.email-send-review p { max-height: 220px; margin: 0 0 14px; padding: 14px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); font-size: .76rem; line-height: 1.6; white-space: pre-wrap; }
.email-send-review small { color: var(--muted); font-size: .68rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.conversation-workspace { --conversation-list-width: 360px; width: 100%; max-width: 100%; height: calc(100vh - 149px); min-height: 560px; display: grid; grid-template-columns: minmax(240px, var(--conversation-list-width)) 9px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; box-sizing: border-box; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.conversation-list-panel { min-width: 0; min-height: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; background: #fcfdfb; }
.conversation-splitter { position: relative; min-width: 9px; height: 100%; display: grid; place-items: center; border: 0; border-left: 1px solid var(--line); border-right: 1px solid transparent; background: #f8faf8; cursor: col-resize; touch-action: none; outline: none; transition: background .15s ease, border-color .15s ease; }
.conversation-splitter::before { content: ""; position: absolute; inset: 0 -5px; }
.conversation-splitter span { width: 3px; height: 46px; border-radius: 999px; background: #b9c8be; box-shadow: 0 0 0 1px rgba(255,255,255,.65); transition: height .15s ease, background .15s ease; }
.conversation-splitter:hover, .conversation-splitter:focus-visible, .conversation-workspace.is-resizing .conversation-splitter { border-color: #8fb49c; background: #e9f4ed; }
.conversation-splitter:hover span, .conversation-splitter:focus-visible span, .conversation-workspace.is-resizing .conversation-splitter span { height: 62px; background: var(--mint-deep); }
body.conversation-splitter-resizing { cursor: col-resize; user-select: none; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 14px; }
.panel-heading h2 { margin-bottom: 2px; font: 800 1rem "Manrope", sans-serif; }
.panel-heading span { color: var(--muted); font-size: .74rem; }
.panel-heading small { display: block; margin-top: 3px; color: #8a948d; font-size: .66rem; }
.search-box { margin: 0 16px 12px; height: 44px; padding: 0 13px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: #9099aa; }
.search-box:focus-within { border-color: #86a591; box-shadow: 0 0 0 3px rgba(91,99,230,.08); }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .84rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 13px; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; background: #fff; color: var(--muted); font-size: .72rem; font-weight: 600; cursor: pointer; }
.filter-chip.active { border-color: var(--navy); color: #fff; background: var(--navy); }
.filter-count { min-width: 19px; height: 19px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; color: #155a3d; background: #e3f2e8; font-size: .64rem; font-weight: 800; line-height: 1; }
.filter-chip.active .filter-count { color: inherit; background: rgba(255,255,255,.2); }
.conversation-list { overflow-y: auto; padding: 0 8px 8px; }
.conversation-item { width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 11px; padding: 13px 10px; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; }
.conversation-item:hover { background: #f3f6f0; }
.conversation-item.active { background: #edf6ef; }
.avatar { position: relative; width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #e4f0e6; color: #246b43; font-size: .75rem; font-weight: 800; }
.avatar.group { background: #0c4256; color: #67c4d6; }
.group-avatar-icon { width: 72%; height: 72%; display: grid; place-items: center; color: inherit; }
.group-avatar-svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar img[hidden] { display: none; }
.avatar-button { padding: 0; border: 0; font: inherit; cursor: zoom-in; }
.avatar-button:focus-visible { outline: 3px solid rgba(22,131,92,.28); outline-offset: 2px; }
.ephemeral-avatar-badge { position: absolute; right: -1px; bottom: -1px; z-index: 3; width: 17px; height: 17px; display: grid; place-items: center; border: 2px solid var(--paper); border-radius: 50%; color: #d8e1dc; background: #34453c; }
.ephemeral-avatar-badge[hidden] { display: none; }
.ephemeral-avatar-badge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ephemeral-avatar-badge.large { right: 10%; bottom: 10%; width: 34px; height: 34px; border-width: 3px; }
.ephemeral-avatar-badge.large svg { width: 23px; height: 23px; }
.conversation-copy { min-width: 0; }
.conversation-title-line { display: flex; align-items: center; gap: 5px; }
.conversation-muted-mark { flex: 0 0 auto; color: var(--muted); font-size: .68rem; line-height: 1; }
.conversation-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.conversation-copy p { margin: 5px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .76rem; }
.conversation-copy p .delivery-check.compact { display: inline-block; margin-right: 6px; vertical-align: -.05em; }
.conversation-meta { display: grid; align-content: start; justify-items: end; gap: 7px; color: #9aa3b4; font-size: .68rem; }
.conversation-menu-button { width: 28px; height: 28px; margin: -5px -4px -3px 0; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font: 800 1rem/1 sans-serif; cursor: pointer; opacity: 0; transition: background .16s ease, opacity .16s ease; }
.conversation-item:hover .conversation-menu-button, .conversation-item:focus-within .conversation-menu-button, .conversation-menu-button[aria-expanded="true"], .conversation-item.muted .conversation-menu-button { opacity: 1; }
.conversation-menu-button:hover, .conversation-menu-button:focus-visible { outline: 0; background: rgba(15, 92, 67, .1); }
.conversation-meta .unread { min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--indigo); color: #fff; font-size: .65rem; font-weight: 700; }
.followup-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.followup-status-badge { padding: 3px 7px; border-radius: 999px; color: #8a4b08; background: #fff1cf; font-size: .57rem; font-weight: 800; white-space: nowrap; }
.empty-state { margin: auto; padding: 28px; text-align: center; color: var(--muted); }
.empty-state span { display: block; margin-bottom: 8px; font-size: 1.7rem; }
.empty-state strong { color: var(--ink); }
.empty-state p { margin: 5px 0 0; font-size: .8rem; }
.empty-state .outline-button { margin: 14px auto 0; }

.contacts-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.contacts-heading-row h2 { margin-bottom: 5px; font: 800 1.4rem "Manrope", sans-serif; }
.contacts-heading-row p { margin: 0; color: var(--muted); font-size: .84rem; }
.contacts-heading-actions { display: flex; align-items: center; gap: 9px; }
.contacts-summary { margin-bottom: 14px; padding: 17px 19px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 13px; border: 1px solid #cfe5d7; border-radius: 16px; background: #eff8f2; }
.contacts-summary-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: #19724e; background: #d9f0e1; }
.contacts-summary-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contacts-summary div strong, .contacts-summary div span { display: block; }
.contacts-summary div strong { font: 800 .96rem "Manrope", sans-serif; }
.contacts-summary div span, .contacts-summary small { color: var(--muted); font-size: .73rem; }
.contacts-summary div span { margin-top: 3px; }
.contacts-summary small { white-space: nowrap; }
.contacts-search { height: 46px; margin-bottom: 14px; padding: 0 14px 0 43px; display: flex; align-items: center; position: relative; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.contacts-search::before { content: ""; position: absolute; left: 16px; width: 14px; height: 14px; border: 2px solid #789083; border-radius: 50%; }
.contacts-search::after { content: ""; position: absolute; left: 29px; top: 28px; width: 7px; height: 2px; border-radius: 2px; background: #789083; transform: rotate(45deg); transform-origin: left center; }
.contacts-search:focus-within { border-color: #86a591; box-shadow: 0 0 0 3px rgba(22,131,92,.08); }
.contacts-search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; }
.contacts-search input::placeholder { color: #8a948d; }
.google-contact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.google-contact-card { min-width: 0; padding: 16px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 7px 22px rgba(25,52,38,.045); }
.google-contact-avatar { width: 48px; height: 48px; position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #176b49; background: #e4f2e8; font-size: .78rem; font-weight: 800; }
.google-contact-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.google-contact-copy { min-width: 0; }
.google-contact-copy strong, .google-contact-copy > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.google-contact-copy strong { font: 800 .88rem "Manrope", sans-serif; }
.google-contact-copy > span { margin-top: 4px; color: var(--muted); font-size: .74rem; }
.google-contact-meta { margin-top: 8px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.contact-source-badge { padding: 3px 7px; border-radius: 999px; color: #41604e; background: #edf3ef; font-size: .62rem; font-weight: 700; }
.contact-last-seen { color: var(--muted); font-size: .64rem; }
.google-contact-actions { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 10px; }
.google-contact-buttons { display: flex; align-items: center; gap: 7px; }
.google-contact-status { display: inline-flex; align-items: center; gap: 6px; color: #19724e; font-size: .66rem; font-weight: 800; white-space: nowrap; }
.google-contact-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22a96d; box-shadow: 0 0 0 3px rgba(34,169,109,.11); }
.contact-edit-button { min-height: 32px; padding: 6px 9px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 9px; color: #315944; background: transparent; font: 700 .68rem "DM Sans", sans-serif; cursor: pointer; }
.contact-edit-button:hover { border-color: #8faf9b; background: #f0f7f2; }
.contact-edit-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-instruct-button { min-height: 32px; padding: 6px 11px; border: 1px solid #177650; border-radius: 9px; color: #fff; background: #177650; font: 800 .78rem "DM Sans", sans-serif; cursor: pointer; }
.contact-instruct-button:hover, .contact-instruct-button:focus-visible { background: #0d6040; outline: 3px solid rgba(22,131,92,.12); }
.contacts-empty { padding: 54px 20px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); text-align: center; }
.contacts-empty strong { color: var(--ink); }
.contacts-empty p { margin: 6px 0 0; font-size: .8rem; }

.chat-panel { min-width: 0; min-height: 0; width: 100%; max-width: 100%; height: 100%; position: relative; overflow: hidden; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; container: conversation-chat / inline-size; background: #fff; }
.chat-header-search-button { flex: 0 0 auto; color: #29493a; }
.chat-header-search-button svg, .chat-search-form svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chat-header-search-button[aria-expanded="true"] { color: #fff; background: #167e58; }
.chat-search-panel { width: min(390px, 100%); position: absolute; z-index: 25; inset: 0 0 0 auto; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); border-left: 1px solid var(--line); background: var(--paper); box-shadow: -16px 0 34px rgba(16,48,35,.13); }
.chat-search-panel[hidden] { display: none !important; }
.chat-search-heading { min-height: 72px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.chat-search-heading strong { color: var(--ink); font: 800 .92rem "Manrope", sans-serif; }
.chat-search-heading .icon-button { color: var(--ink); font-size: 1.35rem; }
.chat-search-form { margin: 14px 14px 8px; min-height: 42px; padding: 0 8px 0 13px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 32px; gap: 7px; align-items: center; border: 1px solid #d5dfd8; border-radius: 999px; background: var(--canvas); }
.chat-search-form:focus-within { border-color: #56a276; box-shadow: 0 0 0 3px rgba(22,131,92,.1); }
.chat-search-form > span { height: 24px; display: grid; place-items: center; color: var(--muted); }
.chat-search-form input { width: 100%; height: 38px; padding: 0; border: 0; color: var(--ink); background: transparent; outline: none; font: 500 .78rem "DM Sans", sans-serif; }
.chat-search-form button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 1.15rem; cursor: pointer; }
.chat-search-form button:hover { color: var(--ink); background: #e4eee7; }
.chat-search-form button[hidden] { visibility: hidden; display: block; }
.chat-search-summary { min-height: 32px; padding: 6px 22px 8px; color: var(--muted); font-size: .68rem; }
.chat-search-results { min-height: 0; overflow-y: auto; padding: 0 8px 16px; }
.chat-search-result-item { width: 100%; padding: 11px 14px; display: grid; gap: 5px; border: 0; border-radius: 10px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.chat-search-result-item:hover, .chat-search-result-item:focus-visible { background: #e8f2eb; outline: none; }
.chat-search-result-date { color: #7d8a82; font-size: .62rem; }
.chat-search-result-copy { min-width: 0; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 5px; align-items: baseline; font-size: .74rem; }
.chat-search-result-copy strong { color: #355b46; white-space: nowrap; font-size: .68rem; }
.chat-search-result-copy > span:last-child { min-width: 0; overflow: hidden; color: #56645c; text-overflow: ellipsis; white-space: nowrap; }
.chat-search-result-copy mark { padding: 0 1px; border-radius: 2px; color: #0c563b; background: #bdebd0; font-weight: 800; }
.chat-search-empty { min-height: 210px; padding: 34px 28px; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--muted); text-align: center; }
.chat-search-empty span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #e6f1e9; color: #4d7761; font-size: 1.35rem; }
.chat-search-empty p { margin: 0; font-size: .74rem; line-height: 1.5; }
.chat-header { min-height: 72px; padding: 14px 18px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
.chat-heading-copy { min-width: 0; flex: 1; }
.chat-heading-copy.group-clickable { margin: -5px; padding: 5px; border-radius: 9px; cursor: pointer; }
.chat-heading-copy.group-clickable:hover { background: #f1f7f2; }
.chat-heading-copy.group-clickable:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 2px; }
.chat-heading-copy > div { display: flex; align-items: center; gap: 6px; }
.chat-heading-copy h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 .95rem "Manrope", sans-serif; }
.chat-heading-copy p { margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .72rem; }
.chat-heading-copy p.typing { color: var(--mint-deep); font-weight: 700; }
.chat-actions { display: flex; gap: 6px; }
.pause-bot-button { border-color: #9bb9d8; color: #245b8f; background: #eef6ff; }
.pause-bot-button:hover, .pause-bot-button:focus-visible { border-color: #6398ca; background: #e1efff; }
.pause-bot-button.active { border-color: #377dbb; color: #fff; background: #377dbb; }
.chat-outreach-button { color: #fff; border-color: #177650; background: #177650; }
.chat-outreach-button:hover, .chat-outreach-button:focus-visible { color: #fff; border-color: #0d6040; background: #0d6040; }
.action-button, .outline-button { height: 36px; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #3d5e49; font-size: .74rem; font-weight: 700; cursor: pointer; }
.action-button:hover, .outline-button:hover { border-color: #bfcfc4; background: #f4f8f4; }
.outline-button:disabled { opacity: .72; cursor: wait; }
.outline-button.loading { min-width: 112px; justify-content: center; }
.button-loading-spinner { width: 13px; height: 13px; flex: 0 0 auto; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.standard-refresh-button { width: 132px; min-width: 132px; height: 42px; padding: 0 14px; justify-content: center; flex: 0 0 auto; border-radius: 11px; }
.standard-refresh-button.loading { width: 132px; min-width: 132px; }
.refresh-button-icon { font-size: 1rem; line-height: 1; }
.action-button.active { border-color: #efc876; background: #fff8e8; color: #9b6705; }
.action-button.resume-button { border-color: #8ec9a5; color: #0d704b; background: #eff9f2; }
.action-button.resume-button:hover { border-color: #52a979; background: #e4f5e9; }
.action-button:disabled { opacity: .55; cursor: default; }
.action-button.resume-button.pending { cursor: wait; }
.mobile-back { display: none; font-size: 1.8rem; }

@container conversation-chat (max-width: 680px) {
  .chat-header { display: grid; grid-template-columns: 42px minmax(0, 1fr) 36px; gap: 10px; }
  .chat-header > .avatar { grid-column: 1; grid-row: 1; }
  .chat-heading-copy { grid-column: 2; grid-row: 1; }
  .chat-header-search-button { grid-column: 3; grid-row: 1; }
  .chat-actions { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .chat-actions .action-button { width: 100%; min-width: 0; padding: 0 9px; justify-content: center; }
  .chat-actions .action-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.context-banner { margin: 12px 16px 0; padding: 11px 12px; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; border: 1px solid #d8e5dc; border-radius: 12px; background: #f1f7f2; }
.context-banner[hidden] { display: none !important; }
.context-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #def1e4; color: #40705c; font: 700 .72rem serif; }
.context-banner strong { font-size: .73rem; }
.context-banner p { margin: 2px 0 0; color: #53655b; font-size: .7rem; }
.message-stream { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 22px 24px; background: linear-gradient(rgba(250,251,253,.94), rgba(250,251,253,.94)), radial-gradient(circle at 20% 30%, #e6ebf4 1px, transparent 1px); background-size: auto, 22px 22px; }
.date-divider { display: flex; justify-content: center; margin: 4px 0 20px; color: #5d6b63; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; pointer-events: none; }
.date-divider.covered-by-floating { visibility: hidden; }
.floating-date-label { position: sticky; top: 8px; z-index: 5; min-height: 28px; margin-bottom: -28px; display: flex; align-items: flex-start; justify-content: center; color: #5d6b63; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; pointer-events: none; }
.floating-date-label[hidden] { display: none; }
.date-divider span, .floating-date-label span { min-height: 26px; padding: 5px 11px; display: inline-flex; align-items: center; box-sizing: border-box; border: 1px solid rgba(203,216,207,.88); border-radius: 999px; background: rgba(247,250,247,.94); box-shadow: 0 3px 10px rgba(15,47,35,.07); backdrop-filter: blur(7px); line-height: 1.25; }
.message-row { min-width: 0; display: flex; margin: 8px 0; }
.message-row.outgoing { justify-content: flex-end; }
.message-cluster { min-width: 0; max-width: min(72%, 620px); }
.message-bubble { min-width: 0; max-width: 100%; overflow: hidden; padding: 11px 13px 8px; border: 1px solid #e3e7ee; border-radius: 5px 15px 15px 15px; background: #fff; box-shadow: 0 4px 10px rgba(14,30,62,.04); }
.message-row.outgoing .message-bubble { border-color: #cde6d4; border-radius: 15px 5px 15px 15px; background: #d9efd1; }
.message-row.outgoing.human-message .message-bubble { border-color: #8fc1ef; background: #dbeeff; color: #123b65; }
.human-message-label { display: block; margin-bottom: 5px; color: #236aa7; font-size: .66rem; font-weight: 800; }
.message-reactions { min-height: 22px; margin: -5px 8px 0; position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; }
.message-row.outgoing .message-reactions { justify-content: flex-end; }
.message-bubble-actions { margin: 4px 7px 0 auto; display: flex; justify-content: flex-end; gap: 2px; }
.message-copy-trigger, .message-correction-trigger, .message-delete-trigger, .message-reaction-trigger { padding: 3px 7px; display: flex; align-items: center; gap: 4px; border: 0; border-radius: 7px; color: #39715a; background: transparent; font: 700 .62rem "DM Sans", sans-serif; cursor: pointer; }
.message-copy-trigger:hover, .message-copy-trigger:focus-visible, .message-correction-trigger:hover, .message-correction-trigger:focus-visible, .message-delete-trigger:hover, .message-delete-trigger:focus-visible, .message-reaction-trigger:hover, .message-reaction-trigger:focus-visible { color: #0d704b; background: #e7f3e9; outline: none; }
.message-copy-trigger svg, .message-correction-trigger svg, .message-delete-trigger svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.message-delete-trigger { color: #8f4b48; }
.message-contact-list { display: grid; gap: 7px; min-width: min(280px, 62vw); }
.message-contact-card { display: grid; overflow: hidden; border: 1px solid #d6e4dc; border-radius: 12px; background: rgba(255,255,255,.68); }
.message-contact-person { min-height: 68px; padding: 10px 12px; display: flex; align-items: center; gap: 11px; }
.message-contact-avatar { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 50%; background: #5d3228; color: #ffb48e; font-weight: 800; }
.message-contact-copy { min-width: 0; display: grid; gap: 2px; }
.message-contact-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.message-contact-action { height: 38px; border: 0; border-top: 1px solid #d6e4dc; color: #07985a; background: transparent; font: 800 .77rem "DM Sans", sans-serif; cursor: pointer; }
.message-contact-action:hover, .message-contact-action:focus-visible { color: #057647; background: rgba(7,152,90,.08); outline: none; }
.message-contact-action:disabled { color: var(--muted); cursor: default; opacity: .65; }
.message-reply-preview { min-width: 0; margin: -3px 0 8px; padding: 7px 9px 7px 11px; display: grid; gap: 2px; overflow: hidden; border-left: 4px solid #15956a; border-radius: 7px; background: rgba(9,91,65,.08); }
.message-reply-preview strong { overflow: hidden; color: #08785a; font-size: .68rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.message-reply-preview span { display: -webkit-box; overflow: hidden; color: #50645a; font-size: .72rem; line-height: 1.35; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.message-edited-label { margin-right: 2px; color: inherit; font-size: .62rem; font-style: italic; font-weight: 500; opacity: .9; }
.message-reaction { min-width: 30px; height: 24px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid #d7e0da; border-radius: 999px; color: var(--ink); background: #fff; box-shadow: 0 2px 7px rgba(14,30,62,.08); font: inherit; font-size: .83rem; line-height: 1; cursor: pointer; }
.message-reaction:hover, .message-reaction:focus-visible { border-color: #75ae88; background: #f1f8f3; outline: none; transform: translateY(-1px); }
.message-reaction b { color: var(--muted); font-size: .61rem; font-weight: 800; }
.sender-name { display: block; margin-bottom: 5px; color: var(--indigo); font-size: .68rem; font-weight: 700; }
.message-bubble p, .message-text { max-width: 100%; margin: 0; overflow-wrap: anywhere; word-break: break-word; font-size: .82rem; line-height: 1.48; }
.message-deleted-placeholder { display: flex; align-items: center; gap: 7px; min-height: 22px; color: #66756c; font-size: .82rem; }
.message-deleted-placeholder svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.message-deleted-placeholder em { font-style: italic; }
.wa-text-line { display: block; min-height: 1.48em; }
.wa-empty-line { display: block; height: .72em; }
.message-text strong { font-weight: 800; }
.message-text em { font-style: italic; }
.message-text del { text-decoration-thickness: 1.5px; }
.wa-inline-code, .wa-code-block { font-family: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.wa-inline-code { padding: 1px 4px; border-radius: 4px; background: rgba(6,61,49,.09); font-size: .78em; }
.wa-code-block { margin: 7px 0; padding: 9px 10px; overflow-x: auto; border-radius: 8px; background: rgba(6,61,49,.09); white-space: pre-wrap; overflow-wrap: normal; word-break: normal; font-size: .75rem; line-height: 1.45; }
.wa-quote { margin: 5px 0; padding: 2px 0 2px 9px; border-left: 3px solid #36a477; color: #365c4a; }
.wa-mention {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 4px;
  color: #07875e;
  cursor: pointer;
  display: inline;
  font: inherit;
  font-weight: 800;
  line-height: inherit;
  margin: 0;
  padding: 0 1px;
  text-align: inherit;
}
.wa-mention:hover { text-decoration: underline; }
.wa-mention:focus-visible { outline: 2px solid #07875e; outline-offset: 2px; }
.wa-mention[aria-busy="true"] { cursor: wait; opacity: .65; }
.wa-mention-self { cursor: default; }
.wa-mention-self:hover { text-decoration: none; }
.wa-list { margin: 5px 0; padding-left: 22px; }
.wa-list li { margin: 2px 0; padding-left: 2px; }
.wa-link { color: #08765a; text-decoration: underline; text-underline-offset: 2px; }
.message-info { margin-top: 6px; display: flex; justify-content: flex-end; align-items: center; gap: 4px; color: #8a93a5; font-size: .62rem; }
.status-check { color: #4296ae; letter-spacing: -.15em; padding-right: .15em; }
.delivery-check { color: #7c8780; letter-spacing: -.2em; padding-right: .2em; font-size: .76rem; font-weight: 800; }
.delivery-check.read { color: #1c9bd1; }
.delivery-check.compact { font-size: .72rem; }
.attachment { width: 100%; margin-top: 9px; padding: 9px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; border: 1px solid rgba(61,143,98,.18); border-radius: 9px; background: rgba(255,255,255,.72); color: var(--ink); text-align: left; cursor: pointer; }
.attachment:hover { border-color: #9fc7ad; background: #f7fbf8; }
.attachment-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #fff1ef; color: #d05245; font-size: .7rem; font-weight: 800; }
.attachment-icon.document { color: #3267a8; background: #eaf2ff; }
.attachment-icon.spreadsheet { color: #167548; background: #e6f5ec; }
.attachment strong, .attachment span { display: block; }
.attachment strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.attachment span { margin-top: 2px; color: var(--muted); font-size: .63rem; }
.attachment-open-label { width: auto; min-width: 42px; margin: 0 !important; color: var(--mint-deep) !important; font-weight: 800; text-align: right; }
.attachment-image { position: relative; width: min(360px, 100%); margin: 7px 0 0; padding: 0; display: block; overflow: hidden; border: 0; border-radius: 11px; background: #e8eee9; cursor: pointer; }
.attachment-image img { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.attachment-image + p { margin-top: 8px; }
.attachment-image.is-loading img:not([src]), .attachment-image.is-error img:not([src]) { height: 180px; }
.attachment-image.is-loading::before, .attachment-image.is-error::before { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 16px; color: #53655b; background: #e8eee9; font-size: .72rem; text-align: center; }
.attachment-image.is-loading::before { content: "Memuat gambar…"; }
.attachment-image.is-error::before { content: "Gambar belum termuat. Ketuk untuk mencoba lagi."; }
.context-banner { display: none !important; }
.resume-prompt { margin: 0 18px 10px; padding: 12px 14px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; border: 1px solid #99d1ad; border-radius: 13px; background: #edf9f1; box-shadow: 0 6px 18px rgba(12, 91, 57, .08); }
.resume-prompt[hidden] { display: none !important; }
.resume-prompt.pending { border-color: #bdd2c4; background: #f3f7f4; }
.resume-prompt-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #16835c; font-size: 1.05rem; font-weight: 800; }
.resume-prompt strong, .resume-prompt div > span { display: block; }
.resume-prompt strong { color: #104b38; font-size: .78rem; }
.resume-prompt div > span { margin-top: 3px; color: #4f665a; font-size: .69rem; line-height: 1.4; }
.resume-prompt-actions { display: flex; align-items: center; gap: 8px; }
.resume-prompt-button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 10px; color: #fff; background: #0d704b; font: 800 .73rem "DM Sans", sans-serif; cursor: pointer; white-space: nowrap; }
.resume-prompt-button:hover { background: #095d3e; }
.resume-dismiss-button { min-height: 38px; padding: 0 12px; border: 1px solid #a8c8b4; border-radius: 10px; color: #335c49; background: #fff; font: 800 .7rem "DM Sans", sans-serif; cursor: pointer; white-space: nowrap; }
.resume-dismiss-button:hover { background: #f4faf6; }
.resume-prompt-button:disabled, .resume-dismiss-button:disabled { opacity: .58; cursor: wait; }
.manual-control-banner { margin: 0 18px 10px; padding: 11px 13px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; border: 1px solid #8fc1ef; border-radius: 13px; background: #eef7ff; box-shadow: 0 6px 18px rgba(45,111,169,.08); }
.manual-control-banner[hidden] { display: none !important; }
.manual-control-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #377dbb; font: 800 .68rem "Manrope", sans-serif; letter-spacing: -.08em; }
.manual-control-banner strong, .manual-control-banner span { display: block; }
.manual-control-banner strong { color: #164f80; font-size: .78rem; }
.manual-control-banner div span { margin-top: 2px; color: #4a6a86; font-size: .69rem; }
.manual-resume-button { min-height: 36px; padding: 0 13px; border: 0; border-radius: 10px; color: #fff; background: #377dbb; font: 800 .72rem "DM Sans", sans-serif; cursor: pointer; }
.manual-resume-button:hover { background: #286aa5; }
.manual-resume-button:disabled { opacity: .58; cursor: wait; }
.read-only-composer { min-height: 66px; padding: 12px 18px; display: flex; align-items: center; border-top: 1px solid var(--line); background: #fff; }
.read-only-status { width: 100%; display: flex; align-items: center; gap: 10px; }
.lock-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: #edf2ee; color: #53655b; }
.lock-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.read-only-status > div { flex: 1; }
.read-only-status strong, .read-only-status > div > span { display: block; }
.read-only-status strong { font-size: .75rem; }
.read-only-status > div > span { margin-top: 2px; color: var(--muted); font-size: .68rem; }
.message-selection-tools { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) 38px; gap: 10px; align-items: center; }
.message-selection-tools[hidden] { display: none !important; }
.message-selection-tools strong { font-size: .79rem; }
.selection-icon-button { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: #486055; background: var(--paper); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.selection-icon-button:hover { border-color: #a8c3b1; background: #f1f7f2; }
.selection-icon-button.copy { justify-self: end; color: #fff; background: var(--navy); border-color: var(--navy); }
.selection-icon-button.copy:hover { background: var(--navy-2); }
.selection-icon-button:disabled { opacity: .45; cursor: default; }
.selection-icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.manual-message-form { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: end; }
.manual-message-form[hidden] { display: none !important; }
.manual-message-form textarea { min-height: 42px; max-height: 126px; resize: none; padding: 10px 12px; border: 1px solid #9bb9d8; border-radius: 12px; color: var(--ink); background: #f8fbff; font: 500 .8rem/1.4 "DM Sans", sans-serif; }
.manual-message-form textarea:focus { border-color: #377dbb; outline: 3px solid rgba(55,125,187,.14); }
.manual-message-form button { min-width: 76px; height: 42px; padding: 0 14px; border: 0; border-radius: 11px; color: #fff; background: #377dbb; font: 800 .75rem "DM Sans", sans-serif; cursor: pointer; }
.manual-message-form button:hover { background: #286aa5; }
.manual-message-form button:disabled, .manual-message-form textarea:disabled { opacity: .58; cursor: wait; }
.message-row[data-message-id] { touch-action: pan-y; }
.message-stream.selection-mode .message-row { position: relative; cursor: pointer; user-select: none; }
.message-stream.selection-mode .message-row::before { content: ""; width: 22px; height: 22px; flex: 0 0 auto; align-self: center; margin-right: 9px; border: 2px solid #9fb4a7; border-radius: 50%; background: var(--paper); box-sizing: border-box; }
.message-stream.selection-mode .message-row.outgoing::before { order: 2; margin: 0 0 0 9px; }
.message-stream.selection-mode .message-row.selected::before { content: "✓"; display: grid; place-items: center; border-color: var(--mint-deep); color: #fff; background: var(--mint-deep); font-size: .72rem; font-weight: 800; }
.message-stream.selection-mode .message-bubble-actions { display: none; }
.message-row.selected .message-bubble { outline: 2px solid rgba(22,131,92,.42); outline-offset: 2px; }
.message-context-menu { position: fixed; z-index: 120; min-width: 170px; padding: 6px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); box-shadow: 0 12px 34px rgba(3,28,22,.2); }
.message-context-menu[hidden] { display: none !important; }
.message-context-menu button { width: 100%; min-height: 40px; padding: 0 11px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 8px; color: var(--ink); background: transparent; font-size: .76rem; font-weight: 700; cursor: pointer; }
.message-context-menu button:hover { background: #edf6ef; }
.message-context-menu button[hidden] { display: none !important; }
.conversation-context-menu { position: fixed; z-index: 125; width: 236px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--paper); box-shadow: 0 14px 38px rgba(3,28,22,.24); }
.conversation-context-menu[hidden] { display: none !important; }
.conversation-context-heading { padding: 8px 10px 9px; border-bottom: 1px solid var(--line); }
.conversation-context-heading strong, .conversation-context-heading span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-context-heading strong { font-size: .75rem; }
.conversation-context-heading span { margin-top: 3px; color: var(--muted); font-size: .64rem; }
.conversation-context-menu button { width: 100%; min-height: 40px; padding: 0 10px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 8px; color: var(--ink); background: transparent; font-size: .75rem; font-weight: 700; text-align: left; cursor: pointer; }
.conversation-context-menu button:hover, .conversation-context-menu button:focus-visible { outline: 0; background: #edf6ef; }
.conversation-context-menu button[hidden] { display: none !important; }
.conversation-context-menu button > span:first-child { width: 20px; color: var(--muted); text-align: center; }
.conversation-context-menu button > b { margin-left: auto; color: var(--muted); font-size: 1rem; }
.conversation-mute-options { margin: 2px 0 4px 26px; padding-left: 5px; border-left: 2px solid #d9e7dd; }
.conversation-mute-options[hidden] { display: none !important; }
.conversation-mute-options button { min-height: 35px; font-size: .7rem; }
.conversation-context-separator { height: 1px; margin: 4px 5px; background: var(--line); }
.conversation-delete-action { color: #a33f4d !important; }
.conversation-unmute-action { margin-top: 4px; border-top: 1px solid var(--line) !important; border-radius: 0 0 8px 8px !important; color: var(--mint-deep) !important; }
.conversation-item.pinned .conversation-meta > span:first-child::before { content: "⌖ "; color: #0d7e55; font-weight: 800; }
.message-row.search-match .message-bubble { outline: 2px solid rgba(231,173,62,.65); outline-offset: 2px; }
.message-row.search-match-current .message-bubble { outline-color: #d78a12; box-shadow: 0 0 0 5px rgba(231,173,62,.17); }
.message-reaction-picker { position: fixed; z-index: 130; padding: 7px; display: flex; align-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: 0 12px 34px rgba(3,28,22,.22); }
.message-reaction-picker[hidden] { display: none !important; }
.message-reaction-picker button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; font-size: 1.18rem; cursor: pointer; transition: transform .12s ease, background .12s ease; }
.message-reaction-picker button:hover, .message-reaction-picker button:focus-visible { background: #e8f4eb; outline: none; transform: scale(1.15); }
.message-reaction-picker .remove-reaction { color: #8f4b48; font-size: 1.35rem; font-weight: 700; }

.reaction-details-dialog { width: min(460px, calc(100vw - 24px)); max-height: min(680px, calc(100vh - 24px)); }
.reaction-details-count { display: block; margin-top: 4px; color: var(--muted); font-size: .7rem; }
.reaction-details-tabs { margin: 4px 22px 12px; padding-bottom: 4px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: thin; }
.reaction-details-tabs button { min-width: 58px; height: 36px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--paper); font: 700 .76rem "DM Sans", sans-serif; cursor: pointer; }
.reaction-details-tabs button:hover, .reaction-details-tabs button:focus-visible { border-color: #75ae88; background: #f1f8f3; outline: none; }
.reaction-details-tabs button.active { border-color: #46a26b; color: #087044; background: #e5f5ea; box-shadow: 0 0 0 2px rgba(46,151,99,.08); }
.reaction-details-tabs b { color: var(--muted); font-size: .65rem; }
.reaction-details-list { max-height: min(420px, calc(100vh - 225px)); margin: 0 22px 18px; overflow-y: auto; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.reaction-person-row { min-height: 62px; padding: 9px 12px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; border-top: 1px solid var(--line); }
.reaction-person-row:first-child { border-top: 0; }
.reaction-person-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #176b49; background: #dff1e5; font: 800 .72rem "Manrope", sans-serif; }
.reaction-person-avatar.unknown { color: var(--muted); background: var(--canvas); }
.reaction-person-row > div { min-width: 0; }
.reaction-person-row strong, .reaction-person-row small { display: block; }
.reaction-person-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.reaction-person-row small { margin-top: 3px; color: var(--muted); font-size: .66rem; }
.reaction-person-emoji { padding: 7px; font-size: 1.1rem; }
.reaction-details-empty { min-height: 120px; display: grid; place-items: center; padding: 20px; color: var(--muted); font-size: .76rem; text-align: center; }

.usage-heading-row { display: flex; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.usage-heading-row h2 { margin: 0; font: 800 1.4rem "Manrope", sans-serif; }
.usage-heading-row p { margin: 5px 0 0; color: var(--muted); font-size: .8rem; }
.chatgpt-account-card { margin-bottom: 14px; padding: 16px 18px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 1px solid #cfe2d5; border-radius: 16px; background: linear-gradient(135deg, #f4fbf6, #fff); box-shadow: 0 6px 22px rgba(14,30,62,.03); }
.chatgpt-account-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--mint-deep); font: 800 1.1rem "Manrope", sans-serif; }
.chatgpt-account-copy { min-width: 0; }
.chatgpt-account-copy > span, .chatgpt-account-copy strong, .chatgpt-account-copy small { display: block; }
.chatgpt-account-copy > span { margin-bottom: 3px; color: var(--mint-deep); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.chatgpt-account-copy strong { overflow-wrap: anywhere; font: 800 .96rem "Manrope", sans-serif; }
.chatgpt-account-copy small { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.chatgpt-account-badge { padding: 7px 10px; border-radius: 999px; color: #26694b; background: #e4f4e9; font-size: .66rem; font-weight: 800; white-space: nowrap; }
.chatgpt-account-badge.error { color: #a93b4e; background: #fff0f2; }
.quota-feature { width: min(100%, 620px); padding: 20px; border-radius: 18px; color: #fff; background: linear-gradient(145deg, var(--navy), #0e4b3b); box-shadow: var(--shadow); }
.quota-copy span { color: #b9d0c4; font-size: .78rem; }
.quota-copy strong { display: block; margin-top: 12px; font: 800 3.25rem/1 "Manrope", sans-serif; letter-spacing: -.07em; }
.quota-copy p { margin: 5px 0 0; color: var(--mint); font-size: .84rem; font-weight: 700; }
.quota-bar { height: 7px; margin-top: 20px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.13); }
.quota-bar i { display: block; height: 100%; border-radius: inherit; background: var(--amber); }
.quota-legend { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; color: #c2d8ca; font-size: .7rem; }
.quota-legend b { font: inherit; }
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; }
.dot.used { background: var(--amber); }
.dot.remaining { background: var(--mint); }
.quota-feature footer { margin-top: 22px; padding-top: 12px; display: grid; gap: 5px; border-top: 1px solid rgba(255,255,255,.1); color: #b9d0c4; font-size: .7rem; }
.quota-feature footer small { max-width: 760px; color: #9fbcae; font-size: .68rem; line-height: 1.5; }
.model-settings-card { margin-top: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: 0 6px 22px rgba(14,30,62,.035); }
.model-settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 20px; }
.model-settings-kicker { display: block; margin-bottom: 5px; color: var(--mint-deep); font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.model-settings-heading h3 { margin: 0; font: 800 1.05rem "Manrope", sans-serif; }
.model-settings-heading p { max-width: 690px; margin: 5px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.model-server-badge { flex: 0 0 auto; padding: 8px 11px; border: 1px solid #cfe2d5; border-radius: 999px; color: #26694b; background: #f0f8f2; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.model-server-badge.error { border-color: #efc8cf; color: #a93b4e; background: #fff3f5; }
.model-settings-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr) minmax(170px, .62fr); gap: 14px; align-items: start; }
.model-field { min-width: 0; display: grid; gap: 7px; color: var(--ink); font-size: .76rem; font-weight: 800; }
.model-field input, .model-field textarea, .model-field select { width: 100%; border: 1px solid #cfd9d2; border-radius: 11px; color: var(--ink); background: var(--paper); outline: 0; font: 500 .78rem/1.45 "DM Sans", sans-serif; }
.model-field input, .model-field select { height: 44px; padding: 0 12px; }
.model-field select { padding-right: 34px; }
.model-field textarea { height: 44px; min-height: 44px; padding: 11px 12px; resize: none; overflow-y: auto; }
.model-field input:focus, .model-field textarea:focus, .model-field select:focus { border-color: #4a9271; box-shadow: 0 0 0 3px rgba(22,131,92,.1); }
.model-settings-form.read-only .model-field input, .model-settings-form.read-only .model-field textarea, .model-settings-form.read-only .model-field select { color: var(--muted); background: var(--canvas); cursor: not-allowed; opacity: 1; }
.model-field small { color: var(--muted); font-size: .68rem; font-weight: 500; line-height: 1.45; }
.model-settings-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding-top: 2px; }
.model-settings-actions .settings-primary { min-width: 170px; }
.model-settings-actions .settings-status { flex: 1; }

.infrastructure-heading-row { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.infrastructure-heading-row h2 { margin: 0 0 5px; font: 800 1.4rem "Manrope", sans-serif; }
.infrastructure-heading-row p { margin: 0; color: var(--muted); font-size: .84rem; }
.infrastructure-health { margin-bottom: 14px; padding: 18px 20px; display: grid; grid-template-columns: 13px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid #b7ddc5; border-radius: 18px; background: #edf8f1; }
.infrastructure-health.attention { border-color: #e7c789; background: #fff7e8; }
.infrastructure-health-dot, .service-dot { width: 10px; height: 10px; border-radius: 50%; background: #a6ada8; box-shadow: 0 0 0 4px rgba(166,173,168,.12); }
.infrastructure-health.healthy .infrastructure-health-dot, .service-dot.active { background: #16a36b; box-shadow: 0 0 0 4px rgba(22,163,107,.13); }
.infrastructure-health.attention .infrastructure-health-dot, .service-dot.inactive { background: var(--amber); box-shadow: 0 0 0 4px rgba(230,169,75,.15); }
.infrastructure-health strong { display: block; font-size: .88rem; }
.infrastructure-health p { margin: 3px 0 0; color: var(--muted); font-size: .74rem; }
.infrastructure-health > small { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.infrastructure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.infrastructure-card, .infrastructure-services { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 6px 22px rgba(14,30,62,.035); }
.infrastructure-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.infrastructure-card-heading span { color: var(--muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.infrastructure-card-heading strong { font: 800 1.35rem "Manrope", sans-serif; }
.infrastructure-progress { height: 7px; margin: 14px 0 16px; overflow: hidden; border-radius: 999px; background: #e5eee8; }
.infrastructure-progress i { display: block; height: 100%; border-radius: inherit; background: var(--mint-deep); transition: width .25s ease; }
.infrastructure-progress i.warning { background: var(--amber); }
.infrastructure-card dl { margin: 0; }
.infrastructure-card dl div { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); }
.infrastructure-card dt { color: var(--muted); font-size: .74rem; }
.infrastructure-card dd { margin: 0; font-size: .78rem; font-weight: 800; text-align: right; }
.infrastructure-system-list { margin-top: 14px !important; }
.infrastructure-services { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 20px; align-items: center; }
.infrastructure-services h3 { margin: 0; font: 800 1rem "Manrope", sans-serif; }
.infrastructure-services p { margin: 5px 0 0; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.infrastructure-services ul { margin: 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.infrastructure-services li { min-height: 48px; padding: 10px 12px; display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 11px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.infrastructure-services li strong, .infrastructure-services li small { display: block; }
.infrastructure-services li strong { font-size: .78rem; }
.infrastructure-services li small { margin-top: 2px; color: var(--muted); font-size: .68rem; }
.infrastructure-privacy-note { margin: 13px 2px 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }

.settings-heading { margin-bottom: 18px; }
.settings-heading h2 { margin-bottom: 5px; font: 800 1.4rem "Manrope", sans-serif; }
.settings-heading p { margin: 0; color: var(--muted); font-size: .84rem; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.settings-card { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: 0 6px 22px rgba(14,30,62,.035); }
.settings-card-heading { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 22px; }
.settings-card-heading h3 { margin: 0; font: 800 1rem "Manrope", sans-serif; }
.settings-card-heading p { margin: 4px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.profile-picture-button { position: relative; width: 52px; height: 52px; padding: 0; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: #e4f0e6; color: #246b43; font: 800 .76rem "Manrope", sans-serif; cursor: pointer; }
.profile-picture-button:hover { border-color: #7da88e; }
.profile-picture-button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-picture-button img[hidden] { display: none; }
.profile-picture-edit { position: absolute; right: 1px; bottom: 1px; z-index: 2; width: 19px; height: 19px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--mint-deep); color: #fff; font-size: .57rem; }
.profile-picture-help { margin: -10px 0 16px; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.settings-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #e4f0e6; color: #246b43; font: 800 .77rem "Manrope", sans-serif; }
.settings-icon.whatsapp-icon { background: #def4e6; color: #087b4e; }
.settings-icon.access-icon { background: #e8eef9; color: #334f7d; }
.settings-icon.skills-icon { background: #e8eef9; color: #334f7d; }
.settings-icon svg, .skill-symbol svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-icon.skills-icon svg { width: 21px; height: 21px; }
.skills-card { grid-column: 1 / -1; }
.skills-card .settings-card-heading { grid-template-columns: 52px minmax(0, 1fr) auto; }
.skill-summary { min-width: 106px; padding: 9px 11px; border: 1px solid #d9e8dd; border-radius: 13px; color: #216a49; background: #f2f8f3; text-align: right; }
.skill-summary strong, .skill-summary span { display: block; }
.skill-summary strong { font: 800 1rem/1 "Manrope", sans-serif; }
.skill-summary span { margin-top: 4px; font-size: .64rem; font-weight: 700; }
.skill-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.skill-list li { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); box-shadow: 0 4px 14px rgba(14,30,62,.025); cursor: default; }
.skill-list li.skills-empty { grid-column: 1 / -1; grid-template-columns: 1fr; min-height: 90px; align-content: center; text-align: center; }
.skill-symbol { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #275f45; background: #e4f1e7; font: 800 .68rem "Manrope", sans-serif; }
.skill-list strong { display: block; padding-top: 1px; font-size: .79rem; line-height: 1.35; }
.skill-list p { margin: 4px 0 0; display: -webkit-box; overflow: hidden; color: var(--muted); font-size: .7rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.skill-status { margin-top: 2px; display: inline-flex; align-items: center; gap: 5px; color: #24734f; font-size: .62rem; font-weight: 800; white-space: nowrap; }
.skill-status::before { width: 7px; height: 7px; content: ""; border-radius: 50%; background: #20aa70; box-shadow: 0 0 0 3px rgba(32,170,112,.12); }
.skill-needs-attention .skill-status { color: #9a6515; }
.skill-needs-attention .skill-status::before { background: #d89b2b; box-shadow: 0 0 0 3px rgba(216,155,43,.14); }
.settings-form { display: grid; gap: 9px; }
.settings-form label, .field-label-row label { color: var(--ink); font-size: .76rem; font-weight: 800; }
.settings-form input, .settings-form textarea { width: 100%; border: 1px solid #cfd9d2; border-radius: 11px; color: var(--ink); background: var(--paper); outline: 0; }
.settings-form input { height: 44px; padding: 0 12px; }
.settings-form textarea { min-height: 120px; padding: 11px 12px; resize: vertical; line-height: 1.5; }
.settings-form textarea.compact-textarea { min-height: 82px; }
.settings-form input:focus, .settings-form textarea:focus { border-color: #4a9271; box-shadow: 0 0 0 3px rgba(22,131,92,.1); }
.field-label-row { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
.field-label-row span { color: var(--muted); font-size: .68rem; }
.field-help { margin: 0 0 5px; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.settings-primary, .settings-secondary { min-height: 43px; padding: 0 16px; border-radius: 11px; font-size: .78rem; font-weight: 800; cursor: pointer; }
.settings-primary { border: 0; color: #fff; background: var(--navy); }
.settings-primary:hover { background: var(--navy-2); }
.settings-secondary { width: 100%; border: 1px solid #b9cec0; color: #275f45; background: #f2f8f3; }
.settings-secondary:hover { background: #e8f3eb; }
#whatsapp-action { margin-top: 14px; }
.settings-primary:disabled, .settings-secondary:disabled { opacity: .55; cursor: wait; }
.settings-status { min-height: 18px; margin: 0; color: #337052; font-size: .72rem; line-height: 1.45; }
.settings-status.error { color: #b3364a; }
.access-list { margin: 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.access-list li { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.access-list li.access-empty { grid-template-columns: 1fr; min-height: 54px; color: var(--muted); font-size: .74rem; text-align: center; }
.access-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #216a49; background: #dff1e6; font: 800 .7rem "Manrope", sans-serif; }
.access-account { min-width: 0; }
.access-account strong, .access-account span { display: block; overflow-wrap: anywhere; }
.access-account strong { font-size: .76rem; }
.access-account span { margin-top: 2px; color: var(--muted); font-size: .66rem; }
.access-remove { min-height: 34px; padding: 0 10px; border: 1px solid #e5b8c0; border-radius: 9px; color: #a62f43; background: var(--paper); font-size: .68rem; font-weight: 800; cursor: pointer; }
.access-remove:hover { background: #fff1f3; }
.access-owner-badge { padding: 6px 8px; border-radius: 999px; color: #216a49; background: #e2f3e8; font-size: .62rem; font-weight: 800; white-space: nowrap; }
.access-form { margin-top: 14px; display: grid; gap: 7px; }
.access-form[hidden] { display: none; }
.access-form label { font-size: .74rem; font-weight: 800; }
.access-form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.access-form-row input { min-width: 0; height: 43px; padding: 0 12px; border: 1px solid #cfd9d2; border-radius: 11px; color: var(--ink); background: var(--paper); outline: 0; }
.access-form-row input:focus { border-color: #4a9271; box-shadow: 0 0 0 3px rgba(22,131,92,.1); }
.access-note { margin: 12px 0 7px; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.connection-row { display: grid; grid-template-columns: 11px minmax(0, 1fr) 36px; gap: 10px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--canvas); }
.connection-dot { width: 10px; height: 10px; border-radius: 50%; background: #a6ada8; box-shadow: 0 0 0 4px rgba(166,173,168,.12); }
.connection-dot.connected { background: #16a36b; box-shadow: 0 0 0 4px rgba(22,163,107,.13); }
.connection-dot.error { background: var(--rose); box-shadow: 0 0 0 4px rgba(217,103,118,.12); }
.connection-row strong, .connection-row span { display: block; }
.connection-row strong { font-size: .79rem; }
.connection-row div span { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.email-connection-row { grid-template-columns: 11px minmax(0, 1fr); margin-top: 12px; }
.qr-panel { margin: 14px 0; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fff; text-align: center; }
.qr-panel[hidden] { display: none; }
.qr-panel img { display: block; width: min(260px, 100%); aspect-ratio: 1; margin: 0 auto 12px; object-fit: contain; }
.qr-panel p { margin: 0; color: #53655b; font-size: .72rem; line-height: 1.5; }
.data-dialog { width: min(520px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 70px rgba(3,28,22,.24); }
.data-dialog::backdrop { background: rgba(3,24,19,.58); backdrop-filter: blur(3px); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 22px 10px; }
.dialog-heading h2 { margin: 3px 0 0; font: 800 1.12rem/1.3 "Manrope", sans-serif; }
.dialog-kicker { color: var(--mint-deep); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.data-dialog > p { margin: 0; padding: 0 22px; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.data-dialog dl { margin: 18px 22px; display: grid; gap: 12px; }
.data-dialog dl div { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.data-dialog dt { font-size: .76rem; font-weight: 800; }
.data-dialog dd { margin: 4px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.owner-dialog-identity { margin: 0 22px 4px; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); }
.owner-dialog-identity .account-avatar { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; font-size: .78rem; line-height: 1; }
.owner-dialog-identity div { min-width: 0; }
.owner-dialog-identity strong, .owner-dialog-identity span { display: block; }
.owner-dialog-identity strong { overflow-wrap: anywhere; font-size: .95rem; }
.owner-dialog-identity div span { margin-top: 3px; color: var(--muted); font-size: .76rem; }
.owner-dialog .owner-readonly-note { padding-bottom: 2px; }
.account-owner-section-title { margin-top: 4px !important; color: var(--ink) !important; font-size: .78rem !important; font-weight: 800; }
.dialog-close { margin: 0 22px 22px auto; display: flex; }
.dialog-actions { margin: 0 22px 22px; display: flex; justify-content: space-between; gap: 10px; }
.dialog-actions .dialog-close { margin: 0 0 0 auto; }
.confirm-dialog { width: min(430px, calc(100vw - 28px)); }
.confirm-dialog-actions { margin-top: 22px; justify-content: flex-end; }
.message-delete-options { margin: 18px 22px 0; display: grid; gap: 9px; }
.message-delete-choice { width: 100%; min-height: 62px; padding: 11px 13px; display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--canvas); cursor: pointer; }
.message-delete-choice:hover { border-color: #9db7a6; background: #f1f7f2; }
.message-delete-choice.danger { color: #9d3041; }
.message-delete-choice.danger:hover { border-color: #d5a2aa; background: #fff4f5; }
.message-delete-choice:disabled { opacity: .58; cursor: wait; }
.message-delete-choice > span:last-child { min-width: 0; display: grid; gap: 3px; }
.message-delete-choice strong { font-size: .8rem; }
.message-delete-choice small { color: var(--muted); font-size: .7rem; line-height: 1.4; }
.message-delete-choice-icon { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); font-size: 1rem; }
.message-delete-dialog .confirm-dialog-actions { margin-top: 14px; }
.message-delete-action { color: #a33b49 !important; }
.outreach-dialog { width: min(600px, calc(100vw - 28px)); }
.outreach-intro { margin: 0; padding: 0 22px 5px !important; color: var(--muted); font-size: .9rem !important; line-height: 1.55; }
.outreach-field { margin: 16px 22px 0; display: grid; gap: 8px; }
.outreach-field > span { color: var(--ink); font-size: .875rem; font-weight: 800; }
.outreach-field select, .outreach-field textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; box-sizing: border-box; color: var(--ink); background: var(--paper); font: 500 1rem/1.5 "DM Sans", sans-serif; }
.outreach-field select { min-height: 48px; }
.outreach-field textarea { min-height: 148px; resize: vertical; }
.outreach-field select:focus, .outreach-field textarea:focus { border-color: #58a477; outline: 3px solid rgba(46,151,99,.13); }
.outreach-status { min-height: 24px; padding: 12px 22px 0 !important; color: var(--muted) !important; font-size: .875rem !important; }
.outreach-status.error { color: #a43746 !important; }
.outreach-status.success { color: #087044 !important; }
.outreach-actions { margin-top: 18px; justify-content: flex-end; }
.outreach-actions button:disabled { opacity: .58; cursor: wait; }
.correction-dialog { width: min(620px, calc(100vw - 28px)); }
.correction-intro { margin: 0; padding: 0 22px 2px !important; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.correction-context { margin: 16px 22px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.correction-context > div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.correction-context span, .correction-note-label { display: block; color: var(--ink); font-size: .72rem; font-weight: 800; }
.correction-context p { max-height: 132px; margin: 6px 0 0; overflow: auto; color: var(--muted); font-size: .74rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.correction-mode { margin: 0 22px 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; border: 0; }
.correction-mode legend { width: 100%; margin: 0 0 7px; color: var(--ink); font-size: .72rem; font-weight: 800; }
.correction-mode-option { min-width: 0; padding: 11px 12px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; }
.correction-mode-option:has(input:checked) { border-color: #58a477; background: #eef9f1; box-shadow: 0 0 0 2px rgba(46,151,99,.09); }
.correction-mode-option input { width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto; accent-color: #0d704b; }
.correction-mode-option span, .correction-mode-option strong, .correction-mode-option small { display: block; }
.correction-mode-option strong { color: var(--ink); font-size: .72rem; line-height: 1.35; }
.correction-mode-option small { margin-top: 3px; color: var(--muted); font-size: .64rem; line-height: 1.42; }
.correction-note-label { margin: 0 22px 7px; }
.correction-dialog textarea { display: block; width: calc(100% - 44px); min-height: 122px; margin: 0 22px; padding: 12px 13px; resize: vertical; border: 1px solid var(--line); border-radius: 12px; box-sizing: border-box; color: var(--ink); background: var(--paper); font: 500 .8rem/1.55 "DM Sans", sans-serif; }
.correction-dialog textarea:focus { border-color: #58a477; outline: 3px solid rgba(46, 151, 99, .13); }
.correction-status { min-height: 21px; padding: 10px 22px 0 !important; color: var(--muted) !important; font-size: .72rem !important; }
.correction-status.error { color: #a43746 !important; }
.correction-status.success { color: #087044 !important; }
.correction-actions { margin-top: 17px; justify-content: flex-end; }
.correction-actions button:disabled { opacity: .58; cursor: wait; }
.danger-button { min-height: 36px; padding: 0 14px; border: 1px solid #b13e4f; border-radius: 10px; color: #fff; background: #b13e4f; font-size: .74rem; font-weight: 800; cursor: pointer; }
.danger-button:hover { border-color: #9b3041; background: #9b3041; }
.attachment-dialog { width: min(920px, calc(100vw - 28px)); max-height: calc(100vh - 32px); }
.attachment-heading-copy { min-width: 0; display: flex; align-items: center; gap: 12px; }
.attachment-heading-copy > div { min-width: 0; }
.attachment-viewer-mark { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #607067; font: 800 .62rem "Manrope", sans-serif; }
.attachment-viewer-mark.pdf { background: #d9322b; }
.attachment-viewer-mark.image { background: #167548; }
.attachment-dialog-meta { display: block; max-width: min(620px, 65vw); margin-top: 4px; overflow: hidden; color: var(--muted); font-size: .68rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.attachment-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.attachment-toolbar .attachment-download { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; }
.attachment-toolbar .attachment-download > span:first-child { font-size: 1.05rem; line-height: 1; }
.attachment-preview-body { min-height: 180px; max-height: calc(100vh - 190px); margin: 8px 22px 18px; overflow: auto; border: 1px solid var(--line); border-radius: 13px; background: var(--canvas); }
.attachment-preview-loading, .attachment-preview-error { min-height: 180px; display: grid; place-items: center; padding: 24px; color: var(--muted); font-size: .82rem; text-align: center; }
.attachment-preview-image { display: block; max-width: 100%; max-height: calc(100vh - 220px); margin: auto; object-fit: contain; }
.attachment-preview-pdf { display: block; width: 100%; height: min(68vh, 760px); border: 0; background: #fff; }
.attachment-dialog.is-pdf { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: #181a1b; }
.attachment-dialog.is-pdf[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.attachment-dialog.is-pdf::backdrop { background: rgba(0,0,0,.82); backdrop-filter: none; }
.attachment-dialog.is-pdf .dialog-heading { min-height: 70px; padding: 11px 18px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.11); box-sizing: border-box; color: #f4f6f5; background: #202223; }
.attachment-dialog.is-pdf .dialog-kicker { color: #a8b3ad; }
.attachment-dialog.is-pdf .dialog-heading h2 { max-width: min(720px, 60vw); overflow: hidden; color: #fff; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.attachment-dialog.is-pdf .attachment-dialog-meta { color: #aeb7b2; }
.attachment-dialog.is-pdf .attachment-toolbar .outline-button,
.attachment-dialog.is-pdf .attachment-toolbar .icon-button { color: #f2f4f3; border-color: rgba(255,255,255,.18); background: transparent; }
.attachment-dialog.is-pdf .attachment-toolbar .outline-button:hover,
.attachment-dialog.is-pdf .attachment-toolbar .icon-button:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.09); }
.attachment-dialog.is-pdf .attachment-preview-body { min-height: 0; max-height: none; height: 100%; margin: 0; overflow: hidden; border: 0; border-radius: 0; background: #2c2e30; }
.attachment-dialog.is-pdf .attachment-preview-loading,
.attachment-dialog.is-pdf .attachment-preview-error { height: 100%; min-height: 0; color: #d4dad7; }
.attachment-dialog.is-pdf .attachment-preview-pdf { width: 100%; height: 100%; background: #2c2e30; }
.attachment-dialog.is-pdf > .dialog-actions { display: none; }
.attachment-dialog.is-image { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: #111314; }
.attachment-dialog.is-image[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.attachment-dialog.is-image::backdrop { background: rgba(0,0,0,.9); backdrop-filter: none; }
.attachment-dialog.is-image .dialog-heading { min-height: 70px; padding: 11px 18px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.09); box-sizing: border-box; color: #f4f6f5; background: #181a1b; }
.attachment-dialog.is-image .dialog-kicker { color: #a8b3ad; }
.attachment-dialog.is-image .dialog-heading h2 { max-width: min(720px, 60vw); overflow: hidden; color: #fff; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.attachment-dialog.is-image .attachment-dialog-meta { color: #aeb7b2; }
.attachment-dialog.is-image .attachment-toolbar .outline-button,
.attachment-dialog.is-image .attachment-toolbar .icon-button { color: #f2f4f3; border-color: rgba(255,255,255,.18); background: transparent; }
.attachment-dialog.is-image .attachment-toolbar .outline-button:hover,
.attachment-dialog.is-image .attachment-toolbar .icon-button:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.09); }
.attachment-dialog.is-image .attachment-preview-body { min-height: 0; max-height: none; height: 100%; margin: 0; overflow: hidden; border: 0; border-radius: 0; background: #111314; }
.attachment-dialog.is-image > .dialog-actions { display: none; }
.attachment-image-viewer { height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; }
.attachment-image-stage { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 16px 76px 8px; overflow: hidden; }
.attachment-dialog.is-image .attachment-preview-image { width: 100%; max-width: 100%; height: 100%; max-height: 100%; min-width: 0; min-height: 0; margin: auto; object-fit: contain; box-shadow: 0 10px 36px rgba(0,0,0,.28); }
.attachment-image-nav { position: absolute; top: 50%; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; transform: translateY(-50%); border: 0; border-radius: 50%; color: #f4f6f5; background: rgba(0,0,0,.38); font: 400 2rem/1 sans-serif; cursor: pointer; }
.attachment-image-nav:hover { background: rgba(0,0,0,.66); }
.attachment-image-nav.previous { left: 28px; }
.attachment-image-nav.next { right: 28px; }
.attachment-image-caption { max-width: min(900px, calc(100vw - 40px)); margin: 0 auto; padding: 5px 20px 11px; overflow: hidden; color: #c7cdca; font-size: .75rem; line-height: 1.35; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.attachment-image-caption .wa-text-line { display: inline; }
.attachment-image-gallery { min-height: 88px; padding: 8px 20px 10px; display: flex; align-items: center; justify-content: center; gap: 8px; overflow-x: auto; border-top: 1px solid rgba(255,255,255,.08); background: #151718; }
.attachment-gallery-item { flex: 0 0 auto; width: 58px; height: 64px; padding: 3px; overflow: hidden; border: 2px solid transparent; border-radius: 5px; background: #272a2b; cursor: pointer; opacity: .72; }
.attachment-gallery-item:hover { opacity: 1; }
.attachment-gallery-item.active { border-color: #19c36a; opacity: 1; }
.attachment-gallery-item img { display: block; width: 100%; height: 100%; border-radius: 2px; object-fit: cover; }
.attachment-gallery-item.is-error::after { content: "!"; color: #fff; }
.document-preview { padding: 22px; color: var(--ink); font-size: .84rem; line-height: 1.65; }
.document-preview p { margin: 0 0 12px; white-space: pre-wrap; }
.sheet-preview { padding: 16px; }
.sheet-preview h3 { margin: 3px 0 10px; font: 800 .86rem "Manrope", sans-serif; }
.sheet-table-wrap { max-width: 100%; margin-bottom: 20px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.sheet-table { border-collapse: collapse; min-width: 100%; color: var(--ink); font-size: .72rem; }
.sheet-table td { min-width: 90px; max-width: 260px; padding: 8px 9px; border: 1px solid var(--line); overflow-wrap: anywhere; vertical-align: top; }
.sheet-table tr:first-child td { background: #edf6ef; font-weight: 800; }
.attachment-download { text-decoration: none; }
.avatar-dialog { width: min(470px, calc(100vw - 28px)); }
.avatar-preview { position: relative; width: min(330px, calc(100vw - 72px)); aspect-ratio: 1; margin: 8px auto 16px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #246b43; background: linear-gradient(145deg, #e4f0e6, #cfe4d5); font: 800 4.2rem "Manrope", sans-serif; box-shadow: 0 16px 44px rgba(8,56,42,.15); }
.avatar-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-preview img[hidden] { display: none; }
.avatar-preview.group { color: #67c4d6; background: #0c4256; }
.avatar-preview.group .group-avatar-svg { width: 72%; height: 72%; margin: auto; }
.group-dialog { width: min(560px, calc(100vw - 20px)); max-height: min(760px, calc(100vh - 20px)); overflow-y: auto; overscroll-behavior: contain; }
.group-summary { margin: 2px 22px 14px; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); }
.group-summary-avatar, .group-member-avatar { position: relative; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: #246b43; background: #dfeee2; font: 800 .74rem "Manrope", sans-serif; }
.group-summary-avatar { width: 48px; height: 48px; font-size: .84rem; }
.group-summary-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.group-summary-avatar img[hidden] { display: none; }
.group-summary div { min-width: 0; }
.group-summary strong, .group-summary span { display: block; }
.group-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.group-summary span { margin-top: 4px; color: var(--muted); font-size: .74rem; }
.group-description { margin: 0 22px 14px !important; padding: 12px 14px !important; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); color: var(--ink) !important; font-size: .76rem !important; white-space: pre-wrap; }
.data-dialog .group-facts { margin: 0 22px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.data-dialog .group-facts div { min-width: 0; padding: 11px 12px; }
.data-dialog .group-facts dt { color: var(--muted); font-size: .64rem; letter-spacing: .045em; text-transform: uppercase; }
.data-dialog .group-facts dd { color: var(--ink); font-size: .75rem; font-weight: 700; overflow-wrap: anywhere; }
.group-member-heading { margin: 0 22px 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.group-member-heading strong { font-size: .8rem; }
.group-member-heading span { color: var(--muted); font-size: .68rem; }
.group-member-list { max-height: min(360px, calc(100vh - 430px)); margin: 0 22px 18px; overflow: auto; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.group-member-row { width: 100%; min-height: 68px; padding: 11px 13px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 0; border-top: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; font: inherit; cursor: pointer; }
.group-member-row:first-child { border-top: 0; }
.group-member-row:hover, .group-member-row:focus-visible { background: #edf6ef; outline: none; }
.group-member-avatar { width: 44px; height: 44px; }
.group-member-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.group-member-avatar img[hidden] { display: none; }
.group-member-copy { min-width: 0; }
.group-member-copy strong, .group-member-copy span { display: block; }
.group-member-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.group-member-copy span { margin-top: 4px; color: var(--muted); font-size: .72rem; }
.group-member-badge { padding: 5px 8px; border-radius: 999px; color: #18724c; background: #e5f5ea; font-size: .64rem; font-weight: 800; white-space: nowrap; }
.group-member-message-button { margin-right: auto; }
.group-member-state { min-height: 120px; display: grid; place-items: center; padding: 22px; color: var(--muted); font-size: .76rem; text-align: center; }
.conversation-media-dialog { width: min(780px, calc(100vw - 24px)); height: min(760px, calc(100vh - 24px)); max-height: calc(100vh - 24px); overflow: hidden; }
.conversation-media-dialog[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.conversation-media-heading { justify-content: flex-start; gap: 10px; }
.conversation-media-heading > div { min-width: 0; }
.conversation-media-heading h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-media-heading > div > span:last-child { display: block; margin-top: 3px; color: var(--muted); font-size: .67rem; }
.conversation-media-tabs { min-height: 50px; padding: 0 18px; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.conversation-media-tabs button { position: relative; border: 0; color: var(--muted); background: transparent; font-size: .76rem; font-weight: 700; cursor: pointer; }
.conversation-media-tabs button::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; content: ""; border-radius: 3px 3px 0 0; background: transparent; }
.conversation-media-tabs button.active { color: var(--mint-deep); }
.conversation-media-tabs button.active::after { background: var(--mint); }
.conversation-media-tabs b { margin-left: 4px; font-size: .65rem; }
.conversation-media-content { min-height: 0; overflow: auto; padding: 20px; background: var(--canvas); }
.conversation-media-section-label { margin: 0 0 12px; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.conversation-media-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.conversation-media-image { aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #e7ece8; cursor: pointer; }
.conversation-media-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.conversation-media-image.is-error::after { content: "Gambar belum tersedia"; display: grid; place-items: center; height: 100%; padding: 10px; color: var(--muted); font-size: .66rem; }
.conversation-doc-list, .conversation-link-list { display: grid; gap: 9px; }
.conversation-doc-item, .conversation-link-item { min-width: 0; padding: 12px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; align-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--paper); text-align: left; text-decoration: none; cursor: pointer; }
.conversation-doc-item:hover, .conversation-link-item:hover { border-color: #9fc7ad; background: #f7fbf8; }
.conversation-media-file-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; color: #3267a8; background: #eaf2ff; font-size: .66rem; font-weight: 800; }
.conversation-media-file-icon.link { color: #167548; background: #e6f5ec; font-size: 1rem; }
.conversation-doc-item strong, .conversation-doc-item span, .conversation-link-item strong, .conversation-link-item span { display: block; min-width: 0; }
.conversation-doc-item strong, .conversation-link-item strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.conversation-doc-item span, .conversation-link-item span { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.conversation-media-item-date { color: var(--muted); font-size: .64rem; white-space: nowrap; }
.conversation-media-empty { min-height: 260px; display: grid; place-items: center; padding: 30px; color: var(--muted); font-size: .78rem; text-align: center; }
.avatar-contact-copy { padding: 0 22px 18px; text-align: center; }
.avatar-contact-copy strong, .avatar-contact-copy span { display: block; }
.avatar-contact-copy strong { font: 800 1rem "Manrope", sans-serif; }
.avatar-contact-copy span { margin-top: 4px; color: var(--muted); font-size: .76rem; }
.conversation-media-summary { width: calc(100% - 44px); min-height: 68px; margin: 0 22px 16px; padding: 10px 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--paper); text-align: left; cursor: pointer; }
.conversation-media-summary:hover { border-color: #9fc7ad; background: var(--canvas); }
.conversation-media-summary-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--mint-deep); background: #e5f5ea; font-size: 1.2rem; }
.conversation-media-summary-copy { min-width: 0; }
.conversation-media-summary-copy strong, .conversation-media-summary-copy small { display: block; }
.conversation-media-summary-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.conversation-media-summary-copy small { margin-top: 3px; color: var(--muted); font-size: .65rem; }
.conversation-media-summary-preview { display: flex; align-items: center; gap: 4px; }
.conversation-media-preview-item { width: 46px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; color: var(--muted); background: #edf1ee; font-size: .6rem; font-weight: 800; }
.conversation-media-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.conversation-media-summary-count { min-width: 24px; color: var(--muted); font-size: .72rem; text-align: right; }
.conversation-media-summary-chevron { color: var(--muted); font-size: 1.35rem; line-height: 1; }
.conversation-ephemeral-setting { margin: 0 22px 16px; padding: 12px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--canvas); }
.conversation-ephemeral-setting > span { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: #e9eeea; }
.conversation-ephemeral-setting > span svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.conversation-ephemeral-setting div { min-width: 0; }
.conversation-ephemeral-setting strong, .conversation-ephemeral-setting small { display: block; }
.conversation-ephemeral-setting strong { font-size: .78rem; }
.conversation-ephemeral-setting small { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.conversation-ephemeral-setting.active { border-color: #aad2b7; background: #f0f8f2; }
.conversation-ephemeral-setting.active > span { color: #0d7e55; background: #dff3e5; }
.conversation-mute-setting { width: calc(100% - 44px); min-height: 62px; margin: 0 22px 16px; padding: 10px 12px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 11px; align-items: center; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--canvas); text-align: left; cursor: pointer; }
.conversation-mute-setting:hover, .conversation-mute-setting:focus-visible { outline: 0; border-color: #9fc7ad; background: #f0f8f2; }
.conversation-mute-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: #e9eeea; font-size: 1rem; }
.conversation-mute-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.conversation-mute-copy { min-width: 0; }
.conversation-mute-copy strong, .conversation-mute-copy small { display: block; }
.conversation-mute-copy strong { font-size: .78rem; }
.conversation-mute-copy small { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.conversation-mute-setting.active { border-color: #aad2b7; background: #f0f8f2; }
.conversation-mute-setting.active .conversation-mute-icon { color: #0d7e55; background: #dff3e5; }
.conversation-info-actions { width: calc(100% - 44px); margin: 0 22px 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 13px; }
.conversation-info-actions[hidden] { display: none !important; }
.conversation-info-actions button { min-height: 52px; padding: 9px 11px; display: flex; align-items: center; gap: 9px; border: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); color: var(--ink); background: var(--canvas); cursor: pointer; text-align: left; }
.conversation-info-actions button:nth-child(-n+2) { border-top: 0; }
.conversation-info-actions button:nth-child(odd) { border-left: 0; }
.conversation-info-actions button:hover { background: #edf6ef; }
.conversation-info-actions button span { width: 22px; color: var(--muted); text-align: center; }
.conversation-info-actions button strong { font-size: .72rem; }
.conversation-info-actions button.danger { color: #a33f4d; }
.contact-edit-form { margin: 0 22px 22px; display: grid; gap: 9px; }
.contact-edit-form[hidden] { display: none; }
.contact-edit-form label { font-size: .76rem; font-weight: 800; }
.contact-edit-form input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #cfd9d2; border-radius: 11px; color: var(--ink); background: var(--paper); outline: 0; }
.contact-edit-form input:focus { border-color: #4a9271; box-shadow: 0 0 0 3px rgba(22,131,92,.1); }
.contact-edit-form p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.contact-edit-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 5px; }
.contact-edit-actions .settings-primary { min-width: 120px; }
.mobile-nav { display: none; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translate(-50%, 20px); padding: 11px 15px; border-radius: 10px; background: var(--navy); color: #fff; box-shadow: var(--shadow); font-size: .78rem; opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --navy: #063d31;
  --navy-2: #173d2d;
  --ink: #e7f2e9;
  --muted: #b6c9bc;
  --line: #34493c;
  --paper: #192b20;
  --canvas: #101d18;
  --mint: #75dba5;
  --mint-deep: #a6ddb6;
  --indigo: #91d9a7;
  --amber: #f2d094;
  --rose: #f0a0ad;
  --shadow: 0 14px 42px rgba(0,0,0,.22);
}

[data-theme="dark"] body { background: var(--canvas); color: var(--ink); }
[data-theme="dark"] .sidebar { background: #082d24; }
[data-theme="dark"] .sidebar-toggle { border-color: #435d4a; color: #b8ebc3; background: #192b20; }
[data-theme="dark"] .sidebar-toggle:hover, [data-theme="dark"] .sidebar-toggle:focus-visible { background: #294333; }
[data-theme="dark"] .brand-mark { color: #103d2d; background: var(--mint); box-shadow: 0 8px 20px rgba(117,219,165,.12); }
[data-theme="dark"] .brand span,
[data-theme="dark"] .nav-item { color: #b6c9bc; }
[data-theme="dark"] .nav-item.active { color: #f3fff6; background: rgba(117,219,165,.16); }
[data-theme="dark"] .account-avatar { background: #214536; color: #a8e8bb; }
[data-theme="dark"] .account-menu-item:hover,
[data-theme="dark"] .account-menu-item.active { background: #294333; }
[data-theme="dark"] .account-alert-settings { background: rgba(255,255,255,.025); }
[data-theme="dark"] .account-toggle-item:hover { background: #294333; }
[data-theme="dark"] .account-switch { background: #52645a; }
[data-theme="dark"] .account-menu-logout { color: #f0a0ad; }
[data-theme="dark"] .account-menu-logout:hover { color: #ffc2cb; background: #482b31; }
[data-theme="dark"] .live-pill,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .conversation-workspace,
[data-theme="dark"] .conversation-list-panel,
[data-theme="dark"] .search-box,
[data-theme="dark"] .filter-chip,
[data-theme="dark"] .chat-panel,
[data-theme="dark"] .chat-header,
[data-theme="dark"] .message-bubble,
[data-theme="dark"] .read-only-composer,
[data-theme="dark"] .usage-heading-row select,
[data-theme="dark"] .chatgpt-account-card,
[data-theme="dark"] .usage-details-card,
[data-theme="dark"] .model-settings-card,
[data-theme="dark"] .action-button,
[data-theme="dark"] .outline-button { background: var(--paper); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .conversation-splitter { border-color: var(--line); background: #1b2d23; }
[data-theme="dark"] .conversation-splitter span { background: #667c6d; box-shadow: none; }
[data-theme="dark"] .conversation-splitter:hover, [data-theme="dark"] .conversation-splitter:focus-visible, [data-theme="dark"] .conversation-workspace.is-resizing .conversation-splitter { border-color: #5e8d6a; background: #294333; }
[data-theme="dark"] .settings-card,
[data-theme="dark"] .settings-form input,
[data-theme="dark"] .settings-form textarea { background: var(--paper); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .connection-row { background: var(--canvas); }
[data-theme="dark"] .settings-icon { background: #2b4634; color: #c1e6cc; }
[data-theme="dark"] .settings-icon.whatsapp-icon { background: #294d37; color: #a7e9bc; }
[data-theme="dark"] .settings-icon.skills-icon { background: #2b4053; color: #bcd2ea; }
[data-theme="dark"] .profile-picture-button { border-color: #42584a; background: #2b4634; color: #c1e6cc; }
[data-theme="dark"] .profile-picture-edit { border-color: #16231b; }
[data-theme="dark"] .skill-summary { color: #b8e8c7; background: #20372a; border-color: #3a5744; }
[data-theme="dark"] .skill-symbol { color: #c1e6cc; background: #2b4634; }
[data-theme="dark"] .skill-status { color: #b8e8c7; }
[data-theme="dark"] .settings-secondary { color: #c5e8cf; background: #294737; border-color: #587861; }
[data-theme="dark"] .settings-secondary:hover { background: #31553f; }
[data-theme="dark"] .message-row.outgoing.human-message .message-bubble { border-color: #346c9b; background: #173f61; color: #e5f2ff; }
[data-theme="dark"] .human-message-label { color: #8dc8fa; }
[data-theme="dark"] .manual-control-banner { border-color: #315f87; background: #152f45; }
[data-theme="dark"] .manual-control-banner strong { color: #b8dcfa; }
[data-theme="dark"] .manual-control-banner div span { color: #9bbbd3; }
[data-theme="dark"] .manual-message-form textarea { border-color: #315f87; color: var(--ink); background: #152a3a; }
[data-theme="dark"] .qr-panel { background: #fff; border-color: #587861; }
[data-theme="dark"] .quota-feature { background: linear-gradient(145deg, #063d31, #0f503e); border-color: #315f48; }
[data-theme="dark"] .model-server-badge { border-color: #315f48; color: #a6d7bd; background: #123d30; }
[data-theme="dark"] .model-field input,
[data-theme="dark"] .model-field textarea,
[data-theme="dark"] .model-field select { border-color: #315f48; color: var(--ink); background: #0d2b23; }
[data-theme="dark"] .conversation-meta,
[data-theme="dark"] .message-info { color: #b6c9bc; }
[data-theme="dark"] .search-box input { color: var(--ink); }
[data-theme="dark"] .search-box input::placeholder { color: #93a99b; }
[data-theme="dark"] .lock-icon { background: #24382b; color: #bfd3c3; border-color: #435d4a; }
[data-theme="dark"] .selection-icon-button { color: #c4d7ca; background: #24382b; border-color: #435d4a; }
[data-theme="dark"] .selection-icon-button:hover { background: #304b38; border-color: #587861; }
[data-theme="dark"] .selection-icon-button.copy { color: #12351f; background: #91d9a7; border-color: #91d9a7; }
[data-theme="dark"] .message-stream.selection-mode .message-row::before { border-color: #68806f; background: #192b20; }
[data-theme="dark"] .message-stream.selection-mode .message-row.selected::before { border-color: #91d9a7; color: #12351f; background: #91d9a7; }
[data-theme="dark"] .message-row.selected .message-bubble { outline-color: rgba(145,217,167,.62); }
[data-theme="dark"] .message-context-menu { background: #192b20; border-color: #435d4a; box-shadow: 0 12px 34px rgba(0,0,0,.4); }
[data-theme="dark"] .message-context-menu button:hover { background: #294333; }
[data-theme="dark"] .conversation-context-menu { background: #192b20; border-color: #435d4a; box-shadow: 0 14px 38px rgba(0,0,0,.45); }
[data-theme="dark"] .conversation-context-menu button:hover, [data-theme="dark"] .conversation-context-menu button:focus-visible { background: #294333; }
[data-theme="dark"] .conversation-menu-button:hover, [data-theme="dark"] .conversation-menu-button:focus-visible { background: #294333; }
[data-theme="dark"] .message-reaction-picker { background: #192b20; border-color: #435d4a; box-shadow: 0 12px 34px rgba(0,0,0,.4); }
[data-theme="dark"] .message-reaction-picker button:hover, [data-theme="dark"] .message-reaction-picker button:focus-visible { background: #294333; }
[data-theme="dark"] .reaction-details-tabs button:hover, [data-theme="dark"] .reaction-details-tabs button:focus-visible { background: #294333; }
[data-theme="dark"] .reaction-details-tabs button.active { border-color: #4f9b68; color: #b8ebc3; background: #294d37; }
[data-theme="dark"] .message-correction-trigger { color: #a7d8b5; }
[data-theme="dark"] .message-correction-trigger:hover, [data-theme="dark"] .message-correction-trigger:focus-visible, [data-theme="dark"] .message-delete-trigger:hover, [data-theme="dark"] .message-delete-trigger:focus-visible { color: #cbf7d6; background: #294333; }
[data-theme="dark"] .message-contact-card { border-color: #345946; background: rgba(255,255,255,.045); }
[data-theme="dark"] .message-contact-avatar { background: #5d3228; color: #ffb48e; }
[data-theme="dark"] .message-contact-action { border-top-color: #345946; color: #23c978; }
[data-theme="dark"] .message-contact-action:hover, [data-theme="dark"] .message-contact-action:focus-visible { color: #78e9ab; background: rgba(35,201,120,.1); }
[data-theme="dark"] .message-reply-preview { border-left-color: #68c794; background: rgba(255,255,255,.075); }
[data-theme="dark"] .message-reply-preview strong { color: #91deb1; }
[data-theme="dark"] .message-reply-preview span { color: #c5d8cb; }
[data-theme="dark"] .correction-dialog textarea { color: var(--ink); background: #192b20; border-color: #435d4a; }
[data-theme="dark"] .correction-mode-option { background: #192b20; border-color: #435d4a; }
[data-theme="dark"] .correction-mode-option:has(input:checked) { background: #253f30; border-color: #72b68a; }
[data-theme="dark"] .filter-chip.active { background: #b8ebc3; border-color: #b8ebc3; color: #12351f; }
[data-theme="dark"] .filter-count { color: #b8ebc3; background: #294d37; }
[data-theme="dark"] .filter-chip.active .filter-count { color: inherit; background: rgba(18,53,31,.15); }
[data-theme="dark"] .contacts-summary { border-color: #3b6a4b; background: #203e2c; }
[data-theme="dark"] .contacts-summary-icon { color: #b8ebc3; background: #294d37; }
[data-theme="dark"] .contacts-search,
[data-theme="dark"] .google-contact-card { color: var(--ink); background: var(--paper); border-color: var(--line); }
[data-theme="dark"] .google-contact-avatar { color: #c1e6cc; background: #2b4634; }
[data-theme="dark"] .contact-source-badge { color: #c4d7ca; background: #294333; }
[data-theme="dark"] .google-contact-status { color: #91d9a7; }
[data-theme="dark"] .contact-edit-button { color: #c4d7ca; border-color: #435d4a; }
[data-theme="dark"] .contact-edit-button:hover { background: #294333; border-color: #587861; }
[data-theme="dark"] .contact-instruct-button { color: #f4fff7; background: #177650; border-color: #43a579; }
[data-theme="dark"] .outreach-field select, [data-theme="dark"] .outreach-field textarea { color: var(--ink); background: #192b20; border-color: #435d4a; }
[data-theme="dark"] .conversation-item:hover { background: #253b2d; }
[data-theme="dark"] .conversation-item.active { background: #294333; }
[data-theme="dark"] .conversation-mute-setting { color: var(--ink); background: #253b2d; border-color: #435d4a; }
[data-theme="dark"] .conversation-mute-setting:hover, [data-theme="dark"] .conversation-mute-setting.active { background: #294333; border-color: #587861; }
[data-theme="dark"] .chat-search-bar, [data-theme="dark"] .conversation-info-actions button { background: #21362a; }
[data-theme="dark"] .chat-search-panel { border-color: #395044; background: #17281f; }
[data-theme="dark"] .chat-search-form { border-color: #435d4a; background: #21362a; }
[data-theme="dark"] .chat-search-result-item:hover, [data-theme="dark"] .chat-search-result-item:focus-visible { background: #294334; }
[data-theme="dark"] .chat-search-result-copy strong { color: #a9ddbd; }
[data-theme="dark"] .chat-search-result-copy > span:last-child { color: #bfd0c4; }
[data-theme="dark"] .chat-search-result-copy mark { color: #e8fff0; background: #276d49; }
[data-theme="dark"] .chat-search-bar input { border-color: #435d4a; background: #17281f; }
[data-theme="dark"] .conversation-mute-icon { background: #344a3a; }
[data-theme="dark"] .chat-heading-copy.group-clickable:hover { background: #253b2d; }
[data-theme="dark"] .avatar { background: #2b4634; color: #c1e6cc; }
[data-theme="dark"] .avatar.group { background: #0c4256; color: #67c4d6; }
[data-theme="dark"] .context-banner { background: #253a2c; border-color: #435d4a; }
[data-theme="dark"] .context-icon { background: #35533e; color: #c1e6cc; }
[data-theme="dark"] .context-banner p { color: #bfd4c6; }
[data-theme="dark"] .message-stream { background: linear-gradient(rgba(16,29,24,.96), rgba(16,29,24,.96)), radial-gradient(circle at 20% 30%, #3b5143 1px, transparent 1px); }
[data-theme="dark"] .date-divider { color: #c4d7ca; }
[data-theme="dark"] .date-divider span { border-color: rgba(74,102,83,.88); background: rgba(32,53,40,.94); box-shadow: 0 3px 12px rgba(0,0,0,.2); }
[data-theme="dark"] .message-row.outgoing .message-bubble { background: #2d5136; border-color: #496750; color: #f2fff3; }
[data-theme="dark"] .wa-inline-code, [data-theme="dark"] .wa-code-block { background: rgba(255,255,255,.1); }
[data-theme="dark"] .wa-quote { color: #cae2d2; border-left-color: #72d39d; }
[data-theme="dark"] .wa-link { color: #8fe4b3; }
[data-theme="dark"] .message-reaction { border-color: #435d4a; background: #24382b; }
[data-theme="dark"] .message-reaction:hover, [data-theme="dark"] .message-reaction:focus-visible { border-color: #658d70; background: #294333; }
[data-theme="dark"] .attachment { background: #1b3024; }
[data-theme="dark"] .attachment:hover { background: #304b38; border-color: #587861; }
[data-theme="dark"] .attachment-image { background: #1b3024; }
[data-theme="dark"] .attachment-image.is-loading::before,
[data-theme="dark"] .attachment-image.is-error::before { color: #c4d7ca; background: #1b3024; }
[data-theme="dark"] .attachment-preview-body,
[data-theme="dark"] .sheet-table-wrap { background: var(--canvas); border-color: var(--line); }
[data-theme="dark"] .group-summary,
[data-theme="dark"] .group-description { background: var(--canvas); }
[data-theme="dark"] .group-member-list { background: var(--paper); }
[data-theme="dark"] .group-summary-avatar,
[data-theme="dark"] .group-member-avatar { color: #c1e6cc; background: #2b4634; }
[data-theme="dark"] .group-member-badge { color: #b8ebc3; background: #294737; }
[data-theme="dark"] .group-member-badge.creator { color: #f2d094; background: #473821; }
[data-theme="dark"] .conversation-media-summary,
[data-theme="dark"] .conversation-doc-item,
[data-theme="dark"] .conversation-link-item { background: var(--paper); }
[data-theme="dark"] .conversation-media-summary:hover,
[data-theme="dark"] .conversation-doc-item:hover,
[data-theme="dark"] .conversation-link-item:hover { background: #243b2c; }
[data-theme="dark"] .conversation-media-summary-icon { color: #b8ebc3; background: #294737; }
[data-theme="dark"] .conversation-media-preview-item,
[data-theme="dark"] .conversation-media-image { background: #26372d; }
[data-theme="dark"] .ephemeral-avatar-badge { border-color: #182a20; background: #3c5145; }
[data-theme="dark"] .conversation-ephemeral-setting { background: var(--canvas); }
[data-theme="dark"] .conversation-ephemeral-setting > span { background: #2b4233; }
[data-theme="dark"] .conversation-ephemeral-setting.active { border-color: #426d50; background: #203e2d; }
[data-theme="dark"] .sheet-table tr:first-child td { background: #294333; }
[data-theme="dark"] .action-button:hover,
[data-theme="dark"] .outline-button:hover,
[data-theme="dark"] .theme-toggle:hover { background: #294737; border-color: #587861; }
[data-theme="dark"] .action-button.active { background: #473821; border-color: #806a43; color: #f2d094; }
[data-theme="dark"] .resume-prompt { border-color: #3d7656; background: #203e2d; }
[data-theme="dark"] .resume-prompt.pending { border-color: #496353; background: #293a30; }
[data-theme="dark"] .resume-prompt strong { color: #b7e8c7; }
[data-theme="dark"] .resume-prompt div > span { color: #a8bcae; }
[data-theme="dark"] .resume-dismiss-button { border-color: #527361; color: #c4ddcc; background: #173326; }
[data-theme="dark"] .followup-status-badge { color: #ffdaa1; background: #5a3c13; }
[data-theme="dark"] .data-dialog { background: var(--paper); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .data-dialog dl div { background: var(--canvas); }
[data-theme="dark"] .infrastructure-health { border-color: #3b6a4b; background: #203e2c; }
[data-theme="dark"] .reminders-summary { border-color: #3b6a4b; background: #203e2c; }
[data-theme="dark"] .reminders-summary.unavailable { border-color: #725d35; background: #3d3422; }
[data-theme="dark"] .reminders-summary-icon,
[data-theme="dark"] .reminder-card-icon,
[data-theme="dark"] .reminders-empty > span { color: #b8ebc3; background: #294d37; }
[data-theme="dark"] .reminder-card,
[data-theme="dark"] .reminders-empty { background: var(--paper); border-color: var(--line); }
[data-theme="dark"] .reminder-table-section { background: var(--paper); border-color: var(--line); }
[data-theme="dark"] .reminder-table-heading,
[data-theme="dark"] .reminder-table tbody tr:hover td,
[data-theme="dark"] .reminder-pagination { background: #182d23; }
[data-theme="dark"] .reminder-table th { background: var(--canvas); }
[data-theme="dark"] .reminder-table th,
[data-theme="dark"] .reminder-table td { border-color: var(--line); }
[data-theme="dark"] .reminder-table-heading > span { color: #b8ebc3; background: #294d37; }
[data-theme="dark"] .reminder-detail { background: var(--canvas); }
[data-theme="dark"] .reminder-status { color: #b8ebc3; border-color: #3b6a4b; background: #203e2c; }
[data-theme="dark"] .reminder-status.paused { color: #f2d094; border-color: #725d35; background: #3d3422; }
[data-theme="dark"] .email-summary,
[data-theme="dark"] .email-list-shell,
[data-theme="dark"] .email-row { background: var(--paper); border-color: var(--line); }
[data-theme="dark"] .email-summary.unavailable { border-color: #725d35; background: #3d3422; }
[data-theme="dark"] .email-toolbar { background: #182d23; border-color: var(--line); }
[data-theme="dark"] .email-read-filters { background: var(--paper); border-color: var(--line); }
[data-theme="dark"] .email-read-filter.active { color: #a8c7fa; border-color: #395c86; background: #1d3557; }
[data-theme="dark"] .email-row-actions { background: #182d23; }
[data-theme="dark"] .email-pagination { background: #182d23; border-color: var(--line); }
[data-theme="dark"] .email-folder-tab.active { color: #a8c7fa; background: #1d3557; }
[data-theme="dark"] .email-row.unread { background: #172c3f; }
[data-theme="dark"] .email-thread-screen,
[data-theme="dark"] .email-thread-message { background: var(--paper); border-color: var(--line); }
[data-theme="dark"] .email-thread-toolbar { background: #182d23; border-color: var(--line); }
[data-theme="dark"] .email-thread-message.latest { background: #172c24; }
[data-theme="dark"] .gmail-compose-button { color: #dbe8e0; background: #285866; }
[data-theme="dark"] .gmail-compose-button:hover { background: #326b7b; }
[data-theme="dark"] .email-compose-heading { color: var(--ink); background: #1d352b; }
[data-theme="dark"] .infrastructure-health.attention { border-color: #725d35; background: #3d3422; }
[data-theme="dark"] .infrastructure-progress { background: #304b3a; }
[data-theme="dark"] .mobile-nav { background: rgba(16,29,24,.96); border-color: #34493c; }
[data-theme="dark"] .mobile-nav > button,
[data-theme="dark"] .mobile-account-trigger { color: #9eb1a4; }
[data-theme="dark"] .mobile-nav > button.active,
[data-theme="dark"] .mobile-account-trigger.active { color: #91d9a7; background: #293f34; }

@media (max-width: 1040px) {
  .conversation-workspace { --conversation-list-width: 310px; }
}

@media (max-width: 760px) {
  .auth-card { padding: 24px 20px; border-radius: 18px; }
  .auth-brand { margin-bottom: 25px; }
  .auth-card h1 { font-size: 1.45rem; }
  body { padding-bottom: 70px; }
  .app-shell { display: block; min-height: 100vh; }
  .sidebar { display: none; }
  .sidebar-toggle { display: none !important; }
  .main-stage { padding: 18px 14px 12px; }
  .topbar { min-height: 52px; margin-bottom: 14px; align-items: center; }
  .eyebrow { font-size: .66rem; }
  h1 { font-size: 1.45rem; }
  .notification-button { display: none; }
  .theme-toggle { width: 36px; padding: 0; }
  .theme-label { display: none; }
  .conversation-workspace { height: calc(100vh - 150px); min-height: 500px; display: block; border-radius: 17px; }
  .conversation-splitter { display: none; }
  .conversation-list-panel, .chat-panel { height: 100%; border: 0; }
  .chat-panel { display: none; }
  .conversation-workspace.chat-open .conversation-list-panel { display: none; }
  .conversation-workspace.chat-open .chat-panel { display: grid; }
  .panel-heading { padding-top: 17px; }
  .conversation-item { padding: 13px 11px; }
  .conversation-menu-button { opacity: 1; }
  .mobile-back { display: grid; }
  .chat-header { padding: 10px; display: grid; grid-template-columns: 36px 42px minmax(0, 1fr) 36px; gap: 8px 10px; }
  .chat-header-search-button { grid-column: 4; }
  .chat-actions { grid-column: 1 / -1; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .chat-actions.has-outreach { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chat-actions.has-pause { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chat-actions.has-outreach.has-pause { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-actions .action-button { width: 100%; min-width: 0; height: 38px; padding: 0 9px; justify-content: center; font-size: .72rem; }
  .chat-actions .icon-button { display: none; }
  .chat-search-panel { width: 100%; }
  .context-banner { margin: 9px 10px 0; }
  .message-stream { padding: 18px 12px; }
  .message-cluster { max-width: 88%; }
  .resume-prompt { margin: 0 10px 8px; padding: 10px; grid-template-columns: 32px minmax(0, 1fr); }
  .resume-prompt-icon { width: 32px; height: 32px; }
  .resume-prompt-actions { grid-column: 1 / -1; width: 100%; display: grid; grid-template-columns: 1fr; }
  .resume-prompt-button, .resume-dismiss-button { width: 100%; }
  .manual-control-banner { margin: 0 10px 8px; padding: 10px; grid-template-columns: 32px minmax(0, 1fr); }
  .manual-control-icon { width: 32px; height: 32px; }
  .manual-resume-button { grid-column: 1 / -1; width: 100%; }
  .read-only-composer { min-height: 60px; padding: 9px 11px; }
  .read-only-composer div span { display: none; }
  .manual-message-form { grid-template-columns: minmax(0, 1fr) 68px; }
  .outline-button { padding: 0 9px; }
  .email-heading-row { align-items: stretch; flex-direction: column; }
  .email-heading-actions { justify-content: space-between; }
  .email-thread-heading { padding: 18px 15px 12px; align-items: flex-start; }
  .email-thread-title-line { align-items: flex-start; flex-wrap: wrap; }
  .email-calendar-card, .email-calendar-source { margin-left: 0; }
  .email-calendar-status { position: static; display: block; margin-top: 10px; }
  .email-thread-list { padding: 0 10px 10px; }
  .email-thread-message { padding: 13px; }
  .email-thread-message header { grid-template-columns: 34px minmax(0, 1fr); }
  .email-thread-avatar { width: 34px; height: 34px; }
  .email-thread-message time { grid-column: 2; margin-top: 3px; }
  .email-thread-body, .email-thread-attachments { padding-left: 0; }
  .email-html-frame { width: 100%; margin-left: 0; }
  .email-thread-actions { padding: 10px 12px 18px; }
  .email-thread-actions .outline-button { flex: 1; }
  .mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(64px + env(safe-area-inset-bottom)); padding: 6px 8px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(16px); }
  .mobile-nav > button, .mobile-account-trigger { width: min(120px, 100%); height: 52px; justify-self: center; border: 0; border-radius: 12px; background: transparent; color: #8b94a5; display: grid; place-items: center; font-size: .72rem; font-weight: 700; transition: color .18s ease, background .18s ease; }
  .mobile-nav > button.active, .mobile-account-trigger.active { color: var(--indigo); background: #edf6ef; }
  .mobile-account-menu { width: 100%; display: grid; place-items: center; }
  .mobile-account-trigger { padding: 2px; }
  .mobile-account-trigger .account-avatar { width: 36px; height: 36px; }
  .mobile-account-trigger > span:last-child { font-size: .72rem; }
  .mobile-account-menu .account-menu-panel { position: fixed; left: auto; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); width: min(290px, calc(100vw - 24px)); }
  .contacts-heading-row { align-items: flex-start; }
  .contacts-heading-row h2 { font-size: 1.2rem; }
  .contacts-heading-row p { max-width: 240px; font-size: .76rem; line-height: 1.45; }
  .contacts-summary { padding: 14px; grid-template-columns: 40px minmax(0, 1fr); }
  .contacts-heading-actions { flex-direction: column; align-items: stretch; }
  .contacts-heading-actions button { min-height: 40px; }
  .contacts-summary-icon { width: 40px; height: 40px; }
  .contacts-summary small { grid-column: 2; margin-top: -5px; white-space: normal; }
  .google-contact-list { grid-template-columns: 1fr; gap: 9px; }
  .google-contact-card { padding: 14px; grid-template-columns: 44px minmax(0, 1fr); }
  .google-contact-avatar { width: 44px; height: 44px; }
  .google-contact-actions { grid-column: 2; margin-top: -4px; flex-direction: row; align-items: center; }
  .usage-heading-row { align-items: flex-start; }
  .reminders-heading-row { align-items: center; }
  .reminders-heading-row h2 { font-size: 1.2rem; }
  .reminders-heading-row p:not(.eyebrow) { font-size: .76rem; }
  .reminders-summary { padding: 14px; grid-template-columns: 40px minmax(0, 1fr); }
  .reminders-summary-icon { width: 40px; height: 40px; }
  .reminders-summary small { grid-column: 2; }
  .reminder-card { padding: 15px; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .reminder-card-details { grid-template-columns: 1fr 1fr; }
  .reminder-table-section { border-radius: 14px; }
  .reminder-table-heading { padding: 11px 13px; }
  .reminder-table { min-width: 650px; }
  .reminder-table th, .reminder-table td { padding-left: 10px; padding-right: 10px; }
  .reminder-pagination { align-items: stretch; flex-direction: column; }
  .reminder-pagination > div { justify-content: space-between; }
  .email-heading-row { align-items: stretch; flex-direction: column; }
  .email-heading-actions { width: 100%; }
  .gmail-compose-button { flex: 1; justify-content: center; }
  .email-heading-row h2 { font-size: 1.2rem; }
  .email-heading-row p:not(.eyebrow) { font-size: .76rem; }
  .email-summary { padding: 14px; grid-template-columns: 40px minmax(0, 1fr); }
  .email-summary small { grid-column: 2; }
  .email-toolbar { align-items: center; flex-wrap: wrap; }
  .email-folder-tabs { width: 100%; }
  .email-folder-tab { flex: 1; justify-content: center; }
  .email-toolbar-actions { width: 100%; min-height: 36px; justify-content: flex-end; }
  .email-read-legend { margin-right: auto; padding: 0 8px; }
  .email-read-filters { overflow-x: auto; }
  .email-row-toggle, button.email-row { grid-template-columns: minmax(110px, .75fr) minmax(0, 1.4fr); }
  .email-row-date { grid-column: 1 / -1; padding: 0 14px 9px 35px; }
  .email-compose-dialog { width: calc(100vw - 12px); max-height: calc(100vh - 12px); border-radius: 14px; }
  .email-compose-form { max-height: calc(100vh - 12px); }
  .email-compose-fields { padding: 0 13px; }
  .email-body-input { min-height: 190px; }
  .email-compose-actions { padding: 9px 13px; }
  .email-attach-button span:last-child { display: none; }
  .nivi-canary .mobile-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .usage-heading-row select { min-width: 0; width: 144px; font-size: .72rem; }
  .chatgpt-account-card { grid-template-columns: 38px minmax(0, 1fr); padding: 14px; }
  .chatgpt-account-icon { width: 38px; height: 38px; }
  .chatgpt-account-badge { grid-column: 2; justify-self: start; }
  .usage-grid { grid-template-columns: 1fr; gap: 10px; }
  .quota-feature { width: 100%; padding: 18px; }
  .quota-copy strong { font-size: 3rem; }
  .quota-bar { margin-top: 22px; }
  .quota-feature footer { margin-top: 22px; }
  .usage-details-card { padding: 18px; }
  .model-settings-card { padding: 18px; }
  .model-settings-heading { display: grid; gap: 12px; }
  .model-server-badge { justify-self: start; }
  .model-settings-form { grid-template-columns: 1fr; }
  .model-settings-actions { grid-column: 1; display: grid; gap: 8px; }
  .model-settings-actions .settings-primary { width: 100%; }
  .infrastructure-heading-row { align-items: center; }
  .infrastructure-heading-row h2 { font-size: 1.2rem; }
  .infrastructure-health { padding: 15px; grid-template-columns: 11px minmax(0, 1fr); }
  .infrastructure-health > small { grid-column: 2; }
  .infrastructure-grid { grid-template-columns: 1fr; gap: 10px; }
  .infrastructure-card, .infrastructure-services { padding: 18px; border-radius: 17px; }
  .infrastructure-services { grid-template-columns: 1fr; gap: 14px; }
  .settings-heading h2 { font-size: 1.2rem; }
  .settings-grid { grid-template-columns: 1fr; gap: 10px; }
  .settings-card { padding: 18px; border-radius: 17px; }
  .settings-card-heading { margin-bottom: 18px; }
  .skills-card .settings-card-heading { grid-template-columns: 44px minmax(0, 1fr); }
  .skill-summary { grid-column: 1 / -1; width: 100%; display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
  .skill-summary span { margin-top: 0; }
  .skill-list { grid-template-columns: 1fr; }
  .skill-list li { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 13px; }
  .skill-symbol { width: 36px; height: 36px; }
  .attachment-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .attachment-preview-body { max-height: calc(100vh - 170px); margin: 4px 10px 14px; }
  .attachment-preview-pdf { height: 68vh; }
  .attachment-dialog .dialog-heading { padding: 16px 14px 8px; }
  .attachment-dialog .dialog-actions { margin: 0 10px 12px; }
  .attachment-dialog.is-pdf { width: 100vw; height: 100vh; max-height: none; }
  .attachment-dialog.is-pdf .dialog-heading { min-height: 64px; padding: 9px 10px; }
  .attachment-dialog.is-pdf .attachment-viewer-mark { width: 36px; height: 36px; }
  .attachment-dialog.is-pdf .dialog-heading h2 { max-width: 44vw; font-size: .78rem; }
  .attachment-dialog.is-pdf .attachment-dialog-meta { max-width: 46vw; font-size: .6rem; }
  .attachment-dialog.is-pdf .attachment-toolbar .attachment-download { width: 38px; min-width: 38px; padding: 0; justify-content: center; }
  .attachment-dialog.is-pdf .attachment-toolbar .attachment-download > span:last-child { display: none; }
  .attachment-dialog.is-image { width: 100vw; height: 100vh; max-height: none; }
  .attachment-dialog.is-image .dialog-heading { min-height: 64px; padding: 9px 10px; }
  .attachment-dialog.is-image .attachment-viewer-mark { width: 36px; height: 36px; }
  .attachment-dialog.is-image .dialog-heading h2 { max-width: 42vw; font-size: .78rem; }
  .attachment-dialog.is-image .attachment-dialog-meta { max-width: 44vw; font-size: .6rem; }
  .attachment-dialog.is-image .attachment-toolbar .attachment-download { width: 38px; min-width: 38px; padding: 0; justify-content: center; }
  .attachment-dialog.is-image .attachment-toolbar .attachment-download > span:last-child { display: none; }
  .attachment-image-stage { padding: 10px 48px 6px; }
  .attachment-image-nav { width: 36px; height: 36px; font-size: 1.7rem; }
  .attachment-image-nav.previous { left: 8px; }
  .attachment-image-nav.next { right: 8px; }
  .attachment-image-caption { max-width: calc(100vw - 20px); padding: 4px 10px 8px; font-size: .67rem; }
  .attachment-image-gallery { min-height: 72px; padding: 6px 10px 8px; justify-content: flex-start; }
  .attachment-gallery-item { width: 48px; height: 54px; }
  .group-dialog .dialog-heading { padding: 17px 16px 10px; }
  .group-summary, .data-dialog .group-facts, .group-member-heading, .group-member-list { margin-left: 14px; margin-right: 14px; }
  .group-description { margin-left: 14px !important; margin-right: 14px !important; }
  .data-dialog .group-facts { grid-template-columns: 1fr; }
  .group-member-list { max-height: min(320px, calc(100vh - 450px)); }
  .group-member-row { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 9px 10px; }
  .group-member-avatar { width: 38px; height: 38px; }
  .group-dialog .dialog-actions { margin: 0 14px 14px; }
  .conversation-media-summary { width: calc(100% - 28px); margin-right: 14px; margin-left: 14px; grid-template-columns: 32px minmax(0, 1fr) auto auto; }
  .conversation-media-summary-preview { display: none; }
  .conversation-ephemeral-setting { margin-right: 14px; margin-left: 14px; }
  .conversation-media-dialog { width: 100vw; height: 100vh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .conversation-media-content { padding: 14px; }
  .conversation-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .conversation-doc-item, .conversation-link-item { grid-template-columns: 38px minmax(0, 1fr); }
  .conversation-media-item-date { display: none; }
  .correction-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .correction-dialog .dialog-heading { padding: 17px 16px 9px; }
  .correction-intro { padding: 0 16px !important; }
  .correction-context { margin: 14px 16px 12px; grid-template-columns: 1fr; }
  .correction-context p { max-height: 95px; }
  .correction-mode { margin-left: 16px; margin-right: 16px; grid-template-columns: 1fr; }
  .correction-note-label { margin-left: 16px; margin-right: 16px; }
  .correction-dialog textarea { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
  .correction-status { padding-left: 16px !important; padding-right: 16px !important; }
  .correction-actions { margin-left: 16px; margin-right: 16px; }
  .outreach-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .outreach-dialog .dialog-heading { padding: 17px 16px 9px; }
  .outreach-intro { padding: 0 16px !important; }
  .outreach-field { margin-left: 16px; margin-right: 16px; }
  .outreach-status { padding-left: 16px !important; padding-right: 16px !important; }
  .outreach-actions { margin-left: 16px; margin-right: 16px; }
  .toast { bottom: 82px; width: max-content; max-width: calc(100vw - 28px); text-align: center; }
}

@media (max-width: 390px) {
  .conversation-workspace { height: calc(100vh - 150px); }
  .context-banner { grid-template-columns: 26px 1fr; }
  .context-banner .icon-button { display: none; }
}