/* Components ported from the approved reference; scope keeps feature behavior separate. */
#view-inbox *{box-sizing:border-box}
#view-inbox{margin:0;min-height:100%;font-family:Peyda,sans-serif;font-size:15px;line-height:1.7;font-variant-numeric:tabular-nums}
#view-inbox{background:var(--bg);color:var(--fg)}
#view-inbox button,#view-inbox input,#view-inbox select,#view-inbox a{font:inherit}
#view-inbox button,#view-inbox a{color:inherit}
#view-inbox button{cursor:pointer}
#view-inbox button{border:0;background:none}
#view-inbox button:focus-visible,#view-inbox a:focus-visible,#view-inbox select:focus-visible{outline:none;filter:brightness(.88)}
#view-inbox button:hover{background:var(--hover)}
#view-inbox a{text-decoration:none}
#view-inbox svg{display:block;width:20px;height:20px;flex-shrink:0}
#view-inbox h1,#view-inbox h2,#view-inbox p{margin:0}
#view-inbox button,#view-inbox select{min-height:44px}
#view-inbox button:disabled{cursor:default}
#view-inbox .topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);padding:0 40px;gap:24px}
#view-inbox .brand-menu,#view-inbox .utilities,#view-inbox .brand{display:flex;align-items:center}
#view-inbox .brand-menu{gap:20px}
#view-inbox .brand{gap:9px;font-weight:700;font-size:21px}
#view-inbox .brand-mark{width:27px;height:32px;background:var(--fg);mask:url('assets/logo.svg') center/contain no-repeat;-webkit-mask:url('assets/logo.svg') center/contain no-repeat}
#view-inbox .menu-button{display:grid;place-items:center;width:44px;height:44px;color:var(--muted);padding:0 12px;border-radius:var(--radius);font-size:13px}
#view-inbox .utilities{gap:8px}
#view-inbox .icon-button{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius)}
#view-inbox .theme-sun{display:none}
html:not(.light) #view-inbox .theme-sun{display:block}
html:not(.light) #view-inbox .theme-moon{display:none}
#view-inbox .layout{display:flex;min-height:calc(100vh - 76px)}
#view-inbox .sidebar{width:208px;flex-shrink:0;background:var(--nav);padding:28px 16px 24px;border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:5px}
#view-inbox .sidebar[hidden]{display:none}
#view-inbox .nav-item{width:100%;display:flex;align-items:center;gap:12px;text-align:start;padding:0 14px;height:46px;border-radius:var(--radius);font-size:14px;color:var(--muted)}
#view-inbox .nav-item.active{color:var(--on-action);background:var(--action)}
#view-inbox .nav-bottom{margin-top:auto}
#view-inbox{flex:1;min-width:0;padding:37px 48px 95px}
#view-inbox .content{max-width:1120px;margin:0 auto}
#view-inbox .capture{height:224px;background:var(--surface);border-radius:var(--radius);position:relative;overflow:hidden;display:flex;align-items:center;isolation:isolate;padding:34px 40px}
#view-inbox .capture-copy{position:relative;z-index:1;width:53%}
#view-inbox .welcome{margin-right:auto;position:relative;z-index:1;min-width:240px;padding-right:30px;border-right:1px solid var(--rule)}
#view-inbox .capture .greeting{margin:0 0 18px;font-size:24px;font-weight:800;line-height:1.4;color:var(--fg)}
#view-inbox .greeting strong{font-weight:800}
#view-inbox .welcome-date{display:flex;align-items:center;gap:20px}
#view-inbox .date-number{font-size:88px;line-height:1;font-weight:800;letter-spacing:-2px;color:var(--action)}
#view-inbox .date-words{display:flex;flex-direction:column;gap:3px}
#view-inbox .weekday{font-size:15px;font-weight:600;color:var(--muted)}
#view-inbox .month{font-size:44px;font-weight:800;line-height:1.1}
#view-inbox .capture h1{font-size:23px;line-height:1.65;font-weight:500;letter-spacing:-.3px}
#view-inbox .capture p{font-size:14px;color:var(--muted);margin:6px 0 24px}
#view-inbox .capture-actions{display:flex;align-items:center;gap:18px}
#view-inbox .primary{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--action);color:var(--on-action);height:46px;padding:0 21px;border-radius:var(--radius);font-size:14px;font-weight:500}
#view-inbox .primary:hover{background:var(--action);opacity:.9}
#view-inbox .plain{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);border-radius:var(--radius);padding:0 10px}
#view-inbox .plain:hover{color:var(--fg)}
#view-inbox .art{position:absolute;left:29%;top:16px;width:19%;height:192px;z-index:-1;color:var(--art);opacity:.8;pointer-events:none}
#view-inbox .art svg{width:100%;height:100%}
#view-inbox .below{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);gap:72px;margin-top:46px}
#view-inbox .section-head{min-height:44px;display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
#view-inbox .section-head h2{font-size:16px;font-weight:600}
#view-inbox .text-link{font-size:12px;display:flex;align-items:center;gap:8px;color:var(--muted);border-radius:var(--radius);padding:0 6px}
#view-inbox .text-link svg{width:15px;height:15px}
#view-inbox .agenda{padding:0;margin:0;list-style:none}
#view-inbox .agenda-row{display:grid;grid-template-columns:32px minmax(0,1fr) 94px;column-gap:10px;align-items:start;min-height:76px;padding:10px 0;position:relative}
#view-inbox .agenda-row:after{content:'';position:absolute;right:42px;left:116px;bottom:0;height:1px;background:var(--rule)}
#view-inbox .agenda-copy{min-width:0;padding-top:1px}
#view-inbox .agenda-title{font-size:15px;font-weight:500;line-height:1.7}
#view-inbox .agenda-detail{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.85;max-width:370px}
#view-inbox .timing{padding-left:23px;text-align:left;position:relative;align-self:stretch}
#view-inbox .agenda-row:before{content:'';position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--rule)}
#view-inbox .agenda-row:first-child:before{top:21px}
#view-inbox .agenda-row:last-child:before{bottom:calc(100% - 21px)}
#view-inbox .timing:before{content:'';position:absolute;left:2px;top:7px;width:9px;height:9px;border:1px solid var(--art);background:var(--bg);border-radius:50%;box-sizing:border-box}
#view-inbox .agenda-row:first-child .timing:before{background:var(--art)}
#view-inbox .time{display:block;font-size:13px;color:var(--fg);direction:ltr;font-weight:500;line-height:1.7}
#view-inbox .duration,#view-inbox .day-label{display:block;font-size:12px;line-height:1.85;color:var(--muted);white-space:nowrap}
#view-inbox .day-label{margin-bottom:0}
#view-inbox .timing-line{display:grid;direction:ltr;grid-template-columns:max-content;justify-content:start;align-items:baseline;gap:6px;white-space:nowrap}
#view-inbox .agenda.upcoming .timing-line{grid-template-columns:max-content max-content max-content}
#view-inbox .timing-line .time{grid-column:1;grid-row:1}
#view-inbox .timing-line .time-divider{grid-column:2;grid-row:1}
#view-inbox .timing-line .day-label{grid-column:3;grid-row:1}
#view-inbox .timing-line .day-label{direction:rtl}
#view-inbox .time-divider{font-size:12px;color:var(--muted)}
#view-inbox .agenda.upcoming .agenda-row{grid-template-columns:32px minmax(0,1fr) 140px}
#view-inbox .agenda.upcoming .agenda-row:after{left:162px}
#view-inbox .task-check{width:44px;height:44px;min-height:44px;border:0;padding:0;margin:-9px -6px 0 0;display:grid;place-items:center;background:none;border-radius:var(--radius)}
#view-inbox .check-box{display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--muted);border-radius:0}
#view-inbox .task-check[aria-pressed=true] .check-box{background:var(--action);color:var(--on-action);border-color:var(--action)}
#view-inbox .task-check svg{width:16px;height:16px;opacity:0}
#view-inbox .task-check[aria-pressed=true] svg{opacity:1}
#view-inbox .agenda-row.done .agenda-title{text-decoration:line-through;color:var(--muted)}
#view-inbox .overdue{margin-top:13px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:0 4px}
#view-inbox .overdue-dot{display:block;width:5px;height:5px;background:var(--danger)}
#view-inbox .hati{position:relative;align-self:start}
#view-inbox .hati-head{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;margin-bottom:11px}
#view-inbox .hati-head h2{font-size:16px;font-weight:600;margin:0}
#view-inbox .hati-art{color:var(--art);width:32px;height:32px;flex-shrink:0}
#view-inbox .hati-art svg{width:100%;height:100%}
#view-inbox .hati-art svg [fill=white]{fill:var(--bg)}
#view-inbox .hati-art svg [stroke=white]{stroke:var(--bg)}
#view-inbox .hati-list{list-style:none;margin:0;padding:0}
#view-inbox .hati-item+.hati-item{border-top:1px solid var(--rule)}
#view-inbox .hati-suggestion{display:grid;grid-template-columns:34px minmax(0,1fr) 18px;border-radius:var(--radius);gap:10px;width:100%;min-height:64px;padding:7px 0;text-align:start;align-items:center}
#view-inbox .hati-suggestion:hover{background:transparent;color:var(--action)}
#view-inbox .hati-suggestion:hover .suggestion-title{text-decoration:underline;text-underline-offset:4px}
#view-inbox .suggestion-title{display:block;font-size:14px;font-weight:500;line-height:1.7}
#view-inbox .suggestion-copy{min-width:0}
#view-inbox .suggestion-detail{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.7}
#view-inbox .hati-suggestion svg{width:16px;height:16px;color:var(--muted)}
#view-inbox .suggestion-expanded{padding:0 44px 14px 12px;font-size:13px;line-height:1.95;color:var(--muted)}
#view-inbox .suggestion-expanded[hidden]{display:none}
#view-inbox .suggestion-expanded p{margin:3px 0 10px;overflow-wrap:anywhere}
#view-inbox .suggestion-expanded .text-link{color:var(--action);font-size:12px;padding:0}
#view-inbox .hati-suggestion[aria-expanded=true]>.suggestion-chevron{transform:rotate(180deg)}
#view-inbox .suggestion-chevron{width:16px;height:16px}
#view-inbox .suggestion-icon{display:grid;place-items:center;width:34px;height:34px;background:var(--action);color:var(--on-action);border-radius:0}
#view-inbox .hati-suggestion .suggestion-icon svg{width:17px;height:17px;color:inherit}
html[data-theme="pro"] #view-inbox .suggestion-icon{border-radius:9px}
html[data-theme="pro"] #view-inbox .check-box{border-radius:4px}
#view-inbox .hati-foot{font-size:11px;color:var(--muted);margin-top:13px;min-height:44px;display:flex;align-items:center}
#view-inbox .footer-note{margin-top:56px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted);border-top:1px solid var(--rule);padding-top:15px}
#view-inbox .review{position:fixed;z-index:5;bottom:18px;left:50%;transform:translateX(-50%);display:flex;direction:ltr;gap:10px;align-items:center;background:var(--fg);color:var(--bg);padding:8px 16px;border-radius:8px;box-shadow:0 3px 25px #0002;font-size:12px;max-width:calc(100vw - 30px)}
#view-inbox .review label{white-space:nowrap}
#view-inbox .review select{padding:5px 9px;min-height:34px;background:var(--bg);color:var(--fg);border:none;border-radius:4px;font-size:12px}
#view-inbox .review a{white-space:nowrap;border-bottom:1px solid currentColor;font-size:12px;margin-left:8px}
#view-inbox .review strong{margin-right:10px;font-weight:500;white-space:nowrap}
#view-inbox .toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 20px;font-size:13px;z-index:6}
#view-inbox .toast[hidden]{display:none}
#view-inbox [hidden]{display:none!important}
#view-inbox .empty-copy{padding:24px 0 30px;max-width:360px}
#view-inbox .empty-copy h3{font-size:15px;font-weight:500;margin:0 0 7px}
#view-inbox .empty-copy p{font-size:13px;line-height:1.95;color:var(--muted);margin:0}
#view-inbox .empty-graphic{width:38px;height:38px;color:var(--art);margin-bottom:16px}
#view-inbox .empty-graphic svg{width:100%;height:100%}
#view-inbox .shot .review{display:none}
#view-inbox .shot .workspace{padding-bottom:45px}
#view-inbox .shot .footer-note{display:none}
@media(min-width:1600px){#view-inbox{padding-top:48px}
#view-inbox .capture{height:240px}
}
@media(max-width:1100px){#view-inbox{padding:30px 30px 95px}
#view-inbox .below{gap:36px;grid-template-columns:minmax(0,1.4fr) minmax(230px,1fr)}
#view-inbox .capture{padding:28px}
#view-inbox .capture-copy{width:55%}
#view-inbox .welcome{min-width:205px;padding-right:20px}
#view-inbox .date-number{font-size:76px}
#view-inbox .capture .greeting{font-size:22px}
#view-inbox .month{font-size:38px}
#view-inbox .capture h1{font-size:21px}
#view-inbox .sidebar{width:190px}
}
@media(max-width:800px){#view-inbox{padding:24px}
#view-inbox .topbar{padding:0 20px}
#view-inbox .below{grid-template-columns:1fr;gap:28px}
#view-inbox .capture-copy{width:55%}
#view-inbox .welcome{min-width:160px;padding-right:15px}
#view-inbox .date-number{font-size:56px}
#view-inbox .welcome-date{gap:10px}
#view-inbox .month{font-size:20px}
#view-inbox .art{display:none}
#view-inbox .review strong,#view-inbox .review label{display:none}
#view-inbox .sidebar{position:absolute;right:0;z-index:4;min-height:calc(100vh - 76px)}
#view-inbox .footer-note{margin-bottom:70px}
}
@media(min-width:601px){#view-inbox .welcome-date .date-number{font-size:101px;padding-top:9px;margin-bottom:-34px;height:106px}
#view-inbox .welcome-date .month{font-size:56px;margin-top:-15px}
}
#view-inbox .empty-state .capture,#view-inbox .empty-state .below,#view-inbox .empty-state .footer-note{display:none}
#view-inbox .empty-state .workspace{padding:24px 48px;display:flex;align-items:center;justify-content:center;min-height:calc(100svh - 76px)}
#view-inbox .empty-state .content{width:100%}
#view-inbox .chosen-empty .welcome-stage{text-align:center}
#view-inbox .chosen-empty .welcome-emblem{position:relative;width:280px;height:146px;margin:0 auto 20px}
#view-inbox .chosen-empty .heart{width:112px;height:126px;margin:auto;color:var(--action)}
#view-inbox .chosen-empty .heart svg{width:100%;height:100%}
#view-inbox .chosen-empty .heart [fill=white]{fill:var(--bg)}
#view-inbox .chosen-empty .heart [stroke=white]{stroke:var(--bg)}
#view-inbox .chosen-empty .step{position:absolute;display:block;width:36px;height:36px;border-top:3px solid var(--art);border-right:3px solid var(--art);opacity:.45}
#view-inbox .chosen-empty .step-a{left:12px;top:42px;transform:rotate(-15deg)}
#view-inbox .chosen-empty .step-b{right:12px;top:72px;transform:rotate(165deg)}
#view-inbox .chosen-empty h1{font-size:38px;font-weight:800;letter-spacing:-.8px;line-height:1.4;margin-top:-41px;margin-bottom:-7px}
#view-inbox .chosen-empty .subcopy{color:var(--muted);font-size:15px;line-height:1.9;margin:6px 0 27px}
#view-inbox .chosen-empty .center-actions{display:flex;justify-content:center;gap:20px}
#view-inbox .preview-dialog{background:var(--bg);color:var(--fg);border:1px solid var(--rule);border-radius:var(--radius);padding:26px;width:min(560px,calc(100vw - 40px))}
#view-inbox .preview-dialog::backdrop{background:#17131e66}
#view-inbox .dialog-heading{display:flex;align-items:center;justify-content:space-between}
#view-inbox .dialog-heading h2{font-size:20px}
#view-inbox .writing-form textarea{font:inherit;font-size:16px;line-height:2;color:var(--fg);width:100%;border:0;background:transparent;resize:vertical;min-height:180px;outline-offset:5px;padding:22px 0;display:block}
#view-inbox .form-status{font-size:12px;color:var(--muted);margin-top:12px;min-height:20px}
#view-inbox .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){#view-inbox .sidebar,#view-inbox #navigation,#view-inbox #navigation-dialog,#view-inbox #workspace-menu,#view-inbox .topbar #menu,#view-inbox .topbar [data-action="menu"],#view-inbox .topbar [data-do="menu"],#view-inbox .topbar [data-do="navigation"]{display:none!important}
}
#view-inbox .mobile-nav,#view-inbox .mobile-settings{display:none}
@media(max-width:600px){#view-inbox,#view-inbox .preview-dialog{scrollbar-width:none}
#view-inbox html::-webkit-scrollbar,#view-inbox::-webkit-scrollbar,#view-inbox .preview-dialog::-webkit-scrollbar{display:none;width:0;height:0}
#view-inbox{min-width:0;-webkit-text-size-adjust:100%}
#view-inbox .topbar{height:64px;padding:0 12px;gap:8px}
#view-inbox .brand-menu{gap:4px}
#view-inbox .brand{font-size:19px;gap:7px}
#view-inbox .brand-mark{width:23px;height:28px}
#view-inbox .utilities{gap:0}
#view-inbox .mobile-settings{display:grid}
#view-inbox .menu-button,#view-inbox .sidebar{display:none!important}
#view-inbox .layout{min-height:calc(100svh - 64px);padding-bottom:var(--mobile-nav-height)}
#view-inbox,#view-inbox .shot .workspace{padding:20px 16px max(32px,env(safe-area-inset-bottom))}
#view-inbox .capture{height:auto;min-height:0;padding:20px;display:flex;flex-direction:column;align-items:stretch;gap:22px}
#view-inbox .welcome{order:-1;min-width:0;padding:0 0 16px;margin:0;border-right:0;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:16px}
#view-inbox .capture .greeting{font-size:22px;line-height:1.5;margin:0}
#view-inbox .welcome-date{gap:10px}
#view-inbox .date-number{font-size:57px;height:47px;padding-top:4px;letter-spacing:-1px}
#view-inbox .weekday{font-size:12px}
#view-inbox .month{font-size:32px;margin-top:-5px}
#view-inbox .date-words{gap:0}
#view-inbox .capture-copy{width:100%}
#view-inbox .capture h1{font-size:21px;line-height:1.6;letter-spacing:-.3px;font-weight:600;text-wrap:balance;margin-bottom:-6px}
#view-inbox .capture p:not(.greeting){font-size:13px;line-height:1.8;margin:4px 0 18px}
#view-inbox .capture-actions{gap:8px;justify-content:space-between}
#view-inbox .capture-actions .primary{flex:1;max-width:150px;height:48px;padding:0 16px}
#view-inbox .capture-actions .plain{font-size:12px;padding:0 8px;min-height:48px}
#view-inbox .art{display:none}
#view-inbox .below{margin-top:24px;grid-template-columns:minmax(0,1fr);gap:24px}
#view-inbox .section-head,#view-inbox .hati-head{margin-bottom:8px}
#view-inbox .section-head h2,#view-inbox .hati-head h2{font-size:16px}
#view-inbox .agenda-row{grid-template-columns:26px minmax(0,1fr) 65px;gap:6px;min-height:82px;padding:10px 0}
#view-inbox .agenda-row:after{right:32px;left:77px}
#view-inbox .agenda-title{font-size:14px;line-height:1.7}
#view-inbox .agenda-detail{font-size:12px;line-height:1.8;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-inbox .timing{padding-left:16px}
#view-inbox .time{font-size:12px}
#view-inbox .duration,#view-inbox .day-label,#view-inbox .time-divider{font-size:11px}
#view-inbox .timing-line{gap:4px}
#view-inbox .agenda.upcoming .agenda-row{grid-template-columns:26px minmax(0,1fr) 106px}
#view-inbox .agenda.upcoming .agenda-row:after{left:118px}
#view-inbox .task-check{margin:-9px -9px 0 0}
#view-inbox .overdue{margin-top:4px;min-height:44px}
#view-inbox .hati{padding-top:16px;border-top:1px solid var(--rule)}
#view-inbox .hati-suggestion{min-height:64px;gap:12px}
#view-inbox .suggestion-title{font-size:14px}
#view-inbox .suggestion-detail{font-size:12px}
#view-inbox .hati-foot{margin-top:4px;font-size:11px}
#view-inbox .suggestion-expanded{padding-right:46px;padding-left:8px;font-size:14px}
#view-inbox .footer-note,#view-inbox .review{display:none}
#view-inbox .empty-state .workspace,#view-inbox .empty-state.shot .workspace{min-height:calc(100svh - 64px - var(--mobile-nav-height));padding:32px 20px max(32px,env(safe-area-inset-bottom))}
#view-inbox .chosen-empty .welcome-emblem{width:240px;height:140px;margin-bottom:20px}
#view-inbox .chosen-empty .heart{width:104px;height:120px}
#view-inbox .chosen-empty h1{font-size:30px;line-height:1.5;margin-top:-38px;margin-bottom:-10px;letter-spacing:-.6px}
#view-inbox .chosen-empty .subcopy{font-size:13px;margin:8px 0 24px;line-height:1.9}
#view-inbox .chosen-empty .center-actions{gap:12px;align-items:center}
#view-inbox .chosen-empty .primary{height:48px}
#view-inbox .chosen-empty .plain{min-height:48px}
#view-inbox .mobile-nav{position:fixed;inset:auto 0 0;z-index:8;height:var(--mobile-nav-height);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:5px 8px calc(5px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--rule)}
#view-inbox .mobile-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:56px;padding:0;font-size:11px;line-height:1.4;color:var(--muted);border-radius:var(--radius)}
#view-inbox .mobile-nav-icon{width:44px;height:30px;display:grid;place-items:center;border-radius:0}
#view-inbox .mobile-nav-icon svg{width:21px;height:21px}
#view-inbox .mobile-nav-item.active{color:var(--fg);font-weight:700}
#view-inbox .mobile-nav-item.active .mobile-nav-icon{background:var(--quiet);color:var(--action)}
html[data-theme="pro"] #view-inbox .mobile-nav-icon{border-radius:9px}
#view-inbox .mobile-nav-icon [fill=white]{fill:var(--bg)}
#view-inbox .mobile-nav-icon [stroke=white]{stroke:var(--bg)}
#view-inbox .preview-dialog{padding:20px;width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow:auto}
#view-inbox .writing-form textarea{min-height:150px;margin-bottom:12px}
#view-inbox .toast{width:calc(100% - 32px);bottom:calc(var(--mobile-nav-height) + 12px);text-align:center;border-radius:var(--radius);font-size:13px}
#view-inbox button:active{opacity:.75}
}
@media(max-width:360px){#view-inbox .capture{padding:16px}
#view-inbox .capture .greeting{font-size:20px}
#view-inbox .capture h1{font-size:20px}
#view-inbox .brand{font-size:18px}
#view-inbox .topbar{padding:0 8px}
#view-inbox .chosen-empty h1{font-size:27px}
}
#view-notes,#view-notes dialog,#view-notes .folder-rail{scrollbar-width:none}
#view-notes ::-webkit-scrollbar{display:none}
#view-notes input,#view-notes textarea,#view-notes select{font:inherit}
#view-notes button,#view-notes input,#view-notes textarea,#view-notes select{outline-offset:4px}
#view-notes input:focus,#view-notes textarea:focus,#view-notes input:focus-visible,#view-notes textarea:focus-visible{outline:none;box-shadow:none}
#view-notes .notes-workspace{padding-top:40px}
#view-notes .library-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}
#view-notes .library-heading h1{font-size:34px;line-height:1.4;font-weight:800;letter-spacing:-.7px}
#view-notes .library-heading p{font-size:14px;color:var(--muted);margin-top:6px}
#view-notes .library-heading .primary{height:46px}
#view-notes .library-tools{display:flex;gap:12px;align-items:center;margin-bottom:18px}
#view-notes .library-search{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:var(--radius);padding:0 16px;min-height:50px;flex:1;color:var(--muted)}
#view-notes .library-search input{border:0;background:none;color:var(--fg);width:100%;min-width:0;height:50px;outline:none;font-size:14px}
#view-notes .library-search input::-webkit-search-cancel-button{display:none}
#view-notes .library-search input::placeholder{color:var(--muted)}
#view-notes .clear-search{width:34px;min-width:34px;margin-left:-10px}
#view-notes .folders-manage{padding:0 16px;min-height:50px;border:1px solid var(--rule)}
#view-notes .folder-rail{display:flex;align-items:center;gap:8px;overflow:auto;padding:2px 0 18px;border-bottom:1px solid var(--rule)}
#view-notes .folder-filter{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 16px;min-height:44px;border-radius:var(--radius);color:var(--muted);white-space:nowrap;font-size:13px}
#view-notes .folder-filter svg{width:17px;height:17px}
#view-notes .folder-filter .folder-count{font-size:11px;opacity:.8}
#view-notes .folder-filter[aria-pressed=true]{background:var(--action);color:var(--on-action)}
#view-notes .library-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 16px}
#view-notes .library-label,#view-notes .library-options{display:flex;gap:12px;align-items:center}
#view-notes .library-label h2{font-size:16px;font-weight:600}
#view-notes .layout-toggle{display:flex}
#view-notes .layout-toggle button{width:44px}
#view-notes .layout-toggle svg{width:18px;height:18px}
#view-notes .layout-toggle [aria-pressed=true]{background:var(--quiet);color:var(--action)}
#view-notes .notes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
#view-notes .note-card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:230px;border-radius:var(--radius);background:var(--surface);padding:21px 22px 12px;transition:background .15s}
#view-notes .note-card:hover{background:var(--hover)}
#view-notes .note-top{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--muted);margin-bottom:14px}
#view-notes .note-top svg{width:16px;height:16px;color:var(--art)}
#view-notes .note-date{margin-right:auto}
#view-notes .note-open{display:block;text-align:start;padding:0;min-height:0;border-radius:3px}
#view-notes .note-open:hover{background:none}
#view-notes .note-open:after{content:'';position:absolute;inset:0;border-radius:var(--radius)}
#view-notes .note-open h3{font-size:18px;font-weight:600;line-height:1.6;margin:0 0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-notes .note-excerpt{font-size:13px;line-height:1.95;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:76px}
#view-notes .note-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:14px;min-height:50px}
#view-notes .note-folder{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
#view-notes .note-folder svg{width:14px;height:14px}
#view-notes .note-more{z-index:1;position:relative;width:44px;height:44px;min-height:44px;margin-left:-8px}
#view-notes .note-more svg{width:16px;height:16px}
#view-notes .audio-duration{display:flex;align-items:center;gap:6px;color:var(--art);font-size:11px}
#view-notes .audio-bars{display:flex;align-items:center;gap:2px;height:18px}
#view-notes .audio-bars i{display:block;width:2px;background:currentColor}
#view-notes .note-bottom-left{display:flex;align-items:center;gap:14px}
#view-notes .note-card .tag{font-size:11px;color:var(--art)}
#view-notes .notes-grid.list-view{grid-template-columns:1fr;gap:16px}
#view-notes .list-view .note-card{display:grid;grid-template-columns:160px minmax(0,1fr) 165px;align-items:center;gap:24px;min-height:108px;border-radius:var(--radius);background:var(--surface);border:0;padding:16px 20px}
#view-notes .list-view .note-card:hover{background:var(--hover)}
#view-notes .list-view .note-top{margin:0;flex-wrap:wrap;justify-content:flex-start}
#view-notes .list-view .note-date{width:100%;margin:0 24px 0 0}
#view-notes .list-view .note-open h3{font-size:16px;margin-bottom:3px}
#view-notes .list-view .note-excerpt{display:block;white-space:nowrap;text-overflow:ellipsis;min-height:0}
#view-notes .list-view .note-bottom{margin:0;padding:0;gap:4px}
#view-notes .list-view .audio-bars{display:none}
#view-notes .empty-library,#view-notes .no-results{text-align:center;min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px}
#view-notes .empty-notebook{color:var(--action);background:var(--surface);padding:25px;border-radius:var(--radius);margin-bottom:22px}
#view-notes .empty-notebook svg{width:52px;height:52px}
#view-notes .empty-library h2,#view-notes .no-results h2{font-size:28px;font-weight:800;line-height:1.5;margin-bottom:8px}
#view-notes .empty-library p,#view-notes .no-results p{font-size:14px;color:var(--muted);margin-bottom:24px}
#view-notes .no-results>svg{width:32px;height:32px;margin-bottom:20px;color:var(--art)}
#view-notes .is-empty .library-tools,#view-notes .is-empty .folder-rail,#view-notes .is-empty .library-bar{display:none}
#view-notes .is-empty .empty-library{min-height:calc(100svh - 290px)}
#view-notes .is-empty .library-heading .primary{display:none}
#view-notes .reader{max-height:85svh;overflow:auto;padding:28px 32px}
#view-notes .reader-meta{font-size:12px;color:var(--muted)}
#view-notes .reader h2{font-size:28px;line-height:1.5;margin:18px 0}
#view-notes .reader #reader-body{white-space:pre-line;font-size:16px;line-height:2.2}
#view-notes .reader-foot{border-top:1px solid var(--rule);padding-top:20px;margin-top:28px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
#view-notes .compose-title{width:100%;padding:18px 0;border:0;background:none;color:var(--fg);font-size:22px;font-weight:700}
#view-notes #compose-body{width:100%;resize:vertical;min-height:180px;border:0;border-top:1px solid var(--rule);padding:18px 0;background:none;color:var(--fg);font-size:15px;line-height:1.9}
#view-notes .compose-actions{display:flex;justify-content:space-between;gap:12px}
#view-notes #folder-list{margin:20px 0}
#view-notes #folder-list .folder-filter{width:100%;justify-content:flex-start;border-bottom:1px solid var(--rule);border-radius:0}
#view-notes #folder-list .folder-count{margin-right:auto}
#view-notes #folder-form{display:flex;gap:10px}
#view-notes #folder-name{min-width:0;width:100%;background:var(--field);color:var(--fg);border:1px solid var(--rule);border-radius:var(--radius);padding:0 12px}
#view-notes #folder-form .primary{white-space:nowrap}
#view-notes .notes-workspace .content{max-width:1120px}
#view-notes button,#view-notes select{touch-action:manipulation}
@media(min-width:601px) and (max-width:950px){#view-notes .notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#view-notes .list-view .note-card{grid-template-columns:110px minmax(0,1fr) 140px;gap:14px}
}
@media(max-width:600px){#view-notes .notes-workspace,#view-notes .shot .notes-workspace{padding:26px 16px 28px}
#view-notes .library-heading{gap:12px;margin-bottom:23px}
#view-notes .library-heading h1{font-size:28px}
#view-notes .library-heading p{font-size:12px;margin-top:3px}
#view-notes .library-heading .primary{padding:0 13px;font-size:12px;height:44px;gap:6px}
#view-notes .library-heading .primary svg{width:16px;height:16px}
#view-notes .library-tools{gap:8px;margin-bottom:10px}
#view-notes .library-search{padding:0 12px;min-height:46px;gap:8px}
#view-notes .library-search input{height:46px;font-size:13px}
#view-notes .folders-manage{padding:0 12px;min-height:46px}
#view-notes .folders-manage span{display:none}
#view-notes .folder-rail{margin-left:-16px;gap:4px;padding-bottom:12px;padding-left:16px}
#view-notes .folder-filter{font-size:12px;padding:0 12px;gap:8px}
#view-notes .folder-filter svg{width:16px;height:16px}
#view-notes .library-bar{margin:14px 0 12px;gap:6px}
#view-notes .library-label{gap:6px}
#view-notes .library-label h2{font-size:14px}
#view-notes .library-options{gap:3px}
#view-notes .layout-toggle button{width:44px}
#view-notes .notes-grid{grid-template-columns:1fr;gap:12px}
#view-notes .note-card{min-height:192px;padding:17px 18px 9px}
#view-notes .note-top{margin-bottom:8px}
#view-notes .note-open h3{font-size:17px;margin-bottom:5px}
#view-notes .note-excerpt{font-size:13px;min-height:50px;-webkit-line-clamp:2}
#view-notes .note-bottom{padding-top:8px;min-height:44px}
#view-notes .notes-grid.list-view .note-card{display:flex;align-items:stretch;gap:0;min-height:172px;padding:14px 16px}
#view-notes .list-view .note-top{flex-wrap:nowrap;margin-bottom:8px}
#view-notes .list-view .note-date{width:auto;margin-right:auto}
#view-notes .list-view .note-bottom{margin-top:4px}
#view-notes .list-view .note-excerpt{white-space:nowrap}
#view-notes .empty-library,#view-notes .no-results{min-height:350px;padding:28px 0}
#view-notes .is-empty .empty-library{min-height:calc(100svh - 270px)}
#view-notes .empty-library h2,#view-notes .no-results h2{font-size:25px}
#view-notes .empty-library p,#view-notes .no-results p{font-size:13px}
#view-notes .reader{padding:22px;max-height:85svh}
#view-notes .reader h2{font-size:24px}
#view-notes .reader #reader-body{font-size:15px}
#view-notes .compose-actions{gap:6px}
#view-notes .compose-actions .primary{font-size:12px;padding:0 12px}
}
@media(prefers-reduced-motion:reduce){#view-notes .note-card{transition:none}
}
#view-notes .notes-grid:not(.list-view){display:block;position:relative}
#view-notes .notes-grid:not(.list-view) .note-card{position:absolute;min-height:0}
#view-notes .note-card{padding:20px 20px 9px;overflow:hidden}
#view-notes .note-excerpt{min-height:0;-webkit-line-clamp:4}
#view-notes .note-open h3{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#view-notes .note-open:after{z-index:0}
#view-notes .note-top,#view-notes .note-bottom,#view-notes .note-open{flex-shrink:0}
#view-notes .note-images,#view-notes .card-audio{position:relative;z-index:1}
#view-notes .note-images{display:grid;margin:-20px -20px 17px;overflow:hidden;gap:3px;background:var(--rule);height:194px}
#view-notes .note-images.single{height:210px;grid-template-columns:1fr}
#view-notes .note-images.collage{grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr}
#view-notes .note-images.collage .note-image:first-child{grid-row:span 2}
#view-notes .note-image{padding:0;position:relative;min-width:0;min-height:0;overflow:hidden;display:block}
#view-notes .note-image img{display:block;width:100%;height:100%;object-fit:cover}
#view-notes .note-image:hover img{filter:brightness(.92)}
#view-notes .note-image:focus-visible{outline:none;filter:brightness(.88)}
#view-notes .image-count{position:absolute;inset:0;display:grid;place-items:center;background:#19132280;color:white;font-size:24px;font-weight:700;direction:ltr}
#view-notes .image-failed:after{content:'تصویر در دسترس نیست';position:absolute;inset:0;display:grid;place-items:center;background:var(--surface);color:var(--muted);font-size:12px}
#view-notes .card-audio{margin-top:17px;background:var(--quiet);padding:10px 12px 8px;border-radius:calc(var(--radius)*.65);direction:rtl}
#view-notes .audio-main{display:flex;gap:11px;align-items:center}
#view-notes .audio-play{min-height:44px;height:44px;width:44px;flex:0 0 44px;display:grid;place-items:center;background:var(--action);color:var(--on-action);border-radius:calc(var(--radius)*.65)}
#view-notes .audio-play:hover{background:var(--action);opacity:.85}
#view-notes .audio-play svg{width:20px;height:20px}
#view-notes .audio-track{height:38px;position:relative;flex:1;min-width:0;direction:ltr}
#view-notes .waveform{height:30px;position:absolute;inset:4px 0;display:flex;align-items:center;gap:2px;color:var(--art);opacity:.65}
#view-notes .waveform i{flex:1;min-width:1px;background:currentColor}
#view-notes .played-wave{position:absolute;inset:0 auto 0 0;background:var(--action);opacity:.15;pointer-events:none}
#view-notes .audio-seek{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;direction:ltr}
#view-notes .audio-track:has(.audio-seek:focus-visible){outline:none;filter:brightness(.8)}
#view-notes .audio-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;line-height:1.5;margin-top:6px}
#view-notes .playing .waveform{opacity:1}
#view-notes .playing .audio-current{color:var(--action);font-weight:700}
#view-notes .note-bottom{padding-top:9px}
#view-notes .image-viewer{width:min(920px,calc(100vw - 32px));max-height:92svh;padding:18px 24px;overflow:auto}
#view-notes .image-viewer .dialog-heading h2{font-size:17px;max-width:calc(100% - 55px)}
#view-notes .image-viewer figure{margin:14px 0 0}
#view-notes .image-viewer figure img{width:100%;height:min(61svh,640px);object-fit:contain;display:block;background:var(--surface)}
#view-notes .image-viewer figcaption{text-align:center;font-size:12px;color:var(--muted);padding-top:12px}
#view-notes .gallery-controls{display:flex;gap:22px;align-items:center;justify-content:center;direction:rtl;margin-top:8px}
#view-notes .gallery-controls span{font-size:12px;color:var(--muted)}
#view-notes .gallery-controls button:disabled{opacity:.25}
#view-notes .gallery-controls button:disabled:hover{background:none}
#view-notes .notes-grid.list-view .note-card{position:relative;display:grid;grid-template-columns:130px minmax(0,1fr) 210px;gap:12px 24px;align-items:start;padding:20px;overflow:visible}
#view-notes .list-view .note-top{grid-column:1;grid-row:1}
#view-notes .list-view .note-open{grid-column:2;grid-row:1}
#view-notes .list-view .note-bottom{grid-column:1;grid-row:2;align-self:end;flex-wrap:nowrap;justify-content:space-between;min-width:0}
#view-notes .list-view .note-bottom .note-folder{min-width:0;overflow:hidden;white-space:nowrap}
#view-notes .list-view .note-bottom .note-folder svg{flex-shrink:0}
#view-notes .list-view .note-bottom .note-more{flex:0 0 44px;margin:0}
#view-notes .list-view .note-images{grid-column:3;grid-row:1 / span 2;margin:0;height:146px;border-radius:var(--radius)}
#view-notes .list-view .card-audio{grid-column:2;grid-row:2;margin:0;max-width:360px}
#view-notes .list-view .note-card:not(:has(.note-images)){grid-template-columns:130px minmax(0,1fr)}
#view-notes .list-view .note-open h3{display:block;white-space:nowrap}
#view-notes .list-view .note-excerpt{min-height:0}
@media(max-width:950px) and (min-width:601px){#view-notes .notes-grid.list-view .note-card{grid-template-columns:100px minmax(0,1fr) 150px;gap:12px}
#view-notes .list-view .note-card:not(:has(.note-images)){grid-template-columns:100px minmax(0,1fr)}
}
@media(max-width:600px){#view-notes .note-card{padding:17px 18px 8px}
#view-notes .note-images{margin:-17px -18px 14px;height:190px}
#view-notes .note-images.single{height:210px}
#view-notes .note-excerpt{-webkit-line-clamp:3}
#view-notes .notes-grid.list-view .note-card{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:16px;min-height:0}
#view-notes .list-view .note-images{height:160px;margin:0 0 14px}
#view-notes .list-view .note-top{margin-bottom:8px}
#view-notes .list-view .note-bottom{align-self:stretch;justify-content:space-between}
#view-notes .list-view .card-audio{margin-top:12px;max-width:none}
#view-notes .audio-track{height:44px}
#view-notes .waveform{top:7px}
#view-notes .image-viewer{padding:14px;width:calc(100vw - 20px)}
#view-notes .image-viewer figure img{height:55svh}
#view-notes .image-viewer .dialog-heading h2{font-size:15px}
}
@media(max-width:600px){#view-notes .notes-grid:not(.list-view) .note-card{padding:12px 12px 8px;border-radius:12px}
#view-notes .notes-grid:not(.list-view) .note-images{margin:-12px -12px 12px;height:130px}
#view-notes .notes-grid:not(.list-view) .note-images.single{height:140px}
#view-notes .notes-grid:not(.list-view) .note-top{flex-wrap:nowrap;gap:3px;font-size:clamp(8px,2.45vw,10px);white-space:nowrap}
#view-notes .notes-grid:not(.list-view) .note-top svg{width:11px;height:11px;flex:none}
#view-notes .notes-grid:not(.list-view) .note-date{width:auto;margin:0 auto 0 0;padding:0;flex:none}
#view-notes .notes-grid:not(.list-view) .note-open h3{font-size:14px;line-height:1.75}
#view-notes .notes-grid:not(.list-view) .note-excerpt{font-size:12px;line-height:1.85;-webkit-line-clamp:3}
#view-notes .notes-grid:not(.list-view) .note-folder{font-size:10px;gap:4px;overflow-wrap:anywhere}
#view-notes .notes-grid:not(.list-view) .note-folder svg{flex:none}
#view-notes .notes-grid:not(.list-view) .note-bottom{min-height:32px;padding-top:8px}
#view-notes .notes-grid:not(.list-view) .image-count{font-size:18px}
}
#view-notes #composer{width:min(660px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:28px;overflow:auto}
#view-notes #composer .dialog-heading{align-items:flex-start;margin:0}
#view-notes #composer .composer-hint{font-size:13px;color:var(--muted);margin:7px 0 0;line-height:1.8}
#view-notes #composer .compose-title{font-size:21px;padding:22px 0 14px}
#view-notes #composer #compose-body{min-height:150px;padding:16px 0;line-height:1.9;resize:vertical}
#view-notes .composer-attachments{border:0;margin:14px 0 22px;padding:0;min-width:0}
#view-notes .composer-attachments legend{font-size:12px;color:var(--muted);margin-bottom:10px}
#view-notes .composer-tools{display:flex;gap:8px;flex-wrap:wrap}
#view-notes .composer-tools .plain{background:var(--surface);border:1px solid var(--rule);padding:0 14px;gap:8px;font-size:13px;min-height:44px}
#view-notes .composer-tools svg{width:18px;height:18px}
#view-notes .composer-tools [aria-pressed=true]{color:var(--danger);border-color:currentColor}
#view-notes .composer-tools time{direction:ltr;font-variant-numeric:tabular-nums}
#view-notes .composer-photos{display:flex;gap:10px;overflow:auto;margin-top:16px;padding:3px}
#view-notes .composer-photos figure{margin:0;position:relative;flex:0 0 92px;height:92px}
#view-notes .composer-photos img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
#view-notes .composer-photos button{position:absolute;left:3px;top:3px;width:28px;height:28px;min-height:28px;background:var(--bg);box-shadow:0 1px 6px #0002}
#view-notes .composer-photos svg{width:14px;height:14px}
#view-notes .composer-audio{display:flex;align-items:center;gap:8px;margin-top:16px;direction:ltr}
#view-notes .composer-audio audio{width:100%;min-width:0;height:40px}
#view-notes #compose-status{font-size:12px;line-height:1.8;color:var(--muted);margin:12px 0 0}
#view-notes #composer .compose-actions{border-top:1px solid var(--rule);padding-top:18px;align-items:center}
#view-notes #composer .form-status{font-size:11px;margin:12px 0 0}
#view-notes #composer button:disabled{opacity:.5;cursor:default}
@media(max-width:600px){#view-notes #composer{padding:20px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
#view-notes #composer .dialog-heading h2{font-size:22px}
#view-notes #composer .compose-title{font-size:18px}
#view-notes #composer #compose-body{font-size:16px;min-height:130px}
#view-notes .composer-tools{gap:6px}
#view-notes .composer-tools .plain{padding:0 9px;font-size:12px;gap:5px}
#view-notes .composer-tools svg{width:16px;height:16px}
#view-notes .composer-attachments{margin:10px 0 16px}
}
#view-notes #composer .dialog-heading{height:0;min-height:0}
#view-notes #composer .dialog-heading>[data-close]{position:absolute;left:20px;top:20px;z-index:1}
#view-notes #composer .compose-title{padding:10px 0 18px;padding-left:52px}
#view-notes #composer .compose-actions{justify-content:flex-end}
#view-notes .composer-tools{display:grid;grid-template-columns:94px 94px minmax(0,1fr);gap:8px;transition:grid-template-columns .32s cubic-bezier(.2,.8,.2,1),gap .32s}
#view-notes .composer-tools>#compose-gallery,#view-notes .composer-tools>#compose-camera{min-width:0;overflow:hidden;transition:opacity .2s,padding .32s,border-width .32s}
#view-notes .composer-voice-slot{width:146px;max-width:100%;min-width:0;transition:width .32s cubic-bezier(.2,.8,.2,1)}
#view-notes #compose-voice{width:100%;white-space:nowrap;justify-content:center}
#view-notes .composer-tools.is-recording{grid-template-columns:0px 0px minmax(0,1fr);gap:0}
#view-notes .composer-tools.is-recording>#compose-gallery,#view-notes .composer-tools.is-recording>#compose-camera{opacity:0;padding:0;border-width:0;pointer-events:none}
#view-notes .composer-tools.is-recording .composer-voice-slot{width:100%}
#view-notes .composer-recording{height:48px;display:flex;align-items:center;gap:10px;padding:2px 8px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);color:var(--action);overflow:hidden;animation:recorder-in .2s ease-out}
#view-notes .composer-recording canvas{flex:1;width:0;min-width:0;height:34px}
#view-notes .composer-recording time{font-size:12px;direction:ltr;min-width:34px;color:var(--muted)}
#view-notes .recording-dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--danger)}
#view-notes #compose-stop{flex:0 0 40px;width:40px;height:40px;min-height:40px;background:var(--action);color:var(--on-action)}
#view-notes .stop-square{width:12px;height:12px;background:currentColor;border-radius:2px}
#view-notes .composer-audio-list{display:grid;gap:12px;margin-top:16px}
#view-notes .clip-label{display:block;font-size:11px;color:var(--muted);margin:0 0 5px}
#view-notes .composer-player.site-audio{display:flex;align-items:center;gap:10px;padding:7px 10px;margin:0;direction:ltr}
#view-notes .composer-player .audio-play{flex:0 0 32px;width:32px;height:32px;min-height:32px;padding:0}
#view-notes .composer-player .audio-play svg{width:16px;height:16px}
#view-notes .composer-player .audio-track{flex:1;min-width:0;height:32px}
#view-notes .composer-player .audio-progress-line{top:14px}
#view-notes .composer-player .clip-time{font-size:11px;min-width:32px;color:var(--muted)}
#view-notes .composer-player .clip-delete{width:36px;height:36px;min-height:36px;flex:0 0 36px;color:var(--muted)}
#view-notes .composer-player .clip-delete svg{width:16px;height:16px}
@keyframes recorder-in{from{opacity:0}to{opacity:1}}
@media(max-width:600px){#view-notes .composer-tools{grid-template-columns:76px 76px minmax(0,1fr);gap:6px}
#view-notes .composer-voice-slot{width:140px}
#view-notes .composer-tools .plain{padding:0 6px;font-size:11px}
#view-notes .composer-player.site-audio{gap:7px;padding:6px}
#view-notes .composer-recording{gap:7px}
#view-notes #composer .dialog-heading>[data-close]{left:12px;top:12px}
}
@media(prefers-reduced-motion:reduce){#view-notes .composer-tools,#view-notes .composer-voice-slot,#view-notes .composer-tools>#compose-gallery,#view-notes .composer-tools>#compose-camera{transition:none}
#view-notes .composer-recording{animation:none}
}
#view-notes .composer-clip{background:var(--surface);border-radius:var(--radius);overflow:hidden}
#view-notes .composer-player.site-audio{display:grid;grid-template-columns:28px minmax(0,1fr) 32px 28px;gap:12px;padding:5px 10px;border:0;background:transparent;min-height:38px}
#view-notes .composer-player.site-audio .audio-play{width:28px;height:28px;min-height:28px;border-radius:7px}
#view-notes .composer-player .audio-play svg{width:14px;height:14px}
#view-notes .composer-player .audio-track{height:28px;width:100%}
#view-notes .composer-player .audio-progress-line{top:12px}
#view-notes .composer-player .clip-delete{width:28px;height:28px;min-height:28px}
#view-notes .clip-transcript{font-size:13px;line-height:1.9;color:var(--fg);padding:8px 14px 12px;margin:0;white-space:pre-line;text-align:start;overflow-wrap:anywhere}
@media(max-width:600px){#view-notes .composer-player.site-audio{grid-template-columns:28px minmax(0,1fr) 30px 28px;gap:10px;padding:5px 7px}
#view-notes .clip-transcript{font-size:12px;padding:7px 12px 11px}
}
#view-notes .composer-player.site-audio .audio-progress-line{left:6px;right:6px}
#view-notes .composer-player.site-audio .audio-seek{left:6px;right:6px;width:calc(100% - 12px)}
html[data-skin=minimal] #view-notes .audio-play,html[data-skin=minimal] #view-notes #compose-stop,html[data-skin=minimal] #view-notes .stop-square{border-radius:0!important}
#view-notes dialog .compose-actions{justify-content:flex-start;gap:12px}
#view-notes dialog .compose-actions>.primary{order:-1;flex:1;justify-content:center}
#view-notes dialog .compose-actions>button:not(.primary){min-width:80px;justify-content:center}
#planModalBody{max-width:1040px;margin:auto;padding:48px 40px 80px}
#planModalBody h1{font-size:30px;font-weight:700}
#planModalBody h2{font-size:20px}
#planModalBody h3{font-size:16px}
#planModalBody p{line-height:1.9}
#planModalBody-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:28px}
#planModalBody-heading p,#planModalBody .hint{font-size:13px;color:var(--muted)}
#planModalBody-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:48px}
#planModalBody .section-nav{display:flex;flex-direction:column;gap:6px;align-self:start;position:sticky;top:28px}
#planModalBody .section-nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:var(--radius);font-size:14px}
#planModalBody .section-nav svg{width:17px;height:17px}
#planModalBody .section-nav a:hover{background:var(--hover)}
#planModalBody .section-nav a[aria-current=page]{background:var(--quiet);font-weight:600;color:var(--art)}
#planModalBody .setting-row{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:72px;padding:16px 0;border-bottom:1px solid var(--rule)}
#planModalBody .setting-row label{font-size:14px}
#planModalBody .setting-row small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
#planModalBody .setting-row select{width:180px;flex-shrink:0}
#planModalBody input,#planModalBody textarea,#planModalBody select,#planModalBody dialog input,#planModalBody dialog select,#planModalBody dialog textarea{font:inherit;color:var(--fg);background:var(--quiet);border:0;border-radius:var(--radius);padding:12px 14px;min-height:44px;width:100%;outline:none;box-shadow:none}
#planModalBody textarea,#planModalBody dialog textarea{resize:vertical;min-height:100px}
#planModalBody select:focus,#planModalBody dialog select:focus{background:var(--hover);outline:none;box-shadow:none}
#planModalBody button:focus-visible,#planModalBody a:focus-visible{background:var(--hover)}
#planModalBody .field{display:block;margin-bottom:20px;font-size:13px}
#planModalBody .field input,#planModalBody .field select,#planModalBody .field textarea{display:block;margin-top:8px}
#planModalBody .field small{display:block;color:var(--muted);font-size:12px;margin-top:6px}
#planModalBody .actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#planModalBody .actions button,#planModalBody .actions a{min-height:44px}
#planModalBody .actions svg{width:17px;height:17px}
#planModalBody .switch{position:relative;display:inline-flex;width:44px;height:44px;flex-shrink:0;align-items:center;justify-content:center}
#planModalBody .switch input{position:absolute;opacity:0;inset:0;cursor:pointer}
#planModalBody .switch span{height:24px;width:42px;border-radius:99px;background:var(--quiet);position:relative;pointer-events:none;transition:background .2s}
#planModalBody .switch span:after{content:'';position:absolute;width:16px;height:16px;top:4px;right:4px;background:var(--muted);border-radius:50%;transition:transform .2s}
#planModalBody .switch input:checked+span{background:var(--action)}
#planModalBody .switch input:checked+span:after{background:var(--on-action);transform:translateX(-18px)}
#planModalBody .switch input:focus-visible+span{box-shadow:0 0 0 2px var(--fg)}
#planModalBody .save-state{font-size:12px;color:var(--muted);min-height:24px}
#planModalBody .option-set{display:flex;gap:8px;flex-wrap:wrap}
#planModalBody .option-set button{background:var(--quiet);padding:0 16px;min-height:44px;border-radius:var(--radius)}
#planModalBody .option-set button[aria-pressed=true]{background:var(--action);color:var(--on-action)}
#planModalBody .swatch{width:44px;height:44px;background:var(--swatch)!important;padding:0!important;position:relative}
#planModalBody .swatch[aria-pressed=true]:after{content:'✓';color:white;font-size:22px}
#planModalBody .danger{color:var(--danger)}
#planModalBody .separated{margin-top:24px;padding-top:24px;border-top:1px solid var(--rule)}
#planModalBody .empty{text-align:center;padding:48px 16px;color:var(--muted)}
#planModalBody .empty svg{width:30px;height:30px;margin-bottom:12px}
#planModalBody .row-list{border-top:1px solid var(--rule)}
#planModalBody .item-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule);text-align:start;width:100%;background:transparent}
#planModalBody .item-row strong{font-size:14px;display:block}
#planModalBody .item-row small,#planModalBody .item-row time{font-size:12px;color:var(--muted)}
#planModalBody button.item-row:hover{background:var(--hover);border-radius:var(--radius)}
#planModalBody .badge{font-size:11px;color:var(--muted);background:var(--quiet);padding:4px 8px;border-radius:var(--radius);white-space:nowrap}
#planModalBody .badge[data-tone=danger]{color:var(--danger)}
#planModalBody .badge[data-tone=success]{color:var(--art)}
#planModalBody .toolbar{display:flex;align-items:flex-end;gap:12px;margin-bottom:24px;flex-wrap:wrap}
#planModalBody .toolbar .field{margin:0;flex:1;min-width:120px}
#planModalBody .toolbar .field:first-child{flex:2}
#planModalBody .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:32px}
#planModalBody .stat strong{display:block;font-size:30px}
#planModalBody .stat span{font-size:12px;color:var(--muted)}
#planModalBody .pagination{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:24px;font-size:13px}
#planModalBody .meter{margin:20px 0}
#planModalBody .meter header{display:flex;justify-content:space-between;gap:12px;font-size:13px}
#planModalBody .meter progress{width:100%;height:4px;appearance:none;border:0;background:var(--quiet);margin-top:8px}
#planModalBody .meter progress::-webkit-progress-bar{background:var(--quiet)}
#planModalBody .meter progress::-webkit-progress-value{background:var(--art)}
#planModalBody .plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:24px}
#planModalBody .plan-column{padding:20px 0;border-top:2px solid var(--rule);display:flex;flex-direction:column;gap:12px}
#planModalBody .plan-column.current{border-color:var(--art)}
#planModalBody .plan-column strong{font-size:20px}
#planModalBody .plan-column p{font-size:12px;color:var(--muted)}
#planModalBody .plan-column ul{font-size:12px;padding-right:16px;line-height:2.4;flex:1}
#planModalBody .plan-column button{justify-content:center}
#planModalBody .credit-packs{display:flex;gap:16px;margin-top:18px}
#planModalBody .credit-pack{flex:1;padding:16px 0;border-top:1px solid var(--rule)}
#planModalBody .credit-pack p{font-size:13px;margin-bottom:12px}
#planModalBody .preview-note{font-size:11px;color:var(--muted);margin-top:36px;line-height:1.8}
#planModalBody .auth-content{max-width:390px;margin:5vh auto}
#planModalBody .auth-content h1{margin-bottom:10px}
#planModalBody .auth-content form{margin-top:30px}
#planModalBody .auth-content .primary{width:100%;justify-content:center}
#planModalBody .auth-content .actions{justify-content:center;margin-top:18px;font-size:13px}
#planModalBody .legal{max-width:720px;margin:auto}
#planModalBody .legal h2{margin:28px 0 12px}
#planModalBody .legal p{font-size:14px}
#planModalBody .inline-error{font-size:12px;color:var(--danger);margin:10px 0}
#planModalBody .desktop-links{display:flex;gap:12px;font-size:12px}
#planModalBody .desktop-links a{min-height:44px;display:flex;align-items:center}
#planModalBody .mobile-nav{display:none}
#planModalBody dialog{border:0;background:var(--bg);color:var(--fg);border-radius:var(--radius);padding:28px;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;animation:workspace-arrive .2s ease}
#planModalBody dialog::backdrop{background:#17131e70;backdrop-filter:blur(5px)}
#planModalBody dialog>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
#planModalBody dialog h2{font-size:20px}
#planModalBody dialog .hint{line-height:1.9;margin-bottom:20px}
#planModalBody dialog .actions{justify-content:flex-end;margin-top:24px}
#planModalBody .menu-links{display:flex;flex-direction:column;gap:4px}
#planModalBody .menu-links a{display:flex;align-items:center;gap:14px;padding:10px;min-height:44px;border-radius:var(--radius)}
#planModalBody .menu-links a:hover{background:var(--hover)}
#planModalBody .menu-links svg{width:19px;height:19px;color:var(--art)}
#planModalBody #workspace-menu{position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;max-height:100dvh;width:260px;border-radius:0}
#planModalBody #workspace-toast{position:fixed;z-index:30;bottom:28px;left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);border-radius:var(--radius);padding:12px 20px;font-size:13px;max-width:90vw}
#planModalBody .readonly{opacity:.65}
#planModalBody .demo-tools{display:flex;gap:10px;font-size:11px;flex-wrap:wrap;margin-bottom:20px}
#planModalBody .demo-tools select{width:auto;font-size:11px;min-height:36px}
#planModalBody .demo-tools label{display:flex;align-items:center;gap:8px}
#planModalBody .preview-login{padding:16px;background:var(--quiet);border-radius:var(--radius);font-size:12px;margin-top:24px}
#planModalBody .browser-error{padding:30px 0}
#planModalBody .browser-error .actions{margin-top:14px}
@keyframes workspace-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#planModalBody [hidden]{display:none!important}
@media(max-width:900px){#planModalBody{padding:36px 24px 72px}
#planModalBody-layout{grid-template-columns:160px minmax(0,1fr);gap:28px}
#planModalBody .plan-grid{grid-template-columns:repeat(2,1fr)}
#planModalBody .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){#planModalBody{padding:28px 22px calc(100px + env(safe-area-inset-bottom))}
#planModalBody-heading{margin-bottom:20px}
#planModalBody h1{font-size:26px}
#planModalBody-layout{display:block}
#planModalBody .section-nav{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:28px}
#planModalBody .section-nav a{font-size:12px;padding:8px;justify-content:center;gap:6px}
#planModalBody .section-nav svg{width:15px}
#planModalBody .setting-row{gap:16px}
#planModalBody .setting-row select{width:135px;font-size:13px}
#planModalBody .setting-row label{font-size:13px}
#planModalBody .desktop-links{display:none}
#planModalBody .toolbar{gap:10px}
#planModalBody .toolbar .field{min-width:120px}
#planModalBody .credit-packs{flex-direction:column;gap:6px}
#planModalBody .mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;border-top:1px solid var(--rule);background:var(--bg);z-index:10;padding:9px 8px calc(9px + env(safe-area-inset-bottom))}
#planModalBody .mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;gap:4px;min-height:44px}
#planModalBody .mobile-nav svg{width:20px;height:20px}
#planModalBody .brand-menu>button{display:flex}
#planModalBody #workspace-toast{bottom:90px}
#planModalBody .stats{gap:18px}
#planModalBody .auth-content{margin-top:24px}
#planModalBody .plan-grid{gap:18px}
#planModalBody dialog{padding:24px}
#planModalBody-heading .primary{font-size:12px}
}
@media(prefers-reduced-motion:reduce){#planModalBody *{animation:none!important;transition:none!important}
}
#planModalBody .setting-row select{width:180px}
#planModalBody .setting-row>div:first-child{min-width:0;flex:1}
#planModalBody button:disabled{opacity:.45}
#planModalBody .setting-row label{white-space:normal}
@media(max-width:700px){#planModalBody .setting-row select{width:135px}
}
#planModalBody .planner-tabs{margin-bottom:32px}
#planModalBody .two-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#planModalBody .task-check{height:44px;width:44px;min-width:44px;border:1px solid var(--rule);border-radius:var(--radius);display:grid;place-items:center}
#planModalBody .task-check[aria-pressed=true]{background:var(--action);color:var(--on-action)}
#planModalBody .done-text{text-decoration:line-through;color:var(--muted)}
#planModalBody .month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
#planModalBody .month-cell{height:94px;min-width:0;text-align:start;padding:8px;border-radius:var(--radius);background:var(--quiet);display:flex;flex-direction:column;gap:2px}
#planModalBody .month-cell small{font-size:10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:100%}
#planModalBody .month-cell.selected{background:var(--action);color:var(--on-action)}
#planModalBody .picker-grid .month-cell{height:44px;text-align:center;display:grid;place-items:center}
#planModalBody .date-entry{width:100%;background:var(--quiet);margin-top:8px;justify-content:center}
#planModalBody .alerts{border:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:12px}
#planModalBody .alerts legend{margin-bottom:12px}
#planModalBody .alerts label{display:flex;gap:6px;align-items:center;min-height:44px}
#planModalBody .alerts input{width:16px;min-height:16px;accent-color:var(--action)}
@media(max-width:700px){#planModalBody .month-cell{height:72px;padding:5px}
#planModalBody .month-cell small{font-size:9px}
#planModalBody .two-fields{gap:12px}
#planModalBody .item-row .actions{gap:4px}
#planModalBody .item-row strong{font-size:13px}
#planModalBody .task-check{min-width:38px;width:38px}
}
#planModalBody .field.separated{border-top:0}
#planModalBody-heading+.workspace-layout{align-items:start}
#planModalBody .surface{background:color-mix(in srgb,var(--quiet) 55%,var(--bg));border-radius:var(--radius);padding:24px}
#planModalBody .about-save{display:flex;align-items:center;gap:16px;animation:save-reveal .4s cubic-bezier(.2,.7,.2,1)}
@keyframes save-reveal{from{opacity:0;filter:blur(7px);transform:translateY(-14px)}to{opacity:1;filter:blur(0);transform:none}}
#planModalBody .avatar{width:54px;height:54px;flex-shrink:0;border-radius:var(--radius);background:var(--quiet);color:var(--art);display:grid;place-items:center;font-size:24px;font-weight:700}
#planModalBody .avatar svg{width:24px;height:24px}
#planModalBody .conversation-top{margin-bottom:22px}
@keyframes draw-chart{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
#planModalBody .time-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:46px;border-radius:var(--radius);padding:12px 14px;background:var(--quiet);margin-top:8px;font:inherit}
#planModalBody .time-entry svg{width:18px;height:18px;color:var(--art)}
#planModalBody .time-entry:hover{background:var(--hover)}
#planModalBody #custom-time-dialog{width:min(360px,calc(100vw - 32px))}
#planModalBody #custom-time-value{font-size:23px;font-variant-numeric:tabular-nums;color:var(--art)}
#planModalBody .time-wheels{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:center;position:relative}
#planModalBody .time-wheels>div>span{font-size:12px;color:var(--muted)}
#planModalBody .time-wheel{height:216px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;margin-top:12px;mask-image:linear-gradient(transparent,black 25%,black 75%,transparent);padding:90px 0}
#planModalBody .time-wheel button{display:block;width:100%;height:36px;font-size:20px;background:transparent;border-radius:var(--radius)}
#planModalBody .time-wheel button[aria-selected=true]{background:var(--quiet);color:var(--art);font-weight:700}
#planModalBody .time-wheel button:hover{background:var(--hover)}
@media(max-width:1000px){
}
@media(max-width:700px){
#planModalBody .surface{padding:20px}
}
#planModalBody .calendar-toolbar{margin-top:6px}
#planModalBody .calendar-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:18px}
#planModalBody .calendar-week button{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:76px;background:transparent;border-radius:var(--radius);padding:10px 4px}
#planModalBody .calendar-week button:hover{background:var(--hover)}
#planModalBody .calendar-week button[aria-pressed=true]{background:var(--action);color:var(--on-action)}
#planModalBody .calendar-week small{font-size:11px}
#planModalBody .calendar-week strong{font-size:19px}
#planModalBody .calendar-week i{font-size:12px;height:9px;font-style:normal}
#planModalBody .calendar-all-day{margin-bottom:16px}
#planModalBody .calendar-all-day>small{color:var(--muted)}
#planModalBody .timeline-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}
#planModalBody .calendar-zoom{display:flex;gap:8px;align-items:center}
#planModalBody .calendar-zoom span{min-width:40px;text-align:center}
#planModalBody .timeline-scroll{height:clamp(360px,56dvh,650px);overflow:auto;overscroll-behavior:auto;scrollbar-width:thin;padding:14px 0;background:color-mix(in srgb,var(--quiet) 20%,var(--bg));border-radius:var(--radius);position:relative}
#planModalBody .timeline-grid{position:relative;margin:12px 12px 0 0;user-select:none}
#planModalBody .timeline-hour{position:absolute;left:0;right:62px;border-top:1px solid var(--rule);height:var(--hour-height);pointer-events:none}
#planModalBody .timeline-hour:after{content:'';position:absolute;top:50%;left:0;right:0;border-top:1px dashed color-mix(in srgb,var(--rule) 65%,transparent)}
#planModalBody .timeline-hour>span{position:absolute;right:-58px;top:-9px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
#planModalBody .timeline-events{position:absolute;inset:0 0 0 8px;margin-right:68px;pointer-events:none}
#planModalBody .timeline-event{position:absolute;display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border-radius:var(--radius);background:color-mix(in srgb,var(--art) 15%,var(--bg));color:var(--fg);pointer-events:auto;overflow:hidden;cursor:pointer;border-inline-start:3px solid var(--art);min-height:26px}
#planModalBody .timeline-event strong{font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#planModalBody .timeline-event small{font-size:10px;color:var(--muted);display:block}
#planModalBody .timeline-event>div{min-width:0;flex:1}
#planModalBody .timeline-event.selected{background:color-mix(in srgb,var(--art) 25%,var(--bg))}
#planModalBody .timeline-event.dragging{box-shadow:0 8px 25px #0002;z-index:8;cursor:grabbing;touch-action:none}
#planModalBody .timeline-event.completed{opacity:.55}
#planModalBody .timeline-event.completed strong{text-decoration:line-through}
#planModalBody .calendar-check{width:20px;height:20px;min-width:20px;border:1px solid var(--art);border-radius:5px;background:transparent;display:grid;place-items:center}
#planModalBody .calendar-check svg{width:14px;height:14px}
#planModalBody .timeline-resize{position:absolute;bottom:0;left:0;right:0;height:10px;width:100%;background:transparent;cursor:ns-resize;touch-action:none}
#planModalBody .timeline-resize:after{content:'';position:absolute;bottom:3px;left:calc(50% - 10px);width:20px;border-top:2px solid var(--art);opacity:0}
#planModalBody .timeline-event:hover .timeline-resize:after,#planModalBody .timeline-event.selected .timeline-resize:after{opacity:.5}
#planModalBody .timeline-now{position:absolute;right:62px;left:0;border-top:1px solid var(--danger);pointer-events:none;z-index:5}
#planModalBody .timeline-now span{position:absolute;right:-58px;top:-11px;color:var(--danger);font-size:11px;background:var(--bg);padding:2px}
#planModalBody .timeline-now i{position:absolute;right:-4px;top:-4px;width:7px;height:7px;background:var(--danger);border-radius:50%}
#planModalBody .timeline-selection{position:absolute;right:68px;left:8px;background:color-mix(in srgb,var(--art) 18%,transparent);border:1px solid var(--art);border-radius:var(--radius);padding:8px 12px;color:var(--art);z-index:7;font-size:12px;pointer-events:none}
#planModalBody .calendar-month{gap:8px}
#planModalBody .month-week-label{font-size:12px;color:var(--muted);padding:10px 0}
#planModalBody .calendar-month .month-cell{height:154px;padding:12px;background:color-mix(in srgb,var(--quiet) 50%,var(--bg));gap:5px}
#planModalBody .calendar-month .month-cell.outside{opacity:.45}
#planModalBody .calendar-month .month-cell.is-today>strong{color:var(--art)}
#planModalBody .calendar-month .month-cell:hover{background:var(--hover)}
#planModalBody .calendar-month .month-event{background:var(--quiet);padding:3px 5px;border-radius:4px;max-width:100%;font-size:10px}
#planModalBody .calendar-month .month-more{color:var(--art)}
#planModalBody .calendar-month .month-cell strong{margin-bottom:3px;font-size:17px}
#planModalBody .timeline-event:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
@media(max-width:700px){#planModalBody .calendar-toolbar h2{font-size:18px}
#planModalBody .calendar-toolbar .actions{gap:2px}
#planModalBody .calendar-week{gap:3px}
#planModalBody .calendar-week button{min-height:70px}
#planModalBody .timeline-top>span{font-size:10px;max-width:150px}
#planModalBody .timeline-scroll{height:52dvh;min-height:340px}
#planModalBody .calendar-month{gap:3px}
#planModalBody .calendar-month .month-cell{padding:5px;height:110px;gap:3px}
#planModalBody .month-week-label{font-size:9px}
#planModalBody .calendar-month .month-event{font-size:8px;padding:2px}
#planModalBody .calendar-month .month-cell strong{font-size:15px}
#planModalBody .timeline-event{padding:6px;gap:5px}
#planModalBody .timeline-event strong{font-size:11px}
#planModalBody .timeline-hour{right:47px}
#planModalBody .timeline-hour>span{right:-43px;font-size:10px}
#planModalBody .timeline-events{margin-right:53px}
#planModalBody .timeline-now{right:47px}
#planModalBody .timeline-now span{right:-43px}
#planModalBody .timeline-selection{right:53px}
}
#planModalBody:has(.timeline-scroll) .workspace{padding-top:24px}
#planModalBody:has(.timeline-scroll) .workspace-heading{margin-bottom:16px}
#planModalBody:has(.timeline-scroll) .planner-tabs{margin-bottom:18px}
#planModalBody:has(.timeline-scroll) .calendar-week{margin-bottom:8px}
#planModalBody:has(.timeline-scroll) .calendar-week button{min-height:64px;padding:6px 4px}
@media(max-width:700px){#planModalBody:has(.timeline-scroll) .workspace{padding-top:20px}
#planModalBody:has(.timeline-scroll) .workspace-heading:first-child p{display:none}
#planModalBody:has(.timeline-scroll) .planner-tabs{margin-bottom:16px}
#planModalBody:has(.timeline-scroll) .calendar-week button{min-height:60px}
#planModalBody:has(.timeline-scroll) .calendar-toolbar{margin-bottom:8px}
}
#planModalBody .calendar-check{min-height:20px}
#planModalBody .timeline-resize{min-height:10px}
#planModalBody .time-wheel button{height:44px;min-height:44px}
#planModalBody .calendar-transition-overlay{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
#planModalBody .calendar-ghost{position:fixed;border-radius:var(--radius);background:color-mix(in srgb,var(--art) 15%,var(--bg));color:var(--fg);padding:5px 10px;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 4px 18px #0001;will-change:left,top,width,height}
@media(max-width:700px){#planModalBody .demo-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#planModalBody .demo-tools label{display:grid;grid-template-columns:1fr;gap:4px}
#planModalBody .demo-tools select{width:100%}
}
#planModalBody .calendar-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
#planModalBody .calendar-controls .planner-tabs{margin:0}
#planModalBody .calendar-date-nav{display:flex;align-items:center;gap:8px}
#planModalBody .calendar-date-nav h2{margin:0;text-align:center;font-size:21px}
#planModalBody .calendar-toolbar{margin:0 0 12px}
#planModalBody .calendar-today{background:var(--quiet);color:var(--art);font-weight:700;min-width:80px;padding:10px 18px}
#planModalBody .calendar-month .month-cell{height:clamp(100px,calc((100dvh - 245px)/var(--calendar-weeks)),170px)}
#planModalBody .picker-date-nav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px}
#planModalBody .picker-date-nav h2{text-align:center;margin:0;font-size:20px}
#planModalBody .picker-date-context{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0}
#planModalBody .picker-selected-context,#planModalBody .picker-today{display:flex;flex-direction:column;gap:4px}
#planModalBody .picker-selected-context small,#planModalBody .picker-today small{color:var(--muted);font-size:11px}
#planModalBody .picker-selected-context strong{color:var(--art);font-size:14px}
#planModalBody .picker-today{background:var(--quiet);padding:8px 12px;font-size:12px}
#planModalBody .picker-grid .month-cell{position:relative}
#planModalBody .picker-grid .month-cell[aria-current=date]:after{content:'';position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--art)}
#planModalBody .picker-grid .month-cell[aria-pressed=true]{background:var(--action);color:var(--on-action);font-weight:700}
#planModalBody .picker-grid .month-cell[aria-pressed=true]:after{background:var(--on-action)}
#planModalBody .picker-actions{justify-content:flex-start;margin-top:18px}
#planModalBody .picker-clear{color:var(--danger);background:transparent}
#planModalBody #workspace-dialog:has(#reminder-form)>header,#planModalBody #workspace-dialog:has(.picker-grid)>header{display:none}
#planModalBody dialog{scrollbar-width:none}
#planModalBody dialog::-webkit-scrollbar{display:none}
#planModalBody #custom-time-dialog>.actions{justify-content:flex-start;flex-wrap:nowrap;gap:12px}
#planModalBody #custom-time-dialog>.actions>.primary{flex:1;width:auto;justify-content:center}
#planModalBody #custom-time-dialog>.actions>.plain{flex:0 0 80px;justify-content:center}
#planModalBody .calendar-spatial-transition,#planModalBody .calendar-view-loading{pointer-events:none}
#planModalBody .calendar-check{border:0;background:var(--quiet)}
#planModalBody .timeline-event:focus-visible{outline:none;background:color-mix(in srgb,var(--art) 30%,var(--bg))}
@media(max-width:700px){#planModalBody .calendar-controls{gap:8px}
#planModalBody .calendar-controls .planner-tabs{flex:1;display:flex}
#planModalBody .calendar-controls .planner-tabs button{padding:8px;font-size:12px;flex:1}
#planModalBody .calendar-controls>.primary{font-size:0;width:44px;height:44px;padding:10px}
#planModalBody .calendar-controls>.primary svg{width:20px;height:20px}
#planModalBody .calendar-date-nav{gap:3px}
#planModalBody .calendar-date-nav h2{font-size:17px}
#planModalBody .calendar-today{min-width:68px;padding:10px 12px}
#planModalBody .calendar-month .month-cell{height:clamp(85px,calc((100dvh - 300px)/var(--calendar-weeks)),125px)}
#planModalBody .picker-date-nav h2{font-size:18px}
#planModalBody .picker-date-context{gap:8px}
#planModalBody .picker-today{padding:8px;font-size:11px}
}
#planModalBody #dialog-body>.picker-actions{justify-content:flex-start}
#planModalBody #custom-time-dialog>.actions>[data-action=time-cancel]{flex:0 0 80px;justify-content:center}
#planModalBody:has(.calendar-controls) .workspace{padding-top:24px}
@media(max-width:700px){#planModalBody:has(.calendar-controls) .workspace{padding-top:20px}
}
#planModalBody:has(.calendar-controls) .workspace{max-width:1320px;padding:16px 32px 32px}
#planModalBody .calendar-controls{display:grid;grid-template-columns:minmax(110px,1fr) auto minmax(110px,1fr);gap:12px;align-items:center;margin-bottom:12px}
#planModalBody .calendar-controls .planner-tabs{grid-column:2;grid-row:1;display:flex;justify-content:center}
#planModalBody .calendar-controls>.primary{grid-column:3;grid-row:1;justify-self:end;height:44px;min-height:44px;padding:0 16px;display:flex;align-items:center;gap:6px}
#planModalBody .calendar-controls .planner-tabs button{height:44px;min-height:44px;padding:0 18px;display:flex;align-items:center;justify-content:center}
#planModalBody .calendar-toolbar{margin-bottom:8px}
#planModalBody .calendar-week{margin-bottom:10px}
#planModalBody .calendar-month-link{font:inherit;font-weight:inherit;color:inherit;background:transparent;padding:0 6px;min-height:44px}
#planModalBody .calendar-month-link:hover{color:var(--art);background:var(--hover)}
#planModalBody .calendar-month .month-cell{padding:8px;gap:3px}
#planModalBody .calendar-month .month-cell strong{font-size:12px;margin-bottom:2px}
#planModalBody .calendar-month .month-event{font-size:11px;line-height:1.5;min-height:21px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#planModalBody .month-card-time{font-variant-numeric:tabular-nums}
#planModalBody .timeline-selection{display:flex;direction:rtl;justify-content:space-between;gap:12px;padding:2px 12px;align-items:flex-start;font-variant-numeric:tabular-nums}
#planModalBody .selection-start{order:0}
#planModalBody .selection-duration{order:1;text-align:left}
#planModalBody .reminder-row{display:flex;flex-direction:row;align-items:center}
#planModalBody .reminder-row .reminder-main{flex-wrap:nowrap;min-width:0;gap:10px}
#planModalBody .reminder-main>span{min-width:0}
#planModalBody .reminder-row .task-check{width:32px;min-width:32px;height:32px;min-height:32px;border:0;background:var(--quiet);padding:0;border-radius:9px}
#planModalBody .reminder-row .task-check[aria-pressed=true]{background:var(--action)}
#planModalBody .reminder-row-actions{gap:0;flex-wrap:nowrap}
#planModalBody .reminder-row-actions .icon-button{width:44px;height:44px;padding:10px}
#planModalBody .reminder-row-actions svg{width:20px;height:20px}
@media(max-width:700px){#planModalBody:has(.calendar-controls) .workspace{padding:12px 16px 28px}
#planModalBody .calendar-controls{grid-template-columns:44px minmax(0,1fr) 44px;gap:6px}
#planModalBody .calendar-controls .planner-tabs{width:100%;gap:3px}
#planModalBody .calendar-controls .planner-tabs button{padding:0 9px;font-size:12px}
#planModalBody .calendar-controls>.primary{width:44px;padding:10px;font-size:14px}
#planModalBody .calendar-controls>.primary>span{display:none}
#planModalBody .calendar-month .month-cell{padding:4px}
#planModalBody .calendar-month .month-cell strong{font-size:11px}
#planModalBody .calendar-month .month-event{font-size:9px;min-height:18px}
#planModalBody .reminder-row{padding:12px;gap:6px;flex-wrap:wrap}
#planModalBody .reminder-row .reminder-main{flex:1}
#planModalBody .reminder-row-actions{margin-inline-start:auto}
}
#planModalBody .calendar-month .month-cell{height:clamp(154px,calc((100dvh - 220px)/var(--calendar-weeks)),190px);padding:6px;gap:2px}
#planModalBody .calendar-month .month-event{min-height:19px;line-height:1.4;padding:1px 5px}
@media(max-width:700px){#planModalBody .calendar-month .month-cell{height:clamp(110px,calc((100dvh - 270px)/var(--calendar-weeks)),140px);padding:4px}
#planModalBody .calendar-month .month-event{min-height:18px;padding:1px 3px}
}
#planModalBody .timeline-event.dragging{overflow:visible;isolation:isolate}
#planModalBody .timeline-event.dragging>div,#planModalBody .timeline-event.dragging>.calendar-check{position:relative;z-index:1}
#planModalBody .timeline-event::before{content:'';position:absolute;top:0;bottom:0;width:45%;pointer-events:none;border-radius:inherit;opacity:0;filter:blur(12px);transition:opacity 180ms ease,filter 220ms ease;z-index:0}
#planModalBody .timeline-event::after{content:attr(data-day-shift-label);position:absolute;top:calc(100% + 7px);max-width:100%;padding:5px 10px;background:var(--action);color:var(--on-action);border-radius:var(--radius);white-space:nowrap;font-size:12px;line-height:1.5;font-weight:600;pointer-events:none;opacity:0;filter:blur(5px);transform:translateY(-4px);transition:opacity 180ms ease,filter 220ms ease,transform 220ms ease;z-index:3}
#planModalBody .timeline-event.dragging[data-day-shift]::before{opacity:.85;filter:blur(6px)}
#planModalBody .timeline-event.dragging[data-day-shift]::after{opacity:1;filter:blur(0);transform:translateY(0)}
#planModalBody .timeline-event[data-day-shift-side=previous]::before{right:0;left:auto;background:linear-gradient(to left,var(--art),transparent)}
#planModalBody .timeline-event[data-day-shift-side=previous]::after{right:0;left:auto}
#planModalBody .timeline-event[data-day-shift-side=next]::before{left:0;right:auto;background:linear-gradient(to right,var(--art),transparent)}
#planModalBody .timeline-event[data-day-shift-side=next]::after{left:0;right:auto}
@media(prefers-reduced-motion:reduce){#planModalBody .timeline-event::before,#planModalBody .timeline-event::after{transition:none;filter:none}
#planModalBody .timeline-event.dragging[data-day-shift]::before{filter:none}
}
#planModalBody .calendar-controls>.calendar-today{grid-column:3;grid-row:1;justify-self:end;width:80px;height:44px;min-height:44px;padding:0 12px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;margin:0}
#planModalBody .planner-fab{position:fixed;left:28px;right:auto;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:40;width:48px;height:48px;min-height:48px;padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 4px 16px #0003;transition:transform .2s ease,background .2s ease}
#planModalBody .planner-fab svg{width:24px;height:24px}
#planModalBody .planner-fab:hover{transform:scale(1.08)}
#planModalBody .planner-fab:active{transform:scale(.95)}
#planModalBody:has(.calendar-controls) .workspace{padding-bottom:96px}
@media(max-width:700px){#planModalBody .calendar-controls{grid-template-columns:64px minmax(0,1fr) 64px}
#planModalBody .calendar-controls>.calendar-today{width:64px;min-width:64px;padding:0 8px;font-size:12px}
#planModalBody .calendar-controls .planner-tabs button{padding:0 7px}
#planModalBody .planner-fab{left:20px;bottom:calc(80px + env(safe-area-inset-bottom,0px));width:44px;height:44px;min-height:44px;border-radius:10px;padding:10px}
#planModalBody:has(.calendar-controls) .workspace{padding-bottom:144px}
}
@media(prefers-reduced-motion:reduce){#planModalBody .planner-fab{transition:none}
#planModalBody .planner-fab:hover,#planModalBody .planner-fab:active{transform:none}
}
#planModalBody:has(.calendar-controls) .calendar-controls .planner-tabs{margin:0}
#planModalBody .calendar-controls>#calendar-toolbar-mount{grid-column:1;grid-row:1;min-width:0}
#planModalBody .calendar-controls .calendar-toolbar{margin:0;min-height:44px}
#planModalBody .calendar-controls .calendar-date-nav{gap:3px}
#planModalBody .calendar-controls .calendar-date-nav h2{font-size:17px}
#planModalBody .calendar-controls .calendar-month-link{padding:0 3px}
#planModalBody .timeline-event{border:0;border-inline-start:0}
#planModalBody .timeline-scroll{scrollbar-width:none}
#planModalBody .timeline-scroll::-webkit-scrollbar{display:none;width:0;height:0}
#planModalBody .calendar-check{width:24px;min-width:24px;height:24px;min-height:24px;border:1.5px solid var(--art);border-radius:6px;background:var(--bg);color:var(--art);padding:3px}
#planModalBody .calendar-check svg{width:16px;height:16px}
#planModalBody .timeline-event.completed .calendar-check{background:var(--action);color:var(--on-action);border-color:var(--action)}
@media(max-width:900px){#planModalBody .calendar-controls>#calendar-toolbar-mount{grid-column:1/-1;grid-row:2}
#planModalBody .calendar-controls .calendar-toolbar{justify-content:flex-start}
#planModalBody .calendar-controls{row-gap:6px}
#planModalBody .calendar-controls .calendar-date-nav h2{font-size:17px}
}
#planModalBody #workspace-dialog:has(.plan-detail){width:min(660px,calc(100% - 32px));max-height:88dvh}
#planModalBody .plan-summary{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}
#planModalBody .plan-summary>div:first-child{min-width:0;flex:1}
#planModalBody .plan-goal{font-size:17px;line-height:1.8;margin:0 0 10px}
#planModalBody .plan-status{display:inline-block;font-size:12px;padding:5px 10px;border-radius:99px;color:var(--art);background:var(--quiet)}
#planModalBody .plan-progress-ring{width:100px;height:100px;flex:0 0 100px;border-radius:50%;background:conic-gradient(var(--art) var(--progress),var(--quiet) 0);position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px}
#planModalBody .plan-progress-ring:before{content:'';position:absolute;inset:7px;border-radius:50%;background:var(--bg)}
#planModalBody .plan-progress-ring>*{position:relative}
#planModalBody .plan-progress-ring strong{font-size:27px;color:var(--art);line-height:1.2}
#planModalBody .plan-progress-ring small{font-size:11px;color:var(--muted)}
#planModalBody .plan-dates{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
#planModalBody .plan-dates>div{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--quiet);border-radius:var(--radius)}
#planModalBody .plan-dates svg{width:18px;height:18px;color:var(--muted)}
#planModalBody .plan-dates small{display:block;color:var(--muted);font-size:11px;margin-bottom:3px}
#planModalBody .plan-dates strong{font-size:13px;font-weight:500}
#planModalBody .plan-information{display:grid;gap:14px;margin-bottom:22px}
#planModalBody .plan-information>div{padding:14px 16px;background:color-mix(in srgb,var(--quiet) 45%,var(--bg));border-radius:var(--radius)}
#planModalBody .plan-information h3{font-size:13px;margin:0 0 6px}
#planModalBody .plan-information p{white-space:pre-wrap;color:var(--muted);font-size:13px;line-height:1.8;margin:0}
#planModalBody .plan-steps-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
#planModalBody .plan-steps-heading h3{margin:0;font-size:15px}
#planModalBody .plan-steps-heading button{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--art)}
#planModalBody .plan-steps-heading svg{width:16px;height:16px}
#planModalBody .plan-step-list{display:grid;gap:8px}
#planModalBody .plan-step{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--quiet);border-radius:var(--radius)}
#planModalBody .plan-step-main{display:flex;align-items:center;gap:10px;min-width:0}
#planModalBody .plan-step-main strong{font-size:13px;font-weight:500}
#planModalBody .plan-step .task-check{width:28px;min-width:28px;height:28px;min-height:28px;padding:4px;border-radius:7px;border:1px solid var(--art);background:var(--bg)}
#planModalBody .plan-step .task-check[aria-pressed=true]{background:var(--action);color:var(--on-action)}
#planModalBody .plan-step .task-check svg{width:17px;height:17px}
#planModalBody .plan-step.is-complete .plan-step-main strong{text-decoration:line-through;color:var(--muted)}
#planModalBody .plan-step>.actions{gap:0;flex-wrap:nowrap}
#planModalBody .plan-step .icon-button{width:36px;height:36px;min-height:36px;padding:9px}
#planModalBody .plan-step .icon-button svg{width:17px;height:17px}
#planModalBody .plan-detail-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px}
#planModalBody .plan-detail-actions .actions{gap:8px}
#planModalBody .plan-detail-actions button{font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px}
@media(max-width:700px){#planModalBody #workspace-dialog:has(.plan-detail){padding:20px}
#planModalBody .plan-summary{gap:14px}
#planModalBody .plan-goal{font-size:15px}
#planModalBody .plan-progress-ring{width:84px;height:84px;flex-basis:84px}
#planModalBody .plan-progress-ring strong{font-size:23px}
#planModalBody .plan-dates{gap:8px}
#planModalBody .plan-dates>div{padding:8px;gap:6px}
#planModalBody .plan-step{padding:10px;flex-wrap:wrap}
#planModalBody .plan-step>.actions{margin-inline-start:auto}
#planModalBody .plan-step .icon-button{width:44px;height:44px;min-height:44px;padding:12px}
#planModalBody .plan-detail-actions .actions{flex-wrap:wrap}
#planModalBody .plan-detail-actions button{font-size:12px}
}
#planModalBody:has(.calendar-controls) .calendar-controls .calendar-toolbar{margin:0}
#planModalBody #workspace-dialog:has(.plan-detail){padding:20px;max-height:92dvh}
#planModalBody #workspace-dialog:has(.plan-detail)>header{margin-bottom:14px;padding:0;min-height:36px}
#planModalBody #workspace-dialog:has(.plan-detail)>header h2{margin:0;font-size:18px}
#planModalBody #workspace-dialog:has(.plan-detail)>header .icon-button{width:36px;height:36px;min-height:36px;padding:8px}
#planModalBody #dialog-body .plan-detail .actions{margin:0}
#planModalBody .plan-summary{margin-bottom:14px}
#planModalBody .plan-progress-ring{width:80px;height:80px;flex-basis:80px}
#planModalBody .plan-progress-ring strong{font-size:24px}
#planModalBody .plan-goal{font-size:16px;line-height:1.6}
#planModalBody .plan-dates{margin-bottom:12px}
#planModalBody .plan-dates>div{padding:7px 10px}
#planModalBody .plan-information{margin-bottom:14px}
#planModalBody .plan-information>div{padding:10px 14px}
#planModalBody .plan-steps-heading{margin-bottom:8px}
#planModalBody .plan-steps-heading button{min-height:36px}
#planModalBody .plan-step{padding:8px 10px}
#planModalBody .plan-detail-actions{margin-top:16px}
#planModalBody .calendar-month .month-date-heading{display:flex;align-items:center;gap:6px;min-height:26px;flex-shrink:0;width:100%}
#planModalBody .calendar-month .month-date-heading>strong{margin:0;display:flex;align-items:center;justify-content:center;min-width:26px;height:26px}
#planModalBody .calendar-month .month-cell.is-today{background:color-mix(in srgb,var(--art) 12%,var(--bg))}
#planModalBody .calendar-month .month-cell.is-today .month-date-heading>strong{background:var(--action);color:var(--on-action);border-radius:50%;font-weight:700;font-size:13px}
#planModalBody .month-today-label{font-size:11px;font-weight:600;color:var(--art)}
#planModalBody .calendar-month .month-cell.is-today.outside{opacity:1}
#planModalBody .calendar-month .month-cell{min-height:164px}
@media(max-width:700px){#planModalBody .calendar-month .month-cell{min-height:110px}
#planModalBody .calendar-month .month-date-heading{gap:3px;min-height:22px}
#planModalBody .calendar-month .month-date-heading>strong{min-width:22px;height:22px}
#planModalBody .calendar-month .month-cell.is-today .month-date-heading>strong{font-size:11px}
#planModalBody .month-today-label{font-size:9px}
}
#planModalBody .task-list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0 16px}
#planModalBody .task-search{display:flex;align-items:center;gap:10px;width:min(440px,100%);background:var(--quiet);padding:0 14px;border-radius:var(--radius);min-height:48px}
#planModalBody .task-search>svg{width:20px;height:20px;color:var(--muted);flex-shrink:0}
#planModalBody .task-search input{background:transparent;border:0;min-width:0;width:100%;padding:10px 0;outline:0}
#planModalBody .task-done-filter{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px;min-height:48px}
#planModalBody .task-done-filter svg{width:18px;height:18px}
#planModalBody .task-done-filter span{font-size:12px;color:var(--muted)}
#planModalBody .task-group-nav{display:flex;gap:8px;margin-bottom:20px}
#planModalBody .task-group-nav button{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--quiet);min-height:44px;font-size:12px;padding:8px 14px}
#planModalBody .task-group-nav svg{width:16px;height:16px;color:var(--art)}
#planModalBody .task-group-nav .task-tab-count{background:var(--bg);border-radius:99px;padding:1px 7px;color:var(--muted)}
#planModalBody .task-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
#planModalBody .task-section{min-width:0;padding:18px;border-radius:var(--radius);background:color-mix(in srgb,var(--quiet) 45%,var(--bg))}
#planModalBody .task-section[data-bucket=today]{background:color-mix(in srgb,var(--art) 8%,var(--bg))}
#planModalBody .task-section-heading{display:flex;align-items:center;gap:10px;margin-bottom:18px}
#planModalBody .task-section-heading>div:nth-child(2){min-width:0;flex:1}
#planModalBody .task-section-heading h2{font-size:16px;line-height:1.7;margin:0;scroll-margin-top:24px}
#planModalBody .task-section-heading p{font-size:11px;line-height:1.7;color:var(--muted);margin:2px 0 0}
#planModalBody .task-section-icon{width:36px;height:36px;display:grid;place-items:center;background:var(--bg);border-radius:10px;color:var(--art);flex-shrink:0}
#planModalBody .task-section-icon svg{width:20px;height:20px}
#planModalBody .task-section-count{font-size:13px;font-weight:700;color:var(--art);background:var(--bg);border-radius:99px;min-width:28px;height:28px;display:grid;place-items:center}
#planModalBody .task-section-cards{display:grid;gap:12px}
#planModalBody .task-card{padding:12px;border-radius:var(--radius);background:var(--bg);min-width:0}
#planModalBody .task-card-main{display:flex;align-items:flex-start;gap:6px}
#planModalBody .task-card-copy{min-width:0;flex:1;padding-top:7px}
#planModalBody .task-card-title{font-size:14px;font-weight:600;line-height:1.7;text-align:start;padding:0;background:transparent;min-height:0;overflow-wrap:anywhere}
#planModalBody .task-card-copy p{font-size:12px;line-height:1.8;color:var(--muted);margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#planModalBody .task-card-check{width:44px;height:44px;min-width:44px;min-height:44px;background:transparent;padding:0;position:relative;display:grid;place-items:center}
#planModalBody .task-card-check:before{content:'';position:absolute;inset:10px;border:1.5px solid var(--art);border-radius:6px;background:var(--bg)}
#planModalBody .task-card-check[aria-pressed=true]:before{background:var(--action)}
#planModalBody .task-card-check svg{position:relative;width:16px;height:16px;color:var(--on-action)}
#planModalBody .task-card-check:focus-visible:before,#planModalBody .task-card-check:hover:before{box-shadow:0 0 0 4px var(--quiet)}
#planModalBody .task-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:11px;color:var(--muted);margin:12px 0 4px}
#planModalBody .task-card-meta span{display:flex;align-items:center;gap:5px}
#planModalBody .task-card-meta svg{width:14px;height:14px}
#planModalBody .task-card-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;flex-wrap:wrap;min-height:44px}
#planModalBody .task-card-tags{display:flex;gap:5px;flex-wrap:wrap;min-width:0}
#planModalBody .task-card-tags span{font-size:10px;padding:3px 7px;border-radius:6px;line-height:1.7;max-width:100%;overflow-wrap:anywhere}
#planModalBody .task-priority{background:var(--quiet);color:var(--art)}
#planModalBody .task-reason.late{background:color-mix(in srgb,var(--danger) 8%,var(--bg));color:var(--danger)}
#planModalBody .task-reason.undated,#planModalBody .task-plan{background:var(--quiet);color:var(--muted)}
#planModalBody .task-card-actions{display:flex;gap:0;margin-inline-start:auto}
#planModalBody .task-card-actions .icon-button{width:44px;height:44px;min-height:44px;padding:12px}
#planModalBody .task-card-actions svg{width:18px;height:18px}
#planModalBody .task-is-done .task-card-title{text-decoration:line-through;color:var(--muted)}
#planModalBody .task-section-empty{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:32px 12px;color:var(--muted);font-size:13px;line-height:1.9}
#planModalBody .task-section-empty svg{width:26px;height:26px;color:var(--art)}
#planModalBody .task-board-done{grid-template-columns:1fr}
#planModalBody .task-board-done .task-section-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
#planModalBody .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:800px) and (max-width:1099px){#planModalBody .task-board{grid-template-columns:repeat(2,minmax(0,1fr))}
#planModalBody .task-section[data-bucket=today]{grid-column:1/-1}
#planModalBody .task-section[data-bucket=today] .task-section-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
#planModalBody .task-board-done .task-section-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:799px){#planModalBody .task-list-toolbar{gap:8px;margin-top:18px}
#planModalBody .task-search{padding:0 10px}
#planModalBody .task-done-filter{padding:8px 10px;font-size:12px}
#planModalBody .task-done-filter>svg{display:none}
#planModalBody .task-board,#planModalBody .task-board-done .task-section-cards{grid-template-columns:1fr}
#planModalBody .task-board{gap:20px}
#planModalBody .task-section{padding:14px}
#planModalBody .task-group-nav{gap:5px}
#planModalBody .task-group-nav button{flex:1;padding:8px 6px;font-size:11px;gap:5px}
#planModalBody .task-group-nav svg{display:none}
#planModalBody .task-group-nav .task-tab-count{padding:1px 5px}
#planModalBody .task-section-heading h2{font-size:17px}
#planModalBody .task-card-title{font-size:15px}
#planModalBody .task-card-tags span{font-size:11px}
#planModalBody .task-card-meta{font-size:12px}
#planModalBody .task-search input{font-size:13px}
}
#planModalBody .calendar-all-day{margin:24px 0 0;padding:18px;background:color-mix(in srgb,var(--quiet) 45%,var(--bg));border-radius:var(--radius)}
#planModalBody .calendar-all-day>small{font-size:14px;font-weight:600;color:var(--fg)}
#planModalBody #workspace-dialog:has(#project-plan-form){width:min(580px,calc(100% - 32px))}
#planModalBody .plan-wizard-progress{display:flex;gap:12px;margin:0 0 28px}
#planModalBody .plan-wizard-progress>span{display:flex;align-items:center;gap:7px;flex:1;font-size:12px;color:var(--muted)}
#planModalBody .plan-wizard-progress i{font-style:normal;border-radius:50%;background:var(--quiet);width:28px;height:28px;display:grid;place-items:center;flex-shrink:0}
#planModalBody .plan-wizard-progress [aria-current=step]{color:var(--art);font-weight:700}
#planModalBody .plan-wizard-progress [aria-current=step] i{background:var(--action);color:var(--on-action)}
#planModalBody .plan-wizard-title{font-size:20px;line-height:1.7;margin:0 0 8px}
#planModalBody .plan-wizard-title:focus{background:transparent}
#planModalBody .plan-extra{margin-top:18px}
#planModalBody .plan-extra summary{cursor:pointer;font-size:14px;min-height:44px;padding:10px 0;color:var(--art)}
#planModalBody .plan-extra[open] summary{margin-bottom:12px}
#planModalBody .plan-wizard-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;padding-top:18px;border-top:1px solid var(--rule)}
#planModalBody .plan-wizard-footer>div{display:flex;gap:8px}
#planModalBody .plan-wizard-footer button{min-height:44px;padding:10px 18px;font-size:14px}
#planModalBody .plan-draft-step{display:flex;align-items:center;gap:8px;margin-bottom:10px;background:var(--quiet);border-radius:var(--radius);padding:4px 8px}
#planModalBody .plan-draft-number{color:var(--art);font-size:14px;min-width:24px;text-align:center}
#planModalBody .plan-draft-step input{background:transparent;width:100%;min-width:0;font-size:14px;border:0;padding:10px 4px}
#planModalBody .plan-draft-step .icon-button{width:44px;height:44px;min-width:44px;padding:12px}
#planModalBody .plan-draft-step svg{width:18px;height:18px}
#planModalBody .plan-draft-add{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--art);font-size:14px;padding:8px 12px}
#planModalBody .plan-draft-add svg{width:18px;height:18px}
#planModalBody .plan-step-help{font-size:12px;line-height:1.9;color:var(--muted);margin-top:14px}
@media(max-width:600px){#planModalBody .plan-wizard-progress{gap:6px;margin-bottom:22px}
#planModalBody .plan-wizard-progress>span{font-size:11px;gap:5px}
#planModalBody .plan-wizard-progress i{width:24px;height:24px}
#planModalBody .plan-wizard-title{font-size:19px}
#planModalBody .plan-wizard-footer button{padding:10px 13px}
#planModalBody .calendar-all-day{padding:14px}
}
#planModalBody .task-list-tabs{margin:22px 0 20px;justify-content:flex-start}
#planModalBody .task-list-tabs button{font-size:13px;min-height:48px;padding:10px 16px}
#planModalBody .task-list-tabs button[aria-selected=true]{background:var(--action);color:var(--on-action)}
#planModalBody .task-list-tabs button[aria-selected=true] svg{color:inherit}
#planModalBody .task-list-tabs button[aria-selected=true] .task-tab-count{background:color-mix(in srgb,var(--on-action) 16%,transparent);color:inherit}
#planModalBody .task-tabbed-board{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px}
#planModalBody .task-tabbed-board #task-main-panel{min-width:0}
#planModalBody .task-tabbed-board #task-main-panel .task-section{grid-column:auto}
#planModalBody .task-tabbed-board #task-main-panel .task-section-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
#planModalBody .task-tabbed-board>.task-section .task-section-cards{grid-template-columns:1fr}
#planModalBody .task-floating-search{position:fixed;left:88px;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:39;display:flex;direction:ltr;align-items:center;width:48px;height:48px;border-radius:12px;background:var(--quiet);box-shadow:0 4px 16px #0002;overflow:hidden;transition:width .38s cubic-bezier(.22,.8,.25,1),background .2s,box-shadow .2s}
#planModalBody .task-floating-search.is-open{width:min(380px,calc(100vw - 104px));background:var(--bg);box-shadow:0 6px 26px #0003}
#planModalBody .task-search-toggle{width:48px;height:48px;min-width:48px;min-height:48px;padding:14px;color:var(--art);background:transparent}
#planModalBody .task-search-toggle svg{width:20px;height:20px;transition:transform .38s}
#planModalBody .task-floating-search.is-open .task-search-toggle svg{transform:rotate(-12deg)}
#planModalBody .task-search-reveal{display:flex;align-items:center;direction:rtl;flex:1;min-width:0;opacity:0;transform:translateX(-10px);transition:opacity .2s,transform .3s;pointer-events:none}
#planModalBody .is-open .task-search-reveal{opacity:1;transform:none;pointer-events:auto;transition-delay:.1s}
#planModalBody .task-search-reveal input{width:100%;min-width:0;border:0;background:transparent;padding:8px 4px;font-size:14px;min-height:44px}
#planModalBody .task-search-reveal .icon-button{width:44px;height:44px;min-width:44px;min-height:44px;padding:13px;background:transparent}
#planModalBody .task-search-reveal .icon-button svg{width:18px;height:18px}
@media(max-width:1099px){#planModalBody .task-tabbed-board{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
#planModalBody .task-tabbed-board #task-main-panel .task-section-cards{grid-template-columns:1fr}
#planModalBody .task-tabbed-board>.task-section{grid-column:auto}
}
@media(max-width:799px){#planModalBody .task-tabbed-board{grid-template-columns:1fr}
#planModalBody .task-list-tabs button{font-size:12px;padding:8px;flex:1}
#planModalBody .task-list-tabs{gap:6px;margin:18px 0}
#planModalBody .task-tabbed-board #task-main-panel .task-section-cards{grid-template-columns:1fr}
}
@media(max-width:700px){#planModalBody .task-floating-search{left:76px;bottom:calc(80px + env(safe-area-inset-bottom,0px));height:44px;width:44px;border-radius:10px}
#planModalBody .task-search-toggle{width:44px;height:44px;min-width:44px;min-height:44px;padding:12px}
#planModalBody .task-floating-search.is-open{width:min(380px,calc(100vw - 92px))}
}
@media(prefers-reduced-motion:reduce){#planModalBody .task-floating-search,#planModalBody .task-search-reveal,#planModalBody .task-search-toggle svg{transition:none;transform:none}
}
#planModalBody .task-tabbed-board #task-main-panel .task-section-cards:has(>.task-card:only-child){grid-template-columns:1fr}
#planModalBody .task-list-control-row{display:flex;align-items:center;gap:16px;position:relative;margin:22px 0 20px}
#planModalBody .task-list-control-row .task-list-tabs{margin:0;min-width:0}
#planModalBody .task-list-control-row .task-floating-search{position:relative;left:auto;bottom:auto;z-index:4;margin-inline-start:auto;flex-shrink:0;box-shadow:none;background:var(--quiet)}
#planModalBody .task-list-control-row .task-floating-search.is-open{width:min(380px,calc(100vw - 500px));box-shadow:none}
#planModalBody .task-list-control-row .task-search-reveal input{font-size:14px}
@media(max-width:700px){#planModalBody .task-list-control-row{gap:8px;margin:18px 0;min-height:44px}
#planModalBody .task-list-control-row .task-list-tabs{flex:1;gap:4px}
#planModalBody .task-list-control-row .task-list-tabs button{font-size:11px;padding:8px 5px;gap:4px;min-width:0;min-height:44px;white-space:nowrap}
#planModalBody .task-list-control-row .task-list-tabs .task-tab-count{padding:1px 4px}
#planModalBody .task-list-control-row .task-floating-search.is-open{position:absolute;left:0;right:0;width:100%}
#planModalBody .task-list-control-row:has(.task-floating-search.is-open) .task-list-tabs{visibility:hidden}
}
@media(min-width:701px) and (max-width:850px){#planModalBody .task-list-control-row .task-floating-search.is-open{width:240px}
#planModalBody .task-list-control-row .task-list-tabs button{padding:8px 10px}
}
@media(max-width:700px){#planModalBody .calendar-controls>#calendar-toolbar-mount{grid-column:1/3;grid-row:2}
#planModalBody .calendar-controls>.calendar-today{grid-column:3;grid-row:2;justify-self:end}
#planModalBody .calendar-controls .calendar-toolbar{justify-content:flex-start}
#planModalBody .calendar-controls .calendar-date-nav{gap:0}
#planModalBody .calendar-controls .calendar-date-nav h2{font-size:16px}
}
@media(max-width:700px){#planModalBody .calendar-all-day .reminder-row-actions{gap:0;flex-wrap:nowrap}
#planModalBody .calendar-all-day .reminder-row-actions .icon-button{width:32px;min-width:32px;height:44px;min-height:44px;padding:7px}
#planModalBody .calendar-all-day .reminder-row-actions svg{width:18px;height:18px}
}
#planModalBody:has(.calendar-month) .workspace{max-width:none;padding-inline:16px}
#planModalBody .month-grid-scroll{width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--quiet) transparent;border-radius:var(--radius)}
#planModalBody .month-scroll-hint{display:none}
#planModalBody .calendar-month{gap:6px}
#planModalBody .calendar-month .month-cell{padding:6px;overflow:hidden}
#planModalBody .calendar-month .month-event{width:100%;white-space:normal;overflow:hidden;display:flex;align-items:flex-start;gap:4px;padding:3px 5px;min-height:24px;flex-shrink:0}
#planModalBody .calendar-month .month-card-time{flex-shrink:0;font-size:10px;line-height:1.6}
#planModalBody .calendar-month .month-card-time:empty{display:none}
#planModalBody .calendar-month .month-card-title{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-size:12px;line-height:1.6}
#planModalBody .calendar-month .month-cell{min-height:220px;height:auto}
#planModalBody .calendar-month .month-date-heading{margin-bottom:4px}
@media(max-width:700px){#planModalBody:has(.calendar-month) .workspace{padding-inline:8px}
#planModalBody .month-scroll-hint{display:block;font-size:11px;color:var(--muted);margin:8px 0 12px}
#planModalBody .calendar-month{min-width:820px;gap:6px}
#planModalBody .calendar-month .month-cell{padding:5px;min-height:190px}
#planModalBody .calendar-month .month-event{display:block;padding:3px 5px;min-height:24px}
#planModalBody .calendar-month .month-card-time{display:block;font-size:10px}
#planModalBody .calendar-month .month-card-title{font-size:12px}
#planModalBody .calendar-month .month-week-label{font-size:11px}
#planModalBody .month-grid-scroll:focus-visible{background:var(--hover)}
}
#planModalBody .month-view-tools,#planModalBody .month-overview-tasks{display:none}
@media(max-width:700px){#planModalBody .month-view-tools{display:flex;justify-content:flex-start;margin:4px 0 5px}
#planModalBody .month-zoom-toggle{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 10px;font-size:12px;background:var(--surface);border-radius:var(--radius)}
#planModalBody .month-zoom-toggle svg{width:16px;height:16px}
#planModalBody .month-view.is-overview .month-scroll-hint{display:none}
#planModalBody .month-view.is-overview .month-grid-scroll{overflow:visible}
#planModalBody .month-view.is-overview .calendar-month{min-width:0;gap:3px}
#planModalBody .month-view.is-overview .month-cell{min-height:54px;height:clamp(54px,calc((100dvh - 360px)/var(--calendar-weeks)),88px);padding:4px;gap:4px;align-items:center}
#planModalBody .month-view.is-overview .month-week-label{font-size:9px;padding:5px 0}
#planModalBody .month-view.is-overview .month-date-heading{flex-wrap:wrap;justify-content:center;gap:1px;margin-bottom:0}
#planModalBody .month-view.is-overview .month-date-heading strong{font-size:13px}
#planModalBody .month-view.is-overview .month-today-label{font-size:8px;padding:0 3px;line-height:1.7}
#planModalBody .month-view.is-overview .month-event,#planModalBody .month-view.is-overview .month-more{display:none}
#planModalBody .month-view.is-overview .month-overview-tasks{display:flex;align-items:center;justify-content:center;gap:3px;font-size:10px;color:var(--art)}
#planModalBody .month-overview-tasks i{width:4px;height:4px;background:currentColor;border-radius:50%}
#planModalBody .month-view.is-expanded .month-scroll-hint{display:block}
}
html[data-skin=minimal] #planModalBody .calendar-month .month-event{border-radius:0}
#planModalBody .timeline-now{border-top:0;height:2px;background:linear-gradient(to left,var(--danger) var(--now-fill,0%),color-mix(in srgb,var(--danger) 35%,transparent) var(--now-fill,0%))}
#planModalBody .timeline-now i{top:-3px}
#planModalBody .calendar-all-day-row{padding:4px 0}
#planModalBody .calendar-all-day-row .reminder-main{width:100%;min-width:0}
#planModalBody .calendar-all-day-edit{flex:1;min-width:0;text-align:start;align-self:stretch;padding:4px 8px;min-height:48px;border-radius:var(--radius)}
#planModalBody .calendar-all-day-edit strong,#planModalBody .calendar-all-day-edit small{display:block}
#planModalBody .calendar-all-day-edit small{font-size:12px;color:var(--muted);margin-top:2px}
#planModalBody .calendar-all-day-edit:hover,#planModalBody .calendar-all-day-edit:focus-visible{background:var(--hover)}
#planModalBody .calendar-all-day-row .task-check{flex-shrink:0}
@media(max-width:700px){#planModalBody .calendar-all-day-edit{padding:4px}
#planModalBody .calendar-all-day-edit small{font-size:11px}
}
#planModalBody .calendar-dot-card{box-sizing:border-box;display:flex;align-items:center;gap:10px;direction:rtl;line-height:1.3}
#planModalBody .calendar-dot-card .calendar-ghost-copy{flex:1;min-width:0;opacity:0;transition:opacity 160ms ease 100ms}
#planModalBody .calendar-dot-card strong,#planModalBody .calendar-dot-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#planModalBody .calendar-dot-card small{font-size:10px;font-weight:400;color:var(--muted);margin-top:3px}
#planModalBody .calendar-ghost-check{order:-1;width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--art);border-radius:calc(var(--radius)/3);opacity:0;transition:opacity 160ms ease 100ms}
#planModalBody .calendar-ghost-check svg{width:16px;height:16px}
#planModalBody .calendar-dot-card.is-open .calendar-ghost-copy,#planModalBody .calendar-dot-card.is-open .calendar-ghost-check{opacity:1}
#planModalBody .calendar-dot-card.is-landing .calendar-ghost-check{opacity:0;transition-delay:0ms}
#planModalBody .calendar-dot-card.done strong{text-decoration:line-through}
#planModalBody .calendar-dot-card.is-collapsing .calendar-ghost-copy,#planModalBody .calendar-dot-card.is-collapsing .calendar-ghost-check{opacity:0;transition-delay:0ms;transition-duration:120ms}
#planModalBody .calendar-check{width:18px;min-width:18px;height:18px;min-height:18px;flex-shrink:0;padding:1px;border-radius:4px}
#planModalBody .calendar-check svg{width:13px;height:13px}
#planModalBody .reminder-row .task-check,#planModalBody .plan-step .task-check{width:44px;min-width:44px;height:44px;min-height:44px;position:relative;border:0;background:transparent;margin:0;padding:0}
#planModalBody .reminder-row .task-check:before,#planModalBody .plan-step .task-check:before{content:"";position:absolute;inset:12px;border:1.5px solid var(--art);border-radius:calc(var(--radius)*.3);background:var(--bg)}
#planModalBody .reminder-row .task-check[aria-pressed=true],#planModalBody .plan-step .task-check[aria-pressed=true]{background:transparent}
#planModalBody .reminder-row .task-check[aria-pressed=true]:before,#planModalBody .plan-step .task-check[aria-pressed=true]:before{background:var(--action);border-color:var(--action)}
#planModalBody .reminder-row .task-check svg,#planModalBody .plan-step .task-check svg{position:relative;width:14px;height:14px}
#planModalBody .task-card-check:before{inset:13px;border-radius:4px}
#planModalBody .task-card-check svg{width:13px;height:13px}
html[data-skin=minimal] #planModalBody :is(.calendar-check,.task-check,.task-card-check:before){border-radius:0}
#planModalBody .timeline-event{padding:4px 7px;gap:7px}
#planModalBody .timeline-event small{text-align:left;line-height:1.4}
#planModalBody .calendar-event-duration{display:none}
#planModalBody .timeline-event.is-short{align-items:center;padding:3px 6px}
#planModalBody .timeline-event.is-short>div{display:flex;align-items:center;gap:5px;line-height:1.2}
#planModalBody .timeline-event.is-short strong{flex:1;min-width:0;font-size:11px;line-height:1.2}
#planModalBody .timeline-event.is-short small{flex-shrink:0;font-size:10px;line-height:1.2;white-space:nowrap}
#planModalBody .timeline-event.is-short .calendar-event-range{display:none}
#planModalBody .timeline-event.is-short .calendar-event-duration{display:inline}
#planModalBody dialog form>.actions:last-child:has(>.primary):has(>[data-action=close]){justify-content:flex-start;flex-wrap:nowrap;gap:12px;width:100%}
#planModalBody dialog form>.actions:last-child:has(>[data-action=close])>.primary{order:-1;flex:1;justify-content:center}
#planModalBody dialog form>.actions:last-child:has(>.primary)>[data-action=close]{flex:0 0 80px;justify-content:center}
#planModalBody .plan-wizard-footer>.primary{order:-1;flex:1;justify-content:center}
#planModalBody .reminder-delete-row{display:flex;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
#planModalBody .reminder-delete-row .danger{min-height:44px;padding:0 10px;gap:7px;color:var(--danger)}
#planModalBody .reminder-delete-row svg{width:17px;height:17px}
#planModalBody #reminder-form>.reminder-delete-row+.actions{margin-top:12px}
#planModalBody .plan-step{display:block}
#planModalBody .plan-step-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
#planModalBody .plan-step-header>.actions{flex-wrap:nowrap;gap:0}
#planModalBody .plan-step-schedule{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-inline-start:44px;padding-bottom:4px}
#planModalBody .plan-step-schedule-copy{display:grid;gap:4px;min-width:0}
#planModalBody .plan-step-schedule-copy small{font-size:11px;color:var(--muted);line-height:1.8}
#planModalBody .step-reminder-status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--art)}
#planModalBody .step-reminder-status svg{width:14px;height:14px}
#planModalBody .step-reminder-toggle{display:flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0;min-height:36px;padding:6px 10px;font-size:11px;color:var(--art);background:var(--bg);border-radius:calc(var(--radius)*.7)}
#planModalBody .step-reminder-toggle svg{width:14px;height:14px}
#planModalBody .step-reminder-toggle[aria-expanded=true]{background:var(--action);color:var(--on-action)}
#planModalBody .plan-step-reminder-panel{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
#planModalBody .plan-step-reminder-panel[hidden]{display:none}
#planModalBody .plan-step-reminder-panel .field{gap:6px;margin-bottom:0;font-size:12px}
#planModalBody .plan-step-reminder-panel .two-fields{gap:10px}
#planModalBody .plan-step-reminder-panel .date-entry,#planModalBody .plan-step-reminder-panel .time-entry{min-height:44px;font-size:12px;background:var(--bg);width:100%;justify-content:center}
#planModalBody .step-reminder-options{margin:8px 0}
#planModalBody .step-reminder-options button{min-height:36px;padding:4px 8px;font-size:11px;color:var(--muted)}
#planModalBody #plan-step-reminder-form>.actions{margin-top:10px!important}
#planModalBody #plan-step-reminder-form>.actions button{min-height:44px;font-size:12px}
@media(max-width:700px){#planModalBody .plan-step-schedule{margin-inline-start:0;gap:8px;padding-inline-start:10px}
#planModalBody .step-reminder-toggle{min-height:44px}
#planModalBody .plan-step-main{gap:4px}
#planModalBody .plan-step-header .icon-button{width:36px;height:44px;min-height:44px;padding:9px}
#planModalBody .plan-step-header>.actions{margin-inline-start:auto}
#planModalBody .plan-step-schedule-copy small{font-size:10px}
}
#planModalBody #plan-step-reminder-form>.actions{justify-content:flex-start;flex-wrap:nowrap;gap:10px}
#planModalBody #plan-step-reminder-form>.actions>.primary{order:-1;flex:1;justify-content:center}
#planModalBody #plan-step-reminder-form>.actions>[data-action=step-reminder-cancel]{flex:0 0 80px;justify-content:center}
html body{font-family:Peyda,sans-serif;font-size:15px;line-height:1.7;font-variant-numeric:tabular-nums}
html body :is(button,input,textarea,select){font-family:inherit;letter-spacing:0}
html body .primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--action);color:var(--on-action);height:46px;min-height:44px;padding:0 21px;border:0;border-radius:var(--radius);font-size:14px;font-weight:500}
html body .plain{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);border-radius:var(--radius);padding:0 10px;border:0;background:none;min-height:44px}
html body .icon-button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;border:0;border-radius:var(--radius);background:none;color:var(--fg)}
html body :is(.primary,.plain,.icon-button) .theme-icon{flex:none}
#view-inbox{padding:37px 48px 95px}
#view-inbox .approved-internal-state{display:none!important}
#view-inbox .capture-copy h1{font-size:23px;font-weight:500;line-height:1.65;color:var(--fg)}
#view-inbox .capture-copy p{font-size:14px;margin:6px 0 24px;color:var(--muted)}
#view-inbox .capture-actions button{width:auto}
#view-inbox .today-briefing-cards{display:block}
#view-inbox .today-briefing-card{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
#view-inbox .today-briefing-card+.today-briefing-card{border-top:1px solid var(--rule)}
#view-inbox .today-briefing-copy h3{font-size:14px;font-weight:500}
#view-inbox .today-briefing-copy p{font-size:12px;color:var(--muted)}
#view-inbox .today-briefing-more{display:none}
#view-notes{padding:37px 48px 95px}
#view-notes .content{max-width:1120px;margin:auto}
#view-notes .library-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}
#view-notes .library-heading h1{font-size:34px;font-weight:800;line-height:1.4;letter-spacing:-.7px;margin:0}
#view-notes .library-heading p{font-size:13px;color:var(--muted);margin:6px 0 0}
#view-notes .library-tools{display:flex;align-items:center;gap:12px;margin-bottom:18px}
#view-notes .library-search{display:flex;align-items:center;gap:10px;background:var(--quiet);border-radius:var(--radius);padding:0 16px;min-height:50px;height:50px;flex:1;max-width:none}
#view-notes .library-search input{font:inherit;border:0;background:none;color:var(--fg);outline:none;padding:0;min-width:0;width:100%}
#view-notes .library-bar{display:flex;justify-content:space-between;align-items:center;margin:28px 0 18px}
#view-notes .library-bar h2{font-size:16px;margin:0}
#view-notes .library-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
#view-notes .note-card{display:block;direction:inherit;text-align:start;padding:20px 20px 9px;background:var(--surface);border:0;border-radius:var(--radius);box-shadow:none;overflow:hidden}
#view-notes .note-top{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;margin-bottom:15px}
#view-notes .note-type{display:flex;align-items:center;gap:6px}
#view-notes .note-date{margin-inline-start:auto}
#view-notes .note-open h3{font-size:18px;line-height:1.65;font-weight:600;margin:0 0 9px;color:var(--fg)}
#view-notes .note-excerpt{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;line-height:1.9;font-size:14px;color:var(--muted)}
#view-notes .note-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;border-top:1px solid var(--rule);padding-top:10px;margin-top:20px}
#view-notes .note-folder{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
#view-notes .note-more{width:44px;height:44px;padding:12px;background:none;border:0;color:var(--muted)}
#view-notes .note-state{font-size:11px;color:var(--muted)}
#view-notes .library-layout-list .library-card-grid{grid-template-columns:1fr}
#view-plans .approved-plan-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border:0;border-bottom:1px solid var(--rule);background:none;width:100%;text-align:start;font:inherit}
#view-plans .approved-plan-row strong{display:block;font-size:15px;font-weight:600}
#view-plans .approved-plan-row small{display:block;font-size:12px;color:var(--muted);margin-top:4px}
#view-plans .approved-plan-percent{display:flex;align-items:center;gap:8px;font-size:14px}
#planModal.approved-plan-detail .modal{width:min(660px,calc(100vw - 32px));max-height:88dvh}
#planModal.approved-plan-detail .modal-body{padding:0 28px 28px}
#planModalBody .plan-step-reminder-form{display:none}
#planModalBody .plan-step-reminder-form.open{display:block;padding-top:12px;margin-top:12px;border-top:1px solid var(--rule)}
#planModalBody .plan-step-reminder-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#planModalBody .plan-step-reminder-row input:not([type=checkbox]){width:130px;min-height:44px;border:0;border-radius:var(--radius);background:var(--quiet);color:var(--fg);padding:10px;font:inherit}
#planModalBody .plan-step-main{display:flex;align-items:center;gap:10px}
#authScreen #authTitle{font-size:32px;line-height:1.5;font-weight:700;letter-spacing:-.6px;margin:0 0 4px}
#authScreen .auth-welcome{font-size:12px;line-height:1.7}
#authScreen .auth-label{font-size:13px;line-height:1.7}
#authScreen .auth-input{font-size:15px;min-height:54px;padding:14px 16px;margin-top:8px;background:var(--surface)}
#authScreen .auth-btn{font-size:15px;min-height:54px}
@media(max-width:768px){#view-inbox,#view-notes{padding:20px 16px 100px}}
@media(max-width:600px){
 #view-inbox .capture-copy h1{font-size:21px;font-weight:600}
 #view-inbox .capture-copy p{font-size:13px;margin:4px 0 18px}
 #view-inbox .capture-actions .primary{width:auto;flex:1;max-width:150px}
 #view-notes .library-heading h1{font-size:28px}
 #view-notes .library-heading p{font-size:12px}
 #view-notes .library-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 #view-notes .note-card{padding:12px 12px 8px;border-radius:var(--radius)}
 #view-notes .note-top{font-size:10px;gap:3px;flex-wrap:nowrap}
 #view-notes .note-open h3{font-size:14px;line-height:1.75}
 #view-notes .note-excerpt{font-size:12px;line-height:1.85;-webkit-line-clamp:3}
 #view-notes .note-folder{font-size:10px;gap:4px}
 #view-notes .note-bottom{min-height:32px;padding-top:8px;margin-top:12px}
 #authScreen #authTitle{font-size:28px;margin-top:0}
 #planModal.approved-plan-detail .modal-body{padding:0 20px 20px}
}
#view-inbox .content{width:100%}
#view-inbox .task-check[aria-pressed=false] .theme-icon{opacity:0}
#view-inbox .task-check[aria-pressed=true] .theme-icon{opacity:1}
#view-inbox .hati-head button{padding:0;min-height:32px}
#view-inbox .hati-suggestion .theme-icon{width:16px;height:16px}
#view-inbox .hati-suggestion .suggestion-icon .theme-icon{width:17px;height:17px}
#view-inbox .suggestion-chevron .theme-icon{width:16px;height:16px}
#view-inbox .suggestion-expanded .actions{display:flex;gap:8px;flex-wrap:wrap}
#view-inbox .suggestion-expanded .actions button{font-size:12px}
body:has(#view-inbox.active) #todayCreateFab{display:none!important}
#view-notes .content{width:100%}
#view-notes svg,#view-inbox svg,#planModalBody svg{width:20px;height:20px;flex-shrink:0}
#view-inbox .art svg{width:100%;height:100%}
#view-notes .primary,#view-inbox .primary,#planModalBody .primary{white-space:nowrap;width:auto;flex-shrink:0}
#view-notes .folders-manage{white-space:nowrap;border:1px solid var(--rule);background:none;padding:0 16px}
#view-notes #notesList{max-width:none;width:100%;padding:0}

/* Approved workspace foundations for account pages. */
:is(#view-settings,#billing-view,#trash-view,#admin-view){max-width:1040px;margin:auto;padding:48px 40px 80px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) h1{font-size:30px;font-weight:700}
:is(#view-settings,#billing-view,#trash-view,#admin-view) h2{font-size:20px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) h3{font-size:16px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) p{line-height:1.9}
:is(#view-settings,#billing-view,#trash-view,#admin-view)-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:28px}
:is(#view-settings,#billing-view,#trash-view,#admin-view)-heading p,:is(#view-settings,#billing-view,#trash-view,#admin-view) .hint{font-size:13px;color:var(--muted)}
:is(#view-settings,#billing-view,#trash-view,#admin-view)-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:48px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .section-nav{display:flex;flex-direction:column;gap:6px;align-self:start;position:sticky;top:28px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .section-nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:var(--radius);font-size:14px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .section-nav svg{width:17px;height:17px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .section-nav a:hover{background:var(--hover)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .section-nav a[aria-current=page]{background:var(--quiet);font-weight:600;color:var(--art)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .settings-content{min-width:0}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .settings-group{margin-bottom:30px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .settings-group>h2{margin-bottom:18px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .setting-row{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:72px;padding:16px 0;border-bottom:1px solid var(--rule)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .setting-row label{font-size:14px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .setting-row small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .setting-row select{width:180px;flex-shrink:0}
:is(#view-settings,#billing-view,#trash-view,#admin-view) input,:is(#view-settings,#billing-view,#trash-view,#admin-view) textarea,:is(#view-settings,#billing-view,#trash-view,#admin-view) select,:is(#view-settings,#billing-view,#trash-view,#admin-view) dialog input,:is(#view-settings,#billing-view,#trash-view,#admin-view) dialog select,:is(#view-settings,#billing-view,#trash-view,#admin-view) dialog textarea{font:inherit;color:var(--fg);background:var(--quiet);border:0;border-radius:var(--radius);padding:12px 14px;min-height:44px;width:100%;outline:none;box-shadow:none}
:is(#view-settings,#billing-view,#trash-view,#admin-view) textarea,:is(#view-settings,#billing-view,#trash-view,#admin-view) dialog textarea{resize:vertical;min-height:100px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) select:focus,:is(#view-settings,#billing-view,#trash-view,#admin-view) dialog select:focus{background:var(--hover);outline:none;box-shadow:none}
:is(#view-settings,#billing-view,#trash-view,#admin-view) button:focus-visible,:is(#view-settings,#billing-view,#trash-view,#admin-view) a:focus-visible{background:var(--hover)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .field{display:block;margin-bottom:20px;font-size:13px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .field input,:is(#view-settings,#billing-view,#trash-view,#admin-view) .field select,:is(#view-settings,#billing-view,#trash-view,#admin-view) .field textarea{display:block;margin-top:8px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .field small{display:block;color:var(--muted);font-size:12px;margin-top:6px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .actions button,:is(#view-settings,#billing-view,#trash-view,#admin-view) .actions a{min-height:44px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .actions svg{width:17px;height:17px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .switch{position:relative;display:inline-flex;width:44px;height:44px;flex-shrink:0;align-items:center;justify-content:center}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .switch input{position:absolute;opacity:0;inset:0;cursor:pointer}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .switch span{height:24px;width:42px;border-radius:99px;background:var(--quiet);position:relative;pointer-events:none;transition:background .2s}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .switch span:after{content:'';position:absolute;width:16px;height:16px;top:4px;right:4px;background:var(--muted);border-radius:50%;transition:transform .2s}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .switch input:checked+span{background:var(--action)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .switch input:checked+span:after{background:var(--on-action);transform:translateX(-18px)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .switch input:focus-visible+span{box-shadow:0 0 0 2px var(--fg)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .save-state{font-size:12px;color:var(--muted);min-height:24px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .option-set{display:flex;gap:8px;flex-wrap:wrap}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .option-set button{background:var(--quiet);padding:0 16px;min-height:44px;border-radius:var(--radius)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .option-set button[aria-pressed=true]{background:var(--action);color:var(--on-action)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .swatch{width:44px;height:44px;background:var(--swatch)!important;padding:0!important;position:relative}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .swatch[aria-pressed=true]:after{content:'✓';color:white;font-size:22px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .danger{color:var(--danger)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .separated{margin-top:24px;padding-top:24px;border-top:1px solid var(--rule)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .empty{text-align:center;padding:48px 16px;color:var(--muted)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .empty svg{width:30px;height:30px;margin-bottom:12px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .row-list{border-top:1px solid var(--rule)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .item-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule);text-align:start;width:100%;background:transparent}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .item-row strong{font-size:14px;display:block}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .item-row small,:is(#view-settings,#billing-view,#trash-view,#admin-view) .item-row time{font-size:12px;color:var(--muted)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) button.item-row:hover{background:var(--hover);border-radius:var(--radius)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .badge{font-size:11px;color:var(--muted);background:var(--quiet);padding:4px 8px;border-radius:var(--radius);white-space:nowrap}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .badge[data-tone=danger]{color:var(--danger)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .badge[data-tone=success]{color:var(--art)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .ticket-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .ticket-message{padding:16px 0;border-bottom:1px solid var(--rule)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .ticket-message header{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:12px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .ticket-message p{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:6px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .ticket-detail h2{font-size:18px;margin-bottom:10px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .toolbar{display:flex;align-items:flex-end;gap:12px;margin-bottom:24px;flex-wrap:wrap}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .toolbar .field{margin:0;flex:1;min-width:120px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .toolbar .field:first-child{flex:2}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:32px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .stat strong{display:block;font-size:30px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .stat span{font-size:12px;color:var(--muted)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .user-row{padding:22px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .user-row .actions{justify-content:flex-end;max-width:380px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .user-row p{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .pagination{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:24px;font-size:13px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .meter{margin:20px 0}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .meter header{display:flex;justify-content:space-between;gap:12px;font-size:13px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .meter progress{width:100%;height:4px;appearance:none;border:0;background:var(--quiet);margin-top:8px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .meter progress::-webkit-progress-bar{background:var(--quiet)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .meter progress::-webkit-progress-value{background:var(--art)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:24px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .plan-column{padding:20px 0;border-top:2px solid var(--rule);display:flex;flex-direction:column;gap:12px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .plan-column.current{border-color:var(--art)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .plan-column strong{font-size:20px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .plan-column p{font-size:12px;color:var(--muted)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .plan-column ul{font-size:12px;padding-right:16px;line-height:2.4;flex:1}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .plan-column button{justify-content:center}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .credit-packs{display:flex;gap:16px;margin-top:18px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .credit-pack{flex:1;padding:16px 0;border-top:1px solid var(--rule)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .credit-pack p{font-size:13px;margin-bottom:12px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .calendar-status{margin:16px 0;font-size:13px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .preview-note{font-size:11px;color:var(--muted);margin-top:36px;line-height:1.8}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .auth-content{max-width:390px;margin:5vh auto}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .auth-content h1{margin-bottom:10px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .auth-content form{margin-top:30px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .auth-content .primary{width:100%;justify-content:center}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .auth-content .actions{justify-content:center;margin-top:18px;font-size:13px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .legal{max-width:720px;margin:auto}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .legal h2{margin:28px 0 12px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .legal p{font-size:14px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .inline-error{font-size:12px;color:var(--danger);margin:10px 0}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .desktop-links{display:flex;gap:12px;font-size:12px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .desktop-links a{min-height:44px;display:flex;align-items:center}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .mobile-nav{display:none}
:is(#view-settings,#billing-view,#trash-view,#admin-view) dialog{border:0;background:var(--bg);color:var(--fg);border-radius:var(--radius);padding:28px;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;animation:workspace-arrive .2s ease}
:is(#view-settings,#billing-view,#trash-view,#admin-view) dialog::backdrop{background:#17131e70;backdrop-filter:blur(5px)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) dialog>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) dialog h2{font-size:20px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) dialog .hint{line-height:1.9;margin-bottom:20px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) dialog .actions{justify-content:flex-end;margin-top:24px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .menu-links{display:flex;flex-direction:column;gap:4px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .menu-links a{display:flex;align-items:center;gap:14px;padding:10px;min-height:44px;border-radius:var(--radius)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .menu-links a:hover{background:var(--hover)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .menu-links svg{width:19px;height:19px;color:var(--art)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) #workspace-menu{position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;max-height:100dvh;width:260px;border-radius:0}
:is(#view-settings,#billing-view,#trash-view,#admin-view) #workspace-toast{position:fixed;z-index:30;bottom:28px;left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);border-radius:var(--radius);padding:12px 20px;font-size:13px;max-width:90vw}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .readonly{opacity:.65}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .connection-rule{padding:20px 0;border-bottom:1px solid var(--rule)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .demo-tools{display:flex;gap:10px;font-size:11px;flex-wrap:wrap;margin-bottom:20px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .demo-tools select{width:auto;font-size:11px;min-height:36px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .demo-tools label{display:flex;align-items:center;gap:8px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .preview-login{padding:16px;background:var(--quiet);border-radius:var(--radius);font-size:12px;margin-top:24px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .browser-error{padding:30px 0}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .browser-error .actions{margin-top:14px}
@keyframes workspace-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
:is(#view-settings,#billing-view,#trash-view,#admin-view) [hidden]{display:none!important}
@media(max-width:900px){:is(#view-settings,#billing-view,#trash-view,#admin-view){padding:36px 24px 72px}
:is(#view-settings,#billing-view,#trash-view,#admin-view)-layout{grid-template-columns:160px minmax(0,1fr);gap:28px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .plan-grid{grid-template-columns:repeat(2,1fr)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .ticket-layout{grid-template-columns:1fr}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){:is(#view-settings,#billing-view,#trash-view,#admin-view){padding:28px 22px calc(100px + env(safe-area-inset-bottom))}
:is(#view-settings,#billing-view,#trash-view,#admin-view)-heading{margin-bottom:20px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) h1{font-size:26px}
:is(#view-settings,#billing-view,#trash-view,#admin-view)-layout{display:block}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .section-nav{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:28px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .section-nav a{font-size:12px;padding:8px;justify-content:center;gap:6px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .section-nav svg{width:15px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .setting-row{gap:16px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .setting-row select{width:135px;font-size:13px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .setting-row label{font-size:13px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .desktop-links{display:none}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .user-row{display:block}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .user-row .actions{justify-content:flex-start;margin-top:14px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .toolbar{gap:10px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .toolbar .field{min-width:120px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .credit-packs{flex-direction:column;gap:6px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;border-top:1px solid var(--rule);background:var(--bg);z-index:10;padding:9px 8px calc(9px + env(safe-area-inset-bottom))}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;gap:4px;min-height:44px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .mobile-nav svg{width:20px;height:20px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .brand-menu>button{display:flex}
:is(#view-settings,#billing-view,#trash-view,#admin-view) #workspace-toast{bottom:90px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .stats{gap:18px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .auth-content{margin-top:24px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .plan-grid{gap:18px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) dialog{padding:24px}
:is(#view-settings,#billing-view,#trash-view,#admin-view)-heading .primary{font-size:12px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .ticket-detail{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){:is(#view-settings,#billing-view,#trash-view,#admin-view) *{animation:none!important;transition:none!important}
}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .setting-row select{width:180px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .setting-row>div:first-child{min-width:0;flex:1}
:is(#view-settings,#billing-view,#trash-view,#admin-view) button:disabled{opacity:.45}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .setting-row label{white-space:normal}
@media(max-width:700px){:is(#view-settings,#billing-view,#trash-view,#admin-view) .setting-row select{width:135px}
}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .planner-tabs{margin-bottom:32px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .two-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .task-check{height:44px;width:44px;min-width:44px;border:1px solid var(--rule);border-radius:var(--radius);display:grid;place-items:center}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .task-check[aria-pressed=true]{background:var(--action);color:var(--on-action)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .done-text{text-decoration:line-through;color:var(--muted)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .month-cell{height:94px;min-width:0;text-align:start;padding:8px;border-radius:var(--radius);background:var(--quiet);display:flex;flex-direction:column;gap:2px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .month-cell small{font-size:10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:100%}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .month-cell.selected{background:var(--action);color:var(--on-action)}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .picker-grid .month-cell{height:44px;text-align:center;display:grid;place-items:center}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .date-entry{width:100%;background:var(--quiet);margin-top:8px;justify-content:center}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .alerts{border:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:12px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .alerts legend{margin-bottom:12px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .alerts label{display:flex;gap:6px;align-items:center;min-height:44px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .alerts input{width:16px;min-height:16px;accent-color:var(--action)}
@media(max-width:700px){:is(#view-settings,#billing-view,#trash-view,#admin-view) .month-cell{height:72px;padding:5px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .month-cell small{font-size:9px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .two-fields{gap:12px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .item-row .actions{gap:4px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .item-row strong{font-size:13px}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .task-check{min-width:38px;width:38px}
}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .field.separated{border-top:0}
:is(#view-settings,#billing-view,#trash-view,#admin-view)-heading+.workspace-layout{align-items:start}
#planModal.approved-plan-wizard .modal{width:min(580px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
#planModal.approved-plan-wizard .modal-body{padding:0 28px 28px}
#planModalBody .field input,#planModalBody .field textarea{width:100%;background:var(--quiet);border:0;border-radius:var(--radius);padding:12px 14px;font:inherit;color:var(--fg);min-height:46px}
#planModalBody .plan-draft-step input{background:transparent;min-width:0;flex:1;border:0;padding:8px}
#planModalBody .plan-draft-step{display:flex;gap:8px;align-items:center;padding:4px 8px;background:var(--quiet);border-radius:var(--radius)}
#planModalBody .plan-wizard-footer>div{display:flex;gap:8px}
:is(#view-settings,#billing-view,#trash-view,#admin-view){padding:44px 48px 100px}
:is(#view-settings,#billing-view,#trash-view,#admin-view)>.view-header{padding:0;margin-bottom:32px;border:0;display:flex;justify-content:space-between;align-items:center;background:none;min-height:0}
:is(#view-settings,#billing-view,#trash-view,#admin-view)>.view-body{padding:0;overflow:visible;width:100%;max-width:none}
:is(#view-settings,#billing-view,#trash-view,#admin-view) h1{font-size:30px;line-height:1.5;margin:0;font-weight:700}
:is(#view-settings,#billing-view,#trash-view,#admin-view) .view-header p{font-size:13px;color:var(--muted);margin:6px 0 0}
#view-settings .workspace-layout,#admin-view .admin-workspace{display:grid;grid-template-columns:190px minmax(0,1fr);gap:48px;align-items:start}
#view-settings .settings-tabs,#admin-view .admin-tabs{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;position:sticky;top:96px}
#view-settings .settings-tab,#admin-view .admin-tab{display:flex;gap:12px;align-items:center;justify-content:flex-start;min-height:44px;border:0;background:none;color:var(--muted);border-radius:var(--radius);padding:10px 12px;font:inherit;font-size:14px;width:100%;text-align:start;letter-spacing:0}
#view-settings .settings-tab.active,#admin-view .admin-tab.active{background:var(--quiet);color:var(--art)}
#view-settings .settings-tab .theme-icon,#admin-view .admin-tab .theme-icon{width:18px;height:18px}
#view-settings .settings-content,#admin-view .admin-content{width:100%;min-width:0}
#view-settings .settings-panel.active{display:block}
#view-settings .settings-group{background:none;border:0;padding:0;margin:0 0 30px;border-radius:0;box-shadow:none}
#view-settings .settings-group h2{font-size:18px;font-weight:700;margin:0 0 18px;line-height:1.6;letter-spacing:0}
#view-settings .settings-group .field{display:flex;flex-direction:column;font-size:14px;gap:8px;align-items:stretch;margin-bottom:18px}
#view-settings .settings-group .field :is(input,textarea){background:var(--quiet);border:0;border-radius:var(--radius);width:100%;font:inherit;padding:12px 14px;resize:vertical;color:var(--fg)}
#view-settings .setting-row{min-height:66px;padding:16px 0;border-bottom:1px solid var(--rule);gap:24px;display:flex;justify-content:space-between;align-items:center;background:none}
#view-settings .setting-row>label{flex:1;font-size:14px;font-weight:400;color:var(--fg)}
#view-settings .setting-row select,#view-settings .setting-row .theme-select{width:180px;flex:none}

#view-settings .calendar-settings-heading{margin-top:24px}
#view-settings .settings-account-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:24px;border-top:1px solid var(--rule)}
#view-settings .settings-account-actions button{font-size:13px;min-height:44px;display:inline-flex;align-items:center;padding:0 10px;border:0;background:none;color:var(--fg)}
#view-settings .approved-account-heading h2{font-size:18px}
#view-settings .approved-account-heading p{font-size:13px;color:var(--muted)}
#billing-view .billing-current-plan{display:flex;align-items:center;justify-content:space-between;padding:0;border:0;margin-bottom:30px;background:none}
#billing-view .billing-plan-info{order:-1;display:flex;flex-direction:column;gap:4px}
#billing-view #billing-plan-name{font-size:22px;font-weight:700}
#billing-view .billing-plan-expires{font-size:13px;color:var(--muted)}
#billing-view .billing-section{border:0;border-radius:0;background:none;padding:0;margin:0 0 36px}
#billing-view .billing-section-title{font-size:18px;font-weight:700;letter-spacing:0;margin:0 0 18px}
#billing-view .billing-usage-grid{display:block}
#billing-view .billing-meter{padding:0;margin-bottom:20px;background:none}
#billing-view .billing-usage-item{font-size:13px;display:flex;justify-content:space-between;gap:16px;margin-bottom:8px}
#billing-view .billing-usage-item strong{font-weight:400;font-size:13px}
#billing-view .billing-usage-bar{height:4px;background:var(--quiet);border-radius:0;overflow:hidden}
#billing-view .billing-usage-fill{height:100%;background:var(--art);border-radius:0}
#billing-view .billing-pricing-head{display:flex;justify-content:space-between;gap:20px;align-items:center}
#billing-view .billing-plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
#billing-view .billing-plan-card{padding:20px 0 0;border:0;border-top:2px solid var(--rule);border-radius:0;background:none;box-shadow:none;opacity:1}
#billing-view .billing-plan-card.current{border-top-color:var(--art)}
#billing-view .billing-plan-name{font-size:18px;font-weight:700;margin-bottom:12px}
#billing-view .billing-plan-price{font-size:24px;font-weight:700}
#billing-view .billing-plan-period{font-size:12px;color:var(--muted);margin:0 0 16px}
#billing-view .billing-plan-features{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted);padding:0;margin:0 0 22px;min-height:180px}
#billing-view .billing-plan-btn{border:0;border-radius:var(--radius);background:var(--action);color:var(--on-action);min-height:46px;padding:0 18px;font-size:14px}
#billing-view .billing-plan-btn:disabled{opacity:.45}
#billing-view .billing-credit-packs{display:flex;gap:30px}
#billing-view .billing-credit-pack-card{background:none;border:0;border-radius:0;padding:10px 0;flex:1}
#billing-view .billing-credit-pack-amount{font-size:17px;font-weight:700}
#billing-view .billing-credit-pack-price{font-size:13px;color:var(--muted);margin:8px 0}
#billing-view .billing-credit-pack-card .billing-plan-btn{background:none;color:var(--muted);padding:0}
#billing-view .billing-credit-summary{display:block;margin-bottom:14px}
#billing-view .billing-payment-item{padding:18px 0;display:flex;justify-content:space-between;border-bottom:1px solid var(--rule);font-size:13px}
#trash-view .trash-item{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;gap:16px}
#trash-view .trash-item-title{font-weight:600;font-size:15px}
#trash-view .trash-item-date{font-size:12px;color:var(--muted);margin-top:4px}
#trash-view .trash-item-actions{display:flex;gap:8px}
#trash-view .trash-item-actions button{background:none;border:0;min-height:44px;padding:0 10px;font-size:13px}
#trash-view .trash-delete-btn{width:44px;color:var(--danger)}
#trash-view .trash-delete-btn .theme-icon{width:18px;height:18px}
#trash-view .trash-empty-state{padding:40px 0;color:var(--muted);text-align:center}
@media(max-width:900px){:is(#view-settings,#billing-view,#trash-view,#admin-view){padding:36px 24px 100px}#view-settings .workspace-layout,#admin-view .admin-workspace{grid-template-columns:160px minmax(0,1fr);gap:28px}#billing-view .billing-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){:is(#view-settings,#billing-view,#trash-view,#admin-view){padding:28px 22px 100px}:is(#view-settings,#billing-view,#trash-view,#admin-view) h1{font-size:26px}#view-settings .workspace-layout,#admin-view .admin-workspace{display:block}#view-settings .settings-tabs,#admin-view .admin-tabs{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:28px}#view-settings .settings-tab,#admin-view .admin-tab{font-size:12px;padding:8px;justify-content:center;gap:6px}#view-settings .settings-tab .theme-icon,#admin-view .admin-tab .theme-icon{width:15px;height:15px}#view-settings .setting-row{gap:16px}#view-settings .setting-row select,#view-settings .setting-row .theme-select{width:135px;font-size:13px}#view-settings .setting-row label{font-size:13px}#billing-view .billing-plan-grid{gap:18px}#billing-view .billing-credit-packs{flex-direction:column;gap:6px}#planModal.approved-plan-wizard .modal-body{padding:0 24px 24px}}#admin-view .admin-ticket-row{display:flex;justify-content:space-between;align-items:center;gap:16px;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;padding:18px 0;width:100%;text-align:start;font:inherit}#admin-view .admin-ticket-row strong{font-size:15px;font-weight:600}#admin-view .admin-ticket-row small{display:block;font-size:12px;color:var(--muted);margin-top:4px}
:is(#view-settings,#admin-view) .admin-status-badge{font-size:11px;padding:4px 8px;background:var(--quiet);border-radius:calc(var(--radius)*.65);white-space:nowrap;border:0;color:var(--muted)}
#admin-view .support-message{padding:14px 16px;background:var(--quiet);border-radius:var(--radius);font-size:13px;margin-bottom:10px;border:0}
#admin-view .support-message header{display:flex;justify-content:space-between;gap:10px;font-size:11px;margin-bottom:6px;color:var(--muted)}
#admin-view .support-message p{font-size:13px;line-height:1.9;margin:0}
#admin-view .support-detail-head{display:block;margin-bottom:24px;padding:0;background:none;border:0}
#admin-view .support-detail-head h3{font-size:18px;margin:0 0 8px}
#admin-view .support-detail-head p{font-size:13px;color:var(--muted)}
#admin-view .support-reply-box{background:none;border:0;padding:0;margin-top:24px}
#admin-view .support-reply-box textarea{background:var(--quiet);border:0;border-radius:var(--radius);width:100%;padding:12px 14px;font:inherit;color:var(--fg)}
#admin-view .admin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
#admin-view .admin-stat-card{background:none;border:0;border-radius:0;padding:20px 0;border-bottom:1px solid var(--rule);text-align:start}
#admin-view .admin-stat-value{font-size:32px;font-weight:700;color:var(--art)}
#admin-view .admin-stat-label{font-size:12px;color:var(--muted);margin-top:8px}
#admin-view .admin-toolbar{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 24px;padding:0;background:none;border:0}
#admin-view .admin-toolbar label{font-size:12px;display:flex;flex-direction:column;gap:8px;min-width:120px}
#admin-view .admin-toolbar :is(input,select){min-height:46px;padding:12px 14px;border:0;border-radius:var(--radius);background:var(--quiet);font:inherit;color:var(--fg)}
#admin-view .admin-user-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0}
#admin-view .admin-user-name{font-size:15px;font-weight:600}
#admin-view .admin-user-email,#admin-view .admin-user-meta{font-size:12px;color:var(--muted)}
#admin-view .admin-user-plan{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;font-size:12px;align-items:center}
#admin-view .admin-change-plan-btn{background:none;border:0;border-radius:var(--radius);padding:8px 10px;min-height:44px;font:inherit;font-size:12px}
#admin-view .admin-user-plan-badge{font-weight:600;color:var(--art)}
@media(max-width:700px){#admin-view .admin-user-item{display:block}#admin-view .admin-user-plan{justify-content:flex-start;margin-top:14px}#admin-view .admin-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
[hidden]{display:none!important}
#noteModal .note-detail.reader{width:min(820px,calc(100vw - 64px));height:min(820px,90svh);max-height:90svh;padding:0;overflow:hidden;border:1px solid var(--rule);background:var(--bg)}
#noteModal .note-detail[open]{display:flex;flex-direction:column}
#noteModal .detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:23px 28px 18px;flex-shrink:0}
#noteModal .detail-header>div{min-width:0}
#noteModal .detail-header h2{font-size:24px;line-height:1.5;margin:5px 0 0}
#noteModal .detail-header .reader-meta{font-size:11px;color:var(--muted)}
#noteModal .detail-header>.icon-button{flex-shrink:0;margin-left:-9px}
#noteModal .detail-hati{width:21px;height:23px;display:block}
#noteModal .detail-hati svg{width:100%;height:100%}
#noteModal .detail-hati [fill=white]{fill:var(--bg)}
#noteModal .detail-hati [stroke=white]{stroke:var(--bg)}
#noteModal #detail-media{padding:0 28px 18px;flex-shrink:0}
#noteModal .detail-audio-row{display:flex;align-items:center;gap:12px}
#noteModal .detail-audio-row .card-audio{flex:1;margin:0}
#noteModal .detail-audio-tools{display:flex;align-items:center;gap:0}
#noteModal .detail-audio-tools .plain{direction:ltr;min-width:44px;justify-content:center}
#noteModal .detail-image-strip{display:flex;gap:8px;overflow:auto;margin-top:12px;padding:2px;scrollbar-width:none}
#noteModal .detail-image-strip:only-child{margin:0}
#noteModal .detail-image-strip button{flex:0 0 76px;height:66px;padding:0;position:relative;border-radius:calc(var(--radius)*.65);overflow:hidden}
#noteModal .detail-image-strip img{width:100%;height:100%;object-fit:cover;display:block}
#noteModal .detail-image-strip span{position:absolute;left:4px;bottom:4px;background:#25202bbd;color:#fff;min-width:18px;font-size:10px}
#noteModal .detail-tabs{display:flex;gap:28px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:0 28px;flex-shrink:0;background:var(--bg)}
#noteModal .detail-tabs button{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;min-height:52px;font-size:14px;padding:0 4px;color:var(--muted)}
#noteModal .detail-tabs button[aria-selected=true]{font-weight:700;color:var(--action)}
#noteModal .detail-tabs button[aria-selected=true]:after{content:'';position:absolute;bottom:-1px;right:0;left:0;height:3px;background:var(--action)}
#noteModal .detail-scroll{padding:24px 28px 20px;overflow:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:none}
#noteModal .detail-preview-hint{font-size:11px!important;color:var(--muted);line-height:1.8!important;border-top:1px solid var(--rule);margin:24px 0 0!important;padding-top:14px}
#noteModal .source-block{padding:20px;background:var(--surface);border-radius:var(--radius);margin-bottom:16px}
#noteModal .detail-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
#noteModal .detail-section-head h3{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;line-height:1.6;margin:0}
#noteModal .detail-section-head h3 svg{width:18px;height:18px;color:var(--art)}
#noteModal .source-status{display:flex;align-items:center;gap:5px;font-size:10px;white-space:nowrap;color:var(--muted)}
#noteModal .source-status svg{width:12px;height:12px}
#noteModal .source-text{white-space:pre-line;font-size:14px;line-height:2.1;margin:0}
#noteModal .source-empty{color:var(--muted);font-size:13px;line-height:1.9}
#noteModal .source-edit-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
#noteModal .source-edit-actions .plain{font-size:12px;padding:0 6px}
#noteModal .source-edit-actions svg{width:15px;height:15px}
#noteModal .source-note{font-size:11px;line-height:1.8;color:var(--muted);margin-top:12px}
#noteModal .source-editor textarea{width:100%;resize:vertical;background:var(--field);border:1px solid var(--rule);border-radius:calc(var(--radius)*.6);font:inherit;font-size:14px;line-height:1.9;color:var(--fg);padding:12px;min-height:150px}
#noteModal .source-editor>div{display:flex;gap:12px;margin-top:12px}
#noteModal .source-editor .primary{font-size:12px}
#noteModal .timed-transcript{margin-top:18px;border-top:1px solid var(--rule);padding-top:8px}
#noteModal summary{cursor:pointer;min-height:44px;align-content:center;font-size:12px;color:var(--muted)}
#noteModal summary:focus-visible{outline:none;background:var(--hover)}
#noteModal .transcript-line{display:flex;width:100%;text-align:left;align-items:start;gap:12px;font-size:12px;line-height:1.8;padding:12px 0;border-bottom:1px solid var(--rule);direction:ltr}
#noteModal .transcript-line time{color:var(--action);font-size:11px;flex-shrink:0}
#noteModal .transcript-line span{flex:1}
#noteModal .transcript-line svg{width:16px;height:16px}
#noteModal .detail-section{margin:25px 0}
#noteModal .detail-section p{font-size:14px;line-height:2;margin:0}
#noteModal .detail-section h4{font-size:15px;margin:0 0 8px}
#noteModal .linked-list{border-top:1px solid var(--rule)}
#noteModal .linked-row{display:flex;width:100%;gap:12px;align-items:center;text-align:start;padding:12px 0;border-bottom:1px solid var(--rule)}
#noteModal .linked-row>span:nth-child(2){flex:1}
#noteModal .linked-row strong{font-weight:500;font-size:14px}
#noteModal .linked-row small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
#noteModal .linked-check{width:18px;height:18px;display:grid;place-items:center;border:1px solid var(--muted);border-radius:calc(var(--radius)*.3)}
#noteModal .linked-check svg{width:14px;height:14px;opacity:0}
#noteModal .linked-row[aria-pressed=true] .linked-check{background:var(--action);color:var(--on-action);border-color:var(--action)}
#noteModal .linked-row[aria-pressed=true] .linked-check svg{opacity:1}
#noteModal .linked-row[aria-pressed=true] strong{text-decoration:line-through;color:var(--muted)}
#noteModal .linked-row>svg{color:var(--muted);width:17px;height:17px}
#noteModal .hati-subtabs{display:flex;gap:6px;margin:-4px 0 20px}
#noteModal .hati-subtabs button{font-size:12px;padding:0 16px;min-height:44px;border-radius:calc(var(--radius)*.65);color:var(--muted)}
#noteModal .hati-subtabs [aria-selected=true]{background:var(--quiet);color:var(--action);font-weight:600}
#noteModal .hati-overview{background:var(--surface);padding:20px;border-radius:var(--radius)}
#noteModal .hati-kicker{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:12px}
#noteModal .hati-kicker small{font-size:11px}
#noteModal .hati-overview h3{font-size:18px;margin:0 0 8px}
#noteModal .hati-overview>p{font-size:15px;line-height:2}
#noteModal .hati-trust{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--rule);margin-top:16px;padding-top:10px;font-size:10px;color:var(--muted)}
#noteModal .hati-trust .plain{padding:0;font-size:11px;white-space:nowrap}
#noteModal .hati-trust svg{width:15px;height:15px}
#noteModal .detail-evidence{margin-top:6px}
#noteModal .detail-evidence summary{font-size:11px;min-height:34px}
#noteModal .detail-evidence blockquote{border-right:2px solid var(--art);padding:3px 12px;margin:0 0 12px;font-size:12px;line-height:1.9;color:var(--muted)}
#noteModal .detail-topics{display:flex;flex-wrap:wrap;gap:8px}
#noteModal .detail-topics span{background:var(--surface);border-radius:calc(var(--radius)*.65);padding:5px 12px;font-size:12px;color:var(--muted)}
#noteModal .captured-time{display:flex;gap:20px;border-right:2px solid var(--art);padding-right:14px}
#noteModal .captured-time time{font-size:12px;white-space:nowrap;color:var(--action)}
#noteModal .grounded-point{display:flex;gap:12px}
#noteModal .grounded-point>span{font-size:12px;color:var(--art);padding-top:4px}
#noteModal .suggested-folder{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
#noteModal .suggested-folder>div{display:flex;align-items:center;gap:14px}
#noteModal .suggested-folder small{display:block;color:var(--muted);font-size:11px}
#noteModal .suggested-folder strong{font-size:15px;font-weight:600}
#noteModal .suggested-folder p{font-size:11px;color:var(--muted)}
#noteModal .suggested-folder>.plain{white-space:nowrap;font-size:12px}
#noteModal .thinking-card{padding:18px;background:var(--surface);border-radius:var(--radius)}
#noteModal .related-note{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;text-align:start;padding:16px 0;border-bottom:1px solid var(--rule)}
#noteModal .related-note strong{font-size:15px;font-weight:600}
#noteModal .related-note small{display:block;font-size:11px;color:var(--muted);margin:4px 0}
#noteModal .related-note p{font-size:12px;color:var(--muted)}
#noteModal .suggestion-intro{font-size:12px;color:var(--muted);margin-bottom:20px}
#noteModal .detail-suggestion{display:flex;gap:14px;align-items:start;border-bottom:1px solid var(--rule);padding-bottom:12px}
#noteModal .detail-suggestion>.suggestion-icon{flex-shrink:0}
#noteModal .detail-suggestion h3{font-size:16px;margin:0 0 6px}
#noteModal .detail-suggestion p{font-size:13px;line-height:1.9}
#noteModal .detail-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#noteModal .detail-action-grid .primary{font-size:13px}
#noteModal .secondary-action{display:flex;justify-content:center;align-items:center;gap:8px;border:1px solid var(--rule);border-radius:var(--radius);font-size:13px;padding:0 12px;min-height:46px}
#noteModal .detail-more{border-top:1px solid var(--rule);padding-top:8px}
#noteModal .detail-more summary{display:flex;align-items:center;justify-content:space-between;list-style:none}
#noteModal .detail-more summary::-webkit-details-marker{display:none}
#noteModal .detail-more[open] summary svg{transform:rotate(180deg)}
#noteModal .more-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
#noteModal .more-action-grid .plain{justify-content:flex-start}
#noteModal .more-action-grid .danger-action{color:var(--danger)}
@media(max-width:600px){#noteModal .note-detail.reader{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;margin:0}
#noteModal .detail-header{padding:18px 18px 14px}
#noteModal .detail-header h2{font-size:20px;line-height:1.6;margin-top:4px}
#noteModal .detail-header .reader-meta{font-size:10px}
#noteModal .detail-header>.icon-button{margin-left:-5px}
#noteModal .detail-tabs{padding:0 18px;gap:22px}
#noteModal .detail-tabs button{font-size:13px;min-height:49px}
#noteModal .detail-hati{width:19px;height:21px}
#noteModal .detail-scroll{padding:18px 16px calc(22px + env(safe-area-inset-bottom))}
#noteModal #detail-media{padding:0 16px 14px}
#noteModal .detail-audio-row{gap:4px}
#noteModal .detail-audio-tools{flex-direction:column}
#noteModal .detail-audio-tools .plain,#noteModal .detail-audio-tools .icon-button{height:36px;min-height:36px}
#noteModal .detail-audio-row .card-audio{padding:8px 10px}
#noteModal .detail-image-strip button{height:58px;flex-basis:68px}
#noteModal .source-block{padding:16px;margin-bottom:12px}
#noteModal .source-text{font-size:13px;line-height:2}
#noteModal .detail-section-head{gap:8px}
#noteModal .detail-section-head h3{font-size:14px}
#noteModal .source-status{font-size:9px}
#noteModal .hati-overview{padding:16px}
#noteModal .hati-overview>p{font-size:14px}
#noteModal .hati-trust{align-items:flex-start}
#noteModal .hati-trust>span{padding-top:9px}
#noteModal .detail-action-grid{gap:8px}
#noteModal .detail-action-grid .primary,#noteModal .secondary-action{font-size:12px;padding:0 8px}
#noteModal .suggested-folder{gap:10px}
#noteModal .suggested-folder>div{gap:8px}
#noteModal .suggested-folder p{max-width:190px}
#noteModal .more-action-grid{gap:4px}
#noteModal .more-action-grid .plain{font-size:12px}
#noteModal .image-viewer{max-height:92dvh}
}
#noteModal .note-detail.reader{width:min(740px,calc(100vw - 64px))}
#noteModal .source-block{background:none;border-radius:0;padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid var(--rule)}
#noteModal .source-block:last-child{border-bottom:0;margin-bottom:0}
#noteModal .source-status{display:none}
#noteModal .source-block .detail-section-head{margin-bottom:10px}
#noteModal .source-block .detail-section-head h3{font-size:12px;color:var(--muted);font-weight:500}
#noteModal .source-block .detail-section-head h3 svg{display:none}
#noteModal .source-edit-actions{justify-content:flex-start;margin:6px 0 0}
#noteModal .source-text{font-size:15px;line-height:2.1}
#noteModal .detail-disclosure{border-bottom:1px solid var(--rule)}
#noteModal .detail-disclosure>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;font-size:14px;color:var(--fg);min-height:56px;gap:16px}
#noteModal .detail-disclosure>summary::-webkit-details-marker{display:none}
#noteModal .detail-disclosure>summary svg{width:16px;height:16px;color:var(--muted)}
#noteModal .detail-disclosure[open]>summary svg{transform:rotate(180deg)}
#noteModal .detail-disclosure>.source-block{padding:8px 0 18px;border:0}
#noteModal .detail-disclosure .detail-section:first-of-type{margin-top:12px}
#noteModal .detail-disclosure .detail-section-head h3{font-size:13px}
#noteModal .add-note-text{margin-bottom:20px}
#noteModal .add-note-text summary{color:var(--muted);font-size:12px;min-height:44px}
#noteModal .hati-simple-intro{padding:0 0 16px}
#noteModal .hati-simple-intro>p{font-size:16px;line-height:2.1;margin:0 0 8px}
#noteModal .hati-simple-intro>.plain{padding:0;font-size:12px;color:var(--muted)}
#noteModal .hati-simple-intro>.plain svg{width:14px;height:14px}
#noteModal .detail-preview-hint{border:0;margin-top:24px!important;padding-top:0;font-size:10px!important}
#noteModal .site-audio.card-audio{display:flex;align-items:center;justify-content:space-between;gap:10px;direction:ltr;margin-top:17px;padding:8px 12px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
#noteModal .site-audio .audio-left,#noteModal .site-audio .audio-right{display:flex;align-items:center;gap:10px;direction:ltr}
#noteModal .site-audio .audio-left{flex:none}
#noteModal .site-audio .audio-right{flex:1;min-width:0;justify-content:flex-end}
#noteModal .site-audio .audio-play{width:32px;height:32px;min-height:32px;flex-basis:32px}
#noteModal .site-audio .audio-play svg{width:14px;height:14px}
#noteModal .site-audio time{font-size:11px;white-space:nowrap;min-width:32px;text-align:center;color:var(--muted);direction:ltr;font-variant-numeric:tabular-nums}
#noteModal .site-audio .audio-track{height:32px;max-width:360px;min-width:0;flex:1}
#noteModal .site-audio .audio-progress-line{position:absolute;top:14px;left:0;right:0;height:4px;background:var(--rule)}
#noteModal .site-audio .played-wave{height:100%;opacity:1;background:var(--action)}
#noteModal .site-audio .played-wave:after{content:'';position:absolute;right:-6px;top:-4px;width:12px;height:12px;background:var(--action)}
#noteModal .site-audio .audio-speed,#noteModal .site-audio .audio-download{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:32px;flex:none;padding:0;color:var(--muted)}
#noteModal .site-audio .audio-speed{font-size:10px}
#noteModal .site-audio .audio-speed,#noteModal .site-audio .audio-download{border:1px solid var(--rule);border-radius:calc(var(--radius)*.4)}
#noteModal .site-audio .audio-download svg{width:16px;height:16px}
#noteModal .site-audio .audio-speed:hover,#noteModal .site-audio .audio-download:hover{color:var(--action)}
#noteModal #detail-media>.site-audio{margin:0}
#noteModal .note-card .site-audio{gap:6px;padding:8px}
#noteModal .note-card .site-audio .audio-left,#noteModal .note-card .site-audio .audio-right{gap:6px}
#noteModal .note-card .site-audio time{font-size:10px;min-width:26px}
@media(max-width:600px){#noteModal .note-detail.reader{width:100%;max-width:100%}
#noteModal .site-audio.card-audio{gap:6px;padding:8px 10px}
#noteModal .site-audio .audio-left,#noteModal .site-audio .audio-right{gap:6px}
#noteModal .site-audio .audio-track{max-width:none}
#noteModal .source-text{font-size:14px}
#noteModal .hati-simple-intro>p{font-size:15px}
#noteModal .detail-disclosure>summary{font-size:13px}
#noteModal .source-block{padding:0 0 16px}
}
#noteModal[data-page="note"],#noteModal[data-page="chat"],#noteModal[data-page="plans"],#noteModal[data-page="reminders"]{padding-bottom:0}
#noteModal:not([data-page="library"])>.mobile-nav,#noteModal:not([data-page="library"])>.review{display:none}
#noteModal .note-page,#noteModal .linked-page{width:min(920px,calc(100% - 80px));margin:0 auto;padding:24px 0 116px;min-height:calc(100svh - 76px)}
#noteModal .note-back{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;min-height:44px;text-decoration:none}
#noteModal .note-back svg{width:16px;height:16px}
#noteModal .note-back:hover{color:var(--action)}
#noteModal .note-page .detail-header{padding:24px 0 30px;align-items:center;gap:32px}
#noteModal .note-page .reader-meta{display:flex;align-items:center;gap:18px;font-size:12px;color:var(--muted)}
#noteModal .reader-meta>span{display:flex;align-items:center;gap:7px}
#noteModal .reader-meta svg{width:15px;height:15px}
#noteModal .note-page .detail-header h1{font-size:clamp(28px,3.5vw,42px);font-weight:800;line-height:1.6;letter-spacing:-.6px;margin:12px 0 0}
#noteModal .note-page .detail-header h1:focus{outline:none}
#noteModal .note-page-mark{background:var(--surface);border-radius:var(--radius);padding:22px;color:var(--art);flex:none}
#noteModal .note-page-mark svg{width:38px;height:38px;display:block}
#noteModal .note-page #detail-media{padding:0 0 28px}
#noteModal .note-page .detail-image-strip{gap:10px;margin-top:18px}
#noteModal .note-page .detail-image-strip button{height:94px;flex-basis:120px}
#noteModal .note-page .detail-tabs{padding:0;gap:32px;border-top:0}
#noteModal .note-page .detail-tabs button{font-size:15px;min-height:56px}
#noteModal .note-page .detail-scroll{padding:28px 0 0;overflow:visible}
#noteModal .note-page .source-text{font-size:16px;line-height:2.15}
#noteModal .note-page .source-block{margin-bottom:24px;padding-bottom:24px}
#noteModal .note-page .detail-section-head h3{font-size:13px}
#noteModal .note-page .source-edit-actions{margin-top:10px;justify-content:flex-start}
#noteModal .note-page .timed-transcript{margin-top:12px}
#noteModal .detail-disclosure>summary>span{display:flex;align-items:center;gap:10px}
#noteModal .detail-disclosure>summary>span svg{color:var(--art);width:18px;height:18px}
#noteModal .detail-disclosure[open]>summary>span svg{transform:none}
#noteModal .detail-disclosure>summary{min-height:64px;font-size:15px}
#noteModal .add-note-text>summary{font-size:13px;color:var(--muted)}
#noteModal .site-audio .audio-track{max-width:none}
#noteModal .site-audio .audio-counter{min-width:36px;font-size:12px}
#noteModal .note-page .site-audio{padding:12px 16px;gap:14px;background:var(--surface)}
#noteModal .note-page .site-audio .audio-right{gap:14px}
#noteModal .note-page .site-audio .audio-play{width:40px;height:40px;flex-basis:40px}
#noteModal .note-page .site-audio .audio-track{height:40px}
#noteModal .note-page .audio-progress-line{top:18px}
#noteModal .note-page .site-audio .audio-speed,#noteModal .note-page .site-audio .audio-download{width:40px;height:40px}
#noteModal .site-audio .audio-right{justify-content:flex-start}
#noteModal .site-audio .audio-track{flex:1}
#noteModal .note-actionbar{position:fixed;z-index:15;bottom:0;left:0;right:0;background:var(--bg);border-top:1px solid var(--rule);display:flex;justify-content:center;align-items:center;gap:28px;padding:12px 24px calc(12px + env(safe-area-inset-bottom))}
#noteModal .note-actionbar .plain{font-size:12px;min-height:44px;padding:0 14px;gap:8px}
#noteModal .note-actionbar svg{width:18px;height:18px}
#noteModal .note-actionbar .danger-action{color:var(--danger)}
#noteModal .note-actionbar .plain:hover{background:var(--surface)}
#noteModal .note-page .detail-suggestion{background:var(--surface);border:0;border-radius:var(--radius);padding:28px;gap:18px}
#noteModal .detail-suggestion h3{font-size:22px;line-height:1.6}
#noteModal .detail-suggestion p{font-size:15px;line-height:2;margin:8px 0 24px}
#noteModal .suggestion-chat{font-size:14px;min-height:46px;padding:0 20px}
#noteModal .related-type-icon{color:var(--art);background:var(--surface);width:40px;height:40px;display:grid;place-items:center;border-radius:calc(var(--radius)*.6);flex-shrink:0}
#noteModal .related-type-icon svg{width:20px;height:20px}
#noteModal .linked-row{text-decoration:none;color:var(--fg)}
#noteModal .linked-row>span:nth-child(2){flex:1;min-width:0}
#noteModal .linked-row strong{display:block;line-height:1.7}
#noteModal .linked-row:hover{background:var(--surface)}
#noteModal .linked-row:hover .related-type-icon{background:var(--quiet)}
#noteModal .linked-list{border-top:0}
#noteModal .all-related .linked-row:last-child{border-bottom:0}
#noteModal .linked-page{width:min(820px,calc(100% - 80px))}
#noteModal .destination-heading{margin:28px 0}
#noteModal .destination-kicker{font-size:12px;color:var(--art)}
#noteModal .destination-heading h1{font-size:36px;line-height:1.6;font-weight:800;margin:8px 0}
#noteModal .destination-heading>p{font-size:15px;color:var(--muted)}
#noteModal .context-note{display:flex;align-items:center;gap:14px;text-decoration:none;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0;color:var(--fg)}
#noteModal .context-note>div{flex:1}
#noteModal .context-note small{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
#noteModal .context-note strong{font-size:14px;font-weight:600}
#noteModal .context-note svg{width:20px;height:20px;color:var(--art)}
#noteModal .chat-messages{margin:32px 0 24px}
#noteModal .chat-message{display:flex;gap:16px;margin:20px 0}
#noteModal .chat-avatar{width:32px;height:32px;flex:none;color:var(--action)}
#noteModal .chat-avatar svg{width:32px;height:32px}
#noteModal .chat-avatar [fill=white]{fill:var(--bg)}
#noteModal .chat-avatar [stroke=white]{stroke:var(--bg)}
#noteModal .chat-message small{font-size:12px;font-weight:600}
#noteModal .chat-message p{font-size:16px;line-height:2;margin:8px 0}
#noteModal .chat-message blockquote{border-right:2px solid var(--art);color:var(--muted);font-size:14px;line-height:2;margin:20px 0;padding:0 18px}
#noteModal .user-message{background:var(--surface);border-radius:var(--radius);padding:8px 20px;max-width:85%;margin-right:auto}
#noteModal .context-chat-form{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:var(--radius);padding:12px 16px}
#noteModal .context-chat-form textarea{flex:1;min-width:0;resize:vertical;border:0;background:none;color:var(--fg);font:inherit;font-size:14px;line-height:1.8;padding:8px}
#noteModal .context-chat-form .primary{width:44px;padding:0;flex:none}
#noteModal .destination-surface{margin-top:28px;background:var(--surface);border-radius:var(--radius);padding:28px}
#noteModal .plan-progress-label{display:flex;justify-content:space-between;font-size:14px}
#noteModal .destination-surface progress{width:100%;height:5px;accent-color:var(--action);margin-top:18px}
#noteModal .destination-steps{padding:0 22px;line-height:3;font-size:15px}
#noteModal .destination-steps .done{color:var(--muted);text-decoration:line-through}
#noteModal .destination-steps .selected{color:var(--action);font-weight:700}
#noteModal .reminder-destination{display:flex;align-items:start;gap:24px}
#noteModal .destination-icon svg{width:34px;height:34px;color:var(--action)}
#noteModal .reminder-destination h2{font-size:24px;margin:0 0 12px}
#noteModal .reminder-destination p{font-size:15px;line-height:2}
#noteModal .toast{z-index:100!important;bottom:92px!important}
@media(max-width:600px){#noteModal .note-page,#noteModal .linked-page{width:100%;padding:16px 20px 100px;min-height:calc(100dvh - 64px)}
#noteModal .note-page .detail-header{padding:18px 0 22px;gap:12px}
#noteModal .note-page .detail-header h1{font-size:27px;line-height:1.65;margin-top:10px}
#noteModal .note-page-mark{display:none}
#noteModal .note-page .reader-meta{font-size:11px;gap:14px}
#noteModal .note-page #detail-media{padding-bottom:18px}
#noteModal .note-page .site-audio{padding:8px 10px;gap:8px}
#noteModal .note-page .site-audio .audio-right{gap:6px}
#noteModal .note-page .site-audio .audio-play{width:32px;height:32px;flex-basis:32px}
#noteModal .note-page .site-audio .audio-track{height:32px}
#noteModal .note-page .audio-progress-line{top:14px}
#noteModal .note-page .site-audio .audio-speed,#noteModal .note-page .site-audio .audio-download{width:32px;height:32px}
#noteModal .note-page .site-audio .audio-counter{min-width:32px;font-size:11px}
#noteModal .note-page .detail-tabs{gap:22px}
#noteModal .note-page .detail-tabs button{font-size:13px;min-height:52px}
#noteModal .note-page .detail-scroll{padding:20px 0 0}
#noteModal .note-page .source-text{font-size:14px}
#noteModal .detail-disclosure>summary{font-size:13px;gap:12px}
#noteModal .detail-disclosure>summary>span{gap:8px}
#noteModal .detail-disclosure>summary>svg{flex-shrink:0}
#noteModal .add-note-text>summary{font-size:12px}
#noteModal .note-actionbar{gap:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom));justify-content:space-between}
#noteModal .note-actionbar .plain{flex:1;flex-direction:column;justify-content:center;gap:5px;padding:4px 2px;font-size:10px;min-height:56px;white-space:nowrap}
#noteModal .note-actionbar svg{width:18px;height:18px}
#noteModal .note-page .detail-suggestion{padding:20px;gap:12px}
#noteModal .detail-suggestion h3{font-size:18px}
#noteModal .detail-suggestion p{font-size:14px;margin-bottom:20px}
#noteModal .suggestion-chat{font-size:13px;padding:0 14px}
#noteModal .note-page .detail-image-strip button{height:76px;flex-basis:94px}
#noteModal .linked-row strong{font-size:13px}
#noteModal .related-type-icon{width:34px;height:34px}
#noteModal .destination-heading{margin:20px 0}
#noteModal .destination-heading h1{font-size:28px}
#noteModal .chat-message p{font-size:14px}
#noteModal .chat-message{gap:12px}
#noteModal .chat-message blockquote{font-size:13px}
#noteModal .destination-surface{padding:20px}
#noteModal .destination-steps{font-size:13px}
#noteModal .reminder-destination{gap:14px}
#noteModal .reminder-destination h2{font-size:20px}
#noteModal .context-chat-form{gap:8px;padding:8px}
}
#noteModal>.sidebar{position:fixed;top:76px;right:0;bottom:0;z-index:30;box-shadow:-12px 0 32px #0001}
@media(max-width:600px){#noteModal>.sidebar{top:64px}
}
#noteModal .note-shell{display:grid;grid-template-columns:238px minmax(0,1fr);gap:36px;direction:ltr;max-width:1480px;margin:0 auto;padding:24px 36px 110px;align-items:start;min-height:calc(100svh - 76px)}
#noteModal .note-shell>*{direction:rtl;min-width:0}
#noteModal .note-shell .note-page,#noteModal .note-shell .linked-page{grid-column:2;width:100%;margin:0;padding:0;min-height:0}
#noteModal .note-shell .note-page .detail-header{padding:20px 0 24px;gap:16px}
#noteModal .note-shell .note-page .detail-header h1{font-size:clamp(26px,2.8vw,38px)}
#noteModal .note-shell .note-page-mark{padding:16px}
#noteModal .note-shell .note-page-mark svg{width:30px;height:30px}
#noteModal .note-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
#noteModal .note-browser-toggle{font-size:11px;gap:7px;padding:0 8px}
#noteModal .note-browser-toggle svg{width:16px;height:16px}
#noteModal .note-shell .note-page #detail-media{padding-bottom:20px}
#noteModal .note-shell .note-page .detail-image-strip{margin-top:12px}
#noteModal .note-shell .note-page .detail-image-strip button{height:58px;flex-basis:76px}
#noteModal .note-shell .note-page .detail-scroll{padding-top:22px}
#noteModal .note-shell .note-page .detail-tabs{gap:26px}
#noteModal .note-browser{grid-column:1;grid-row:1;position:sticky;top:24px;border-right:1px solid var(--rule);padding-right:20px;max-height:calc(100svh - 130px);display:flex;flex-direction:column}
#noteModal .note-browser-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px}
#noteModal .note-browser-head h2{font-size:15px;font-weight:700;display:flex;align-items:center;gap:10px}
#noteModal .note-browser-head h2 span{font-size:11px;color:var(--muted);font-weight:400}
#noteModal .note-browser-head .icon-button{width:32px;min-height:36px;height:36px}
#noteModal .note-browser-head svg{width:14px;height:14px}
#noteModal .note-browser-search{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface);border-radius:calc(var(--radius)*.6);margin-bottom:12px}
#noteModal .note-browser-search svg{width:14px;height:14px;color:var(--muted)}
#noteModal .note-browser-search input{width:100%;min-width:0;min-height:28px;background:none;border:0;color:var(--fg);font:inherit;font-size:12px;outline:none}
#noteModal .note-browser-list{overflow:auto;scrollbar-width:none;padding:3px;min-height:0}
#noteModal .note-browser-item{display:block;padding:13px 12px;margin:0 0 6px;border-radius:var(--radius);border:1px solid transparent}
#noteModal .note-browser-meta{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);margin-bottom:6px}
#noteModal .note-browser-meta svg{width:13px;height:13px}
#noteModal .note-browser-item strong{display:block;font-size:13px;font-weight:600;line-height:1.7}
#noteModal .note-browser-title-row>small{font-size:10px;display:block;margin-top:5px;color:var(--muted)}
#noteModal .note-browser-item:hover{background:var(--surface)}
#noteModal .note-browser-item[aria-current=page]{background:var(--surface);border-color:var(--rule);box-shadow:none}
#noteModal .browser-no-results{font-size:12px;color:var(--muted);padding:18px 10px}
#noteModal .rail-collapsed{grid-template-columns:minmax(0,1fr);max-width:1040px}
#noteModal .rail-collapsed .note-browser{display:none}
#noteModal .rail-collapsed .note-page{grid-column:1}
#noteModal .note-shell>.sidebar{position:sticky;top:24px;bottom:auto;grid-column:3;grid-row:1;width:190px;height:calc(100svh - 140px);min-height:0;border:0;border-left:1px solid var(--rule);background:none;padding:0 0 0 16px;box-shadow:none;z-index:auto}
#noteModal .note-shell:has(>.sidebar:not([hidden])){grid-template-columns:220px minmax(0,1fr) 190px;gap:28px}
#noteModal .note-shell.rail-collapsed:has(>.sidebar:not([hidden])){grid-template-columns:minmax(0,1fr) 190px;max-width:1480px}
#noteModal .note-shell.rail-collapsed>.sidebar{grid-column:2}
#noteModal .note-shell .sidebar .nav-item{font-size:13px;padding:0 10px}
#noteModal .note-shell .sidebar .nav-item svg{width:18px;height:18px}
#noteModal[data-unused] .note-shell{grid-template-columns:minmax(0,1fr);max-width:1040px}
#noteModal[data-unused] .note-browser{display:none}
#noteModal[data-unused] .note-shell .linked-page{grid-column:1}
#noteModal[data-unused] .note-shell:has(>.sidebar:not([hidden])){grid-template-columns:minmax(0,1fr) 190px;max-width:1300px}
#noteModal[data-unused] .note-shell>.sidebar{grid-column:2}
#noteModal .understanding-label{display:flex;gap:9px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:14px}
#noteModal .understanding-label .detail-hati{width:22px;height:22px;color:var(--action)}
#noteModal .understanding-label small{margin-right:auto;font-size:10px}
#noteModal .hati-simple-intro>p{font-size:16px;line-height:2.15}
#noteModal .hati-simple-intro{padding-bottom:16px}
#noteModal .hati-simple-intro>.plain{margin-top:12px}
#noteModal .understanding-sources{padding:0 0 12px}
#noteModal .understanding-source{display:flex;align-items:start;gap:12px;width:100%;text-align:start;border-top:1px solid var(--rule);padding:15px 0}
#noteModal .understanding-source>span:nth-child(2){flex:1;min-width:0}
#noteModal .understanding-source strong{font-size:12px;font-weight:600}
#noteModal .understanding-source q{display:block;font-size:13px;line-height:1.9;margin-top:5px}
#noteModal .understanding-source q[dir=ltr]{text-align:left}
#noteModal .understanding-source small{display:block;font-size:11px;color:var(--muted);line-height:1.8;margin-top:4px}
#noteModal .understanding-source>svg{width:15px;height:15px;color:var(--muted);margin-top:5px}
#noteModal .provenance-icon{color:var(--art);padding-top:3px}
#noteModal .provenance-icon svg{width:17px;height:17px}
#noteModal .activity-group{margin-bottom:26px}
#noteModal .activity-group>h3{font-size:12px;font-weight:500;color:var(--muted);margin:0 0 12px}
#noteModal .activity-row{display:flex;align-items:start;gap:14px;padding:18px 0;border-bottom:1px solid var(--rule)}
#noteModal .activity-row>div{flex:1;min-width:0}
#noteModal .activity-row h4{font-size:16px;font-weight:600;margin:0 0 5px;line-height:1.8}
#noteModal .activity-row p{font-size:12px;color:var(--muted);line-height:1.9;margin:0}
#noteModal .activity-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:calc(var(--radius)*.6);background:var(--surface);color:var(--action)}
#noteModal .activity-icon svg{width:18px;height:18px}
#noteModal .activity-status{display:flex;align-items:center;gap:5px;color:var(--action);font-size:10px;margin-bottom:6px}
#noteModal .activity-status svg{width:12px;height:12px}
#noteModal .activity-row>.plain{font-size:12px;color:var(--action);min-height:40px}
#noteModal .activity-cta{color:var(--action);font-size:12px;padding:0;min-height:40px;margin-top:8px}
#noteModal .activity-cta svg{width:15px;height:15px}
@media(min-width:901px) and (max-width:1280px){#noteModal .note-shell:has(>.sidebar:not([hidden])){grid-template-columns:minmax(0,1fr) 190px}
#noteModal .note-shell:has(>.sidebar:not([hidden])) .note-browser{display:none}
#noteModal .note-shell:has(>.sidebar:not([hidden])) .note-page{grid-column:1}
#noteModal .note-shell:has(>.sidebar:not([hidden]))>.sidebar{grid-column:2}
}
@media(max-width:900px){#noteModal .note-shell,#noteModal .note-shell:has(>.sidebar:not([hidden])),#noteModal .note-shell.rail-collapsed:has(>.sidebar:not([hidden])){display:flex;flex-direction:column;width:100%;padding:20px 28px 110px;gap:20px}
#noteModal .note-browser{display:none;width:100%;position:static;max-height:350px;border:1px solid var(--rule);padding:16px;border-radius:var(--radius);order:1}
#noteModal .rail-mobile-open .note-browser{display:flex}
#noteModal .note-shell .note-page,#noteModal .note-shell .linked-page{order:2;width:100%}
#noteModal .note-shell>.sidebar{order:0;position:static;width:100%;height:auto;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;border:0;border-bottom:1px solid var(--rule);padding:0 0 18px}
#noteModal .note-shell>.sidebar .nav-bottom{margin:0}
#noteModal .note-shell .note-page .detail-header h1{font-size:32px}
#noteModal .note-browser-toggle{font-size:12px}
#noteModal .note-shell .note-page-mark{display:none}
}
@media(max-width:600px){#noteModal .note-shell,#noteModal .note-shell:has(>.sidebar:not([hidden])){padding:14px 20px 100px;gap:16px}
#noteModal .note-shell .note-page .detail-header h1{font-size:27px}
#noteModal .note-toolbar{gap:8px}
#noteModal .note-browser-toggle{font-size:10px;padding:0}
#noteModal .note-back{font-size:12px}
#noteModal .note-shell .note-page .detail-tabs{gap:22px}
#noteModal .note-shell .note-page .detail-scroll{padding-top:20px}
#noteModal .hati-simple-intro>p{font-size:14px}
#noteModal .understanding-label{font-size:11px;gap:7px}
#noteModal .understanding-label small{font-size:10px}
#noteModal .activity-row{gap:10px}
#noteModal .activity-row h4{font-size:14px}
#noteModal .activity-row p{font-size:12px}
#noteModal .activity-icon{width:30px;height:30px}
#noteModal .activity-icon svg{width:16px;height:16px}
#noteModal .understanding-source{gap:9px}
#noteModal .note-shell>.sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}
#noteModal .note-shell>.sidebar .nav-item{font-size:12px}
#noteModal .note-browser-head{margin-bottom:8px}
}
@media(max-width:600px){#noteModal .menu-button{display:grid!important}
#noteModal .mobile-settings{display:none}
#noteModal .note-shell>.sidebar:not([hidden]){display:grid!important}
}
#noteModal .note-image-gallery{display:grid;gap:10px;margin:0 0 28px;grid-template-columns:repeat(2,minmax(0,1fr))}
#noteModal .note-image-gallery.single{display:flex;justify-content:flex-start}
#noteModal .note-image-tile{padding:0;position:relative;overflow:hidden;border-radius:var(--radius);background:transparent;min-width:0;text-align:start}
#noteModal .note-image-tile img{display:block;width:100%;height:180px;object-fit:cover;transition:transform .2s}
#noteModal .note-image-gallery.single .note-image-tile{max-width:100%;width:420px}
#noteModal .note-image-gallery.single img{height:auto;max-height:290px;width:100%;object-fit:cover}
#noteModal .note-image-tile:hover img{transform:scale(1.025)}
#noteModal .image-tile-caption{display:block;font-size:11px;color:var(--muted);padding:9px 3px;line-height:1.7}
#noteModal .note-image-gallery.multiple .note-image-tile{background:var(--surface)}
#noteModal .note-image-gallery.multiple .image-tile-caption{padding:8px 12px}
#noteModal .note-browser-item[aria-current=page] strong{font-weight:800}
#noteModal .note-browser-item[aria-current=page]{border-color:color-mix(in srgb,var(--muted) 30%,transparent)}
#noteModal .image-viewer{width:fit-content;max-width:calc(100vw - 32px);padding:18px;max-height:94svh}
#noteModal .image-viewer .dialog-heading{gap:24px;margin-bottom:10px}
#noteModal .image-viewer .dialog-heading h2{font-size:15px}
#noteModal .image-viewer figure{margin:0;display:grid;justify-items:center}
#noteModal .image-viewer figure img{width:auto;height:auto;max-width:min(860px,calc(100vw - 72px));max-height:60svh;object-fit:contain;background:transparent;border-radius:calc(var(--radius)*.5)}
#noteModal .image-viewer figcaption{max-width:100%;padding:10px 0;font-size:11px}
#noteModal .gallery-thumbnails{display:flex;justify-content:center;gap:8px;padding:8px 3px;max-width:100%;overflow:auto}
#noteModal .gallery-thumbnail{padding:3px;width:80px;height:60px;flex:0 0 80px;border:1px solid transparent;border-radius:7px;opacity:.55}
#noteModal .gallery-thumbnail img{width:100%;height:100%;object-fit:cover;border-radius:4px}
#noteModal .gallery-thumbnail[aria-pressed=true]{opacity:1;border-color:var(--fg)}
#noteModal .gallery-thumbnail:hover{opacity:1}
#noteModal .gallery-controls{margin:0}
#noteModal .gallery-controls .icon-button{width:40px;height:40px;min-height:40px}
@media(max-width:600px){#noteModal .note-image-gallery{gap:8px;margin-bottom:20px}
#noteModal .note-image-tile img{height:120px}
#noteModal .note-image-gallery.single .note-image-tile{width:100%}
#noteModal .note-image-gallery.single img{max-height:none}
#noteModal .image-tile-caption{font-size:10px}
#noteModal .image-viewer{padding:12px;max-width:calc(100vw - 20px)}
#noteModal .image-viewer figure img{max-width:calc(100vw - 48px);max-height:54svh}
#noteModal .gallery-thumbnail{width:62px;flex-basis:62px;height:48px}
#noteModal .image-viewer .dialog-heading h2{font-size:13px}
}
@media(prefers-reduced-motion:reduce){#noteModal .note-image-tile img{transition:none}
}
#noteModal #image-viewer{inset:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:0;background:var(--bg);overflow:hidden}
#noteModal #image-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
#noteModal #image-viewer .dialog-heading{margin:0;padding:16px 28px;border-bottom:1px solid var(--rule)}
#noteModal #image-viewer .dialog-heading small{font-size:11px;color:var(--muted)}
#noteModal #image-viewer .dialog-heading h2{max-width:100%;font-size:17px}
#noteModal .gallery-workspace{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);min-height:0;overflow:auto}
#noteModal .gallery-workspace figure{grid-column:2;grid-row:1;min-width:0;min-height:0;margin:0;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
#noteModal #image-viewer figure img{width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 275px);object-fit:contain;background:none;border-radius:8px}
#noteModal #image-viewer figcaption{padding:0;font-size:12px}
#noteModal .gallery-description{grid-column:1;grid-row:1;padding:28px 24px;border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:12px}
#noteModal .gallery-description label{font-weight:600;font-size:14px}
#noteModal .gallery-description p{font-size:12px;color:var(--muted);line-height:1.9}
#noteModal .gallery-description textarea{width:100%;min-height:150px;resize:vertical;border:1px solid var(--rule);background:var(--surface);border-radius:var(--radius);color:var(--fg);font:inherit;font-size:14px;padding:12px;line-height:1.9}
#noteModal .gallery-description textarea:focus{outline:none;box-shadow:none}
#noteModal #image-description-status{font-size:11px;color:var(--muted);min-height:20px}
#noteModal .gallery-description .image-context-hint{border-top:1px solid var(--rule);padding-top:16px;font-size:11px}
#noteModal .gallery-footer{padding:12px 24px 18px;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:24px}
#noteModal .gallery-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#noteModal .gallery-actions .plain{min-height:44px;cursor:pointer}
#noteModal .gallery-actions .primary{font-size:13px}
#noteModal .gallery-actions svg{width:18px;height:18px}
#noteModal .gallery-footer .gallery-thumbnails{justify-content:flex-start;padding:4px;min-width:0}
#noteModal .chat-image-context{margin:24px 0;max-width:380px}
#noteModal .chat-image-context img{width:100%;max-height:280px;object-fit:contain;border-radius:var(--radius)}
#noteModal .chat-image-context figcaption{font-size:12px;color:var(--muted);margin-top:8px}
@media(max-width:700px){#noteModal #image-viewer .dialog-heading{padding:12px 16px}
#noteModal #image-viewer .dialog-heading h2{font-size:14px}
#noteModal .gallery-workspace{display:flex;flex-direction:column}
#noteModal .gallery-workspace figure{padding:16px;flex:none}
#noteModal #image-viewer figure img{max-height:38dvh;max-width:100%}
#noteModal .gallery-description{padding:16px;border:0;border-top:1px solid var(--rule);gap:8px}
#noteModal .gallery-description textarea{min-height:90px;resize:none}
#noteModal .gallery-description .image-context-hint{border:0;padding:0}
#noteModal .gallery-footer{padding:8px 12px max(10px,env(safe-area-inset-bottom));gap:6px;flex-direction:column;align-items:stretch}
#noteModal .gallery-footer .gallery-thumbnails{justify-content:center}
#noteModal .gallery-actions{justify-content:center;gap:4px}
#noteModal .gallery-actions .plain{font-size:11px;padding:0 8px}
#noteModal .gallery-actions .primary{font-size:11px;padding:0 10px;height:42px}
#noteModal .gallery-actions svg{width:15px;height:15px}
#noteModal .gallery-footer .gallery-thumbnail{height:42px;width:56px;flex-basis:56px}
}
#noteModal .note-photo-row{--photo-height:180px;--photo-action-width:72px;display:grid;grid-template-columns:var(--photo-action-width);gap:10px;margin-bottom:28px;min-width:0}
#noteModal .note-photo-row.has-photos{grid-template-columns:repeat(var(--visible-photos),minmax(0,1fr)) var(--photo-action-width)}
#noteModal .note-photo-row.has-more{grid-template-columns:repeat(var(--visible-photos),minmax(0,1fr)) var(--photo-action-width) var(--photo-action-width)}
#noteModal .note-photo-row .note-image-tile,#noteModal .note-photo-row .add-photo-card,#noteModal .note-photo-row .all-photos-card{height:var(--photo-height);min-width:0;border-radius:var(--radius);overflow:hidden}
#noteModal .note-photo-row .note-image-tile{position:relative}
#noteModal .note-photo-row .note-image-tile img{width:100%;height:100%;object-fit:cover}
#noteModal .note-photo-row .image-tile-caption{position:absolute;bottom:0;right:0;left:0;margin:0;padding:22px 10px 9px;color:#fff;background:linear-gradient(transparent,#18141ccc);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#noteModal .add-photo-card,#noteModal .all-photos-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8px;background:var(--surface);border:1px dashed var(--rule);color:var(--muted);font-size:11px}
#noteModal .add-photo-card svg{width:26px;height:26px;color:var(--art)}
#noteModal .all-photos-card{border-style:solid;background:transparent;color:var(--action)}
#noteModal .all-photos-card span{font-size:10px;color:var(--muted)}
#noteModal .all-photos-card svg{width:18px;height:18px}
#noteModal .add-photo-card:hover,#noteModal .all-photos-card:hover{background:var(--quiet);border-color:var(--art)}
@media(max-width:600px){#noteModal .note-photo-row{--photo-height:120px;--photo-action-width:52px;margin-bottom:20px}
#noteModal .note-photo-row .image-tile-caption{font-size:10px}
#noteModal .add-photo-card,#noteModal .all-photos-card{font-size:10px;padding:5px;gap:6px}
#noteModal .add-photo-card svg{width:22px;height:22px}
}
#noteModal .note-photo-row{gap:var(--photo-gap,8px);margin-bottom:22px}
#noteModal .note-photo-row .add-photo-card{width:var(--photo-height);height:var(--photo-height);aspect-ratio:1;padding:6px;gap:5px}
#noteModal .note-photo-row .add-photo-card svg{width:24px;height:24px}
#noteModal .note-photo-row .add-photo-card span{font-size:10px;white-space:nowrap}
#noteModal .note-photo-row .all-photos-card{gap:4px;padding:5px;font-size:11px}
#noteModal .note-photo-row .all-photos-card svg{display:none}
#noteModal .note-photo-row .image-tile-caption{font-size:10px;padding:16px 7px 5px}
@media(max-width:600px){#noteModal .note-photo-row{margin-bottom:18px}
#noteModal .note-photo-row .add-photo-card span:not(.theme-icon),#noteModal .note-photo-row .image-tile-caption{display:none}
#noteModal .note-photo-row .add-photo-card svg{width:22px;height:22px}
#noteModal .note-photo-row .all-photos-card{font-size:9px;gap:1px;padding:2px}
#noteModal .note-photo-row .all-photos-card span{font-size:9px}
}
#noteModal .gallery-description>p:first-of-type{margin-top:-8px;min-height:46.59px}
#noteModal .gallery-description .image-context-hint{border-top:0;padding-top:0}
#noteModal #image-description-save{align-self:flex-start;min-width:86px;animation:image-save-in 180ms cubic-bezier(.2,.8,.2,1)}
@keyframes image-save-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
html[dir=rtl] #noteModal .gallery-actions{margin-right:auto;margin-left:0;justify-content:flex-start}
#noteModal .note-photo-section{margin-bottom:22px}
#noteModal .note-photo-section .note-photo-row{margin-bottom:0}
#noteModal .note-photo-section .note-photo-row.has-more{grid-template-columns:repeat(var(--visible-photos),minmax(0,1fr)) var(--photo-action-width)}
#noteModal .note-photo-section>.all-photos-card{height:auto;min-height:44px;width:max-content;display:flex;flex-direction:row;border:0;background:none;border-radius:var(--radius);padding:0 2px;gap:8px;margin-top:4px;font-size:12px}
#noteModal .note-photo-section>.all-photos-card svg{display:block;width:15px;height:15px}
#noteModal .note-photo-section>.all-photos-card span{font-size:11px}
#noteModal .note-photo-section>.all-photos-card:hover{background:var(--surface)}
@media(max-width:700px){html[dir=rtl] #noteModal .gallery-actions{align-self:flex-end}
#noteModal .gallery-description>p:first-of-type{min-height:0}
}
@media(max-width:600px){#noteModal .note-photo-section{margin-bottom:18px}
#noteModal .note-photo-section>.all-photos-card{font-size:11px}
}
@media(prefers-reduced-motion:reduce){#noteModal #image-description-save{animation:none}
}
#noteModal #image-viewer[open]{grid-template-columns:minmax(0,1fr)}
#noteModal #image-viewer>.gallery-workspace,#noteModal #image-viewer>.gallery-footer{min-width:0;max-width:100%}
#noteModal .gallery-footer .gallery-thumbnails{max-width:100%}
@media(max-width:700px){#noteModal .gallery-footer .gallery-thumbnails{justify-content:flex-start}
#noteModal .gallery-actions{max-width:100%}
}
#noteModal .folder-manager-row{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--rule)}
#noteModal #folder-list .folder-manager-row .folder-filter{flex:1;min-width:0;border:0}
#noteModal .folder-manager-row .icon-button{flex:none;width:40px}
#noteModal .folder-manager-row svg{width:17px;height:17px}
#noteModal .folder-manager-row .folder-count{margin-inline-start:auto}
#noteModal .note-options{position:fixed;inset:auto;margin:0;width:230px;max-height:calc(100dvh - 24px);overflow:auto;padding:8px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--bg);color:var(--fg);box-shadow:0 12px 45px #0002;direction:rtl}
#noteModal .note-options[open]{animation:image-save-in 150ms ease-out}
#noteModal .note-options button{display:flex;gap:12px;align-items:center;text-align:start;width:100%;padding:9px 12px;border-radius:calc(var(--radius)*.6);font-size:13px}
#noteModal .note-options svg{width:17px;height:17px}
#noteModal .note-options .danger-action{border-top:1px solid var(--rule);margin-top:5px}
#noteModal .note-more svg{width:18px;height:18px}
#noteModal #note-utility{width:min(430px,calc(100vw - 32px))}
#noteModal #utility-form{display:flex;flex-direction:column;gap:12px}
#noteModal #utility-form label{font-size:13px}
#noteModal #utility-form input,#noteModal .copy-fallback{font:inherit;color:var(--fg);background:var(--field);border:1px solid var(--rule);border-radius:var(--radius);padding:10px;width:100%}
#noteModal #utility-error{font-size:12px;color:var(--danger,#b42318)}
#noteModal .copy-fallback{min-height:240px}
#noteModal .move-folder-list .folder-filter{width:100%}
#noteModal #preview-undo{position:fixed;bottom:96px;left:24px;z-index:120;display:flex;gap:16px;align-items:center;max-width:calc(100vw - 48px);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:var(--radius);font-size:12px}
#noteModal #preview-undo .plain{color:inherit;font-weight:700;white-space:nowrap}
#noteModal #folders-dialog:has(~ #preview-undo:not([hidden])){padding-bottom:26px}
@media(max-width:600px){#noteModal .note-card .note-more{display:none}
#noteModal .note-card,#noteModal .note-card .note-image,#noteModal .note-card .note-open{-webkit-touch-callout:none}
#noteModal .note-options{width:220px}
#noteModal .folder-manager-row .icon-button{width:38px}
#noteModal .note-actionbar .plain{font-size:10px}
#noteModal .note-options button{min-height:44px}
#noteModal #preview-undo{left:12px;max-width:calc(100vw - 24px)}
}
@media(prefers-reduced-motion:reduce){#noteModal .note-options[open]{animation:none}
}
#noteModal #folders-dialog #preview-undo{position:static;max-width:100%;margin-top:16px}
#noteModal .folder-manager-actions{display:flex;flex:none;align-items:center;gap:0;margin-inline-start:auto}
#noteModal .folder-manager-row .folder-manager-actions .icon-button{width:36px;height:44px;min-height:44px;padding:0}
#noteModal #folder-list .folder-manager-row .folder-filter{width:auto}
@media(max-width:600px){#noteModal .notes-grid:not(.list-view) .site-audio{display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-rows:20px;justify-content:start;align-items:center;gap:0 6px;padding:5px 7px;margin-top:12px}
#noteModal .notes-grid:not(.list-view) .site-audio .audio-left,#noteModal .notes-grid:not(.list-view) .site-audio .audio-right{display:contents}
#noteModal .notes-grid:not(.list-view) .site-audio .audio-counter{display:none}
#noteModal .notes-grid:not(.list-view) .site-audio .audio-play{grid-column:1;grid-row:1;align-self:center;width:20px;height:20px;min-height:20px;flex-basis:20px;padding:0;border-radius:5px}
#noteModal .notes-grid:not(.list-view) .site-audio .audio-play svg{width:12px;height:12px}
#noteModal .notes-grid:not(.list-view) .site-audio .audio-track{grid-column:2;grid-row:1;justify-self:start;width:100%;max-width:none;height:20px}
#noteModal .notes-grid:not(.list-view) .site-audio .audio-progress-line{top:8.5px;height:3px}
#noteModal .notes-grid:not(.list-view) .site-audio .played-wave:after{width:8px;height:8px;top:-2.5px;right:-4px}
#noteModal .notes-grid:not(.list-view) .site-audio .audio-speed,#noteModal .notes-grid:not(.list-view) .site-audio .audio-download{display:none}
#noteModal #folders-dialog{padding:20px}
#noteModal #folder-form{gap:8px}
#noteModal #folder-form .primary{width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 44px;aspect-ratio:1;padding:0;gap:0}
#noteModal #folder-form .primary span{display:none}
#noteModal #folder-form .primary svg{width:20px;height:20px}
#noteModal #folder-name{flex:1;width:auto;font-size:16px}
}
@media(max-width:700px){#noteModal .gallery-description textarea{box-sizing:border-box;font-size:16px;line-height:1.75;padding:8px 12px;height:calc(3.5em + 18px);min-height:calc(3.5em + 18px);max-height:calc(8.75em + 18px);overflow-y:hidden;resize:none}
}
@media(max-width:600px){#noteModal .folder-manager-row .folder-manager-actions .icon-button{width:28px;min-width:28px}
#noteModal .folder-manager-actions svg{transform:none}
}
#noteModal .note-options::backdrop,#noteModal #mobile-note-browser::backdrop{background:rgb(24 20 34 / 24%);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#noteModal:has(#note-options[open],#mobile-note-browser[open]){overflow:hidden}
#noteModal .mobile-note-back,#noteModal .mobile-notes-toggle{display:none}
#noteModal #mobile-note-browser{position:fixed;inset:0 auto 0 0;width:min(320px,calc(100vw - 48px));height:100dvh;max-height:100dvh;max-width:none;margin:0;padding:0;border:0;border-right:1px solid var(--rule);border-radius:0;background:var(--bg);color:var(--fg);overflow:hidden}
#noteModal #mobile-note-browser[open]{display:flex;animation:note-rail-in 220ms cubic-bezier(.2,.8,.2,1)}
#noteModal #mobile-note-browser .note-browser{display:flex;position:static;width:100%;height:100%;max-height:none;border:0;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));margin:0;direction:rtl;min-height:0}
#noteModal #mobile-note-browser .note-browser-search input{font-size:16px}
#noteModal #mobile-note-browser .note-browser-head .icon-button{width:44px;height:44px;min-height:44px}
#noteModal #mobile-note-browser .note-browser-list{flex:1;overscroll-behavior:contain}
#noteModal #mobile-note-browser::backdrop{animation:note-backdrop-in 180ms ease-out}
#noteModal #mobile-note-browser.is-closing{animation:note-rail-out 180ms ease-in forwards}
#noteModal #mobile-note-browser.is-closing::backdrop{animation:note-backdrop-out 180ms ease-in forwards}
@keyframes note-rail-in{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes note-rail-out{to{opacity:0;transform:translateX(-16px)}}
@keyframes note-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes note-backdrop-out{to{opacity:0}}
@media(max-width:600px){#noteModal[data-page=note] .topbar>.brand-menu,#noteModal[data-page=note] .topbar>.utilities,#noteModal[data-page=note] .note-toolbar,#noteModal[data-page=note] #note-shell>#navigation,#noteModal[data-page=note] #note-shell>#note-browser{display:none!important}
#noteModal[data-page=note] .topbar{justify-content:space-between;gap:10px;padding-inline:12px}
#noteModal[data-page=note] .mobile-note-back,#noteModal[data-page=note] .mobile-notes-toggle{display:flex;align-items:center;gap:5px;min-height:44px;padding:0;color:var(--fg);font-size:12px;white-space:nowrap}
#noteModal .mobile-note-back svg,#noteModal .mobile-notes-toggle svg{width:16px;height:16px;flex:none}
#noteModal .mobile-notes-toggle[aria-expanded=true]{color:var(--action)}
#noteModal[data-page=note] .note-shell{padding-top:4px}
}
@media(max-width:360px){#noteModal[data-page=note] .mobile-note-back,#noteModal[data-page=note] .mobile-notes-toggle{font-size:11px}
}
@media(prefers-reduced-motion:reduce){#noteModal #mobile-note-browser[open],#noteModal #mobile-note-browser::backdrop,#noteModal #mobile-note-browser.is-closing,#noteModal #mobile-note-browser.is-closing::backdrop{animation:none}
}
#noteModal #mobile-note-browser .note-browser-title-row{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:baseline;gap:10px}
#noteModal #mobile-note-browser .note-browser-title-row strong{min-width:0;overflow-wrap:anywhere}
#noteModal #mobile-note-browser .note-browser-title-row>small{margin:0;white-space:nowrap;text-align:left}
#noteModal .folder-rename-row{gap:10px;padding:6px 0;align-items:start}
#noteModal .folder-edit-icon{display:flex;align-items:center;height:44px;padding-inline:12px 0;color:var(--muted)}
#noteModal .folder-rename-field{flex:1;min-width:0}
#noteModal .folder-rename-input{width:100%;min-width:0;height:44px;padding:0 10px;font:inherit;font-size:14px;color:var(--fg);background:transparent;border:0;border-radius:0;box-shadow:none}
#noteModal .folder-rename-input:focus,#noteModal .folder-rename-input:focus-visible{outline:none;box-shadow:none}
#noteModal .folder-rename-error{display:block;color:var(--danger);font-size:11px;line-height:1.7;margin-top:6px}
#noteModal .folder-rename-submit.primary{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center}
#noteModal .folder-rename-submit svg{width:17px;height:17px}
@media(max-width:600px){#noteModal .folder-rename-input{font-size:16px}
#noteModal .folder-rename-row{gap:8px}
#noteModal .folder-edit-icon{padding-inline:0}
}
#noteModal.approved-note-page{inset:76px 0 0;background:var(--bg);padding:0;display:block;backdrop-filter:none;overflow:auto;z-index:44}
#noteModal .note-shell{max-width:1480px;width:100%;margin:auto;padding:24px 36px 110px;display:grid;grid-template-columns:238px minmax(0,1fr);gap:36px;direction:ltr;align-items:start;min-height:calc(100svh - 76px)}
#noteModal .note-shell>*{direction:rtl;min-width:0}
#noteModal .approved-note-reader{width:100%;grid-column:2;padding:0;max-height:none;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;display:flex;flex-direction:column}
#noteModal .detail-header{padding:20px 0 24px}
#noteModal #modalNoteTitle{font-size:clamp(26px,2.8vw,38px);font-weight:700;line-height:1.65;margin:10px 0 0}
#noteModal .reader-meta{font-size:12px;color:var(--muted)}
#noteModal #noteAudioSection{padding:0 0 20px;order:0}
#noteModal #notePhotoSection{padding:20px 0 0;order:2}
#noteModal #noteModalTabs{padding:0;background:none;gap:26px;border-top:0;border-bottom:1px solid var(--rule);order:1}
#noteModal #noteModalTabs button{font-size:14px;min-height:52px;letter-spacing:0;padding:0 4px;border-radius:0;border:0;background:none;color:var(--muted);position:relative}
#noteModal #noteModalTabs button.active{font-weight:700;color:var(--action);border-bottom:3px solid var(--action)}
#noteModal #modalBody{padding:22px 0 0;order:3;overflow:visible;font-size:14px;line-height:2.1;max-height:none}
#noteModal .note-photo-grid{display:flex;gap:10px;overflow:auto;scrollbar-width:none;padding:0;border:0}
#noteModal .note-photo-thumb{width:120px;height:100px;object-fit:cover;border-radius:var(--radius);flex:none;cursor:pointer}
#noteModal .source-block{padding:20px;border:0;background:var(--surface);border-radius:var(--radius);margin-bottom:16px}
#noteModal .source-text{font-size:14px;line-height:2.1;white-space:pre-line;margin:0}
#noteModal .source-edit-actions button{font-size:12px;min-height:44px;background:none;border:0;padding:0 6px;display:flex;gap:7px;align-items:center;color:var(--muted)}
#noteModal .source-text.editing{padding:12px;background:var(--quiet);border-radius:var(--radius);outline:none;box-shadow:0 0 12px color-mix(in srgb,var(--art) 5%,transparent)}
#noteModal .detail-disclosure{border-top:1px solid var(--rule);margin:16px 0}
#noteModal .detail-disclosure>summary{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-size:14px;color:var(--fg);min-height:56px;cursor:pointer;list-style:none}
#noteModal .detail-disclosure>summary>span{display:flex;align-items:center;gap:10px}
#noteModal .detail-disclosure>summary::-webkit-details-marker{display:none}
#noteModal .note-actionbar{z-index:46}
#noteModal .note-actionbar button{font-size:12px;min-height:44px;gap:8px;display:flex;align-items:center}
#noteModal .note-actionbar .danger{color:var(--danger)}
#noteModal .note-shell.rail-collapsed{grid-template-columns:minmax(0,1fr);max-width:1040px}
#noteModal .rail-collapsed .approved-note-reader{grid-column:1}
#noteModal .rail-collapsed .note-browser{display:none}
#noteModal .note-page-mark .theme-icon{width:30px;height:30px}
#noteModal .note-browser-head h2{font-size:15px}
#noteModal .note-browser-item{display:block;width:100%;text-align:start;background:none;border:0;border-bottom:1px solid var(--rule);padding:14px 10px;font:inherit;min-height:70px}
#noteModal .note-browser-item[aria-current=page]{background:var(--surface)}
#noteModal .hati-simple-intro{padding-bottom:16px}
#noteModal .hati-simple-intro>p{font-size:16px;line-height:2.15}
@media(max-width:900px){#noteModal .note-shell{display:flex;flex-direction:column;padding:20px 28px 110px;width:100%;gap:20px}#noteModal .note-browser{display:none;position:static;width:100%;max-height:350px;padding:16px;border:1px solid var(--rule);border-radius:var(--radius)}#noteModal .note-shell.rail-mobile-open .note-browser{display:flex}#noteModal .approved-note-reader{width:100%}}
@media(max-width:600px){#noteModal.approved-note-page{top:60px}#noteModal .note-shell{padding:14px 20px 100px;gap:16px}#noteModal #modalNoteTitle{font-size:27px}#noteModal .note-actionbar button{flex:1;flex-direction:column;gap:5px;font-size:10px;min-height:56px}#noteModal .hati-simple-intro>p{font-size:14px}#noteModal .note-page-mark{display:none}}

/* Native dialogs use the same spacing and surfaces as their approved previews. */
.approved-workspace-dialog{width:min(570px,calc(100vw - 32px));padding:28px;background:var(--bg);border:0;border-radius:var(--radius);color:var(--fg)}
.approved-workspace-dialog .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.approved-workspace-dialog .modal-header h2{font-size:22px;margin:0}
.approved-workspace-dialog .support-ticket-form{display:grid;gap:9px;padding:0;border:0;background:transparent}
.approved-workspace-dialog .support-ticket-form input,.approved-workspace-dialog .support-ticket-form select,.approved-workspace-dialog .support-ticket-form textarea{width:100%;background:var(--surface);padding:12px 14px;border:0;border-radius:var(--radius);font:inherit;color:var(--fg)}
.approved-workspace-dialog .support-ticket-form label{font-size:13px;margin-top:7px}
.approved-workspace-dialog .support-form-actions,.approved-workspace-dialog .actions{display:flex;flex-direction:row;justify-content:flex-start;gap:10px;margin-top:20px}
.approved-workspace-dialog .primary,.approved-workspace-dialog .primary-btn{min-width:140px}
.approved-checkout-total{display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-bottom:1px solid var(--rule)}
#noteModal .source-edit-form textarea{display:block;width:100%;min-height:130px;background:var(--bg);color:var(--fg);font:inherit;padding:13px;border:0;border-radius:var(--radius);resize:vertical}
#noteModal .source-edit-form .actions{display:flex;justify-content:flex-start;gap:10px;margin-top:14px}
#noteModal .source-edit-form .primary{min-width:120px}
#noteModal .understanding-detail{padding:16px 0;border-top:1px solid var(--rule)}
#noteModal .understanding-detail h3{font-size:14px;margin:0 0 10px}
#noteModal .understanding-detail small{display:block;color:var(--muted);font-size:12px}
#view-settings .option-set{display:inline-flex;gap:4px;padding:4px;background:var(--surface);border-radius:var(--radius)}
#view-settings .option-set .plain{min-width:75px}
#view-settings .option-set [aria-pressed="true"]{background:var(--action);color:var(--on-action)}
@media(max-width:600px){.approved-workspace-dialog{padding:22px}.approved-workspace-dialog .modal-header h2{font-size:20px}}

/* Approved HATI components wired to the live conversation controller. */
#view-chat [hidden]{display:none!important}
#view-chat.active{height:100%;overflow:hidden}
#view-chat{display:flex;flex-direction:column}
#view-chat input,#view-chat textarea{font:inherit;color:var(--fg);background:transparent;min-width:0}
#view-chat input:focus,#view-chat textarea:focus,#view-chat button:focus,#view-chat select:focus,#view-chat a:focus{outline:none;box-shadow:none}
#view-chat button:focus-visible,#view-chat a:focus-visible{background:var(--hover);filter:brightness(.88)}
#view-chat textarea{resize:none;border:0}
#view-chat input{border:0}
#view-chat button:disabled{opacity:.38}
#view-chat button,#view-chat a{touch-action:manipulation}
#view-chat button{transition:background .18s,opacity .18s,transform .18s}
#view-chat small,#view-chat .tiny{font-size:11px}
#view-chat .muted{color:var(--muted);font-size:13px}
#view-chat .topbar{height:76px;flex-shrink:0}
#view-chat.active{height:calc(100dvh - 76px);width:min(1040px,100%);margin:auto;display:flex;flex-direction:column;padding:0 40px}
#view-chat .hati-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0 19px;flex-shrink:0}
#view-chat .hati-title{display:flex;align-items:center;gap:12px;min-width:0}
#view-chat .hati-mark{color:var(--art)}
#view-chat .hati-mark svg{width:34px;height:34px}
#view-chat .hati-title h1{font-size:23px;line-height:1.3}
#view-chat .hati-title>div{min-width:0}
#view-chat .hati-title span:not(.hati-mark){font-size:12px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;max-width:360px}
#view-chat .hati-tools{display:flex;gap:4px}
#view-chat .hati-tools>.plain{margin-left:7px;background:var(--surface)}
#view-chat .chat-scroll{overflow:auto;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;overscroll-behavior:contain;padding:12px 0 28px}
#view-chat .welcome{border:0;padding:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;text-align:center}
#view-chat .welcome-heart{margin-bottom:0;color:var(--art)}
#view-chat .welcome-heart svg{display:block;width:68px;height:68px}
#view-chat .welcome-heart svg>path:first-child{stroke:currentColor;stroke-width:2.5;stroke-linejoin:round}
#view-chat .welcome-heart svg>path:last-child{stroke-width:6}
#view-chat .welcome h2{margin-top:-25px;font-size:36px;font-weight:800;letter-spacing:-.8px}
#view-chat .welcome>p{font-size:14px;color:var(--muted);margin:0 0 30px}
#view-chat .starter-list{display:flex;gap:10px;max-width:100%;flex-wrap:wrap;justify-content:center}
#view-chat .starter-list button{border-radius:var(--radius);background:var(--surface);padding:13px 16px;display:flex;align-items:center;gap:11px;font-size:13px}
#view-chat .starter-list button>svg:first-child{color:var(--art)}
#view-chat .starter-list button>svg:last-child{width:14px;height:14px;color:var(--muted)}
#view-chat .composer-wrap{flex-shrink:0;padding:8px 0 15px}
#view-chat .chat-composer{background:var(--surface);border-radius:var(--radius);padding:15px 17px 12px}
#view-chat .chat-composer>textarea{width:100%;min-height:37px;max-height:140px;padding:4px 2px;line-height:1.9;font-size:16px;display:block;overflow-y:auto}
#view-chat .composer-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}
#view-chat .composer-options,#view-chat .send-options{display:flex;align-items:center;gap:6px}
#view-chat .context-button{font-size:12px;gap:8px}
#view-chat .context-button svg{width:17px;height:17px}
#view-chat .context-button svg:last-child{width:12px}
#view-chat .send-button{width:40px;height:40px;min-height:40px;padding:0}
#view-chat .send-button svg{width:18px;height:18px}
#view-chat .composer-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:7px;color:var(--muted);font-size:10px}
#view-chat .composer-foot .plain{font-size:10px;min-height:26px;gap:5px}
#view-chat .composer-foot svg{width:12px;height:12px}
#view-chat .context-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
#view-chat .context-pill{display:flex;align-items:center;gap:7px;background:var(--surface);border-radius:var(--radius);padding:5px 9px;font-size:12px}
#view-chat .context-pill a{max-width:260px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#view-chat .context-pill button{min-height:26px;width:26px;display:grid;place-items:center}
#view-chat .context-pill svg{width:13px;height:13px}
#view-chat #chatMessages{max-width:800px;margin:auto}
#view-chat .chat-day{text-align:center;font-size:11px;color:var(--muted);margin:7px 0 28px}
#view-chat .chat-message{margin:0 0 30px;animation:arrive .24s ease-out}
#view-chat .chat-message.user{margin-right:0;margin-left:auto;max-width:76%;width:fit-content}
#view-chat .chat-message.user .chat-bubble{background:none;padding:0;border-radius:var(--radius)}
#view-chat .chat-message.assistant{width:90%;margin-right:auto;margin-left:0;padding-left:0}
#view-chat .approved-message-label{display:flex;align-items:center;gap:8px;color:var(--art);font-size:12px;margin-bottom:10px;font-weight:600}
#view-chat .approved-message-label svg{width:22px;height:22px}
#view-chat .bubble-content{font-size:16px;line-height:2;white-space:pre-wrap;overflow-wrap:anywhere}
#view-chat .msg-footer{display:flex;gap:1px;align-items:center;margin-top:8px;color:var(--muted)}
#view-chat .msg-footer button{min-height:30px;height:30px;width:30px;border-radius:var(--radius);display:grid;place-items:center}
#view-chat .msg-footer svg{width:14px;height:14px}
#view-chat .msg-footer time{font-size:10px;margin-left:12px}
#view-chat .msg-footer .version{font-size:10px;margin-inline-start:8px;display:flex;align-items:center;gap:3px;direction:ltr}
#view-chat .sources{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#view-chat .source{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:var(--radius);padding:9px 12px;font-size:12px}
#view-chat .source svg{width:16px;height:16px;color:var(--art)}
#view-chat .source small{display:block;color:var(--muted);font-size:10px}
#view-chat .chat-message-edit{width:100%;min-height:100px;background:var(--surface);padding:10px}
#view-chat .inline-actions{display:flex;gap:8px;margin-top:10px}
#view-chat .inline-actions button{min-height:36px;height:36px;font-size:12px}
#view-chat .action-card{background:var(--surface);border-radius:var(--radius);padding:20px;margin-top:18px;max-width:600px}
#view-chat .action-heading{display:flex;align-items:center;gap:10px;color:var(--art);font-size:12px;margin-bottom:12px}
#view-chat .action-card h3{font-size:17px;margin:0 0 8px}
#view-chat .action-card p{font-size:13px;color:var(--muted)}
#view-chat .action-card footer{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
#view-chat .action-card .primary{font-size:12px;min-height:38px;height:38px}
#view-chat .action-card label{display:block;color:var(--muted);font-size:11px;margin-top:13px}
#view-chat .action-card input,#view-chat .action-card textarea,#view-chat .action-card select{width:100%;background:var(--bg);border:0;border-radius:var(--radius);padding:9px 12px;margin-top:4px;font-size:14px}
#view-chat .action-card .two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#view-chat .plan-steps{padding:0;list-style:none;counter-reset:steps}
#view-chat .plan-steps li{display:flex;align-items:center;gap:10px;counter-increment:steps}
#view-chat .plan-steps li:before{content:counter(steps,persian);font-size:12px;color:var(--muted)}
#view-chat .quality{display:flex;gap:6px;margin-top:12px}
#view-chat .quality button{background:var(--bg);padding:0 15px;border-radius:var(--radius);font-size:12px}
#view-chat .quality button[aria-pressed=true]{background:var(--action);color:var(--on-action)}
#view-chat .receipt{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;flex-wrap:wrap;padding-top:12px}
#view-chat .receipt svg{width:16px;height:16px}
#view-chat .receipt button{min-height:30px;font-size:12px;text-decoration:underline}
#view-chat .chat-image{border-radius:var(--radius);padding:0;overflow:hidden;display:block;margin-top:12px;max-width:360px}
#view-chat .chat-image img{display:block;width:100%;max-height:250px;object-fit:cover}
#view-chat .document-chip{display:flex;gap:10px;align-items:center;padding:12px;background:var(--bg);border:1px solid var(--rule);border-radius:var(--radius);font-size:13px}
#view-chat .document-chip small{display:block;color:var(--muted)}
#view-chat .attachment-previews{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px}
#view-chat .attachment-preview{position:relative;flex-shrink:0;display:flex;align-items:center;gap:7px;border-radius:var(--radius);background:var(--bg);padding:7px;font-size:12px;max-width:230px}
#view-chat .attachment-preview img{width:50px;height:50px;object-fit:cover;border-radius:var(--radius)}
#view-chat .attachment-preview button{min-height:28px;width:28px}
#view-chat .attachment-preview button svg{width:14px;height:14px}
#view-chat .attachment-preview>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-chat .busy{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px}
#view-chat .busy span{width:4px;height:4px;background:var(--art);animation:thinking 1s infinite alternate}
#view-chat .busy span:nth-child(2){animation-delay:.2s}
#view-chat .busy span:nth-child(3){animation-delay:.4s}
#view-chat .error-message{color:var(--danger);font-size:13px;padding:15px;background:var(--surface);border-radius:var(--radius)}
#view-chat .h-dialog{background:var(--bg);color:var(--fg);border:1px solid var(--rule);border-radius:var(--radius);padding:24px;width:min(610px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain}
#view-chat .h-dialog[open]{animation:arrive .23s ease-out}
#view-chat .h-dialog::backdrop{background:#17131e55;backdrop-filter:blur(5px)}
#view-chat .h-dialog.closing{animation:leave .18s ease-in both}
#view-chat .h-dialog.closing::backdrop{opacity:0;transition:opacity .18s}
#view-chat .h-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}
#view-chat .h-dialog h2{font-size:21px}
#view-chat .h-dialog footer{display:flex;align-items:center;gap:12px;margin-top:24px}
#view-chat .h-dialog footer .primary{margin-inline-start:auto;order:2}
#view-chat .side-dialog{margin:0 auto 0 0;height:100dvh;max-height:100dvh;width:300px;max-width:90%;border-radius:0;border:0;border-right:1px solid var(--rule);padding:28px 22px}
#view-chat .side-dialog[open]{animation:slide-in .3s cubic-bezier(.2,.8,.2,1)}
#view-chat .side-dialog.closing{animation:slide-out .2s ease-in both}
#view-chat .nav-dialog{margin:0 0 0 auto}
#view-chat .nav-dialog[open]{animation:slide-right .3s ease-out}
#view-chat .search-field{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:var(--radius);padding:6px 12px;margin-bottom:15px}
#view-chat .search-field input{min-height:36px;width:100%;font-size:13px}
#view-chat .search-field svg{width:16px;height:16px;color:var(--muted)}
#view-chat .history-row{display:flex;align-items:center;gap:4px;padding:10px 9px;margin:6px 0;border-radius:var(--radius)}
#view-chat .history-row.current{background:var(--surface)}
#view-chat .history-row>.history-open{flex:1;min-width:0;text-align:start}
#view-chat .history-open strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:195px}
#view-chat .history-row small{color:var(--muted)}
#view-chat .history-row .icon-button{width:30px;min-height:36px;height:36px}
#view-chat .history-row svg{width:15px;height:15px}
#view-chat .history-row input{width:100%;background:transparent}
#view-chat .wide{width:100%;justify-content:center;margin-top:15px}
#view-chat .menu-row{display:flex;align-items:center;gap:13px;width:100%;min-height:50px;padding:12px;border-radius:var(--radius);text-align:start;font-size:14px}
#view-chat .menu-row:hover{background:var(--surface)}
#view-chat .menu-row small{color:var(--muted);margin-right:auto;direction:ltr}
#view-chat .small-dialog{max-width:430px}
#view-chat .context-mode{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;margin-bottom:12px}
#view-chat .note-choice{display:flex;align-items:center;gap:12px;padding:15px 9px;border-bottom:1px solid var(--rule);cursor:pointer}
#view-chat .note-choice input{accent-color:var(--action);width:17px;height:17px;flex-shrink:0}
#view-chat .note-choice span{font-size:14px}
#view-chat .note-choice small{display:block;color:var(--muted)}
#view-chat .memory-card{padding:18px;background:var(--surface);border-radius:var(--radius);margin:16px 0}
#view-chat .memory-card>div:first-child{display:flex;align-items:center;gap:6px}
#view-chat .memory-card .memory-title{font-weight:600;flex:1}
#view-chat .memory-card textarea{width:100%;line-height:1.9;font-size:14px;margin-top:8px;min-height:55px;field-sizing:content;max-height:180px}
#view-chat .memory-card .icon-button{width:32px;min-height:32px;height:32px}
#view-chat .memory-card svg{width:16px;height:16px}
#view-chat summary{cursor:pointer;color:var(--muted);font-size:12px;padding:10px 0}
#view-chat .memory-details{font-size:12px;color:var(--muted)}
#view-chat .memory-details label{display:flex;align-items:center;gap:8px;margin-top:8px}
#view-chat .memory-details input{background:var(--bg);border-radius:var(--radius);padding:8px;width:130px}
#view-chat .memory-add{display:flex;gap:8px;background:var(--surface);border-radius:var(--radius);padding:5px 10px}
#view-chat .memory-add input{flex:1}
#view-chat .memory-scopes{margin-top:15px;border-top:1px solid var(--rule)}
#view-chat .scope-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;padding:10px 0}
#view-chat .memory-scopes p{font-size:11px}
#view-chat .memory-conflict{color:var(--danger);font-size:12px}
#view-chat .image-dialog{width:min(1000px,calc(100% - 32px))}
#view-chat .image-dialog>img{width:100%;max-height:60dvh;object-fit:contain;background:var(--surface);border-radius:var(--radius)}
#view-chat .image-dialog>p{color:var(--muted);font-size:12px;margin-top:10px}
#view-chat #chatVoiceCapture{display:flex;align-items:center;gap:14px;height:58px}
#view-chat #chatVoiceCapture canvas{flex:1;width:0;height:40px}
#view-chat #chatVoiceCapture time{font-size:12px;color:var(--danger)}
#view-chat .voice-stop{background:var(--action);color:var(--on-action)}
#view-chat #chatVoiceErrorCard{font-size:12px;color:var(--muted);margin-top:10px}
#view-chat #chatVoiceErrorCard .plain{display:inline-flex;font-size:12px}
#view-chat .h-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:12px 22px;border-radius:var(--radius);z-index:20;max-width:90vw;font-size:13px}
#view-chat .empty-list{padding:30px 10px;text-align:center;color:var(--muted);font-size:13px}
#view-chat .example-links{margin:12px 0}
#view-chat .exact-hint{color:var(--muted);font-size:11px;margin-bottom:5px}
#view-chat button[aria-pressed=true]{font-weight:600}
html[data-skin=minimal] #view-chat .voice-stop,html[data-skin=minimal] #view-chat .send-button{border-radius:0}
@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes leave{to{opacity:0;transform:translateY(8px)}}
@keyframes slide-in{from{transform:translateX(-100%);opacity:.4}to{transform:translateX(0);opacity:1}}
@keyframes slide-out{to{transform:translateX(-100%);opacity:0}}
@keyframes slide-right{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes thinking{to{opacity:.3;transform:translateY(-3px)}}
@media(max-width:700px){#view-chat .topbar{height:60px;padding:0 16px}
#view-chat .brand{font-size:18px}
#view-chat .brand-menu{gap:5px}
#view-chat.active{height:calc(100dvh - 60px);padding:0 16px}
#view-chat .hati-head{padding:15px 0 13px;gap:8px}
#view-chat .hati-title h1{font-size:20px}
#view-chat .hati-title span:not(.hati-mark){max-width:155px;font-size:10px}
#view-chat .hati-mark{display:none}
#view-chat .hati-tools{gap:1px}
#view-chat .hati-tools .plain{padding:0 10px;margin-left:3px}
#view-chat .hati-tools .plain span{display:none}
#view-chat .hati-tools .icon-button{width:38px;height:40px;min-height:40px}
#view-chat .hati-tools svg{width:18px;height:18px}
#view-chat .welcome{min-height:100%;padding:16px 0}
#view-chat .welcome-heart{margin-bottom:0}
#view-chat .welcome-heart svg{width:56px;height:56px}
#view-chat .welcome h2{font-size:29px}
#view-chat .welcome>p{font-size:13px;margin-bottom:23px}
#view-chat .starter-list{flex-direction:column;gap:7px;width:min(300px,100%)}
#view-chat .starter-list button{padding:9px 13px;font-size:12px;min-height:44px}
#view-chat .starter-list button>svg:last-child{margin-right:auto}
#view-chat .chat-scroll{padding:10px 0 18px}
#view-chat .chat-message.user{max-width:88%}
#view-chat .chat-message.assistant{padding-left:0}
#view-chat .bubble-content{font-size:14px;line-height:1.95}
#view-chat .chat-message.user .chat-bubble{padding:0}
#view-chat .chat-message{margin-bottom:24px}
#view-chat .chat-day{margin:5px 0 20px}
#view-chat .source{font-size:11px;padding:8px 10px}
#view-chat .composer-wrap{padding:6px 0 max(8px,env(safe-area-inset-bottom))}
#view-chat .chat-composer{padding:11px 10px 9px}
#view-chat .chat-composer>textarea{font-size:15px;min-height:34px}
#view-chat .composer-bottom{margin-top:7px}
#view-chat .composer-options,#view-chat .send-options{gap:1px}
#view-chat .composer-options>.icon-button,#view-chat .send-options>.icon-button{width:36px;min-height:38px;height:38px}
#view-chat .context-button{padding:0 5px;font-size:11px;gap:6px}
#view-chat .context-button>svg:first-child{display:none}
#view-chat .send-button{width:36px;min-height:36px;height:36px}
#view-chat .composer-foot{flex-direction:row;align-items:center;justify-content:center;gap:8px}
#view-chat .composer-foot>span{font-size:9px;max-width:195px}
#view-chat .composer-foot .plain{font-size:9px;padding:0}
#view-chat .composer-foot .plain svg{display:none}
#view-chat .context-pill a{max-width:245px}
#view-chat .h-dialog{padding:18px;max-height:calc(100dvh - 24px)}
#view-chat .h-dialog h2{font-size:19px}
#view-chat .side-dialog{max-height:100dvh;height:100dvh;width:340px;padding:22px 18px}
#view-chat .h-dialog>header{margin-bottom:14px}
#view-chat .action-card{padding:15px;margin-top:15px}
#view-chat .action-card h3{font-size:15px}
#view-chat .action-card footer{gap:5px}
#view-chat .action-card footer .plain{font-size:11px;padding:0 8px}
#view-chat .action-card .two-col{gap:8px}
#view-chat .memory-card{padding:13px}
#view-chat .menu-row{font-size:13px;flex-wrap:wrap}
#view-chat .menu-row small{font-size:10px}
#view-chat .image-dialog footer{flex-wrap:wrap}
#view-chat .image-dialog footer .primary{margin-inline-start:0}
#view-chat #chatVoiceCapture{gap:8px}
#view-chat .attachment-preview{max-width:190px}
#view-chat .h-toast{bottom:18px;width:max-content}
}
@media(max-height:680px){#view-chat .welcome-heart{display:none}
#view-chat .welcome>p{margin-bottom:12px}
#view-chat .welcome h2{font-size:26px}
#view-chat .starter-list{flex-direction:row}
#view-chat .starter-list button{font-size:11px}
#view-chat .composer-foot>span{display:none}
}
@media(prefers-reduced-motion:reduce){#view-chat *,#view-chat *::before,#view-chat *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
#view-chat .calendar-top{display:flex;align-items:center;justify-content:space-between;font-size:12px}
#view-chat .calendar-top button{width:40px;display:grid;place-items:center}
#view-chat .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:3px;margin-top:14px}
#view-chat .calendar-grid button{border-radius:var(--radius);font-size:13px}
#view-chat .calendar-grid button:hover{background:var(--surface)}
#view-chat #chatInput:placeholder-shown{direction:rtl;text-align:start}
#view-chat .chat-message-link{color:var(--action);text-decoration:underline;text-underline-offset:4px}
#view-chat .bubble-content code{background:var(--surface);padding:2px 6px;font-size:13px;border-radius:var(--radius)}
#view-chat .shot .composer-foot{display:none}
#view-chat .shot .composer-wrap{padding-bottom:max(20px,env(safe-area-inset-bottom))}
#view-chat [data-do=older]{font-size:11px;min-height:30px;height:30px;margin-top:0!important;margin-bottom:12px!important}
#view-chat .assistant .bubble-content{white-space:normal}
#view-chat .bubble-content p+p{margin-top:14px}
#view-chat .bubble-content ul,#view-chat .bubble-content ol{padding-inline-start:23px;margin:12px 0}
#view-chat .bubble-content pre{direction:ltr;text-align:left;font-size:13px}
#view-chat .bubble-content pre code{white-space:pre}
#view-chat .bubble-content blockquote{font-size:14px}
#view-chat .bubble-content a{text-decoration:underline;text-underline-offset:3px}
#view-chat .hati-title{opacity:0;visibility:hidden;transform:translateY(9px);transition:opacity .3s ease,transform .3s ease,visibility .3s}
#view-chat .has-messages .hati-title{opacity:1;visibility:visible;transform:translateY(0)}
#view-chat .hati-tools{margin-right:auto}
#view-chat .composer-options{order:2;flex-direction:row-reverse}
#view-chat .send-options{order:1;flex-direction:row-reverse}
#view-chat .chat-composer{position:relative;transition:min-height .25s ease,padding .25s ease}
#view-chat .composer-wrap.is-recording #selectedNotePills,#view-chat .chat-composer.is-recording #chatAttachPreviewRow,#view-chat .chat-composer.is-recording .composer-options,#view-chat .chat-composer.is-recording [data-do=voice]{display:none!important}
#view-chat .chat-composer.is-recording .composer-bottom,#view-chat .chat-composer.is-recording .send-options{display:contents}
#view-chat .chat-composer.is-recording #chatSendBtn{position:absolute;right:17px;bottom:14px;transform:none}
#view-chat #chatVoiceCapture{height:40px;gap:14px;padding-right:52px;animation:arrive .25s ease-out}
#view-chat #chatVoiceCapture canvas{height:24px}
#view-chat #chatVoiceCapture .voice-stop{order:-1;flex-shrink:0;width:40px;height:40px;min-height:40px}
#view-chat .mobile-nav{display:none}
@media(max-width:700px){#view-chat .topbar [data-do=navigation],#view-chat #navigation-dialog{display:none!important}
#view-chat.active{height:calc(var(--hati-viewport,100dvh) - 60px - var(--mobile-nav-height))}
#view-chat .mobile-nav{position:fixed;inset:auto 0 max(0px,calc(100dvh - var(--hati-viewport,100dvh)));z-index:8;height:var(--mobile-nav-height);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:5px 8px calc(5px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--rule)}
#view-chat .mobile-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:56px;padding:0;font-size:11px;line-height:1.4;color:var(--muted);border-radius:var(--radius)}
#view-chat .mobile-nav-icon{width:44px;height:30px;display:grid;place-items:center;border-radius:0}
#view-chat .mobile-nav-icon svg{width:21px;height:21px}
#view-chat .mobile-nav-item.active{color:var(--fg);font-weight:700}
#view-chat .mobile-nav-item.active .mobile-nav-icon{background:var(--quiet);color:var(--action)}
html[data-theme="pro"] #view-chat .mobile-nav-icon{border-radius:9px}
#view-chat .mobile-nav-icon [fill=white]{fill:var(--bg)}
#view-chat .mobile-nav-icon [stroke=white]{stroke:var(--bg)}
#view-chat .welcome-heart{margin-bottom:0}
#view-chat .welcome>p{margin-top:-8px}
#view-chat .starter-list{width:min(320px,100%)}
#view-chat .starter-list button{font-size:12px}
#view-chat .shot .composer-wrap{padding-bottom:12px}
#view-chat .chat-message.assistant{width:94%}
#view-chat .chat-composer.is-recording #chatSendBtn{right:10px;bottom:13px}
#view-chat #chatVoiceCapture{padding-right:46px;gap:9px;height:36px}
#view-chat #chatVoiceCapture .voice-stop{width:36px;height:36px;min-height:36px}
#view-chat .h-toast{bottom:calc(var(--mobile-nav-height) + 12px)}
}
@media(prefers-reduced-motion:reduce){#view-chat .hati-title,#view-chat .chat-composer{transition:none!important}
#view-chat #chatVoiceCapture{animation:none!important}
}
#view-chat{margin:0 auto;flex-shrink:0}
#view-chat .voice-stop:focus-visible,#view-chat .send-button:focus-visible{background:var(--action);filter:brightness(.88)}
#view-chat .chat-composer.is-recording{padding-top:12px;padding-bottom:14px}
#view-chat .chat-composer.is-processing #chatVoiceCapture{padding-left:0}
#view-chat #voice-processing{flex:1;min-width:0;font-size:13px;justify-content:flex-start}
#view-chat .chat-composer.is-recording #chatVoiceErrorCard{display:none}
#view-chat #chatVoiceErrorCard:empty{display:none}
@media(max-width:700px){#view-chat .chat-composer.is-recording{padding-top:9px;padding-bottom:13px}
#view-chat #voice-processing{font-size:12px;gap:5px}
}
#view-chat .attachment-control{position:relative;flex-shrink:0}
#view-chat .attachment-menu{position:absolute;bottom:calc(100% + 8px);left:0;z-index:12;width:232px;max-width:calc(100vw - 32px);padding:6px;background:var(--bg);color:var(--fg);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:0 8px 26px #0002;animation:arrive .18s ease-out;transform-origin:bottom left}
#view-chat .attachment-menu>button{display:flex;align-items:center;gap:11px;width:100%;min-height:44px;padding:10px 12px;border-radius:var(--radius);text-align:start;font-size:13px}
#view-chat .attachment-menu>button:hover,#view-chat .attachment-menu>button:focus-visible{background:var(--surface)}
#view-chat .attachment-menu svg{width:18px;height:18px;flex-shrink:0;color:var(--art)}
#view-chat .attachment-menu small{display:block;direction:ltr;text-align:left;color:var(--muted);font-size:9px;margin-top:2px}
html[data-skin=minimal] #view-chat .attachment-menu{box-shadow:none}
@media(max-width:700px){#view-chat .attachment-control>.icon-button{width:36px;min-height:38px;height:38px}
#view-chat .attachment-menu{width:220px}
#view-chat .attachment-menu>button{min-height:44px}
}
#view-chat .memory-dialog{width:min(570px,calc(100% - 32px))}
#view-chat .memory-intro{font-size:14px;line-height:1.9;color:var(--muted);margin-bottom:23px}
#view-chat .memory-list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
#view-chat .memory-list-heading h3{margin:0;font-size:14px;font-weight:600}
#view-chat .memory-list-heading>span{font-size:11px;color:var(--muted)}
#view-chat .memory-dialog .memory-card{padding:16px;margin:12px 0;background:var(--surface)}
#view-chat .memory-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
#view-chat .memory-card h4{margin:0;font-size:14px;font-weight:600;overflow-wrap:anywhere}
#view-chat .memory-item-actions{display:flex;gap:2px;flex-shrink:0}
#view-chat .memory-dialog .memory-item-actions .icon-button{width:36px;height:36px;min-height:36px}
#view-chat .memory-content{font-size:14px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:6px}
#view-chat .memory-until{font-size:11px;color:var(--muted);margin-top:8px}
#view-chat .memory-dialog .memory-details summary{font-size:11px;padding:8px 0 0}
#view-chat .memory-details p{font-size:11px;color:var(--muted);margin-top:9px}
#view-chat .memory-dialog .memory-field{display:block;font-size:12px;color:var(--muted);margin-bottom:13px}
#view-chat .memory-dialog .memory-field input,#view-chat .memory-dialog .memory-field textarea{display:block;width:100%;margin-top:5px;background:var(--bg);padding:10px 12px;border-radius:var(--radius);color:var(--fg);font-weight:400;font-size:14px;min-height:44px;line-height:1.8}
#view-chat .memory-dialog .memory-field textarea{min-height:100px;max-height:220px;resize:vertical}
#view-chat .memory-dialog .memory-details label{display:block;font-size:11px;margin-top:12px}
#view-chat .memory-expiry-control{display:flex;align-items:center;gap:8px;margin-top:5px}
#view-chat .memory-dialog .memory-details input{width:145px;min-height:40px;margin:0}
#view-chat .memory-editor-actions{display:flex;align-items:center;gap:8px;margin-top:14px}
#view-chat .memory-editor-actions .primary{min-height:40px;font-size:13px}
#view-chat .memory-editor-actions .plain{font-size:12px}
#view-chat .memory-conflict{margin-top:10px}
#view-chat .memory-conflict:empty{display:none}
#view-chat .memory-add-button{font-size:13px;gap:8px;padding:0 5px;margin-top:2px;min-height:44px}
#view-chat .memory-add-button svg{width:16px;height:16px}
#view-chat #memory-status{font-size:12px;line-height:1.8;color:var(--muted);margin-top:8px}
#view-chat #memory-status:empty{display:none}
#view-chat #memory-status button{display:inline-flex;text-decoration:underline;font-size:12px;min-height:36px}
#view-chat .memory-learning{border-top:1px solid var(--rule);margin-top:22px;padding-top:10px}
#view-chat .memory-learning>summary{display:flex;align-items:center;gap:8px;font-size:13px;min-height:44px;padding:8px 0;color:var(--fg)}
#view-chat .memory-learning>summary:before{content:'+';font-size:17px;color:var(--muted)}
#view-chat .memory-learning[open]>summary:before{content:'−'}
#view-chat .memory-learning>summary span{margin-right:auto;font-size:11px;color:var(--muted)}
#view-chat .memory-learning p{font-size:12px;line-height:1.9;color:var(--muted)}
#view-chat .memory-learning .scope-row{padding:12px 0}
#view-chat .scope-row strong{font-size:12px;font-weight:600}
#view-chat .scope-row small{display:block;font-size:11px;color:var(--muted)}
#view-chat .scope-row .plain{font-size:11px;padding:0 8px;flex-shrink:0}
#view-chat .memory-learning-note{margin-top:8px}
#view-chat .memory-temporary{margin-top:10px}
#view-chat .memory-temporary summary{font-size:11px}
#view-chat .memory-empty{padding:25px 12px;font-size:14px;text-align:center}
#view-chat .memory-empty p{font-size:12px;line-height:1.9;color:var(--muted);margin-top:8px}
@media(max-width:700px){#view-chat .memory-dialog{padding:18px}
#view-chat .memory-intro{font-size:13px;margin-bottom:18px}
#view-chat .memory-dialog .memory-card{padding:13px}
#view-chat .memory-card-heading{gap:5px}
#view-chat .memory-dialog .memory-item-actions .icon-button{width:36px;min-height:44px;height:44px}
#view-chat .memory-item-actions{gap:0}
#view-chat .memory-card h4{margin:0;font-size:13px}
#view-chat .memory-content{font-size:13px}
#view-chat .memory-dialog .memory-field input,#view-chat .memory-dialog .memory-field textarea{font-size:16px}
#view-chat .memory-learning .scope-row{align-items:flex-start;gap:5px}
}
#view-chat #memory-dialog,#view-chat #memory-dialog *{scrollbar-width:none;-ms-overflow-style:none}
#view-chat #memory-dialog::-webkit-scrollbar,#view-chat #memory-dialog *::-webkit-scrollbar{display:none;width:0;height:0}
#view-chat .chat-composer.is-voice-error .composer-bottom{display:none}
#view-chat .chat-composer.is-voice-error #chatVoiceErrorCard{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin-top:10px;padding:8px 12px;min-height:60px;background:var(--quiet);border-radius:var(--radius);animation:arrive .25s ease-out}
#view-chat .voice-error-message{display:flex;align-items:center;gap:10px;min-width:0;font-size:13px;line-height:1.8;color:var(--fg)}
#view-chat .voice-error-message>svg{width:20px;height:20px;flex-shrink:0;color:var(--muted)}
#view-chat .voice-error-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
#view-chat .voice-error-actions .plain{font-size:13px;min-height:44px;gap:7px;color:var(--action)}
#view-chat .voice-error-actions .icon-button{width:44px;height:44px;min-height:44px;color:var(--muted)}
#view-chat .voice-error-actions .icon-button:hover{color:var(--fg)}
@media(max-width:700px){#view-chat .chat-composer.is-voice-error #chatVoiceErrorCard{flex-wrap:wrap;gap:3px;padding:9px 10px}
#view-chat .voice-error-message{width:100%;font-size:12px;gap:8px}
#view-chat .voice-error-actions{margin-inline-start:auto}
#view-chat .voice-error-actions .plain{font-size:12px}
}
@media(prefers-reduced-motion:reduce){#view-chat .chat-composer.is-voice-error #chatVoiceErrorCard{animation:none}
}
#view-chat .h-dialog footer:has(>.primary){justify-content:flex-start;flex-wrap:nowrap}
#view-chat .h-dialog footer:has(>.primary)>.primary{order:-1;margin-inline-start:0;flex:1;justify-content:center}
#view-chat .h-dialog footer:has(>.primary)>button:not(.primary){min-width:80px;justify-content:center}

#view-chat{padding:0 40px;width:min(1040px,100%);margin:auto;flex-direction:column}
#view-chat.active{display:flex;height:calc(100dvh - 76px);min-height:0}
#view-chat .chat-layout{padding:0;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
#view-chat .chat-messages{width:100%;max-width:800px;overflow-y:auto;flex:1;min-height:0;padding:12px 0 28px;overscroll-behavior:contain}
#view-chat .chat-welcome{flex:1;min-height:0;padding:20px 0;justify-content:center}
#view-chat .chat-layout:not(.chat-empty) .chat-welcome{display:none}
#view-chat .chat-empty .chat-messages{display:none}
#view-chat .chat-input-area{position:relative;bottom:auto;margin:0;flex-shrink:0;background:transparent;padding:8px 0 20px;border:0;width:100%}
#view-chat .chat-input-row{display:block;grid-template:none;border:0;box-shadow:none}
#view-chat #chatInput{background:none;border:0;box-shadow:none;width:100%;font:inherit;font-size:16px;line-height:1.9;min-height:38px;max-height:140px;padding:4px 2px}
#view-chat .chat-sep{display:none}
#view-chat .chat-context-row{display:flex;align-items:center;gap:6px;min-width:0}
#view-chat .context-btn{background:transparent;border:0;color:var(--muted);font:inherit;font-size:12px;padding:0 7px}
#view-chat .composer-bottom .icon-button,#view-chat .chat-mic-btn{border:0;background:transparent;box-shadow:none;width:40px;min-height:40px;padding:10px;color:var(--fg)}
#view-chat .chat-message{display:block;border:0}
#view-chat .chat-dot{display:none}
#view-chat .chat-bubble{box-shadow:none;border:0;max-width:100%;width:auto}
#view-chat .chat-bubble.assistant{background:transparent;padding:0}
#view-chat .msg-footer{display:flex;align-items:center;justify-content:flex-start;gap:12px;border:0}
#view-chat .msg-actions{display:flex;gap:2px}
#view-chat .msg-actions button{width:30px;height:30px;min-height:30px;background:transparent;padding:7px}
#view-chat .msg-time{font-size:10px;color:var(--muted)}
#view-chat .chat-source-chip{background:var(--surface);border:0;border-radius:var(--radius);padding:9px 12px}
#view-chat .chat-input-area[data-voice-state="failed"] .composer-bottom{display:none}
#view-chat .chat-input-area[data-voice-state="recording"] .composer-options,#view-chat .chat-input-area[data-voice-state="recording"] #chatMicBtn{display:none}
@media(max-width:700px){#view-chat{padding:0 16px}#view-chat.active{height:calc(100dvh - 60px - var(--mobile-nav-height,70px))}#view-chat .chat-input-area{padding-bottom:12px}#view-chat #chatInput{font-size:15px}}

#view-chat:not(.active){display:none!important}

#view-chat .composer-bottom,#view-chat .composer-options,#view-chat .send-options{direction:rtl!important}
#view-chat #chatInput{scrollbar-width:none}#view-chat #chatInput::-webkit-scrollbar{display:none}
#view-chat .chat-input-area[data-voice-state] .composer-options{display:none}
#view-chat .chat-input-area[data-voice-state] .chat-voice-capture{border:0;box-shadow:none;background:transparent}
#view-chat .chat-voice-error-card:not(.hidden){display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;background:var(--quiet);border-radius:var(--radius)}
#view-chat .chat-voice-error-card:not(.hidden)~.composer-bottom{display:none}

#view-settings .accent-swatch-grid{display:grid;grid-template-columns:repeat(6,44px);gap:10px;max-width:100%;direction:inherit}
#view-settings .accent-swatch{width:44px;height:44px;min-height:44px;padding:0;border:7px solid var(--bg);border-radius:50%;background:var(--swatch-color);box-shadow:none}
#view-settings .accent-swatch-reset{background:var(--default-accent)}
#view-settings .accent-swatch-reset:before{display:none}
#view-settings .accent-swatch[aria-pressed="true"]:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:var(--swatch-ink);font-size:17px;line-height:1;font-weight:700}
#view-settings .accent-swatch[aria-pressed="true"]{border-color:var(--bg);outline:2px solid var(--art);outline-offset:0}
#view-settings .accent-swatch:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
@media(max-width:700px){#view-settings .setting-row.setting-row-accent{align-items:flex-start;flex-direction:column;gap:14px}#view-settings .setting-row-accent>label{width:100%}}
@media(max-width:360px){#view-settings .accent-swatch-grid{grid-template-columns:repeat(5,44px)}}

#view-plans>.view-header{padding:24px 40px 0;min-height:70px;display:flex;justify-content:center;background:var(--bg);border:0}
#view-plans .planner-mode-switch{margin:0 auto!important;display:flex;gap:8px}
#view-plans>.view-body{padding-top:30px}
@media(max-width:700px){#view-plans>.view-header{padding:18px 16px 0}#view-plans>.view-body{padding:24px 22px 100px}}

#planModal #planModalBody{width:100%;max-width:none;margin:0;box-sizing:border-box}
#planModalBody .plan-draft-step{flex-direction:row;direction:inherit}
#planModalBody .step-reminder-more{font-size:12px;padding:0 4px;margin-top:8px;min-height:36px}

.approved-reminder-dialog{width:min(580px,calc(100vw - 32px))!important;max-height:calc(100dvh - 40px)}
.approved-reminder-dialog .modal-body{width:100%;margin:0;padding:0 28px 28px}
.approved-reminder-form{display:flex;flex-direction:column;gap:18px;width:100%;direction:inherit}
.approved-reminder-form .field{display:flex;flex-direction:column;gap:8px;font-size:14px;width:100%;min-width:0}
.approved-reminder-form .field :is(input,textarea){font:inherit;background:var(--quiet);border:0;border-radius:var(--radius);padding:12px 14px;color:var(--fg);min-height:46px;width:100%;margin:0;box-shadow:none}
.approved-reminder-form .field textarea{min-height:100px;resize:vertical}
.approved-reminder-form .two-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.approved-reminder-form .custom-select{width:100%}
.approved-reminder-form .custom-select-trigger{width:100%;background:var(--quiet);font:inherit;min-height:46px}
.approved-reminder-form .alerts{border:0;padding:0;margin:0}
.approved-reminder-form .alerts legend{font-size:14px;margin-bottom:10px}
.approved-reminder-form .remind-chips{display:flex;flex-wrap:wrap;gap:10px 15px;justify-content:flex-start}
.approved-reminder-form .remind-chip{display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;padding:0;min-height:28px;color:var(--fg);font-size:13px;cursor:pointer}
.approved-reminder-form .remind-chip input{appearance:auto;accent-color:var(--action);width:16px;height:16px;margin:0}
.approved-reminder-form .form-actions{display:flex;justify-content:flex-start;direction:inherit;gap:10px;margin:0}
.approved-reminder-form .form-actions :is(#reminderEditSaveBtn,#newReminderSaveBtn){order:-1;flex:1}
.approved-reminder-form .form-actions [data-action^="close-"]{flex:0 0 80px;background:none;color:var(--muted)}
.approved-reminder-form .reminder-delete-row{margin:0;border-top:1px solid var(--rule);padding-top:12px}
.approved-reminder-form .reminder-delete-row button{background:none;color:var(--danger);font:inherit;font-size:13px;padding:0;min-height:36px}
.approved-reminder-extra summary{font-size:12px;color:var(--muted);cursor:pointer}
.approved-reminder-extra .field{margin-top:14px}
@media(max-width:600px){.approved-reminder-dialog .modal-body{padding:0 24px 24px}.approved-reminder-form .two-fields{gap:12px}.approved-reminder-form .field{font-size:13px}}

/* The approved dialogs float within the viewport at every size. */
.modal-overlay:has(>.approved-reminder-dialog),.modal-overlay:has(>.approved-workspace-dialog){align-items:center;justify-content:center;padding:20px 16px}
.approved-reminder-dialog,.approved-workspace-dialog{position:relative;inset:auto;max-height:calc(100dvh - 40px);border:0;box-shadow:0 20px 70px #0003;background:var(--bg);border-radius:var(--radius)}
.approved-reminder-dialog .modal-header{border:0;padding:24px 28px 16px}
.approved-reminder-dialog .modal-header h3{font:inherit;font-size:20px;font-weight:700;letter-spacing:0}
.approved-reminder-dialog .modal-body{scrollbar-width:none}
.approved-reminder-dialog .modal-body::-webkit-scrollbar{display:none}
.approved-reminder-form .remind-chip input{width:16px;height:16px;min-width:16px;min-height:16px;max-width:16px;max-height:16px;flex:0 0 16px;padding:0;appearance:auto;accent-color:var(--action)}
.approved-reminder-form .remind-chip{min-width:0;min-height:36px}
.approved-reminder-form .form-actions #newReminderSaveBtn,.approved-reminder-form .form-actions #reminderEditSaveBtn{background:var(--action);color:var(--on-action);border:0;border-radius:var(--radius);font:inherit;font-weight:600}
.approved-reminder-form .reminder-delete-row button{display:inline-flex;align-items:center;gap:8px}
.approved-reminder-form .reminder-delete-row .theme-icon{width:16px;height:16px}

.time-picker{width:min(360px,calc(100vw - 32px));padding:28px;background:var(--bg);border:0;border-radius:var(--radius);box-shadow:0 20px 70px #0003;scrollbar-width:none}
.approved-time-heading{display:flex;align-items:center;justify-content:space-between;direction:rtl;gap:12px;margin-bottom:24px}
.approved-time-heading h3{font:inherit;font-size:18px;font-weight:700;margin:0}
.time-picker .time-picker-head{margin:0;font:inherit;font-size:23px;color:var(--art);direction:ltr}
.time-picker .time-picker-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.time-picker .time-picker-cols>.time-picker-sep{display:none}
.time-picker .time-picker-col{gap:0}
.time-picker .time-picker-col-label{font:inherit;font-size:12px;color:var(--muted);margin:0}
.time-picker .time-picker-scroll{height:216px;width:100%;margin-top:12px;border:0;background:none;mask-image:linear-gradient(transparent,black 25%,black 75%,transparent)}
.time-picker .time-picker-item{height:44px;min-height:44px;font:inherit;font-size:20px;border-radius:var(--radius)}
.time-picker .time-picker-item.selected{background:var(--quiet);color:var(--art);font-weight:700}
.time-picker .time-picker-actions{display:flex;direction:rtl;justify-content:flex-start;gap:12px;margin-top:24px}
.time-picker .time-picker-actions button{font:inherit;border:0;min-height:46px;border-radius:var(--radius)}
.time-picker .time-picker-ok{order:-1;flex:1;background:var(--action);color:var(--on-action)}
.time-picker .time-picker-cancel{flex:0 0 80px;background:transparent;color:var(--muted)}

#view-timeline .timeline-unscheduled-item{direction:inherit;flex-direction:row}
#view-timeline .timeline-allday-edit{direction:inherit;text-align:start}
#view-timeline .timeline-unscheduled-item.done strong{text-decoration:line-through;color:var(--muted)}

@media(max-width:700px){#view-chat .hati-tools .plain .theme-icon{display:inline-block;width:18px;height:18px}#view-chat #newChatBtn{width:40px;min-width:40px;min-height:40px;padding:10px}}
.modal.approved-workspace-dialog>.modal-header{padding:0;border:0;margin-bottom:20px}
.modal.approved-workspace-dialog>.modal-header h3{font:inherit;font-size:21px;font-weight:700;letter-spacing:0}
.modal.approved-workspace-dialog>.modal-body{padding:0;width:100%;margin:0;scrollbar-width:none}
#memoryModal .memory-modal{width:min(570px,calc(100vw - 32px))}
#memoryModal .memory-explainer{font-size:14px;line-height:1.9;color:var(--muted);margin-bottom:23px}
#memoryModal .memory-add-row{margin:0;display:block}
#memoryModal .memory-add-button{font:inherit;font-size:13px;background:transparent;padding:0 5px;min-height:44px;color:var(--fg);border:0;display:inline-flex;align-items:center;gap:8px}
#memoryModal .memory-count{font-size:11px;color:var(--muted);text-align:end;margin:12px 0}
#memoryModal .memory-cards{display:block}
#memoryModal .memory-card{padding:16px;margin:12px 0;background:var(--surface);border:0;border-radius:var(--radius);box-shadow:none;direction:inherit}
#memoryModal .memory-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
#memoryModal h4{font:inherit;font-size:14px;font-weight:600;margin:0;overflow-wrap:anywhere}
#memoryModal .memory-item-actions{display:flex;gap:2px}
#memoryModal .memory-item-actions .icon-button{width:36px;height:36px;min-height:36px;padding:8px;display:grid;place-items:center;border:0;background:none;color:var(--muted)}
#memoryModal .memory-content{font-size:14px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:6px}
#memoryModal .memory-card:not(.memory-editor) :is(.memory-card-header,.approved-memory-field,.memory-editor-actions,.memory-card-provenance label){display:none}
#memoryModal .memory-editor .approved-memory-summary{display:none}
#memoryModal .memory-card-header{display:block}
#memoryModal .approved-memory-field{display:block;font-size:12px;color:var(--muted);margin-bottom:13px}
#memoryModal .approved-memory-field textarea{display:block;width:100%;padding:10px 12px;background:var(--bg);color:var(--fg);font:inherit;font-size:14px;line-height:1.8;border:0;border-radius:var(--radius);margin-top:5px;min-height:44px;max-height:220px;resize:vertical;box-shadow:none}
#memoryModal .approved-memory-field .memory-card-content{min-height:100px}
#memoryModal .memory-card-details{border:0;margin-top:9px;padding:0}
#memoryModal .memory-card-details summary{font-size:11px;min-height:36px;padding:0;color:var(--muted);cursor:pointer}
#memoryModal .memory-card-provenance{font-size:11px;color:var(--muted);padding:0}
#memoryModal .memory-card-provenance label{display:block;margin-top:12px}
#memoryModal .memory-expiry-control{display:flex;gap:8px;align-items:center;margin-top:5px}
#memoryModal .memory-card-expiry{width:145px;min-height:40px;background:var(--bg);border:0;padding:10px;color:var(--fg);border-radius:var(--radius)}
#memoryModal .memory-expiry-control button{font:inherit;font-size:12px;border:0;background:none;color:var(--muted)}
#memoryModal .memory-editor-actions{display:flex;gap:8px;margin-top:14px}
#memoryModal .memory-editor-actions button{font:inherit;font-size:13px;min-height:40px;border:0;border-radius:var(--radius)}
#memoryModal .memory-editor-actions .primary-btn{background:var(--action);color:var(--on-action);min-width:120px}
#memoryModal .memory-editor-actions .secondary-btn{background:none;color:var(--muted)}
#memoryModal:has(.memory-editor) .memory-add-row{display:none}
#memoryModal .memory-footer{padding:0;border:0;margin-top:16px}
#memoryModal .memory-actions:empty{display:none}
#memoryModal .memory-until{font-size:11px;color:var(--muted);margin-top:8px}
#chatHistoryModal .history-item{display:flex;flex-direction:row;direction:inherit;align-items:center;gap:12px;padding:16px 0;background:none;border:0;border-bottom:1px solid var(--rule);cursor:pointer}
#chatHistoryModal .history-info{order:-1;flex:1;min-width:0;text-align:start}
#chatHistoryModal .history-title{font:inherit;font-size:14px;font-weight:600}
#chatHistoryModal .history-date{font:inherit;font-size:11px;color:var(--muted);margin-top:5px}
#chatHistoryModal .history-actions{display:flex;gap:2px}
#chatHistoryModal .history-actions button{width:36px;min-height:36px;background:none;border:0;padding:8px;color:var(--muted)}

.modal.approved-workspace-dialog{height:auto;min-height:0}
#memoryModal .memory-modal{height:auto;min-height:0}
#memoryModal .memory-list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
#memoryModal .memory-list-heading h3{font:inherit;font-size:14px;font-weight:600;margin:0}
#memoryModal .memory-list-heading .memory-count{margin:0}
#memoryModal .memory-empty{padding:25px 12px;font-size:14px;line-height:1.9;text-align:center;background:none;border:0;color:var(--muted)}
#memoryModal .memory-status{background:none;padding:0;font-size:12px;line-height:1.8;color:var(--muted);margin:0}

#memoryModal .memory-footer{background:none}
/* The native mobile shell already reserves the header and bottom navigation. */
#view-record{overflow-x:hidden;scrollbar-width:none}
#view-record::-webkit-scrollbar{display:none}
#view-record.session-mode .capture-alternatives,#view-record .capture-stage.mic-hidden{display:none}
#view-record .capture-stage.mic-readonly #recordBtn{pointer-events:none;opacity:0}
#view-record .capture-stage.mic-readonly .recorder-controls{display:none}
#view-record .session-panel{width:100%;margin:16px 0 0;padding:0;position:relative;opacity:1;transform:none}
#view-record .session-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:13px}
#view-record .session-head>div:first-child{min-width:0}
#view-record .session-head h2{font:inherit;font-size:18px;font-weight:600;margin:0}
#view-record .session-head p{font-size:12px;line-height:1.7;color:var(--muted);margin:3px 0 0}
#view-record .session-code{display:flex;align-items:center;gap:2px;direction:ltr;flex-shrink:0}
#view-record .session-code strong{font:inherit;font-size:24px;font-weight:600;letter-spacing:2px;white-space:nowrap}
#view-record .session-code .icon-btn{display:grid;place-items:center;width:36px;min-height:40px;border:0;background:none;color:var(--muted);padding:8px;box-shadow:none;border-radius:var(--radius)}
#view-record .session-code .icon-btn:hover{background:var(--hover);color:var(--fg)}
#view-record .code-expiry{height:2px;background:var(--rule);margin-bottom:16px;overflow:hidden}
#view-record .code-expiry i{display:block;height:100%;background:var(--art)}
#view-record .participant-row{display:flex;align-items:center;direction:inherit;gap:10px;padding:13px 0;border-top:1px solid var(--rule);font-size:13px;line-height:1.6}
#view-record .participant-row>.theme-icon{color:var(--art);flex-shrink:0}
#view-record .participant-row>span:not(.theme-icon):not(.participant-state){min-width:0;overflow-wrap:anywhere}
#view-record .participant-row small{font-size:11px;color:var(--muted);margin-inline-start:5px}
#view-record .participant-state{margin-inline-start:auto;font-size:11px;color:var(--muted);text-align:end}
#view-record .participant-row .mic-kick-btn{display:grid;place-items:center;flex-shrink:0;width:36px;min-height:40px;padding:0;border:0;background:none;color:var(--danger);border-radius:var(--radius)}
#view-record .participant-row .mic-kick-btn:hover{background:var(--hover)}
#view-record .session-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:12px;color:var(--muted)}
#view-record #micLeaveBtn{border:0;background:var(--quiet);color:var(--fg);border-radius:var(--radius);font:inherit;font-size:12px;min-height:40px;padding:0 15px}
#view-record #micLeaveBtn:hover{background:var(--hover)}
#view-record .participant-wait{text-align:center;padding:26px 0;color:var(--muted);font-size:13px}
#view-record.session-mode[data-session-role=host] .capture-stage[data-state=idle] .record-center{padding-bottom:40px}
@media(max-width:700px){
 #view-record .session-head{align-items:flex-start;gap:8px}
 #view-record .session-head h2{font-size:16px}
 #view-record .session-head p{font-size:11px}
 #view-record .session-code strong{font-size:20px}
 #view-record .session-code .icon-btn,#view-record .participant-row .mic-kick-btn{width:44px;min-height:44px}
 #view-record .participant-row{font-size:12px}
 #view-record .participant-row small{font-size:10px}
 #view-record .session-footer{font-size:11px}
}
#view-record .code-expiry i{animation:none;transition:width .1s linear;width:0}
#view-record .mic-verify-header h2,#view-record .mic-lobby-header h2{font-size:18px}
#view-record .mic-verify-item{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--rule);font-size:13px}
#view-record .mic-verify-status{margin-inline-start:auto;font-size:11px;color:var(--muted)}
#view-record .mic-verify-controls,#view-record .mic-lobby-controls{display:flex;gap:12px;align-items:center;margin-top:20px}
#multiMicJoinModal .approved-workspace-dialog{width:min(440px,calc(100vw - 32px));padding:28px}
#multiMicJoinModal .join-intro{text-align:center;padding:0 0 24px;color:var(--muted);font-size:13px}
#multiMicJoinModal .join-mark{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 12px;background:var(--quiet);color:var(--art);border-radius:var(--radius)}
#multiMicJoinModal .join-digits{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
#multiMicJoinModal .mic-join-digit{padding:0;height:60px;text-align:center;font-size:28px;font-weight:600;min-width:0;background:var(--quiet);border-radius:var(--radius)}
#multiMicJoinModal .mic-join-actions{display:flex;gap:10px;margin-top:24px}
#multiMicJoinModal #multiMicConfirmJoinBtn{order:-1;flex:1;min-height:48px}
#multiMicJoinModal #multiMicJoinCancelBtn{width:80px;min-height:48px;background:var(--quiet)}
#multiMicJoinModal .mic-join-info{text-align:center;font-size:12px;color:var(--muted);margin-top:12px}
#multiMicJoinModal .mic-join-alias-row{margin-top:20px}
#multiMicJoinModal .mic-join-alias-row label{display:block;font-size:13px;margin-bottom:8px}
@media(max-width:700px){#multiMicJoinModal .approved-workspace-dialog{padding:24px}#multiMicJoinModal .mic-join-digit{height:52px;font-size:25px}}
#multiMicJoinModal .mic-join-digit{border:0;color:var(--fg);font-family:inherit;box-sizing:border-box}
/* Account connections and actions share the approved open settings layout. */
#view-settings .calendar-connection{background:none;border:0;border-radius:0;padding:16px 0;box-shadow:none}
#view-settings .calendar-connection-main{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
#view-settings .calendar-connection-icon{display:none}
#view-settings .calendar-connection-copy{flex:1 1 100%;min-width:0}
#view-settings .calendar-connection-copy strong{font-size:15px;font-weight:600}
#view-settings .calendar-connection-copy span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
#view-settings .calendar-connect-btn{width:auto;min-width:100px;background:var(--action);color:var(--on-action);border:0;border-radius:var(--radius);padding:0 18px;min-height:42px}
#view-settings .calendar-connection-controls{border:0;background:none;padding:16px 0 0}
#view-settings .settings-account-actions{flex-direction:row;justify-content:flex-start;align-items:center}
#view-settings .settings-account-actions button{width:auto;gap:8px;justify-content:center}
#view-settings .settings-legal-links{display:flex;gap:20px;margin-top:24px;padding-top:24px;border-top:1px solid var(--rule);font-size:13px}
:is(#view-settings,#billing-view,#trash-view,#admin-view,#view-notes){scrollbar-width:none}
:is(#view-settings,#billing-view,#trash-view,#admin-view,#view-notes)::-webkit-scrollbar{display:none}
:is(#view-settings,#billing-view,#trash-view,#admin-view,#view-notes) .view-body{scrollbar-width:none}
:is(#view-settings,#billing-view,#trash-view,#admin-view,#view-notes) .view-body::-webkit-scrollbar{display:none}
#folderRail .folder-chip{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 16px;min-height:44px;border-radius:var(--radius);color:var(--muted);white-space:nowrap;font-size:13px;border:0;background:none}
#folderRail .folder-chip em{font-size:11px;font-style:normal;opacity:.8}
#folderRail .folder-chip.active{background:var(--action);color:var(--on-action)}
#folderRail .folder-sep{display:none}
#view-settings .support-center .settings-panel-heading{background:none;border:0;padding:0;margin:0 0 20px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
#view-settings .support-center .settings-panel-heading strong{font-size:18px}
#view-settings .support-center .settings-panel-heading small{display:block;font-size:13px;color:var(--muted);margin-top:5px}
#view-settings .support-center .settings-panel-heading button{width:auto;background:var(--action);color:var(--on-action);border:0;border-radius:var(--radius);min-height:44px;padding:0 18px}
#view-settings .support-ticket-list,#view-settings .support-ticket-detail{border:0;background:none;padding:0;margin:0}
#view-inbox.approved-home-empty>.content>.capture,#view-inbox.approved-home-empty>.content>.below{display:none}
#view-inbox.approved-home-empty>.content{display:flex;align-items:center;justify-content:center;min-height:100%;width:100%}
#view-inbox .chosen-empty{width:100%;padding:40px 0}
/* Note creation keeps the approved writing surface with real photo and voice controls. */
#newNoteModal .note-composer-modal{width:min(580px,calc(100vw - 32px));padding:26px;background:var(--bg);border:0;border-radius:var(--radius);max-height:calc(100dvh - 32px);scrollbar-width:none}
#newNoteModal .modal-header{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;padding:0;border:0;margin:0;min-height:0}
#newNoteModal .modal-header>div{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
#newNoteModal .modal-body{padding:0;margin:0;min-height:0;flex:1 1 auto;overflow-y:auto;overflow-x:hidden}
#newNoteModal .note-composer-form{display:block;padding:0}
#newNoteModal .form-group{margin:0 0 16px}
#newNoteModal .form-group>label{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
#newNoteModal #newNoteTitle{background:var(--surface);border:1px solid var(--rule);padding:10px 14px;box-sizing:border-box;font:700 23px/1.6 Peyda,sans-serif;width:100%;border-radius:var(--radius)}
#newNoteModal #newNoteBody{background:var(--surface);border:1px solid var(--rule);padding:12px 14px;box-sizing:border-box;resize:none;overflow:hidden;font:16px/2 Peyda,sans-serif;min-height:180px;width:100%;border-radius:var(--radius)}
#newNoteModal .note-composer-attachments{border:0;background:none;padding:18px 0 0;margin:0;border-top:1px solid var(--rule)}
#newNoteModal .note-composer-attachments legend{font-size:12px;color:var(--muted);padding:0 0 10px}
#newNoteModal .note-composer-tools{display:flex;gap:8px;flex-wrap:wrap}
#newNoteModal .note-composer-tool{background:none;border:0;color:var(--muted);border-radius:var(--radius);display:flex;align-items:center;gap:8px;font:inherit;font-size:13px;padding:0 10px;min-height:44px}
#newNoteModal .note-composer-tool:hover{background:var(--quiet)}
#newNoteModal .form-actions{flex:none;display:flex;flex-direction:row;justify-content:flex-start;gap:10px;margin-top:20px}
#newNoteModal #newNoteSaveBtn{order:-1;flex:1;background:var(--action);color:var(--on-action);border:0;border-radius:var(--radius);min-height:46px}
#newNoteModal .form-actions .secondary-btn{width:80px;flex:none;background:var(--quiet);color:var(--muted);border:0;border-radius:var(--radius);min-height:46px}
:is(#folderModal,#noteSelectorModal) .modal{width:min(520px,calc(100vw - 32px));padding:26px;background:var(--bg);border:0;border-radius:var(--radius)}
:is(#folderModal,#noteSelectorModal) .modal-header{padding:0;border:0;margin:0 0 20px}
:is(#folderModal,#noteSelectorModal) .modal-header h3{font-size:21px;letter-spacing:0}
:is(#folderModal,#noteSelectorModal) .modal-body{padding:0;scrollbar-width:none}
#folderModal .folder-move-btn{display:flex;gap:10px;align-items:center;min-height:48px;width:100%;background:none;border:0;border-bottom:1px solid var(--rule);font:inherit;color:var(--fg);text-align:start;padding:10px 0}
#noteSelectorModal .note-select-item{display:flex;gap:12px;align-items:center;min-height:58px;width:100%;background:none;border:0;border-bottom:1px solid var(--rule);font:inherit;color:var(--fg);text-align:start;padding:15px 9px}
#noteSelectorModal .note-select-check{width:17px;height:17px;flex:none;border:1px solid var(--art);border-radius:5px;background:none;display:grid;place-items:center}
#noteSelectorModal .note-select-check.checked{background:var(--action);color:var(--on-action);border-color:var(--action)}
#noteSelectorModal .note-select-title{flex:1;font-size:14px}
#noteSelectorModal .note-select-folder{font-size:12px;color:var(--muted)}
#noteSelectorModal .modal-footer{padding:20px 0 0;border:0}
#noteSelectorModal #noteSelectorConfirm{width:100%;background:var(--action);color:var(--on-action);border:0;border-radius:var(--radius);min-height:46px}
@media(max-width:600px){#newNoteModal .note-composer-modal{padding:22px}#newNoteModal #newNoteTitle{font-size:21px}#newNoteModal #newNoteBody{font-size:15px}#newNoteModal .note-composer-tool{font-size:12px;padding:0 7px}}

/* The real calendar uses the approved open grid, with no legacy grid background. */
#view-timeline .month-grid{background:transparent;border:0;gap:6px}
#view-timeline .month-header-cell{background:transparent;border:0;font-weight:400;padding:9px 4px;color:var(--muted)}
@media(min-width:769px){
 #timelineCalendarControls>.timeline-nav-row{min-height:0;height:0}
 #view-timeline>.view-body{padding-top:18px}
 #timelineCalendarBody{padding-top:0}
}
@media(max-width:768px){#timelineCalendarControls .tl-view-controls{display:none}#timelineCalendarControls .timeline-nav-row{direction:rtl}#timelineTodayBtn{margin-inline-start:auto}}
/* Every remaining native dialog follows the centered approved dialog pattern. */
.modal-overlay:not(.approved-note-page){align-items:center;justify-content:center;padding:16px}
.modal-overlay>.modal{position:relative;inset:auto;align-self:auto;margin:0;transform:none;animation:none;max-width:100%;max-height:calc(100dvh - 32px);border:0;border-radius:var(--radius);background:var(--bg);overflow:auto;scrollbar-width:none}
#newNoteModal .note-composer-tools{border:0}
#folderModal .inline-add{display:flex;gap:10px;margin-top:20px;padding:0;border:0;direction:rtl}
#folderModal #folderInput{min-width:0;flex:1;background:var(--quiet);border:0;padding:12px;border-radius:var(--radius);font:inherit;color:var(--fg)}
#folderModal #folderAddBtn{width:48px;min-height:48px;background:var(--action);color:var(--on-action);border:0;border-radius:var(--radius)}
#folderModal .folder-manager-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--rule)}
#folderModal .folder-manager-row .note-info{flex:1}
#folderModal .folder-manager-row .note-title{font:inherit;font-weight:600}
#folderModal .folder-manager-row .note-meta{font-size:12px;color:var(--muted)}
#folderModal .reminder-delete{border:0;background:none;min-width:44px;min-height:44px;color:var(--danger)}
#noteSelectorModal .note-select-item{border-radius:0;box-shadow:none}
#chatHistoryModal .modal{width:min(560px,calc(100vw - 32px));padding:26px}
#chatHistoryModal .modal-header,#chatHistoryModal .modal-body{padding:0;border:0}
#chatHistoryModal .modal-header{margin-bottom:20px}
#view-record :is(.mic-verify-controls,.mic-lobby-controls) :is(.btn-primary,.btn-secondary){font:inherit;font-size:13px;min-height:44px;border:0;border-radius:var(--radius);padding:0 18px;background:var(--quiet);color:var(--fg)}
#view-record :is(.mic-verify-controls,.mic-lobby-controls) .btn-primary{background:var(--action);color:var(--on-action)}
#view-record .mic-verify-status{display:flex;align-items:center;gap:6px}
#view-record .mic-verify-item>.theme-icon{color:var(--art)}
#view-chat .chat-message{padding:0;margin-bottom:30px;background:none;box-shadow:none;border-radius:0}
#view-chat .chat-message.user{width:fit-content;max-width:76%;margin-inline-start:0;margin-inline-end:auto}
#view-chat .chat-message.assistant{width:90%;margin-inline-start:auto;margin-inline-end:0}
#view-chat .chat-bubble{padding:0;background:none;border-radius:0}
#view-chat .chat-bubble.user .bubble-content{background:var(--surface);padding:8px 12px;border:0;border-radius:var(--radius)}
#view-chat .chat-bubble.assistant .bubble-content{background:none;padding:0;border:0;font-size:16px;line-height:2}
#view-chat .approved-message-label{display:flex;align-items:center;gap:8px;color:var(--art);font-size:12px;font-weight:600;margin-bottom:10px}
#view-chat .chat-bubble .msg-footer{margin-top:8px;background:none;padding:0}
#view-chat .retry-btn{display:flex;align-items:center;gap:6px;font:inherit;border:0;background:var(--quiet);color:var(--fg);min-height:44px;padding:8px 14px;border-radius:var(--radius)}
/* Administration uses the same open rows, filters and statistics as the approved workspace. */
#admin-view .admin-panel>h2,#admin-view .admin-panel>h3{font:700 20px/1.6 Peyda,sans-serif;letter-spacing:0;margin:0 0 20px}
#admin-view .admin-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;padding:24px 0;margin:24px 0;border-top:1px solid var(--rule)}
#admin-view .admin-stat-card{padding:0;background:none;border:0;border-radius:0;text-align:start;box-shadow:none}
#admin-view .admin-stat-value{font:600 26px/1.6 Peyda,sans-serif;color:var(--fg)}
#admin-view .admin-stat-label{font-size:12px;color:var(--muted);opacity:1;margin-top:4px}
#admin-view .admin-toolbar{display:flex;gap:16px;flex-wrap:wrap;padding:20px 0;border:0;border-top:1px solid var(--rule);background:none;margin:20px 0}
#admin-view .admin-toolbar label{flex:1;min-width:140px;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--fg)}
#admin-view .admin-toolbar input{width:100%;background:var(--quiet);border:0;border-radius:var(--radius);padding:12px 14px;font:inherit;color:var(--fg);min-height:48px}
#admin-view :is(.admin-users-list,.admin-ticket-list,.admin-ticket-detail,.admin-audit-list){border:0;background:none;padding:0}
#admin-view .admin-user-item{padding:20px 0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;box-shadow:none;margin:0;gap:24px}
#admin-view .admin-user-name{font:600 15px/1.8 Peyda,sans-serif}
#admin-view .admin-user-email{font-size:13px;color:var(--muted);opacity:1}
#admin-view .admin-user-meta{margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#admin-view :is(.admin-role-badge,.admin-status-badge,.admin-user-plan-badge,.admin-priority){background:var(--quiet);color:var(--muted);border:0;border-radius:var(--radius);font:11px/1.7 Peyda,sans-serif;padding:4px 8px}
#admin-view .admin-user-plan{flex-wrap:wrap;justify-content:flex-end}
#admin-view .admin-change-plan-btn{border:0;background:none;min-height:44px;color:var(--muted);font:13px Peyda,sans-serif;padding:0 8px;border-radius:var(--radius)}
#admin-view .admin-delete-btn{color:var(--danger)}
#admin-view .admin-ticket-layout{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.6fr);gap:30px;border:0;background:none}
#admin-view .admin-ticket-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border:0;border-bottom:1px solid var(--rule);background:none;border-radius:0;color:var(--fg);font:inherit;text-align:start;width:100%}
#admin-view .admin-ticket-row.active{background:var(--quiet);padding:18px 12px;border-radius:var(--radius);box-shadow:none}
#admin-view .admin-ticket-row strong{font-size:14px}
#admin-view .admin-ticket-row small{display:block;font-size:12px;color:var(--muted);margin-top:5px}
#admin-view .admin-ticket-controls{padding:18px 0;border:0;gap:12px}
#admin-view .admin-ticket-controls label{font-size:13px;color:var(--fg)}
#admin-view .admin-audit-row{padding:18px 0;border:0;border-bottom:1px solid var(--rule)}
#admin-view .admin-audit-row strong{font-size:14px}
#admin-view .admin-audit-row :is(span,time){font-size:12px}
#admin-view .admin-asr-panel{padding:0;background:none;border:0;margin:0 0 30px}
#admin-view .admin-asr-grid{gap:24px;padding:20px 0;border-top:1px solid var(--rule)}
#admin-view .admin-asr-card{padding:0;background:none;border:0;min-height:75px}
#admin-view .admin-asr-card strong{font:600 24px/1.6 Peyda,sans-serif}
#admin-view .admin-asr-card span{font-size:12px}
#admin-view .admin-asr-node-list>div{padding:16px 0;border:0;border-bottom:1px solid var(--rule)}
#admin-view :is(.primary-btn,.secondary-btn){font:inherit;font-size:13px;min-height:44px;padding:0 16px;border:0;border-radius:var(--radius);background:var(--quiet);color:var(--fg)}
#admin-view .primary-btn{background:var(--action);color:var(--on-action)}
#admin-view .support-message{background:var(--quiet);border:0;border-radius:var(--radius);padding:20px;margin:14px 0;max-width:100%}
#admin-view .support-message-list{padding:0;max-height:none;overflow:visible}
#admin-view .support-reply-box{padding:20px 0;background:none;border:0}
#admin-view .support-reply-box textarea{width:100%;background:var(--quiet);border:0;border-radius:var(--radius);font:inherit;padding:12px;color:var(--fg)}
@media(max-width:900px){#admin-view .admin-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}#admin-view .admin-ticket-layout{grid-template-columns:1fr}}
@media(max-width:700px){#admin-view .admin-user-item{display:block}#admin-view .admin-user-plan{justify-content:flex-start;margin-top:14px}#admin-view .admin-ticket-controls{grid-template-columns:1fr}}
#admin-view :is(.admin-overview-note,.admin-empty-state){padding:24px 0;font-size:13px;color:var(--muted);line-height:1.9}
#admin-view>.view-header .plain,#trash-view>.view-header .plain{font:inherit;font-size:13px;min-height:44px;border:0;background:none;color:var(--muted);padding:0 10px}
#admin-view .admin-overview-note{border:0;background:none;padding-inline:0;border-radius:0}
#billing-view .browser-error{padding:24px 0;color:var(--muted)}
#billing-view .browser-error h2{font-size:18px;margin-bottom:16px}

/* Administrative account editor uses the same centered dialog and action hierarchy. */
.plan-modal-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.38);backdrop-filter:blur(5px);padding:16px}
.plan-modal-overlay .plan-modal{width:440px;max-width:100%;max-height:calc(100dvh - 32px);overflow:auto;padding:26px;background:var(--bg);border:0;border-radius:var(--radius);box-shadow:0 18px 60px rgba(0,0,0,.12)}
.plan-modal .modal-header{padding:0 0 20px;border:0;background:none}
.plan-modal .plan-modal-option{display:flex;width:100%;padding:14px 16px;margin:5px 0;background:var(--surface);color:var(--text);border:0;border-radius:var(--radius);text-align:start;font:inherit;cursor:pointer}
.plan-modal .plan-modal-option.current{background:var(--accent);color:var(--primary-text)}
.plan-modal .plan-modal-option-info{font-size:12px;opacity:.7}
.plan-modal .admin-plan-expiry{display:grid;gap:8px;margin:20px 0}
.plan-modal .support-form-actions{display:flex;flex-direction:row-reverse;gap:10px;border:0;padding:8px 0 0}
.plan-modal .primary-btn{flex:1;min-height:44px;border:0;border-radius:var(--radius);background:var(--accent);color:var(--primary-text);font:inherit}
.plan-modal .secondary-btn{min-width:80px;border:0;background:none;color:var(--text);font:inherit}
#settings-section-admin .settings-card{border:0;background:none;box-shadow:none;padding:0}

/* Page headings scroll with their content, as in the approved full-page layouts. */
:is(#view-settings,#billing-view,#trash-view,#admin-view,#view-notes,#view-plans)>.view-header{position:static;top:auto;z-index:auto}
#trash-view .trash-item{flex-direction:row;flex-wrap:nowrap;min-height:76px}
#trash-view .trash-item-info{flex:1;width:auto;min-width:0}
#trash-view .trash-item-actions{flex:none;width:auto}
#trash-view .trash-item-actions>button{width:auto;flex:none}
#billing-view .billing-period-toggle{border:0;background:var(--quiet);border-radius:var(--radius)}

#view-record #voiceAvailability button{font:inherit;font-size:12px;min-height:44px;padding:0 10px;background:none;border:0;color:var(--muted)}

/* Final management layouts mirror the approved cards and live-data charts. */
#admin-view .admin-stats{gap:12px;border:0;padding:0;margin:22px 0}
#admin-view .admin-stat-card{padding:18px;background:var(--quiet);border-radius:var(--radius);display:flex;flex-direction:column;gap:8px}
#admin-view .admin-stat-card>.theme-icon{color:var(--art);font-size:20px}
#admin-view .admin-stat-value{font-size:27px;line-height:1.3}
#admin-view .approved-admin-surface{padding:24px;background:color-mix(in srgb,var(--quiet) 55%,var(--bg));border:0;border-radius:var(--radius)}
#admin-view .approved-admin-surface h3{margin:0;font:600 16px/1.8 Peyda,sans-serif}
#admin-view .approved-admin-graphs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:32px}
#admin-view .approved-admin-distribution{display:flex;gap:20px;align-items:center;margin-top:24px}
#admin-view .approved-admin-distribution>div:last-child{flex:1}
#admin-view .approved-admin-distribution-row{display:flex;justify-content:space-between;font-size:12px;margin:10px 0}
#admin-view .approved-admin-ring{width:104px;height:104px;flex-shrink:0;border-radius:50%;background:conic-gradient(var(--art) var(--portion),var(--quiet) 0);display:grid;place-items:center;position:relative}
#admin-view .approved-admin-ring:before{content:'';position:absolute;inset:8px;border-radius:50%;background:var(--bg)}
#admin-view .approved-admin-ring>span{position:relative;z-index:1;font-size:24px;font-weight:600;text-align:center}
#admin-view .approved-admin-ring small{font-size:11px;color:var(--muted);display:block}
#admin-view .approved-admin-status-bars>div{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:12px;margin-top:16px}
#admin-view .approved-admin-status-bars progress{grid-column:1/-1;width:100%;height:4px;accent-color:var(--art)}
#admin-view .approved-admin-status-bars progress::-webkit-progress-bar{background:var(--quiet);border-radius:4px}
#admin-view .approved-admin-status-bars progress::-webkit-progress-value{background:var(--art);border-radius:4px}
#admin-view .admin-users-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#admin-view .admin-user-item{padding:22px;background:color-mix(in srgb,var(--quiet) 55%,var(--bg));border:0;border-radius:var(--radius);display:flex;flex-direction:column;gap:22px;min-width:0}
#admin-view .admin-user-info{display:flex;flex-direction:row;align-items:flex-start;gap:14px;min-width:0}
#admin-view .approved-admin-avatar{width:54px;height:54px;flex-shrink:0;display:grid;place-items:center;background:var(--quiet);color:var(--art);font-size:24px;font-weight:700;border-radius:var(--radius)}
#admin-view .approved-admin-user-copy{min-width:0;flex:1}
#admin-view .admin-user-email{overflow-wrap:anywhere;margin:6px 0}
#admin-view .admin-user-plan{border-top:1px solid var(--rule);padding-top:14px;margin-top:auto;justify-content:flex-start;gap:6px;display:flex;flex-wrap:wrap}
#admin-view .admin-user-plan .theme-icon{font-size:18px}
#admin-view .admin-user-plan-badge{order:-1}
#admin-view .admin-ticket-layout{display:block}
#admin-view [data-admin-panel="tickets"]:not(.approved-ticket-open) #admin-ticket-detail{display:none}
#admin-view .approved-ticket-open>.admin-toolbar,#admin-view .approved-ticket-open #admin-ticket-list{display:none}
#admin-view .approved-admin-ticket-back{display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--art);font:inherit;font-size:13px;min-height:44px;margin:12px 0}
#admin-view .admin-asr-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
#admin-view .admin-asr-heading p{font-size:12px;color:var(--muted);line-height:1.8}
#admin-view .admin-asr-heading .secondary-btn{flex:0 0 auto;width:auto;background:none;color:var(--muted)}
#admin-view .admin-asr-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:0;border:0;margin:24px 0}
#admin-view .admin-asr-card{min-height:0;padding:12px 8px;background:var(--quiet);border-radius:var(--radius)}
#admin-view .admin-asr-card span{font-size:11px;white-space:nowrap}
#admin-view .admin-asr-card strong{font-size:17px;line-height:1.6;white-space:nowrap;display:block;margin-top:7px}
#admin-view .approved-admin-chart-panel{margin-bottom:20px}
#admin-view .approved-admin-chart-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:10px}
#admin-view .approved-admin-chart-heading p{font-size:12px;color:var(--muted)}
#admin-view .approved-admin-chart-legend{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}
#admin-view .approved-admin-chart-legend i{width:7px;height:7px;border-radius:50%;background:var(--art)}
#admin-view .approved-admin-line-chart{width:100%;height:180px;overflow:visible}
#admin-view .approved-chart-grid{stroke:var(--rule);stroke-width:1;fill:none}
#admin-view .approved-chart-line{fill:none;stroke:var(--art);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
#admin-view .approved-chart-area{fill:var(--art);opacity:.07;stroke:none}
#admin-view .approved-chart-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
#admin-view .approved-admin-node-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px}
#admin-view .approved-admin-node{padding:18px}
#admin-view .approved-admin-node header{display:flex;justify-content:space-between;gap:8px;font-size:13px}
#admin-view .approved-admin-node-gauge{display:flex;align-items:center;gap:12px;margin-top:20px;font-size:12px}
#admin-view .approved-admin-node-gauge small{color:var(--muted)}
#admin-view .approved-admin-node-gauge .approved-admin-ring{width:72px;height:72px}
#admin-view .approved-admin-node-gauge .approved-admin-ring>span{font-size:19px}
#admin-view .approved-admin-node-gauge .approved-admin-ring small{display:none}
#admin-view .approved-admin-missing-gauge{width:72px;height:72px;display:grid;place-items:center;border-radius:50%;background:var(--quiet);font-size:24px;color:var(--muted)}
@media(max-width:1000px){#admin-view .admin-asr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#admin-view .approved-admin-graphs{grid-template-columns:1fr}}
@media(max-width:700px){#admin-view .admin-users-list{grid-template-columns:1fr}#admin-view .approved-admin-surface{padding:20px}#admin-view .admin-asr-grid{gap:8px}#admin-view .approved-admin-node-grid{grid-template-columns:1fr}#admin-view .approved-admin-node{display:flex;align-items:center;justify-content:space-between;gap:12px}#admin-view .approved-admin-node header{flex-direction:column}#admin-view .approved-admin-node-gauge{margin-top:0}#admin-view .admin-users-list .admin-empty-state{grid-column:1/-1}}

#view-settings .approved-account-heading{display:flex;align-items:center;gap:16px;margin-bottom:30px}
#view-settings .approved-account-heading>div{flex:1;min-width:0}
#view-settings .approved-account-avatar{width:54px;height:54px;flex-shrink:0;border-radius:var(--radius);background:var(--quiet);color:var(--art);display:grid;place-items:center}
#view-settings .approved-account-avatar .theme-icon{width:24px;height:24px}
#view-settings #approvedAccountIdentity{overflow-wrap:anywhere}
#view-settings #approvedAccountPlan{background:var(--quiet);color:var(--art);font-size:12px;padding:6px 10px;border:0;border-radius:var(--radius)}
#view-settings .calendar-settings-section{background:color-mix(in srgb,var(--quiet) 55%,var(--bg));border:0;border-radius:var(--radius);padding:24px}
#view-settings .calendar-settings-section .calendar-settings-heading{border:0;padding:0;background:none}
#view-settings .calendar-settings-section .calendar-settings-heading strong{font-size:16px}
#view-settings .calendar-connection-copy{flex:1 1 200px}
#view-settings .settings-account-actions{display:flex;flex-direction:column;gap:0;border:0;padding:0;margin-top:20px}
#view-settings .settings-account-actions .approved-account-tool{display:flex;align-items:center;text-align:start;justify-content:flex-start;width:100%;gap:16px;padding:20px 8px;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:none;font:inherit;color:var(--fg)}
#view-settings .approved-account-tool>.theme-icon{width:20px;height:20px;color:var(--art);flex-shrink:0}
#view-settings .approved-account-tool>span:not(.theme-icon){flex:1;min-width:0}
#view-settings .approved-account-tool strong{font-size:14px;font-weight:600}
#view-settings .approved-account-tool small{display:block;font-size:12px;color:var(--muted);margin-top:6px}
#view-settings .approved-account-tool:hover{background:var(--hover)}
#view-settings .approved-account-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px}
#view-settings .approved-account-footer .settings-legal-links{border:0;padding:0;margin:0}
#view-settings .approved-account-footer #logoutBtn{display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--danger);width:auto;min-height:44px;font:inherit;font-size:13px}
@media(max-width:700px){#view-settings .approved-account-footer{align-items:flex-start;flex-direction:column}#view-settings .calendar-settings-section{padding:20px}}

#view-settings .calendar-settings-section .calendar-settings-heading{margin:0 0 12px;position:relative;padding-inline-end:40px}
#view-settings .calendar-settings-section .calendar-settings-heading:after{content:'';position:absolute;inset-inline-end:0;top:0;width:28px;height:28px;background:var(--art);mask:url(/icons/ui/calendar-day.svg) center/contain no-repeat;-webkit-mask:url(/icons/ui/calendar-day.svg) center/contain no-repeat}
#view-settings .calendar-settings-section .calendar-connection-copy>strong{display:none}
#view-settings .calendar-settings-section .calendar-connection-copy>span{margin:0}
#view-settings .calendar-settings-section .calendar-connection{margin:0;padding:0}
/* Keep utility pages at the approved workspace width instead of shrinking to their text. */
:is(#view-settings,#billing-view,#trash-view,#admin-view){width:100%;min-width:0}
#view-settings .settings-content:has(.settings-panel.active:is([data-settings-panel="account"],[data-settings-panel="support"],[data-settings-panel="admin"])) #approvedSettingsSaveState{display:none}

/* Live task components share the final approved preview geometry. */
#taskListContent .task-group-nav{display:flex;gap:8px;margin-bottom:20px}
#taskListContent .task-group-nav button{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--quiet);min-height:44px;font-size:12px;padding:8px 14px}
#taskListContent .task-group-nav svg{width:16px;height:16px;color:var(--art)}
#taskListContent .task-group-nav .task-tab-count{background:var(--bg);border-radius:99px;padding:1px 7px;color:var(--muted)}
#taskListContent .task-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
#taskListContent .task-section{min-width:0;padding:18px;border-radius:var(--radius);background:color-mix(in srgb,var(--quiet) 45%,var(--bg))}
#taskListContent .task-section[data-bucket=today]{background:color-mix(in srgb,var(--art) 8%,var(--bg))}
#taskListContent .task-section-heading{display:flex;align-items:center;gap:10px;margin-bottom:18px}
#taskListContent .task-section-heading>div:nth-child(2){min-width:0;flex:1}
#taskListContent .task-section-heading h2{font-size:16px;line-height:1.7;margin:0;scroll-margin-top:24px}
#taskListContent .task-section-heading p{font-size:11px;line-height:1.7;color:var(--muted);margin:2px 0 0}
#taskListContent .task-section-icon{width:36px;height:36px;display:grid;place-items:center;background:var(--bg);border-radius:10px;color:var(--art);flex-shrink:0}
#taskListContent .task-section-icon svg{width:20px;height:20px}
#taskListContent .task-section-count{font-size:13px;font-weight:700;color:var(--art);background:var(--bg);border-radius:99px;min-width:28px;height:28px;display:grid;place-items:center}
#taskListContent .task-section-cards{display:grid;gap:12px}
#taskListContent .task-card{padding:12px;border-radius:var(--radius);background:var(--bg);min-width:0}
#taskListContent .task-card-main{display:flex;align-items:flex-start;gap:6px}
#taskListContent .task-card-copy{min-width:0;flex:1;padding-top:7px}
#taskListContent .task-card-title{font-size:14px;font-weight:600;line-height:1.7;text-align:start;padding:0;background:transparent;min-height:0;overflow-wrap:anywhere}
#taskListContent .task-card-copy p{font-size:12px;line-height:1.8;color:var(--muted);margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#taskListContent .task-card-check{width:44px;height:44px;min-width:44px;min-height:44px;background:transparent;padding:0;position:relative;display:grid;place-items:center}
#taskListContent .task-card-check:before{content:'';position:absolute;inset:10px;border:1.5px solid var(--art);border-radius:6px;background:var(--bg)}
#taskListContent .task-card-check[aria-pressed=true]:before{background:var(--action)}
#taskListContent .task-card-check svg{position:relative;width:16px;height:16px;color:var(--on-action)}
#taskListContent .task-card-check:focus-visible:before,#taskListContent .task-card-check:hover:before{box-shadow:0 0 0 4px var(--quiet)}
#taskListContent .task-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:11px;color:var(--muted);margin:12px 0 4px}
#taskListContent .task-card-meta span{display:flex;align-items:center;gap:5px}
#taskListContent .task-card-meta svg{width:14px;height:14px}
#taskListContent .task-card-tags{display:flex;gap:5px;flex-wrap:wrap;min-width:0}
#taskListContent .task-card-tags span{font-size:10px;padding:3px 7px;border-radius:6px;line-height:1.7;max-width:100%;overflow-wrap:anywhere}
#taskListContent .task-priority{background:var(--quiet);color:var(--art)}
#taskListContent .task-reason.late{background:color-mix(in srgb,var(--danger) 8%,var(--bg));color:var(--danger)}
#taskListContent .task-reason.undated,#taskListContent .task-plan{background:var(--quiet);color:var(--muted)}
#taskListContent .task-card-actions{display:flex;gap:0;margin-inline-start:auto}
#taskListContent .task-card-actions .icon-button{width:44px;height:44px;min-height:44px;padding:12px}
#taskListContent .task-card-actions svg{width:18px;height:18px}
#taskListContent .task-is-done .task-card-title{text-decoration:line-through;color:var(--muted)}
#taskListContent .task-section-empty{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:32px 12px;color:var(--muted);font-size:13px;line-height:1.9}
#taskListContent .task-section-empty svg{width:26px;height:26px;color:var(--art)}
#taskListContent .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:800px) and (max-width:1099px){#taskListContent .task-board{grid-template-columns:repeat(2,minmax(0,1fr))}
#taskListContent .task-section[data-bucket=today]{grid-column:1/-1}
#taskListContent .task-section[data-bucket=today] .task-section-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:799px){#taskListContent .task-board{gap:20px}
#taskListContent .task-section{padding:14px}
#taskListContent .task-group-nav{gap:5px}
#taskListContent .task-group-nav button{flex:1;padding:8px 6px;font-size:11px;gap:5px}
#taskListContent .task-group-nav svg{display:none}
#taskListContent .task-group-nav .task-tab-count{padding:1px 5px}
#taskListContent .task-section-heading h2{font-size:17px}
#taskListContent .task-card-title{font-size:15px}
#taskListContent .task-card-tags span{font-size:11px}
#taskListContent .task-card-meta{font-size:12px}
}
#taskListContent .task-list-tabs{margin:22px 0 20px;justify-content:flex-start}
#taskListContent .task-list-tabs button{font-size:13px;min-height:48px;padding:10px 16px}
#taskListContent .task-list-tabs button[aria-selected=true]{background:var(--action);color:var(--on-action)}
#taskListContent .task-list-tabs button[aria-selected=true] svg{color:inherit}
#taskListContent .task-list-tabs button[aria-selected=true] .task-tab-count{background:color-mix(in srgb,var(--on-action) 16%,transparent);color:inherit}
#taskListContent .task-tabbed-board{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px}
#taskListContent .task-tabbed-board #task-main-panel{min-width:0}
#taskListContent .task-tabbed-board #task-main-panel .task-section{grid-column:auto}
#taskListContent .task-floating-search{position:fixed;left:88px;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:39;display:flex;direction:ltr;align-items:center;width:48px;height:48px;border-radius:12px;background:var(--quiet);box-shadow:0 4px 16px #0002;overflow:hidden;transition:width .38s cubic-bezier(.22,.8,.25,1),background .2s,box-shadow .2s}
#taskListContent .task-floating-search.is-open{width:min(380px,calc(100vw - 104px));background:var(--bg);box-shadow:0 6px 26px #0003}
#taskListContent .task-search-toggle{width:48px;height:48px;min-width:48px;min-height:48px;padding:14px;color:var(--art);background:transparent}
#taskListContent .task-search-toggle svg{width:20px;height:20px;transition:transform .38s}
#taskListContent .task-floating-search.is-open .task-search-toggle svg{transform:rotate(-12deg)}
#taskListContent .task-search-reveal{display:flex;align-items:center;direction:rtl;flex:1;min-width:0;opacity:0;transform:translateX(-10px);transition:opacity .2s,transform .3s;pointer-events:none}
#taskListContent .is-open .task-search-reveal{opacity:1;transform:none;pointer-events:auto;transition-delay:.1s}
#taskListContent .task-search-reveal input{width:100%;min-width:0;border:0;background:transparent;padding:8px 4px;font-size:14px;min-height:44px}
#taskListContent .task-search-reveal .icon-button{width:44px;height:44px;min-width:44px;min-height:44px;padding:13px;background:transparent}
#taskListContent .task-search-reveal .icon-button svg{width:18px;height:18px}
@media(max-width:1099px){#taskListContent .task-tabbed-board{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
#taskListContent .task-tabbed-board>.task-section{grid-column:auto}
}
@media(max-width:799px){#taskListContent .task-tabbed-board{grid-template-columns:1fr}
#taskListContent .task-list-tabs button{font-size:12px;padding:8px;flex:1}
#taskListContent .task-list-tabs{gap:6px;margin:18px 0}
}
@media(max-width:700px){#taskListContent .task-floating-search{left:76px;bottom:calc(80px + env(safe-area-inset-bottom,0px));height:44px;width:44px;border-radius:10px}
#taskListContent .task-search-toggle{width:44px;height:44px;min-width:44px;min-height:44px;padding:12px}
#taskListContent .task-floating-search.is-open{width:min(380px,calc(100vw - 92px))}
}
@media(prefers-reduced-motion:reduce){#taskListContent .task-floating-search,#taskListContent .task-search-reveal,#taskListContent .task-search-toggle svg{transition:none;transform:none}
}
#taskListContent .task-list-control-row{display:flex;align-items:center;gap:16px;position:relative;margin:22px 0 20px}
#taskListContent .task-list-control-row .task-list-tabs{margin:0;min-width:0}
#taskListContent .task-list-control-row .task-floating-search{position:relative;left:auto;bottom:auto;z-index:4;margin-inline-start:auto;flex-shrink:0;box-shadow:none;background:var(--quiet)}
#taskListContent .task-list-control-row .task-floating-search.is-open{width:min(380px,calc(100vw - 500px));box-shadow:none}
#taskListContent .task-list-control-row .task-search-reveal input{font-size:14px}
@media(max-width:700px){#taskListContent .task-list-control-row{gap:8px;margin:18px 0;min-height:44px}
#taskListContent .task-list-control-row .task-list-tabs{flex:1;gap:4px}
#taskListContent .task-list-control-row .task-list-tabs button{font-size:11px;padding:8px 5px;gap:4px;min-width:0;min-height:44px;white-space:nowrap}
#taskListContent .task-list-control-row .task-list-tabs .task-tab-count{padding:1px 4px}
#taskListContent .task-list-control-row .task-floating-search.is-open{position:absolute;left:0;right:0;width:100%}
#taskListContent .task-list-control-row:has(.task-floating-search.is-open) .task-list-tabs{visibility:hidden}
}
@media(min-width:701px) and (max-width:850px){#taskListContent .task-list-control-row .task-floating-search.is-open{width:240px}
#taskListContent .task-list-control-row .task-list-tabs button{padding:8px 10px}
}

#taskListContent .task-list-control-row{justify-content:flex-start;margin:14px 0 20px;direction:inherit}
#taskListContent .task-list-control-row .task-floating-search{margin-inline-start:0;position:relative;left:auto;bottom:auto;border-radius:var(--radius)}
#taskListContent .task-floating-search .theme-icon{width:18px;height:18px;flex-shrink:0}
#taskListContent .task-tabbed-board{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px;align-items:start}
#taskListContent .task-section{border:0;box-shadow:none}
#taskListContent button{font-family:inherit;color:inherit;border:0;cursor:pointer}
#taskListContent .task-card-title{width:auto;white-space:normal;text-align:start;overflow:visible}
#taskListContent .icon-button{background:transparent;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;min-height:44px}
#taskListContent .task-card-check:before{inset:13px;border-radius:4px}
#taskListContent .task-card-check .theme-icon{position:relative;width:13px;height:13px;color:var(--on-action)}
#taskListContent .task-card-actions .danger{color:var(--danger)}
#taskListContent .task-list-tabs .theme-icon{width:16px;height:16px;flex:none}
#taskListContent .task-section-icon .theme-icon{width:20px;height:20px}
#taskListContent .task-card-meta .theme-icon{width:14px;height:14px;flex:none}
#taskListContent .task-section-heading h2{letter-spacing:0}
#taskListContent .task-card-copy p{white-space:normal}
#taskListContent .task-search-reveal{direction:inherit}
#taskListContent .task-search-reveal input{box-shadow:none}
#taskListContent .task-section-empty .theme-icon{width:26px;height:26px;color:var(--art)}
@media(max-width:1099px){#taskListContent .task-tabbed-board{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
@media(max-width:799px){#taskListContent .task-tabbed-board{grid-template-columns:1fr}}
@media(max-width:700px){#taskListContent .task-list-control-row .task-floating-search.is-open{position:absolute;left:0;right:0;width:100%}#taskListContent .task-list-tabs{flex:1}}
#planModal.approved-plan-wizard .modal-header{display:none}
#planModal.approved-plan-wizard .modal-body{padding:28px}
#planModal.approved-plan-wizard .modal-footer{display:none}
#planModal.approved-plan-choice .modal{width:min(480px,calc(100vw - 32px));padding:26px}
#planModal.approved-plan-choice .modal-header,#planModal.approved-plan-choice .modal-body{padding:0;border:0}
#planModal.approved-plan-choice .modal-header{margin-bottom:16px}
#planModal .plan-choice-actions{display:flex;gap:10px;margin-top:24px}
#planModal .plan-choice-actions button{min-height:46px;padding:10px 18px;font:inherit;flex:1;border:0;border-radius:var(--radius);cursor:pointer}
#planModal .plan-choice-actions .primary{background:var(--action);color:var(--on-action)}
#planModal .plan-choice-actions .plain{background:var(--quiet);color:var(--fg)}
#view-timeline .timeline-header{padding-bottom:0}
#view-timeline #weekSelector{margin-top:18px;margin-bottom:0;padding:0;gap:6px}
#view-timeline>.view-body{flex:none;padding-top:10px;overflow:visible;min-height:0}
#view-timeline #timelineCalendarBody{padding-top:0}
#view-timeline #timelineContent:not(:has(.month-view)){height:clamp(440px,calc(100svh - 265px),740px);overscroll-behavior-y:auto;padding-top:12px}
#timelineCalendarControls>.timeline-nav-row{min-height:0;height:0}
#timelineCalendarControls .calendar-toolbar-actions{position:absolute;left:40px;top:24px;display:flex;flex-direction:row;direction:rtl;align-items:center;gap:8px}
#timelineCalendarControls #timelineTodayBtn{position:static;margin:0;height:46px;min-height:44px}
#timelineCalendarControls .month-zoom-toggle{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--quiet);color:var(--art);border:0;border-radius:var(--radius);font:inherit;font-size:12px;min-height:46px;padding:0 14px;cursor:pointer}
#timelineCalendarControls .month-zoom-toggle .theme-icon{width:16px;height:16px}
#view-chat .chat-voice-signal,#view-chat .chat-voice-bars>i,#view-chat .chat-voice-capture-copy{display:none}
#view-chat .chat-voice-bars{display:flex;position:static;flex:1;min-width:0;height:30px;align-items:center;background:none}
#view-chat #chatVoiceCapture .chat-voice-bars canvas{display:block;width:100%;height:28px;position:static;inset:auto;opacity:1}
#view-chat .chat-composer.is-recording #chatMicBtn{display:none!important}
#view-chat #chatVoiceCapture .chat-voice-cancel{width:40px;height:40px;min-width:40px;position:static;background:var(--action);color:var(--on-action);border:0;border-radius:var(--radius);display:grid;place-items:center}
#view-chat #chatVoiceCapture[data-state=preparing] .chat-voice-capture-copy,#view-chat #chatVoiceCapture[data-state=processing] .chat-voice-capture-copy{display:block;min-width:0;font-size:13px;color:var(--muted)}
#view-chat #chatVoiceCapture:not([data-state=recording]) .chat-voice-bars,#view-chat #chatVoiceCapture:not([data-state=recording]) time{display:none}
#view-chat .chat-composer.is-voice-error #chatVoiceErrorCard{margin:0;padding:10px;display:flex}
#view-chat #chatVoiceStatus{flex:1;margin:0;font-size:13px;line-height:1.8;background:none;border:0;padding:0}
#view-chat #chatVoiceRetryBtn{flex:none;border:0;background:none;color:var(--art);font:inherit;font-size:12px;min-height:44px;padding:0 8px}
#view-chat #chatVoiceDiscardBtn{flex:none;width:44px;min-height:44px;padding:10px;background:none;border:0;color:var(--muted)}

@media(max-width:768px){
 #timelineCalendarControls>.timeline-nav-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 0;min-height:44px;height:auto}
 #timelineCalendarControls #timelineDateNav{position:static;min-width:0;gap:0}
 #timelineCalendarControls .calendar-toolbar-actions{position:static;gap:5px;flex:none}
 #timelineCalendarControls #timelineTodayBtn{padding:0 13px;height:44px}
 #timelineCalendarControls .month-zoom-toggle{padding:0 10px;min-height:44px;height:44px}
 #timelineCalendarControls .month-zoom-toggle span:last-child{display:none}
 #view-timeline #weekSelector{margin-top:12px;min-height:0}
 #view-timeline #weekSelector .week-day-btn{min-height:64px}
 #view-timeline>.view-body{padding-top:8px}
 #view-timeline #timelineContent:not(:has(.month-view)){height:clamp(440px,calc(100svh - 230px),760px)}
}
@media(prefers-reduced-motion:reduce){#taskListContent .task-floating-search,#taskListContent .task-search-reveal{transition:none}}
/* The approved note gallery replaces the legacy lightbox only for note photos. */
#noteImageViewer{z-index:1800;padding:0;inset:0;align-items:stretch}
#noteImageViewer>.image-viewer{inset:auto;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:0;background:var(--bg);overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}
#noteImageViewer .dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:16px 28px;border-bottom:1px solid var(--rule)}
#noteImageViewer .dialog-heading small{font-size:11px;color:var(--muted)}
#noteImageViewer .dialog-heading h2{margin:4px 0 0;font-size:17px;line-height:1.6;font-weight:600}
#noteImageViewer button,#noteImageViewer a{font:inherit;cursor:pointer;border:0;text-decoration:none;color:var(--fg)}
#noteImageViewer .icon-button{width:44px;min-height:44px;display:grid;place-items:center;background:none;border-radius:var(--radius)}
#noteImageViewer .theme-icon{width:18px;height:18px;flex:none}
#noteImageViewer .gallery-workspace{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);min-height:0;overflow:auto;min-width:0;max-width:100%;direction:ltr}
#noteImageViewer .gallery-workspace figure{grid-column:2;grid-row:1;min-width:0;min-height:0;margin:0;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;direction:rtl}
#noteImageViewer figure img{width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 275px);object-fit:contain;background:none;border-radius:8px}
#noteImageViewer figcaption{padding:0;font-size:12px;color:var(--muted);text-align:center}
#noteImageViewer .gallery-description{direction:inherit;grid-column:1;grid-row:1;padding:28px 24px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:12px;text-align:start}
html[dir=rtl] #noteImageViewer .gallery-description{direction:rtl}
#noteImageViewer .gallery-description label{font-weight:600;font-size:14px}
#noteImageViewer .gallery-description p{font-size:12px;color:var(--muted);line-height:1.9;margin:0}
#noteImageViewer .gallery-description textarea{width:100%;min-height:150px;resize:vertical;border:0;background:var(--surface);border-radius:var(--radius);color:var(--fg);font:inherit;font-size:14px;padding:12px;line-height:1.9;box-shadow:none}
#noteImageViewer .gallery-description .image-context-hint{font-size:11px}
#noteImageViewer .gallery-footer{padding:12px 24px 18px;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0;max-width:100%}
#noteImageViewer .gallery-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#noteImageViewer .plain{min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;background:none;padding:0 10px;font-size:13px}
#noteImageViewer .primary{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--action);color:var(--on-action);min-height:44px;padding:0 16px;border-radius:var(--radius);font-size:13px}
#noteImageViewer .danger{color:var(--danger)}
#noteImageViewer #noteGallerySave{align-self:flex-start;min-width:86px;animation:arrive .18s ease-out}
#noteImageViewer .gallery-thumbnails{display:flex;gap:8px;overflow:auto;padding:4px;min-width:0;max-width:100%;scrollbar-width:none}
#noteImageViewer .gallery-thumbnail{width:68px;height:52px;flex:0 0 68px;overflow:hidden;padding:0;border-radius:calc(var(--radius)*.5);background:var(--quiet);opacity:.65}
#noteImageViewer .gallery-thumbnail[aria-pressed=true]{opacity:1;box-shadow:0 0 0 2px var(--art)}
#noteImageViewer .gallery-thumbnail img{width:100%;height:100%;object-fit:cover;display:block}
#noteModal .all-photos-card{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;margin:12px 0 18px;padding:12px 14px;background:var(--quiet);color:var(--fg);border:0;border-radius:calc(var(--radius)*.7);font:inherit;text-align:start;cursor:pointer}
#noteModal .all-photos-card strong{font-size:13px;font-weight:600}
#noteModal .all-photos-card span{font-size:11px;color:var(--muted)}
#noteModal .all-photos-card>.theme-icon:last-child{margin-inline-start:auto}
#view-notes .note-images{margin:-20px -20px 17px}
#view-notes .note-card .note-image{border:0;background:none;padding:0;cursor:pointer}
#view-notes .note-card-voice{display:flex;align-items:center;gap:8px;margin:17px 0 0;padding:10px 12px;min-height:44px;background:var(--quiet);border-radius:calc(var(--radius)*.65)}
#view-notes .note-card-play{width:32px;height:32px;flex:none;border:0;background:var(--action);color:var(--on-action);border-radius:calc(var(--radius)*.4);cursor:pointer}
#view-notes .note-card-wave{display:flex;align-items:center;height:26px;flex:1;gap:2px;color:var(--art);min-width:0;overflow:hidden}
#view-notes .note-card-wave i{height:var(--wave);background:currentColor;flex:1;min-width:1px}
#view-notes .note-card-audio-time{font-size:10px;color:var(--muted);direction:ltr;white-space:nowrap}
#view-notes .note-card-audio-time b,#view-notes .note-card-audio-current{display:none}
#view-notes .note-card-audio-progress{display:none}
#view-notes .note-card .note-top,#view-notes .note-card .note-open,#view-notes .note-card .note-bottom{position:relative;z-index:1}
@media(max-width:700px){
 #noteImageViewer .dialog-heading{padding:12px 16px}
 #noteImageViewer .dialog-heading h2{font-size:14px}
 #noteImageViewer .gallery-workspace{display:flex;flex-direction:column}
 #noteImageViewer .gallery-workspace figure{padding:16px;flex:none}
 #noteImageViewer figure img{max-height:38dvh;max-width:100%}
 #noteImageViewer .gallery-description{padding:16px;border:0;border-top:1px solid var(--rule);gap:8px}
 #noteImageViewer .gallery-description textarea{box-sizing:border-box;font-size:16px;line-height:1.75;padding:8px 12px;height:calc(3.5em + 18px);min-height:calc(3.5em + 18px);max-height:calc(8.75em + 18px);overflow-y:auto;resize:none}
 #noteImageViewer .gallery-footer{padding:8px 12px max(10px,env(safe-area-inset-bottom));gap:6px;flex-direction:column;align-items:stretch}
 #noteImageViewer .gallery-actions{justify-content:center;gap:4px;max-width:100%;align-self:flex-end}
 #noteImageViewer .gallery-actions .plain{font-size:11px;padding:0 8px}
 #noteImageViewer .gallery-actions .primary{font-size:11px;padding:0 10px;height:42px}
 #noteImageViewer .gallery-actions .theme-icon{width:15px;height:15px}
 #noteImageViewer .gallery-thumbnail{height:42px;width:56px;flex-basis:56px}
 #noteImageViewer .gallery-description .image-context-hint{font-size:11px}
}
@media(max-width:600px){#view-notes .note-images{margin:-12px -12px 12px;height:130px}#view-notes .note-images.single{height:140px}#view-notes .note-card-voice{padding:5px 7px;min-height:26px;gap:6px}#view-notes .note-card-play{width:20px;height:20px;min-height:20px}#view-notes .note-card-audio-time{display:none}#view-notes .note-card-wave{height:20px}}
#taskListContent .task-search-reveal{direction:rtl}
html[dir=ltr] #taskListContent .task-search-reveal{direction:ltr}
#taskListContent .task-list-tabs button[aria-selected=true]{color:var(--on-action)}
#taskListContent .task-list-tabs .theme-icon{color:inherit}

/* Active capture occupies one row; legacy textarea sizing must not leak into it. */
#view-chat .chat-composer.is-recording #chatInput{display:none!important}
#view-chat #chatVoiceCapture .chat-voice-bars canvas{flex:none;width:100%}
#view-chat #chatVoiceCapture[data-state=preparing] .chat-voice-capture-copy small,#view-chat #chatVoiceCapture[data-state=processing] .chat-voice-capture-copy small{display:none}
#view-chat #chatVoiceCapture .chat-voice-capture-copy{flex:1;font-weight:400}
#view-chat #chatVoiceCapture .chat-voice-capture-copy strong{font-weight:400}
#view-chat .chat-processing-dots{display:flex;align-items:center;justify-content:space-evenly;width:100%;gap:12px;color:var(--art)}
#view-chat .chat-processing-dots i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:capture-wait 1.2s ease-in-out infinite;animation-delay:calc(var(--dot-index)*.14s)}
#view-chat .chat-processing-dots i:nth-child(1){--dot-index:0}
#view-chat .chat-processing-dots i:nth-child(2){--dot-index:1}
#view-chat .chat-processing-dots i:nth-child(3){--dot-index:2}
#view-chat .chat-processing-dots i:nth-child(4){--dot-index:3}
#view-chat .chat-processing-dots i:nth-child(5){--dot-index:4}
#view-chat #chatVoiceCapture .chat-voice-capture-copy strong,#view-chat #chatVoiceCapture .chat-voice-capture-copy small{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes capture-wait{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){#view-chat .chat-processing-dots i{animation:none;opacity:.6}}
@media(min-width:769px){#timelineCalendarControls .month-zoom-toggle{display:none}}
/* Recovery stays in the composer's flow instead of the old absolute overlay. */
#view-chat .chat-composer.is-voice-error{height:auto;min-height:0}
#view-chat .chat-composer.is-voice-error #chatVoiceErrorCard{position:static;inset:auto;transform:none;height:auto;min-height:60px;margin-top:10px;padding:8px 12px;flex-wrap:nowrap;gap:16px}
#view-chat #chatVoiceCapture[data-state=preparing] .chat-voice-capture-copy,#view-chat #chatVoiceCapture[data-state=processing] .chat-voice-capture-copy{display:flex;align-items:center;gap:8px}
#view-chat .chat-voice-capture-copy strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:700px){#view-chat #chatVoiceStatus{font-size:12px}#view-chat #chatVoiceRetryBtn{font-size:11px;padding:0 4px}}
#view-chat #chatVoiceErrorCard{direction:rtl}
html[dir=ltr] #view-chat #chatVoiceErrorCard{direction:ltr}

/* Approved recording composition, mapped to the live recorder controls. */
#view-record{padding:0;font-size:15px;line-height:1.7}
#view-record .record-body.record-page{position:relative;width:100%;max-width:1000px;min-height:100%;margin:auto;padding:72px 40px 48px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0;overflow:visible;box-sizing:border-box}
#view-record .capture-stage{position:relative;flex-shrink:0;min-height:0;padding:0;margin:0;background:none;border:0;border-radius:0;overflow:visible;text-align:center}
#view-record .stage-heading{display:flex;align-items:center;justify-content:center;min-height:21px;font-size:12px;color:var(--muted)}
#view-record .stage-tag,#view-record .stage-foot,#view-record .capture-stage[data-state=idle] .stage-heading{display:none}
#view-record #approvedRecordLive{display:flex;align-items:center;gap:8px;color:var(--danger)}
#view-record #approvedRecordLive i{width:5px;height:5px;border-radius:50%;background:currentColor}
#view-record .record-center{padding:0 0 24px;text-align:center}
#view-record .record-ring{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:196px;margin:0 0 20px;border:0;border-radius:0;box-shadow:none;background:none;transform:none}
#view-record .record-ring::before,#view-record .record-ring::after{display:none}
#view-record #recordBtn{position:static;inset:auto;display:grid;place-items:center;flex:none;width:160px;height:160px;min-height:0;padding:0;margin:0;background:var(--action);color:var(--on-action);border:0;border-radius:var(--radius);box-shadow:none;transform:none;transition:transform .22s ease,opacity .22s ease}
#view-record #recordBtn:hover{transform:scale(1.04)}
#view-record #recordBtn:disabled{opacity:.45;transform:none}
#view-record #recordBtn .theme-icon{width:62px!important;height:62px!important}
#view-record #approvedRecordHint{margin:8px 0 0;font-size:14px;line-height:1.7;color:var(--muted)}
#view-record .capture-stage[data-state=idle] #approvedRecordHint{margin-top:-22px}
#view-record #recorderStatus{font-size:16px;line-height:1.7;font-weight:600;min-height:0;margin:0;color:var(--fg)}
#view-record #recorderStatus:empty{display:none}
#view-record .timer-wrap{position:static;display:flex;flex-direction:column;align-items:center;margin:0}
#view-record #timer{position:static;inset:auto;transform:none;text-align:center;direction:ltr;font-size:46px;font-weight:700;line-height:1.2;letter-spacing:1px;color:var(--fg)}
#view-record #timer-label{font-size:11px;color:var(--muted);margin-top:8px}
#view-record .capture-stage:not([data-state=idle]) .record-center{padding:0 0 10px}
#view-record .capture-stage:not([data-state=idle]) #timer{margin-top:0;margin-bottom:-15px}
#view-record .capture-stage:not([data-state=idle]) .record-ring{height:90px;margin:12px 0}
#view-record .capture-stage:not([data-state=idle]) #recordBtn{display:none}
#view-record .capture-stage[data-state=paused] #approvedRecordHint{display:none}
#view-record #waveform{position:static;inset:auto;transform:none;display:none;width:min(550px,100%);height:64px;align-items:center;justify-content:center;gap:1.4px;direction:ltr;mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)}
#view-record .capture-stage:not([data-state=idle]) #waveform{display:flex}
#view-record #waveform .wf-bar{position:static;flex:none;width:1.2px;min-width:1.2px;max-width:1.2px;height:64px;margin:0;background:var(--art);border-radius:1px;transform:scaleY(var(--wave-scale,.2));opacity:.7}
#view-record .recorder-controls{position:static;inset:auto;transform:none;display:flex;justify-content:center;align-items:center;gap:18px;padding:15px 0 12px;margin:0;direction:inherit}
#view-record .recorder-controls button{position:static;inset:auto;transform:none;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:var(--radius);box-shadow:none;display:flex;align-items:center;justify-content:center}
#view-record .recorder-controls .theme-icon{width:18px;height:18px}
#view-record #pauseBtn{order:0;color:var(--fg);background:none}
#view-record #stopBtn{order:1;width:60px;min-width:60px;background:var(--action);color:var(--on-action)}
#view-record #discardBtn{order:2;color:var(--danger);background:none}
#view-record .capture-stage[data-state=paused] #pauseBtn{width:auto;min-width:145px;padding:0 14px;background:var(--quiet);color:var(--action);gap:8px;font:inherit;font-size:12px}
#view-record .capture-alternatives{position:relative;flex-shrink:0;display:flex;justify-content:center;align-items:center;width:max-content;max-width:100%;margin:0 auto;padding:0;gap:0;border:0}
#view-record .capture-option{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 28px;min-height:48px;font:inherit;font-size:13px;line-height:1.6;border:0;border-radius:var(--radius);color:var(--muted);background:none;white-space:nowrap;transition:background .18s,color .18s}
#view-record .capture-option svg{width:21px;height:21px;flex-shrink:0;color:var(--art)}
#view-record .capture-option:hover{background:var(--quiet);color:var(--action)}
#view-record #voiceAvailability{margin:16px 0 0;padding:0;font-size:12px;line-height:1.8;text-align:center;background:none;border:0;color:var(--muted)}
#view-record:has(.capture-stage:not([data-state=idle])) #voiceAvailability{display:none!important}
@media(max-width:700px){
 #view-record .record-body.record-page{max-width:none;padding:64px 22px 24px}
 #view-record .record-ring{height:186px}
 #view-record #recordBtn{width:144px;height:144px}
 #view-record #recordBtn .theme-icon{width:56px!important;height:56px!important}
 #view-record .capture-alternatives{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 #view-record .capture-option{flex-direction:column;gap:10px;padding:6px 5px;font-size:11px;min-height:77px;white-space:normal;text-align:center}
 #view-record .capture-option svg{width:23px;height:23px}
 #view-record #timer{font-size:42px}
 #view-record .capture-stage:not([data-state=idle]) .record-ring{height:85px}
 #view-record #waveform,#view-record #waveform .wf-bar{height:52px}
 #view-record .recorder-controls{gap:16px;padding-bottom:15px}
}
@media(prefers-reduced-motion:reduce){#view-record #recordBtn{transition:none}}

/* Match the approved library controls and card media without legacy badge styling. */
#taskListContent .task-list-tabs .theme-icon{display:inline-block;background-color:currentColor;padding:0;border-radius:0;color:var(--art)}
#taskListContent .task-list-tabs button[aria-selected=true] .theme-icon{color:var(--on-action)}
#view-notes .library-card-grid{gap:18px}
#view-notes .note-bottom{border:0;margin-top:0;padding-top:9px;min-height:50px}
#view-notes .folder-chip{display:flex;align-items:center;gap:10px}
#view-notes .folder-chip .theme-icon{flex:none;color:var(--muted)}
#view-notes .note-card-voice.site-audio{display:grid;grid-template-columns:32px 30px minmax(0,1fr) 32px 32px;grid-template-rows:32px;align-items:center;gap:6px;direction:ltr;margin:17px 0 0;padding:8px;min-height:0;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
#view-notes .site-audio .audio-left,#view-notes .site-audio .audio-right{display:contents;direction:ltr}
#view-notes .site-audio .audio-left{flex:none}
#view-notes .site-audio .audio-right{flex:1;min-width:0}
#view-notes .site-audio .audio-play{grid-column:1;grid-row:1;min-width:32px;width:32px;height:32px;min-height:32px;flex:none;padding:0;border:0;border-radius:calc(var(--radius)*.4);background:var(--action);color:var(--on-action)}
#view-notes .site-audio .audio-counter{grid-column:2;grid-row:1;display:block;min-width:26px;font-size:10px;text-align:center;color:var(--muted);direction:ltr;white-space:nowrap}
#view-notes .site-audio .audio-track{grid-column:3;grid-row:1;width:100%;position:relative;flex:1;min-width:0;height:32px;direction:ltr}
#view-notes .site-audio .audio-progress-line{position:absolute;top:14px;left:0;right:0;height:4px;background:var(--rule)}
#view-notes .site-audio .note-card-audio-progress{position:static;display:block;height:100%;width:100%;overflow:visible;background:none;opacity:1}
#view-notes .site-audio .note-card-audio-progress i{position:relative;display:block;height:100%;width:100%;background:var(--action);transform-origin:left}
#view-notes .site-audio .library-audio-thumb{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:var(--action);transform:translate(-50%,-50%);pointer-events:none}
#view-notes .site-audio .audio-seek{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;opacity:0;cursor:pointer;direction:ltr}
#view-notes .site-audio .audio-speed,#view-notes .site-audio .audio-download{display:flex;align-items:center;justify-content:center;flex:none;width:32px;min-width:32px;height:32px;min-height:32px;padding:0;font:inherit;font-size:10px;border:1px solid var(--rule);border-radius:calc(var(--radius)*.4);background:none;color:var(--muted)}
#view-notes .site-audio .audio-speed{grid-column:4;grid-row:1}
#view-notes .site-audio .audio-download{grid-column:5;grid-row:1}
#view-notes .site-audio .audio-download .theme-icon{width:16px;height:16px}
@media(max-width:600px){
 #view-notes .library-card-grid{gap:12px}
 #view-notes .library-search{height:46px;min-height:46px}
 #view-notes .folder-chip{gap:6px}
 #view-notes .library-layout-grid .site-audio{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:32px;gap:0 6px;padding:5px 7px;margin-top:12px}
 #view-notes .library-layout-grid .site-audio .audio-left,#view-notes .library-layout-grid .site-audio .audio-right{display:contents}
 #view-notes .library-layout-grid .site-audio .audio-speed,#view-notes .library-layout-grid .site-audio .audio-download{display:none}
 #view-notes .library-layout-grid .site-audio .audio-counter{display:block;grid-column:2;grid-row:1;align-self:end;justify-self:end;font-size:9px;line-height:10px;pointer-events:none}
 #view-notes .library-layout-grid .site-audio .audio-play{grid-column:1;grid-row:1;width:32px;min-width:32px;height:32px;min-height:32px;border-radius:5px}
 #view-notes .library-layout-grid .site-audio .audio-track{grid-column:2;grid-row:1;width:100%;height:32px}
 #view-notes .library-layout-grid .site-audio .audio-progress-line{top:14.5px;height:3px}
 #view-notes .library-layout-grid .site-audio .library-audio-thumb{width:8px;height:8px}
}
/* The library folders control includes its label, unlike the retired icon-only control. */
#view-notes #folderBtn.folders-manage{width:auto;min-width:100px;height:50px;min-height:50px;flex:0 0 auto;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:10px}
#view-notes #folderBtn.folders-manage span{font-size:13px;white-space:nowrap}

/* Native view-body and starter sizing must follow the approved chat composition. */
#view-chat>.view-body.chat-layout{padding:0;gap:0}
#view-chat .starter-list button{flex:0 0 auto;min-height:0;border:0;color:var(--fg)}
#view-chat .welcome-heart{flex:none}
#view-chat .welcome h1{margin-top:-8px;font-size:32px;font-weight:800;line-height:1.35;letter-spacing:-.8px}
#view-chat #newChatBtn{flex-direction:row;direction:rtl}
html[dir=ltr] #view-chat #newChatBtn{flex-direction:row}
@media(max-width:700px){#view-chat .welcome h1{margin-top:-8px;font-size:30px}#view-chat .starter-list{width:min(320px,100%)}#view-chat .starter-list button{width:100%}#view-chat .chat-composer.is-voice-error #chatVoiceErrorCard{flex-wrap:wrap;gap:3px;padding:9px 10px}}
/* Planner scroll ownership: the outer view scrolls, then the timed canvas can chain into it. */
#main #view-timeline.active,#main #view-plans.active{overflow-y:auto;overflow-x:hidden;min-height:0;overscroll-behavior-y:auto;scrollbar-width:none}
#main #view-timeline.active::-webkit-scrollbar,#main #view-plans.active::-webkit-scrollbar{display:none}
#view-timeline>.timeline-header,#view-plans>.view-header{flex:none;height:auto;overflow:visible}
#view-plans>.view-body{flex:none;overflow:visible}
#view-timeline #weekSelector{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:100%;max-width:100%;min-width:0;justify-content:normal}
#view-timeline #weekSelector .week-day-btn{min-width:0;width:auto;max-width:100%;margin:0}
#view-timeline #weekSelector .week-day-name{font-size:clamp(8px,2.2vw,12px);white-space:nowrap}
#view-plans .planner-mode-switch{height:auto;min-height:50px;padding:0;flex:none}
/* Compact task groups share one responsive layout, with attention items first. */
#taskListContent .task-board.task-board-compact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px}
#taskListContent .task-board-compact>.task-list-unattended,#taskListContent .task-board-compact>.task-section[data-bucket=completed]{grid-column:1/-1}
#taskListContent .task-board-compact .task-section{padding:16px;min-width:0}
#taskListContent .task-board-compact .task-section-heading{display:block;padding:0;margin:0;font-size:15px}
#taskListContent .task-section-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;text-align:start;border:0;background:none;color:var(--fg);font:inherit;font-weight:600;padding:0;cursor:pointer}
#taskListContent .task-section-toggle .task-section-icon{width:30px;height:30px;flex:none}
#taskListContent .task-section-toggle .task-section-count{margin-inline-start:auto;min-width:24px;height:24px;font-size:11px}
#taskListContent .task-board-compact .task-section-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding-top:12px}
#taskListContent .task-board-compact>.task-list-unattended .task-section-cards,#taskListContent .task-board-compact>.task-section[data-bucket=completed] .task-section-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
#taskListContent .task-disclosure{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .32s cubic-bezier(.2,.8,.2,1),opacity .22s ease}
#taskListContent .task-disclosure.is-open{grid-template-rows:1fr;opacity:1}
#taskListContent .task-disclosure-inner{min-height:0;overflow:hidden}
#taskListContent .task-card.task-compact{padding:10px 12px;min-height:0}
#taskListContent .task-compact .task-card-main{display:flex;align-items:center;gap:6px;min-height:44px}
#taskListContent .task-compact .task-card-check:before{inset:13px}
#taskListContent .task-compact .task-card-check{flex:0 0 44px;width:44px;height:44px;min-height:44px}
#taskListContent .task-compact .task-card-copy{flex:1;min-width:0}
#taskListContent .task-compact .task-card-title{font-size:14px;line-height:1.6;min-height:0;padding:0;text-align:start}
#taskListContent .task-compact .task-card-meta{margin:3px 0 0;font-size:11px;line-height:1.6;color:var(--muted)}
#taskListContent .task-details-toggle{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;border-radius:var(--radius);color:var(--muted);cursor:pointer}
#taskListContent .task-chevron{display:block;flex:none;width:7px;height:7px;border-bottom:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s ease;margin:0 5px}
#taskListContent [aria-expanded=true]>.task-chevron{transform:rotate(225deg) translate(-1px,-1px)}
#taskListContent .task-details-content{padding:8px 4px 0;line-height:1.8;font-size:12px;color:var(--muted)}
#taskListContent .task-details-content p{margin:0 0 8px;white-space:pre-wrap;overflow-wrap:anywhere}
#taskListContent .task-details-content .task-card-actions{justify-content:flex-end;gap:0;margin:0}
#taskListContent .task-details-content .task-card-actions .icon-button{width:44px;height:44px;min-height:44px;padding:14px}
#taskListContent .task-details-content .task-card-actions .theme-icon{width:16px;height:16px}
#taskListContent .task-section-empty{padding:12px;font-size:12px}
#taskListContent .task-section-toggle:hover,#taskListContent .task-details-toggle:hover{color:var(--art)}
/* The note composer uses the approved full-width recording strip and compact playback strip. */
#newNoteModal .note-composer-tools{transition:opacity .2s ease}
#newNoteModal .note-composer-tools.is-recording{display:none}
#newNoteModal .note-recording-bar{display:flex;align-items:center;gap:8px;height:48px;padding:2px 6px;border:0;border-radius:var(--radius);background:var(--surface);color:var(--art);overflow:hidden;animation:note-recorder-in .25s ease-out}
#newNoteModal .note-recording-bar.hidden{display:none}
#newNoteModal .note-recording-bar canvas{flex:1;width:0;min-width:0;height:34px;color:var(--art)}
#newNoteModal .note-recording-bar time{font-size:12px;direction:ltr;min-width:34px;color:var(--muted)}
#newNoteModal .note-recording-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--danger)}
#newNoteModal #newNoteVoiceStop,#newNoteModal #newNoteVoiceDiscard{flex:0 0 44px;width:44px;height:44px;min-height:44px;display:grid;place-items:center;padding:0;border:0}
#newNoteModal #newNoteVoiceStop{background:var(--action);color:var(--on-action);border-radius:var(--radius)}
#newNoteModal #newNoteVoiceDiscard{background:none;color:var(--muted)}
#newNoteModal .note-stop-square{width:12px;height:12px;background:currentColor;border-radius:2px}
#newNoteModal .note-composer-player{display:flex;align-items:center;gap:8px;direction:ltr;padding:8px 0;margin-top:12px;min-height:44px;background:none;border:0}
#newNoteModal .note-composer-player .audio-left{display:flex;align-items:center;gap:5px;flex:none}
#newNoteModal .note-composer-player .audio-right{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
#newNoteModal .note-composer-player .audio-btn,#newNoteModal .note-composer-player .audio-download{width:32px;height:32px;min-width:32px;min-height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius)}
#newNoteModal .note-composer-player .audio-btn{background:var(--action);color:var(--on-action)}
#newNoteModal .note-composer-player .audio-download{background:none;color:var(--muted)}
#newNoteModal .note-composer-player .audio-time{font-size:10px;color:var(--muted)}
#newNoteModal .note-composer-player [data-audio-current]{display:none}
#newNoteModal .note-composer-player .audio-progress{flex:1;min-width:0;background:var(--quiet);height:3px;margin:0;position:relative}
#newNoteModal .note-composer-player .audio-progress:before{content:'';position:absolute;inset:-20px 0}
#newNoteModal .note-composer-player .audio-progress-fill{background:var(--art);height:100%}
#newNoteModal .note-composer-player .audio-progress-thumb{background:var(--art);width:6px;height:6px}
#newNoteModal .note-composer-player .audio-speed{font-size:10px;padding:0;min-width:32px;height:32px;background:none;border:0;color:var(--muted)}
@keyframes note-recorder-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:768px){
 #taskListContent .task-board.task-board-compact{grid-template-columns:minmax(0,1fr);gap:12px}
 #taskListContent .task-board-compact>.task-list-unattended .task-section-cards,#taskListContent .task-board-compact>.task-section[data-bucket=completed] .task-section-cards{grid-template-columns:minmax(0,1fr)}
 #taskListContent .task-board-compact .task-section{padding:12px}
 #taskListContent .task-list-tabs{display:flex;gap:3px;flex-wrap:nowrap}
 #taskListContent .task-list-tabs [role=tab]{min-height:44px;padding:0 9px;font-size:12px;gap:5px;white-space:nowrap}
 #taskListContent .task-tab-count{font-size:10px;min-width:18px;height:18px}
 #view-plans>.view-header{padding-bottom:6px;min-height:70px}
}
@media(prefers-reduced-motion:reduce){#taskListContent .task-disclosure,#taskListContent .task-chevron{transition:none}#newNoteModal .note-recording-bar{animation:none}}

/* Composer fields retain their border while focus adds only a quiet glow. */
#newNoteModal :is(.note-composer-modal,.modal-body,textarea){scrollbar-width:none}
#newNoteModal :is(.note-composer-modal,.modal-body,textarea)::-webkit-scrollbar{display:none}
#newNoteModal :is(#newNoteTitle,#newNoteBody):focus{outline:0;border-color:var(--rule);box-shadow:0 0 12px color-mix(in srgb,var(--art) 7%,transparent)}
#newNoteModal .note-composer-clip{margin-top:14px;padding-top:10px;border-top:1px solid var(--rule);min-width:0}
#newNoteModal .note-clip-label{font-size:11px;color:var(--muted)}
#newNoteModal .note-composer-player{margin-top:2px}
#newNoteModal .note-clip-transcript{font-size:14px;line-height:1.8;margin:8px 0;white-space:pre-wrap;overflow-wrap:anywhere}
#newNoteModal .note-clip-retry{font-size:12px;min-height:36px}
#newNoteModal .note-composer-player .audio-progress{max-width:none}
/* Share the send control's dimensions with recording actions on each layout. */
#view-chat{--chat-control-size:44px}
#view-chat #chatSendBtn,#view-chat #chatVoiceCapture .chat-voice-cancel{width:var(--chat-control-size);height:var(--chat-control-size);min-width:var(--chat-control-size);min-height:var(--chat-control-size);max-height:var(--chat-control-size);flex:0 0 var(--chat-control-size);padding:0;box-sizing:border-box;aspect-ratio:1}
#view-chat #chatVoiceCapture{height:var(--chat-control-size)}
@media(max-width:600px){#view-chat{--chat-control-size:38px}}

/* Note media uses the same compact controls in the reader and the library. */
#noteModal #noteAudioPlayer{display:flex;direction:ltr;align-items:center;gap:10px;width:100%;padding:8px 0;margin:0;background:none;border:0;min-height:40px}
#noteModal #noteAudioPlayer .audio-left,#noteModal #noteAudioPlayer .audio-right{display:flex;flex-direction:row;align-items:center;gap:8px;direction:ltr}
#noteModal #noteAudioPlayer .audio-left{flex:none}
#noteModal #noteAudioPlayer .audio-right{flex:1;min-width:0}
#noteModal #noteAudioPlayer :is(.audio-btn,.audio-speed,.audio-download){flex:0 0 32px;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;display:grid;place-items:center;border-radius:calc(var(--radius)*.4)}
#noteModal #noteAudioPlayer .audio-btn{background:var(--action);color:var(--on-action)}
#noteModal #noteAudioPlayer .audio-btn .theme-icon{width:14px;height:14px;color:inherit}
#noteModal #noteAudioPlayer .audio-speed,#noteModal #noteAudioPlayer .audio-download{background:none;border:1px solid var(--rule);color:var(--muted);font-size:10px}
#noteModal #noteAudioPlayer .audio-time{font-size:10px;min-width:30px;color:var(--muted)}
#noteModal #noteAudioPlayer .audio-progress{flex:1;min-width:0;max-width:none;height:3px;margin:0;background:var(--rule)}
#noteModal #noteAudioPlayer .audio-progress::before{content:'';position:absolute;inset:-14px 0}
#noteModal #noteAudioPlayer .audio-progress-fill{background:var(--action)}
#noteModal #noteAudioPlayer .audio-progress-thumb{left:0;width:10px;height:10px;background:var(--action);border-radius:50%}
#noteModal #noteAudioPlayer .audio-progress-thumb:active{transform:translate(-50%,-50%)}
#noteModal .note-photo-row .note-image-tile{padding:0;border:0;display:block}
#noteModal .note-photo-row .note-image-tile[hidden],#noteModal .note-photo-section>.all-photos-card[hidden]{display:none}
#view-notes .site-audio .audio-track:focus-within{border-radius:4px;box-shadow:0 0 0 2px color-mix(in srgb,var(--art) 25%,transparent)}
#newNoteModal .chat-attach-thumb .chat-attach-remove{width:24px;height:24px;min-width:24px;min-height:24px;max-width:24px;max-height:24px;padding:0;line-height:1;display:grid;place-items:center;border-radius:50%;font-size:20px}
#view-chat .chat-bubble.user .bubble-content>:first-child{margin-top:0}
#view-chat .chat-bubble.user .bubble-content>:last-child{margin-bottom:0}
#taskListContent .task-board-compact>.task-list-unattended{background:color-mix(in srgb,var(--danger) 7%,var(--surface));border-inline-start:3px solid color-mix(in srgb,var(--danger) 65%,var(--rule))}
#taskListContent .task-list-unattended .task-section-icon{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
@media(max-width:768px){
 #view-notes .library-heading{display:none}
 #view-notes .library-tools{gap:12px;margin-top:0}
 #view-notes .library-search{flex:1;min-width:0}
 #view-notes #folderBtn.folders-manage{width:46px;min-width:46px;height:46px;min-height:46px;padding:0;gap:0}
 #view-notes #folderBtn.folders-manage span{display:none}
 #noteModal .note-browser-toggle{display:none}
 #view-chat .chat-bubble.user .bubble-content{padding:6px 10px}
}

/* Final reviewed Settings: one profile field, explicit save, separate support page. */
html body #view-settings>.settings-body{padding:0;max-width:none;overflow:visible}
#view-settings .workspace-layout{grid-template-columns:180px minmax(0,1fr)}
#view-settings .settings-tab.active{font-weight:600}
#view-settings .setting-row{min-height:72px}
#view-settings .setting-row>div:first-child{flex:1;min-width:0;font-size:14px}
#view-settings .setting-row small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
#view-settings .time-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:46px;border-radius:var(--radius);padding:12px 14px;background:var(--quiet);font:inherit;color:var(--fg)}
#view-settings .time-entry .theme-icon{width:18px;height:18px;color:var(--art)}
#view-settings .time-entry:disabled{opacity:.45;cursor:default}
#view-settings .about-save{display:flex;align-items:center;gap:16px;animation:settings-save-reveal .4s cubic-bezier(.2,.7,.2,1)}
#view-settings .about-save[hidden]{display:none}
#view-settings .about-save button{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;background:var(--action);color:var(--on-action);border:0;border-radius:var(--radius);font:inherit;font-size:14px}
#view-settings .about-save .theme-icon{width:18px;height:18px}
#view-settings .about-save .hint{font-size:12px;color:var(--muted)}
#view-settings .support-entry{display:flex;gap:12px;flex-wrap:wrap}
#view-settings .support-entry button{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--radius);min-height:44px;padding:10px 18px;font:inherit;font-size:14px;background:var(--quiet);color:var(--fg)}
#view-settings .support-entry .primary-btn{background:var(--action);color:var(--on-action)}
#view-settings .support-entry .theme-icon{width:18px;height:18px}
#view-settings .support-summary{display:flex;gap:12px;align-items:center;margin-top:32px;color:var(--muted);font-size:13px}
#view-settings .support-summary strong{font-size:26px;color:var(--fg)}
#support-view{padding:44px 48px 100px}
#support-view>.view-header{padding:0;margin-bottom:28px;background:none;border:0;display:flex;align-items:center;justify-content:space-between}
#support-view h1{font-size:30px;margin:0}
#support-view>.view-header p{font-size:13px;color:var(--muted);margin:6px 0 0}
html body #support-view>.view-body{padding:0;max-width:none;overflow:visible;width:100%}
#support-view .ticket-tabs{display:inline-flex;gap:4px;background:var(--quiet);padding:4px;border-radius:var(--radius);margin-bottom:32px}
#support-view .ticket-tabs button{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:0;border-radius:var(--radius);font:inherit;font-size:14px;background:none;color:var(--fg)}
#support-view .ticket-tabs button[aria-pressed=true]{background:var(--action);color:var(--on-action)}
#support-view .theme-icon{width:18px;height:18px}
#support-view .support-ticket-form{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
#support-view #supportTicketSubject,#support-view #supportTicketCategory{grid-row:2}
#support-view label[for=supportTicketMessage],#support-view #supportTicketMessage,#support-view .support-form-actions{grid-column:1/-1}
#support-view .support-ticket-form>label{font-size:14px;margin-top:14px}
#support-view :is(input,textarea,select){background:var(--quiet);border:0;border-radius:var(--radius);padding:12px 14px;color:var(--fg);font:inherit;width:100%;min-width:0}
#support-view #supportTicketMessage{min-height:300px;resize:vertical}
#support-view .support-form-actions{display:flex;gap:12px;justify-content:flex-start;margin-top:18px}
#support-view .support-form-actions button,#support-view>.view-header button{min-height:44px;padding:10px 18px;border:0;border-radius:var(--radius);font:inherit;font-size:14px;background:var(--quiet);color:var(--fg)}
#support-view .support-form-actions .primary-btn{order:-1;background:var(--action);color:var(--on-action)}
#support-view .ticket-history{display:grid;gap:14px}
#support-view .support-ticket-row{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:start;width:100%;font:inherit;padding:22px;min-height:96px;background:color-mix(in srgb,var(--quiet) 55%,var(--bg));border:0;border-radius:var(--radius);color:var(--fg)}
#support-view .support-ticket-row strong{font-size:15px}
#support-view .support-ticket-row small{display:block;font-size:12px;color:var(--muted);margin-top:8px}
#support-view .admin-status-badge{font-size:11px;padding:4px 8px;background:var(--quiet);border-radius:calc(var(--radius)*.65);color:var(--muted);white-space:nowrap}
#support-view .support-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
#support-view .support-detail-head h3{font-size:20px;margin:0 0 8px}
#support-view .support-detail-head p{font-size:12px;color:var(--muted)}
#support-view .support-message{padding:20px;margin-top:14px;background:var(--quiet);border:0;border-radius:var(--radius);font-size:14px}
#support-view .support-message:nth-child(even){background:color-mix(in srgb,var(--quiet) 45%,var(--bg))}
#support-view .support-message header{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);margin-bottom:12px}
#support-view .support-message p{margin:0;line-height:1.9}
#support-view .support-reply-box{border-top:1px solid var(--rule);padding-top:24px;margin-top:28px}
#support-view .support-reply-box label{display:block;font-size:14px;margin-bottom:8px}
#support-view #supportReplyMessage{min-height:150px}
@keyframes settings-save-reveal{from{opacity:0;filter:blur(7px);transform:translateY(-14px)}to{opacity:1;filter:blur(0);transform:none}}
@media(max-width:900px){#view-settings .workspace-layout{grid-template-columns:160px minmax(0,1fr)}#support-view{padding:36px 24px 100px}}
@media(max-width:700px){#view-settings .workspace-layout{display:block}#support-view{padding:28px 22px 100px}#support-view h1{font-size:26px}#support-view .support-ticket-form{grid-template-columns:1fr}#support-view #supportTicketSubject,#support-view #supportTicketCategory{grid-row:auto}#support-view .support-ticket-form>label,#support-view .support-ticket-form>:is(input,select){grid-column:1}#support-view .support-ticket-row{align-items:flex-start;flex-direction:column;padding:20px}#support-view #supportTicketMessage{min-height:280px}}
@media(prefers-reduced-motion:reduce){#view-settings .about-save{animation:none}}

#view-settings .settings-body{background:transparent;min-height:0}
#view-settings .calendar-connection-copy strong{display:none}
#view-settings .setting-row{flex-direction:row;flex-wrap:nowrap}
#view-settings .setting-row>.custom-select{width:180px;flex:0 0 180px;min-width:0}
#view-settings .setting-row>label:not(.switch){width:auto;flex:1;min-width:0}
#view-settings .setting-row>.switch{flex:0 0 44px;width:44px;height:44px;margin:0}
@media(max-width:700px){#view-settings .setting-row>.custom-select{width:135px;flex-basis:135px}}
#view-settings .setting-row{direction:inherit}
#view-settings .setting-row>.custom-select .custom-select-trigger{width:100%;background:var(--quiet);padding:12px 14px;min-height:44px}
#view-settings :is(.about-save,.support-entry)>button{width:auto;flex:0 0 auto}
#support-view .support-ticket-form{padding:0;border:0;background:none}
#support-view .support-ticket-list{border:0;margin-top:0;background:none}
#planModalBody .plan-step-reminder-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;direction:inherit}
#planModalBody .plan-step-reminder-row .field{margin:0;font-size:12px;min-width:0;display:grid;gap:6px}
#planModalBody .plan-step-reminder-row input:not([type=checkbox]){width:100%;min-width:0;background:var(--bg);font-size:12px;margin:0;text-align:center}
#planModalBody .step-reminder-options{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0}
#planModalBody .plan-all-day-label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:12px;color:var(--muted)}
#planModalBody .reminder-all-day{width:18px;min-height:18px;height:18px;margin:0;padding:0;accent-color:var(--action)}
#planModalBody .step-reminder-more{width:auto;min-height:44px;padding:4px 8px;font-size:11px;color:var(--art)}
#planModalBody .step-reminder-actions{display:flex;flex-wrap:nowrap;gap:10px;justify-content:flex-start;margin-top:10px}
#planModalBody .step-reminder-actions>button{min-height:44px;font-size:12px;padding:10px 12px}
#planModalBody .step-reminder-actions>.primary{order:-1;flex:1;justify-content:center}
#planModalBody .step-reminder-actions>.plain{flex:0 0 80px;justify-content:center}
#view-settings{padding:48px 40px 80px}
#view-settings>.view-header{margin-bottom:28px}
#view-settings .settings-group h2{font-size:20px}
#planModalBody .plan-wizard-title:focus{outline:none;box-shadow:none;background:transparent}
@media(max-width:900px){#view-settings{padding:36px 24px 100px}}
@media(max-width:700px){#view-settings{padding:28px 22px 100px}#view-settings>.view-header{margin-bottom:20px}}
#support-view #supportFormError{grid-column:1/-1;font-size:13px;color:var(--danger)}

#noteModal .add-photo-card .theme-icon{color:var(--art);flex:none}
#noteModal .add-photo-card:disabled{opacity:.55;cursor:wait}
@media(max-width:600px){#noteModal .add-photo-card .theme-icon{width:22px!important;height:22px!important}}

/* English uses the existing Latin family and logical reading direction. */
html[lang="en"] body,html[lang="en"] #view-inbox{font-family:Barlow,Peyda,sans-serif}
html[lang="en"] .mobile-brand strong{font-family:inherit}
html[dir="ltr"] #mobileTopBar{direction:ltr}
html[dir="ltr"] :is(#noteModal .note-shell>*,#noteModal .note-options,#noteModal #mobile-note-browser .note-browser,#planModalBody .timeline-selection,#planModalBody .calendar-dot-card,#timelineCalendarControls .timeline-nav-row,#timelineCalendarControls .calendar-toolbar-actions,#folderModal .inline-add,.approved-time-heading,.time-picker .time-picker-actions,.calendar-reveal-card,.month-view.is-expanded .month-grid-scroll,.bottom-bar,.form-actions,.confirm-actions){direction:ltr}
html[dir="ltr"] #view-chat :is(.composer-bottom,.composer-options,.send-options){direction:ltr!important}
html[dir="ltr"] #view-chat #chatInput:placeholder-shown{direction:ltr;text-align:start}
html[dir="ltr"] #view-chat #newChatBtn{direction:ltr}
html[dir="ltr"] :is(#view-inbox .timing-line .day-label,#noteImageViewer .gallery-workspace figure){direction:ltr}
html[dir="ltr"] :is(#view-inbox [data-icon="arrow-left"],#authScreen .auth-btn .theme-icon){transform:scaleX(-1)}
#view-chat .msg-actions .retry-btn{width:auto;height:auto;flex-shrink:0;min-height:44px}
@media(min-width:769px){
 html[dir="ltr"] body #menuToggle{left:22px;right:auto}
 html[dir="ltr"] body #sidebar{inset:76px auto 0 0;transform:translateX(-100%)}
 html[dir="ltr"] body #sidebar.open{transform:none}
}

html[dir="ltr"] #chatStarters [data-chat-starter] .theme-icon:last-child{transform:scaleX(-1)}

html[dir="ltr"] #homeOverdueLink .theme-icon{transform:scaleX(-1)}

/* Calendar flights have fixed layout boxes and animate only transforms. */
.calendar-motion-card{will-change:transform;contain:layout;transform-origin:0 0;transition:none;backface-visibility:hidden;overflow:visible;background:none;box-shadow:none}
.calendar-motion-card.is-open{padding:8px 12px}
.calendar-motion-surface{position:absolute;inset:0;z-index:-1;background:var(--quiet);border-radius:inherit;transform-origin:center;will-change:transform}
html[data-theme="pro"] .calendar-motion-surface{box-shadow:var(--shadow-md,0 8px 24px #0002)}
@media(prefers-reduced-motion:reduce){.calendar-motion-card{will-change:auto}}

/* Profile details share the existing explicit draft/save flow. */
.profile-name-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:20px}
.profile-name-fields .field{min-width:0}
.profile-name-fields input{width:100%;min-height:48px}
/* The clock fills each segment between real scheduled starts, then to day-end. */
#view-inbox .agenda{padding-bottom:28px}
#view-inbox .agenda-row:before{content:none}
#view-inbox .agenda-rail{position:absolute;left:6px;top:21px;bottom:-21px;width:2px;background:var(--rule);pointer-events:none;overflow:hidden}
#view-inbox .agenda-rail-fill{display:block;height:100%;background:var(--action);transform:scaleY(var(--rail-progress,0));transform-origin:top;transition:transform 1s linear}
#view-inbox .agenda-row.has-tail .agenda-rail{bottom:-24px}
#view-inbox .agenda-row .timing:before{background:var(--bg);z-index:1}
#view-inbox .agenda-row.is-current .timing:before{background:var(--action);border-color:var(--action)}
#view-inbox .agenda-row.is-time-passed .timing:before{background:var(--danger);border-color:var(--danger)}
#view-inbox .agenda-row.is-time-passed .agenda-rail-fill{background:var(--danger)}
#view-inbox .agenda-time-state{display:block;font-size:12px;line-height:1.8;color:var(--muted);margin-top:3px}
#view-inbox .agenda-time-state:empty{display:none}
#view-inbox .is-time-passed .agenda-time-state,#view-inbox .is-time-passed .time{color:var(--danger)}
#view-inbox .is-current .agenda-time-state{color:var(--action)}
[data-action=toggle-reminder]{transition:background-color .18s,color .18s;position:relative}
[data-action=toggle-reminder].is-completing .theme-icon{animation:task-check-arrive .34s cubic-bezier(.16,1,.3,1)}
[data-action=toggle-reminder][aria-busy=true]{cursor:progress}
:is(.agenda-row,.task-card,.reminder-row,.action-item).is-completing{background:var(--quiet);transition:background-color .2s}
:is(.agenda-row,.task-card).is-completing :is(.agenda-title,.task-card-title){text-decoration:line-through;text-decoration-thickness:1.5px}
@keyframes task-check-arrive{0%{opacity:0;transform:scale(.35) rotate(-12deg)}65%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
@media(max-width:480px){.profile-name-fields{grid-template-columns:minmax(0,1fr);gap:12px}}
@media(prefers-reduced-motion:reduce){#view-inbox .agenda-rail-fill,[data-action=toggle-reminder],.is-completing{transition:none!important}[data-action=toggle-reminder].is-completing .theme-icon{animation:none}}
#view-inbox .agenda-row.is-all-day .timing:before{content:none}
/* Notes use a direct content wrapper rather than the shared scrolling view-body. */
#main #view-notes.active{overflow-y:auto;overflow-x:hidden;min-height:0;overscroll-behavior-y:auto}
/* Direction already mirrors the navigation; reversing rows mirrors it twice. */
html body #sidebar .nav-btn{flex-direction:row;text-align:start}