/* Client surface: compact, persistent navigation and content-first workspaces. */
body[data-web-client="modern"] {--bg:#fff;--surface:#fff;--surface-secondary:#f5f5f5;--text:#202123;--secondary:#71717a;--line:#e8e8eb;--accent:#303136;--selection:#e8e8eb;--radius-small:9px;--radius-card:14px;--radius-panel:0px;--shadow:none;--glass:var(--surface);background:var(--bg);background-image:none;color:var(--text)}
@media(prefers-color-scheme:dark){html:not([data-theme=light]) body[data-web-client="modern"]{--bg:#212121;--surface:#212121;--surface-secondary:#2c2c2c;--text:#ececec;--secondary:#a0a0a7;--line:#383838;--accent:#ececec;--selection:#343434}}
html[data-theme=dark] body[data-web-client="modern"]{--bg:#212121;--surface:#212121;--surface-secondary:#2c2c2c;--text:#ececec;--secondary:#a0a0a7;--line:#383838;--accent:#ececec;--selection:#343434}
.client-modern {height:100dvh;width:100%;overflow:hidden;background:var(--bg)}
.client-modern .shell {display:grid;grid-template-columns:268px minmax(0,1fr);gap:0;padding:0;height:100%;width:100%;margin:0;max-width:none;overflow:hidden;border:0;border-radius:0;background:none}
.client-modern .shell>aside {display:flex;flex-direction:column;position:relative;top:auto;bottom:auto;left:auto;width:auto;min-width:0;min-height:0;order:0;gap:0;padding:16px 12px 10px;border:0;border-right:1px solid var(--line);border-radius:0;background:var(--surface-secondary);backdrop-filter:none;box-shadow:none;transform:none;z-index:20;overflow:visible}
.client-modern aside::before,.client-modern .toolbar::before,.client-modern .composer::before,.client-modern .filters::before,.client-modern .glass-water,.client-modern .liquid-lens,.client-modern .glass-refraction,.client-modern .water-glass-layer {display:none!important}
.client-modern .shell>main {display:flex;flex-direction:column;position:relative;height:100%;min-width:0;min-height:0;overflow:hidden;border:0;border-radius:0;background:var(--bg);box-shadow:none}
.client-modern .sidebar-heading {display:flex;align-items:center;justify-content:space-between;height:40px;margin:0 4px 14px}
.client-modern .client-wordmark {display:inline-flex;align-items:center;gap:5px;font-size:24px;font-weight:650;letter-spacing:-1px;color:var(--text);text-decoration:none}
.wordmark-dot {height:5px;width:5px;border-radius:50%;background:#65a38c;margin-top:12px}
.client-modern svg {width:18px;height:18px;flex:none;color:currentColor}
.client-modern button,.client-modern a {touch-action:manipulation}
.client-modern button {box-shadow:none;transition:background-color 120ms,color 120ms;border-radius:9px;transform:none}
.client-modern .new-chat {display:flex;align-items:center;gap:10px;width:100%;height:42px;min-height:42px;padding:0 12px;margin-bottom:12px;background:var(--surface);border:1px solid var(--line);font-size:14px;text-align:left}
.client-modern .new-chat:hover {background:var(--selection)}
.client-modern kbd {margin-left:auto;font:11px system-ui;color:var(--secondary);border:0;background:none}
.client-modern .workspace-navigation {display:flex;flex-direction:column;flex:none;gap:2px;overflow:visible;padding:0;margin:0 0 22px;border:0;background:none}
.client-modern .workspace-navigation>a {position:relative;display:flex;align-items:center;gap:10px;padding:0 12px;min-height:40px;height:40px;width:100%;max-width:none;border-radius:9px;color:var(--text);font-size:14px;font-weight:450;text-decoration:none;flex-direction:row;transform:none;box-shadow:none;background:none}
.client-modern .workspace-navigation>a>span {position:static;width:auto;height:auto;overflow:visible;clip-path:none;font-size:14px;white-space:normal}
.client-modern .workspace-navigation>a:hover,.client-modern .workspace-navigation>a[aria-current=page] {background:var(--selection);color:var(--text)}
.client-modern .session-heading {display:flex;align-items:center;justify-content:space-between;margin:0 12px 10px;color:var(--secondary);font-size:11px;font-weight:600;letter-spacing:.04em}
.client-modern .session-search {display:flex;align-items:center;gap:7px;margin:0 4px 12px;padding:0 8px;min-height:34px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--secondary)}
.client-modern .session-search input {border:0;background:transparent;min-width:0;width:100%;height:32px;min-height:32px;padding:0;font-size:12px;box-shadow:none;outline:0}
.client-modern .session-search svg {width:14px;height:14px}
.client-modern .session-search button {display:grid;place-items:center;min-width:26px;min-height:26px;padding:0;background:none}
.client-modern .session-search:focus-within {outline:2px solid var(--secondary);outline-offset:1px}
.client-modern .conversation-list {flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 4px 12px}
.client-modern .default-session {display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 10px;margin-bottom:16px;color:var(--text);text-decoration:none;border-radius:8px;font-size:13px}
.client-modern .default-session[aria-current=page],.client-modern .default-session:hover {background:var(--selection)}
.client-modern .pinned-label {margin-left:auto;font-size:10px;color:var(--secondary)}
.client-modern .session-group {margin:0 0 16px}
.client-modern .session-group h2 {margin:0 10px 5px;font-size:10px;line-height:20px;color:var(--secondary);font-weight:500;letter-spacing:.025em}
.client-modern .session-item {position:relative;display:flex;align-items:center;border-radius:8px;min-height:36px;margin:1px 0}
.client-modern .session-item:hover,.client-modern .session-item[data-selected=true] {background:var(--selection)}
.client-modern .session-item>a {min-width:0;flex:1;display:block;padding:10px;color:var(--text);font-size:13px;line-height:16px;text-decoration:none}
.client-modern .session-title {display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.client-modern .session-more {min-width:30px;min-height:32px;padding:0;display:grid;place-items:center;background:transparent;opacity:0;color:var(--secondary)}
.client-modern .session-item:hover .session-more,.client-modern .session-item:focus-within .session-more {opacity:1}
@media(hover:none){.client-modern .session-more{opacity:1}}
.client-modern .session-menu {position:absolute;right:5px;top:34px;z-index:30;min-width:126px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 16px #0002}
.client-modern .session-menu button {display:block;width:100%;min-height:36px;background:transparent;text-align:left;font-size:13px}
.client-modern .session-menu button:hover {background:var(--selection)}
.client-modern .sidebar-empty,.client-modern .sidebar-error {display:block;font-size:12px;line-height:1.6;padding:8px 10px;color:var(--secondary)}
.client-modern .sidebar-error button {min-height:28px;padding:2px 8px;font-size:12px;display:block;margin-top:6px}
.client-modern .session-placeholders {display:flex;flex-direction:column;gap:23px;padding:12px 10px}
.client-modern .session-placeholders i {height:12px;display:block;border-radius:4px;background:var(--line);animation:client-pulse 1.6s ease-in-out infinite alternate}
@keyframes client-pulse {to{opacity:.4}}
.client-modern .shell>aside>.sidebar-bottom {display:flex;align-items:center;gap:2px;flex:none;flex-wrap:nowrap;padding:12px 4px 0;margin:0;border-top:1px solid var(--line)}
.client-modern #workspace-identity {display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:2px;color:var(--text);text-decoration:none;font-size:13px}
.client-modern .identity-avatar {width:30px;height:30px;display:grid;place-items:center;background:var(--selection);border-radius:50%;overflow:hidden;font-size:12px;font-weight:600;flex:none}
.client-modern .identity-avatar img {width:100%;height:100%;object-fit:cover}
.client-modern #connection {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;font-size:12px}
.client-modern .sidebar-bottom button {display:grid;place-items:center;min-height:32px;min-width:32px;width:32px;padding:0;background:transparent;color:var(--secondary)}
.client-modern .toolbar {position:relative;display:flex;align-items:center;flex:none;justify-content:flex-start;gap:10px;padding:10px 24px;min-height:62px;height:auto;border:0;border-radius:0;background:var(--bg);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:10;transform:none}
.client-modern .toolbar h1 {font-size:15px;font-weight:600;line-height:24px;flex:1;margin:0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:0}
.client-modern #actions {display:flex;gap:4px;flex-wrap:nowrap;margin-left:auto;align-items:center}
.client-modern .toolbar button {display:grid;place-items:center;background:transparent;min-height:36px;min-width:36px;height:36px;width:auto;padding:8px;border-radius:8px;font-size:12px}
.client-modern .toolbar button:hover {background:var(--surface-secondary)}
.client-modern .toolbar .button-label {display:none}
.client-modern .toolbar .client-menu,.client-modern .sidebar-close,.client-modern .sidebar-scrim {display:none}
.client-modern #content,.client-modern #account-content {flex:1;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px 36px 40px;scrollbar-width:thin}
.client-modern #content[data-page=chat] {padding:0;overflow:hidden}
.client-modern .stack {max-width:1000px;margin:0 auto;gap:20px}
.client-modern .stack>h2,.client-modern .portal-page>h2 {font-size:18px;font-weight:600;margin:8px 0}
.client-modern .card,.client-modern .list {border:1px solid var(--line);border-radius:12px;box-shadow:none;background:var(--surface);padding:20px}
.client-modern .card .card,.client-modern .card .list {box-shadow:none;background:none;border-radius:8px}
.client-modern .list {padding:0;overflow:hidden}
.client-modern .list>button,.client-modern .list>a {border:0;border-radius:0;padding:14px 18px;background:transparent;border-bottom:1px solid var(--line);min-height:52px}
.client-modern .list>button:last-child {border-bottom:0}
.client-modern .list>button:hover,.client-modern .settings-row:hover {background:var(--surface-secondary)}
.client-modern .settings-row {border-radius:0;box-shadow:none;padding:14px 18px;min-height:60px;background:transparent}
.client-modern .settings-row>svg {width:19px;height:19px;box-shadow:none;border-radius:6px;background:none;padding:0}
.client-modern input:not([type=range]):not([type=checkbox]),.client-modern select,.client-modern textarea {border-radius:8px;border-color:var(--line);background:var(--surface);font-size:14px;box-shadow:none}
.client-modern input[type=range] {height:26px;accent-color:var(--text)}
.client-modern .filters,.client-modern .segmented {display:flex;padding:3px;gap:3px;min-height:36px;width:fit-content;max-width:100%;border:1px solid var(--line);border-radius:9px;background:var(--surface-secondary);backdrop-filter:none;box-shadow:none;overflow:auto}
.client-modern .filters button,.client-modern .segmented button {font-size:12px;min-height:30px;padding:4px 14px;background:transparent;white-space:nowrap;transform:none;border-radius:6px}
.client-modern .filters button[aria-pressed=true],.client-modern .segmented button[aria-pressed=true],.client-modern .segmented button[aria-selected=true] {background:var(--surface);color:var(--text);box-shadow:0 1px 3px #0001}
.client-modern .chat-layout {position:relative;display:flex;flex-direction:column;height:100%;min-height:0;width:100%;max-width:none;margin:0;background:var(--bg);overflow:hidden}
.client-modern .messages {flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:30px max(24px,calc((100% - 760px)/2)) 180px;scrollbar-gutter:stable;scroll-behavior:auto;overflow-anchor:none;overscroll-behavior:contain}
.client-modern .message {margin-bottom:28px;font-size:15px;line-height:1.8;overflow-wrap:anywhere}
.client-modern .message.user {background:var(--surface-secondary);color:var(--text);border:0;border-radius:20px;padding:10px 17px;max-width:85%;box-shadow:none;transform:none}
.client-modern .message.assistant {padding:0;border:0;background:transparent;color:var(--text)}
.client-modern .message.assistant>header {font-size:11px;color:var(--secondary)}
.client-modern .message details {border:1px solid var(--line);border-radius:9px;font-size:12px;background:transparent;padding:10px 12px;margin:10px 0}
.client-modern .message details summary {font-size:12px;font-weight:450;color:var(--secondary);min-height:20px}
.client-modern .message .copy {min-height:30px;font-size:11px;padding:4px 7px;background:none;color:var(--secondary)}
.client-modern .message .copy svg {width:14px;height:14px}
.client-modern .message img {border:0;box-shadow:none;max-height:360px;max-width:min(100%,440px);border-radius:10px}
.client-modern .composer {position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));width:min(calc(100% - 48px),780px);margin:auto;padding:10px 14px;display:grid;gap:4px;border:1px solid var(--line);border-radius:22px;background:var(--surface-secondary);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;z-index:5}
.client-modern .composer:focus-within {border-color:var(--secondary);box-shadow:none}
.client-modern .composer textarea {padding:8px 4px;min-height:44px;max-height:150px;line-height:24px;font-size:14px;background:transparent;border:0;resize:none}
.client-modern .composer textarea:focus {outline:none;box-shadow:none}
.client-modern .composer footer {min-height:32px;gap:4px;align-items:center}
.client-modern .composer button {width:32px;height:32px;min-height:32px;min-width:32px;padding:6px;border-radius:50%;background:transparent;box-shadow:none}
.client-modern button.primary,.client-modern a.primary {background:var(--text);color:var(--bg)}
.client-modern .composer button.primary {background:var(--text);color:var(--bg)}
.client-modern .composer .usage-live {grid-column:1/-1;width:fit-content;max-width:100%;height:auto;min-height:20px;border:0;border-radius:0;padding:0 2px;font-size:10px;color:var(--secondary);text-align:left;background:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:none;margin:0;order:3}
.client-modern .chat-subagents {flex:none;margin:0 auto 8px;padding:10px 14px;width:min(calc(100% - 48px),780px);max-height:25%;border:1px solid var(--line);border-radius:10px;background:var(--surface-secondary);font-size:12px}
.client-modern .badge {border-radius:5px;font-size:10px;padding:3px 6px;box-shadow:none}
.client-modern .interaction-bubble {border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--surface-secondary);box-shadow:none}
.client-modern .interaction-option {font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:8px;min-height:38px}
.client-modern .plugin-grid {grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.client-modern .plugin-tile {border:1px solid var(--line);border-radius:12px;box-shadow:none;transform:none;background:var(--surface)}
.client-modern .portal-page {width:100%;max-width:1000px;margin:0 auto}
.client-modern .portal-title {padding:0;margin:0 0 18px;min-height:0;box-shadow:none;background:none;border:0}
.client-modern .portal-title h1 {font-size:22px}
.client-modern .portal-title p {font-size:13px;color:var(--secondary)}
.client-modern .portal-card,.client-modern .portal-section,.client-modern .instance-card {border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:none}
.client-modern .page-placeholder {padding:12px 0;gap:18px}
.client-modern .ph-panel {border-radius:12px;border-color:var(--line);box-shadow:none}
.client-modern dialog {max-width:min(540px,calc(100vw - 32px));border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--surface);color:var(--text);box-shadow:0 20px 70px #0003}
.client-modern dialog::backdrop {background:#0005;backdrop-filter:none}
.client-modern dialog .close {width:32px;height:32px;min-height:32px;min-width:32px;padding:0;font-size:22px;top:12px;right:12px;background:var(--surface-secondary)}
.client-modern .markdown pre {border:1px solid var(--line);border-radius:10px;background:var(--surface-secondary);box-shadow:none}
.client-modern .markdown table {font-size:13px}
.client-modern :focus-visible {outline:2px solid var(--secondary);outline-offset:2px}
@media(max-width:900px){.client-modern .shell{grid-template-columns:248px minmax(0,1fr)}.client-modern #content,.client-modern #account-content{padding:20px 24px}}
@media(max-width:720px){
 .client-modern .shell{display:flex;gap:0;padding:0}.client-modern .shell>main{flex:1;width:100%}
 .client-modern .shell>aside{position:fixed;inset:0 auto 0 0;width:min(300px,85vw);height:100dvh;transform:translateX(-100%);transition:transform 180ms cubic-bezier(.2,.7,.2,1);z-index:100;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));border-right:1px solid var(--line)}
 .client-modern[data-sidebar-open=true] .shell>aside{transform:translateX(0)}
 .client-modern .toolbar{padding:10px 12px;min-height:56px;flex-wrap:nowrap;gap:4px}.client-modern .toolbar h1{font-size:14px}
 .client-modern .toolbar .client-menu,.client-modern .sidebar-close{display:grid;place-items:center;background:transparent;min-width:36px;min-height:36px;width:36px;padding:8px}
 .client-modern .sidebar-scrim{position:fixed;left:100%;top:0;width:100vw;height:100dvh;background:#0005;border:0;border-radius:0;z-index:-1;opacity:0;pointer-events:none}
 .client-modern[data-sidebar-open=true] .sidebar-scrim{display:block;pointer-events:auto;opacity:1}
 .client-modern #actions{gap:1px}.client-modern .toolbar #actions button{min-width:32px;width:32px;min-height:32px;height:32px;padding:7px}
 .client-modern #content,.client-modern #account-content{padding:18px 16px 28px}.client-modern .messages{padding:22px 18px 170px;scrollbar-gutter:auto}
 .client-modern .message{font-size:15px}.client-modern .composer{width:calc(100% - 24px);bottom:max(12px,env(safe-area-inset-bottom));padding:8px 12px;border-radius:20px}
 .client-modern .stack{gap:16px}.client-modern .card{padding:16px}.client-modern .plugin-grid{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.client-modern *,.client-modern *::before,.client-modern *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.client-modern .session-search input[aria-label] {background:transparent;border:0;padding:0;min-height:32px;height:32px;border-radius:0}
.client-modern .session-search input::-webkit-search-cancel-button {display:none}
@media(max-width:720px){.client-modern[data-sidebar-open=false] .shell>aside{transition:none}}

/* Route recipes share these modern loading primitives across Client, Account and Admin. */
body[data-web-client=modern] .page-placeholder{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:24px;padding:0;opacity:1;min-width:0;max-width:100%;animation:none}
body[data-web-client=modern] .page-placeholder>*{min-width:0}
body[data-web-client=modern] .ph-shape{background-color:var(--selection);background-image:linear-gradient(105deg,transparent 28%,color-mix(in srgb,var(--text) 10%,transparent) 48%,transparent 68%);background-size:240% 100%;border-radius:4px;animation:modern-placeholder 1.8s cubic-bezier(.4,0,.2,1) infinite}
body[data-web-client=modern] .ph-panel{display:flex;flex-direction:column;gap:16px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:none;min-width:0}
body[data-web-client=modern] .ph-list{padding:0;border-radius:0;background:none}
body[data-web-client=modern] .ph-row{min-height:64px;padding:16px 0;gap:12px}
body[data-web-client=modern] .ph-list>.ph-row+.ph-row{border-top:1px solid var(--line)}
body[data-web-client=modern] .ph-avatar.ph-shape{width:32px;height:32px;border-radius:9px}
body[data-web-client=modern] .ph-tabs{max-width:380px;padding:4px;gap:4px;border-radius:9px;background:var(--surface-secondary)}
body[data-web-client=modern] .ph-tabs .ph-shape{border-radius:6px;height:34px!important}
body[data-web-client=modern] .ph-field{gap:8px}
body[data-web-client=modern] .ph-field>.ph-shape:last-child{border:1px solid var(--line);border-radius:8px;background-color:var(--surface-secondary)}
body[data-web-client=modern] .ph-filterbar{display:flex;flex-wrap:wrap;align-items:end;gap:12px}
body[data-web-client=modern] .ph-filterbar>.ph-field{display:flex;flex:1 1 140px;min-width:0}
body[data-web-client=modern] .ph-filterbar>.ph-shape{flex:0 0 74px;border-radius:8px}
body[data-web-client=modern] .ph-metrics{grid-template-columns:repeat(var(--ph-count,4),minmax(0,1fr));gap:16px}
body[data-web-client=modern] .ph-minimetrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:24px 16px}
body[data-web-client=modern] .ph-table{padding:0;border:1px solid var(--line);border-radius:10px;background:none;overflow:hidden}
body[data-web-client=modern] .ph-table-head,body[data-web-client=modern] .ph-table-row{display:grid;grid-template-columns:repeat(var(--ph-columns),minmax(0,1fr));min-height:54px;padding:12px 14px;gap:18px}
body[data-web-client=modern] .ph-table-head{min-height:40px;background:var(--surface-secondary)}
body[data-web-client=modern] .ph-table-row{border-top:1px solid var(--line)}
body[data-web-client=modern] .ph-chart{display:grid;gap:20px;padding:20px 0;border-block:1px solid var(--line)}
body[data-web-client=modern] .ph-chart-bars{display:flex;align-items:end;gap:12px;height:190px;padding:0 12px;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),var(--line) 25%)}
body[data-web-client=modern] .ph-chart-bars .ph-shape{flex:1;min-width:0;flex-shrink:1;max-width:60px;border-radius:4px 4px 0 0}
body[data-web-client=modern] .ph-chat{min-height:clamp(320px,65dvh,720px);max-width:760px;margin-inline:auto;width:100%}
body[data-web-client=modern] .ph-assistant{background:none;border-radius:0;padding:16px 0}
body[data-web-client=modern] .ph-user{border-radius:20px;background:var(--surface-secondary);width:250px}
body[data-web-client=modern] .ph-composer{min-height:96px;background:var(--surface-secondary);border:1px solid var(--line);border-radius:22px}
body[data-web-client=modern] .ph-settings-group{display:grid;gap:12px;padding-block:8px}
@keyframes modern-placeholder{0%{background-position:160% 0;opacity:.65}50%{opacity:1}100%{background-position:-80% 0;opacity:.65}}
@media(max-width:1100px){body[data-web-client=modern] .ph-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){body[data-web-client=modern] .ph-metrics{gap:12px}body[data-web-client=modern] .ph-columns,body[data-web-client=modern] .ph-grid{grid-template-columns:minmax(0,1fr)}body[data-web-client=modern] .ph-filterbar>.ph-field{flex-basis:calc(50% - 12px)}body[data-web-client=modern] .ph-table-head,body[data-web-client=modern] .ph-table-row{gap:12px;grid-template-columns:repeat(var(--ph-columns),minmax(70px,1fr));min-width:calc(var(--ph-columns)*85px)}body[data-web-client=modern] .ph-chart-bars{gap:8px;height:170px}body[data-web-client=modern] .ph-chart-bars .ph-shape{max-height:90%}}
@media(prefers-reduced-motion:reduce){body[data-web-client=modern] .ph-shape{animation:none;opacity:.65}}
body[data-web-client=modern] .control-auth button.primary,body[data-web-client=modern] .control-sheet button.primary{background:var(--text);color:var(--bg)}
body[data-web-client=modern] .control-sheet{border-radius:16px;box-shadow:0 12px 48px #00000026}
body[data-web-client=modern] .control-sheet::backdrop{background:#0006;backdrop-filter:none}
body[data-web-client=modern] .social-person{border-radius:12px}
body[data-web-client=modern] .social-placeholder{display:block;grid-column:1/-1}

/* Native feedback shares one short, non-linear rhythm across Client and Admin. */
:where(body[data-web-client=modern]) :is(.client-modern,.adm-main,.adm-dialog,.control-sheet) button{transition:background-color 140ms,color 140ms,opacity 140ms,transform 180ms cubic-bezier(.2,.8,.2,1)}
:where(body[data-web-client=modern]) :is(.client-modern,.adm-main,.adm-dialog,.control-sheet) button:not(:disabled):active{transform:scale(.97)}
:where(body[data-web-client=modern]) .settings-link{transition:background-color 140ms,color 140ms}
:where(body[data-web-client=modern]) .settings-link:hover{background:var(--surface-secondary)}
:where(body[data-web-client=modern]) .settings-link:active{background:var(--selection)}
:where(body[data-web-client=modern]) .settings-link>.settings-chevron{transition:transform 180ms cubic-bezier(.2,.8,.2,1)}
:where(body[data-web-client=modern]) .settings-link:hover>.settings-chevron{transform:translateX(2px)}
:where(body[data-web-client=modern]) .native-segmented button{transition:background-color 180ms,color 180ms,transform 180ms cubic-bezier(.2,.8,.2,1)}
body[data-web-client=modern] .session-placeholders i{background-color:var(--selection);background-image:linear-gradient(105deg,transparent 28%,color-mix(in srgb,var(--text) 10%,transparent) 48%,transparent 68%);background-size:240% 100%;animation:modern-placeholder 1.8s cubic-bezier(.4,0,.2,1) infinite}
@media(prefers-reduced-motion:reduce){:where(body[data-web-client=modern]) :is(.client-modern,.adm-main,.adm-dialog,.control-sheet) button,:where(body[data-web-client=modern]) .settings-link,:where(body[data-web-client=modern]) .settings-chevron{transition:none!important;transform:none!important}body[data-web-client=modern] .ph-shape,body[data-web-client=modern] .session-placeholders i{animation:none;opacity:.65;background-image:none}}