@font-face{font-family:Tajawal;src:url('/fonts/Tajawal-Regular.ttf');font-weight:400;font-display:swap}
@font-face{font-family:Tajawal;src:url('/fonts/Tajawal-Medium.ttf');font-weight:500;font-display:swap}
@font-face{font-family:Tajawal;src:url('/fonts/Tajawal-Bold.ttf');font-weight:700;font-display:swap}

:root{
  --navy-900:#081527;--navy-800:#0b1a30;--navy-700:#12233d;--navy-600:#1a3050;--navy-500:#27426a;
  --ink:#0f1e33;--text:#24364e;--muted:#6b7a90;--faint:#98a4b6;
  --line:#e3e8f0;--line-soft:#eef1f6;--surface:#f4f6fa;--card:#fff;
  --primary:#1f57c9;--primary-600:#1a49ab;--primary-50:#edf3fe;--primary-100:#dce8fd;
  --sky:#6fb1ff;--success:#168a66;--success-50:#e8f6f1;--danger:#c0413a;--danger-50:#fcefee;--warn:#b7791f;--warn-50:#fdf5e6;
  --radius:14px;--shadow-sm:0 1px 2px #0f1e330a,0 1px 3px #0f1e330f;--shadow:0 6px 24px #0f1e3312,0 2px 6px #0f1e330a;--shadow-lg:0 24px 60px #0814274d;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--text);font-family:Tajawal,'Segoe UI',Tahoma,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,a,textarea,input{font:inherit}
button{cursor:pointer;transition:background .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
svg{width:1.250em;height:1.250em;flex-shrink:0;display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
[hidden]{display:none!important}
::selection{background:var(--primary-100)}
*{scrollbar-width:thin;scrollbar-color:#c5cedb transparent}

.app{display:flex;height:100dvh;overflow:hidden}

/* ───────── Sidebar ───────── */
.sidebar{width:292px;flex-shrink:0;background:linear-gradient(180deg,var(--navy-800),var(--navy-900));color:#dbe5f2;display:flex;flex-direction:column;padding:22px 16px 16px;border-inline-end:1px solid #060f1d;scrollbar-color:#2b4266 transparent}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;padding:4px 6px 22px}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(140deg,#2b6ae0,#17409a);color:#fff;box-shadow:0 6px 16px #1f57c966,inset 0 1px 0 #ffffff33}
.brand-mark svg{width:26px;height:26px}
.brand-text{font-size:17px;font-weight:700;letter-spacing:-.2px;line-height:1.35}
.brand-text small{display:block;font-size:11px;font-weight:400;color:#7f93b0;margin-top:1px}
.new-chat{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;background:var(--primary);color:#fff;padding:11px 14px;font-weight:500;font-size:14px;box-shadow:0 4px 14px #1f57c94d}
.new-chat:hover{background:#2a66e0;transform:translateY(-1px)}
.chat-search{display:flex;align-items:center;gap:8px;margin-top:12px;background:#ffffff0d;border:1px solid #ffffff14;border-radius:10px;padding:0 11px;color:#7f93b0}
.chat-search:focus-within{border-color:#3d6fd0;background:#ffffff14}
.chat-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:#e6edf7;padding:9px 0;font-size:13px}
.chat-search input::placeholder{color:#6f84a3}
.sidebar-caption{display:flex;justify-content:space-between;font-size:11px;color:#6f84a3;margin:22px 8px 8px;letter-spacing:.3px}
#chats{overflow:auto;flex:1;display:flex;flex-direction:column;gap:2px;margin-inline:-4px;padding-inline:4px}
#chats button{display:flex;align-items:center;gap:10px;border:0;background:none;width:100%;color:#a9b8cc;text-align:right;padding:9px 10px;border-radius:9px;font-size:13px;position:relative}
#chats button svg{color:#5f769a;width:17px;height:17px}
#chats button .chat-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chats button .chat-meta{font-size:10px;color:#7f93b0;background:#ffffff0f;border-radius:20px;padding:1px 7px;flex-shrink:0}
#chats button:hover{background:#ffffff0d;color:#e6edf7}
#chats button.active{background:#ffffff17;color:#fff}
#chats button.active svg{color:var(--sky)}
#chats button.active::before{content:'';position:absolute;inset-inline-start:-4px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--sky)}
#chats .empty{color:#6f84a3;font-size:12px;padding:14px 10px}
.sidebar-bottom{border-top:1px solid #ffffff12;padding-top:10px;margin-top:10px;display:flex;flex-direction:column;gap:2px}
.sidebar-bottom>button{display:flex;align-items:center;gap:10px;background:none;border:0;color:#a9b8cc;padding:9px 10px;border-radius:9px;font-size:13px;text-align:right}
.sidebar-bottom>button svg{width:17px;height:17px;color:#6f84a3}
.sidebar-bottom>button:hover{background:#ffffff0d;color:#fff}
.local-status{display:flex;gap:10px;align-items:center;background:#ffffff0a;border:1px solid #ffffff12;border-radius:11px;padding:11px 12px;margin-top:10px;font-size:12px;color:#dbe5f2}
.local-status b{font-weight:500;display:block}
.local-status small{display:block;font-size:10.500px;color:#7f93b0;direction:rtl;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.local-status>span{flex:1;min-width:0}
.local-status i{width:8px;height:8px;border-radius:50%;background:#3ecf9a;box-shadow:0 0 0 3px #3ecf9a2e;flex-shrink:0}
.local-status.offline i{background:#e0a23a;box-shadow:0 0 0 3px #e0a23a2e}
.local-status svg{color:#5f769a;width:18px;height:18px}

/* ───────── Main ───────── */
main{flex:1;min-width:0;display:flex;flex-direction:column;background:radial-gradient(1200px 500px at 85% -10%,#e3ecfb 0,transparent 60%),var(--surface)}
header{height:64px;flex-shrink:0;border-bottom:1px solid var(--line);padding:0 28px;display:flex;justify-content:space-between;align-items:center;background:#ffffffb8;backdrop-filter:blur(10px)}
.header-title{display:flex;align-items:center;gap:12px;min-width:0}
#chatTitle{font-weight:700;color:var(--ink);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.header-tag{font-size:11px;padding:3px 10px;background:var(--success-50);color:var(--success);border-radius:20px;font-weight:500;white-space:nowrap}
.quiet-button,.icon-button{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;background:transparent;color:var(--muted);padding:7px 11px;border-radius:9px;font-size:13px}
.quiet-button:hover,.icon-button:hover{background:#0f1e330a;color:var(--ink)}
.quiet-button.outlined{border-color:var(--line);background:var(--card)}
.icon-button{padding:7px}
#menu{display:none}

#thread{flex:1;overflow:auto;padding:28px max(24px,calc((100% - 860px)/2)) 12px;scroll-behavior:smooth}

/* Welcome */
.welcome{max-width:820px;margin:5vh auto 20px;animation:rise .45s ease both}
.eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:500;color:var(--primary);background:var(--primary-50);border:1px solid var(--primary-100);padding:4px 12px;border-radius:20px}
.eyebrow span{width:6px;height:6px;border-radius:50%;background:var(--primary)}
.welcome h1{font-size:clamp(28px,3.600vw,42px);font-weight:700;letter-spacing:-.8px;line-height:1.3;margin:18px 0 12px;color:var(--ink)}
.welcome>p{font-size:16px;color:var(--muted);line-height:1.9;margin:0 0 26px;max-width:640px}
.dropzone{display:flex;align-items:center;gap:16px;width:100%;text-align:right;border:1.500px dashed #b9c8de;background:#ffffffb3;border-radius:16px;padding:18px 20px;color:var(--text)}
.dropzone:hover{border-color:var(--primary);background:#fff;box-shadow:var(--shadow)}
.dropzone-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--primary-50);color:var(--primary);flex-shrink:0}
.dropzone-icon svg{width:22px;height:22px}
.dropzone-text{flex:1;min-width:0}
.dropzone-text b{display:block;font-weight:500;color:var(--ink);font-size:15px}
.dropzone-text small{color:var(--faint);font-size:12px}
.types{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.types i{font-style:normal;font-size:11px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 8px;direction:ltr}
.suggestions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.suggestions button{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:2px;align-items:center;text-align:right;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:15px 16px;color:var(--text);box-shadow:var(--shadow-sm)}
.suggestions button:hover{border-color:#b9cdf2;box-shadow:var(--shadow);transform:translateY(-1px)}
.s-icon{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--surface);color:var(--primary)}
.suggestions button:hover .s-icon{background:var(--primary-50)}
.suggestions b{font-size:14px;font-weight:700;color:var(--ink)}
.suggestions button>span:last-child{font-size:12.500px;color:var(--muted)}
.workflow{display:flex;gap:26px;align-items:center;margin:22px 0 0;padding:0;list-style:none;color:var(--muted);font-size:12.500px}
.workflow li{display:flex;align-items:center;gap:8px}
.workflow b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--primary);font-size:11px}

/* Messages */
.message{display:flex;gap:12px;margin:0 auto 22px;max-width:820px;line-height:1.9;animation:rise .3s ease both}
.message .bubble{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.message.user{justify-content:flex-start}
.message.user .bubble{background:var(--navy-700);color:#f2f6fc;border-radius:16px 4px 16px 16px;padding:11px 18px;max-width:82%;box-shadow:var(--shadow-sm)}
.message.assistant .avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(140deg,#2b6ae0,#17409a);color:#fff;flex-shrink:0;margin-top:2px}
.message.assistant .avatar svg{width:20px;height:20px}
.message.assistant .bubble{background:var(--card);border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:12px 18px;box-shadow:var(--shadow-sm);color:var(--text)}
.message.assistant.pending .bubble{color:var(--muted);background:linear-gradient(90deg,#fff 0,#f1f5fc 50%,#fff 100%);background-size:200% 100%;animation:shimmer 1.600s linear infinite}
.message.user .attached{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.message.user .attached span{font-size:11px;background:#ffffff1f;border-radius:6px;padding:1px 8px;direction:ltr}

/* Report card */
.artifact{max-width:820px;margin:-6px auto 26px;padding-inline-start:46px;animation:rise .35s ease both}
.artifact-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.artifact-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;flex-wrap:wrap}
.artifact-id{display:flex;align-items:center;gap:12px;min-width:0}
.artifact-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#fdece6;color:#c8502c;flex-shrink:0}
.artifact-icon svg{width:22px;height:22px}
.artifact strong{display:block;font-size:14.500px;color:var(--ink);font-weight:700}
.artifact-meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);flex-wrap:wrap}
.badge{font-size:11px;font-weight:500;border-radius:20px;padding:1px 9px}
.badge.ok{background:var(--success-50);color:var(--success)}
.badge.blocked{background:var(--danger-50);color:var(--danger)}
.badge.warn{background:var(--warn-50);color:var(--warn)}
.artifact-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.artifact-actions a,.artifact-actions button{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:9px;color:var(--text);padding:7px 12px;text-decoration:none;font-size:12.500px}
.artifact-actions a:hover,.artifact-actions button:hover{border-color:#b9cdf2;background:var(--primary-50);color:var(--primary-600)}
.artifact-actions .primary{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:500;box-shadow:0 3px 10px #1f57c940}
.artifact-actions .primary:hover{background:var(--primary-600);border-color:var(--primary-600);color:#fff}
.artifact-actions svg{width:16px;height:16px}
.thumbnails{display:flex;gap:10px;overflow:auto;padding:14px 18px 16px;background:var(--surface);border-top:1px solid var(--line-soft)}
.thumbnails button{padding:0;border:1px solid var(--line);background:#0b1a30;border-radius:8px;overflow:hidden;position:relative;flex-shrink:0;box-shadow:var(--shadow-sm)}
.thumbnails button:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--primary)}
.thumbnails img{width:176px;aspect-ratio:16/9;object-fit:cover;display:block}
.thumbnails span{position:absolute;bottom:5px;inset-inline-start:5px;background:#081527cc;color:#fff;border-radius:5px;padding:0 6px;font-size:10px}

/* Composer */
.composer-wrap{max-width:908px;width:100%;margin:0 auto;padding:8px 24px 16px}
#composer{border:1px solid #d5ddea;background:var(--card);box-shadow:var(--shadow);border-radius:18px;padding:14px 16px 10px}
#composer:focus-within{border-color:#9db9ee;box-shadow:0 0 0 4px #1f57c914,var(--shadow)}
textarea{resize:none;display:block;width:100%;border:0;background:transparent;outline:0;color:var(--ink);line-height:1.7;min-height:54px;max-height:180px;padding:2px 4px}
textarea::placeholder{color:var(--faint)}
.composer-toolbar{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.composer-toolbar>div{display:flex;align-items:center;gap:12px;min-width:0}
.attach-button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:6px 12px;border-radius:9px;font-size:12.500px}
.attach-button:hover{border-color:#b9cdf2;background:var(--primary-50);color:var(--primary-600)}
.attach-button svg{width:16px;height:16px}
.file-hint{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#send{border:0;background:var(--primary);color:#fff;border-radius:11px;width:40px;height:40px;display:grid;place-items:center;box-shadow:0 4px 12px #1f57c94d}
#send:hover:not(:disabled){background:var(--primary-600);transform:translateY(-1px)}
.composer-note{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--faint);padding:8px 8px 0}
.progress{display:flex;gap:10px;align-items:center;color:var(--text);font-size:13px;margin-bottom:8px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 12px;box-shadow:var(--shadow-sm)}
#progressText{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress-bar{flex:1;min-width:60px;height:5px;background:var(--line-soft);border-radius:5px;overflow:hidden}
.progress-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--sky));border-radius:5px;transition:width .4s ease}
.progress button{margin-inline-start:auto;border:1px solid var(--line);background:var(--card);color:var(--danger);font-size:12px;border-radius:8px;padding:3px 11px}
.progress button:hover{background:var(--danger-50);border-color:#eec5c2}
.spinner{width:14px;height:14px;border:2px solid var(--primary-100);border-top-color:var(--primary);border-radius:50%;animation:spin .9s linear infinite;flex-shrink:0}
.attachment-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font-size:12.500px;padding:5px 8px 5px 6px;box-shadow:var(--shadow-sm);max-width:100%}
.chip .ext{font-size:9.500px;font-weight:700;letter-spacing:.4px;color:#fff;background:var(--muted);border-radius:5px;padding:2px 6px;direction:ltr}
.chip .ext.docx{background:#2b579a}.chip .ext.xlsx,.chip .ext.csv{background:#1d7044}.chip .ext.pdf{background:#b5372f}.chip .ext.pptx{background:#c8502c}.chip .ext.img{background:#6b4fbb}
.chip .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.chip button{display:grid;place-items:center;border:0;background:none;color:var(--faint);padding:2px;border-radius:5px}
.chip button:hover{background:var(--danger-50);color:var(--danger)}
.chip button svg{width:13px;height:13px}

/* Panels & dialogs */
.versions{width:300px;flex-shrink:0;border-inline-start:1px solid var(--line);padding:18px;background:var(--card);overflow:auto}
.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.panel-title h2{font-size:17px;font-weight:700;margin:0;color:var(--ink)}
.version{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:10px;font-size:13px}
.version.current{border-color:#b9cdf2;background:var(--primary-50)}
.version strong{color:var(--ink)}
.version small{display:block;margin:4px 0 10px;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.version button{border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--primary-600);padding:4px 11px;font-size:12px}
.version button:hover{border-color:var(--primary)}
.versions .empty{color:var(--muted);font-size:13px;padding:16px 4px}
dialog{border:0;border-radius:18px;width:min(94vw,1080px);padding:22px;background:var(--card);color:var(--text);box-shadow:var(--shadow-lg)}
dialog::backdrop{background:#081527c2;backdrop-filter:blur(3px)}
#viewer{background:var(--navy-900);color:#dbe5f2;width:min(96vw,1280px);padding:14px 18px 16px}
#viewer .icon-button{color:#a9b8cc}#viewer .icon-button:hover{background:#ffffff14;color:#fff}
#viewerImage{width:100%;max-height:74vh;object-fit:contain;border-radius:10px;background:#000;display:block}
.viewer-bar{display:flex;justify-content:space-between;align-items:center;padding:0 2px 10px;font-size:13px}
.viewer-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px}
.viewer-nav>button{border:1px solid #ffffff24;background:#ffffff0f;color:#e6edf7;border-radius:9px;padding:7px 16px;font-size:13px;flex-shrink:0}
.viewer-nav>button:hover:not(:disabled){background:#ffffff1f}
.viewer-strip{display:flex;gap:6px;overflow:auto;flex:1;justify-content:safe center;padding:2px}
.viewer-strip button{padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;background:#000;opacity:.55;flex-shrink:0}
.viewer-strip button.active,.viewer-strip button:hover{opacity:1;border-color:var(--sky)}
.viewer-strip img{width:74px;aspect-ratio:16/9;object-fit:cover;display:block}
#review{max-width:820px;max-height:86vh}
#reviewContent{overflow:auto;max-height:68vh;padding-inline-end:4px}
#reviewContent>p,#reviewContent>small{display:block;color:var(--muted);margin:12px 2px}
.fact{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-top:10px;line-height:1.8;font-size:13.500px}
.fact small{color:var(--muted);font-size:12px}
.fact p{margin:4px 0}
.fact blockquote{margin:8px 0 0;background:var(--surface);border-inline-start:3px solid var(--primary-100);border-radius:6px;padding:8px 12px;color:var(--muted)}
#templateLibrary{width:min(1040px,94vw);max-height:88vh}
#templateCount{color:var(--muted);margin:0 0 4px;font-size:13px}
.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:16px 0 18px}
.template-card{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:12px;padding:8px 8px 10px}
.template-card:hover{box-shadow:var(--shadow);border-color:#b9cdf2}
.template-card button{padding:0;border:0;background:var(--navy-800);border-radius:8px;overflow:hidden;margin-bottom:4px}
.template-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain}
.template-card strong{font-size:13.500px;color:var(--ink);padding-inline:4px}
.template-card small{font-size:10.500px;direction:ltr;text-align:right;color:var(--faint);padding-inline:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#toast{position:fixed;bottom:22px;inset-inline-start:22px;max-width:480px;background:var(--navy-700);color:#fff;box-shadow:var(--shadow-lg);padding:13px 18px;border-radius:12px;z-index:50;font-size:13.500px;border-inline-start:4px solid #e0a23a;animation:rise .25s ease both}
#dropOverlay{position:fixed;inset:14px;border:2px dashed var(--primary);background:#edf3fef2;border-radius:22px;display:grid;place-content:center;justify-items:center;gap:10px;color:var(--primary-600);font-size:20px;font-weight:500;z-index:30;pointer-events:none}
#dropOverlay span{display:grid;place-items:center;width:72px;height:72px;border-radius:20px;background:#fff;box-shadow:var(--shadow)}
#dropOverlay svg{width:34px;height:34px}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

@media(max-width:1100px){.sidebar{width:248px}.versions{position:fixed;inset-inline-end:0;top:0;bottom:0;z-index:20;box-shadow:var(--shadow-lg)}.types{display:none}}
@media(max-width:760px){
  .sidebar{display:none}.sidebar.open{display:flex;position:fixed;inset-inline-start:0;inset-block:0;z-index:25;box-shadow:var(--shadow-lg);width:min(86vw,300px)}
  #menu{display:inline-flex}header{padding:0 14px;height:58px}.header-tag,#historyButton span{display:none}
  #thread{padding:18px 14px 8px}.welcome{margin-top:8px}.suggestions{grid-template-columns:1fr}.workflow{gap:12px;flex-wrap:wrap}
  .composer-wrap{padding:6px 12px 12px}.file-hint,.composer-note span:first-child{display:none}
  .artifact{padding-inline-start:0}.thumbnails img{width:140px}.message.user .bubble{max-width:92%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* ───────── Accounts, admin, style memory ───────── */
.account{display:flex;align-items:center;gap:10px;padding:8px 6px 4px;margin-top:6px;border-top:1px solid #ffffff12}
.account-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#ffffff14;color:#cfe0f7}
.account-name{flex:1;min-width:0;font-size:13px;color:#fff}
.account-name b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-name small{display:block;font-size:10.500px;color:#7f93b0}
.account .icon-button{color:#8ea3c0}.account .icon-button:hover{background:#ffffff14;color:#fff}
#chats button .chat-delete{display:none;place-items:center;color:#8ea3c0;border-radius:6px;padding:2px}
#chats button:hover .chat-delete{display:grid}
#chats button .chat-delete:hover{background:#c0413a33;color:#ffb4ae}
#chats button .chat-delete svg{width:15px;height:15px;color:inherit}
.login{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:radial-gradient(900px 500px at 80% 0,#17335f 0,transparent 60%),linear-gradient(160deg,var(--navy-800),var(--navy-900))}
.login-card{width:min(400px,100%);background:var(--card);border-radius:20px;padding:30px 28px 22px;box-shadow:var(--shadow-lg);animation:rise .35s ease both}
.login-card .brand-mark{margin-bottom:14px}
.login-card h1{font-size:22px;margin:0 0 4px;color:var(--ink)}
.login-card p{margin:0 0 18px;color:var(--muted);font-size:14px}
.login-card form{display:flex;flex-direction:column;gap:12px}
.login-card label{display:flex;flex-direction:column;gap:5px;font-size:12.500px;color:var(--muted)}
.login-card input,.inline-form input,.user-form input,.user-form select,.log-tools select{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);color:var(--ink);font-size:14px;outline:0;min-width:0}
.login-card input:focus,.inline-form input:focus,.user-form input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px #1f57c91a}
.primary-button{border:0;border-radius:10px;background:var(--primary);color:#fff;padding:10px 16px;font-weight:500;box-shadow:0 4px 12px #1f57c940}
.primary-button:hover{background:var(--primary-600)}
.login-error{margin-top:12px;background:var(--danger-50);color:var(--danger);border-radius:10px;padding:9px 12px;font-size:13px}
.login-card>small{display:block;margin-top:16px;color:var(--faint);font-size:11.500px;text-align:center}
.dialog-lead{color:var(--muted);font-size:13.500px;margin:0 0 14px;max-width:640px}
.dialog-note{color:var(--faint);font-size:12px;margin:10px 2px}
#styleDialog{width:min(94vw,680px);max-height:88vh;overflow:auto}
#styleDialog h3{font-size:13px;color:var(--muted);font-weight:500;margin:18px 0 8px}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--ink)}
.switch input{position:absolute;opacity:0}
.switch span{width:40px;height:22px;border-radius:22px;background:#c9d2e0;position:relative;transition:background .2s;flex-shrink:0}
.switch span::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px #0003}
.switch input:checked+span{background:var(--primary)}
.switch input:checked+span::after{transform:translateX(-18px)}
.switch input:focus-visible+span{outline:2px solid var(--sky);outline-offset:2px}
.switch b{font-weight:500}
.rule-list{display:flex;flex-direction:column;gap:6px}
.rule{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13.500px}
.rule span{flex:1}
.rule button{display:grid;place-items:center;border:0;background:none;color:var(--faint);border-radius:6px;padding:3px}
.rule button:hover{background:var(--danger-50);color:var(--danger)}
.rule button svg{width:14px;height:14px}
.rule-list .empty,.example-list .empty{color:var(--faint);font-size:13px;padding:4px 2px}
.inline-form{display:flex;gap:8px;margin-top:8px}
.inline-form input{flex:1}
.inline-form button{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:0 16px;color:var(--primary-600)}
.example{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13px;margin-bottom:6px}
.example del{display:block;color:var(--faint);text-decoration-color:#c0413a80}
.example ins{display:block;color:var(--ink);text-decoration:none;margin-top:3px}
.dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.quiet-button.danger{color:var(--danger)}
#adminDialog{width:min(96vw,1060px);max-height:90vh;overflow:auto}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:4px 0 16px}
.tabs button{border:0;background:none;padding:9px 16px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;font-size:14px}
.tabs button.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500}
.user-form{display:grid;grid-template-columns:1.300fr 1fr 1fr auto auto;gap:8px}
.log-tools{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.log-tools a{margin-inline-start:auto;text-decoration:none}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;max-height:52vh}
table.grid{width:100%;border-collapse:collapse;font-size:13px}
table.grid th{position:sticky;top:0;background:var(--surface);text-align:right;font-weight:500;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.grid td{padding:9px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.grid tr:last-child td{border-bottom:0}
table.grid td.ltr{direction:ltr;text-align:right;font-size:12.500px;color:var(--muted)}
table.grid td.detail{color:var(--muted);max-width:420px;overflow-wrap:anywhere}
table.grid .row-actions{display:flex;gap:6px;justify-content:flex-end}
table.grid .row-actions button{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:3px 10px;font-size:12px;color:var(--text);white-space:nowrap}
table.grid .row-actions button:hover{border-color:var(--primary);color:var(--primary-600)}
#moreLogs{margin-top:10px}
@media(max-width:760px){.user-form{grid-template-columns:1fr 1fr}}

/* ───────── In-platform deck view & image library ───────── */
.hero{position:relative;background:#081527;border-top:1px solid var(--line-soft)}
.hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;cursor:zoom-in}
.hero-actions{position:absolute;inset-inline-start:16px;bottom:16px;display:flex;gap:8px}
.hero-actions button{display:inline-flex;align-items:center;gap:8px;border:1px solid #ffffff40;background:#08152799;backdrop-filter:blur(6px);color:#fff;border-radius:11px;padding:9px 16px;font-size:13.500px}
.hero-actions button:hover{background:#081527dd}
.hero-actions .hero-primary{background:var(--primary);border-color:var(--primary);font-weight:500;box-shadow:0 6px 18px #1f57c966}
.hero-actions .hero-primary:hover{background:var(--primary-600)}
.hero-actions svg{width:16px;height:16px}
.viewer-tools{display:flex;gap:4px;align-items:center}
#viewer.presenting{width:100vw;max-width:100vw;height:100vh;max-height:100vh;border-radius:0;padding:0;background:#000;display:grid;place-items:center}
#viewer.presenting .viewer-bar,#viewer.presenting .viewer-nav{display:none}
#viewer.presenting #viewerImage{max-height:100vh;height:100vh;border-radius:0;cursor:pointer}
#libraryDialog{width:min(96vw,1080px);max-height:90vh;overflow:auto}
.library-upload{display:grid;grid-template-columns:150px 1fr 1.400fr auto auto;gap:8px;margin-bottom:6px}
.library-upload input,.library-upload select{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--surface);font-size:13.500px;min-width:0}
.library-upload input[type=file]{padding:6px}
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:8px}
.library-grid .empty{color:var(--faint);font-size:13.500px;padding:18px 4px}
.library-card{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.library-card:hover{box-shadow:var(--shadow);border-color:#b9cdf2}
.library-thumb{display:block;width:100%;padding:0;border:0;background:#081527}
.library-thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.library-meta{padding:8px 11px 10px}
.library-meta strong{display:block;font-size:13.500px;color:var(--ink);font-weight:500}
.library-meta small{display:block;font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.library-delete{position:absolute;top:8px;inset-inline-start:8px;display:grid;place-items:center;border:0;border-radius:8px;background:#081527b3;color:#fff;padding:5px}
.library-delete:hover{background:var(--danger)}
.library-delete svg{width:15px;height:15px}
@media(max-width:760px){.library-upload{grid-template-columns:1fr 1fr}.hero-actions{inset-inline-start:10px;bottom:10px}.hero-actions button{padding:7px 11px;font-size:12.500px}}