/* 0.4 shared dimensions and interaction surfaces. Loaded after legacy layouts. */
:root{--control-height:38px;--control-gap:8px;--control-radius:11px;--nav-size:44px;--motion:240ms;--sidebar:274px}
.btn,.icon-btn,.select-trigger,.date-trigger,.color-picker-button{min-height:var(--control-height);font:inherit;font-size:var(--control-font,14px);border-radius:var(--control-radius);display:inline-flex;align-items:center;justify-content:center;gap:var(--control-gap);flex-shrink:0}
.icon-btn{width:var(--control-height);height:var(--control-height);padding:8px}.btn{padding:8px 14px;white-space:nowrap}.icon-btn svg,.btn svg,.select-trigger svg,.date-trigger svg{width:18px;height:18px;flex:none}
input,select,textarea{font:inherit;font-size:var(--control-font,14px);border-radius:var(--control-radius)}input:focus,textarea:focus,select:focus,.chips-input:focus-within,.compose-row:focus-within,.editor:focus{outline:none!important;box-shadow:none!important;border-color:var(--line)!important}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.shell{grid-template-columns:var(--sidebar) minmax(0,1fr);grid-template-rows:82px minmax(0,1fr);transition:grid-template-columns var(--motion) ease}
.sidebar{margin:12px 0 12px 12px;padding:20px 12px 14px;border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 35px #14243c08;scrollbar-width:thin;overflow-x:hidden;gap:0}
.topbar{min-height:82px;background:transparent;border-bottom:0;padding:12px 26px;gap:14px}.search-box{flex:1}.topbar .sidebar-toggle{display:inline-flex}
.workspace{padding-top:16px}.sidebar .brand{padding:0 6px;margin-bottom:22px}.sidebar .nav,.sidebar-section,.mobile-secondary{display:flex;flex-direction:column;gap:5px}.sidebar-section{margin-top:20px}
.sidebar .nav>button,.sidebar .folder-btn,.mobile-secondary>button{display:flex;align-items:center;gap:12px;width:100%;height:var(--nav-size);min-height:var(--nav-size);padding:0 12px;border-radius:12px;font-size:var(--control-font,14px);line-height:1.2;text-align:left;margin:0;color:var(--muted);white-space:nowrap}
.sidebar .nav>button svg,.sidebar .folder-btn>svg,.mobile-secondary>button svg,.sidebar .label-row .pill svg{width:20px;height:20px;flex:none}.sidebar .active{background:var(--accent-soft);color:var(--accent)}
.sidebar .label-row{position:relative;display:flex;align-items:center;margin:0;min-height:var(--nav-size)}.sidebar .label-row>.icon-btn,.folder-tree-row>.icon-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;min-height:32px;min-width:32px;padding:6px}
.sidebar .label-row .pill{padding:0;gap:12px;font-size:var(--control-font,14px);border:0;background:transparent!important;font-weight:400}.folder-tree-row>.folder-btn{padding-right:38px}.sidebar .nav-count{margin-left:auto}.sidebar-bottom{padding-top:18px}.sidebar .profile{gap:8px;min-width:0}.sidebar .profile .grow{min-width:0}
.sidebar-collapsed{--sidebar:88px}.sidebar-collapsed .sidebar{padding:18px 10px}.sidebar-collapsed .brand{padding:0;justify-content:center}.sidebar-collapsed .brand>div,.sidebar-collapsed .nav button>span,.sidebar-collapsed .folder-btn>span,.sidebar-collapsed .sidebar-section>.between,.sidebar-collapsed .connection-card,.sidebar-collapsed .profile .grow,.sidebar-collapsed .profile>.icon-btn,.sidebar-collapsed .label-row>.icon-btn,.sidebar-collapsed .folder-tree-row>.icon-btn{display:none}
.sidebar-collapsed .nav>button,.sidebar-collapsed .folder-btn,.sidebar-collapsed .compose-main{width:var(--nav-size);height:var(--nav-size);padding:0;justify-content:center;font-size:0;gap:0}.sidebar-collapsed .compose-main>svg{width:20px;height:20px}.sidebar-collapsed .folder-tree-row{padding-left:0!important}.sidebar-collapsed .label-row .folder-btn>span{display:inline-flex;font-size:0;gap:0}.sidebar-collapsed .label-row .pill svg{display:block}.sidebar-collapsed .sidebar-section{gap:5px}.sidebar-collapsed .profile{justify-content:center}.sidebar-collapsed .profile .avatar{width:36px;height:36px}.mobile-secondary,.mobile-bottom-nav{display:none}
.mail-layout>.reader:not(.fullscreen-reader){position:sticky;top:var(--reader-top,0px);align-self:start}.mail-layout>.reader{min-width:0}.mail-select{opacity:0;pointer-events:none;width:0!important;min-width:0!important;padding:0!important;border:0!important;margin:0 -8px 0 0!important;transition:opacity 150ms,width 150ms,margin-right 150ms}.mail-item:hover .mail-select,.mail-item:focus-within .mail-select,.selection-mode .mail-select{opacity:1;pointer-events:auto;width:18px!important;min-width:18px!important;margin:0!important}.bulk-toolbar[hidden]{display:none!important}.bulk-toolbar{gap:8px}.bulk-toolbar span{font-size:13px}
.page-head{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:14px;align-items:center}.page-head>.section-tabs{grid-column:1/-1;grid-row:2;margin:0;padding-top:5px}.head-tools{gap:8px;min-width:0}.listing-tools{display:contents}.head-tools>.icon-btn{order:0}.head-tools>.select-trigger{order:1}.head-tools>.btn{order:2}.head-tools>.btn.primary{order:3}.head-tools select[hidden]{display:none!important}
.tabs,.section-tabs{display:flex;max-width:100%;min-width:0;overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;scrollbar-width:thin;scroll-padding:10px;gap:4px}.tabs>button,.section-tabs>button{flex:0 0 auto;font-size:var(--control-font,14px);min-height:38px;padding:8px 14px;border-radius:10px}.tabs>button.active,.section-tabs>button.active{font-weight:600}.section-tabs{border:0;padding:4px;background:var(--surface2);border-radius:13px;width:max-content;max-width:100%}.section-tabs>button{border:0}.section-tabs>button.active{background:var(--surface);box-shadow:0 2px 8px #00000008;color:var(--accent)}
.native-select,.native-color,.native-date{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;clip-path:inset(50%);overflow:hidden;opacity:0;pointer-events:none}
.select-trigger,.date-trigger,.color-picker-button{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:8px 12px;text-align:left}.field>.select-trigger,.field>.date-trigger{width:100%;justify-content:space-between}.select-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-trigger svg{margin-left:auto}.date-trigger span{flex:1}.color-picker-button>span:first-child{width:19px;height:19px;border-radius:6px;border:1px solid #8885}.color-picker-button>span{font-size:var(--control-font,14px)}.color-picker-button>svg{width:14px;height:14px}
.ui-popover{position:fixed;z-index:160;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 16px 60px #17203926;min-width:210px;max-width:calc(100vw - 16px);max-height:min(450px,calc(100dvh - 16px));overflow:auto;animation:popover-in 150ms ease-out}.ui-popover[role=menu]>button{display:flex;align-items:center;gap:10px;min-height:40px;width:100%;border-radius:9px;text-align:left;padding:9px 10px;font-size:var(--control-font,14px);color:var(--text)}.ui-popover[role=menu]>button:hover,.ui-popover[role=menu]>button:focus{background:var(--accent-soft)}.ui-popover button:disabled{opacity:.45}.ui-popover button>svg{width:17px;height:17px;flex:none}.ui-popover button>span{flex:1}.ui-popover>strong{display:block;padding:8px;font-size:14px}
.picker-swatches{display:grid;grid-template-columns:repeat(6,30px);gap:8px;padding:8px}.picker-swatches button{width:30px;height:30px;border-radius:9px;background:var(--swatch);border:1px solid #8884}.picker-custom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;font-size:var(--control-font,14px)}.picker-custom input{max-width:110px;min-height:34px;border:1px solid var(--line);padding:4px;background:var(--surface);color:var(--text)}.custom-color{font-size:0}.custom-color .color-picker-button{font-size:var(--control-font,14px)}.swatches{gap:9px}
.date-popover{width:300px}.date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;margin:10px 0}.date-grid small{padding:6px 0;color:var(--muted)}.date-grid button{height:34px;border-radius:9px;font-size:var(--control-font,14px)}.date-grid button:hover{background:var(--accent-soft)}.date-grid button.active{background:var(--accent);color:white}.time-picker{display:flex;align-items:end;justify-content:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}.time-picker label{display:grid;gap:5px;font-size:12px}.time-picker input{width:70px;background:var(--surface2);color:var(--text);padding:8px;border:1px solid var(--line)}.time-picker>span{padding-bottom:10px}.date-actions{justify-content:flex-end}
.decision-backdrop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#15203970;backdrop-filter:blur(5px);padding:18px}.decision-card{width:min(440px,100%);padding:26px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 70px #0003;animation:popover-in 180ms ease-out}.decision-card h2{font-size:20px;margin-bottom:12px}.decision-card p{font-size:14px;line-height:1.7;margin-bottom:20px}.decision-card input{width:100%;padding:10px;border:1px solid var(--line);background:var(--surface2);color:var(--text)}.decision-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.modal{width:min(660px,calc(100vw - 32px));max-width:none;height:min(720px,90dvh);max-height:90dvh;transition:width var(--motion) ease,height var(--motion) ease,border-radius var(--motion) ease}.modal.wide{width:min(1080px,calc(100vw - 32px));height:min(850px,92dvh);max-height:92dvh}.modal.fullscreen{width:calc(100vw - 24px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px)}.modal-header{gap:8px}.modal-header h2{flex:1;margin-right:auto}.modal-body{flex:1;min-height:0;overflow:auto}.modal-footer{flex-wrap:nowrap!important;overflow-x:auto;justify-content:flex-end;flex-shrink:0;scrollbar-width:thin}.modal-footer>.btn,.modal-footer>a{flex:0 0 auto}.modal-footer>.grow{min-width:0}.compose-row input,.composer-chips,.composer-chips input{background:transparent;box-shadow:none!important;border:0!important}.compose-row{min-height:46px}.editor-toolbar{gap:4px;padding:8px;background:var(--surface2);border-radius:12px;position:relative;top:auto}.editor-controls{gap:4px}.editor-toolbar .icon-btn{width:32px;height:32px;min-height:32px;min-width:32px;padding:7px}.editor-toolbar .select-trigger,.editor-toolbar .color-picker-button{min-height:32px;max-width:180px;padding:5px 8px;font-size:var(--control-font,14px)}.editor-toolbar .select-trigger span{font-size:var(--control-font,14px)}.editor-controls+.editor-controls{padding-top:5px;margin-top:1px}.editor-size-control{display:flex;align-items:center;gap:4px;font-size:var(--control-font,14px)}.editor-size-control input{width:65px;min-height:32px;padding:5px;border:1px solid var(--line);background:var(--surface);color:var(--text)}.editor{min-height:260px;font-family:Arial,sans-serif;font-size:16px;line-height:1.6}.editor b,.editor strong{font-weight:700}.editor i,.editor em{font-style:italic}.editor h1{font-size:2em;font-weight:700}.editor h2{font-size:1.5em;font-weight:700}.editor h3{font-size:1.17em;font-weight:700}.editor ul{list-style:disc;padding-left:24px}.editor ol{list-style:decimal;padding-left:24px}
.loading-placeholder{width:100%;padding:22px;min-height:320px}.loading-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;padding:10px}.loading-label svg{width:18px;height:18px;animation:loading-turn 1s linear infinite}.skeleton-row{display:flex;gap:12px;margin:24px 0}.skeleton-row>span{width:32px;height:32px;border-radius:50%;flex:none}.skeleton-row>div{flex:1}.skeleton-row i{display:block;height:10px;margin:0 0 10px;border-radius:8px}.skeleton-row i:nth-child(2){width:85%}.skeleton-row i:nth-child(3){width:60%}.skeleton-row>span,.skeleton-row i{background:linear-gradient(100deg,var(--surface2) 20%,var(--line) 50%,var(--surface2) 80%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}.workspace[aria-busy=true]{cursor:progress}.workspace[aria-busy=true]:before{content:'';height:3px;position:sticky;top:0;display:block;background:var(--accent);animation:busy-line 1s ease-in-out infinite;z-index:4}
.content-card,.media-card,.mail-item{animation:none!important}.media-preview{position:relative}.media-preview>.icon-btn{position:absolute;right:8px;bottom:8px;background:var(--surface);box-shadow:0 2px 8px #0002}.media-preview>.icon-btn svg{width:18px;height:18px}.file-live-preview{display:flex;align-items:center;justify-content:center;min-height:300px;height:100%;max-width:100%}.file-live-preview img,.file-live-preview video{max-width:100%;max-height:70dvh;object-fit:contain}.file-live-preview iframe{border:0;width:100%;height:65dvh;border-radius:12px}.file-live-preview audio{width:100%}.appointment-list{margin-top:20px}.notice{gap:12px;padding:16px;border-radius:14px;font-size:14px;line-height:1.6;align-items:flex-start}.notice>svg{flex:none;width:20px;height:20px;margin-top:2px}.notice p{margin:0}.card-grid+.notice{margin-top:20px}.icon-gallery .icon-btn{content-visibility:visible}
@keyframes popover-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes loading-turn{to{transform:rotate(360deg)}}@keyframes shimmer{to{background-position:-200% 0}}@keyframes busy-line{50%{opacity:.25}}
@media(max-width:1020px){.mail-layout>.reader:not(.fullscreen-reader){position:static;top:auto}}
@media(max-width:700px){:root{--control-height:44px;--nav-size:46px}.shell,.shell.sidebar-collapsed{grid-template-columns:minmax(0,1fr);grid-template-rows:76px minmax(0,1fr);padding-bottom:calc(66px + env(safe-area-inset-bottom))}.topbar{min-height:76px;padding:12px;gap:8px}.topbar .sidebar-toggle{display:none}.topbar .search-box{min-width:0}.topbar-right{gap:2px}.topbar-right>.avatar,.topbar [data-action=help]{display:none}.workspace{padding:12px}.sidebar,.sidebar-collapsed .sidebar{position:fixed;inset:10px auto calc(76px + env(safe-area-inset-bottom)) 10px;width:min(320px,calc(100vw - 30px));margin:0;padding:18px 12px;display:flex;z-index:75;transform:translateX(calc(-100% - 25px));transition:transform var(--motion) ease;visibility:hidden}.sidebar.open{transform:translateX(0);visibility:visible}.sidebar .nav,.sidebar .brand,.sidebar>.compose-main{display:none}.sidebar .sidebar-section:first-of-type{margin-top:0}.mobile-secondary{display:flex;margin-top:20px}.sidebar-collapsed .sidebar-section>.between{display:flex}.sidebar-collapsed .folder-btn{width:100%;height:var(--nav-size);font-size:var(--control-font,16px);justify-content:flex-start;padding:0 12px;gap:12px}.sidebar-collapsed .folder-btn>span{display:inline-flex}.sidebar-collapsed .label-row .folder-btn>span{font-size:var(--control-font,16px);gap:12px}.sidebar-collapsed .label-row>.icon-btn,.sidebar-collapsed .folder-tree-row>.icon-btn{display:inline-flex}.sidebar-collapsed .profile .grow{display:block}.sidebar-collapsed .profile>.icon-btn{display:flex}.sidebar-collapsed .connection-card{display:block}.sidebar-collapsed .profile{justify-content:flex-start}.sidebar-collapsed .folder-tree-row{padding-left:var(--folder-indent,0)!important}.sidebar .folder-tree-row>.folder-btn{padding-right:40px}.mobile-bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;padding:6px 12px calc(6px + env(safe-area-inset-bottom));height:calc(66px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(18px);border-top:1px solid var(--line);z-index:65;gap:8px}.mobile-bottom-nav button{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;border-radius:13px;color:var(--muted)}.mobile-bottom-nav svg{width:21px;height:21px}.mobile-bottom-nav .active{background:var(--accent-soft);color:var(--accent);font-weight:600}.mobile-compose{bottom:calc(80px + env(safe-area-inset-bottom));right:16px;width:48px;height:48px}.page-head{grid-template-columns:minmax(0,1fr);gap:12px}.page-head>.section-tabs{grid-row:2;grid-column:1;max-width:100%}.page-head>.head-tools{grid-row:3;grid-column:1;justify-content:flex-end;flex-wrap:wrap;width:100%}.head-tools .btn.primary .button-label{display:none}.head-tools .btn.primary{width:44px;height:44px;padding:10px}.head-tools .icon-btn{min-width:44px;width:44px}.head-tools .select-trigger{max-width:160px}.tabs>button,.section-tabs>button{min-height:44px}.mail-select{opacity:1;pointer-events:auto;width:18px!important;min-width:18px!important;margin:0!important}.mail-list-panel:not(.selection-mode) .mail-select{display:none}.modal-backdrop{padding:0;align-items:end}.modal,.modal.wide{width:100%;height:94dvh;max-height:94dvh;border-radius:20px 20px 0 0}.modal.fullscreen{width:100%;height:100dvh;max-height:100dvh;border-radius:0}.modal-header{padding:12px}.modal-body{padding:12px}.modal-footer{padding:10px 12px;justify-content:flex-start}.modal-footer .btn{flex:1 1 0;min-width:0;min-height:44px}.modal-footer .grow{display:none}.editor-toolbar{position:relative;top:auto;padding:5px}.editor-toolbar .icon-btn{width:40px;height:40px;min-width:40px;min-height:40px}.editor-controls{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}.editor-controls>*{flex-shrink:0}.editor-toolbar .select-trigger,.editor-toolbar .color-picker-button{min-height:40px}.editor-size-control input{font-size:16px;min-height:40px}.editor{min-height:280px}.composer-chips input{font-size:16px;min-height:44px}.compose-row{flex-wrap:wrap;gap:4px}.compose-row>label{width:52px}.compose-row .composer-chips{flex:1;min-width:180px}.date-trigger,.select-trigger{min-height:44px}.setting-row{flex-wrap:wrap}.decision-card{padding:20px}.ui-popover[role=menu]>button{min-height:44px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.sidebar .label-symbol{display:inline-flex!important;flex:none}.sidebar .label-symbol svg{width:20px;height:20px}.sidebar .label-name{overflow:hidden;text-overflow:ellipsis}.sidebar-collapsed .compose-main .button-label,.sidebar-collapsed .label-name{display:none!important}.sidebar-collapsed .sidebar .folder-btn[data-view=settings]{font-size:0!important}.sidebar-collapsed .label-symbol{font-size:0}.sidebar .label-row .folder-btn{padding-right:38px}.sidebar-collapsed .label-row .folder-btn{padding:0}
.calendar-head-tabs{grid-row:2;grid-column:1/-1;width:max-content;max-width:100%}
.nested-preview{width:min(1000px,100%);max-height:94dvh;overflow:auto;padding:20px;border-radius:20px;background:var(--surface);color:var(--text)}.nested-preview h2{font-size:18px;overflow-wrap:anywhere}.nested-preview .file-live-preview{margin:16px 0}.compose-extras:has([data-action=attach]){display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding:10px 0;gap:8px}.compose-extras:has([data-action=attach])>.btn{flex:0 0 auto}
@media(max-width:700px){.sidebar-collapsed .label-name{display:inline!important}.sidebar-collapsed .sidebar .folder-btn[data-view=settings]{font-size:var(--control-font,16px)!important}.sidebar-collapsed .label-row .folder-btn{padding:0 38px 0 12px}.head-tools .btn.primary{font-size:0!important}.head-tools .btn.primary .button-label{display:none!important}.head-tools .btn.primary svg{width:20px;height:20px}}
