/* Colours are variables: --c-xxxxxx = fills/borders, --t-xxxxxx = text. Dark values are the originals; the light theme block
   (:root[data-theme=light]) holds their light counterparts. Use var(--c-…)/var(--t-…) for new colours so both themes keep working. */
:root{--c-0b0d10:#0b0d10;--c-0d1014:#0d1014;--c-0f1216:#0f1216;--c-10141a:#10141a;--c-111418:#111418;--c-12161a:#12161a;--c-13161a:#13161a;--c-15191d:#15191d;--c-15191e:#15191e;--c-17150f:#17150f;--c-171a1f:#171a1f;--c-191c21:#191c21;--c-191d22:#191d22;--c-1a1610:#1a1610;--c-1a1e23:#1a1e23;--c-1a1f24:#1a1f24;--c-1a2012:#1a2012;--c-1b2013:#1b2013;--c-1b2210:#1b2210;--c-1c1a10:#1c1a10;--c-1c2025:#1c2025;--c-1c2127:#1c2127;--c-1d2127:#1d2127;--c-1d2228:#1d2228;--c-1d232a:#1d232a;--c-1d2a40:#1d2a40;--c-1e2a1c:#1e2a1c;--c-1f242a:#1f242a;--c-20241c:#20241c;--c-20241d:#20241d;--c-20252a:#20252a;--c-20252b:#20252b;--c-20262c:#20262c;--c-22262c:#22262c;--c-22272d:#22272d;--c-22272e:#22272e;--c-232710:#232710;--c-23282e:#23282e;--c-232a31:#232a31;--c-24282e:#24282e;--c-24292f:#24292f;--c-242a30:#242a30;--c-262b32:#262b32;--c-262c33:#262c33;--c-272d24:#272d24;--c-292e34:#292e34;--c-2a1a1d:#2a1a1d;--c-2a2f36:#2a2f36;--c-2b3036:#2b3036;--c-2b3138:#2b3138;--c-2c3138:#2c3138;--c-2c3238:#2c3238;--c-2c333b:#2c333b;--c-2d333b:#2d333b;--c-2d343c:#2d343c;--c-30363e:#30363e;--c-303740:#303740;--c-311e22:#311e22;--c-343a42:#343a42;--c-343b44:#343b44;--c-363d29:#363d29;--c-363d45:#363d45;--c-373d45:#373d45;--c-39402c:#39402c;--c-3b424b:#3b424b;--c-3b424c:#3b424c;--c-3c4a22:#3c4a22;--c-3d454e:#3d454e;--c-3f4650:#3f4650;--c-444c55:#444c55;--c-454a52:#454a52;--c-465059:#465059;--c-4a2a2f:#4a2a2f;--c-4a3a1c:#4a3a1c;--c-4a5a2a:#4a5a2a;--c-4a5f8a:#4a5f8a;--c-4d565f:#4d565f;--c-556666:#556666;--c-565d66:#565d66;--c-565e63:#565e63;--c-59636d:#59636d;--c-5a5228:#5a5228;--c-5a6b34:#5a6b34;--c-5b6330:#5b6330;--c-5c1f26:#5c1f26;--c-5f373e:#5f373e;--c-5fbf8a:#5fbf8a;--c-656d76:#656d76;--c-6a4f27:#6a4f27;--c-704248:#704248;--c-7a3238:#7a3238;--c-7a6a3a:#7a6a3a;--c-7d8f36:#7d8f36;--c-7fd6ff:#7fd6ff;--c-8a4a3a:#8a4a3a;--c-8b9aa8:#8b9aa8;--c-8c8560:#8c8560;--c-8e969f:#8e969f;--c-9da4ac:#9da4ac;--c-9fd452:#9fd452;--c-b9d447:#b9d447;--c-c8de58:#c8de58;--c-d4dae0:#d4dae0;--c-d6eb64:#d6eb64;--c-e0736f:#e0736f;--c-e9ff67:#e9ff67;--c-f2ff9a:#f2ff9a;--c-ffffff:#ffffff;--t-0b0d10:#0b0d10;--t-10130a:#10130a;--t-111418:#111418;--t-4caf7d:#4caf7d;--t-5aa9ff:#5aa9ff;--t-8c8560:#8c8560;--t-8d984c:#8d984c;--t-9ca3aa:#9ca3aa;--t-9da3ab:#9da3ab;--t-9da4ac:#9da4ac;--t-a8afb6:#a8afb6;--t-a96e73:#a96e73;--t-a99f70:#a99f70;--t-a9afb7:#a9afb7;--t-a9b0b8:#a9b0b8;--t-aab0b7:#aab0b7;--t-aeb4bb:#aeb4bb;--t-aeb66e:#aeb66e;--t-b5bbc2:#b5bbc2;--t-b9bfc5:#b9bfc5;--t-b9c26f:#b9c26f;--t-c4c9ce:#c4c9ce;--t-c5ccd3:#c5ccd3;--t-c8e58a:#c8e58a;--t-c9ced3:#c9ced3;--t-c9dcff:#c9dcff;--t-cbd0d5:#cbd0d5;--t-cbd2d8:#cbd2d8;--t-cfc394:#cfc394;--t-cfd5da:#cfd5da;--t-d4d9dd:#d4d9dd;--t-d8cc9c:#d8cc9c;--t-dce1e5:#dce1e5;--t-e0e4e7:#e0e4e7;--t-e2e6e9:#e2e6e9;--t-e5e9ee:#e5e9ee;--t-e6a3a6:#e6a3a6;--t-e9ff67:#e9ff67;--t-eceff1:#eceff1;--t-eef1f3:#eef1f3;--t-ef9ba0:#ef9ba0;--t-f0e2a0:#f0e2a0;--t-f1f3f5:#f1f3f5;--t-f3b1b4:#f3b1b4;--t-f3c07a:#f3c07a;--t-f3ecc8:#f3ecc8;--t-ff8a8f:#ff8a8f;--t-ff9da0:#ff9da0;--t-ffb3b6:#ffb3b6;--t-ffc9a8:#ffc9a8;--t-ffd7db:#ffd7db;--t-ffffff:#ffffff;}
:root[data-theme=light]{color-scheme:light;--c-0b0d10:#f3f5f7;--c-0d1014:#f1f3f6;--c-0f1216:#eff1f4;--c-10141a:#eceff3;--c-111418:#eef0f3;--c-12161a:#eceff2;--c-13161a:#eceef1;--c-15191d:#eaedf0;--c-15191e:#e9ecf0;--c-17150f:#f4f3ee;--c-171a1f:#e9ebee;--c-191c21:#e7e9ed;--c-191d22:#e7e9ed;--c-1a1610:#f3f1ec;--c-1a1e23:#e6e9ec;--c-1a1f24:#e5e9ec;--c-1a2012:#eef2e8;--c-1b2013:#eef1e8;--c-1b2210:#eef3e7;--c-1c1a10:#f3f2eb;--c-1c2025:#e4e7eb;--c-1c2127:#e3e7eb;--c-1d2127:#e3e6ea;--c-1d2228:#e2e6ea;--c-1d232a:#e1e5ea;--c-1d2a40:#d1daea;--c-1e2a1c:#e2ebe1;--c-1f242a:#e1e4e9;--c-20241c:#e8ebe5;--c-20241d:#e7eae5;--c-20252a:#e1e4e8;--c-20252b:#e0e4e8;--c-20262c:#dfe4e8;--c-22262c:#dfe2e7;--c-22272d:#dfe2e7;--c-22272e:#dee1e7;--c-232710:#f1f3e3;--c-23282e:#dee1e6;--c-232a31:#dce1e6;--c-24282e:#dee1e5;--c-24292f:#dde1e5;--c-242a30:#dce1e5;--c-262b32:#dbdfe4;--c-262c33:#dadfe4;--c-272d24:#e1e5df;--c-292e34:#dadde1;--c-2a1a1d:#ece1e3;--c-2a2f36:#d8dce1;--c-2b3036:#d8dce0;--c-2b3138:#d7dbe0;--c-2c3138:#d7dadf;--c-2c3238:#d7dbdf;--c-2c333b:#d5dadf;--c-2d333b:#d5d9df;--c-2d343c:#d4d9df;--c-30363e:#d2d7dc;--c-303740:#d1d6dc;--c-311e22:#e9dcdf;--c-343a42:#cfd4da;--c-343b44:#ced3da;--c-363d29:#dce1d3;--c-363d45:#cdd2d8;--c-373d45:#cdd2d7;--c-39402c:#dadfd1;--c-3b424b:#c9ced5;--c-3b424c:#c8cdd5;--c-3c4a22:#dce7ca;--c-3d454e:#c7cdd3;--c-3f4650:#c5cad2;--c-444c55:#c2c8ce;--c-454a52:#c4c8cd;--c-465059:#bfc6cd;--c-4a2a2f:#e1cacd;--c-4a3a1c:#ebdfca;--c-4a5a2a:#d5e1be;--c-4a5f8a:#9cabca;--c-4d565f:#bbc1c8;--c-556666:#b6c2c2;--c-565d66:#b6bbc1;--c-565e63:#b8bdc1;--c-59636d:#b1b8bf;--c-5a5228:#e2dcbe;--c-5a6b34:#cddab2;--c-5b6330:#d7dcb8;--c-5c1f26:#e9bdc2;--c-5f373e:#d7bbc0;--c-5fbf8a:#6cc493;--c-656d76:#aab0b6;--c-6a4f27:#e3cfb3;--c-704248:#cfaeb3;--c-7a3238:#dba7ab;--c-7a6a3a:#d5caa7;--c-7d8f36:#cbd898;--c-7fd6ff:#2f8fbc;--c-8a4a3a:#d5a79c;--c-8b9aa8:#8191a0;--c-8c8560:#bab59a;--c-8e969f:#8a929b;--c-9da4ac:#7f8892;--c-9fd452:#a1d556;--c-b9d447:#bfd65c;--c-c8de58:#bcd24c;--c-d4dae0:#526272;--c-d6eb64:#b8cf3e;--c-e0736f:#cf433e;--c-e9ff67:#e9ff67;--c-f2ff9a:#9cac2b;--c-ffffff:#474747;--t-0b0d10:#0b0d10;--t-10130a:#10130a;--t-111418:#111418;--t-4caf7d:#38805b;--t-5aa9ff:#19508c;--t-8c8560:#9f9873;--t-8d984c:#727a3d;--t-9ca3aa:#555c63;--t-9da3ab:#545a62;--t-9da4ac:#535a62;--t-a8afb6:#495057;--t-a96e73:#734448;--t-a99f70:#736b45;--t-a9afb7:#484e56;--t-a9b0b8:#474e56;--t-aab0b7:#484e55;--t-aeb4bb:#444a51;--t-aeb66e:#737a3d;--t-b5bbc2:#3d434a;--t-b9bfc5:#3a4046;--t-b9c26f:#798137;--t-c4c9ce:#31363b;--t-c5ccd3:#2c333a;--t-c8e58a:#58751a;--t-c9ced3:#2c3136;--t-c9dcff:#08152e;--t-cbd0d5:#2a2f34;--t-cbd2d8:#272e34;--t-cfc394:#6b5f30;--t-cfd5da:#252b30;--t-d4d9dd:#22272b;--t-d8cc9c:#635727;--t-dce1e5:#1a1f23;--t-e0e4e7:#181c1f;--t-e2e6e9:#161a1d;--t-e5e9ee:#12161c;--t-e6a3a6:#5c191c;--t-e9ff67:#728117;--t-eceff1:#13181a;--t-eef1f3:#13181b;--t-ef9ba0:#631116;--t-f0e2a0:#5e5011;--t-f1f3f5:#13171b;--t-f3b1b4:#4d0e10;--t-f3c07a:#7b5016;--t-f3ecc8:#37300c;--t-ff8a8f:#631215;--t-ff9da0:#530f11;--t-ffb3b6:#410b0e;--t-ffc9a8:#4a240d;--t-ffd7db:#27070a;--t-ffffff:#171717;}
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root { font-family: Manrope, system-ui, sans-serif; color: var(--t-e5e9ee); background: var(--c-0b0d10); font-synthesis: none; color-scheme: dark; }
* { box-sizing: border-box; }
html, body, #app { margin: 0; min-width: 320px; min-height: 100%; height: 100%; }
body { min-height: 100vh; background: var(--c-111418); }
button, textarea, input, select { font: inherit; }
button { cursor: pointer; }

/* Blazor boot */
.loading-progress { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8em; height: 8em; }
.loading-progress circle { fill: none; stroke: var(--c-2a2f36); stroke-width: 6%; }
.loading-progress circle:last-child { stroke: var(--c-e9ff67); stroke-dasharray: 251%; stroke-dashoffset: 200%; transform-origin: center; animation: ring 1.4s linear infinite; }
@keyframes ring { to { stroke-dashoffset: 50%; transform: rotate(360deg); } }
.loading-progress-text { position: absolute; top: calc(50% + 5em); left: 50%; transform: translateX(-50%); color: var(--t-a9b0b8); font-size: 0.85rem; }
.loading-progress-text::after { content: "Loading…"; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 0.7rem 1rem; background: var(--c-5c1f26); color: var(--t-ffd7db); z-index: 1000; font-size: 0.85rem; }
#blazor-error-ui a { color: var(--t-ffffff); margin-left: 0.75rem; }

/* ── Auth ─────────────────────────────────────────────────── */
.auth-screen { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% -20%, var(--c-272d24) 0, var(--c-13161a) 40%, var(--c-111418) 70%); padding: 20px; }
.auth-card { width: min(400px, 100%); padding: 32px 28px; color: var(--t-dce1e5); background: var(--c-15191e); border: 1px solid var(--c-343b44); border-radius: 16px; box-shadow: 0 24px 90px rgba(0,0,0,.5); animation: auth-in .35s ease; }
@keyframes auth-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.auth-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 30px; font-weight: 700; font-size: 17px; }
.logo-orbit { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50% 50% 50% 9px; color: var(--t-0b0d10); background: var(--c-e9ff67); font-weight: 800; box-shadow: 0 0 26px rgba(233,255,103,.22); }
.auth-overline { margin: 0 0 9px; color: var(--t-8d984c); font: 500 13px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .2em; }
.auth-card h1 { font-size: 24px; letter-spacing: -.03em; margin: 0 0 24px; }
.auth-card label { display: grid; gap: 7px; margin-bottom: 15px; color: var(--t-a9b0b8); font: 500 13px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
.auth-card input { width: 100%; padding: 11px 12px; color: var(--t-dce1e5); background: var(--c-0f1216); border: 1px solid var(--c-303740); border-radius: 8px; outline: none; font: 16px Manrope, sans-serif; text-transform: none; letter-spacing: normal; transition: border-color .15s ease, box-shadow .15s ease; }
.auth-card input::placeholder { color: var(--t-a9b0b8); }
.auth-card input:hover { border-color: var(--c-3d454e); }
.auth-card input:focus { border-color: var(--c-8b9aa8); box-shadow: 0 0 0 3px rgba(233,255,103,.10); }
.auth-hint { display: block; color: var(--t-a9b0b8); font: 400 13px Manrope, sans-serif; text-transform: none; letter-spacing: normal; }
.auth-card .primary { width: 100%; margin-top: 9px; padding: 12px; color: var(--t-111418); background: var(--c-e9ff67); border: 0; border-radius: 8px; font-size: 16px; font-weight: 700; transition: background .15s ease, transform .05s ease, opacity .15s ease; }
.auth-card .primary:hover:not(:disabled) { background: var(--c-f2ff9a); }
.auth-card .primary:active:not(:disabled) { transform: scale(.99); }
.auth-card .primary:disabled { opacity: .55; cursor: default; }
.auth-error { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 18px; padding: 10px 12px; color: var(--t-ef9ba0); background: var(--c-311e22); border: 1px solid var(--c-4a2a2f); border-radius: 8px; font-size: 14px; line-height: 1.55; }
.auth-check { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 50%; background: rgba(233,255,103,.12); color: var(--t-e9ff67); font-size: 22px; font-weight: 800; }
.auth-success { margin: 0 0 26px; color: var(--t-aeb4bb); font-size: 16px; line-height: 1.75; }
.auth-footer { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--c-24282e); text-align: center; color: var(--t-a9b0b8); font-size: 15px; }
.auth-card a { color: var(--t-e9ff67); text-decoration: none; font-weight: 600; }
.auth-card a:hover { text-decoration: underline; }
.auth-back { display: inline-flex; align-items: center; gap: 6px; color: var(--t-e9ff67); font-size: 15px; font-weight: 600; text-decoration: none; }
.auth-back:hover { text-decoration: underline; }
.muted { color: var(--t-a9b0b8); font-size: 14px; }

/* ── Workspace shell ──────────────────────────────────────── */
.workspace { height: 100vh; display: grid; grid-template-columns: 320px 1fr; overflow: hidden; }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar { display: flex; flex-direction: column; background: var(--c-0b0d10); border-right: 1px solid var(--c-24282e); min-height: 0; }
.side-top { padding: 19px 15px 13px; }
.logo { display: flex; align-items: center; gap: 10px; padding: 0 7px 17px; font-weight: 700; letter-spacing: -.02em; }
.new-chat { width: 100%; display: flex; gap: 9px; align-items: center; padding: 10px 12px; color: var(--t-e5e9ee); background: var(--c-171a1f); border: 1px solid var(--c-2a2f36); border-radius: 8px; font-size: 16px; font-weight: 600; }
.new-chat:hover { background: var(--c-1d2127); border-color: var(--c-3b424c); }
.new-chat span { color: var(--t-e9ff67); font-size: 20px; }
.chat-section { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 11px 9px; }
.section-label { display: flex; justify-content: space-between; padding: 0 9px 9px; color: var(--t-a9b0b8); font: 500 13px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .11em; }
.chat-list { overflow-y: auto; display: grid; gap: 3px; }
.chat-item { min-width: 0; display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--t-a9afb7); text-align: left; text-decoration: none; cursor: pointer; }
.chat-item:hover, .chat-item.selected { background: var(--c-191c21); color: var(--t-f1f3f5); }
.chat-actions { display: none; gap: 2px; flex-shrink: 0; }
.chat-item:hover .chat-actions { display: flex; }
.chat-action { padding: 2px 5px; color: var(--t-a9b0b8); background: transparent; border: 0; font-size: 16px; border-radius: 5px; }
.chat-action:hover { color: var(--t-d4d9dd); background: var(--c-24292f); }
.chat-action.danger:hover { color: var(--t-ff8a8f); }
.archive-toggle { background: transparent; border: 0; color: var(--t-a9b0b8); font: 500 13px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .11em; cursor: pointer; padding: 0; }
.archive-toggle:hover { color: var(--t-a9afb7); }
.chat-state { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--c-454a52); }
.chat-state.running, .chat-state.queued, .chat-state.cancelrequested { background: var(--c-e9ff67); box-shadow: 0 0 8px rgba(233,255,103,.55); }
.chat-copy { min-width: 0; flex: 1; }
.chat-copy strong, .chat-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-copy strong { font-size: 15px; font-weight: 600; }
.chat-copy small { color: var(--t-a9b0b8); font-size: 13px; margin-top: 3px; }
.no-chats { color: var(--t-a9b0b8); text-align: center; font-size: 14px; padding-top: 20px; }
.side-foot { margin: 10px 14px 15px; padding: 12px 0 0; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--c-1c2025); color: var(--t-9da3ab); }
.side-foot strong, .side-foot small { display: block; }
.side-foot strong { font-size: 14px; }
.side-foot small { color: var(--t-a9b0b8); margin-top: 3px; font-size: 13px; }
.status-light { width: 7px; height: 7px; border-radius: 50%; background: var(--c-b9d447); box-shadow: 0 0 9px var(--c-7d8f36); }

/* ── Chat main ────────────────────────────────────────────── */
.chat-main { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: 62px minmax(0,1fr) auto; background: radial-gradient(circle at 50% -30%, var(--c-272d24) 0, var(--c-13161a) 38%, var(--c-111418) 68%); }
.chat-header { display: flex; align-items: center; padding: 0 23px; border-bottom: 1px solid var(--c-343b44); background: var(--header-bg); backdrop-filter: blur(14px); z-index: 2; }
.chat-header .header-title { flex: 1; min-width: 0; }
.chat-header strong, .chat-header small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header strong { font-size: 16px; }
.chat-header small { color: var(--t-a9b0b8); font-size: 13px; margin-top: 2px; }
.header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin-left: 12px; }
.header-actions select { max-width: 190px; padding: 6px 8px; color: var(--t-9da4ac); background: var(--c-191d22); border: 1px solid var(--c-30363e); border-radius: 7px; font-size: 13px; outline: none; }
.header-btn { min-width: 29px; height: 29px; padding: 0 7px; color: var(--t-a9b0b8); background: transparent; border: 1px solid var(--c-30363e); border-radius: 7px; }
.header-btn:hover { color: var(--t-e0e4e7); background: var(--c-20252b); }
.stop-button { color: var(--t-c9ced3); background: transparent; border: 1px solid var(--c-373d45); border-radius: 7px; padding: 6px 11px; font-size: 14px; }
.stop-button:hover { color: var(--t-ff9da0); border-color: var(--c-704248); }
.rename-input { padding: 5px 8px; color: var(--t-e5e9ee); background: var(--c-0f1216); border: 1px solid var(--c-59636d); border-radius: 7px; font-size: 15px; outline: none; width: 260px; }

/* ── Messages ─────────────────────────────────────────────── */
.messages { overflow-y: auto; overflow-x: hidden; min-height: 0; }
.message-column { width: min(780px, calc(100% - 40px)); margin: 0 auto; padding: 38px 0 25px; }
.message { display: grid; grid-template-columns: 31px 1fr; gap: 13px; padding: 18px 0; }
.message + .message { border-top: 1px solid var(--c-2d333b); }
.message-avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: var(--t-0b0d10); background: var(--c-d4dae0); font-size: 14px; font-weight: 800; }
.message.assistant .message-avatar { background: var(--c-e9ff67); border-radius: 50% 50% 50% 8px; }
.message-role { color: var(--t-aeb4bb); font-size: 14px; font-weight: 700; margin: 1px 0 9px; }
.message-content { color: var(--t-cbd0d5); white-space: pre-wrap; font-size: 16px; line-height: 1.78; word-break: break-word; }
.served-model-note { display: block; margin-top: 6px; color: var(--t-a9b0b8); font-size: 13px; }
.attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.attachment-chip { padding: 6px 8px; color: var(--t-b9c26f); background: var(--c-20241c); border: 1px solid var(--c-363d29); border-radius: 6px; font-size: 13px; }

/* Thinking / run status */
.thinking-message { color: var(--t-9ca3aa); }
.pulse { animation: glow 1.8s infinite; }
.thinking-title { display: flex; align-items: center; gap: 10px; color: var(--t-cbd0d5); font-size: 15px; font-weight: 600; }
.thinking-dots { display: flex; gap: 3px; }
.thinking-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--c-d6eb64); animation: bounce 1.1s infinite; }
.thinking-dots i:nth-child(2) { animation-delay: .16s; }
.thinking-dots i:nth-child(3) { animation-delay: .32s; }
.progress { height: 2px; width: min(340px, 100%); background: var(--c-292e34); border-radius: 4px; overflow: hidden; margin-top: 11px; }
.progress span { height: 100%; display: block; background: var(--c-c8de58); transition: width .5s ease; }
.run-error { margin: 13px 0; padding: 11px 13px; border: 1px solid var(--c-5f373e); border-radius: 8px; color: var(--t-ef9ba0); background: rgba(99,45,53,.18); font-size: 14px; }
.run-error span { display: block; margin-top: 4px; color: var(--t-a96e73); }
.run-error button, .result-actions button { margin-top: 8px; padding: 5px 9px; color: var(--t-cbd2d8); background: var(--c-242a30); border: 1px solid var(--c-3b424b); border-radius: 6px; font-size: 13px; }
.run-cancelled { margin: 13px 0; color: var(--t-a9b0b8); font-size: 14px; }
.run-cancelled button { margin-left: 8px; padding: 5px 9px; color: var(--t-cbd2d8); background: var(--c-242a30); border: 1px solid var(--c-3b424b); border-radius: 6px; font-size: 13px; }

/* ── Composer ─────────────────────────────────────────────── */
.composer-wrap { position: relative; padding: 10px 25px 16px; background: linear-gradient(transparent, var(--c-111418) 18%); }
.composer { width: min(780px, 100%); min-height: 52px; margin: 0 auto; display: grid; grid-template-columns: 35px 1fr 34px; align-items: end; gap: 7px; padding: 8px; border: 1px solid var(--c-343a42); border-radius: 13px; background: var(--c-1a1e23); box-shadow: 0 16px 45px rgba(0,0,0,.2); }
.composer:focus-within { border-color: var(--c-565e63); }
.composer textarea { min-height: 34px; max-height: min(40vh, 360px); overflow-y: auto; resize: none; border: 0; outline: 0; padding: 8px 2px 6px; color: var(--t-e2e6e9); background: transparent; font-size: 16px; line-height: 1.5; }
.composer textarea::placeholder { color: var(--t-a9b0b8); }
.attach, .send { width: 33px; height: 33px; display: grid; place-items: center; border: 0; border-radius: 8px; }
.attach { color: var(--t-a9b0b8); background: transparent; font-size: 22px; }
.attach:hover { color: var(--t-b9bfc5); background: var(--c-24292f); }
.send { color: var(--t-111418); background: var(--c-e9ff67); font-size: 21px; font-weight: 800; }
.send:disabled { color: var(--t-a9b0b8); background: var(--c-2b3036); cursor: default; }
.composer-wrap > p { margin: 7px 0 0; text-align: center; color: var(--t-a9b0b8); font-size: 13px; }

/* Empty state */
.chat-empty-state { margin: 0 auto; width: min(720px, calc(100% - 40px)); padding: 45px 0 20px; text-align: center; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; height: 100%; box-sizing: border-box; }
.chat-empty-state > div { width: 100%; }
.chat-empty-state .welcome-mark { display: flex; justify-content: center; margin-bottom: 19px; }
.chat-empty-state .welcome-mark span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50% 50% 50% 15px; color: var(--t-0b0d10); background: var(--c-e9ff67); font-weight: 800; font-size: 24px; box-shadow: 0 0 42px rgba(233,255,103,.13); }
.chat-empty-state .overline { color: var(--t-8d984c); font: 500 13px 'DM Mono', monospace; letter-spacing: .2em; margin: 0 0 12px; }
.chat-empty-state h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.055em; margin: 0 0 13px; }
.chat-empty-state .welcome-copy { max-width: 560px; margin: 0 auto; color: var(--t-a9b0b8); font-size: 17px; line-height: 1.75; }

/* Scrollbars */
.send-error { width: min(780px, 100%); margin: 0 auto 7px; padding: 7px 10px; color: var(--t-ff9da0); background: var(--c-20241d); border: 1px solid var(--c-704248); border-radius: 8px; font-size: 14px; }
.send-error button { margin-left: 8px; padding: 0; color: var(--t-a9b0b8); background: transparent; border: 0; }
.pending-files { width: min(780px, 100%); margin: 0 auto 7px; display: flex; flex-wrap: wrap; gap: 5px; }
.pending-files > span { padding: 5px 7px 5px 9px; color: var(--t-aeb66e); background: var(--c-20241d); border: 1px solid var(--c-39402c); border-radius: 6px; font-size: 13px; }
.pending-files button { margin-left: 7px; padding: 0; color: var(--t-a9b0b8); background: transparent; border: 0; }
.message-body { min-width: 0; }

/* Voice */
.composer.voice-capable { grid-template-columns: 35px 35px 1fr 34px; }
.attach.dictate { font-size: 18px; }
.attach.dictate.listening { color: var(--t-111418); background: var(--c-e9ff67); animation: voice-pulse 1.2s ease-in-out infinite; }
.speak-btn { margin: 8px 0 0; padding: 3px 8px; color: var(--t-a9b0b8); background: transparent; border: 1px solid var(--c-2c3238); border-radius: 6px; font-size: 13px; cursor: pointer; }
.speak-btn:hover { color: var(--t-cbd2d8); border-color: var(--c-444c55); }
.msg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; opacity: .55; transition: opacity .15s; }
.message:hover .msg-actions, .msg-actions:focus-within { opacity: 1; }
.msg-actions .speak-btn { margin: 0; }
/* Reply: the quote above a message, and the bar above the composer while a reply is being written */
.reply-quote { display: block; width: 100%; max-width: 640px; margin: 2px 0 6px; padding: 5px 10px; text-align: left; color: var(--t-a9b0b8); background: transparent; border: 0; border-left: 3px solid var(--c-444c55); border-radius: 4px; font-size: 14px; cursor: pointer; }
.reply-quote:hover { color: var(--t-cbd2d8); }
.reply-quote strong { display: block; font-size: 13px; }
.reply-quote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reply-bar { width: min(780px, 100%); margin: 0 auto 7px; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--t-a9b0b8); background: var(--c-1a1e23); border: 1px solid var(--c-2c3238); border-left: 3px solid var(--c-444c55); border-radius: 6px; font-size: 14px; }
.reply-bar > div { min-width: 0; }
.reply-bar strong { display: block; font-size: 13px; }
.reply-bar span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar button { padding: 0 4px; color: var(--t-a9b0b8); background: transparent; border: 0; cursor: pointer; }
.inline-stop { margin-left: 6px; padding: 3px 10px; color: var(--t-c9ced3); background: transparent; border: 1px solid var(--c-373d45); border-radius: 999px; font-size: 13px; cursor: pointer; }
.inline-stop:hover { color: var(--t-ff9da0); border-color: var(--c-704248); }
.queue-hint { display: block; margin-top: 8px; color: var(--t-a9b0b8); font-size: 13px; }
.voice-toolbar { position: relative; width: min(780px, 100%); margin: 0 auto 6px; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.voice-toggle { padding: 4px 10px; color: var(--t-9da4ac); background: var(--c-1a1e23); border: 1px solid var(--c-2c3238); border-radius: 999px; font-size: 13px; cursor: pointer; }
.voice-toggle:hover { color: var(--t-dce1e5); border-color: var(--c-444c55); }
.voice-bar { width: min(780px, 100%); margin: 0 auto 8px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--c-1a1e23); border: 1px solid var(--c-e9ff67); border-radius: 12px; }
.voice-bar button { padding: 5px 10px; color: var(--t-cbd2d8); background: var(--c-242a30); border: 1px solid var(--c-3b424b); border-radius: 6px; font-size: 13px; cursor: pointer; }
.voice-bar .voice-end { margin-left: auto; }
.voice-status { display: grid; min-width: 0; gap: 2px; }
.voice-status strong { color: var(--t-e9ff67); font-size: 15px; }
.voice-status small { color: var(--t-9da4ac); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: normal; }
.voice-orb { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c-656d76); }
.voice-orb.listening { background: var(--c-e9ff67); animation: voice-pulse 1.2s ease-in-out infinite; }
.voice-orb.thinking { background: var(--c-9da4ac); animation: voice-pulse 2s ease-in-out infinite; }
.voice-orb.speaking { background: var(--c-7fd6ff); animation: voice-pulse .7s ease-in-out infinite; }
@keyframes voice-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.18); } }

/* ── Admin ────────────────────────────────────────────────── */
.admin-main { grid-template-rows: 62px minmax(0,1fr); }
.admin-body { display: flex; flex-direction: column; min-height: 0; }
.admin-tab-select { padding: 14px 20px 0; border-bottom: 1px solid var(--c-24282e); }
.admin-tab-select select { width: 100%; max-width: 260px; padding: 9px 11px; margin-bottom: 14px; color: var(--t-e9ff67); background: var(--c-191d22); border: 1px solid var(--c-30363e); border-radius: 8px; font-size: 15px; font-weight: 700; outline: none; }
.admin-panel { padding: 20px; overflow-y: auto; flex: 1; }
.admin-loading { color: var(--t-a9b0b8); font-size: 14px; }
.admin-hint { margin: 0 0 12px; color: var(--t-a9b0b8); font-size: 13px; }
.admin-subheading { margin: 0 0 12px; color: var(--t-9da4ac); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.settings-block { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--c-24282e); }
.settings-error, .settings-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 8px 8px 8px 10px; border-radius: 6px; font-size: 13px; }
.settings-error { color: var(--t-ef9ba0); background: var(--c-311e22); }
.settings-ok { display: flex; margin-bottom: 12px; padding: 10px 12px; border-radius: 6px; font-size: 14px; color: var(--t-e9ff67); background: var(--c-1b2013); border: 1px solid var(--c-4a5a2a); }
.settings-status { color: var(--t-c8e58a); background: var(--c-1e2a1c); }
.admin-create-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto auto; gap: 7px; margin-bottom: 16px; align-items: center; }
.admin-create-row input, .admin-create-row select { padding: 8px 9px; color: var(--t-dce1e5); background: var(--c-0f1216); border: 1px solid var(--c-303740); border-radius: 7px; font-size: 14px; outline: none; }
.admin-create-row button { padding: 8px 11px; white-space: nowrap; }
.user-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.user-table th { text-align: left; padding: 8px 9px; color: var(--t-a9b0b8); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--c-24282e); }
.user-table td { padding: 7px 9px; border-bottom: 1px solid var(--c-1c2025); color: var(--t-c4c9ce); vertical-align: middle; }
.user-row-actions { display: flex; gap: 5px; white-space: nowrap; }
.user-row-actions button { padding: 5px 8px; color: var(--t-a8afb6); background: var(--c-22272d); border: 1px solid var(--c-363d45); border-radius: 6px; font-size: 13px; cursor: pointer; }
.user-row-actions button:hover { color: var(--t-eef1f3); background: var(--c-2b3138); }
.user-row-actions button.danger:hover { color: var(--t-ff9da0); background: var(--c-2a1a1d); border-color: var(--c-704248); }
.admin-panel label { display: grid; gap: 6px; margin-bottom: 13px; color: var(--t-a9b0b8); font-size: 13px; }
.admin-panel input, .admin-panel select, .admin-panel textarea { width: 100%; padding: 9px 10px; color: var(--t-dce1e5); background: var(--c-0f1216); border: 1px solid var(--c-303740); border-radius: 7px; outline: none; font-size: 14px; }
.admin-panel input:focus, .admin-panel select:focus { border-color: var(--c-59636d); }
.admin-panel .primary { color: var(--t-111418); background: var(--c-e9ff67); border: 0; padding: 8px 12px; border-radius: 7px; font-size: 13px; font-weight: 700; }
.usage-summary { display: block; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--c-2a2f36); font-size: 14px; color: var(--t-aeb4bb); }
.usage-summary > strong { display: block; margin-bottom: 8px; color: var(--t-dce1e5); }
.usage-summary .settings-grid { margin-bottom: 10px; }
.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.provider-card { margin-bottom: 8px; background: var(--c-13161a); border: 1px solid var(--c-262b32); border-radius: 10px; overflow: hidden; }
.provider-summary { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }
.provider-name { flex: 1; min-width: 0; color: var(--t-dce1e5); font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.provider-meta { display: flex; align-items: center; gap: 6px; color: var(--t-a9b0b8); font-size: 13px; white-space: nowrap; }
.provider-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-565d66); flex: 0 0 auto; }
.provider-dot.ok { background: var(--c-9fd452); box-shadow: 0 0 6px rgba(159,212,82,.5); }
.provider-chevron { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; color: var(--t-a9b0b8); background: transparent; border: 0; font-size: 14px; cursor: pointer; }
.provider-chevron:hover { color: var(--t-ff8a8f); }
.provider-details { padding: 3px 13px 13px; border-top: 1px solid var(--c-1c2025); }
.provider-fields { display: grid; grid-template-columns: 1.2fr 1.2fr 1.6fr 1.2fr; gap: 7px; align-items: center; margin-top: 11px; }
.provider-fields input, .provider-fields select { padding: 7px 9px; color: var(--t-dce1e5); background: var(--c-0f1216); border: 1px solid var(--c-303740); border-radius: 6px; font-size: 13px; }
.provider-actions { display: flex; gap: 6px; margin-top: 9px; }
.provider-actions button { padding: 6px 10px; color: var(--t-a8afb6); background: var(--c-22272d); border: 1px solid var(--c-363d45); border-radius: 6px; font-size: 13px; cursor: pointer; }
.provider-actions button:hover:not(:disabled) { color: var(--t-eef1f3); background: var(--c-2b3138); border-color: var(--c-4d565f); }
.provider-actions button.primary { color: var(--t-111418); background: var(--c-e9ff67); border: 1px solid var(--c-e9ff67); font-weight: 700; }
.provider-actions button.primary:hover:not(:disabled) { background: var(--c-f2ff9a); }
.provider-actions button.danger:hover:not(:disabled) { color: var(--t-ff9da0); background: var(--c-2a1a1d); border-color: var(--c-704248); }
.provider-actions button:disabled { opacity: .45; cursor: default; }
.provider-models { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--c-22262c); }
.model-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.secondary { padding: 6px 10px; color: var(--t-a8afb6); background: var(--c-22272d); border: 1px solid var(--c-363d45); border-radius: 6px; font-size: 13px; cursor: pointer; }
.toggle-wrap { display: inline-flex; align-items: center; gap: 7px; }
.toggle-label { color: var(--t-9da4ac); font-size: 13px; white-space: nowrap; }
.toggle { position: relative; flex: 0 0 auto; width: 34px; height: 19px; padding: 0; background: var(--c-2b3036); border: 1px solid var(--c-363d45); border-radius: 999px; cursor: pointer; }
.toggle .toggle-thumb { position: absolute; top: 1px; left: 1px; width: 15px; height: 15px; background: var(--c-8e969f); border-radius: 50%; transition: transform .15s ease, background .15s ease; }
.toggle.on { background: var(--c-3c4a22); border-color: var(--c-5a6b34); }
.toggle.on .toggle-thumb { transform: translateX(15px); background: var(--c-e9ff67); }
.check-chip { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 5px 11px 5px 8px; color: var(--t-a8afb6); background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 999px; font-size: 13px; cursor: pointer; }
.check-chip:hover { color: var(--t-dce1e5); border-color: var(--c-465059); }
.check-chip:has(input:checked) { color: var(--t-e9ff67); background: var(--c-1b2013); border-color: var(--c-4a5a2a); }
.check-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 15px; height: 15px; margin: 0; padding: 0; display: inline-grid; place-content: center; background: var(--c-0f1216); border: 1px solid var(--c-3f4650); border-radius: 4px; cursor: pointer; }
input[type=checkbox]::before { content: ""; width: 9px; height: 9px; background: var(--c-111418); transform: scale(0); transition: transform .1s ease; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
input[type=checkbox]:checked { background: var(--c-e9ff67); border-color: var(--c-e9ff67); }
input[type=checkbox]:checked::before { transform: scale(1); }
input[type=time] { color-scheme: dark; }

.workflow-change { display: flex; gap: 6px; margin: 8px 0; }
.workflow-change input { flex: 1; min-width: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-2a2f36); border-radius: 5px; border: 2px solid var(--c-0b0d10); }
::-webkit-scrollbar-thumb:hover { background: var(--c-3b424c); }

@keyframes bounce { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-3px); opacity: 1; } }
@keyframes glow { 50% { box-shadow: 0 0 18px rgba(233,255,103,.25); } }

.message-content .generated-image { display: block; max-width: min(100%, 512px); max-height: 70vh; object-fit: contain; border-radius: 8px; margin: 6px 0; cursor: zoom-in; }
/* Headings, lists, tables and code in replies (ChatMarkdown). No whitespace sits between the tags, so pre-wrap above does not add gaps. */
.message-content .md-p { margin: 0 0 8px; }
.message-content > :last-child { margin-bottom: 0; }
.message-content .md-h { font-weight: 700; color: var(--t-eceff1); line-height: 1.35; margin: 12px 0 5px; white-space: normal; }
.message-content > .md-h:first-child { margin-top: 0; }
.message-content .md-h1 { font-size: 19px; }
.message-content .md-h2 { font-size: 18px; }
.message-content .md-h3 { font-size: 17px; }
.message-content .md-list { margin: 2px 0 8px; padding-left: 22px; white-space: normal; }
.message-content .md-list li { margin: 2px 0; padding-left: 2px; }
.message-content .md-table-wrap { overflow-x: auto; margin: 6px 0 10px; max-width: 100%; }
.message-content .md-table { border-collapse: collapse; font-size: 16px; line-height: 1.5; white-space: normal; }
.message-content .md-table th, .message-content .md-table td { border: 1px solid var(--c-2c3238); padding: 6px 12px; vertical-align: top; }
.message-content .md-table th { background: var(--c-1a1f24); color: var(--t-eceff1); font-weight: 700; }
.message-content .md-code { margin: 6px 0 10px; padding: 10px 12px; background: var(--c-12161a); border: 1px solid var(--c-2c3238); border-radius: 8px; overflow-x: auto; font: 15px/1.55 Consolas, "DM Mono", monospace; white-space: pre; }
.message-content .md-rule { border: 0; border-top: 1px solid var(--c-2c3238); margin: 12px 0; }
.message-content .generated-video { display: block; width: 100%; max-width: 560px; height: auto; max-height: min(70vh, 640px); object-fit: contain; border-radius: 8px; margin: 8px auto 4px; background: #000; }
.message-content .doc-preview { display: inline-block; width: 200px; max-width: 46%; border-radius: 6px; margin: 6px 8px 2px 0; border: 1px solid rgba(128, 128, 128, 0.35); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); vertical-align: top; background: var(--c-ffffff); }

/* Approval card */
.approval-card { margin: 13px 0; padding: 14px 16px; border: 1px solid var(--c-5a5228); border-radius: 10px; color: var(--t-f0e2a0); background: rgba(90,82,40,.18); font-size: 16px; }
.approval-head { display: flex; align-items: center; gap: 12px; }
.approval-icon { font-size: 28px; }
.approval-kicker { display: block; color: var(--t-cfc394); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.approval-head strong { font-size: 18px; }
.approval-note { margin: 10px 0 0; color: var(--t-d8cc9c); font-size: 15px; line-height: 1.45; }
.approval-fields { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 10px 0 0; padding: 10px 12px; background: var(--c-17150f); border-radius: 8px; }
.approval-fields dt { color: var(--t-a99f70); font-size: 15px; }
.approval-fields dd { margin: 0; color: var(--t-f3ecc8); font-size: 16px; word-break: break-word; }
.approval-fields dd.long { white-space: pre-wrap; }
.approval-warning { margin: 10px 0 0; padding: 8px 10px; color: var(--t-ffc9a8); background: rgba(160,70,30,.22); border-radius: 8px; font-size: 15px; }
.approval-tech { margin-top: 10px; font-size: 15px; color: var(--t-a99f70); }
.approval-tech summary { cursor: pointer; }
.approval-tech pre { margin: 6px 0 0; padding: 8px; color: var(--t-cfc394); background: var(--c-17150f); border-radius: 6px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.approval-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.approval-actions button { padding: 9px 16px; color: var(--t-cbd2d8); background: var(--c-242a30); border: 1px solid var(--c-3b424b); border-radius: 8px; font-size: 16px; cursor: pointer; }
.approval-actions button.approve { color: var(--t-10130a); background: var(--c-e9ff67); border-color: var(--c-e9ff67); font-weight: 600; }
.approval-actions button:disabled { opacity: .6; }

/* Workflow flow chart */
.flow { list-style: none; margin: 10px 0; padding: 0; position: relative; }
.flow li { position: relative; display: flex; gap: 12px; align-items: flex-start; padding-bottom: 14px; }
.flow li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--c-303740); }
.flow-node { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-1d2228); border: 2px solid var(--c-3b424b); font-size: 18px; z-index: 1; }
.flow-node.start, .flow-node.end { color: var(--t-e9ff67); border-color: var(--c-4a5a2a); font-size: 16px; }
.flow-node.stop { border-color: var(--c-8a4a3a); }
.flow-node.action { border-color: var(--c-4a5a2a); }
.flow-node.write { border-color: var(--c-4a5f8a); }
.flow-node.choose { border-color: var(--c-7a6a3a); }
.flow-card { flex: 1; min-width: 0; padding: 10px 13px; background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 10px; color: var(--t-cfd5da); font-size: 16px; }
.flow-card.minor { padding: 6px 12px; color: var(--t-a9b0b8); background: transparent; border-style: dashed; font-size: 15px; }
.flow-title { margin-bottom: 4px; color: var(--t-eef1f3); font-weight: 600; }
.flow-body { line-height: 1.5; }
.flow-quote { margin-top: 6px; padding: 8px 10px; background: var(--c-10141a); border-left: 3px solid var(--c-4a5f8a); border-radius: 4px; white-space: pre-wrap; }
.flow-arg { display: grid; grid-template-columns: 130px 1fr; gap: 8px; padding: 3px 0; }
.flow-arg-label { color: var(--t-a9b0b8); }
.flow-table { margin-top: 6px; border-collapse: collapse; }
.flow-table th { padding: 2px 14px 2px 0; color: var(--t-a9b0b8); font-weight: 400; text-align: left; white-space: nowrap; vertical-align: top; }
.flow-table td { padding: 2px 0; }
.flow-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.flow-chip { display: inline-block; padding: 1px 9px; background: var(--c-232a31); border-radius: 999px; font-size: 15px; }
.flow-chip.value { color: var(--t-c9dcff); background: var(--c-1d2a40); }
.flow-gives { margin-top: 8px; color: var(--t-a9b0b8); font-size: 15px; }

/* Plain-language helpers */
.friendly-help { margin: 4px 0 0; color: var(--t-a9b0b8); font-size: 15px; line-height: 1.4; }
.perm-row { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
.perm-row small { margin-left: 30px; color: var(--t-a9b0b8); font-size: 14px; }

/* Command approvals, tool activity and permissions */
.permission-select { max-width: 130px; }
.approval-card.danger { border-color: var(--c-7a3238); color: var(--t-f3b1b4); background: rgba(122,50,56,.18); }
.approval-card.danger .approval-kicker, .approval-card.danger .approval-note { color: var(--t-e6a3a6); }
.approval-danger-reason { margin: 10px 0 0; padding: 8px 10px; color: var(--t-ffb3b6); background: rgba(160,40,50,.25); border-radius: 8px; font-size: 15px; font-weight: 600; }
.approval-actions button.remember { color: var(--t-e9ff67); border-color: var(--c-5b6330); }
.approval-timer { align-self: center; margin-left: auto; color: var(--t-8c8560); font-size: 14px; }
.continue-btn { margin-top: 8px; }
.tool-activity { margin: 8px 0 4px; font-size: 15px; color: var(--t-a9b0b8); }
.tool-activity > summary { cursor: pointer; padding: 4px 0; }
.tool-activity > summary:hover { color: var(--t-c9ced3); }
.tool-activity ol { list-style: none; margin: 4px 0 0; padding: 0 0 0 10px; border-left: 1px solid var(--c-2c3238); display: grid; gap: 4px; }
.tool-step > details > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--t-b5bbc2); min-width: 0; }
.tool-step > details > summary em { margin-left: auto; padding-left: 8px; color: var(--t-a9b0b8); font-size: 14px; font-style: normal; white-space: nowrap; }
.tool-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-5fbf8a); }
.tool-step.failed .tool-dot { background: var(--c-e0736f); }
.tool-step.denied .tool-dot { background: var(--c-8c8560); }
.tool-step pre { margin: 6px 0 0; padding: 7px 9px; color: var(--t-aab0b7); background: var(--c-15191d); border-radius: 6px; font-size: 14px; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }
.tool-step pre.tool-output { color: var(--t-a9b0b8); }
.permissions-page h2 { margin: 18px 0 8px; font-size: 16px; color: var(--t-c9ced3); }
.permissions-page .muted { color: var(--t-a9b0b8); font-size: 15px; }
.grant-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; font-size: 15px; color: var(--t-aab0b7); }
.grant-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grant-list button { padding: 4px 10px; color: var(--t-cbd2d8); background: var(--c-242a30); border: 1px solid var(--c-3b424b); border-radius: 6px; font-size: 14px; cursor: pointer; }
.permissions-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--t-9da4ac); }
.permissions-table th { text-align: left; padding: 6px 8px; color: var(--t-a9b0b8); font-weight: 500; border-bottom: 1px solid var(--c-2c3238); }
.permissions-table td { padding: 6px 8px; border-bottom: 1px solid var(--c-20252a); vertical-align: top; word-break: break-word; }
@media (max-width: 760px) { .permission-select { max-width: 90px; } }

/* Billing: markup and credit */
.billing-note { margin: 0 0 12px; color: var(--t-a9b0b8); font-size: 13px; line-height: 1.5; }
.billing-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.billing-form label { display: flex; flex-direction: column; gap: 4px; color: var(--t-9da4ac); font-size: 13px; }
.billing-form label.check-chip { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; }
.billing-form input:not([type=checkbox]), .billing-form select { padding: 8px 9px; min-width: 150px; color: var(--t-dce1e5); background: var(--c-0f1216); border: 1px solid var(--c-303740); border-radius: 7px; font-size: 14px; outline: none; }
.billing-gap { margin-top: 22px; }
.user-table td small { display: block; color: var(--t-a9b0b8); font-size: 13px; }
.side-foot small.credit-line { color: var(--t-a9b0b8); }
.side-foot small.credit-out { color: var(--t-ef9ba0); }
.temp-price-note { grid-column: 1 / -1; padding: 6px 9px; color: var(--t-e9ff67); background: var(--c-232710); border-radius: 6px; font-size: 13px; }
.analysis-grid { grid-template-columns: repeat(2, 1fr); margin-bottom: 12px; color: var(--t-aeb4bb); font-size: 14px; }
.billing-gap-small { margin-top: 10px; }
.trend-cell { width: 26%; }
.trend-bar { height: 8px; min-width: 1px; background: var(--c-e9ff67); border-radius: 4px; opacity: .85; }

/* Providers & models: tabs, model summaries, grouped settings, pricing table, unsaved bar */
.view-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.view-tabs button { padding: 7px 14px; color: var(--t-a8afb6); background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 999px; font-size: 14px; cursor: pointer; }
.view-tabs button:hover { color: var(--t-dce1e5); border-color: var(--c-465059); }
.view-tabs button.active { color: var(--t-e9ff67); background: var(--c-1b2013); border-color: var(--c-4a5a2a); }
.model-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.chip-mini { padding: 2px 8px; color: var(--t-a9b0b8); background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 999px; font-size: 13px; white-space: nowrap; }
.chip-mini.warn { color: var(--t-e9ff67); border-color: var(--c-4a5a2a); }
/* Usage & billing: a person's name that opens their requests, and the list under it. */
.link-button { min-height: 0; padding: 0; color: var(--t-e9ff67); background: none; border: 0; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.link-button:hover { text-decoration: underline; }
.sch-modal.usage-modal { width: min(1100px, 100%); }
.usage-modal-body { padding: 16px 18px 18px; overflow: auto; flex: 1; min-height: 0; }
.settings-grid.usage-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 14px; }
.usage-stats .usage-card { padding: 8px 12px; }
.usage-stats .usage-card strong { font-size: 18px; }
.usage-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.usage-toolbar .usage-search { flex: 1 1 240px; min-width: 180px; }
.usage-toolbar select { max-width: 220px; }
.usage-filter-wrap { position: relative; }
.usage-filter-btn.on { color: var(--t-e9ff67); border-color: var(--c-4a5a2a); }
.usage-filter-away { position: fixed; inset: 0; z-index: 61; }
.usage-filter-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 62; width: 280px; display: grid; gap: 10px; padding: 14px; background: var(--c-111418); border: 1px solid var(--c-2c3138); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.usage-filter-pop label { display: grid; gap: 4px; font-size: 13px; }
.usage-filter-pop select { max-width: none; }
.usage-filter-btn.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 10px; }
/* ── Usage charts ─────────────────────────────────────────────────────────────────────────────────────────────────────
   Series colours: the eight steps of a palette checked for colour-blind separation (light and dark stepped on their own). Money is
   blue / orange, tokens violet / aqua, and a person or model keeps the colour it was given. */
:root { --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500; --series-5:#d55181; --series-6:#008300; --series-7:#9085e9; --series-8:#e66767; --series-other:#898781; --grid:#2c2c2a; --axis:#4a4a46; --viz-muted:#9a9890; }
:root[data-theme=light] { --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100; --series-5:#e87ba4; --series-6:#008300; --series-7:#6250d6; --series-8:#e34948; --grid:#e1e0d9; --axis:#c3c2b7; --viz-muted:#898781; }

.viz-card { padding: 14px 16px; background: var(--c-13161a); border: 1px solid var(--c-262b32); border-radius: 12px; min-width: 0; }
.viz-card h4 { margin: 0 0 2px; font-size: 15px; color: var(--t-f1f3f5); }
.viz-card .viz-sub { margin: 0 0 10px; font-size: 13px; color: var(--t-a9b0b8); }
.viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; margin-bottom: 12px; }
.viz-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.viz-head .conn-tabs { margin: 0; }

.tc { position: relative; padding: 0 0 4px 44px; }
.tc-plot { position: relative; height: var(--tc-h, 220px); }
.tc-gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--grid); pointer-events: none; }
.tc-gl.base { border-top-color: var(--axis); }
.tc-gl span { position: absolute; right: calc(100% + 8px); top: -9px; font-size: 12px; color: var(--viz-muted); white-space: nowrap; }
.tc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tc-cols { position: absolute; inset: 0; display: flex; }
.tc-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; padding: 0 3px; }
.tc-bar { flex: 1; max-width: 28px; min-height: 0; border-radius: 4px 4px 0 0; }
.tc-stack { height: 100%; width: 100%; max-width: 28px; display: flex; flex-direction: column-reverse; }
.tc-seg { width: 100%; min-height: 1px; }
.tc-seg + .tc-seg { margin-bottom: 2px; }
.tc-seg:last-child { border-radius: 4px 4px 0 0; }
.tc-dot { position: absolute; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; border: 2px solid var(--c-111418); pointer-events: none; }
.tc-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--axis); pointer-events: none; }
.tc-hit { position: absolute; inset: 0; display: flex; }
.tc-hit div { flex: 1; cursor: crosshair; }
.tc-tip { position: absolute; top: 4px; z-index: 5; min-width: 160px; margin-left: 12px; padding: 8px 10px; background: var(--c-111418); border: 1px solid var(--c-2c3138); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 13px; pointer-events: none; }
.tc-tip.left { margin-left: 0; transform: translateX(calc(-100% - 12px)); }
.tc-tip strong { display: block; margin-bottom: 4px; color: var(--t-f1f3f5); }
.tc-tip-row { display: flex; align-items: center; gap: 6px; color: var(--t-dce1e5); }
.tc-tip-row i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tc-tip-row span { flex: 1; }
.tc-tip-row b { font-weight: 600; }
.tc-tip-row.total { margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--grid); }
.tc-x { position: relative; height: 22px; margin-top: 6px; }
.tc-x span { position: absolute; transform: translateX(-50%); font-size: 12px; color: var(--viz-muted); white-space: nowrap; }
.tc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 13px; color: var(--t-dce1e5); }
.tc-legend i, .rb-marker-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; }

.rb { display: grid; gap: 8px; }
.rb-row { display: grid; grid-template-columns: minmax(80px, 28%) 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.rb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t-dce1e5); }
.rb-label small { color: var(--t-a9b0b8); }
.rb-track { position: relative; height: 14px; background: color-mix(in srgb, var(--grid) 55%, transparent); border-radius: 4px; }
.rb-bar { position: absolute; left: 0; top: 0; bottom: 0; min-width: 2px; border-radius: 4px; }
.rb-marker { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed var(--t-f1f3f5); opacity: .7; }
.rb-value { min-width: 64px; text-align: right; font-weight: 600; color: var(--t-f1f3f5); }
.rb-key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--t-a9b0b8); }
.rb-marker-swatch { width: 0; height: 12px; border-left: 2px dashed var(--t-f1f3f5); border-radius: 0; opacity: .7; margin-right: 6px; }

.dn { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dn-ring { position: relative; width: 150px; height: 150px; flex: none; }
.dn-ring svg { width: 100%; height: 100%; }
.dn-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dn-center strong { font-size: 17px; color: var(--t-f1f3f5); }
.dn-center small { font-size: 12px; color: var(--t-a9b0b8); }
.dn-legend { flex: 1; min-width: 190px; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.dn-legend li { display: grid; grid-template-columns: 10px 1fr auto 44px; align-items: center; gap: 8px; color: var(--t-dce1e5); }
.dn-legend i { width: 10px; height: 10px; border-radius: 3px; }
.dn-legend .dn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-legend small { text-align: right; color: var(--t-a9b0b8); }

/* Wider than the button it hangs from (a percentage width would be a percentage of the button), never wider than the screen. */
.ep-pop { width: 360px; max-width: calc(100vw - 32px); left: 0; right: auto; }
.ep-pop input[type=search] { width: 100%; box-sizing: border-box; }
.ep-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.ep-quick button { padding: 4px 12px; min-height: 0; font-size: 13px; white-space: nowrap; }
.ep-pop .usage-filter-foot button { white-space: nowrap; }
.ep-list { display: grid; gap: 2px; max-height: 260px; overflow: auto; }
.ep-row { display: grid; grid-template-columns: auto 12px 1fr auto; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.ep-row:hover { background: var(--c-1d232a); }
.ep-row.off { opacity: .5; cursor: not-allowed; }
.ep-row i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid transparent; }
.ep-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-name small { color: var(--t-a9b0b8); }
.ep-row b { font-weight: 600; color: var(--t-dce1e5); }

/* The overview's two pages (cards, then charts) that slide sideways. */
.pager-wrap { overflow: hidden; touch-action: pan-y; }
.pager-track { display: flex; width: 100%; transition: transform .35s ease; }
.pager-page { flex: 0 0 100%; min-width: 0; }
.pager-page.hidden { height: 0; overflow: hidden; visibility: hidden; }
.pager-nav { display: flex; align-items: center; justify-content: center; margin-top: 10px; }
.pager-dots { display: flex; align-items: center; gap: 12px; }
/* Two round dots of one size: the current page is the solid accent, the other a soft tone. The sizes are pinned so no global button rule can stretch them. */
.pager-dots button { box-sizing: border-box; flex: none; width: 12px !important; min-width: 12px !important; max-width: 12px !important; height: 12px !important; min-height: 12px !important; max-height: 12px !important; padding: 0 !important; margin: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--series-1) 28%, var(--axis)); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.pager-dots button:hover { transform: scale(1.2); }
.pager-dots button:focus-visible { outline: 2px solid var(--series-1); outline-offset: 3px; }
.pager-dots button.on { background: var(--series-1); }
@media (prefers-reduced-motion: reduce) { .pager-track { transition: none; } }

/* Pricing visuals */
.sim { display: grid; gap: 12px; }
.sim-slider { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sim-slider input[type=range] { flex: 1 1 220px; min-width: 160px; accent-color: var(--series-1); }
.sim-slider output { min-width: 64px; font-size: 20px; font-weight: 700; color: var(--t-f1f3f5); }
.sim-row { display: grid; grid-template-columns: minmax(110px, 24%) 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.sim-track { position: relative; height: 20px; display: flex; background: color-mix(in srgb, var(--grid) 55%, transparent); border-radius: 4px; overflow: hidden; }
.sim-cost { background: var(--series-1); }
.sim-margin { background: var(--series-3); margin-left: 2px; }
.sim-loss { background: var(--series-8); margin-left: 2px; }
.sim-line { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 2px dashed var(--t-f1f3f5); opacity: .8; }
.sim-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--c-1d232a); font-size: 14px; color: var(--t-dce1e5); }
.sim-note.warn { border-left: 4px solid var(--series-8); }
.sim-note.ok { border-left: 4px solid var(--series-3); }
.gauge { position: relative; height: 18px; background: color-mix(in srgb, var(--grid) 55%, transparent); border-radius: 6px; overflow: hidden; }
.gauge-spent { position: absolute; left: 0; top: 0; bottom: 0; background: var(--series-1); }
.gauge-proj { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--series-1) 35%, transparent); }
.gauge-over { background: var(--series-8); }
.settings-grid.usage-cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 10px 0 12px; }
.usage-cards .usage-card strong.neg { color: #e5484d; }
.usage-topbar { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.usage-topbar .usage-filter-wrap { position: static; }
.usage-topbar .mon-head { margin-bottom: 0; }
.usage-range-text { font-size: 13px; color: var(--t-a9b0b8); }
.usage-page-pop { width: min(430px, 100%); left: 0; right: auto; gap: 14px; }
.usage-page-pop .pop-group { display: grid; gap: 6px; }
.usage-page-pop .pop-title { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--t-a9b0b8); }
.usage-page-pop .pop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.usage-page-pop .chip-mini { cursor: pointer; }
.usage-page-pop .pop-note { color: var(--t-a9b0b8); }
.usage-sort-pop { width: 210px; gap: 2px; padding: 6px; }
.usage-sort-pop .sort-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--t-dce1e5); font-size: 14px; text-align: left; cursor: pointer; }
.usage-sort-pop .sort-opt:hover { background: var(--c-1d232a); }
.usage-sort-pop .sort-opt.on { color: var(--t-e9ff67); font-weight: 600; }
.usage-sort-pop .sort-tick { width: 14px; }
.usage-filter-foot { display: flex; align-items: center; gap: 8px; }
.usage-filter-foot span { flex: 1; font-size: 13px; color: var(--t-a9b0b8); }
.usage-sort { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.usage-prompt { max-width: 340px; white-space: normal; }
.usage-prompt small { display: block; color: var(--t-a9b0b8); overflow-wrap: anywhere; }
.usage-pager { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.usage-pager button { padding: 6px 12px; }
.chip-mini.dirty { color: var(--t-f3c07a); border-color: var(--c-6a4f27); }
.model-sections { display: grid; gap: 6px; margin: 2px 0 12px 8px; }
.model-section { padding: 0 12px; background: var(--c-111418); border: 1px solid var(--c-23282e); border-radius: 8px; }
.model-section > summary { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; color: var(--t-dce1e5); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.model-section > summary::-webkit-details-marker { display: none; }
.model-section > summary::before { content: "▸"; color: var(--t-a9b0b8); font-size: 13px; }
.model-section[open] > summary::before { content: "▾"; }
.section-hint { color: var(--t-a9b0b8); font-size: 13px; font-weight: 400; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; padding: 2px 0 12px; }
.field-grid label { margin: 0; }
.fallback-model-card { padding: 2px 0 12px; }
.fallback-model-header { margin-bottom: 8px; color: var(--t-9da4ac); font-size: 13px; }
.fallback-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; color: var(--t-c4c9ce); font-size: 13px; border-bottom: 1px solid var(--c-1c2025); }
.fallback-add { display: flex; gap: 7px; margin-top: 8px; }
.pricing-table input { min-width: 74px; padding: 6px 8px; }
.pricing-table tr.dirty td { background: var(--c-1c1a10); }
.unsaved-bar { position: sticky; bottom: -20px; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 16px -20px -20px; padding: 10px 20px; color: var(--t-f3c07a); background: var(--c-1a1610); border-top: 1px solid var(--c-4a3a1c); font-size: 14px; }
.unsaved-bar span { margin-right: auto; }

/* Usage & billing: date range bar */
.range-bar { margin-bottom: 18px; }
.range-bar .view-tabs { flex-wrap: wrap; margin-bottom: 10px; }
.range-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: var(--t-a9b0b8); font-size: 13px; }
.range-line small { color: var(--t-a9b0b8); }
.range-group { display: inline-flex; align-items: center; gap: 5px; }
.range-group .chip-mini { cursor: pointer; }
.range-group .chip-mini:hover { color: var(--t-dce1e5); }

/* My account */
.chat-search { width: calc(100% - 18px); margin: 0 9px 9px; padding: 7px 10px; color: var(--t-dce1e5); background: var(--c-0f1216); border: 1px solid var(--c-262b32); border-radius: 7px; font-size: 14px; outline: none; }
.chat-search::placeholder { color: var(--t-a9b0b8); }
.chat-search:focus { border-color: var(--c-59636d); }
.usage-card { display: grid; gap: 4px; padding: 12px 14px; background: var(--c-13161a); border: 1px solid var(--c-262b32); border-radius: 10px; }
.usage-card small { color: var(--t-a9b0b8); font-size: 13px; }
.usage-card strong { color: var(--t-f1f3f5); font-size: 23px; letter-spacing: -.02em; }
.usage-bars { display: flex; align-items: flex-end; gap: 2px; height: 96px; padding: 6px 0 4px; }
.usage-bar { flex: 1; min-width: 2px; background: var(--c-e9ff67); opacity: .85; border-radius: 2px 2px 0 0; }
.usage-bar:hover { opacity: 1; }
.usage-bar.zero { opacity: .2; }
.user-table a { color: var(--t-e9ff67); text-decoration: none; }
.user-table a:hover { text-decoration: underline; }
@media (max-width: 760px) { .settings-grid { grid-template-columns: 1fr; } }

/* Access control */
.ac-card { margin-bottom: 18px; background: var(--c-13161a); border: 1px solid var(--c-262b32); border-radius: 12px; overflow: hidden; }
.ac-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--c-1f242a); flex-wrap: wrap; }
.ac-avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--t-0b0d10); background: var(--c-e9ff67); font-weight: 800; font-size: 16px; }
.ac-who { flex: 1; min-width: 160px; }
.ac-who strong, .ac-who small { display: block; }
.ac-who strong { color: var(--t-f1f3f5); font-size: 16px; }
.ac-who small { margin-top: 2px; color: var(--t-a9b0b8); font-size: 13px; }
.ac-count { padding: 3px 10px; color: var(--t-aeb4bb); background: var(--c-1a1e23); border: 1px solid var(--c-2c3138); border-radius: 999px; font-size: 13px; white-space: nowrap; }
.ac-count.full { color: var(--t-e9ff67); border-color: var(--c-4a5a2a); background: var(--c-1b2013); }
.ac-count.none { color: var(--t-a9b0b8); }
.ac-bulk { display: flex; gap: 6px; }
.ac-bulk button { padding: 5px 10px; color: var(--t-a8afb6); background: var(--c-22272d); border: 1px solid var(--c-363d45); border-radius: 6px; font-size: 13px; cursor: pointer; }
.ac-bulk button:hover:not(:disabled) { color: var(--t-eef1f3); background: var(--c-2b3138); }
.ac-bulk button:disabled { opacity: .4; cursor: default; }
.ac-cat { padding: 4px 16px 6px; border-bottom: 1px solid var(--c-1c2025); }
.ac-cat-head { display: flex; align-items: center; gap: 12px; padding: 12px 0 6px; flex-wrap: wrap; }
.ac-cat-head > div:first-child { flex: 1; min-width: 160px; }
.ac-cat-head strong { display: block; color: var(--t-9da4ac); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.ac-cat-head small { display: block; margin-top: 3px; color: var(--t-a9b0b8); font-size: 13px; }
.ac-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--c-1a1e23); }
.ac-row-text strong { display: block; color: var(--t-dce1e5); font-size: 15px; font-weight: 600; }
.ac-row-text small { display: block; margin-top: 3px; color: var(--t-a9b0b8); font-size: 14px; line-height: 1.45; }
.ac-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 16px; background: var(--c-111418); color: var(--t-a9b0b8); font-size: 14px; }
.ac-foot span { margin-right: auto; }
.ac-foot button { padding: 7px 12px; color: var(--t-a8afb6); background: var(--c-22272d); border: 1px solid var(--c-363d45); border-radius: 7px; font-size: 14px; cursor: pointer; }
.ac-foot button.primary { color: var(--t-111418); background: var(--c-e9ff67); border-color: var(--c-e9ff67); font-weight: 700; }
.ac-foot button:disabled { opacity: .45; cursor: default; }

/* Registration and profile details */
.auth-card select { width: 100%; padding: 11px 12px; color: var(--t-dce1e5); background: var(--c-0f1216); border: 1px solid var(--c-303740); border-radius: 8px; outline: none; font: 16px Manrope, sans-serif; text-transform: none; letter-spacing: normal; }
.auth-card select:focus { border-color: var(--c-8b9aa8); }
input[type=date] { color-scheme: dark; }
.detail-pill { display: inline-block; margin: 0 6px 4px 0; padding: 2px 9px; color: var(--t-aeb4bb); background: var(--c-1a1e23); border: 1px solid var(--c-2c3138); border-radius: 999px; font-size: 13px; }

/* Agent log */
.provider-card.log-warn { border-color: var(--c-6a4f27); }
.log-sub { display: block; margin-top: 3px; color: var(--t-a9b0b8); font-size: 13px; font-weight: 400; }
.log-step { margin: 12px 0; padding: 12px 14px; background: var(--c-111418); border: 1px solid var(--c-23282e); border-radius: 9px; }
.log-step-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.log-step-head strong { color: var(--t-eef1f3); font-size: 15px; }
.log-label { margin: 10px 0 4px; color: var(--t-a9b0b8); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.log-none { margin: 0 0 8px; color: var(--t-f3c07a); font-size: 14px; }
.log-step pre, .provider-details > pre { margin: 0; padding: 8px 10px; color: var(--t-aab0b7); background: var(--c-0d1014); border-radius: 6px; font-size: 14px; white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto; }
.log-call { margin: 6px 0; padding: 6px 10px; background: var(--c-15191d); border: 1px solid var(--c-23282e); border-radius: 7px; }
.log-call > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--t-cbd0d5); font-size: 14px; }
.log-call > summary em { margin-left: auto; color: var(--t-a9b0b8); font-style: normal; }
.log-call.failed { border-color: var(--c-5f373e); }
.log-call.failed .tool-dot { background: var(--c-e0736f); }
.log-step pre.log-error { color: var(--t-ef9ba0); }

/* Agent checklist (update_plan tool) shown above the tool steps */
.plan-list { margin: 8px 0 4px; padding: 8px 12px; border: 1px solid var(--c-2d333b); border-radius: 8px; font-size: 16px; background: var(--tint); }
.plan-title { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--t-a9b0b8); margin-bottom: 4px; }
.plan-list ul { list-style: none; margin: 0; padding: 0; }
.plan-item { padding: 2px 0; color: var(--t-c9ced3); }
.plan-item .plan-mark { display: inline-block; width: 1.4em; color: var(--t-a9b0b8); }
.plan-item.completed { color: var(--t-a9b0b8); text-decoration: line-through; }
.plan-item.completed .plan-mark { color: var(--t-4caf7d); }
.plan-item.in_progress { color: var(--t-ffffff); font-weight: 600; }
.plan-item.in_progress .plan-mark { color: var(--t-5aa9ff); }

/* ask_user question card */
.question-card .question-input { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.question-card .question-input input { flex: 1 1 240px; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--c-303740); background: var(--c-0f1216); color: var(--t-e5e9ee); font: inherit; }

/* Sidebar: groups, projects, status dots, row menu, select mode */
.section-buttons { display: flex; gap: 10px; }
.group-label { padding: 12px 9px 4px; color: #656b74; font: 500 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .11em; }
.group-label.with-action { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; }
.project-head { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 7px; color: #c3c8ce; cursor: pointer; font-size: 13px; }
.project-head:hover { background: var(--c-191c21); }
.project-head .caret { width: 10px; color: #656b74; font-size: 11px; }
.project-head .project-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.project-head small { color: #656b74; }
.project-head:hover .chat-actions { display: flex; }
.project-head ~ .chat-item { padding-left: 24px; }
.chat-item { position: relative; }
.chat-item.picked { background: var(--c-1e2a1c); }
.chat-state.waiting { background: #f3c07a; box-shadow: 0 0 8px rgba(243,192,122,.6); }
.chat-state.unread { background: #5aa9ff; }
.rename-input { width: 100%; padding: 2px 4px; border-radius: 4px; border: 1px solid var(--c-59636d); background: var(--c-0f1216); color: var(--t-e5e9ee); font: inherit; }
.row-menu { position: absolute; right: 4px; top: 100%; z-index: 20; min-width: 200px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 8px; background: var(--c-1a1e23); border: 1px solid var(--c-303740); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.row-menu button, .row-menu label { text-align: left; padding: 6px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--t-c9ced3); font-size: 12px; }
.row-menu button:hover { background: var(--c-262b32); }
.row-menu label { display: flex; flex-direction: column; gap: 3px; color: #8d949c; }
.row-menu select { background: var(--c-0f1216); color: var(--t-e5e9ee); border: 1px solid var(--c-303740); border-radius: 5px; padding: 4px; }
.bulk-bar { display: flex; align-items: center; gap: 8px; padding: 6px 9px; font-size: 12px; color: var(--t-c9ced3); }
.bulk-bar span { flex: 1; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); }
.modal-card { width: min(520px, 92vw); max-height: 90vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 12px; background: var(--c-171a1f); border: 1px solid var(--c-2c3138); color: var(--t-dce1e5); }
.modal-card h3 { margin: 0 0 4px; }
.modal-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--t-a8afb6); }
.modal-card input[type=text], .modal-card textarea { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--c-303740); background: var(--c-0f1216); color: var(--t-e5e9ee); font: inherit; }
.modal-card .check-line { flex-direction: row; align-items: center; gap: 8px; }
.modal-card .tool-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; max-height: 180px; overflow: auto; }
.modal-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.modal-actions button { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--c-363d45); background: var(--c-22272d); color: var(--t-dce1e5); }
.modal-actions button.primary { background: var(--c-e9ff67); color: var(--t-111418); border-color: var(--c-e9ff67); font-weight: 600; }
.modal-actions button.danger { color: var(--t-ff9da0); border-color: var(--c-704248); }
.run-error-text { color: var(--t-ef9ba0); margin: 0; font-size: 12px; }

/* Shared (read-only) chat page and the per-chat cost chip */
.shared-chat { width: min(760px, 94vw); margin: 32px auto; color: var(--t-dce1e5); }
.shared-note { color: #8d949c; font-size: 12px; }
.shared-message { padding: 12px 14px; margin: 10px 0; border-radius: 10px; background: var(--c-171a1f); border: 1px solid var(--c-262b32); }
.shared-message.from-user { background: var(--c-1b2013); border-color: #3a4a1f; }
.shared-message small { color: #8d949c; }
.shared-text { white-space: pre-wrap; margin-top: 4px; line-height: 1.5; }
.cost-chip { align-self: center; padding: 2px 8px; border-radius: 10px; background: var(--c-1b2013); border: 1px solid #3a4a1f; color: var(--t-c8e58a); font: 500 11px 'DM Mono', monospace; }

/* Admin: MCP tool policy rows */
.mcp-tool-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.mcp-tool-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'DM Mono', monospace; font-size: 12px; color: var(--t-c9ced3); }
.mcp-tool-row select { width: auto; flex: 0 0 auto; background: var(--c-0f1216); color: var(--t-e5e9ee); border: 1px solid var(--c-303740); border-radius: 6px; padding: 4px 8px; }

/* Composer: the steer button next to queue/send */
.send.steer { background: var(--c-242a30); color: var(--t-c9ced3); border: 1px solid var(--c-3b424b); }

/* Edit a past message (starts a branch) */
.msg-edit { margin-top: 4px; padding: 0; border: 0; background: transparent; color: #656b74; font-size: 11px; opacity: 0; transition: opacity .15s; }
.message:hover .msg-edit { opacity: 1; }
.msg-edit:hover { color: var(--t-d4d9dd); }
.edit-box { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.edit-box textarea { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--c-303740); background: var(--c-0f1216); color: var(--t-e5e9ee); font: inherit; resize: vertical; }
.edit-actions { display: flex; gap: 8px; }

/* "Sources the agent read" under a reply */
.tool-activity.sources ul { margin: 4px 0 6px; padding-left: 18px; }
.tool-activity.sources li { margin: 2px 0; word-break: break-all; }
.tool-activity.sources a { color: #9e9eff; }
.tool-activity.sources small { color: #626873; margin-left: 6px; }
.msg-edit.shown { opacity: 1; }

/* ── Landing page ─────────────────────────────────────────── */
.landing { min-height: 100vh; color: var(--t-e5e9ee); background: var(--c-111418); line-height: 1.55; scroll-behavior: smooth; }
.landing a { color: inherit; text-decoration: none; }
.land-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.land-mono { font: 500 14px 'DM Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: .16em; }
.accent-dim { color: var(--t-8d984c); }
.land-nav { position: sticky; top: 0; z-index: 10; background: rgba(17,20,24,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-22272e); }
.land-nav .land-wrap { display: flex; align-items: center; gap: 28px; height: 60px; }
.land-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.land-links { display: flex; gap: 22px; margin-left: 12px; color: var(--t-a9b0b8); font-size: 16px; font-weight: 600; }
.land-links a:hover { color: var(--t-e5e9ee); }
.land-spacer { flex: 1; }
.land-actions { display: flex; gap: 10px; align-items: center; }
.land-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 8px; font-size: 16px; font-weight: 700; border: 1px solid var(--c-343b44); color: var(--t-e5e9ee); background: transparent; }
.land-btn:hover { border-color: var(--c-556666); }
.land-btn.primary { background: var(--c-e9ff67); color: var(--t-111418) !important; border-color: var(--c-e9ff67); }
.land-btn.primary:hover { filter: brightness(.94); }
.land-btn.sm { padding: 8px 14px; }
.land-btn.lg { padding: 13px 22px; font-size: 17px; }
.land-btn.block { width: 100%; }
.land-btn.disabled { color: var(--t-a9b0b8); cursor: default; }
.land-hero { background: radial-gradient(circle at 50% -20%, var(--c-272d24) 0, var(--c-13161a) 40%, var(--c-111418) 70%); padding: 84px 0 70px; text-align: center; }
.land-hero .land-mono { margin: 0 0 18px; }
.land-hero h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.08; letter-spacing: -.04em; margin: 0 auto 18px; max-width: 760px; }
.land-hero h1 em { font-style: normal; color: var(--t-e9ff67); }
.land-lead { color: var(--t-a9b0b8); font-size: 20px; max-width: 600px; margin: 0 auto 32px; }
.land-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.land-note { margin-top: 14px; color: var(--t-a9b0b8); font-size: 15px; }
.land-note a { text-decoration: underline !important; }
.land-preview { margin: 56px auto 0; max-width: 760px; text-align: left; background: var(--c-15191e); border: 1px solid var(--c-343b44); border-radius: 16px; box-shadow: 0 24px 90px rgba(0,0,0,.5); overflow: hidden; }
.land-pbar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--c-262c33); }
.land-pbar i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-2d343c); }
.land-pbar span { margin-left: 8px; color: var(--t-a9b0b8); font-size: 14px; }
.land-pbody { padding: 20px; display: grid; gap: 12px; }
.land-msg { max-width: 82%; padding: 11px 14px; border-radius: 12px; font-size: 16px; }
.land-msg.u { justify-self: end; background: var(--c-1d232a); border: 1px solid var(--c-2c333b); }
.land-msg.a { background: var(--c-0f1216); border: 1px solid var(--c-262c33); }
.land-chip { display: inline-block; margin-top: 8px; padding: 4px 9px; border-radius: 6px; background: var(--c-1b2210); color: var(--t-e9ff67); font: 500 14px 'DM Mono', monospace; }
.land-steps { color: var(--t-a9b0b8); font-size: 14px; margin-top: 6px; }
.landing section { padding: 72px 0; border-top: 1px solid var(--c-1c2127); }
.land-head { text-align: center; margin-bottom: 40px; }
.land-head .land-mono { margin: 0 0 10px; }
.land-head h2 { font-size: clamp(24px, 4vw, 34px); letter-spacing: -.03em; margin: 0 0 10px; }
.land-head p { color: var(--t-a9b0b8); max-width: 560px; margin: 0 auto; }
.land-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.land-card { padding: 22px; background: var(--c-15191e); border: 1px solid var(--c-262c33); border-radius: 14px; }
.land-card:hover { border-color: var(--c-343b44); }
.land-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--c-1b2210); font-size: 20px; margin-bottom: 14px; }
.land-card h3, .land-how h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; }
.land-card p, .land-how p { margin: 0; color: var(--t-a9b0b8); font-size: 16px; }
.land-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; }
.land-how > div { padding: 22px; border: 1px dashed var(--c-343b44); border-radius: 14px; counter-increment: s; }
.land-how > div::before { content: "0" counter(s); display: block; color: var(--t-e9ff67); font: 500 15px 'DM Mono', monospace; margin-bottom: 10px; }
.land-dl { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; padding: 36px; background: linear-gradient(135deg, var(--c-1a2012), var(--c-15191e) 60%); border: 1px solid var(--c-343b44); border-radius: 18px; }
.land-dl .land-mono { margin: 0 0 12px; }
.land-dl h2 { font-size: 32px; letter-spacing: -.03em; margin: 0 0 10px; }
.land-dl p { color: var(--t-a9b0b8); margin: 0 0 20px; }
.land-dl p.land-mono { margin: 0 0 12px; }
.land-dl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 16px; color: var(--t-c5ccd3); }
.land-dl li::before { content: "✓"; color: var(--t-e9ff67); margin-right: 9px; font-weight: 800; }
.land-dlbox { padding: 22px; background: var(--c-0f1216); border: 1px solid var(--c-262c33); border-radius: 14px; text-align: center; }
.land-dlbox small { display: block; margin-top: 12px; color: var(--t-a9b0b8); font-size: 15px; }
.land-req { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-20262c); text-align: left; color: var(--t-a9b0b8); font-size: 15px; }
.land-req b { color: var(--t-e5e9ee); }
.land-final { text-align: center; }
.land-final h2 { font-size: 34px; letter-spacing: -.03em; margin: 0 0 20px; }
.land-foot { padding: 28px 0; border-top: 1px solid var(--c-1c2127); color: var(--t-a9b0b8); font-size: 15px; }
@media (max-width: 820px) {
  .land-links, .land-hide { display: none; }
  .land-grid, .land-how, .land-dl { grid-template-columns: 1fr; }
  .land-hero { padding: 56px 0 48px; }
  .land-msg { max-width: 94%; }
}

/* ── Readability layer: larger controls, clearer focus, calmer density ───── */
:root { font-size: 16px; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
button:not(.chat-action):not(.archive-toggle) { min-height: 38px; cursor: pointer; }
.admin-panel input, .admin-panel select, .admin-panel textarea,
.admin-create-row input, .admin-create-row select { min-height: 42px; padding: 10px 12px; border-radius: 9px; }
.admin-panel .primary, .admin-create-row button { min-height: 42px; padding: 10px 16px; border-radius: 9px; }
.admin-panel { padding: 28px 32px; }
.admin-panel label { gap: 8px; margin-bottom: 18px; }
.admin-panel h2, .admin-panel h3 { letter-spacing: -.01em; }
.admin-panel table td, .admin-panel table th { padding-top: 12px; padding-bottom: 12px; }
.chat-item { padding: 13px 11px; }
.new-chat { padding: 13px 14px; }
:is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--c-e9ff67); outline-offset: 2px; }
::selection { background: rgba(233,255,103,.3); }

/* ── Switches and checkboxes (one design everywhere) ─────────────────────── */
:root { --header-bg: rgba(17,20,24,.82); --tint: rgba(255,255,255,.03); --nav-bg: rgba(17,20,24,.85); --ring: rgba(233,255,103,.35); }
:root[data-theme=light] { --header-bg: rgba(255,255,255,.85); --tint: rgba(0,0,0,.03); --nav-bg: rgba(255,255,255,.88); --ring: rgba(90,110,0,.35); }
.land-nav { background: var(--nav-bg); }
input[type=time], input[type=date] { color-scheme: inherit; }

/* Switch: a labelled ON/OFF track so the state never relies on colour alone */
.toggle { position: relative; flex: 0 0 auto; width: 60px; height: 32px; min-height: 0 !important; padding: 0; border-radius: 999px; background: var(--c-2b3036); border: 2px solid var(--c-454a52); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.toggle::after { content: "OFF"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 700 11px 'DM Mono', monospace; letter-spacing: .06em; color: var(--t-a9b0b8); }
.toggle .toggle-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-8e969f); box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .15s ease, background .15s ease; }
.toggle.on { background: var(--c-3c4a22); border-color: var(--c-5a6b34); }
.toggle.on::after { content: "ON"; right: auto; left: 9px; color: var(--t-e9ff67); }
.toggle.on .toggle-thumb { transform: translateX(28px); background: var(--c-e9ff67); }
:root[data-theme=light] .toggle.on { background: #d6e68a; border-color: #8a9a2a; }
:root[data-theme=light] .toggle.on::after { color: #3d4a00; }
:root[data-theme=light] .toggle.on .toggle-thumb { background: #4f6200; }
:root[data-theme=light] .toggle .toggle-thumb { background: #7d858e; }
.toggle-wrap { gap: 12px; }
.toggle-label { font-size: 15px; white-space: normal; }

/* Checkbox: big, with a visible tick. Form rules must not stretch it (admin panels set inputs to width:100%). */
input[type=checkbox], .admin-panel input[type=checkbox], .admin-create-row input[type=checkbox] { width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0; border-radius: 6px; border: 2px solid var(--c-5a6670, #5a6670); background: var(--c-0f1216); }
input[type=checkbox]::before { width: 13px; height: 13px; }
input[type=checkbox]:checked { background: var(--c-e9ff67); border-color: var(--c-e9ff67); }
:root[data-theme=light] input[type=checkbox]:checked { background: #4f6200; border-color: #4f6200; }
:root[data-theme=light] input[type=checkbox]:checked::before { background: #fff; }
input[type=radio], .admin-panel input[type=radio] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: #8aa000; }
.check-chip { gap: 10px; padding: 9px 15px 9px 11px; font-size: 15px; }
.check-chip:has(input:checked) { font-weight: 600; }
.admin-panel label.check-chip, .admin-panel label.check-row { display: inline-flex; margin-bottom: 0; }

/* ── Theme switch button ─────────────────────────────────────────────────── */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 38px; height: 38px; padding: 0 12px; color: var(--t-a9b0b8); background: transparent; border: 1px solid var(--c-343b44); border-radius: 9px; font-size: 15px; cursor: pointer; }
.theme-btn:hover { color: var(--t-e5e9ee); border-color: var(--c-566066, #566066); }

/* Light-mode touch-ups that cannot come from a plain colour swap */
:root[data-theme=light] .auth-card, :root[data-theme=light] .land-preview, :root[data-theme=light] .land-dl { box-shadow: 0 12px 40px rgba(30,40,60,.12); }
:root[data-theme=light] .land-btn.primary, :root[data-theme=light] .auth-card .primary, :root[data-theme=light] .admin-panel .primary { color: #111418 !important; }
:root[data-theme=light] .land-hero h1 em, :root[data-theme=light] .land-chip { color: #4f6200; }
:root[data-theme=light] .logo-orbit { color: #111418; }

/* ── Plugins ──────────────────────────────────────────────── */
.plugin-items { list-style: none; margin: 8px 0 4px; padding: 0; }
.plugin-item { padding: 5px 0; color: var(--t-cbd0d5); font-size: 14px; line-height: 1.5; }
.plugin-item + .plugin-item { border-top: 1px solid var(--c-1c2025); }
.plugin-item.skipped, .plugin-item.removed { color: var(--t-a9b0b8); }
.plugin-item small { color: var(--t-a9b0b8); }
.plugin-secrets { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--c-2d333b); border-radius: 8px; }

/* Admin lists (providers, models, registrations): header row, row actions, mobile cards */
.list-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.list-head > div { flex: 1 1 280px; min-width: 0; }
.filter-bar { grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr); }
.provider-card.add-card { padding: 12px; margin-top: 12px; }
.user-table .actions-col { text-align: right; white-space: nowrap; }
.user-table .row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.user-table .row-muted td { opacity: .6; }
.user-table .cell-url { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-table tr.edit-row > td { background: var(--c-13161a); padding: 12px; }
.pager { align-items: center; justify-content: center; }
@media (max-width: 760px) {
  .provider-table thead, .model-table thead, .responsive-table thead { display: none; }
  .provider-table, .provider-table tbody, .provider-table tr, .provider-table td,
  .model-table, .model-table tbody, .model-table tr, .model-table td,
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; box-sizing: border-box; }
  .provider-table tr, .model-table tr, .responsive-table tr { margin-bottom: 10px; border: 1px solid var(--c-262b32); border-radius: 10px; padding: 6px 4px; background: var(--c-13161a); }
  .provider-table td, .model-table td, .responsive-table td { display: flex; justify-content: space-between; gap: 12px; border-bottom: 0; padding: 5px 9px; text-align: right; }
  .provider-table td::before, .model-table td::before, .responsive-table td::before { content: attr(data-label); color: var(--t-a9b0b8); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; text-align: left; flex: 0 0 auto; }
  .user-table .actions-col { white-space: normal; }
  .user-table .cell-url { max-width: none; white-space: normal; word-break: break-all; }
  .user-table tr.edit-row { padding: 0; }
  .user-table tr.edit-row > td { display: block; }
  .user-table tr.edit-row > td::before { content: none; }
  .filter-bar { grid-template-columns: 1fr; }
}

/* Skill library review */
.review-flags { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.review-flag { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--c-262b32); background: var(--c-13161a); color: var(--t-c4c9ce); font-size: 14px; line-height: 1.5; }
.review-flag strong { margin-right: 6px; }
.review-flag.high { border-color: var(--c-704248); background: var(--c-20241d); color: var(--t-ff9da0); }
.review-flag.warn { border-color: var(--c-6a4f27); }
.review-text { width: 100%; box-sizing: border-box; font: 13px/1.5 'DM Mono', monospace; }
.review-pre { margin: 8px 0 0; padding: 10px; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: var(--c-0f1216); border: 1px solid var(--c-262b32); border-radius: 8px; font: 13px/1.5 'DM Mono', monospace; }

/* Continue with Google (login / register) */
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 6px; color: var(--t-a9b0b8); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--c-24282e); }
.auth-google { display: block; width: 100%; margin-top: 9px; padding: 12px; box-sizing: border-box; text-align: center; text-decoration: none; color: inherit; font-size: 16px; font-weight: 600; border: 1px solid var(--c-24282e); border-radius: 8px; }
.auth-google:hover { border-color: var(--c-e9ff67); }

/* Light-mode counterparts for the few rules written with a plain hex instead of a theme variable */
:root[data-theme=light] .group-label, :root[data-theme=light] .project-head .caret, :root[data-theme=light] .project-head small,
:root[data-theme=light] .msg-edit, :root[data-theme=light] .tool-activity.sources small { color: #5f6770; }
:root[data-theme=light] .project-head { color: #3a4048; }
:root[data-theme=light] .row-menu label, :root[data-theme=light] .shared-note, :root[data-theme=light] .shared-message small { color: #5a626b; }
:root[data-theme=light] .tool-activity.sources a { color: #3b3bb3; }
:root[data-theme=light] .approval-timer { color: #6e6330; }
:root[data-theme=light] .chat-state.waiting { background: #b9791f; box-shadow: 0 0 8px rgba(185,121,31,.45); }
:root[data-theme=light] .chat-state.unread { background: #2563c9; }
:root[data-theme=light] .admin-tab-select select { color: #4f6200; }

/* Code block with a header bar: language on the left, Copy on the right (js/copy.js) */
.message-content .md-codeblock { margin: 8px 0 12px; border: 1px solid var(--c-2c3238); border-radius: 8px; background: var(--c-12161a); overflow: hidden; }
.message-content .md-codeblock .md-code { margin: 0; border: 0; border-radius: 0; background: transparent; }
.md-code-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--c-2c3238); background: var(--c-171a1f); }
.md-code-lang { color: var(--t-a9b0b8); font: 500 12px 'DM Mono', monospace; text-transform: lowercase; }
.md-copy { padding: 4px 10px; color: var(--t-cbd2d8); background: transparent; border: 1px solid var(--c-343a42); border-radius: 6px; font-size: 13px; cursor: pointer; }
.md-copy:hover { background: var(--c-2b3138); }
.md-copy.copied { color: var(--t-e9ff67); border-color: var(--c-5b6330); }

/* Connectors directory (ConnectorsPanel.razor): cards with a Connect button, Available / Connected tabs. */
.conn-page { max-width: 980px; }
.conn-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.conn-title { margin: 0 6px 0 0; font-size: 22px; }
.conn-tabs { display: inline-flex; padding: 3px; gap: 2px; background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 10px; }
.conn-tabs button { padding: 6px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--t-a8afb6); font-size: 14px; }
.conn-tabs button.on { background: var(--c-22272d); color: var(--t-f1f3f5); font-weight: 600; }
.readonly-bar { width: min(780px, 100%); margin: 0 auto; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 10px; }
.readonly-bar > div { display: grid; gap: 3px; min-width: 220px; flex: 1; }
.readonly-bar strong { color: var(--t-f1f3f5); font-size: 15px; }
.readonly-bar small { color: var(--t-a8afb6); font-size: 14px; }
.filter-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 0; width: 40px; height: 38px; padding: 0; border-radius: 9px; }
.filter-btn.active { color: var(--t-e9ff67); border-color: var(--c-59636d); }
.filter-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--t-e9ff67); color: var(--c-111418); font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
.date-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filter-modal .person-list { position: static; margin-top: 4px; box-shadow: none; max-height: 220px; min-width: 0; }
.safety-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.safety-results { margin-top: 14px; }
.safety-results > summary { cursor: pointer; color: var(--t-a8afb6); font-size: 14px; margin-bottom: 8px; }
.log-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.log-filters > select, .log-filters > .person-combo { flex: 0 1 190px; min-width: 150px; }
.log-filters > .log-search { flex: 1 1 260px; min-width: 200px; }
.log-filters select, .log-filters input:not([type=checkbox]) { margin-bottom: 0; }
.error-table td { vertical-align: top; }
.error-table .log-sub { display: block; }
.log-actions { display: grid; gap: 4px; min-width: 110px; white-space: normal; }
.log-actions a { color: var(--t-e9ff67); font-size: 14px; }
.log-confirm { display: block; color: var(--t-a8afb6); font-size: 14px; }
button.mini { min-height: 0; padding: 3px 9px; font-size: 13px; margin: 4px 4px 0 0; }
.person-combo { position: relative; }
.person-combo input { padding-right: 30px; }
.person-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 0; padding: 3px 7px; border: 0; background: transparent; color: var(--t-a8afb6); cursor: pointer; font-size: 14px; }
.person-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); min-width: 300px; max-height: 320px; overflow-y: auto; background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.35); padding: 4px; }
.person-item { display: grid; gap: 1px; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.person-item:hover { background: var(--c-22272d); }
.person-item strong { color: var(--t-f1f3f5); font-size: 15px; }
.person-item small, .person-none { color: var(--t-a8afb6); font-size: 14px; }
.person-none { padding: 8px 10px; }
.mon-head { margin-bottom: 8px; overflow-x: auto; }
.mon-hint { margin-bottom: 16px; }
.conn-search { flex: 1 1 180px; min-width: 140px; max-width: 360px; margin-left: auto; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--c-303740); background: var(--c-0f1216); color: var(--t-e5e9ee); font: inherit; }
.conn-add { position: relative; }
.conn-add-btn { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--c-e9ff67); background: var(--c-e9ff67); color: var(--t-111418); font-weight: 600; }
.conn-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; min-width: 190px; padding: 5px; background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.conn-menu button { text-align: left; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--t-dce1e5); }
.conn-menu button:hover { background: var(--c-262b32); }
.conn-sub { margin: 4px 0 16px; color: var(--t-9da4ac); font-size: 14px; }
.conn-section { margin: 20px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t-9da4ac); }
.conn-section small { margin-left: 8px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.conn-list { display: grid; gap: 8px; }
.conn-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--c-13161a); border: 1px solid var(--c-262b32); border-radius: 12px; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.conn-card:hover { border-color: var(--c-444c55); background: var(--c-171a1f); }
.conn-card-static { cursor: default; }
.conn-card-static:hover { border-color: var(--c-262b32); background: var(--c-13161a); }
.conn-org-title { margin: 22px 0 0; font-size: 15px; color: var(--t-f1f3f5); }
.conn-logo { flex: 0 0 auto; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: #fff; font-weight: 700; font-size: 18px; }
.conn-logo.has-icon { background: #fff; border: 1px solid rgba(0, 0, 0, .08); }
.conn-logo.has-icon img { width: 24px; height: 24px; display: block; }
.conn-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.conn-text strong { font-size: 15px; color: var(--t-f1f3f5); }
.conn-text small { font-size: 13px; line-height: 1.35; color: var(--t-9da4ac); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.conn-text small.conn-problem { color: var(--t-ff9da0); }
.conn-plus { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--c-22272d); color: var(--t-dce1e5); font-size: 18px; }
.conn-card:hover .conn-plus { background: var(--c-2b3138); }
.conn-manage { flex: 0 0 auto; padding: 5px 12px; border-radius: 8px; background: var(--c-22272d); color: var(--t-dce1e5); font-size: 13px; }
.conn-link { padding: 0 4px; border: 0; background: transparent; color: var(--t-5aa9ff); text-decoration: underline; }
.conn-modal.wide { width: min(720px, 94vw); }
.conn-modal-head { display: flex; align-items: center; gap: 12px; }
.conn-modal-head h3 { margin: 0; }
.conn-input, .modal-card input.conn-input, .modal-card select.conn-input, .modal-card textarea.conn-input { width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--c-303740); background: var(--c-0f1216); color: var(--t-e5e9ee); font: inherit; box-sizing: border-box; }
.conn-help { color: var(--t-9da4ac); font-size: 12px; line-height: 1.4; }
.conn-accounts { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.conn-account { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--c-13161a); border: 1px solid var(--c-262b32); border-radius: 10px; }
.conn-account-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.conn-account-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.conn-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--c-262b32); color: var(--t-9da4ac); white-space: nowrap; }
.conn-tools { max-height: 300px; overflow: auto; }
.conn-actions { flex-wrap: wrap; }
.conn-spacer { margin-left: auto; }
@media (max-width: 640px) { .conn-search { max-width: none; margin-left: 0; flex-basis: 100%; } .conn-grid { grid-template-columns: 1fr; } }

/* Admin > Models: grouped by provider, capability tags */
.provider-group { margin: 0 0 14px; border: 1px solid var(--c-2c3138); border-radius: 12px; padding: 4px 14px 10px; }
.provider-group-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; }
.group-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; }
.group-toggle .caret { color: var(--t-9da4ac); font-size: 12px; }
.model-grid td { vertical-align: top; }
.cap-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 2px 20px; }
.cap-tag { padding: 1px 8px; border-radius: 999px; font-size: 12px; border: 1px solid transparent; }
.cap-tools { color: #6cb3ff; background: rgba(60, 130, 220, .15); border-color: rgba(60, 130, 220, .35); }
.cap-reasoning { color: #c79bff; background: rgba(150, 90, 230, .16); border-color: rgba(150, 90, 230, .35); }
.cap-vision { color: #7fe3a0; background: rgba(60, 190, 110, .15); border-color: rgba(60, 190, 110, .35); }
.cap-audio { color: #ffcf7a; background: rgba(230, 170, 60, .15); border-color: rgba(230, 170, 60, .35); }
.cap-image { color: #ff9fc8; background: rgba(230, 90, 150, .15); border-color: rgba(230, 90, 150, .35); }
.cap-free { color: #8be28b; background: rgba(70, 200, 90, .15); border-color: rgba(70, 200, 90, .4); font-weight: 600; }
.cap-kind { color: var(--t-a9b0b8); background: var(--c-171a1f); border-color: var(--c-2c3138); }
.cap-grid { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 8px 0; }
.cap-item { display: grid; gap: 4px; justify-items: start; min-width: 130px; }
.cap-item .cap-name { font-size: 13px; color: var(--t-9da4ac); }
.cap-item small { color: var(--t-a9b0b8); }
.inline-label { display: inline-flex; align-items: center; gap: 8px; }

/* ── Phones and small tablets: sidebar becomes a drawer ──────────────────── */
.nav-toggle, .nav-backdrop { display: none; }
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
  .workspace { height: 100vh; height: 100dvh; grid-template-columns: minmax(0, 1fr); position: relative; }
  .workspace > .sidebar { position: fixed; inset: 0 auto 0 0; width: min(86vw, 330px); z-index: 40; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 8px 0 30px rgba(0,0,0,.35); }
  .workspace.nav-open > .sidebar { transform: none; }
  .nav-toggle { display: grid; place-items: center; position: fixed; top: 10px; left: 10px; z-index: 50; width: 42px; height: 42px; min-height: 0 !important; padding: 0; font-size: 20px; color: var(--t-e5e9ee); background: var(--c-171a1f); border: 1px solid var(--c-343b44); border-radius: 10px; }
  .workspace.nav-open .nav-toggle { left: auto; right: 10px; }
  .nav-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.5); }
  .workspace.nav-open .nav-backdrop { display: block; }
  .workspace header, .chat-header { padding-left: 62px; padding-right: 12px; }
  .chat-header { min-height: 62px; }
  .header-actions { gap: 6px; }
  .message-column { width: calc(100% - 24px); padding-top: 20px; }
  .message { grid-template-columns: 1fr; gap: 6px; }
  .message-avatar { display: none; }
  .msg-actions { opacity: 1; }
  .composer-wrap { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  .chat-empty-state { width: calc(100% - 24px); }
  .admin-panel { padding: 14px 12px; }
  .admin-create-row { grid-template-columns: 1fr; }
  .admin-tab-select { padding: 10px 12px 0; }
  .admin-tab-select select { max-width: none; }
  .chat-actions { display: flex; }
  .user-table { display: block; overflow-x: auto; }
  .message-content table, .message-content pre { display: block; max-width: 100%; overflow-x: auto; }
  input, select, textarea { font-size: 16px; }
}
@media (max-width: 560px) {
  .cost-chip { display: none; }
  .header-actions { margin-left: 6px; }
  .header-actions select { max-width: 120px; }
}

/* Scheduled tasks (SchedulesPanel) */
.sch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sch-head h3 { margin: 0 0 4px; font-size: 20px; color: var(--t-eef1f3); }
.sch-head p { margin: 0; color: var(--t-a9b0b8); font-size: 15px; }
.sch-list { display: flex; flex-direction: column; border: 1px solid var(--c-262b32); border-radius: 12px; overflow: hidden; background: var(--c-13161a); }
.sch-row { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-bottom: 1px solid var(--c-262b32); }
.sch-row:last-child { border-bottom: 0; }
.sch-row:hover { background: var(--tint); }
.sch-row.off .sch-name { color: var(--t-a9b0b8); }
.sch-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px 12px; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.sch-name { color: var(--t-eef1f3); font-weight: 600; font-size: 16px; }
.sch-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--t-a9b0b8); font-size: 14px; }
.sch-pill { padding: 1px 9px; border-radius: 999px; background: var(--c-232a31); color: var(--t-b5bbc2); font-size: 13px; }
.sch-pill.good { color: var(--t-c8e58a); background: var(--c-1b2013); }
.sch-pill.bad { color: var(--t-ff9da0); background: var(--c-2a1a1d); }
.sch-pill.flow { color: var(--t-c9dcff); background: var(--c-1d2a40); }
.sch-problem { color: var(--t-e6a3a6); font-size: 14px; }
.sch-run { padding: 6px 12px; font-size: 14px; background: transparent; border: 1px solid var(--c-2c3138); border-radius: 8px; color: var(--t-cbd2d8); cursor: pointer; white-space: nowrap; }
.sch-run:hover { border-color: var(--c-465059); }
.sch-switch { position: relative; flex: none; width: 40px; height: 22px; padding: 0; border-radius: 999px; background: var(--c-2b3036); border: 1px solid var(--c-454a52); cursor: pointer; min-height: 0 !important; }
.sch-switch span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-8e969f); transition: transform .15s ease, background .15s ease; }
.sch-switch.on { background: var(--c-3c4a22); border-color: var(--c-5a6b34); }
.sch-switch.on span { transform: translateX(18px); background: var(--c-e9ff67); }
.sch-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center; color: var(--t-a9b0b8); border: 1px dashed var(--c-2c3138); border-radius: 12px; }
.sch-empty strong { color: var(--t-eef1f3); font-size: 17px; }
.sch-empty-icon { font-size: 30px; }
.sch-back { margin-bottom: 12px; padding: 4px 0; background: none; border: 0; color: var(--t-a9b0b8); cursor: pointer; font-size: 15px; }
.sch-back:hover { color: var(--t-eef1f3); }
.sch-form { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.sch-form h3 { margin: 0; font-size: 20px; color: var(--t-eef1f3); }
.sch-form label { display: flex; flex-direction: column; gap: 6px; }
.sch-form .check-chip { flex-direction: row; }
.sch-time input { align-self: flex-start; }
.sch-tools { border: 1px solid var(--c-262b32); border-radius: 10px; padding: 10px 14px; background: var(--c-13161a); }
.sch-tools summary { cursor: pointer; font-weight: 600; color: var(--t-dce1e5); }
.sch-tools summary span { margin-left: 8px; font-weight: 400; color: var(--t-a9b0b8); font-size: 14px; }
.sch-tools .check-chips { margin-top: 8px; }
.sch-assist { display: flex; flex-wrap: wrap; gap: 8px; }
.sch-workflow { padding: 14px; border: 1px solid var(--c-262b32); border-radius: 12px; background: var(--c-13161a); }
.sch-workflow h4 { margin: 0 0 4px; font-size: 16px; color: var(--t-eef1f3); }
.sch-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--c-24282e); }
.sch-spacer { flex: 1; }
.sch-delete { color: var(--t-ff8a8f); background: transparent; border: 1px solid var(--c-5f373e); border-radius: 8px; padding: 8px 14px; cursor: pointer; }
@media (max-width: 640px) { .sch-row { flex-wrap: wrap; } .sch-head { flex-direction: column; } }


.sch-tools-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sch-tools-head strong { color: var(--t-dce1e5); }
.sch-add { padding: 5px 12px; font-size: 14px; background: transparent; border: 1px solid var(--c-2c3138); border-radius: 8px; color: var(--t-cbd2d8); cursor: pointer; }
.sch-add:hover { border-color: var(--c-465059); }
.sch-tools .admin-hint { margin: 8px 0 0; }
.sch-tool-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sch-tool { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; color: var(--t-e9ff67); background: var(--c-1b2013); border: 1px solid var(--c-4a5a2a); border-radius: 999px; font-size: 14px; font-weight: 600; }
.sch-tool button { padding: 0 6px; min-height: 0; background: none; border: 0; color: inherit; cursor: pointer; opacity: .7; }
.sch-tool button:hover { opacity: 1; }
.sch-picker { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-24282e); display: flex; flex-direction: column; gap: 8px; }
.sch-picker-list { max-height: 240px; overflow: auto; display: flex; flex-direction: column; border: 1px solid var(--c-262b32); border-radius: 8px; }
.sch-picker-list button { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: none; border: 0; border-bottom: 1px solid var(--c-262b32); color: var(--t-cbd2d8); text-align: left; cursor: pointer; font-size: 15px; }
.sch-picker-list button:last-child { border-bottom: 0; }
.sch-picker-list button:hover { background: var(--tint); }
.sch-picker-list em { font-style: normal; color: var(--t-a9b0b8); }
.sch-picker-list .admin-hint { padding: 8px 12px; }
/* Scheduled task form: prompt box with model bar, trigger card, advanced settings */
.sch-promptbox { border: 1px solid var(--c-2c3138); border-radius: 12px; background: var(--c-13161a); overflow: hidden; }
.sch-promptbox:focus-within { border-color: var(--c-5a6b34); }
.sch-promptbox textarea { display: block; width: 100%; border: 0; border-radius: 0; background: transparent; resize: vertical; outline: none; box-shadow: none; }
.sch-promptbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--c-262b32); background: var(--c-171a1f); color: var(--t-a9b0b8); font-size: 14px; }
.sch-promptbar select { width: auto; max-width: 60%; padding: 4px 8px; font-size: 14px; }
.sch-trigger { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--c-262b32); border-radius: 12px; background: var(--c-13161a); }
.sch-trigger strong { color: var(--t-dce1e5); }
.sch-trigger-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sch-trigger-row select, .sch-trigger-row input { width: auto; }
.sch-inline { flex-direction: row !important; align-items: center; gap: 6px !important; color: var(--t-a9b0b8); }
.sch-inline input { width: 80px; }
.sch-zone { color: var(--t-a9b0b8); font-size: 14px; }
.sch-days { display: flex; flex-wrap: wrap; gap: 6px; }
.sch-days button { padding: 6px 12px; min-height: 0; font-size: 14px; background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 999px; color: var(--t-a8afb6); cursor: pointer; }
.sch-days button.on { color: var(--t-e9ff67); background: var(--c-1b2013); border-color: var(--c-4a5a2a); font-weight: 600; }
.sch-advanced { border: 1px solid var(--c-262b32); border-radius: 12px; background: var(--c-13161a); }
.sch-advanced > summary { padding: 12px 14px; cursor: pointer; font-weight: 600; color: var(--t-dce1e5); }
.sch-advanced > :not(summary) { margin: 0 14px 14px; }
.sch-advanced .sch-tools, .sch-advanced .sch-workflow { border: 0; padding: 0; background: transparent; }

/* Scheduled task: extra triggers and run history */
.sch-trig-item { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--c-262b32); border-radius: 10px; background: var(--c-171a1f); }
.sch-trig-head { display: flex; align-items: center; gap: 8px; color: var(--t-dce1e5); font-weight: 600; flex-wrap: wrap; }
.sch-trig-head small { color: var(--t-a9b0b8); font-weight: 400; font-size: 13px; }
.sch-trig-icon { font-size: 16px; }
.sch-link { padding: 2px 6px; min-height: 0; background: none; border: 0; color: var(--t-a9b0b8); cursor: pointer; font-size: 14px; text-decoration: underline; }
.sch-link:hover { color: var(--t-eef1f3); }
.sch-link.danger:hover { color: var(--t-ff8a8f); }
.sch-url { padding: 6px 10px; border-radius: 8px; background: var(--c-10141a); overflow-x: auto; }
.sch-url code, .sch-reveal code { font-size: 14px; color: var(--t-cfc394); word-break: break-all; }
.sch-reveal { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--c-5a6b34); border-radius: 10px; background: var(--c-1b2013); }
.sch-reveal pre { margin: 0; padding: 10px; border-radius: 8px; background: var(--c-10141a); color: var(--t-cfc394); font-size: 13px; overflow-x: auto; white-space: pre; }
.sch-filter select, .sch-filter input { width: auto; flex: 1 1 140px; }
.sch-runs { display: flex; flex-direction: column; border: 1px solid var(--c-262b32); border-radius: 8px; overflow: hidden; }
.sch-run-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--c-262b32); color: var(--t-cbd2d8); text-decoration: none; font-size: 14px; }
.sch-run-row:last-child { border-bottom: 0; }
.sch-run-row:hover { background: var(--tint); }

/* Scheduled task editor as a floating window over the list */
.sch-modal-backdrop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; background: rgba(0,0,0,.55); overflow: auto; }
.sch-modal { width: min(780px, 100%); max-height: 92vh; display: flex; flex-direction: column; border-radius: 14px; background: var(--c-111418); border: 1px solid var(--c-2c3138); box-shadow: 0 24px 70px rgba(0,0,0,.5); overflow: hidden; }
.sch-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--c-262b32); }
.sch-modal-head h3 { margin: 0; font-size: 18px; color: var(--t-eef1f3); }
.sch-close { width: 34px; height: 34px; min-height: 0; padding: 0; background: transparent; border: 0; border-radius: 8px; color: var(--t-a9b0b8); font-size: 16px; cursor: pointer; }
.sch-close:hover { background: var(--tint); color: var(--t-eef1f3); }
.sch-modal .sch-form { max-width: none; padding: 16px 18px 0; overflow: auto; flex: 1; min-height: 0; }
.sch-modal .sch-foot { position: sticky; bottom: 0; margin: 4px -18px 0; padding: 12px 18px; background: var(--c-111418); border-top: 1px solid var(--c-262b32); }

/* Tools: per-person access, member switches, folded account details */
.tool-access-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tool-access-pick select { width: 100%; max-width: 380px; padding: 9px 11px; color: var(--t-e5e9ee); background: var(--c-191d22); border: 1px solid var(--c-30363e); border-radius: 8px; font-size: 15px; outline: none; }
.tool-access-list { display: flex; flex-direction: column; border: 1px solid var(--c-262b32); border-radius: 10px; overflow: hidden; }
.tool-access-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--c-111418); }
.tool-access-row + .tool-access-row { border-top: 1px solid var(--c-262b32); }
.tool-access-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; color: var(--t-e5e9ee); }
.seg { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--c-30363e); border-radius: 8px; overflow: hidden; }
.seg button { min-height: 0; padding: 6px 12px; font-size: 14px; color: var(--t-9da4ac); background: transparent; border: 0; border-left: 1px solid var(--c-30363e); cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button.active { color: var(--t-e9ff67); background: var(--c-1d232a); font-weight: 700; }
.seg button.active.allow { color: var(--t-4caf7d); }
.seg button.active.block { color: var(--t-ff8a8f); }
.seg button:disabled { opacity: .6; cursor: default; }
.settings-fold { margin-top: 4px; }
.settings-fold > summary { padding: 10px 0; color: var(--t-9da4ac); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.my-tool-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.my-tool-row.is-off .provider-name { opacity: .6; }
@media (max-width: 640px) {
    .tool-access-row { flex-direction: column; align-items: stretch; }
    .seg { align-self: flex-start; }
}

/* Tools page: grouped switches */
.tools-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tools-count { flex: 0 0 auto; padding: 4px 10px; color: var(--t-c8e58a); background: var(--c-1e2a1c); border-radius: 999px; font-size: 13px; font-weight: 700; }
.tools-search { width: 100%; max-width: 380px; margin-bottom: 14px; padding: 9px 12px; color: var(--t-e5e9ee); background: var(--c-191d22); border: 1px solid var(--c-30363e); border-radius: 8px; font-size: 15px; outline: none; }
.tools-search:focus { border-color: var(--c-4a5a2a); }
.tool-groups { column-width: 320px; column-gap: 12px; }
.tool-group { break-inside: avoid; margin-bottom: 12px; background: var(--c-13161a); border: 1px solid var(--c-262b32); border-radius: 12px; overflow: hidden; }
.tool-group h4 { display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: 10px 14px; color: var(--t-e5e9ee); font-size: 14px; background: var(--c-171a1f); border-bottom: 1px solid var(--c-262b32); }
.tool-group h4 small { color: var(--t-9da4ac); font-weight: 500; }
.tool-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; }
.tool-line + .tool-line { border-top: 1px solid var(--c-1f242a); }
.tool-line-name { min-width: 0; color: var(--t-dce1e5); font-size: 15px; }
.tool-line-name small { margin-left: 6px; color: var(--t-9da4ac); font-size: 12px; }
.tool-line-name .tool-needs { color: var(--t-f3c07a); }
.admin-panel .settings-block h3.admin-subheading { color: var(--t-e5e9ee); text-transform: none; letter-spacing: 0; font-size: 17px; }
.settings-fold { border: 1px solid var(--c-262b32); border-radius: 12px; padding: 0 16px; background: var(--c-13161a); }
.settings-fold[open] { padding-bottom: 8px; }
.settings-fold > summary { color: var(--t-e5e9ee); text-transform: none; letter-spacing: 0; font-size: 16px; }
.settings-fold .provider-fields input { width: 100%; }
.tools-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.tools-bar .tools-search { flex: 1 1 220px; margin-bottom: 0; }
.mini-btn { min-height: 0; padding: 8px 12px; color: var(--t-dce1e5); background: var(--c-191d22); border: 1px solid var(--c-30363e); border-radius: 8px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.mini-btn:hover:not(:disabled) { border-color: var(--c-465059); }
.mini-btn:disabled { opacity: .55; cursor: default; }
.link-btn { display: block; width: 100%; min-height: 0; padding: 9px 14px; color: var(--t-e9ff67); background: transparent; border: 0; border-top: 1px solid var(--c-1f242a); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.link-btn:hover { background: var(--tint); }
/* status pill under a tool name */
.tool-state { align-self: flex-start; display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.5; }
.tool-state.on { color: var(--t-c8e58a); background: var(--c-1e2a1c); border: 1px solid var(--c-4a5a2a); }
.tool-state.off { color: var(--t-9da4ac); background: var(--c-1f242a); border: 1px solid var(--c-2c3138); }
.tool-state.block { color: var(--t-ff8a8f); background: var(--c-311e22); border: 1px solid var(--c-4a2a2f); }
.tool-state { white-space: nowrap; }
.tool-access-row { flex-wrap: wrap; row-gap: 8px; }
.tool-access-name { flex: 1 1 170px; gap: 5px; }
/* All / Enabled / Disabled switch on the Tools screens */
.view-tabs { display: inline-flex; margin-bottom: 12px; border: 1px solid var(--c-30363e); border-radius: 10px; overflow: hidden; }
.view-tabs button { min-height: 0; padding: 7px 14px; color: var(--t-9da4ac); background: transparent; border: 0; border-left: 1px solid var(--c-30363e); font-size: 14px; cursor: pointer; }
.view-tabs button:first-child { border-left: 0; }
.view-tabs button span { margin-left: 4px; color: var(--t-9da4ac); font-size: 12px; }
.view-tabs button.active { color: var(--t-e9ff67); background: var(--c-1d232a); font-weight: 700; }

.impersonation-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 12px; font-size: 14px; color: var(--t-ef9ba0); background: var(--c-311e22); border-bottom: 1px solid var(--c-24282e); }
.impersonation-bar + .workspace { height: calc(100vh - 38px); margin-top: 38px; }

/* Dragging files over the chat (js/dropfiles.js): a dashed hint over the whole chat. */
.chat-main.drag-over { position: relative; }
.chat-main.drag-over::after { content: "Drop files to attach"; position: absolute; inset: 10px; z-index: 40; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--t-e9ff67); border-radius: 14px; background: rgba(0, 0, 0, .5); color: var(--t-f1f3f5); font-size: 18px; font-weight: 700; pointer-events: none; }

/* Search inside a chat (js/chatfind.js; the desktop chat page loads this same file). Floats over the top right of the messages; matches are painted with the Custom Highlight API. */
.find-bar { position: absolute; top: 68px; right: 24px; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 7px 8px; background: var(--c-191d22); border: 1px solid var(--c-30363e); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.find-bar input { width: 220px; padding: 6px 9px; color: var(--t-e0e4e7); background: var(--c-111418); border: 1px solid var(--c-30363e); border-radius: 7px; font-size: 14px; outline: none; }
.find-bar input:focus { border-color: var(--t-e9ff67); }
.find-bar .find-count { min-width: 64px; text-align: center; color: var(--t-a9b0b8); font-size: 13px; white-space: nowrap; }
.find-bar .header-btn:disabled { opacity: .4; cursor: default; }
.header-btn.on { color: var(--t-e9ff67); border-color: var(--t-e9ff67); }
::highlight(chat-find) { background-color: rgba(245, 211, 59, .38); color: inherit; }
::highlight(chat-find-current) { background-color: #ff9f1a; color: #000; }
@media (max-width: 640px) { .find-bar { left: 12px; right: 12px; } .find-bar input { flex: 1; width: auto; min-width: 0; } }

/* Settings: a floating window with the admin pages grouped in a sidebar */
.setwin-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; background: var(--c-111418); }
.setwin { width: 100%; height: 100%; display: grid; grid-template-columns: 270px minmax(0,1fr); border-radius: 0; background: var(--c-111418); border: 0; overflow: hidden; }
.setwin-nav { padding: 18px 12px 16px; overflow-y: auto; background: var(--c-15191d); border-right: 1px solid var(--c-262b32); }
.setwin-nav-head { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 10px; }
.setwin-nav h2 { margin: 0; font-size: 20px; color: var(--t-eef1f3); }
.setwin-group { padding: 16px 10px 6px; color: var(--t-9da4ac); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.setwin-item { position: relative; display: block; width: 100%; text-align: left; padding: 9px 12px; margin: 1px 0; border: 0; border-radius: 8px; background: transparent; color: var(--t-cbd2d8); font-size: 15px; cursor: pointer; }
.setwin-item:hover { background: var(--tint); }
.setwin-item.on { background: var(--c-22272d); color: var(--t-f1f3f5); font-weight: 600; }
.setwin-item.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--t-e9ff67); }
.setwin-content { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.setwin-head { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 24px; border-bottom: 1px solid var(--c-262b32); }
.setwin-head h3 { margin: 0; font-size: 19px; color: var(--t-eef1f3); }
.setwin-head .conn-tabs { margin-left: 6px; }
.setwin-close { margin-left: auto; }
.setwin-back, .setwin-close-mobile { display: none; }
.setwin-content .admin-panel { flex: 1; min-height: 0; overflow-y: auto; }
@media (max-width: 760px) {
  .setwin-backdrop { padding: 0; }
  .setwin { height: 100%; border-radius: 0; border: 0; grid-template-columns: minmax(0,1fr); }
  .setwin .setwin-content { display: none; }
  .setwin.show-detail .setwin-nav { display: none; }
  .setwin.show-detail .setwin-content { display: flex; }
  .setwin-nav { border-right: 0; }
  .setwin-close-mobile, .setwin-back { display: inline-block; }
  .setwin-head { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .setwin-head .conn-tabs { margin-left: 0; order: 5; width: 100%; overflow-x: auto; }
}

/* Row buttons in admin tables: a tidy two-column grid of equal buttons instead of a ragged wrapping row */
.user-table .actions-col { width: 1%; }
.user-table .row-actions { display: grid; grid-template-columns: repeat(2, minmax(86px, 1fr)); gap: 6px; justify-content: end; }
.user-table .row-actions button { padding: 6px 10px; text-align: center; white-space: nowrap; color: var(--t-a8afb6); background: var(--c-22272d); border: 1px solid var(--c-363d45); border-radius: 6px; font-size: 13px; cursor: pointer; }
.user-table .row-actions button:hover:not(:disabled) { color: var(--t-eef1f3); background: var(--c-2b3138); border-color: var(--c-4d565f); }
.user-table .row-actions button.danger:hover:not(:disabled) { color: var(--t-ff9da0); background: var(--c-2a1a1d); border-color: var(--c-704248); }
.user-table .row-actions button:disabled { opacity: .45; cursor: default; }
.user-table .cell-url { max-width: 200px; }
@media (max-width: 760px) { .user-table .actions-col { width: auto; } .user-table .row-actions { justify-content: stretch; } }

/* ── Attachments: picture / video previews and file cards (AttachmentHtml), click to view large (lightbox.js) ─────────────── */
.attachments { align-items: flex-start; }
.att-thumb { position: relative; display: block; width: 168px; height: 128px; padding: 0; overflow: hidden; border: 1px solid var(--c-363d29); border-radius: 10px; background: var(--c-0f1216); cursor: zoom-in; }
.att-thumb img, .att-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-thumb:hover { border-color: var(--c-565e63); }
.att-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 26px; text-shadow: 0 1px 8px rgba(0,0,0,.7); background: rgba(0,0,0,.18); pointer-events: none; }
.att-badge { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; color: #fff; background: rgba(0,0,0,.6); border-radius: 5px; font-size: 11px; pointer-events: none; }
.att-file { display: inline-flex; align-items: center; gap: 10px; max-width: 280px; padding: 8px 12px 8px 8px; color: var(--t-cbd0d5); background: var(--c-1a1e23); border: 1px solid var(--c-343a42); border-radius: 10px; text-decoration: none; text-align: left; cursor: pointer; font: inherit; }
.att-file:hover { border-color: var(--c-565e63); }
.att-icon { flex: none; width: 38px; height: 44px; display: grid; place-items: center; color: #fff; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .03em; background: #6b7280; }
.att-icon.pdf { background: #d1432f; } .att-icon.doc { background: #2b6cd4; } .att-icon.xls { background: #1f8a4c; } .att-icon.ppt { background: #d9772b; } .att-icon.txt { background: #6b7280; } .att-icon.aud { background: #8a4fd1; }
.att-meta { min-width: 0; display: grid; }
.att-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.att-meta small { color: var(--t-a9b0b8); font-size: 12px; }

/* The files waiting to be sent (above the composer) */
.pending-files { gap: 8px; }
.pending-files > .pf { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 28px 6px 6px; color: var(--t-cbd0d5); background: var(--c-1a1e23); border: 1px solid var(--c-343a42); border-radius: 10px; font-size: 13px; max-width: 240px; }
.pf-thumb { flex: none; width: 52px; height: 52px; border-radius: 7px; overflow: hidden; display: grid; place-items: center; background: var(--c-0f1216);  cursor: zoom-in; }
.pf-thumb img, .pf-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf .att-icon { width: 38px; height: 44px; }
.pf-meta { min-width: 0; display: grid; }
.pf-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pf-meta small { color: var(--t-a9b0b8); font-size: 12px; }
.pending-files > .pf > button { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; margin: 0; display: grid; place-items: center; border-radius: 50%; color: var(--t-cbd0d5); background: var(--c-2b3036); }

/* Full-size viewer for pictures and videos */
.lb-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto minmax(0, 1fr); background: rgba(8, 10, 12, .92); }
.lb-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #e7eaee; }
.lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.lb-bar a, .lb-bar button, .lb-nav { color: #e7eaee; background: rgba(255,255,255,.1); border: 0; border-radius: 8px; padding: 7px 12px; font-size: 15px; text-decoration: none; cursor: pointer; }
.lb-bar a:hover, .lb-bar button:hover, .lb-nav:hover { background: rgba(255,255,255,.2); }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 56px 18px; }
.lb-stage img, .lb-stage video { max-width: min(100%, 92vw); max-height: calc(100vh - 96px); object-fit: contain; border-radius: 6px; background: #000; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 56px; padding: 0; font-size: 26px; }
.lb-prev { left: 8px; } .lb-next { right: 8px; }

/* "↓ New" - shown when something arrived below while the person is reading higher up */
.jump-bottom { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); z-index: 20; padding: 7px 14px; color: var(--t-111418); background: var(--c-e9ff67); border: 0; border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.35); cursor: pointer; }
.jump-bottom[hidden] { display: none; }

/* Customer service: a line's files and abilities window */
.cap-list { margin: 0; padding-left: 18px; font-size: 14px; color: var(--t-cbd0d5); }
.cap-list li { margin: 3px 0; }
.know-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid var(--c-343a42); border-radius: 9px; background: var(--c-1a1e23); }
.know-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.know-main strong { overflow-wrap: anywhere; }
.know-main small { color: var(--t-a9b0b8); }
.know-main .know-warn { color: var(--t-ef9ba0); }
.know-kind { justify-self: start; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--t-111418); background: var(--c-e9ff67); }
.know-kind.knowledge { background: var(--c-9ec5ff, #9ec5ff); }
.know-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.know-preview { padding: 10px; border: 1px solid var(--c-343a42); border-radius: 9px; background: var(--c-0f1216); }
.know-preview pre { margin: 8px 0 0; max-height: 240px; overflow: auto; white-space: pre-wrap; font-size: 13px; color: var(--t-cbd0d5); }

/* Quick-start cards on a new chat and one-tap follow-ups under a picture or video */
.quick-starts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; max-width: 600px; margin: 24px auto 0; }
.quick-start { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; text-align: left; border-radius: 12px; border: 1px solid var(--c-262b31, #262b31); background: var(--c-12151a, #12151a); color: var(--t-e8eaed, #e8eaed); cursor: pointer; }
.quick-start:hover { border-color: var(--c-d4ff3f, #d4ff3f); }
.quick-start-icon { font-size: 22px; }
.quick-start small { color: var(--t-a9b0b8, #a9b0b8); font-size: 13px; line-height: 1.4; }
.follow-ups { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.follow-up { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--c-262b31, #262b31); background: transparent; color: inherit; font-size: 14px; cursor: pointer; }
.follow-up:hover { border-color: var(--c-d4ff3f, #d4ff3f); }

/* "Something is brewing" card while a picture or video is being made */
.brewing { display: flex; align-items: center; gap: 16px; max-width: 460px; padding: 16px 18px; margin: 4px 0 10px; border-radius: 14px; border: 1px solid var(--c-262b31, #262b31); background: linear-gradient(135deg, rgba(212,255,63,.06), rgba(120,110,255,.08)); }
.brewing-orb { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(from 0deg, #d4ff3f, #7c6bff, #3fd2ff, #d4ff3f); animation: brew-spin 3s linear infinite; box-shadow: 0 0 22px rgba(124,107,255,.45); }
.brewing-orb::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--c-111418, #111418); }
.brewing-orb i { position: absolute; z-index: 1; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: 0; animation: brew-twinkle 1.8s ease-in-out infinite; }
.brewing-orb i:nth-child(1) { top: -6px; left: 30px; }
.brewing-orb i:nth-child(2) { top: 36px; left: -5px; animation-delay: .6s; }
.brewing-orb i:nth-child(3) { top: 40px; left: 46px; animation-delay: 1.2s; }
.brewing-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brewing-text strong { font-size: 16px; color: var(--t-eef1f3, #eef1f3); }
.brewing-text span { font-size: 14px; color: var(--t-a9b0b8, #a9b0b8); }
@keyframes brew-spin { to { transform: rotate(360deg); } }
@keyframes brew-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .brewing-orb, .brewing-orb i { animation: none; } .brewing-orb i { opacity: .8; } }
/* Customer line voice picker: a list where a click chooses the voice and plays a sample, with a play button at the end of each row */
.voice-picker { display: flex; flex-direction: column; gap: 6px; }
.voice-list { max-height: 260px; overflow: auto; display: flex; flex-direction: column; border: 1px solid var(--c-262b32); border-radius: 8px; }
.voice-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--c-262b32); color: var(--t-cbd2d8); cursor: pointer; font-size: 15px; }
.voice-row:last-child { border-bottom: 0; }
.voice-row:hover { background: var(--tint); }
.voice-row.on { background: var(--tint); color: var(--t-dce1e5); }
.voice-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--t-a9b0b8); box-sizing: border-box; }
.voice-row.on .voice-dot { border-color: var(--c-5a6b34); background: var(--c-5a6b34); box-shadow: inset 0 0 0 2px var(--c-13161a); }
.voice-name { flex: 1; min-width: 0; }
.voice-name small { color: var(--t-a9b0b8); }
.voice-play { flex: none; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--c-2c3138); background: none; color: var(--t-dce1e5); cursor: pointer; font-size: 14px; }
.voice-play:hover { background: var(--c-2c3138); }
.voice-free { display: flex; align-items: center; gap: 8px; }
.voice-free input { flex: 1; }
.voice-play.waiting { opacity: .55; }

/* ── Create page (templates) ───────────────────────────────────────────────── */
.create-page { min-width: 0; height: 100vh; overflow-y: auto; padding: 28px clamp(16px, 3vw, 40px) 60px; background: radial-gradient(circle at 50% -30%, var(--c-272d24) 0, var(--c-13161a) 38%, var(--c-111418) 68%); }
.create-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.create-hero h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; color: var(--t-eef1f3); }
.create-hero p { margin: 4px 0 0; color: var(--t-a9b0b8); font-size: 15px; }
.create-tabs { display: flex; gap: 4px; padding: 4px; background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 999px; }
.create-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; color: var(--t-a9b0b8); background: transparent; border: 0; border-radius: 999px; font-size: 14px; font-weight: 600; }
.create-tabs button.on { color: var(--t-111418); background: var(--c-e9ff67); }
.create-badge { min-width: 20px; padding: 1px 6px; color: var(--t-111418); background: var(--c-b9d447); border-radius: 999px; font-size: 12px; }
.create-tabs button.on .create-badge { background: var(--c-111418); color: var(--t-e9ff67); }
.create-banner { margin-bottom: 14px; }
.create-kinds { display: flex; gap: 8px; margin-bottom: 14px; }
.create-kinds button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; color: var(--t-c9ced3); background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 12px; font-size: 16px; font-weight: 700; }
.create-kinds button small { color: inherit; opacity: .6; font-size: 13px; font-weight: 600; }
.create-kinds button.on { color: var(--t-111418); background: var(--c-e9ff67); border-color: var(--c-e9ff67); }
.create-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.create-chips, .create-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.create-chips button, .create-choices button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; color: var(--t-c9ced3); background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 999px; font-size: 14px; }
.create-chips button:hover, .create-choices button:hover { border-color: var(--c-4d565f); }
.create-chips button.on, .create-choices button.on { color: var(--t-111418); background: var(--c-e9ff67); border-color: var(--c-e9ff67); font-weight: 600; }
.create-choices button small { color: inherit; opacity: .65; font-size: 12px; }
.create-search { width: min(280px, 100%); padding: 9px 13px; color: var(--t-e5e9ee); background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 10px; font-size: 14px; }
.create-section { margin: 6px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t-a9b0b8); }
.create-featured { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 300px); gap: 14px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 22px; scroll-snap-type: x mandatory; }
.create-featured .tpl-card { scroll-snap-align: start; aspect-ratio: 3 / 4; }
.create-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.tpl-card { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; overflow: hidden; text-align: left; background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 16px; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.tpl-card:hover { transform: translateY(-3px); border-color: var(--c-b9d447); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.tpl-card:focus-visible { outline: 2px solid var(--c-e9ff67); outline-offset: 2px; }
.tpl-card.hidden-tpl { opacity: .6; }
.tpl-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tpl-card:hover .tpl-cover { transform: scale(1.04); }
.tpl-placeholder { display: grid; place-items: center; background: linear-gradient(150deg, color-mix(in srgb, var(--series-7) 55%, transparent), var(--c-171a1f) 70%); }
.tpl-placeholder[data-cat="portrait"] { background: linear-gradient(150deg, color-mix(in srgb, var(--series-5) 60%, transparent), var(--c-171a1f) 70%); }
.tpl-placeholder[data-cat="product"] { background: linear-gradient(150deg, color-mix(in srgb, var(--series-4) 60%, transparent), var(--c-171a1f) 70%); }
.tpl-placeholder[data-cat="camera moves"] { background: linear-gradient(150deg, color-mix(in srgb, var(--series-1) 60%, transparent), var(--c-171a1f) 70%); }
.tpl-placeholder[data-cat="seasonal"] { background: linear-gradient(150deg, color-mix(in srgb, var(--series-2) 60%, transparent), var(--c-171a1f) 70%); }
.tpl-placeholder[data-cat="effects"] { background: linear-gradient(150deg, color-mix(in srgb, var(--series-3) 60%, transparent), var(--c-171a1f) 70%); }
.tpl-placeholder span { font-size: 52px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.tpl-kind, .tpl-off { position: absolute; top: 10px; left: 10px; padding: 3px 9px; color: #fff; background: rgba(0,0,0,.55); border-radius: 999px; font-size: 12px; font-weight: 600; backdrop-filter: blur(6px); }
.tpl-off { left: auto; right: 10px; background: rgba(120,40,40,.75); }
.tpl-info { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 3px; padding: 40px 14px 13px; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0)); }
.tpl-info strong { color: #fff; font-size: 16px; }
.tpl-info small { color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpl-card.big .tpl-info strong { font-size: 19px; }
.create-empty { margin: 40px auto; max-width: 440px; text-align: center; color: var(--t-a9b0b8); }
.create-empty strong { display: block; margin-bottom: 6px; color: var(--t-eef1f3); font-size: 18px; }
.create-go { padding: 11px 22px; color: var(--t-111418); background: var(--c-e9ff67); border: 0; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .05s ease, background .15s ease; }
.create-go:hover:not(:disabled) { background: var(--c-f2ff9a); }
.create-go:active { transform: scale(.98); }
.create-go:disabled { opacity: .6; cursor: default; }

/* My creations */
.creation { display: flex; flex-direction: column; overflow: hidden; background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 16px; }
.creation.fresh { border-color: var(--c-b9d447); box-shadow: 0 0 0 1px var(--c-b9d447); }
.creation-media { position: relative; aspect-ratio: 4 / 5; background: var(--c-111418); overflow: hidden; }
.creation-media img, .creation-media video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.creation-media img.creation-still { filter: blur(2px) brightness(.55); cursor: default; }
.creation-working { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; color: var(--t-eef1f3); font-size: 14px;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--c-e9ff67) 12%, transparent) 50%, transparent 70%); background-size: 250% 100%; animation: create-shimmer 2.2s linear infinite; }
@keyframes create-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.create-spinner { width: 34px; height: 34px; border: 3px solid var(--c-2c3138); border-top-color: var(--c-e9ff67); border-radius: 50%; animation: create-spin 1s linear infinite; }
@keyframes create-spin { to { transform: rotate(360deg); } }
.creation-open { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%); color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.3); border-radius: 50%; font-size: 20px; backdrop-filter: blur(6px); }
.creation-failed { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; text-align: center; color: var(--t-ff9da0); }
.creation-failed span { font-size: 28px; }
.creation-failed p { margin: 6px 0 0; font-size: 14px; color: var(--t-c9ced3); }
.creation-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }
.creation-foot div:first-child { min-width: 0; }
.creation-foot strong { display: block; color: var(--t-eef1f3); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creation-foot small { color: var(--t-a9b0b8); font-size: 12px; }
.creation-actions { display: flex; gap: 2px; flex-shrink: 0; }
.creation-actions a.chat-action { text-decoration: none; }

/* The template window */
.sch-modal.create-modal { width: min(980px, 100%); }
.create-modal-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 0; overflow: auto; }
.create-modal-preview { position: relative; min-height: 420px; background: var(--c-0d1014); }
.create-modal-form { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; }
.create-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.create-modal-head h3 { margin: 4px 0 0; font-size: 22px; color: var(--t-eef1f3); }
.create-kind { color: var(--t-e9ff67); font-size: 13px; font-weight: 600; }
.create-desc { margin: -6px 0 0; color: var(--t-a9b0b8); font-size: 15px; }
.create-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 130px; padding: 14px; color: var(--t-a9b0b8); background: var(--c-111418); border: 2px dashed var(--c-3b424c); border-radius: 14px; text-align: center; cursor: pointer; transition: border-color .15s ease; }
.create-drop:hover { border-color: var(--c-b9d447); }
.create-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.create-drop strong { color: var(--t-eef1f3); font-size: 15px; }
.create-drop small { font-size: 12px; }
.create-drop-icon { font-size: 26px; color: var(--t-e9ff67); }
.create-drop.has { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 0; border-style: solid; text-align: left; }
.create-drop.has img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.create-field { display: flex; flex-direction: column; gap: 7px; }
.create-field > span { color: var(--t-c9ced3); font-size: 14px; font-weight: 600; }
.create-field input[type=text] { padding: 10px 12px; color: var(--t-e5e9ee); background: var(--c-111418); border: 1px solid var(--c-2c3138); border-radius: 10px; font-size: 15px; }
.aspect-box { display: inline-block; border: 1.5px solid currentColor; border-radius: 3px; margin-right: 2px; }
.create-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--c-262b32); }
.create-modal-foot small { color: var(--t-a9b0b8); font-size: 13px; }
.new-chat.create-link span { font-size: 17px; }
.create-hint { color: var(--t-a9b0b8); font-size: 13px; margin: 0; }
.create-hint.warn { color: var(--t-f3c07a); }
.create-field textarea { padding: 10px 12px; color: var(--t-e5e9ee); background: var(--c-111418); border: 1px solid var(--c-2c3138); border-radius: 10px; font: inherit; font-size: 15px; resize: vertical; }
.create-slot { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 10px; align-items: end; padding: 12px; background: var(--c-111418); border: 1px solid var(--c-262b32); border-radius: 12px; }
.create-slot .create-field textarea { background: var(--c-171a1f); }
.create-drop.slot { min-height: 96px; padding: 8px; gap: 2px; }
.create-drop.slot.has { flex-direction: column; justify-content: center; text-align: center; gap: 4px; }
.create-drop.slot.has img { width: 64px; height: 64px; }
.create-drop.slot .chat-action { position: absolute; top: 2px; right: 2px; z-index: 2; }
.creation-note { display: block; margin-top: 2px; color: var(--t-f3c07a) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .create-slot { grid-template-columns: 1fr; } }

/* Admin -> Templates */
.tpl-admin-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tpl-admin-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 10px; background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 12px; }
.tpl-admin-row.off { opacity: .6; }
.tpl-admin-thumb { position: relative; width: 74px; height: 92px; overflow: hidden; border-radius: 9px; background: var(--c-111418); }
.tpl-admin-thumb .tpl-placeholder span { font-size: 28px; }
.tpl-admin-row strong { color: var(--t-eef1f3); }
.tpl-admin-row small { display: block; color: var(--t-a9b0b8); font-size: 12px; }
.tpl-admin-row .row-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tpl-field-row { display: grid; grid-template-columns: 110px 1fr 100px 1fr auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.tpl-field-row input, .tpl-field-row select { min-width: 0; }
.tpl-field-row > span { display: flex; align-items: center; gap: 6px; }
.tpl-admin-row .file-button { display: inline-flex; align-items: center; padding: 6px 10px; color: var(--t-c9ced3); background: var(--c-171a1f); border: 1px solid var(--c-2c3138); border-radius: 7px; font-size: 13px; cursor: pointer; }
.tpl-admin-row .file-button:hover { border-color: var(--c-4d565f); }
.sch-form label.check-line { flex-direction: row; align-items: center; gap: 8px; }
.sch-foot button.danger { color: var(--t-ff9da0); border-color: var(--c-704248); }

@media (max-width: 820px) {
  .create-page { padding-top: 62px; }
  .create-modal-body { grid-template-columns: 1fr; }
  .create-modal-preview { min-height: 220px; aspect-ratio: 16 / 10; }
  .tpl-field-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tpl-info small { display: none; }
}

/* Larger text for Admin settings and My account (easier to read for older people) */
.admin-panel { zoom: 1.15; }
.admin-tab-select .view-tabs button, .conn-tabs button { font-size: 16px; padding: 9px 16px; }
.setwin-nav h2 { font-size: 23px; }
.setwin-group { font-size: 14px; }
.setwin-item { font-size: 17.5px; padding: 11px 14px; }
.setwin-head h3 { font-size: 22px; }
.admin-tab-select select { font-size: 17px; max-width: 320px; }