: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 { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 20px 20px; background: var(--navy); color: #fff; display: flex; flex-direction: column; z-index: 10; }
.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 { width: 100%; border: 0; border-radius: 13px; padding: 13px 14px; display: grid; grid-template-columns: 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 { color: var(--mint); font-size: 1.25rem; }
.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; }
.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-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); }
.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; }
.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 { height: calc(100vh - 149px); min-height: 560px; display: grid; grid-template-columns: minmax(285px, 360px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; 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; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: #fcfdfb; }
.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; 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); }
.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: #e9f6ed; color: #187e68; }
.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; }
.conversation-copy { min-width: 0; }
.conversation-title-line { display: flex; align-items: center; gap: 5px; }
.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; }
.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); }
.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-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-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; }
.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; height: 100%; overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; background: #fff; }
.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; }
.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; }
.action-button.active { border-color: #efc876; background: #fff8e8; color: #9b6705; }
.mobile-back { display: none; font-size: 1.8rem; }
.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-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-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; background: #fff; box-shadow: 0 2px 7px rgba(14,30,62,.08); font-size: .83rem; line-height: 1; }
.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 { max-width: 100%; margin: 0; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; font-size: .82rem; line-height: 1.48; }
.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."; }
.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; }
.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-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; }

.usage-heading-row { display: flex; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.usage-heading-row h2 { margin-bottom: 0; font: 800 1.4rem "Manrope", sans-serif; }
.usage-heading-row select { min-width: 170px; padding: 10px 34px 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.usage-grid { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(340px, 1.15fr); gap: 14px; }
.quota-feature { padding: 24px; border-radius: 20px; 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: 20px; font: 800 3.8rem/1 "Manrope", sans-serif; letter-spacing: -.07em; }
.quota-copy p { color: var(--mint); font-size: .9rem; font-weight: 700; }
.quota-bar { height: 8px; margin-top: 32px; 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: 36px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); color: #b9d0c4; font-size: .72rem; }
.usage-details-card { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: 0 6px 22px rgba(14,30,62,.035); }
.usage-details-card h3 { margin-bottom: 14px; font: 800 1rem "Manrope", sans-serif; }
.usage-details-card dl { margin: 0; }
.usage-details-card dl div { min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); }
.usage-details-card dt { color: var(--muted); font-size: .8rem; }
.usage-details-card dd { margin: 0; font: 800 1rem "Manrope", sans-serif; }

.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-refresh { min-height: 38px; flex: 0 0 auto; }
.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.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-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); }
.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; }
.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; }
.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-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; }
.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; }
.group-dialog { width: min(560px, calc(100vw - 20px)); max-height: min(760px, calc(100vh - 20px)); }
.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; }
.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(430px, calc(100vh - 310px)); margin: 0 22px 18px; overflow: auto; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.group-member-row { min-height: 62px; padding: 10px 12px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; align-items: center; border-top: 1px solid var(--line); }
.group-member-row:first-child { border-top: 0; }
.group-member-avatar { width: 40px; height: 40px; }
.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: .78rem; }
.group-member-copy span { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.group-member-badge { padding: 4px 7px; border-radius: 999px; color: #18724c; background: #e5f5ea; font-size: .6rem; font-weight: 800; white-space: nowrap; }
.group-member-badge.creator { color: #8a5a00; background: #fff1ce; }
.group-member-state { min-height: 120px; display: grid; place-items: center; padding: 22px; color: var(--muted); font-size: .76rem; 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; }
.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"] .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-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"] .usage-details-card,
[data-theme="dark"] .action-button,
[data-theme="dark"] .outline-button { background: var(--paper); color: var(--ink); border-color: var(--line); }
[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"] .qr-panel { background: #fff; border-color: #587861; }
[data-theme="dark"] .quota-feature { background: linear-gradient(145deg, #063d31, #0f503e); border-color: #315f48; }
[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"] .filter-chip.active { background: #b8ebc3; border-color: #b8ebc3; color: #12351f; }
[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"] .conversation-item:hover { background: #253b2d; }
[data-theme="dark"] .conversation-item.active { background: #294333; }
[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: #294d37; color: #a7e9bc; }
[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"] .message-reaction { border-color: #435d4a; background: #24382b; }
[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"] .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"] .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"] .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 { grid-template-columns: 310px minmax(0, 1fr); }
}

@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; }
  .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-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; }
  .mobile-back { display: grid; }
  .chat-header { padding: 10px; display: grid; grid-template-columns: 36px 42px minmax(0, 1fr); gap: 8px 10px; }
  .chat-actions { grid-column: 1 / -1; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .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; }
  .context-banner { margin: 9px 10px 0; }
  .message-stream { padding: 18px 12px; }
  .message-cluster { max-width: 88%; }
  .read-only-composer { min-height: 60px; padding: 9px 11px; }
  .read-only-composer div span { display: none; }
  .outline-button { padding: 0 9px; }
  .mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(64px + env(safe-area-inset-bottom)); padding: 6px 12px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(3, 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-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; }
  .usage-heading-row select { min-width: 0; width: 144px; font-size: .72rem; }
  .usage-grid { grid-template-columns: 1fr; gap: 10px; }
  .quota-feature { padding: 20px; }
  .quota-copy strong { font-size: 3rem; }
  .quota-bar { margin-top: 22px; }
  .quota-feature footer { margin-top: 22px; }
  .usage-details-card { padding: 18px; }
  .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; }
  .group-dialog .dialog-heading { padding: 17px 16px 10px; }
  .group-summary, .group-member-heading, .group-member-list { margin-left: 14px; margin-right: 14px; }
  .group-description { margin-left: 14px !important; margin-right: 14px !important; }
  .group-member-list { max-height: calc(100vh - 300px); }
  .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; }
  .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; }
}