:root {
  color-scheme: light;
  --bg:#ffffff; --surface:#fafafa; --hover:#f4f4f4; --selected:#ededed;
  --ink:#141414; --secondary:#666666; --muted:#767676; --line:#e9e9e9;
  --solid:#171717; --on-solid:#ffffff; --incoming:#f0f0f0; --outgoing:#171717;
  --scrim:#00000055; --shadow:0 12px 48px #00000014;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; color:var(--ink); background:var(--bg); font-synthesis:none; accent-color:var(--ink);
}
:root[data-theme=dark] {
  color-scheme:dark;
  --bg:#111111; --surface:#161616; --hover:#202020; --selected:#292929;
  --ink:#f2f2f2; --secondary:#aaaaaa; --muted:#999999; --line:#292929;
  --solid:#eeeeee; --on-solid:#111111; --incoming:#252525; --outgoing:#eeeeee;
  --scrim:#00000088; --shadow:0 12px 48px #00000055;
}
* {box-sizing:border-box}
body {margin:0;background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,select {font:inherit}
button,a,input,select {touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button {cursor:pointer;border:0;color:inherit}
button:disabled {cursor:wait;opacity:.4}
a {color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible {outline:2px solid var(--ink);outline-offset:3px}
input,select {min-width:0;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;padding:12px;outline:none}
input::placeholder {color:var(--muted)}
input:focus,select:focus {border-color:var(--secondary)}
label {display:block;margin:22px 0 9px;font-size:13px;font-weight:500}
svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.hidden {display:none!important}
.primary,.secondary {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 16px;border-radius:10px;font-size:13px;font-weight:550}
.primary {background:var(--solid);color:var(--on-solid)}
.secondary {background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.secondary:hover,.icon-button:hover {background:var(--hover)}
.full {width:100%}
.compact {min-height:40px;padding:9px 13px;font-size:12px}
.icon-button {display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:8px;border-radius:10px;background:transparent;color:var(--secondary);flex-shrink:0;font-size:26px;font-weight:300}
.text-button {background:none;padding:5px;color:var(--secondary);font-size:12px;min-height:32px}
.wordmark {display:flex;align-items:center;gap:10px;font-size:20px;font-weight:650;letter-spacing:-.6px}
.theme-control {display:flex;gap:2px;background:var(--hover);padding:3px;border:1px solid var(--line);border-radius:10px}
.theme-control button {display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 9px;border-radius:7px;background:transparent;color:var(--secondary);font-size:11px;min-height:30px}
.theme-control button[aria-pressed=true] {background:var(--bg);color:var(--ink);box-shadow:0 1px 3px #0000000d}
.theme-control svg {width:14px;height:14px}
.landing {min-height:100dvh;display:flex;flex-direction:column}
.landing-header {padding:26px 36px;display:flex;align-items:center;justify-content:space-between}
.welcome {width:min(100% - 40px,360px);margin:auto;flex:1;display:flex;align-items:center;padding:48px 0 64px}
.login-card {width:100%}
.login-card h1 {font-size:29px;letter-spacing:-1px;font-weight:600;margin:0 0 10px;line-height:1.2}
.login-card>p {font-size:13px;color:var(--secondary);line-height:1.7;margin:0 0 30px}
.login-card input {width:100%;height:48px;font-size:16px}
.login-card .primary {margin:26px 0 10px;min-height:48px;font-size:14px}
.login-card .secondary {min-height:48px;font-size:14px}
.login-card .security-copy {font-size:11px;line-height:1.7;margin:22px 6px 0;text-align:center;color:var(--muted)}
.landing-footer {padding:24px;text-align:center;font-size:11px;color:var(--muted)}
.sidebar-brand {display:flex;align-items:center;justify-content:space-between;padding:0 10px;margin-bottom:28px}
.workspace-switch {display:flex;align-items:center;gap:10px;padding:0 10px 28px}
.workspace-icon {width:30px;height:30px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;font-size:12px;color:var(--secondary)}
.workspace-switch b {font-size:12px;font-weight:550}
.workspace-switch small {display:block;max-width:154px;overflow:hidden;text-overflow:ellipsis;font-size:10px;margin-top:4px;color:var(--muted)}
.nav-item {display:flex;width:100%;align-items:center;gap:10px;padding:11px 12px;min-height:42px;border-radius:8px;background:none;text-align:left;font-size:13px;color:var(--secondary)}
.nav-item:hover {background:var(--hover)}
.nav-item.active {background:var(--selected);color:var(--ink);font-weight:550}
.nav-icon {display:flex;align-items:center;width:18px;flex-shrink:0}
.nav-icon svg {width:17px;height:17px}
.nav-item .name {flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item small {font-size:11px;font-weight:400;color:var(--muted)}
.nav-heading {display:flex;align-items:center;justify-content:space-between;padding:0 12px;margin:27px 0 6px;font-size:11px;font-weight:550;color:var(--muted)}
.nav-heading button {background:none;font-size:22px;min-width:32px;min-height:32px;color:var(--secondary)}
.empty-nav {font-size:12px;color:var(--muted);padding:8px 12px;line-height:1.7}
.sidebar-bottom {margin-top:auto;padding:28px 12px 0}
.mode-label {font-size:10px;color:var(--muted);margin-bottom:9px}
.sidebar-logout {padding:8px 0;min-height:40px;background:none;font-size:11px;color:var(--secondary);text-align:left}
.topbar {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:65px;padding:12px 26px;border-bottom:1px solid var(--line)}
.topbar-brand {display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600}
.desktop-subtitle {font-size:12px;font-weight:400;color:var(--muted);padding-left:14px;border-left:1px solid var(--line)}
.topbar-right {display:flex;gap:14px;align-items:center}
#sync-time {font-size:11px;color:var(--muted)}
.inbox-title {padding:24px 26px 15px}
.inbox-title h1 {margin:0;font-size:25px;line-height:1.3;letter-spacing:-.8px;font-weight:600}
.inbox-title h1>span {font-size:12px;letter-spacing:0;margin-left:6px;color:var(--muted);font-weight:400;vertical-align:middle}
.status-banner {padding:10px 26px;font-size:12px;line-height:1.6;color:var(--secondary);border-bottom:1px solid var(--line);background:var(--surface)}
.status-banner.error-state {color:var(--ink);border-left:3px solid var(--ink)}
.list-toolbar {padding:0 18px 0}
.search-wrap {display:flex;align-items:center;gap:8px;background:var(--hover);border-radius:10px;padding:0 12px;color:var(--muted)}
.search-wrap svg {width:17px;height:17px}
.search-wrap input {width:100%;border:0;background:none;padding:12px 0;box-shadow:none;font-size:13px;outline-offset:2px}
.list-caption {display:flex;justify-content:space-between;padding:19px 2px 11px;font-size:10px;color:var(--muted)}
#list-caption {font-size:9px;letter-spacing:.8px}
.conversation-list {flex:1;min-height:0;overflow-y:auto;padding:0 8px 12px;overscroll-behavior:contain}
.conversation {display:flex;gap:12px;align-items:flex-start;width:100%;background:none;text-align:left;padding:16px 12px;border-radius:9px;color:var(--ink);position:relative}
.conversation:after {content:"";position:absolute;bottom:0;left:64px;right:12px;border-bottom:1px solid var(--line)}
.conversation.selected:after {border-color:transparent}
.conversation:hover {background:var(--hover)}
.conversation.selected {background:var(--selected)}
.avatar {display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--selected);border:1px solid var(--line);color:var(--secondary);font-size:12px;font-weight:550;overflow:hidden;flex-shrink:0}
.avatar img {width:100%;height:100%;object-fit:cover}
.conversation-content {flex:1;min-width:0;padding:2px 0}
.conversation-name {font-size:13px;font-weight:550;line-height:1.4;display:flex;align-items:center;justify-content:space-between;gap:8px}
.conversation-name>span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conversation-preview {filter:grayscale(1);color:var(--secondary);font-size:12px;line-height:1.6;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-tags {display:flex;flex-wrap:wrap;gap:4px}
.row-tags:not(:empty) {margin-top:8px}
.tag-chip {font-size:10px;padding:3px 6px;border-radius:5px;border:1px solid var(--line);color:var(--secondary);background:var(--surface);display:inline-flex;align-items:center;gap:4px;line-height:1.3}
.tag-chip svg {width:10px;height:10px}
.empty-state {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;min-height:180px;color:var(--muted)}
.empty-icon {display:grid;place-items:center;margin-bottom:15px;border:1px solid var(--line);border-radius:15px;width:54px;height:54px;color:var(--secondary);background:var(--bg)}
.empty-icon svg {width:24px;height:24px}
.empty-state h2 {font-size:16px;font-weight:500;margin:0 0 8px;letter-spacing:-.3px;color:var(--ink)}
.empty-state p {font-size:12px;line-height:1.7;margin:0;max-width:260px}
.chat-header {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 24px;border-bottom:1px solid var(--line);background:var(--bg)}
.chat-person {display:flex;align-items:center;gap:11px;min-width:0}
.chat-person h2 {font-size:14px;font-weight:550;line-height:1.4;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-person small {display:block;color:var(--muted);font-size:11px;margin-top:3px}
.chat-actions {display:flex;flex-shrink:0}
.chat-organization {display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 24px;background:var(--bg);border-bottom:1px solid var(--line)}
.chat-organization>label {font-size:11px;color:var(--muted);margin:0}
.chat-organization select {padding:8px 28px 8px 10px;font-size:12px;max-width:180px;border-radius:8px}
.chat-tag-picker {display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.toggle-tag {background:var(--bg);border:1px solid var(--line);color:var(--secondary);border-radius:7px;padding:7px 9px;font-size:11px;min-height:32px}
.toggle-tag.chosen {color:var(--ink);background:var(--selected);border-color:var(--secondary)}
.messages {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:28px 32px;display:flex;flex-direction:column;gap:20px;scrollbar-gutter:stable}
.messages-caption {font-size:10px;text-align:center;line-height:1.6;color:var(--muted);max-width:420px;align-self:center;margin:0 0 12px}
.bubble-row {display:flex;align-items:flex-start;flex-direction:column;gap:6px}
.bubble-row.out {align-items:flex-end}
.bubble {filter:grayscale(1);max-width:80%;padding:12px 16px;font-size:14px;line-height:1.65;border-radius:17px 17px 17px 4px;background:var(--incoming);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.out .bubble {background:var(--outgoing);color:var(--on-solid);border-radius:17px 17px 4px 17px}
.bubble-row time {font-size:10px;color:var(--muted);margin:0 4px}
.message-link {font-size:12px;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.chat-footer {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 24px;background:var(--bg);border-top:1px solid var(--line)}
.chat-footer p {margin:0;font-size:11px;line-height:1.6;color:var(--muted)}
.chat-footer a {flex-shrink:0}
.loading {padding:30px;text-align:center;font-size:13px;color:var(--muted)}
.error {font-size:12px;color:var(--ink);line-height:1.6;padding-left:10px;border-left:2px solid var(--ink)}
.error:empty {display:none}
.toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;max-width:calc(100vw - 32px);padding:14px 18px;border:1px solid var(--line);background:var(--solid);color:var(--on-solid);border-radius:12px;box-shadow:var(--shadow);font-size:12px;z-index:100}
.toast button {background:none;color:inherit;font-weight:600;text-decoration:underline;min-height:32px}
dialog {width:440px;max-width:calc(100vw - 28px);padding:25px;border:1px solid var(--line);border-radius:16px;background:var(--bg);color:var(--ink);box-shadow:var(--shadow)}
dialog::backdrop {background:var(--scrim)}
.dialog-heading {display:flex;align-items:center;justify-content:space-between;gap:15px}
.dialog-heading h2 {font-size:19px;letter-spacing:-.5px;font-weight:550;margin:0}
.label-list {margin:16px 0;max-height:40dvh;overflow-y:auto}
.label-edit-row {display:flex;align-items:center;gap:7px;padding:9px 0;border-bottom:1px solid var(--line)}
.label-edit-row input {width:80px;flex:1;font-size:13px;padding:10px}
.label-edit-row button {min-height:40px;padding:8px;background:var(--hover);border-radius:7px;font-size:12px}
.label-edit-row .delete-label {width:40px;font-size:20px;color:var(--secondary)}
.label-input-row {display:flex;gap:8px}
.label-input-row input {flex:1;width:100px}
.dialog-note {font-size:11px;line-height:1.7;color:var(--muted);margin:18px 0 0}
.mobile-only,.drawer-toggle,.drawer-close,.mobile-tabs,.nav-scrim {display:none}

/* Replies stay attached to the conversation, including drafts and delivery state. */
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.reply-footer {flex-shrink:0;padding:16px 24px;border-top:1px solid var(--line);background:var(--bg)}
.reply-form {width:100%}
.reply-input-row {display:flex;align-items:flex-end;gap:10px;background:var(--hover);border:1px solid var(--line);border-radius:16px;padding:6px}
.reply-input-row:focus-within {border-color:var(--secondary)}
.reply-input-row textarea {display:block;flex:1;min-width:0;min-height:44px;max-height:144px;resize:none;overflow-y:auto;border:0;outline:none;background:transparent;color:var(--ink);font:inherit;font-size:15px;line-height:24px;padding:10px 9px;border-radius:10px;scrollbar-width:thin}
.reply-input-row textarea::placeholder {color:var(--muted)}
.send-reply {display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;background:var(--solid);color:var(--on-solid);margin:1px}
.send-reply svg {width:20px;height:20px}
.send-reply:disabled {opacity:.3}
.is-sending svg {opacity:.5}
.reply-meta {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:9px 3px 0;font-size:10px;line-height:1.5;color:var(--muted)}
.reply-meta a {text-underline-offset:3px;flex-shrink:0}
.reply-meta a:hover {text-decoration:underline}
.reply-status {font-size:11px;line-height:1.6;color:var(--secondary);padding:0 3px}
.reply-status:not(:empty) {margin-top:7px}
.reply-status span:empty {display:none}
.reply-recovery {display:flex;gap:12px;margin-top:5px}
.reply-recovery button {background:none;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:5px 0;min-height:34px;font-size:11px}

/* Mobile destinations share the same organization data as the desktop sidebar. */
.inbox-title {display:flex;align-items:center;justify-content:space-between;gap:12px}
.view-heading {display:flex;align-items:center;gap:4px;min-width:0}
.view-heading h1 {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-page {display:none}
.conversation-row {min-width:0}
.archived-row {display:flex;align-items:center}
.archived-row .conversation {flex:1;min-width:0}
.restore-conversation {margin-right:6px;width:44px;height:44px}
.sheet-action {display:flex;align-items:center;gap:14px;min-height:54px;padding:12px 10px;width:100%;text-align:left;background:none;border-radius:10px;font-size:15px}
@media (hover:hover) and (pointer:fine) and (min-width:651px) {
  .sheet-action:hover {background:var(--hover)}
}
.sheet-action svg {color:var(--secondary)}
.sheet-divider {height:1px;background:var(--line);margin:8px 0}
.action-sheet .dialog-heading {margin-bottom:14px}
.action-sheet .dialog-heading h2 {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* A single surface moves over the two monochrome swipe affordances. */
.conversation-row {position:relative;overflow:hidden;border-radius:12px;isolation:isolate}
.swipe-surface {display:flex;align-items:center;position:relative;z-index:1;background:var(--bg);width:100%;transition:transform .18s ease}
.swipe-surface .conversation {flex:1;min-width:0}
.swipe-underlay {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;width:100px;color:var(--secondary);background:var(--selected);font-size:11px;visibility:hidden}
.swipe-pin {right:auto}
.swipe-archive {left:auto}
.swiping-left .swipe-archive,.swiping-right .swipe-pin {visibility:visible}
.swipe-ready .swipe-underlay {color:var(--on-solid);background:var(--solid)}
.is-swiping .swipe-surface {transition:none}
.pin-indicator {color:var(--muted);flex-shrink:0}
.pin-indicator svg {width:13px;height:13px;display:block}
.conversation .row-tags:not(:empty) {margin-top:6px;margin-bottom:6px}
.sheet-caption {color:var(--muted);font-size:12px;line-height:1.6;margin:10px}
.sheet-choice span:nth-child(2) {flex:1;overflow-wrap:anywhere}
.sheet-choice[aria-pressed=true] {background:var(--hover)}
.choice-check {margin-left:auto;width:20px;color:var(--ink)}
#conversation-menu-content {max-height:60dvh;overflow-y:auto;overscroll-behavior:contain}

.conversation-row {background:var(--selected)}
.conversation-row.swipe-ready {background:var(--solid)}

/* Focus belongs to the complete search field, including its icon. */
.search-wrap {border:1px solid transparent;transition:border-color .15s ease,background .15s ease}
.search-wrap:focus-within {border-color:var(--secondary);background:var(--bg)}
.search-wrap input:focus,.search-wrap input:focus-visible {outline:none;border:0;box-shadow:none}
#conversation-menu-title:focus {outline:none}

/* Tags may be promoted to inbox shortcuts without a second label type. */
.inbox-filters {display:flex;align-items:center;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:3px 1px;margin-top:10px}
.inbox-filters::-webkit-scrollbar {display:none}
.inbox-filter {flex-shrink:0;min-height:40px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--line);border-radius:22px;padding:9px 16px;background:var(--bg);color:var(--secondary);font-size:13px}
.inbox-filter[aria-pressed=true] {background:var(--solid);color:var(--on-solid);border-color:var(--solid)}
.inbox-filter:focus-visible {outline-offset:-4px}
.label-edit-fields {flex:1;min-width:0}
.label-edit-fields input[type=text] {width:100%}
.inbox-filter-check {display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.5;margin:10px 0 0;min-height:36px;color:var(--secondary);cursor:pointer}
.inbox-filter-check input[type=checkbox] {width:18px;height:18px;min-height:18px;flex-shrink:0;margin:0;padding:0;accent-color:var(--ink)}
.collection-filter-label {display:block;font-size:11px;color:var(--muted);margin-top:5px}
.label-edit-fields .inbox-filter-check input[type=checkbox] {flex:0 0 18px}

/* One focus border per field; password visibility is an in-field control. */
input:focus-visible,select:focus-visible {outline:none;border-color:var(--secondary)}
.password-input {position:relative;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.password-input:focus-within {border-color:var(--secondary)}
.password-input input {display:block;border:0;background:transparent;padding-right:54px}
.password-input input:focus,.password-input input:focus-visible {border:0;outline:none;box-shadow:none}
.password-toggle {position:absolute;right:3px;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:12px}
.password-toggle svg {width:20px;height:20px}
.password-toggle:focus-visible {outline-offset:-4px}
.password-input input::-ms-reveal {display:none}
.settings-auto-theme {color:var(--secondary);font-size:13px}

/* Labels start inside empty fields and float across the top border on focus/value. */
.floating-field {position:relative;margin-top:20px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
#login-form>.floating-field:first-child {margin-top:0}
.floating-field:focus-within {border-color:var(--secondary)}
.floating-field input {display:block;height:52px;padding:12px 14px;border:0;background:transparent;outline:none;box-shadow:none}
.floating-field input:focus,.floating-field input:focus-visible {border:0;outline:none;box-shadow:none}
.floating-field.password-input input {padding-right:54px}
.floating-field label {position:absolute;left:10px;top:50%;transform:translateY(-50%);max-width:calc(100% - 28px);margin:0;padding:0 4px;background:var(--bg);color:var(--muted);font-size:16px;font-weight:400;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition:top .16s ease,font-size .16s ease,color .16s ease}
.floating-field:focus-within label,.floating-field input:not(:placeholder-shown)+label {top:0;font-size:12px;color:var(--secondary)}
.floating-field input:-webkit-autofill+label {top:0;font-size:12px;color:var(--secondary)}

/* Even spacing for the primary flow; a separate gap for the optional demo. */
#login-form {display:flex;flex-direction:column;gap:16px}
#login-form>.floating-field,#login-form>#login-submit {margin:0}
#demo-button {margin-top:28px}
.login-card>#login-error:not(:empty) {margin:12px 0 0}
.landing-header .theme-control button {width:44px;height:44px;min-height:44px;padding:12px}
.landing-header .theme-control svg {width:18px;height:18px}