/* Phone layout. Desktop spacing and the saved density choice stay independent. */
@media (max-width:760px) {
  :root {
    --mobile-rail-width:48px;
    --chat-rail-width:var(--mobile-rail-width);
    --chat-dock-gutter:0px;
    --chat-dock-width:calc(100vw - var(--mobile-rail-width));
  }
  #app {
    width:100%;
    height:100dvh;
    max-height:100dvh;
    margin:0;
    border:0;
    border-radius:0;
    grid-template-columns:calc(var(--mobile-rail-width) + env(safe-area-inset-left)) minmax(0,1fr);
    overflow:hidden;
  }
  #app>.rail {
    min-width:0;
    gap:12px;
    padding:max(12px,env(safe-area-inset-top)) 1px max(10px,env(safe-area-inset-bottom)) env(safe-area-inset-left);
    overflow-y:auto;
    scrollbar-width:none;
  }
  #app .rail-logo { width:28px; margin-bottom:4px; }
  #app .rail>button,#app .rail-bottom>button {
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    flex:none;
    border-radius:10px;
  }
  #app .rail-bottom { gap:8px; padding-top:16px; }
  #mobile-compose { display:flex; margin-top:0; }
  #app>.sidebar { display:none; }
  #app.show-folders>.sidebar {
    display:flex;
    visibility:visible;
    pointer-events:auto;
    position:absolute;
    inset:0 env(safe-area-inset-right) 0 calc(var(--mobile-rail-width) + env(safe-area-inset-left));
    width:auto;
    z-index:80;
    padding:calc(18px + env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));
    box-shadow:none;
  }
  #app .sidebar .workspace { margin-bottom:20px; }
  #app .sidebar .workspace strong { font-size:17px; }
  #app .sidebar .compose-btn { min-height:48px; font-size:15px; }
  #app .folder { min-height:48px; font-size:15px; padding:12px; }
  #app .folder-list { min-height:0; overflow:auto; overscroll-behavior:contain; }
  #app .sidebar-note { display:none; }
  #app .connection { font-size:12px; line-height:1.5; }
  #app>.main { min-width:0; padding-right:env(safe-area-inset-right); }
  #app .mail-grid { grid-template-columns:minmax(0,1fr); }
  #app .reader { display:none; min-width:0; overflow:auto; overscroll-behavior:contain; }
  #app .main.reading .reader { display:block; }
  #app .main.reading .inbox-panel { display:none; }
  #app .topbar {
    height:auto;
    min-height:calc(60px + env(safe-area-inset-top));
    padding:calc(8px + env(safe-area-inset-top)) 8px 8px;
    gap:4px;
  }
  #app .breadcrumb,#app .search kbd { display:none; }
  #app .search { flex:1; min-width:0; padding:10px; min-height:44px; }
  #app .search input { font-size:16px; width:100%; min-width:0; }
  #app #refresh,#app .topbar .install-button { width:44px; min-width:44px; height:44px; padding:11px; }
  #app .topbar .install-button span,#app .topbar .install-button::before { display:none; }
  #app .inbox-heading { padding:18px 14px 12px; }
  #app .inbox-heading .eyebrow { font-size:10px; letter-spacing:1px; }
  #app .inbox-heading h1 { font-size:27px; }
  #app .filterbar {
    padding:0 10px 10px;
    gap:4px;
    overflow-x:auto;
    scrollbar-width:thin;
    overscroll-behavior-x:contain;
  }
  #app .filterbar button { min-height:44px; min-width:44px; font-size:14px; padding:9px 11px; flex:none; }
  #app .filter-spacer { min-width:0; }
  #app .list-label { padding:8px 14px; font-size:10px; letter-spacing:.8px; }
  #app .select-all-label { min-height:44px; font-size:10px; }
  #app .select-all-label input { width:22px; height:22px; }
  #app .message-list { padding:0 4px 10px; overscroll-behavior:contain; }
  #app .message-row {
    grid-template-columns:minmax(0,1fr);
    padding:12px 10px 12px 44px;
    min-height:96px;
    gap:0;
    margin-bottom:3px;
  }
  #app .message-row>.avatar { display:none; }
  #app .row-content { display:block; position:relative; min-width:0; }
  #app .row-top { gap:6px; margin:0 0 3px; min-width:0; }
  #app .row-name { font-size:14px; line-height:1.5; }
  #app .row-time { font-size:11px; line-height:1.5; }
  #app .row-subject { margin:0 0 3px; font-size:15px; line-height:1.5; }
  #app .row-snippet { padding-right:110px; font-size:14px; line-height:1.5; }
  #app .row-bottom { position:absolute; right:0; bottom:-9px; gap:2px; margin:0; align-items:center; }
  #app .row-rules { width:44px; height:44px; min-width:44px; }
  #app .row-tag { max-width:52px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; padding:3px; }
  #app .row-star { width:44px; height:44px; min-width:44px; padding:13px; margin:0; }
  #app .row-attachment svg { width:14px; height:14px; }
  #app .row-check {
    appearance:none;
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    margin:0;
    border:0;
    border-radius:7px;
    opacity:1;
    cursor:pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='1' y='1' width='20' height='20' rx='4' fill='white' stroke='%23919daa' stroke-width='1.5'/%3E%3C/svg%3E") center/22px 22px no-repeat;
  }
  #app .row-check:checked {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='m5 11 4 4 8-8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(var(--green),var(--green));
    background-size:22px 22px;
    background-position:center;
    background-repeat:no-repeat;
  }
  #app .row-check:focus-visible { outline:2px solid var(--green); outline-offset:-4px; }
  html[data-density=compact] #app .message-row { min-height:78px; padding-top:8px; padding-bottom:8px; }
  html[data-density=compact] #app .row-subject { font-size:14px; line-height:1.5; padding-right:110px; }
  html[data-density=compact] #app .row-bottom { min-height:44px; }
  html[data-density=compact] #app .row-snippet { display:none; }
  #app .bulkbar { overflow-x:auto; padding:6px; gap:3px; }
  #app .bulkbar strong { font-size:12px; min-width:55px; }
  #app .bulkbar button { min-width:44px; height:44px; font-size:12px; flex:none; }
  #app #load-more { min-height:48px; font-size:14px; }
  #app .list-footer { font-size:11px; padding:10px 14px; }
  #app .reader-tools { position:sticky; top:0; padding:6px; gap:2px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:thin; }
  #app .reader-tools .icon-btn { width:44px; min-width:44px; height:44px; flex:none; }
  #app .reader-tools .message-position { font-size:11px; white-space:nowrap; }
  #app .reader-tools .tool-sep { margin:0 3px; flex:none; }
  #app #back-list { display:inline-flex!important; position:sticky; left:0; z-index:2; width:auto; min-width:83px; gap:4px; padding:8px; background:#f8fafc; color:var(--green); }
  #app #back-list::after { content:'Back'; font-size:14px; font-weight:600; }
  #app .reader-body { max-width:none; padding:20px 16px 28px; margin:0; border:0; border-radius:0; box-shadow:none; }
  #app .reader h2 { font-size:24px; line-height:1.3; margin:14px 0 22px; }
  #app .sender { gap:10px; padding-bottom:18px; }
  #app .sender-name { font-size:14px; line-height:1.5; }
  #app .sender-email { font-size:12px; line-height:1.6; }
  #app .sender-date { font-size:11px; line-height:1.6; margin-left:auto; min-width:0; white-space:normal; }
  #app .message-content { font-size:16px; line-height:1.65; padding-top:20px; min-height:160px; }
  #app .message-frame { display:block; width:100%; min-height:240px; }
  #app .privacy-note { font-size:12px; line-height:1.6; align-items:flex-start; }
  #app .privacy-note svg { flex:none; width:14px; height:14px; margin-top:2px; }
  #app .attachment { width:100%; min-width:0; min-height:56px; padding:11px 12px; font-size:14px; }
  #app .attachment small { font-size:12px; line-height:1.5; margin-top:3px; }
  #app .reply-actions { gap:8px; }
  #app .reply-actions button { min-height:44px; flex:1; justify-content:center; font-size:14px; padding:10px; }
  #app .reader-end { font-size:11px; }
  #app .app-footer { font-size:11px; padding:8px 8px max(8px,env(safe-area-inset-bottom)); }
  #app .app-footer button,#app .app-footer a { min-height:32px; display:inline-flex; align-items:center; }
  #app .scheduled-row { padding:14px 10px; min-height:88px; }
  #app .scheduled-row strong { font-size:15px; }
  #app .scheduled-to,#app .scheduled-row time { font-size:13px; }
  #app .scheduled-actions button,#app .undo-send-action { min-height:44px; font-size:14px; }

  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),textarea,select { font-size:16px!important; }
  #login .login-art { min-height:155px; height:155px; padding:22px 24px; }
  #login .art-copy h1 { font-size:27px; }
  #login .login-side { padding:86px 24px 100px; min-height:0; }
  #login .login-box h2 { font-size:28px; }
  #login .login-box>p { font-size:14px; margin-bottom:24px; }
  #login .login-box label { font-size:14px; }
  #login .login-box .primary,#login .login-install { min-height:48px; font-size:14px; }
  #login .login-box .fine { font-size:13px; }
  #login .login-session-note,#login .login-save-option small { font-size:12px; }
  #login .login-save-option strong { font-size:14px; }
  #login .login-save-option { min-height:64px; }
  #login .login-save-option input { width:22px; height:22px; flex-basis:22px; }

  #compose-dialog,#info-dialog,#schedule-dialog,.install-dialog,.security-dialog {
    width:100vw;
    max-width:100vw;
    height:100dvh;
    max-height:100dvh;
    margin:0;
    inset:0;
    border:0;
    border-radius:0!important;
    box-shadow:none;
  }
  #compose-form>header { padding:calc(12px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left)); align-items:center; gap:10px; }
  #compose-dialog h2 { font-size:23px; }
  #compose-dialog button,#info-dialog button,#schedule-dialog button,.install-dialog button,.security-dialog button { min-height:44px; min-width:44px; }
  #compose-dialog .compose-field { padding:10px 14px; gap:8px; min-height:54px; font-size:14px; }
  #compose-dialog .compose-field>span { width:48px; flex:none; }
  #compose-dialog .compose-field input { min-height:36px; }
  #compose-dialog #toggle-cc { font-size:13px; padding:8px; }
  #compose-dialog .rich-toolbar,#info-dialog .signature-formatting { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; gap:4px; padding:7px 10px; }
  #compose-dialog .rich-toolbar button,#info-dialog .signature-formatting button,#info-dialog .signature-color { width:44px; height:44px; min-width:44px; flex:none; }
  #compose-dialog .rich-toolbar>span,#info-dialog .signature-formatting>span { flex:none; }
  #compose-dialog .tiptap { font-size:16px; line-height:1.6; padding:18px 16px; min-height:200px; max-height:none; }
  #compose-dialog .link-panel,#compose-dialog .emoji-panel { padding:14px; }
  #compose-dialog .emoji-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  #compose-dialog .emoji-grid button { min-width:0; width:100%; font-size:25px; }
  #compose-form>footer { padding:10px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); gap:7px; flex-wrap:wrap; }
  #compose-dialog .primary { font-size:14px; padding:11px; flex:1; min-width:120px; }
  #compose-dialog .send-later { font-size:14px; padding:10px; flex:1; min-width:100px; justify-content:center; }
  #compose-dialog #attach,#compose-dialog #discard { width:44px; min-width:44px; height:44px; padding:10px; }
  #compose-dialog #draft-status { flex-basis:100%; order:5; min-height:0; max-width:none; font-size:12px; line-height:1.5; padding-top:2px; }
  #compose-dialog .file-chip { font-size:13px; }
  #compose-dialog .recipient-suggestions { left:14px; right:14px; }
  #info-dialog { padding:0; }
  #info-dialog .info-header { min-height:calc(60px + env(safe-area-inset-top)); padding:calc(8px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left)); }
  #info-content { padding:22px max(18px,env(safe-area-inset-right)) 26px max(18px,env(safe-area-inset-left)); }
  #info-dialog .info-footer { padding:10px max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); }
  #info-dialog .info-footer .primary { font-size:15px; min-width:100px; }
  #info-dialog p,#info-dialog .settings-note { font-size:14px; line-height:1.65; }
  #info-dialog .settings-tabs { gap:4px; overflow-x:auto; scrollbar-width:thin; }
  #info-dialog .settings-tabs button { font-size:14px; padding:9px 12px; flex:none; }
  #info-dialog .settings-label,#info-dialog legend,#info-dialog .contact-form label { font-size:14px; }
  #info-dialog .layout-option { min-height:120px; }
  #info-dialog .layout-option strong { font-size:14px; }
  #info-dialog .layout-option small,#info-dialog .seasonal-option strong { font-size:12px; }
  #info-dialog .seasonal-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #info-dialog .contact-row strong { font-size:15px; }
  #info-dialog .contact-row small { font-size:13px; }
  #info-dialog .signature-text .tiptap { font-size:16px; line-height:1.35; }
  #info-dialog .signature-text .tiptap p { font-size:inherit; line-height:inherit; margin:0; }
  #info-dialog .signature-editor-note,#info-dialog .signature-photo-meta { font-size:12px!important; }
  #info-dialog .signature-photo-heading p { font-size:12px; }
  #info-dialog .mobile-pair-panel { padding:18px 12px; }
  #schedule-dialog,.install-dialog,.security-dialog { padding:calc(24px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
  #schedule-dialog p,.install-dialog p,.security-dialog p { font-size:14px; }
  #schedule-dialog .schedule-presets button { font-size:14px; }
  #schedule-dialog footer { flex-wrap:wrap; }
  .install-dialog .info-close,.security-dialog .info-close { top:calc(12px + env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); }

  .company-messaging,.company-messaging.chat-has-thread { top:0; bottom:0; left:calc(var(--mobile-rail-width) + env(safe-area-inset-left)); right:0; width:auto; border-radius:0; }
  .company-messaging .chat-heading { padding-top:calc(12px + env(safe-area-inset-top)); }
  .company-messaging .chat-heading-mark { display:none; }
  .company-messaging .chat-icon-button,.company-messaging .chat-heading-actions .chat-icon-button { width:44px; height:44px; min-width:44px; }
  .company-messaging .chat-compose { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .company-messaging .chat-message p { font-size:15px; line-height:1.6; }
  .company-messaging .chat-person-copy strong { font-size:14px; }
  .company-messaging .chat-person-copy>span,.company-messaging .chat-person-copy small { font-size:12px; }
  .messaging-popout .company-messaging,.messaging-popout .company-messaging.chat-has-thread { left:0; }

  #app .holiday-weather,#app .holiday-lights,#app .holiday-skyline { pointer-events:none!important; }
  html[data-holiday=christmas] #app .topbar { padding-top:calc(24px + env(safe-area-inset-top)); }
  #app .holiday-weather { opacity:.3; }
  #app .holiday-weather i:nth-child(n+13) { display:none!important; }
  html:has(dialog[open]) #app .holiday-weather { display:none!important; }
  #app .holiday-ribbon { min-height:46px; padding:4px 10px; gap:6px; }
  #app .holiday-ribbon b { font-size:10px; letter-spacing:.8px; margin-bottom:0; }
  #app .holiday-ribbon span>span { display:none; }
  #app .holiday-ribbon button { min-height:44px; font-size:12px; padding:8px 0 8px 8px; }
  .toast { bottom:calc(14px + env(safe-area-inset-bottom)); font-size:14px; }
}