.workspace {display:flex;height:100dvh;overflow:hidden}
.sidebar {width:230px;min-width:230px;padding:28px 12px 18px;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.inbox-shell {flex:1;min-width:0;display:flex;flex-direction:column}
.inbox-body {display:grid;grid-template-columns:340px minmax(0,1fr);flex:1;min-height:0;overflow:hidden}
.conversation-panel {display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.chat-panel {display:flex;flex-direction:column;min-height:0;min-width:0;border-top:1px solid var(--line);background:var(--bg)}
@media(min-width:1600px) {.inbox-body {grid-template-columns:380px minmax(0,1fr)}}
@media(max-width:1150px) {.sidebar {width:210px;min-width:210px}.inbox-body {grid-template-columns:300px minmax(0,1fr)}.messages {padding:24px}.topbar {padding:10px 20px}#sync-time {display:none}}
@media(max-width:900px) {
  .drawer-toggle,.drawer-close {display:inline-flex}
  .sidebar {position:fixed;inset:0 auto 0 0;width:288px;max-width:calc(100vw - 48px);z-index:51;transform:translateX(-100%);visibility:hidden;transition:transform .2s ease,visibility .2s;padding-top:max(20px,env(safe-area-inset-top))}
  .nav-open .sidebar {transform:translateX(0);visibility:visible}
  .nav-open .nav-scrim {display:block;position:fixed;inset:0;z-index:50;background:var(--scrim);border-radius:0}
  .workspace-switch small {max-width:190px}
  .topbar {padding:10px 16px}
  .inbox-body {grid-template-columns:310px minmax(0,1fr)}
}
@media(max-width:650px) {
  .workspace {height:100dvh}
  .landing-header {padding:max(20px,env(safe-area-inset-top)) 22px 20px}
  .welcome {padding:35px 0 60px;width:min(100% - 48px,380px)}
  .login-card h1 {font-size:29px}
  .landing-footer {padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .topbar {min-height:64px;padding:8px 16px;padding-top:max(8px,env(safe-area-inset-top));border-bottom:0}
  .topbar-brand {font-size:17px;gap:8px}
  .topbar-brand .drawer-toggle,.desktop-subtitle {display:none}
  .topbar-right {gap:6px}
  .theme-control button {padding:6px 8px;min-width:33px;min-height:32px}
  .topbar .theme-control button span {display:none}
  .topbar .theme-control svg {width:16px;height:16px}
  .inbox-title {padding:9px 22px 18px}
  .inbox-title h1 {font-size:32px;letter-spacing:-1.1px}
  .inbox-title h1>span {font-size:14px;margin-left:8px}
  .status-banner {padding:9px 22px;font-size:11px}
  .status-banner:not(.error-state) {display:none}
  .inbox-body {display:flex;flex:1;border-top:0}
  .conversation-panel {width:100%;border-right:0}
  .list-toolbar {padding:0 18px}
  .search-wrap {border-radius:12px}
  .search-wrap input {font-size:16px;padding:12px 0}
  .list-caption {padding:19px 4px 9px}
  .conversation-list {padding:0 8px 12px}
  .conversation {padding:16px 13px;gap:13px;min-height:84px}
  .avatar {width:46px;height:46px;font-size:14px}
  .conversation:after {left:72px}
  .conversation-name {font-size:15px;line-height:1.4}
  .conversation-preview {font-size:14px;line-height:1.6;margin-top:4px}
  .tag-chip {font-size:10px}
  .mobile-tabs {display:flex;justify-content:space-around;align-items:center;flex-shrink:0;border-top:1px solid var(--line);padding:5px 15px max(7px,env(safe-area-inset-bottom));background:var(--bg);min-height:65px}
  .mobile-tabs button {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:50px;min-width:72px;background:none;color:var(--muted);font-size:10px}
  .mobile-tabs button[aria-current=page] {color:var(--ink);font-weight:600}
  .mobile-tabs svg {width:22px;height:22px}
  .chat-panel {display:none;width:100%;border-top:0}
  .chat-open .conversation-panel,.chat-open .inbox-title,.chat-open .mobile-tabs,.chat-open .topbar {display:none}
  .chat-open .chat-panel {display:flex}
  .chat-open .status-banner.error-state {order:2}
  .mobile-only {display:inline-flex}
  .chat-header {padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));min-height:71px;gap:5px}
  .chat-person {gap:9px;flex:1}
  .chat-person .avatar {width:36px;height:36px}
  .chat-person>div {min-width:0}
  .chat-person h2 {font-size:15px}
  .chat-person small {font-size:11px}
  .chat-person .icon-button {width:32px;padding:4px}
  .chat-actions .icon-button {width:36px;height:44px;padding:7px}
  .chat-organization {padding:10px 16px;gap:8px;max-height:144px;overflow-y:auto;flex-shrink:0}
  .chat-organization>label {display:none}
  .chat-organization select {font-size:16px;min-height:44px;padding:8px;max-width:170px}
  .toggle-tag {min-height:38px;padding:9px 10px;font-size:12px}
  .chat-tag-picker .text-button {min-height:38px}
  .messages {padding:24px 17px;gap:20px;scrollbar-gutter:auto}
  .messages-caption {font-size:10px;max-width:280px;line-height:1.6}
  .bubble {font-size:15px;line-height:1.6;max-width:88%;padding:11px 14px;border-radius:18px 18px 18px 5px}
  .out .bubble {border-radius:18px 18px 5px 18px}
  .bubble-row time {font-size:10px}
  .chat-footer {padding:12px 16px max(12px,env(safe-area-inset-bottom));min-height:75px;gap:8px}
  .chat-footer p {font-size:10px;max-width:155px}
  .chat-footer a {min-height:44px;font-size:12px}
  .toast {bottom:calc(76px + env(safe-area-inset-bottom));width:max-content}
  .chat-open .toast {bottom:calc(83px + env(safe-area-inset-bottom))}
  dialog {padding:22px;max-height:85dvh}
  .label-input-row input,.label-edit-row input {font-size:16px;min-height:44px}
  .label-edit-row button {min-height:44px}
  .nav-item {min-height:46px;font-size:14px}
  .nav-heading button {min-width:44px;min-height:44px}
}
@media(prefers-reduced-motion:reduce) {* {transition:none!important;scroll-behavior:auto!important}}
@media(max-width:650px) {
  .reply-footer {padding:10px 12px max(12px,env(safe-area-inset-bottom))}
  .reply-input-row {border-radius:22px;gap:4px}
  .reply-input-row textarea {font-size:16px;line-height:24px;padding-left:10px}
  .send-reply {width:44px;height:44px;border-radius:50%;margin:0}
  .reply-hint {display:none}
  .reply-meta {justify-content:flex-end;margin-top:7px}
  .reply-recovery button {min-height:44px}
}

@media(max-width:650px) {
  .mobile-tabs {padding-left:6px;padding-right:6px}
  .mobile-tabs button {min-width:0;flex:1;min-height:52px}
  .mobile-page-open .conversation-panel,.mobile-page-open .chat-panel {display:none}
  .mobile-page-open .mobile-page {display:flex;flex-direction:column;width:100%;min-height:0;overflow-y:auto;padding:0 20px 24px;overscroll-behavior:contain}
  .mobile-page-note {color:var(--secondary);font-size:14px;line-height:1.6;margin:0 2px 22px}
  .mobile-page-note.small {font-size:12px;margin:15px 2px 0;color:var(--muted)}
  .mobile-collection {border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
  .collection-row {display:flex;align-items:center;gap:12px;width:100%;min-height:70px;padding:13px 16px;background:none;text-align:left}
  .collection-row+.collection-row {border-top:1px solid var(--line)}
  .collection-row:hover {background:var(--hover)}
  .collection-icon {display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--selected);flex-shrink:0}
  .collection-icon svg {width:19px;height:19px}
  .collection-name {flex:1;min-width:0;font-size:15px;overflow-wrap:anywhere}
  .collection-count {font-size:13px;color:var(--muted)}
  .collection-chevron {font-size:23px;color:var(--muted);margin-left:3px}
  .collection-create {margin-top:18px;min-height:48px;font-size:14px;flex-shrink:0}
  .inbox-title>.text-button {min-height:44px;min-width:64px;font-size:14px;color:var(--ink)}
  .view-heading {flex:1;overflow:hidden}
  .view-heading h1 {margin:0}
  .view-heading .icon-button {margin-left:-12px;width:36px;height:44px}
  .settings-group {border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:18px;margin-bottom:16px}
  .settings-group h2 {font-size:11px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
  .settings-account {display:flex;align-items:center;gap:12px;min-width:0}
  .settings-account>div {min-width:0}
  .settings-account b {display:block;font-size:14px;font-weight:550}
  .settings-account span:not(.workspace-icon) {display:block;font-size:12px;color:var(--secondary);overflow-wrap:anywhere;margin-top:5px}
  .settings-status {margin:15px 0 0;font-size:12px;line-height:1.6;color:var(--secondary);overflow-wrap:anywhere}
  .settings-row {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
  .settings-row .theme-control button {min-height:44px;padding:8px 10px}
  .settings-button {display:flex;align-items:center;gap:12px;background:none;width:100%;min-height:48px;padding:4px 0;text-align:left;font-size:14px;line-height:1.5}
  .settings-caption {font-size:12px;line-height:1.7;color:var(--muted);margin:6px 0 0}
  .chat-actions .desktop-chat-action {display:none}
  .chat-menu-trigger {display:inline-flex}
  .chat-person .icon-button {width:44px;padding:8px}
  .chat-actions .icon-button {width:44px}
  .toggle-tag,.chat-tag-picker .text-button {min-height:44px}
  dialog {position:fixed;inset:auto 0 0;width:100%;max-width:100%;margin:0;max-height:85dvh;padding:24px 20px max(24px,env(safe-area-inset-bottom));border-radius:24px 24px 0 0;overflow-y:auto;overscroll-behavior:contain}
  dialog::before {content:"";display:block;width:34px;height:4px;border-radius:4px;background:var(--line);margin:-12px auto 20px}
  dialog .dialog-heading .icon-button {width:44px;height:44px}
  .label-edit-row {gap:6px}
  .label-edit-row input {width:50px}
  .label-edit-row button {min-width:44px}
}
@media(max-width:650px) {
  .conversation-row {touch-action:pan-y;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
  .conversation .tag-chip {font-size:11px;padding:4px 7px;border-radius:6px}
  .conversation .row-tags {gap:5px}
  .conversation .conversation-preview {margin-top:5px}
  .list-caption {padding-top:16px}
  .pin-indicator svg {width:14px;height:14px}
  .archived-row {display:block}
}

@media(max-width:650px) {
  .topbar-right {display:none}
  .mobile-main-inbox .inbox-title {display:none}
  .list-caption {display:none}
  .list-toolbar {padding:0 18px 14px;flex-shrink:0}
  .search-wrap {min-height:48px;gap:10px;padding:0 14px;border-radius:14px}
  .search-wrap svg {width:19px;height:19px}
  .search-wrap input {min-width:0;flex:1;line-height:24px;padding:11px 0;border-radius:0}
  .action-sheet .sheet-action:hover:not([aria-pressed=true]),.action-sheet .dialog-heading .icon-button:hover {background:transparent}
}
@media(max-width:650px) {
  .inbox-filters {margin-top:10px}
  .inbox-filter {min-height:44px;font-size:13px}
  .inbox-filter-check {min-height:44px}
  .label-edit-fields input[type=text] {width:100%}
  .chat-organization {padding:8px 16px}
}

@media(max-width:650px) {
  .reply-meta {display:none}
}