/* ============================================================
Taiwin OS — Giao diện Windows 11 (Fluent Design)
============================================================ */
:root{
--accent:#0067c0;
--accent2:#1a78cf;
--accent-soft:rgba(0,103,192,.12);
--glass:rgba(249,249,249,.84);
--glass-strong:rgba(252,252,252,.92);
--panel:rgba(246,247,249,.85);
--surface:#ffffff;
--hair:rgba(20,22,40,.085);
--text:#1a1a1f;
--text-soft:#5a5d6b;
--text-mute:#8a8d99;
--sh-card:0 1px 3px rgba(20,22,50,.08),0 5px 14px -6px rgba(20,22,50,.16);
--sh-win:0 2px 8px rgba(16,18,42,.14),0 16px 40px -10px rgba(16,18,42,.32);
--sh-win-off:0 1px 4px rgba(16,18,42,.08),0 10px 26px -12px rgba(16,18,42,.2);
--sh-pop:0 8px 28px -6px rgba(16,18,42,.26),0 2px 6px rgba(16,18,42,.12);
--radius:8px;
--taskbar-h:74px;
--ease:cubic-bezier(.22,.9,.26,1);
}
[data-theme="dark"]{
--glass:rgba(43,43,48,.84);
--glass-strong:rgba(40,40,46,.94);
--panel:rgba(50,50,57,.82);
--surface:#2b2b30;
--hair:rgba(255,255,255,.09);
--text:#f2f3f7;
--text-soft:#b4b7c4;
--text-mute:#7e8290;
--accent:#4cc2ff;
--accent2:#69cbff;
--accent-soft:rgba(76,194,255,.16);
--sh-card:0 1px 3px rgba(0,0,0,.34),0 8px 20px -8px rgba(0,0,0,.5);
--sh-win:0 2px 10px rgba(0,0,0,.42),0 22px 48px -12px rgba(0,0,0,.62);
--sh-win-off:0 1px 4px rgba(0,0,0,.3),0 12px 30px -12px rgba(0,0,0,.45);
--sh-pop:0 10px 30px -6px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.4);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
font-family:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,
Roboto,"Helvetica Neue",Arial,sans-serif;
color:var(--text);
overflow:hidden;
user-select:none;
-webkit-font-smoothing:antialiased;
background:#0a0a14;
}
.hidden{ display:none !important; }
button,input,textarea,select{ font-family:inherit; }
svg{ display:block; }
.t-ico{ filter:drop-shadow(0 3px 6px rgba(16,18,45,.3)); }
.l-ico{ flex:0 0 auto; }
/* vùng soạn thảo PHẢI cho phép chọn/đặt con trỏ (body đặt user-select:none) */
input,textarea,select,[contenteditable="true"],
.word-page,.note-area,.txt-area,.uv-host,.docx-host{
-webkit-user-select:text; user-select:text;
}
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-thumb{ background:rgba(130,134,150,.5); border-radius:8px;
border:3px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(130,134,150,.75); background-clip:padding-box; }
::-webkit-scrollbar-track{ background:transparent; }
/* ============================ BOOT ============================ */
#boot-screen{
position:fixed; inset:0; z-index:9000;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
background:#16161f;
transition:opacity .55s ease;
}
.boot-logo{ animation:bootfade 1s ease; }
.boot-logo rect{ fill:#4cc2ff; }
@keyframes bootfade{ from{opacity:0} to{opacity:1} }
.boot-spinner{
width:34px; height:34px; border-radius:50%;
border:3px solid rgba(255,255,255,.16);
border-top-color:#fff;
animation:spin .85s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.boot-tip{ position:absolute; bottom:64px; color:rgba(255,255,255,.4); font-size:12.5px; }
/* ========================= LOCK SCREEN ========================= */
#lock-screen{
position:fixed; inset:0; z-index:8000;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
background-size:cover; background-position:center;
}
#lock-screen::before{ content:""; position:absolute; inset:0;
background:linear-gradient(180deg,rgba(8,8,18,.28),rgba(8,8,18,.55)); }
.lock-clock{ position:relative; color:#fff; font-size:108px; font-weight:600;
letter-spacing:-3px; text-shadow:0 6px 40px rgba(0,0,0,.5); }
.lock-date{ position:relative; color:rgba(255,255,255,.9); font-size:22px; margin-bottom:70px; }
.lock-user{ position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; }
.lock-avatar{
width:96px; height:96px; border-radius:50%;
background:linear-gradient(135deg,var(--accent),var(--accent2));
display:flex; align-items:center; justify-content:center;
color:#fff; font-size:42px; font-weight:600;
box-shadow:0 14px 40px rgba(0,0,0,.5),inset 0 2px 6px rgba(255,255,255,.35);
}
.lock-name{ color:#fff; font-size:20px; font-weight:500; }
.lock-btn{
margin-top:8px; padding:9px 40px; border:1px solid rgba(255,255,255,.5);
border-radius:5px; cursor:pointer;
background:rgba(255,255,255,.16); color:#fff; font-size:14px; font-weight:500;
backdrop-filter:blur(8px); transition:background .14s;
}
.lock-btn:hover{ background:rgba(255,255,255,.3); }
.lock-hint{ color:rgba(255,255,255,.55); font-size:12px; margin-top:6px; }
/* ============================ DESKTOP ============================ */
#desktop{
position:fixed; inset:0; overflow:hidden;
background-size:cover; background-position:center;
transition:opacity .45s ease;
}
#scene-fx{ position:absolute; inset:-60px; z-index:0; pointer-events:none;
transition:transform .25s cubic-bezier(.2,.7,.3,1); will-change:transform; }
.orb{ position:absolute; border-radius:50%; filter:blur(80px); }
.orb-1{ width:480px; height:480px; top:-130px; left:-90px;
background:rgba(255,255,255,.30); animation:drift1 30s ease-in-out infinite; }
.orb-2{ width:430px; height:430px; bottom:-140px; right:-70px;
background:rgba(120,200,255,.34); animation:drift2 36s ease-in-out infinite; }
.orb-3{ width:300px; height:300px; top:42%; left:54%;
background:rgba(180,220,255,.22); animation:drift1 42s ease-in-out infinite reverse; }
@keyframes drift1{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(54px,38px)} }
@keyframes drift2{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-46px,-40px)} }
#scene-grid{ position:absolute; inset:0;
background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
background-size:48px 48px;
-webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 58%,#000,transparent);
mask-image:radial-gradient(ellipse 78% 68% at 50% 58%,#000,transparent);
}
/* -------- Desktop icons -------- */
#desktop-icons{ position:absolute; inset:0 0 var(--taskbar-h) 0; z-index:2; }
.desk-icon{
position:absolute; width:90px; padding:8px 4px 6px;
display:flex; flex-direction:column; align-items:center; gap:6px;
border-radius:5px; cursor:default;
transition:background .1s;
}
.desk-icon:hover{ background:rgba(255,255,255,.14); outline:1px solid rgba(255,255,255,.16); }
.desk-icon:active{ background:rgba(255,255,255,.08); }
.desk-icon.selected{ background:var(--accent-soft);
outline:1px solid rgba(120,180,240,.55); }
.desk-icon .ic-glyph svg,.desk-icon .ic-glyph img{
filter:drop-shadow(0 5px 9px rgba(8,10,30,.5)); }
.desk-icon .ic-label{
font-size:12px; color:#fff; text-align:center; max-width:86px;
text-shadow:0 1px 4px rgba(0,0,0,.85); word-break:break-word; line-height:1.3;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
padding:1px 4px; border-radius:3px;
}
.ic-label.editing,.fi-label.editing,.lr-label.editing{
background:#fff !important; color:#111 !important; text-shadow:none;
outline:2px solid var(--accent); -webkit-line-clamp:unset; }
#rubber-band{
position:absolute; z-index:10;
background:rgba(0,103,192,.22);
border:1px solid rgba(0,103,192,.7);
border-radius:1px; pointer-events:none;
}
/* ============================ WINDOWS ============================ */
#windows-layer{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.window{
position:absolute; pointer-events:auto;
min-width:340px; min-height:220px;
display:flex; flex-direction:column;
background:var(--glass-strong);
backdrop-filter:blur(40px) saturate(150%);
-webkit-backdrop-filter:blur(40px) saturate(150%);
border:1px solid rgba(255,255,255,.14);
border-radius:var(--radius);
box-shadow:var(--sh-win), 0 0 0 1px rgba(0,0,0,.32);
overflow:hidden;
transform-origin:center 60%;
transition:transform .4s var(--ease),box-shadow .25s ease,opacity .18s ease;
animation:winpop .28s var(--ease);
}
@keyframes winpop{
from{ opacity:0; transform:perspective(2200px) translateY(26px) scale(.96); }
to{ opacity:1; transform:perspective(2200px) translateY(0) scale(1); }
}
.window.dragging{ transition:transform .1s ease-out,box-shadow .25s ease; }
.window.closing{ animation:winclose .16s var(--ease) forwards; }
@keyframes winclose{ to{ opacity:0; transform:scale(.96) translateY(12px); } }
.window.minimizing{ animation:winmin .26s var(--ease) forwards; }
@keyframes winmin{ to{ opacity:0; transform:translateY(60vh) scale(.4); } }
.window.maximized{ border-radius:0; }
.window.snapping{ transition:left .18s var(--ease),top .18s var(--ease),
width .18s var(--ease),height .18s var(--ease),transform .4s var(--ease),box-shadow .25s; }
.window.inactive{ box-shadow:var(--sh-win-off), 0 0 0 1px rgba(0,0,0,.22); }
.win-titlebar{
height:40px; flex:0 0 40px;
display:flex; align-items:stretch; cursor:default;
background:transparent;
border-bottom:1px solid var(--hair);
}
/* thân cửa sổ — luôn lấp đầy không gian còn lại của cửa sổ */
.win-body{ flex:1 1 auto; min-height:0; position:relative; display:flex; flex-direction:column; overflow:hidden; }
.win-title{
flex:1; display:flex; align-items:center; gap:9px;
padding:0 10px 0 14px; min-width:0;
font-size:12.5px; font-weight:600; color:var(--text);
}
.wt-ico{ display:flex; flex:0 0 auto; }
.wt-ico svg{ filter:drop-shadow(0 1px 2px rgba(16,18,45,.28)); }
.wt-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.window.inactive .win-title{ color:var(--text-soft); }
.win-controls{ display:flex; flex:0 0 auto; }
.wc{
width:46px; border:none; background:transparent; cursor:default;
display:flex; align-items:center; justify-content:center;
color:var(--text); transition:background .12s,color .12s;
}
.wc svg{ width:11px; height:11px; stroke:currentColor; stroke-width:1.3; fill:none; }
.wc-min{ color:#c09a20; }
.wc-max{ color:#2e9e47; }
.wc-close{ color:#c42b1c; }
.wc:hover{ background:rgba(130,134,150,.18); }
.wc-min:hover{ background:#f5eab3; color:#8a6d00; }
.wc-max:hover{ background:#b6e6c3; color:#15652a; }
.wc-close:hover{ background:#c42b1c; color:#fff; }
.window.inactive .wc-min{ color:#d4b94a; }
.window.inactive .wc-max{ color:#5cb872; }
.window.inactive .wc-close{ color:#e06b5e; }
.rz{ position:absolute; z-index:6; }
.rz-n{ top:0; left:0; right:0; height:4px; cursor:ns-resize; }
.rz-s{ bottom:0; left:0; right:0; height:4px; cursor:ns-resize; }
.rz-e{ right:0; top:0; bottom:0; width:4px; cursor:ew-resize; }
.rz-w{ left:0; top:0; bottom:0; width:4px; cursor:ew-resize; }
.rz-ne{ top:0; right:0; width:12px; height:12px; cursor:nesw-resize; }
.rz-nw{ top:0; left:0; width:12px; height:12px; cursor:nwse-resize; }
.rz-se{ bottom:0; right:0; width:12px; height:12px; cursor:nwse-resize; }
.rz-sw{ bottom:0; left:0; width:12px; height:12px; cursor:nesw-resize; }
#snap-preview{
position:absolute; z-index:3999; pointer-events:none;
background:rgba(0,103,192,.18);
border:1px solid rgba(0,103,192,.6);
border-radius:8px;
box-shadow:0 10px 36px rgba(0,103,192,.3);
transition:all .13s var(--ease);
}
/* ===================== TASKBAR (thanh nổi kiểu Figma) ===================== */
#taskbar{
position:absolute; left:0; right:0; bottom:12px; z-index:4000;
display:flex; justify-content:center; pointer-events:none;
}
.tbar{
pointer-events:auto;
display:flex; align-items:center; gap:3px;
height:50px; padding:0 8px; max-width:94vw;
background:var(--glass);
backdrop-filter:blur(44px) saturate(165%);
-webkit-backdrop-filter:blur(44px) saturate(165%);
border:1px solid rgba(255,255,255,.5);
border-radius:16px;
box-shadow:0 2px 8px rgba(16,18,42,.12),
0 16px 42px -12px rgba(16,18,42,.42),
inset 0 1px 0 rgba(255,255,255,.55);
}
[data-theme="dark"] .tbar{ border-color:rgba(255,255,255,.08);
box-shadow:0 2px 8px rgba(0,0,0,.4),0 18px 44px -12px rgba(0,0,0,.6),
inset 0 1px 0 rgba(255,255,255,.07); }
.tb-div{ width:1px; height:26px; background:var(--hair); margin:0 5px; flex:0 0 auto; }
#tb-apps{ display:flex; align-items:center; gap:3px; }
.tb-item,.tb-app{
width:40px; height:40px; border:none; border-radius:10px; cursor:default;
background:transparent; color:var(--text);
display:flex; align-items:center; justify-content:center;
position:relative; transition:background .13s var(--ease),transform .13s var(--ease);
}
.tb-item:hover,.tb-app:hover{ background:rgba(130,134,150,.2); }
.tb-item:active,.tb-app:active{ transform:scale(.92); }
.tb-start svg rect{ fill:var(--accent); transition:fill .12s; }
.tb-start:hover svg rect{ fill:var(--accent2); }
.tb-search::before{
content:""; width:18px; height:18px; display:block; background:currentColor;
-webkit-mask:no-repeat center/contain url("data:image/svg+xml;utf8,");
mask:no-repeat center/contain url("data:image/svg+xml;utf8,");
}
.tb-app .ta-glyph{ display:flex; }
.tb-app::after{
content:""; position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
width:0; height:3px; border-radius:2px; background:transparent;
transition:width .16s var(--ease),background .16s;
}
.tb-app.running::after{ width:6px; background:var(--text-mute); }
.tb-app.active::after{ width:18px; background:var(--accent); }
.tb-tray{ display:flex; align-items:center; gap:1px; }
.tray-btn{
width:34px; height:36px; border:none; border-radius:9px; cursor:default;
background:transparent; color:var(--text-soft);
display:flex; align-items:center; justify-content:center; transition:background .12s;
}
.tray-btn:hover{ background:rgba(130,134,150,.2); }
.tb-clock{
height:40px; padding:0 10px; border:none; border-radius:10px; cursor:default;
background:transparent; color:var(--text);
display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
gap:1px; font-variant-numeric:tabular-nums; transition:background .12s;
}
.tb-clock:hover{ background:rgba(130,134,150,.2); }
.tc-time{ font-size:12.5px; font-weight:500; }
.tc-date{ font-size:10.5px; color:var(--text-soft); }
/* ========================= START MENU ========================= */
#start-menu{
position:absolute; bottom:calc(var(--taskbar-h) + 12px); left:50%;
transform:translateX(-50%);
width:640px; max-width:94vw; height:660px; max-height:78vh; z-index:4500;
background:var(--glass); backdrop-filter:blur(50px) saturate(160%);
-webkit-backdrop-filter:blur(50px) saturate(160%);
border:1px solid rgba(255,255,255,.14);
border-radius:12px;
box-shadow:var(--sh-pop);
display:flex; flex-direction:column;
padding:28px 36px 0;
animation:startpop .2s var(--ease);
}
@keyframes startpop{
from{ opacity:0; transform:translateX(-50%) translateY(16px) scale(.98); }
to{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}
.start-search{ flex:0 0 auto; margin-bottom:22px; position:relative; }
.start-search input{
width:100%; height:38px; padding:0 16px 0 40px;
border:1px solid var(--hair); border-radius:19px;
background:var(--surface); color:var(--text); font-size:13.5px; outline:none;
}
.start-search input:focus{ border-color:var(--accent); }
.start-search::before{
content:""; position:absolute; left:15px; top:11px; width:16px; height:16px;
background:var(--text-mute);
-webkit-mask:no-repeat center/contain url("data:image/svg+xml;utf8,");
mask:no-repeat center/contain url("data:image/svg+xml;utf8,");
}
.start-body{ flex:1; overflow:auto; }
.start-sec-h{ font-size:13px; font-weight:600; margin-bottom:14px; }
.start-grid{
display:grid; grid-template-columns:repeat(6,1fr); gap:6px 4px; margin-bottom:24px;
}
.start-app{
display:flex; flex-direction:column; align-items:center; gap:8px;
padding:14px 4px 12px; border-radius:7px; cursor:default;
transition:background .1s;
}
.start-app:hover{ background:rgba(130,134,150,.18); }
.start-app .sa-glyph svg{ filter:drop-shadow(0 4px 8px rgba(16,18,45,.3)); }
.start-app .sa-name{ font-size:11.5px; text-align:center; line-height:1.3;
max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.start-reco{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.start-reco-item{
display:flex; align-items:center; gap:11px; padding:9px 11px;
border-radius:7px; cursor:default; transition:background .1s;
}
.start-reco-item:hover{ background:rgba(130,134,150,.18); }
.start-reco-item .sr-meta{ overflow:hidden; }
.start-reco-item .sr-name{ font-size:12.5px; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; }
.start-reco-item .sr-sub{ font-size:11px; color:var(--text-mute); }
.start-empty{ font-size:12.5px; color:var(--text-mute); padding:8px 2px; }
.start-foot{
flex:0 0 auto; height:62px; margin:0 -36px; padding:0 30px;
border-top:1px solid var(--hair);
display:flex; align-items:center; justify-content:space-between;
}
.start-user{ display:flex; align-items:center; gap:11px; padding:7px 12px;
border-radius:7px; cursor:default; }
.start-user:hover{ background:rgba(130,134,150,.18); }
.start-user .su-av{
width:32px; height:32px; border-radius:50%;
background:linear-gradient(135deg,var(--accent),var(--accent2));
color:#fff; display:flex; align-items:center; justify-content:center;
font-size:15px; font-weight:600;
}
.start-user .su-name{ font-size:13px; font-weight:500; }
.start-power{
width:38px; height:38px; border:none; border-radius:7px; cursor:default;
background:transparent; color:var(--text);
display:flex; align-items:center; justify-content:center; transition:background .1s;
}
.start-power:hover{ background:rgba(130,134,150,.18); }
/* ============================ MENUS ============================ */
#context-menu{
position:absolute; z-index:9500; min-width:220px;
background:var(--glass-strong); backdrop-filter:blur(40px) saturate(150%);
-webkit-backdrop-filter:blur(40px) saturate(150%);
border:1px solid var(--hair);
border-radius:8px; padding:5px;
box-shadow:var(--sh-pop);
font-size:13px; color:var(--text);
animation:menupop .12s var(--ease);
}
@keyframes menupop{ from{opacity:0; transform:translateY(-6px) scale(.98)} to{opacity:1; transform:none} }
.menu-row{
display:flex; align-items:center; gap:12px;
padding:8px 12px; border-radius:5px; cursor:default;
}
.menu-row:hover{ background:rgba(130,134,150,.2); }
.menu-row.disabled{ opacity:.4; pointer-events:none; }
.menu-row .mr-ico{ width:18px; height:18px; display:flex; align-items:center;
justify-content:center; color:var(--text-soft); }
.menu-row.danger{ color:#d13438; }
.menu-row.danger .mr-ico{ color:#d13438; }
.menu-row.danger:hover{ background:rgba(209,52,56,.14); }
.menu-row .mr-key{ margin-left:auto; opacity:.5; font-size:11px; }
.menu-sep{ height:1px; background:var(--hair); margin:5px 10px; }
/* ============================ TOAST ============================ */
#toast-host{
position:absolute; bottom:calc(var(--taskbar-h) + 14px); right:16px; z-index:7000;
display:flex; flex-direction:column; gap:9px; align-items:flex-end;
}
.toast{
background:var(--glass-strong); color:var(--text); padding:12px 16px;
border:1px solid var(--hair); border-radius:9px; font-size:13px;
backdrop-filter:blur(40px) saturate(150%);
box-shadow:var(--sh-pop);
animation:toastin .22s var(--ease); display:flex; gap:11px; align-items:center;
max-width:330px;
}
.toast .ti-ico{ display:flex; flex:0 0 auto; }
@keyframes toastin{ from{opacity:0; transform:translateX(40px)} to{opacity:1} }
.toast.out{ animation:toastout .24s var(--ease) forwards; }
@keyframes toastout{ to{opacity:0; transform:translateX(40px)} }
/* ============================ MODAL ============================ */
#modal-host{
position:absolute; inset:0; z-index:7500;
display:flex; align-items:center; justify-content:center;
background:rgba(10,10,20,.4);
animation:toastin .14s ease;
}
.modal{
width:400px; background:var(--glass-strong);
backdrop-filter:blur(40px) saturate(150%);
border:1px solid var(--hair);
border-radius:10px; box-shadow:var(--sh-pop);
animation:winpop .18s var(--ease); color:var(--text); overflow:hidden;
}
.modal h3{ font-size:15px; padding:18px 22px 0; }
.modal p{ font-size:13px; color:var(--text-soft); padding:8px 22px 0; line-height:1.55; }
.modal input,.modal select{
margin:14px 22px 0; width:calc(100% - 44px);
padding:9px 12px; border-radius:5px;
border:1px solid var(--hair); background:var(--surface);
color:var(--text); font-size:14px; outline:none;
}
.modal input:focus{ border-color:var(--accent); }
.modal-actions{ display:flex; gap:9px; justify-content:flex-end;
padding:18px 22px; margin-top:16px; background:var(--panel);
border-top:1px solid var(--hair); }
.btn{
padding:8px 18px; border-radius:5px; border:1px solid var(--hair);
background:var(--surface); color:var(--text); font-size:13px; font-weight:500;
cursor:pointer; transition:filter .12s,background .12s;
}
.btn:hover{ background:var(--panel); }
.btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover{ filter:brightness(1.1); background:var(--accent); }
.btn-danger{ background:#c42b1c; color:#fff; border-color:#c42b1c; }
.btn-danger:hover{ filter:brightness(1.1); background:#c42b1c; }
/* ====================================================================
APP — File Explorer
==================================================================== */
.exp{ display:flex; width:100%; height:100%; }
.exp-side{
width:200px; flex:0 0 200px; padding:10px 9px;
border-right:1px solid var(--hair); background:var(--panel);
overflow:auto; display:flex; flex-direction:column; gap:2px;
}
.exp-side-h{ font-size:11px; font-weight:600; color:var(--text-mute);
padding:9px 9px 5px; }
.exp-side-item{
display:flex; align-items:center; gap:11px; padding:7px 10px;
border-radius:5px; font-size:13px; cursor:default; transition:background .1s;
}
.exp-side-item .l-ico{ color:var(--accent); }
.exp-side-item:hover{ background:rgba(130,134,150,.16); }
.exp-side-item.active{ background:var(--accent-soft); }
.exp-side-item.active::before{ content:""; position:absolute; }
/* Tree view */
.tree-node{ position:relative; }
.tree-children{
position:relative;
margin-left:11px;
padding-left:8px;
border-left:1.5px solid var(--accent);
}
.tree-children .tree-node{ position:relative; }
.tree-children .tree-node::before{
content:""; position:absolute; left:-8px; top:13px;
width:8px; height:0; border-top:1.5px solid var(--accent);
}
.tree-children .tree-node:last-child::after{
content:""; position:absolute; left:-9.5px; top:13px;
width:2px; height:calc(100% - 13px);
background:var(--panel);
}
.tree-row{ display:flex; align-items:center; gap:4px; cursor:default; padding:1px 4px; }
.tree-row .tree-arrow{
width:16px; height:16px; display:flex; align-items:center; justify-content:center;
flex-shrink:0; transition:transform .15s ease; cursor:pointer; border-radius:3px;
color:var(--text-mute);
}
.tree-row .tree-arrow:hover{ background:rgba(130,134,150,.18); }
.tree-row .tree-arrow.open{ transform:rotate(90deg); }
.tree-row .tree-arrow.empty{ visibility:hidden; }
.tree-row .tree-ico{ flex-shrink:0; display:flex; align-items:center; }
.tree-row .tree-ico .l-ico{ color:var(--accent); }
.tree-row .tree-ico.org-ico .l-ico{ color:#9b59b6; }
.tree-row .tree-label{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Drop zone overlay */
.drop-zone-active{ position:relative; }
.drop-zone-active::after{
content:""; position:absolute; inset:0; z-index:90;
border:2.5px dashed var(--accent); border-radius:10px;
background:rgba(0,103,192,.08);
pointer-events:none;
animation:dropPulse .8s ease infinite alternate;
}
.drop-zone-active .drop-hint{
position:absolute; inset:0; z-index:91;
display:flex; align-items:center; justify-content:center;
pointer-events:none;
}
.drop-hint-box{
background:var(--glass-strong); border-radius:12px; padding:18px 32px;
box-shadow:var(--sh-card); text-align:center;
font-size:13px; color:var(--text); pointer-events:none;
}
.drop-hint-box .dh-ico{ margin-bottom:6px; opacity:.6; }
@keyframes dropPulse{ from{opacity:.6} to{opacity:1} }
.drag-ghost{
position:fixed; top:-100px; left:-100px;
padding:5px 12px; border-radius:6px;
background:var(--accent); color:#fff; font-size:12px;
white-space:nowrap; pointer-events:none; z-index:99999;
}
.drop-hover{ background:rgba(0,103,192,.15) !important; outline:2px solid var(--accent); outline-offset:-2px; border-radius:5px; }
.fs-item[draggable="true"]{ cursor:grab; }
.fs-item[draggable="true"]:active{ cursor:grabbing; }
.desk-icon[draggable="true"]{ cursor:grab; }
.desk-icon[draggable="true"]:active{ cursor:grabbing; }
.desk-icon[draggable="true"] .ic-glyph,
.desk-icon[draggable="true"] .ic-glyph *,
.desk-icon[draggable="true"] .ic-label{ -webkit-user-drag:none; user-select:none; }
/* ============================ VIEWER ============================ */
.vw-toolbar{ display:flex; align-items:center; justify-content:space-between; padding:4px 10px; border-bottom:1px solid var(--hair); flex:0 0 auto; }
.vw-tb-left{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-soft); }
.vw-tb-right{ display:flex; align-items:center; gap:4px; }
.vw-btn{ background:none; border:1px solid var(--hair); border-radius:5px; padding:4px 8px; cursor:pointer; color:var(--text); font-size:12px; display:flex; align-items:center; gap:4px; }
.vw-btn:hover{ background:var(--hover); }
.vw-content{ flex:1 1 auto; min-height:0; position:relative; overflow:auto; }
.vw-status{ display:flex; align-items:center; justify-content:center; gap:8px; height:100%; font-size:13px; color:var(--text-soft); }
.vw-err{ color:var(--danger,#c00); }
.vw-spinner{ width:20px; height:20px; border:2px solid var(--hair); border-top-color:var(--accent); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin{ to{transform:rotate(360deg)} }
.vw-img{ display:flex; align-items:center; justify-content:center; background:var(--bg-pattern,#1a1a1a); }
.vw-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.vw-media{ background:#000; }
.vw-audio{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; }
.vw-audio-glyph{ opacity:.5; }
.vw-audio-name{ font-size:13px; color:var(--text); }
.vw-pdf{ background:#525659; }
.vw-text{ display:flex; flex-direction:column; }
.vw-textarea{ flex:1; width:100%; resize:none; border:none; padding:12px; font-family:'Cascadia Code','Fira Code','Consolas',monospace; font-size:13px; line-height:1.6; background:#fff; color:#1a1a1f; outline:none; }
.vw-html{ background:#fff; }
.vw-office{ position:relative; }
.vw-fallback{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:10px; padding:30px; text-align:center; }
.vw-fb-icon{ opacity:.6; }
.vw-fb-name{ font-size:14px; font-weight:600; color:var(--text); word-break:break-all; }
.vw-fb-meta{ display:flex; gap:12px; font-size:12px; color:var(--text-soft); }
.vw-fb-dl{ margin-top:12px; display:flex; align-items:center; gap:6px; padding:8px 20px; border:none; border-radius:6px; background:var(--accent); color:#fff; font-size:13px; cursor:pointer; }
.vw-fb-dl:hover{ filter:brightness(1.1); }
/* Auto-save status */
.vw-save-status{ font-size:11px; padding:2px 7px; border-radius:4px; transition:all .2s; }
.vw-saved{ color:var(--success,#2ecc71); }
.vw-saving{ color:var(--accent); animation:vwPulse 1s ease infinite; }
.vw-unsaved{ color:var(--warning,#f39c12); }
.vw-save-err{ color:var(--danger,#e74c3c); }
@keyframes vwPulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
/* --- Fullscreen viewer — expand .window to cover viewport --- */
.window.vw-fs-active{
border-radius:0 !important;
background:rgba(0,0,0,.96) !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
border-color:transparent !important;
box-shadow:none !important;
animation:none !important;
transition:none !important;
}
.window.vw-fs-active .win-titlebar{ display:none; }
.window.vw-fs-active .vw-toolbar{ display:none; }
.window.vw-fs-active .rz{ display:none !important; }
.window.vw-fs-active .win-body{ background:transparent; }
/* Text/code/html viewers need readable background in fullscreen */
.window.vw-fs-active .vw-text,
.window.vw-fs-active .vw-html{
background:#fff !important; border-radius:8px; margin:12px; overflow:auto;
}
.window.vw-fs-active .vw-textarea{
background:#fff !important; color:#1a1a1f !important;
}
/* Office/PDF viewer fullscreen — white bg */
.window.vw-fs-active .vw-office,
.window.vw-fs-active .vw-pdf{
background:#fff !important; border-radius:0; margin:0;
}
/* --- Floating FAB toolbar --- */
.vw-fs-fab{
position:absolute; bottom:24px; right:24px; z-index:10;
user-select:none;
}
.vw-fs-fab-dragging{ cursor:grabbing; }
.vw-fs-fab-btns{
display:flex; align-items:center; gap:2px;
background:rgba(0,0,0,.55); backdrop-filter:blur(20px) saturate(1.6);
-webkit-backdrop-filter:blur(20px) saturate(1.6);
border:1px solid rgba(255,255,255,.1);
border-radius:10px; padding:4px 5px;
box-shadow:0 4px 20px rgba(0,0,0,.3);
transition:all .25s cubic-bezier(.4,0,.2,1);
}
.vw-fs-fab:hover .vw-fs-fab-btns{
background:rgba(0,0,0,.65);
box-shadow:0 6px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.vw-fs-fab-collapsed .vw-fs-fab-btns{
padding:3px;
border-radius:50%;
gap:0;
}
.vw-fs-fab-collapsed .vw-fs-more-wrap,
.vw-fs-fab-collapsed .vw-fs-grip{
width:0; overflow:hidden; opacity:0; padding:0; margin:0;
transition:all .2s ease;
}
.vw-fs-fab-collapsed .vw-fs-fb[data-act="close"]{
border-radius:50%;
}
/* FAB buttons */
.vw-fs-fb{
display:flex; align-items:center; justify-content:center;
width:30px; height:30px; border:none; border-radius:7px;
background:transparent; color:rgba(255,255,255,.75);
cursor:pointer; transition:all .15s ease;
flex:0 0 auto;
}
.vw-fs-fb:hover{
background:rgba(255,255,255,.15); color:#fff;
}
.vw-fs-fb[data-act="close"]:hover{
background:rgba(232,72,85,.7); color:#fff;
}
/* Three-dot menu */
.vw-fs-more-wrap{ position:relative; }
.vw-fs-menu{
display:none; position:absolute; bottom:calc(100% + 8px); right:0;
min-width:170px;
background:rgba(0,0,0,.6); backdrop-filter:blur(20px) saturate(1.6);
-webkit-backdrop-filter:blur(20px) saturate(1.6);
border:1px solid rgba(255,255,255,.1);
border-radius:9px; padding:5px;
box-shadow:0 8px 32px rgba(0,0,0,.5);
animation:vwMenuIn .15s ease;
}
@keyframes vwMenuIn{
from{opacity:0;transform:translateY(6px) scale(.96)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.vw-fs-more-wrap:hover .vw-fs-menu{
display:block;
}
.vw-fs-mi{
display:flex; align-items:center; gap:9px;
width:100%; padding:7px 11px; border:none; border-radius:6px;
background:transparent; color:rgba(255,255,255,.7);
font-size:12.5px; cursor:pointer; text-align:left;
transition:background .12s;
}
.vw-fs-mi:hover{
background:rgba(255,255,255,.1); color:rgba(255,255,255,.95);
}
.vw-fs-mi svg{ flex:0 0 auto; opacity:.65; }
.vw-fs-mi:hover svg{ opacity:.9; }
.vw-fs-menu-sep{ height:1px; background:rgba(255,255,255,.06); margin:4px 8px; }
/* Grip drag handle */
.vw-fs-grip{
display:flex; align-items:center; justify-content:center;
width:18px; height:30px; cursor:grab;
border-left:1px solid rgba(255,255,255,.06);
margin-left:2px; padding-left:4px;
border-radius:0 6px 6px 0;
transition:all .15s ease; flex:0 0 auto;
color:rgba(255,255,255,.4);
}
.vw-fs-grip:hover{ color:rgba(255,255,255,.7); background:rgba(255,255,255,.1); }
.vw-fs-grip:active{ cursor:grabbing; }
.exp-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.exp-toolbar{
display:flex; align-items:center; gap:5px; padding:8px 11px;
border-bottom:1px solid var(--hair);
}
.exp-nav-btn{
width:32px; height:32px; border-radius:5px; border:none; cursor:default;
background:transparent; color:var(--text-soft);
display:flex; align-items:center; justify-content:center; transition:.1s;
}
.exp-nav-btn:hover{ background:rgba(130,134,150,.18); color:var(--text); }
.exp-nav-btn:disabled{ opacity:.3; background:transparent; }
.exp-nav-btn.active{ background:var(--accent-soft); color:var(--accent); }
.exp-crumbs{ flex:1; display:flex; align-items:center; gap:2px; font-size:12.5px;
overflow:hidden; }
.crumb{ padding:4px 8px; border-radius:5px; cursor:default; white-space:nowrap; }
.crumb:hover{ background:rgba(130,134,150,.18); }
.crumb-sep{ color:var(--text-mute); display:flex; }
.exp-view-toggle{ display:flex; gap:2px; }
.exp-content{ flex:1; overflow:auto; padding:12px; background:var(--surface); position:relative; }
.exp-rubber-band{
position:absolute; z-index:10;
background:rgba(0,103,192,.22);
border:1px solid rgba(0,103,192,.7);
border-radius:1px; pointer-events:none;
}
.exp-grid{ display:flex; flex-wrap:wrap; gap:4px; align-content:flex-start; }
.fs-item{
width:106px; padding:12px 4px 10px; border-radius:5px;
display:flex; flex-direction:column; align-items:center; gap:8px;
cursor:default; transition:background .1s;
}
.fs-item:hover{ background:rgba(130,134,150,.13); }
.fs-item.selected{ background:var(--accent-soft);
outline:1px solid rgba(120,180,240,.5); }
.fs-item .fi-glyph svg{ filter:drop-shadow(0 4px 8px rgba(16,18,45,.22)); }
.fs-item .fi-label{
font-size:12px; text-align:center; word-break:break-word; line-height:1.3;
max-width:98px; display:-webkit-box; -webkit-line-clamp:2;
-webkit-box-orient:vertical; overflow:hidden; padding:1px 3px; border-radius:3px;
}
.exp-list{ display:flex; flex-direction:column; }
.exp-list-head,.list-row{
display:grid; grid-template-columns:1fr 150px 120px 92px; gap:10px;
padding:7px 11px; font-size:12.5px; align-items:center;
}
.exp-list-head{ font-weight:600; color:var(--text-mute); border-bottom:1px solid var(--hair);
font-size:11.5px; }
.list-row{ border-radius:4px; cursor:default; }
.list-row:hover{ background:rgba(130,134,150,.13); }
.list-row.selected{ background:var(--accent-soft); }
.list-row .lr-name{ display:flex; align-items:center; gap:11px; overflow:hidden; }
.list-row .lr-name .lr-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exp-empty{
display:flex; flex-direction:column; align-items:center; justify-content:center;
height:100%; color:var(--text-mute); gap:10px; font-size:13px;
}
.exp-empty .ee-glyph{ opacity:.6; }
.exp-statusbar{
padding:6px 13px; font-size:11.5px; color:var(--text-mute);
border-top:1px solid var(--hair); display:flex; justify-content:space-between;
background:var(--panel);
}
/* ====================================================================
APP — Editors (Word / Notes / Text)
==================================================================== */
.editor{ display:flex; flex-direction:column; width:100%; height:100%;
background:var(--surface); }
.toolbar{
display:flex; align-items:center; gap:3px; flex-wrap:wrap;
padding:7px 9px; border-bottom:1px solid var(--hair); background:var(--panel);
}
.tb-btn{
min-width:31px; height:31px; padding:0 8px; border-radius:5px; border:none; cursor:default;
background:transparent; color:var(--text); font-size:13.5px;
display:flex; align-items:center; justify-content:center; transition:.1s;
}
.tb-btn:hover{ background:rgba(130,134,150,.2); }
.tb-btn.active{ background:var(--accent-soft); color:var(--accent); }
.tb-sep{ width:1px; height:22px; background:var(--hair); margin:0 5px; }
.tb-select,.tb-color{ height:30px; border-radius:5px; border:1px solid var(--hair);
background:var(--surface); color:var(--text); font-size:12.5px; padding:0 5px; cursor:pointer; }
.tb-color{ width:36px; padding:2px; }
.tb-spacer{ flex:1; }
.word-canvas{ flex:1; overflow:auto; background:rgba(130,134,150,.16); padding:26px 0; }
.word-page{
width:670px; min-height:880px; margin:0 auto;
background:#fff; color:#16181f; padding:66px 74px;
box-shadow:0 6px 26px rgba(0,0,0,.22);
font-size:15px; line-height:1.65; outline:none;
}
[data-theme="dark"] .word-page{ background:#f6f6f4; }
/* chế độ .docx — để docx-preview tự dựng trang, giữ đúng định dạng gốc */
.word-page.docx-mode{ width:auto; min-height:0; padding:0; background:transparent;
box-shadow:none; color:inherit; }
.word-page.docx-mode .docx-wrapper{ background:transparent; padding:0; }
.word-page.docx-mode .docx-wrapper > section.docx{
margin:0 auto 22px; box-shadow:0 6px 26px rgba(16,18,42,.28); }
.note-area{
flex:1; width:100%; border:none; outline:none; resize:none;
padding:20px 24px; font-size:14.5px; line-height:1.75;
background:transparent; color:var(--text);
}
.note-yellow{ background:linear-gradient(180deg,#fff8c9,#ffefa3); color:#3a3000; }
.txt-area{
flex:1; width:100%; border:none; outline:none; resize:none;
padding:16px 18px; font-family:"Cascadia Code",Consolas,"SF Mono",Menlo,monospace;
font-size:13.5px; line-height:1.65; background:transparent; color:var(--text);
}
.editor-status{
padding:5px 14px; font-size:11.5px; color:var(--text-mute);
border-top:1px solid var(--hair); display:flex; justify-content:space-between;
background:var(--panel);
}
/* ====================================================================
APP — Excel (Univer)
==================================================================== */
.uv-app{ display:flex; flex-direction:column; width:100%; height:100%; }
.uv-bar{ display:flex; align-items:center; gap:9px; flex:0 0 auto;
padding:7px 12px; border-bottom:1px solid var(--hair); background:var(--panel); }
.uv-bar .l-ico{ color:var(--accent); flex:0 0 auto; }
.uv-name{ font-size:13px; font-weight:600; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; }
.uv-status{ font-size:11.5px; color:var(--text-mute); white-space:nowrap; }
.uv-bar .btn{ display:flex; align-items:center; padding:6px 13px; font-size:12px; }
.uv-host{ flex:1; min-height:0; position:relative; overflow:auto; background:#fff; }
[data-theme="dark"] .uv-host{ background:#1c1e2c; }
.uv-state{ padding:50px 26px; text-align:center; color:var(--text-mute);
font-size:13px; line-height:1.8; }
.uv-state.err,.xls-state.err,.docx-state.err{ color:#d13438; }
.xls-tag{ font-size:10px; font-weight:600; color:#fff; flex:0 0 auto;
background:var(--accent); padding:3px 9px; border-radius:10px; }
/* ====================================================================
APP — Word thật (docx-preview) / Tệp MinIO
==================================================================== */
.docx-app{ display:flex; flex-direction:column; width:100%; height:100%; }
.docx-scroll{ flex:1; overflow:auto; background:rgba(130,134,150,.2); padding:22px 14px; }
.docx-host{ display:flex; flex-direction:column; align-items:center; min-height:100%; }
.docx-state{ padding:46px 26px; text-align:center; color:var(--text-mute);
font-size:13px; line-height:1.75; }
.docx-host .docx-wrapper{ background:transparent; padding:0; }
.docx-host .docx-wrapper > section.docx{
margin:0 auto 18px; box-shadow:0 8px 28px rgba(16,18,42,.28); }
.ic-glyph,.fi-glyph{ position:relative; line-height:0; display:inline-flex; }
.rbadge{
position:absolute; right:-4px; bottom:-4px;
width:19px; height:19px; border-radius:50%;
background:var(--accent);
display:flex; align-items:center; justify-content:center;
color:#fff; box-shadow:0 2px 6px rgba(14,16,40,.5);
border:1.5px solid #fff;
}
[data-theme="dark"] .rbadge{ border-color:#2b2b30; }
.rfile-bar{
display:flex; align-items:center; gap:9px; flex:0 0 auto;
padding:8px 13px; font-size:12px; color:var(--text-soft);
border-bottom:1px solid var(--hair); background:var(--panel);
}
.rfile-bar span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rfile-bar .l-ico{ color:var(--accent); flex:0 0 auto; }
.rfile-bar .btn{ padding:5px 11px; font-size:11.5px; display:flex; align-items:center; gap:5px; }
.img-host{ display:flex; flex-direction:column; width:100%; height:100%; }
.img-host .img-view{ flex:1; height:auto; }
.img-view{ display:flex; align-items:center; justify-content:center;
width:100%; height:100%; background:rgba(16,15,34,.4); overflow:auto; padding:16px; }
.img-view img{ max-width:100%; max-height:100%; object-fit:contain;
box-shadow:0 10px 34px rgba(0,0,0,.5); border-radius:4px; }
.img-view .img-empty{ color:rgba(255,255,255,.6); font-size:13px; text-align:center; line-height:1.7; }
.rfile{ display:flex; width:100%; height:100%; align-items:center;
justify-content:center; padding:26px; overflow:auto; }
.rfile-card{ display:flex; flex-direction:column; align-items:center;
text-align:center; gap:13px; max-width:450px; }
.rfile-ico svg{ filter:drop-shadow(0 12px 22px rgba(16,18,45,.4)); }
.rfile-card h2{ font-size:17px; word-break:break-word; }
.rfile-meta{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.rfile-meta span{ display:flex; align-items:center; gap:5px;
font-size:11.5px; color:var(--text-soft);
background:var(--panel); border:1px solid var(--hair);
padding:4px 10px; border-radius:20px; }
.rfile-actions{ display:flex; gap:10px; margin-top:2px; }
.rfile-actions .btn{ display:flex; align-items:center; }
.rfile-note{ font-size:12px; color:var(--text-soft); line-height:1.65;
background:var(--accent-soft); border-radius:7px; padding:12px 15px; }
.rfile-text{ width:100%; max-height:190px; overflow:auto; text-align:left;
font-family:Consolas,monospace; font-size:12px; line-height:1.55;
background:var(--panel); border:1px solid var(--hair); border-radius:7px;
padding:12px 14px; white-space:pre-wrap; word-break:break-word; color:var(--text); }
/* ====================================================================
APP — Settings / About / Calculator
==================================================================== */
.settings{ display:flex; width:100%; height:100%; background:var(--surface); }
.set-side{
width:190px; flex:0 0 190px; padding:12px 9px;
border-right:1px solid var(--hair); background:var(--panel);
display:flex; flex-direction:column; gap:3px;
}
.set-tab{
display:flex; align-items:center; gap:11px; padding:9px 11px;
border-radius:5px; font-size:13px; cursor:default; transition:.1s;
}
.set-tab .l-ico{ color:var(--text-soft); }
.set-tab:hover{ background:rgba(130,134,150,.16); }
.set-tab.active{ background:var(--accent-soft); color:var(--accent); }
.set-tab.active .l-ico{ color:var(--accent); }
.set-body{ flex:1; padding:24px 28px; overflow:auto; }
.set-body h2{ font-size:19px; margin-bottom:4px; }
.set-body .set-sub{ font-size:12.5px; color:var(--text-soft); margin-bottom:20px; }
.set-group{ margin-bottom:26px; }
.set-group-h{ font-size:11px; font-weight:600; color:var(--text-mute);
margin-bottom:11px; }
.wp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.wp-item{
height:68px; border-radius:7px; cursor:default;
background-size:cover; background-position:center;
border:2px solid transparent; transition:transform .12s; box-shadow:var(--sh-card);
}
.wp-item:hover{ transform:scale(1.05); }
.wp-item.active{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.set-row{
display:flex; align-items:center; justify-content:space-between;
padding:12px 0; border-bottom:1px solid var(--hair); font-size:13.5px;
}
.set-row:last-child{ border-bottom:none; }
.switch{ width:40px; height:21px; border-radius:11px; background:rgba(130,134,150,.4);
position:relative; cursor:pointer; transition:background .15s; flex:0 0 40px; }
.switch.on{ background:var(--accent); }
.switch::after{ content:""; position:absolute; top:4px; left:4px; width:13px; height:13px;
border-radius:50%; background:#fff; transition:left .15s var(--ease); }
.switch.on::after{ left:23px; }
/* Social config cards */
.soc-cards{ display:flex; flex-direction:column; gap:10px; }
.soc-card{ background:var(--panel); border:1px solid var(--hair); border-radius:8px; padding:14px 16px; }
.soc-card-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.soc-icon{ width:28px; height:28px; border-radius:6px; display:flex; align-items:center;
justify-content:center; color:#fff; font-size:13px; font-weight:600; flex:0 0 28px; }
.soc-label{ font-size:13.5px; font-weight:600; }
.soc-appid{ font-size:10.5px; color:var(--text-soft); background:var(--surface);
padding:2px 8px; border-radius:10px; font-family:monospace; }
.soc-badge{ font-size:10.5px; padding:2px 10px; border-radius:10px; margin-left:auto;
background:rgba(130,134,150,.15); color:var(--text-soft); white-space:nowrap; }
.soc-badge.on{ background:#e8f5e9; color:#2e7d32; }
.soc-section{ margin-bottom:10px; }
.soc-flabel{ display:block; font-size:11px; color:var(--text-soft); margin-bottom:3px; }
.soc-url-row{ display:flex; gap:6px; align-items:center; }
.soc-url{ flex:1; font-size:11.5px; font-family:monospace; padding:6px 8px; border:1px solid var(--hair);
border-radius:5px; background:var(--surface); color:var(--text-soft); outline:none;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.soc-url:focus{ border-color:var(--accent); }
.soc-copy{ padding:5px 8px; border:1px solid var(--hair); border-radius:5px;
background:var(--surface); color:var(--text-soft); cursor:default; display:flex;
align-items:center; justify-content:center; }
.soc-copy:hover{ border-color:var(--accent); color:var(--accent); }
.soc-fields{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.soc-field{ display:flex; flex-direction:column; }
.soc-finput{ font-size:12px; padding:6px 8px; border:1px solid var(--hair); border-radius:5px;
background:var(--surface); color:var(--text); outline:none; font-family:inherit; }
.soc-finput:focus{ border-color:var(--accent); }
.soc-finput::placeholder{ color:var(--text-soft); opacity:.6; }
.soc-field-routing .soc-finput{ border-color:var(--accent); border-style:dashed; }
.soc-route-tag{ font-size:9px; padding:1px 5px; border-radius:3px; background:var(--accent);
color:#fff; margin-left:4px; vertical-align:middle; letter-spacing:.3px; }
.soc-loading{ font-size:13px; color:var(--text-soft); padding:20px 0; text-align:center; }
.soc-error{ font-size:13px; color:#c62828; padding:16px; background:#fce4e4; border-radius:6px; }
/* Buttons */
.soc-btn{ font-size:11px; padding:4px 10px; border-radius:5px; border:1px solid var(--hair);
background:var(--surface); color:var(--text); cursor:default; font-family:inherit; white-space:nowrap; }
.soc-btn:hover{ border-color:var(--accent); color:var(--accent); }
.soc-btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.soc-btn-primary:hover{ opacity:.85; }
.soc-btn-ghost{ background:transparent; }
.soc-btn-auth{ background:#e3f2fd; color:#1565c0; border-color:#90caf9; margin-left:auto; }
.soc-btn-auth:hover{ background:#bbdefb; }
/* Expand toggle bar */
.soc-expand-bar{ border-top:1px solid var(--hair); margin-top:12px; padding-top:0; }
.soc-expand-toggle{ display:flex; align-items:center; gap:6px; width:100%; padding:8px 4px;
background:transparent; border:none; color:var(--text-soft); font-size:12px; font-weight:500;
cursor:pointer; font-family:inherit; transition:color .15s; }
.soc-expand-toggle:hover{ color:var(--accent); }
.soc-expand-toggle .l-ico{ transition:transform .2s; }
.soc-expand-toggle.open .l-ico{ transform:rotate(180deg); }
.soc-add-app{ font-size:11.5px; padding:3px 12px; border-radius:12px; border:1px dashed var(--accent);
background:transparent; color:var(--accent); cursor:default; font-family:inherit; font-weight:500; }
.soc-add-app:hover{ background:var(--accent); color:#fff; border-style:solid; }
/* Accounts section */
.soc-accounts{ padding-top:4px; }
.soc-accounts-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.soc-acct-row{ display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:5px;
background:var(--surface); margin-bottom:4px; font-size:11.5px; }
.soc-acct-row:hover{ background:rgba(130,134,150,.1); }
.soc-acct-name{ font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.soc-acct-id{ font-family:monospace; font-size:10px; color:var(--text-soft); max-width:140px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.soc-acct-badge{ font-size:9.5px; padding:1px 7px; border-radius:8px; background:rgba(130,134,150,.15); color:var(--text-soft); }
.soc-acct-badge.active{ background:#e8f5e9; color:#2e7d32; }
.soc-acct-badge.expired{ background:#fff3e0; color:#e65100; }
.soc-acct-route{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.soc-route-info{ font-size:10px; color:var(--accent); display:flex; align-items:center; gap:3px; padding:2px 7px;
background:rgba(var(--accent-rgb, 56,128,255),.1); border-radius:6px; white-space:nowrap; }
.soc-route-btn{ font-size:10px; padding:2px 8px; border-radius:6px; border:1px solid var(--accent);
color:var(--accent); background:transparent; cursor:pointer; white-space:nowrap; }
.soc-route-btn:hover{ background:var(--accent); color:#fff; }
.soc-route-change{ background:transparent; border:1px solid var(--accent); color:var(--accent); cursor:pointer; padding:1px 6px; border-radius:4px; margin-left:4px; font-size:10px; }
.soc-route-change:hover{ background:var(--accent); color:#fff; }
.soc-route-disconnect{ background:transparent; border:none; color:var(--text-soft); cursor:pointer; padding:2px; opacity:.6; }
.soc-route-disconnect:hover{ color:#c62828; opacity:1; }
.soc-refresh-btn{ background:transparent; border:1px solid #e65100; color:#e65100; cursor:pointer; padding:1px 6px; border-radius:3px; margin-left:4px; font-size:11px; }
.soc-refresh-btn:hover{ background:#e65100; color:#fff; }
.soc-refresh-btn:disabled{ opacity:.5; cursor:default; }
.soc-acct-actions{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.soc-acct-del{ background:transparent; border:none; color:var(--text-soft); padding:2px 4px; cursor:pointer; opacity:.5; }
.soc-acct-del:hover{ color:#c62828; opacity:1; }
/* Dialog overlay */
.soc-dlg-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex;
align-items:center; justify-content:center; z-index:9999; }
.soc-dlg{ background:var(--panel); border:1px solid var(--hair); border-radius:10px;
padding:20px; min-width:320px; max-width:400px; box-shadow:0 8px 32px rgba(0,0,0,.2); }
/* FGA Tree picker */
.soc-tree-dlg{ min-width:380px; max-width:480px; }
.soc-tree-search{ width:100%; padding:7px 10px; font-size:12px; border:1px solid var(--hair);
border-radius:6px; background:var(--surface); color:var(--text); outline:none;
font-family:inherit; margin-bottom:8px; box-sizing:border-box; }
.soc-tree-search:focus{ border-color:var(--accent); }
.soc-tree-search::placeholder{ color:var(--text-soft); opacity:.6; }
.soc-tree-container{ max-height:320px; overflow:auto; border:1px solid var(--hair);
border-radius:6px; padding:6px; }
.soc-tree-node{ display:flex; align-items:center; gap:5px; padding:5px 8px; border-radius:5px;
cursor:pointer; font-size:12px; white-space:nowrap; }
.soc-tree-node:hover{ background:rgba(130,134,150,.1); }
.soc-tree-node.selected{ background:rgba(var(--accent-rgb,56,128,255),.12); color:var(--accent); }
.soc-tree-arrow{ display:flex; align-items:center; cursor:pointer; padding:2px;
transition:transform .15s; flex:0 0 16px; }
.soc-tree-arrow.open{ transform:rotate(90deg); }
.soc-tree-arrow-spacer{ width:16px; flex:0 0 16px; }
.soc-tree-label{ overflow:hidden; text-overflow:ellipsis; }
.soc-tree-footer{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.soc-tree-selected{ flex:1; font-size:11px; color:var(--accent); font-weight:500;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* SSO provider cards */
.sso-cards{ display:flex; flex-direction:column; gap:10px; }
.sso-card{ background:var(--panel); border:1px solid var(--hair); border-radius:8px; padding:14px 16px; }
.sso-card-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.sso-icon{ width:28px; height:28px; border-radius:6px; display:flex; align-items:center;
justify-content:center; color:#fff; font-size:14px; font-weight:600; flex:0 0 28px; }
.sso-label{ font-size:13.5px; font-weight:600; flex:1; }
.sso-toggle{ margin-left:auto; }
.sso-fields{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.sso-field{ display:flex; flex-direction:column; }
.sso-flabel{ display:block; font-size:11px; color:var(--text-soft); margin-bottom:3px; }
.sso-finput{ font-size:12px; padding:6px 8px; border:1px solid var(--hair); border-radius:5px;
background:var(--surface); color:var(--text); outline:none; font-family:inherit; }
.sso-finput:focus{ border-color:var(--accent); }
.sso-finput::placeholder{ color:var(--text-soft); opacity:.6; }
.sso-status{ display:flex; align-items:center; gap:8px; }
.sso-badge{ font-size:10.5px; padding:2px 10px; border-radius:10px;
background:rgba(130,134,150,.15); color:var(--text-soft); }
.sso-badge.on{ background:#e8f5e9; color:#2e7d32; }
.sso-badge.off{ background:#fff3e0; color:#e65100; }
.sso-cb-url{ font-size:10px; color:var(--text-soft); font-family:monospace; opacity:.7;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.sso-loading{ font-size:13px; color:var(--text-soft); padding:20px 0; text-align:center; }
.sso-noperm{ font-size:13px; color:var(--text-soft); padding:20px; text-align:center;
background:var(--panel); border-radius:6px; border:1px solid var(--hair); }
.about{
display:flex; flex-direction:column; align-items:center; justify-content:center;
width:100%; height:100%; gap:7px; text-align:center; padding:32px; background:var(--surface);
}
.about .ab-logo{ margin-bottom:10px; filter:drop-shadow(0 10px 22px rgba(0,103,192,.4)); }
.about h1{ font-size:25px; }
.about .ab-line{ font-size:13px; color:var(--text-soft); }
.about .ab-spec{
margin-top:16px; display:grid; grid-template-columns:auto auto; gap:6px 20px;
font-size:12.5px; background:var(--panel); padding:16px 24px; border-radius:8px;
border:1px solid var(--hair);
}
.about .ab-spec b{ color:var(--text-soft); font-weight:600; }
.prop-grid{
display:grid; grid-template-columns:auto 1fr; gap:6px 18px;
font-size:12.5px; background:var(--panel); padding:16px 24px; border-radius:8px;
border:1px solid var(--hair);
}
.prop-grid b{ color:var(--text-soft); font-weight:600; white-space:nowrap; }
.prop-grid span{ word-break:break-all; }
/* Explorer Action Bar */
.exp-actions{display:flex;align-items:center;gap:2px;padding:3px 8px;border-bottom:1px solid var(--hair);background:var(--panel);flex-shrink:0;}
.ea-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:none;background:none;border-radius:4px;cursor:pointer;font-size:12px;color:var(--text);white-space:nowrap;}
.ea-btn:hover{background:var(--hover);}
.ea-btn:disabled{opacity:.3;pointer-events:none;}
.ea-btn.active{background:var(--accent);color:#fff;}
.ea-sep{width:1px;height:18px;background:var(--hair);margin:0 3px;}
/* Explorer Search */
.exp-search-wrap{margin-left:auto;flex-shrink:0;}
.exp-search-inp{width:140px;padding:3px 8px;border:1px solid var(--hair);border-radius:4px;background:var(--surface);color:var(--text);font-size:12px;outline:none;transition:width .2s,border .15s;}
.exp-search-inp:focus{border-color:var(--accent);width:190px;}
/* Explorer Breadcrumbs */
.crumb-seg{cursor:pointer;padding:2px 5px;border-radius:3px;font-size:12.5px;}
.crumb-seg:hover{background:var(--hover);}
.crumb-seg.active{font-weight:600;}
.crumb-sep{opacity:.4;margin:0 1px;font-size:11px;}
/* List View Sort Headers */
.exp-list-head span{cursor:pointer;user-select:none;transition:color .1s;}
.exp-list-head span:hover{color:var(--accent);}
.exp-list-head span.sorted{color:var(--accent);font-weight:600;}
/* Status Bar */
.sb-size{margin-left:8px;opacity:.7;}
.calc{ display:flex; flex-direction:column; width:100%; height:100%; padding:16px;
gap:11px; background:var(--surface); }
.calc-display{
flex:0 0 auto; min-height:70px; border-radius:8px; padding:13px 18px;
background:var(--panel); border:1px solid var(--hair);
display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
}
.calc-prev{ font-size:13px; color:var(--text-mute); min-height:16px; }
.calc-now{ font-size:37px; font-weight:600; font-variant-numeric:tabular-nums; }
.calc-grid{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.calc-key{
border:1px solid var(--hair); border-radius:7px; cursor:default; font-size:18px;
font-weight:500; background:var(--glass-strong); color:var(--text);
transition:filter .1s,background .1s;
}
.calc-key:hover{ background:var(--panel); }
.calc-key:active{ filter:brightness(.95); }
.calc-key.op{ background:var(--accent); color:#fff; border-color:var(--accent); }
.calc-key.eq{ background:var(--accent); color:#fff; border-color:var(--accent); }
.calc-key.fn{ background:var(--panel); }
.calc-key.wide{ grid-column:span 2; }
/* ====================================================================
APP — Excel cũ (giữ lại vài lớp dùng chung)
==================================================================== */
.xls-state{ padding:46px 26px; text-align:center; color:var(--text-mute);
font-size:13px; line-height:1.75; }
/* ====================================================================
APP — OnlyOffice (Word / Excel / PowerPoint)
==================================================================== */
.office-app{ position:absolute; inset:0; display:flex; }
.office-host{ flex:1; min-width:0; position:relative; background:#f3f3f5; }
[data-theme="dark"] .office-host{ background:#1f1f27; }
.office-host > div{ position:absolute; inset:0; }
.office-host iframe{ position:absolute; inset:0; width:100%; height:100%;
border:none; display:block; }
.office-state{ padding:54px 32px; text-align:center; color:var(--text-mute);
font-size:13px; line-height:1.85; }
.office-state.err{ color:#d13438; }
.office-state b{ color:var(--text); font-size:14px; }
.office-state code{ background:rgba(130,134,150,.22); padding:2px 7px;
border-radius:5px; font-size:12px; }
/* Cửa sổ Office: tắt hiệu ứng kính + nền đục.
backdrop-filter của .window phá việc vẽ canvas của OnlyOffice
(cùng nguyên nhân khiến Univer trước đây hiển thị trống). */
.window.win-office{
background:var(--surface);
-webkit-backdrop-filter:none; backdrop-filter:none;
}
/* === F9: Editable address bar === */
.exp-crumbs {
cursor: text;
}
/* === Batch 9: Trash mode UI polish === */
/* Hide irrelevant action bar buttons in trash mode */
.exp-main.trash-mode .ea-btn:not([data-act="empty-trash"]):not([data-act="refresh"]):not([data-view]):not([data-act="preview"]),
.exp-main.trash-mode .ea-sep {
display: none;
}
/* Empty trash button — red */
.exp-action-empty-trash {
display: none;
background: #fce4e4 !important;
color: #c62828 !important;
border-color: #f3b8b8 !important;
}
.exp-main.trash-mode .exp-action-empty-trash {
display: inline-flex;
align-items: center;
gap: 5px;
}
.exp-action-empty-trash:hover {
background: #fbcfcf !important;
}
/* Trash banner */
.exp-trash-banner {
display: none;
padding: 8px 14px;
background: #fff8e1;
border-bottom: 1px solid #ffe0b2;
font-size: 12.5px;
color: #5d4037;
}
.exp-main.trash-mode .exp-trash-banner {
display: flex;
align-items: center;
gap: 8px;
}
/* Grid item sublabel (origin folder) */
.fi-sublabel {
font-size: 10.5px;
opacity: .6;
margin-top: 2px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.exp-crumbs .crumb-seg {
cursor: pointer;
}
.exp-crumbs .crumb-sep {
opacity: .55;
margin: 0 2px;
user-select: none;
}
.exp-crumbs.editing {
cursor: text;
padding: 0;
}
.crumb-input {
flex: 1;
width: 100%;
height: 28px;
padding: 0 8px;
border: 1px solid var(--accent, #0067c0);
border-radius: 4px;
background: var(--bg-elev, #fff);
color: inherit;
font: inherit;
outline: none;
box-sizing: border-box;
}
.crumb-input:focus {
border-color: var(--accent2, #2a86d8);
box-shadow: 0 0 0 2px rgba(0, 103, 192, .15);
}
/* === F13: Icon size variants === */
.exp-grid.view-size-small .fs-item { width: 80px; padding: 6px; }
.exp-grid.view-size-small .fi-glyph svg.t-ico { width: 28px; height: 28px; }
.exp-grid.view-size-medium .fs-item { width: 100px; padding: 8px; }
.exp-grid.view-size-medium .fi-glyph svg.t-ico { width: 44px; height: 44px; }
.exp-grid.view-size-large .fs-item { width: 130px; padding: 10px; }
.exp-grid.view-size-large .fi-glyph svg.t-ico { width: 64px; height: 64px; }
.exp-grid.view-size-xl .fs-item { width: 170px; padding: 14px; }
.exp-grid.view-size-xl .fi-glyph svg.t-ico { width: 96px; height: 96px; }
/* === F17: Preview pane === */
.exp-body-wrap { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.exp-body-wrap .exp-content { flex: 1; min-width: 0; }
.exp-preview {
width: 0; flex-shrink: 0; overflow: hidden;
transition: width .18s ease;
border-left: 1px solid rgba(0,0,0,.08);
background: rgba(0,0,0,.02);
}
.exp-main.has-preview .exp-preview { width: 280px; padding: 14px; overflow-y: auto; }
.exp-prev-glyph { text-align: center; margin: 8px 0 16px; }
.exp-prev-name { font-weight: 600; word-break: break-all; margin-bottom: 14px; font-size: 13.5px; }
.exp-prev-meta { font-size: 12px; opacity: .85; line-height: 1.7; }
.exp-prev-meta b { font-weight: 600; opacity: .7; }
.exp-prev-thumb { margin-top: 14px; text-align: center; }
.exp-prev-thumb img { max-width: 100%; max-height: 220px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.exp-prev-empty { text-align: center; opacity: .5; padding: 40px 12px; font-size: 12.5px; }
/* === Shortcut orphan state (target trashed/deleted) === */
.desk-icon.orphan {
opacity: 0.42;
filter: grayscale(85%);
}
.desk-icon.orphan:hover {
opacity: 0.62;
}
.desk-icon.orphan .ic-label {
color: #b91c1c;
text-decoration: line-through;
}
.desk-icon.orphan .ic-label::after {
content: ' ⚠';
margin-left: 3px;
text-decoration: none;
color: #d97706;
}
/* === Share Dialog — Bố cục V10.4 (Google Drive parity), UI Win11 Taiwin === */
.share-modal {
width: 540px; max-width: 92vw;
position: relative;
}
/* ---- Header (icon + title + X) ---- */
.share-header {
display: flex; align-items: center; gap: 10px;
padding: 18px 22px 4px;
position: relative;
}
.share-header-ico {
display: inline-flex; align-items: center; justify-content: center;
color: var(--accent);
flex-shrink: 0;
}
.share-title {
flex: 1; min-width: 0;
font-size: 16px; font-weight: 700;
color: var(--text);
padding: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-close {
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
border: none; background: transparent;
color: var(--text-mute);
border-radius: 6px; cursor: pointer;
transition: background .12s, color .12s;
flex-shrink: 0;
}
.share-close:hover {
background: rgba(0,0,0,.06);
color: var(--text);
}
[data-theme="dark"] .share-close:hover { background: rgba(255,255,255,.08); }
/* ---- Body ---- */
.share-body {
padding: 10px 22px 14px;
max-height: 68vh;
overflow-y: auto;
}
/* ---- Search pill (đơn giản, no icon search trong box) ---- */
.share-add-wrap { position: relative; margin-bottom: 18px; }
.share-search-pill {
display: flex; flex-wrap: wrap; align-items: center;
gap: 5px; padding: 11px 16px; min-height: 46px;
background: var(--surface);
border: 1px solid var(--hair);
border-radius: 24px;
transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.share-search-pill:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.share-chips { display: contents; }
.share-search-input {
flex: 1; min-width: 140px;
border: none; outline: none; background: transparent;
font-size: 13.5px; color: var(--text);
padding: 0;
}
.share-search-input::placeholder { color: var(--text-mute); }
/* ---- Chip (pill khi pick từ dropdown) ---- */
.share-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 4px 3px 10px;
background: var(--accent-soft);
color: var(--accent);
border-radius: 999px;
font-size: 12px; font-weight: 500;
max-width: 220px;
animation: chipIn .14s var(--ease);
}
.share-chip-group {
background: rgba(120,90,210,.12);
color: #6645c4;
}
[data-theme="dark"] .share-chip-group { color: #b9a4ff; }
.share-chip-ico {
display: inline-flex; align-items: center;
}
.share-chip-label {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-chip-x {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%;
font-size: 14px; line-height: 1; cursor: pointer;
color: inherit; opacity: .65;
transition: opacity .1s, background .1s;
}
.share-chip-x:hover {
opacity: 1;
background: rgba(0,0,0,.08);
}
[data-theme="dark"] .share-chip-x:hover { background: rgba(255,255,255,.14); }
@keyframes chipIn {
from { opacity: 0; transform: scale(.85); }
to { opacity: 1; transform: scale(1); }
}
/* ---- Dropdown search results ---- */
.share-dropdown {
position: absolute; left: 0; right: 0; top: calc(100% + 4px);
z-index: 10;
background: var(--glass-strong);
backdrop-filter: blur(40px) saturate(150%);
-webkit-backdrop-filter: blur(40px) saturate(150%);
border: 1px solid var(--hair);
border-radius: 10px;
box-shadow: var(--sh-pop);
max-height: 260px; overflow-y: auto;
padding: 4px;
animation: ddIn .12s var(--ease);
}
@keyframes ddIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.share-dropdown-section {
font-size: 11px; font-weight: 600;
color: var(--text-mute);
text-transform: uppercase; letter-spacing: .4px;
padding: 8px 12px 4px;
}
.share-dropdown-item {
display: flex; align-items: center; gap: 10px;
padding: 7px 10px; border-radius: 6px;
cursor: pointer;
transition: background .08s;
}
.share-dropdown-item:hover { background: var(--accent-soft); }
.share-dropdown-info {
display: flex; flex-direction: column; min-width: 0;
}
.share-dropdown-name {
font-size: 13px; font-weight: 500; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-dropdown-sub {
font-size: 11.5px; color: var(--text-mute);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-dropdown-empty {
padding: 14px; text-align: center;
font-size: 12.5px; color: var(--text-mute);
}
/* ---- Pill layout: main (chips+input) + inline role dropdown ---- */
.share-pill-main {
display: flex; flex-wrap: wrap; align-items: center;
gap: 5px; flex: 1; min-width: 0;
}
.share-pending-role {
height: 30px; padding: 0 8px;
background: transparent;
border: 1px solid var(--hair);
border-radius: 6px;
color: var(--text);
font: inherit; font-size: 12px;
cursor: pointer; outline: none;
flex-shrink: 0;
margin-left: 4px;
transition: border-color .12s, opacity .15s;
}
.share-pending-role:focus { border-color: var(--accent); }
.share-pending-role--hidden { display: none; }
/* ---- Action buttons below search pill ---- */
.share-action-btns {
display: flex; justify-content: flex-end; align-items: center;
gap: 8px; margin-top: 10px;
}
.share-action-btns .btn {
height: 34px; padding: 0 20px;
font-size: 13px; font-weight: 500;
border-radius: 18px; white-space: nowrap;
}
.share-cancel-btn {
background: var(--surface); color: var(--text);
border: 1px solid var(--hair);
}
.share-cancel-btn:hover { background: var(--panel); }
/* ============================ Visibility Groups Picker ============================ */
.vg-picker-backdrop {
position: fixed; inset: 0; z-index: 9700;
background: rgba(10,10,20,.4);
display: flex; align-items: center; justify-content: center;
animation: vgBackdrop .14s ease;
}
@keyframes vgBackdrop {
from { opacity: 0; }
to { opacity: 1; }
}
.vg-picker {
width: 460px; max-width: 92vw;
background: var(--glass-strong);
backdrop-filter: blur(40px) saturate(150%);
-webkit-backdrop-filter: blur(40px) saturate(150%);
border: 1px solid var(--hair);
border-radius: 10px;
box-shadow: var(--sh-pop);
padding: 18px 22px 14px;
animation: vgPop .18s var(--ease);
position: relative;
}
@keyframes vgPop {
from { opacity: 0; transform: scale(.95); }
to { opacity: 1; transform: scale(1); }
}
.vg-picker-title {
font-size: 15px; font-weight: 600;
color: var(--text);
margin: 0 0 4px;
}
.vg-picker-desc {
font-size: 12px; color: var(--text-soft);
margin: 0 0 12px;
}
.vg-picker-search-box {
display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
padding: 8px 10px; min-height: 42px;
background: var(--surface);
border: 1px solid var(--hair);
border-radius: 8px;
transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
position: relative;
}
.vg-picker-search-box:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.vg-picker-chips { display: contents; }
.vg-picker-input {
flex: 1; min-width: 120px;
border: none; outline: none; background: transparent;
font: inherit; font-size: 13px; color: var(--text);
padding: 2px 0;
}
.vg-picker-input::placeholder { color: var(--text-mute); }
.vg-picker-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 4px 3px 8px;
background: rgba(120,90,210,.14);
color: #6645c4;
border-radius: 999px;
font-size: 12px; font-weight: 500;
max-width: 200px;
animation: chipIn .14s var(--ease);
}
[data-theme="dark"] .vg-picker-chip { color: #b9a4ff; }
.vg-picker-chip-ico { display: inline-flex; align-items: center; }
.vg-picker-chip-label {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vg-picker-chip-x {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%;
font-size: 14px; line-height: 1; cursor: pointer;
opacity: .65;
transition: opacity .1s, background .1s;
}
.vg-picker-chip-x:hover {
opacity: 1;
background: rgba(0,0,0,.08);
}
[data-theme="dark"] .vg-picker-chip-x:hover { background: rgba(255,255,255,.14); }
.vg-picker-dropdown {
margin-top: 6px;
background: var(--surface);
border: 1px solid var(--hair);
border-radius: 8px;
max-height: 220px; overflow-y: auto;
padding: 4px;
box-shadow: var(--sh-card);
}
.vg-picker-item {
display: flex; align-items: center; gap: 10px;
padding: 7px 10px; border-radius: 5px;
cursor: pointer;
transition: background .08s;
}
.vg-picker-item:hover { background: var(--accent-soft); }
.vg-picker-item-ico { color: var(--accent); display: inline-flex; align-items: center; }
.vg-picker-item-name {
font-size: 13px; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vg-picker-empty {
padding: 12px; text-align: center;
font-size: 12.5px; color: var(--text-mute);
}
.vg-picker-actions {
display: flex; justify-content: flex-end; gap: 8px;
margin-top: 14px;
}
.vg-picker-actions .btn { padding: 7px 18px; }
/* ---- Section title (bold đậm hơn, không uppercase) ---- */
.share-section-title {
font-size: 13.5px; font-weight: 600;
color: var(--text);
margin: 4px 0 10px;
}
.share-section-title-mt { margin-top: 18px; }
/* ---- Members list — card tint nhạt ---- */
.share-members-list {
background: var(--accent-soft);
border-radius: 10px;
padding: 4px;
min-height: 64px;
}
.share-member-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: 8px;
transition: background .1s;
}
.share-member-row:hover { background: rgba(255,255,255,.5); }
[data-theme="dark"] .share-member-row:hover { background: rgba(255,255,255,.05); }
/* ---- Avatar — circle gray outline ---- */
.share-user-avatar {
width: 34px; height: 34px; border-radius: 50%;
background: var(--surface);
border: 1px solid var(--hair);
color: var(--text-soft);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.share-avatar-sm { width: 28px; height: 28px; }
.share-avatar-group {
background: linear-gradient(135deg, #785dd2, #5e3fc1);
border-color: transparent;
color: #fff;
}
.share-avatar-group .l-ico { color: #fff; }
[data-theme="dark"] .share-user-avatar { background: var(--panel); }
/* ---- Info column: name, email, visibility ---- */
.share-user-info {
flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 1px;
}
.share-user-name {
font-size: 13px; font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-user-email {
font-size: 11.5px; color: var(--text-soft);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-user-vis {
display: flex; align-items: center; gap: 3px;
font-size: 11px; color: var(--text-mute);
margin-top: 2px;
white-space: nowrap;
}
.share-user-vis svg { flex-shrink: 0; width: 12px; height: 12px; }
/* ---- Role toggle (button dropdown style) ---- */
.share-role-toggle {
display: inline-flex; align-items: center; gap: 3px;
padding: 4px 8px;
background: transparent;
border: none;
font: inherit; font-size: 12px; font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: background .1s;
white-space: nowrap; flex-shrink: 0;
margin-left: auto;
}
.share-role-toggle:hover:not(:disabled) {
background: rgba(0,0,0,.06);
}
[data-theme="dark"] .share-role-toggle:hover:not(:disabled) { background: rgba(255,255,255,.08); }
.share-role-toggle:disabled { cursor: default; }
.share-role-caret {
display: inline-flex; align-items: center;
opacity: .7;
}
.share-role-owner { color: #d93025; }
.share-role-admin { color: #6645c4; }
.share-role-editor { color: #016868; }
.share-role-commenter { color: #a87100; }
.share-role-viewer,
.share-role-member { color: var(--text-soft); }
[data-theme="dark"] .share-role-owner { color: #ff7c7c; }
[data-theme="dark"] .share-role-admin { color: #c8aaff; }
[data-theme="dark"] .share-role-editor { color: #66d6d6; }
[data-theme="dark"] .share-role-commenter { color: #ffce75; }
/* ---- Public access row ---- */
.share-public-row {
display: flex; align-items: flex-start; gap: 12px;
padding: 4px 0;
}
.share-pub-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(120,124,140,.18);
color: var(--text-soft);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.share-pub-avatar-open {
background: var(--accent-soft); color: var(--accent);
}
.share-pub-avatar .l-ico { width: 18px; height: 18px; }
.share-pub-body { flex: 1; min-width: 0; }
.share-pub-select-wrap {
display: inline-flex; align-items: center; gap: 4px;
position: relative;
}
.share-pub-select {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
background: transparent;
border: none; outline: none;
font: inherit; font-size: 13.5px; font-weight: 600;
color: var(--text);
cursor: pointer;
padding: 4px 22px 4px 0;
}
.share-pub-caret {
position: absolute; right: 4px; top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--text-soft);
display: inline-flex; align-items: center;
}
.share-pub-desc {
font-size: 12px; color: var(--text-soft);
margin-top: 2px;
}
/* ---- Footer (copy link + Xong) ---- */
.share-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 22px;
background: var(--panel);
border-top: 1px solid var(--hair);
}
.share-copy-link {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px;
background: transparent; border: none;
color: var(--accent);
font: inherit; font-size: 13px; font-weight: 500;
cursor: pointer;
border-radius: 6px;
transition: background .1s;
}
.share-copy-link:hover { background: var(--accent-soft); }
.share-copy-link svg { flex-shrink: 0; }
.share-done-btn {
padding: 7px 22px; border-radius: 999px; font-weight: 600;
}
/* ---- Loading / Empty / Error ---- */
.share-loading,
.share-empty {
padding: 18px 14px; text-align: center;
font-size: 12.5px; color: var(--text-mute);
}
.share-error {
padding: 18px 14px; text-align: center;
font-size: 12.5px; color: #c42b1c;
}
/* ============================================================
Share Dialog V3 — Visibility Scope per Member
============================================================ */
.sd {
width: 540px; max-width: 92vw;
background: var(--glass-strong, #fff);
backdrop-filter: blur(40px) saturate(150%);
-webkit-backdrop-filter: blur(40px) saturate(150%);
border-radius: 14px;
border: 1px solid var(--hair);
overflow: hidden;
}
.sd-head {
display: flex; align-items: center; gap: 10px;
padding: 20px 24px 6px;
}
.sd-head-ico {
width: 32px; height: 32px; border-radius: 8px;
background: var(--accent-soft, #E6F1FB); color: var(--accent, #185FA5);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.sd-title {
flex: 1; font-size: 15px; font-weight: 600;
color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin: 0; padding: 0;
}
.sd-close {
width: 28px; height: 28px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
color: var(--text-mute); cursor: pointer;
border: none; background: transparent;
transition: background .12s;
}
.sd-close:hover { background: var(--surface); }
.sd-body { padding: 12px 24px 20px; position: relative; }
.sd-body > .share-dropdown { top: auto; }
.sd-members-wrap { max-height: calc(50vh - 60px); overflow-y: auto; }
.sd-search-row {
display: flex; align-items: center; gap: 8px;
margin-bottom: 16px;
}
.sd-search-box {
flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 0 14px; min-height: 42px;
background: var(--surface);
border: 1px solid var(--hair);
border-radius: 10px;
transition: border-color .12s, box-shadow .12s;
}
.sd-search-box:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.sd-search-ico { color: var(--text-mute); flex-shrink: 0; display: flex; align-items: center; }
.sd-search-box input {
flex: 1; min-width: 120px; border: none; outline: none; background: transparent;
font-size: 13.5px; color: var(--text); font-family: inherit; padding: 8px 0;
}
.sd-search-box input::placeholder { color: var(--text-mute); }
.sd-role-btn {
height: 42px; padding: 0 14px;
display: flex; align-items: center; gap: 6px;
background: var(--surface);
border: 1px solid var(--hair);
border-radius: 10px;
font-size: 13px; font-weight: 500;
color: var(--text);
cursor: pointer; white-space: nowrap; font-family: inherit;
transition: background .1s;
}
.sd-role-btn:hover { background: var(--panel); }
.sd-section {
font-size: 12px; font-weight: 600;
color: var(--text-soft);
text-transform: uppercase; letter-spacing: 0.4px;
margin: 0 0 8px;
}
.sd-section-mt { margin-top: 18px; }
.sd-members {
border-radius: 10px;
border: 1px solid var(--hair);
overflow: hidden;
}
.sd-member {
padding: 10px 12px;
border-bottom: 1px solid var(--hair);
transition: background .1s;
}
.sd-member:last-child { border-bottom: none; }
.sd-member:hover { background: var(--surface); }
.sd-member-top {
display: flex; align-items: center; gap: 10px;
}
.sd-avatar {
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600; flex-shrink: 0;
letter-spacing: -0.3px;
}
.av-owner { background: #FCEBEB; color: #A32D2D; }
.av-admin { background: #EEEDFE; color: #534AB7; }
.av-member { background: #E1F5EE; color: #0F6E56; }
.av-editor { background: #E1F5EE; color: #0F6E56; }
.av-commenter { background: #FFF4E0; color: #A87100; }
.av-viewer { background: var(--surface); color: var(--text-soft); }
.av-group { background: #EEEDFE; color: #534AB7; }
[data-theme="dark"] .av-owner { background: rgba(163,45,45,.2); color: #ff9a9a; }
[data-theme="dark"] .av-admin { background: rgba(83,74,183,.2); color: #c8aaff; }
[data-theme="dark"] .av-member { background: rgba(15,110,86,.2); color: #7ddcb8; }
[data-theme="dark"] .av-editor { background: rgba(15,110,86,.2); color: #7ddcb8; }
[data-theme="dark"] .av-commenter { background: rgba(168,113,0,.2); color: #ffce75; }
[data-theme="dark"] .av-viewer { background: var(--panel); }
[data-theme="dark"] .av-group { background: rgba(83,74,183,.2); color: #c8aaff; }
.sd-info { flex: 1; min-width: 0; }
.sd-name {
font-size: 13.5px; font-weight: 500;
color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
margin: 0;
}
.sd-email {
font-size: 12px; color: var(--text-mute);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
margin: 1px 0 0;
}
.sd-role-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px; font-weight: 500;
white-space: nowrap; flex-shrink: 0;
cursor: pointer;
transition: filter .1s;
}
.sd-role-badge:hover:not(.rb-owner) { filter: brightness(0.92); }
.rb-owner { background: #FCEBEB; color: #A32D2D; cursor: default; }
.rb-admin { background: #EEEDFE; color: #534AB7; }
.rb-editor { background: #E1F5EE; color: #0F6E56; }
.rb-commenter { background: #FFF4E0; color: #A87100; }
.rb-member { background: #E1F5EE; color: #0F6E56; }
.rb-viewer { background: var(--surface); color: var(--text-soft); }
[data-theme="dark"] .rb-owner { background: rgba(163,45,45,.2); color: #ff9a9a; }
[data-theme="dark"] .rb-admin { background: rgba(83,74,183,.2); color: #c8aaff; }
[data-theme="dark"] .rb-editor { background: rgba(15,110,86,.2); color: #7ddcb8; }
[data-theme="dark"] .rb-commenter { background: rgba(168,113,0,.2); color: #ffce75; }
[data-theme="dark"] .rb-member { background: rgba(15,110,86,.2); color: #7ddcb8; }
[data-theme="dark"] .rb-viewer { background: var(--panel); }
.sd-remove {
width: 28px; height: 28px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
color: var(--text-mute); cursor: pointer;
border: none; background: transparent;
opacity: 0; transition: opacity .12s;
flex-shrink: 0;
}
.sd-member:hover .sd-remove { opacity: 1; }
.sd-remove:hover { background: #FCEBEB; color: #A32D2D; }
[data-theme="dark"] .sd-remove:hover { background: rgba(163,45,45,.2); color: #ff7c7c; }
/* ---- Visibility row per member ---- */
.sd-vis {
display: flex; align-items: center; gap: 6px;
margin: 6px 0 0 46px;
flex-wrap: wrap;
}
.sd-vis-label {
font-size: 11.5px; color: var(--text-mute);
display: flex; align-items: center; gap: 4px;
flex-shrink: 0;
}
.sd-vis-tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px;
border-radius: 4px;
font-size: 11.5px; font-weight: 500;
cursor: default;
transition: background .1s;
}
.vt-global {
background: #E1F5EE; color: #0F6E56;
}
[data-theme="dark"] .vt-global { background: rgba(15,110,86,.18); color: #7ddcb8; }
.vt-group {
background: #EEEDFE; color: #534AB7;
}
[data-theme="dark"] .vt-group { background: rgba(83,74,183,.18); color: #c8aaff; }
.vt-group .vt-x {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px; border-radius: 50%;
font-size: 10px; opacity: 0.6; cursor: pointer;
transition: opacity .1s, background .1s;
}
.vt-group .vt-x:hover { opacity: 1; background: rgba(0,0,0,.08); }
[data-theme="dark"] .vt-group .vt-x:hover { background: rgba(255,255,255,.12); }
.vt-add {
background: transparent;
border: 1px dashed var(--hair);
color: var(--text-mute);
cursor: pointer;
padding: 2px 8px;
border-radius: 4px;
font-size: 11.5px;
transition: background .1s, color .1s;
}
.vt-add:hover {
background: var(--surface);
color: var(--text-soft);
border-color: var(--text-mute);
}
.sd-vis-switch {
display: inline-flex; align-items: center;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--hair);
margin-left: auto;
flex-shrink: 0;
}
.sd-vis-opt {
padding: 3px 10px;
font-size: 11px; font-weight: 500;
color: var(--text-mute);
background: transparent;
cursor: pointer;
border: none; font-family: inherit;
transition: all .12s;
}
.sd-vis-opt.active {
background: var(--text);
color: var(--surface, #fff);
}
[data-theme="dark"] .sd-vis-opt.active {
background: var(--accent);
color: #fff;
}
.sd-vis-opt:not(.active):hover {
background: var(--surface);
}
/* ---- Public access row ---- */
.sd-access-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 0;
}
.sd-access-ico {
width: 36px; height: 36px; border-radius: 50%;
background: var(--surface);
display: flex; align-items: center; justify-content: center;
color: var(--text-soft);
flex-shrink: 0;
transition: background .15s, color .15s;
}
.sd-access-ico.sd-access-open {
background: var(--accent-soft); color: var(--accent);
}
.sd-access-info { flex: 1; }
.sd-access-label {
font-size: 13.5px; font-weight: 500;
color: var(--text); margin: 0;
}
.sd-access-desc {
font-size: 12px; color: var(--text-mute); margin: 2px 0 0;
}
.sd-access-toggle {
position: relative;
width: 40px; height: 22px;
background: var(--hair);
border-radius: 11px;
cursor: pointer; flex-shrink: 0;
transition: background .2s;
border: none;
}
.sd-access-toggle.on { background: var(--accent, #185FA5); }
.sd-access-toggle::after {
content: '';
position: absolute;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
top: 2px; left: 2px;
transition: transform .2s;
box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.sd-access-toggle.on::after { transform: translateX(18px); }
/* ---- Footer ---- */
.sd-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 24px;
border-top: 1px solid var(--hair);
background: var(--panel);
}
.sd-copy {
display: flex; align-items: center; gap: 6px;
padding: 7px 14px;
background: transparent;
border: 1px solid var(--hair);
border-radius: 8px;
font-size: 13px; color: var(--text-soft);
cursor: pointer; font-family: inherit;
transition: background .1s;
}
.sd-copy:hover { background: var(--surface); }
.sd-done {
height: 36px; padding: 0 24px;
background: var(--accent, #185FA5); border: none;
border-radius: 8px; font-size: 13px; font-weight: 500;
color: #fff; cursor: pointer; font-family: inherit;
transition: background .12s;
}
.sd-done:hover { background: var(--accent2, #0C447C); }
/* ---- SD Loading/Empty ---- */
.sd-loading, .sd-empty {
padding: 18px; text-align: center;
font-size: 12.5px; color: var(--text-mute);
}
.sd-error {
padding: 18px; text-align: center;
font-size: 12.5px; color: #c42b1c;
}
/* ============================================================
Staff — Quản lý nhân sự (blue uniform, professional)
============================================================ */
.staff-app { display: flex; flex-direction: column; height: 100%; background: var(--surface, #f7f9fc); color: var(--ink, #111827); }
.staff-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 16px 0; background: #fff; border-bottom: 1px solid var(--border, #e5e7eb); flex-shrink: 0; }
.staff-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-size: 13.5px; color: var(--ink-muted, #6b7280); font-family: inherit; font-weight: 500; transition: color .12s, border-color .12s; margin-bottom: -1px; }
.staff-tab:hover { color: var(--ink, #111827); }
.staff-tab.active { color: var(--accent, #0067c0); border-bottom-color: var(--accent, #0067c0); font-weight: 600; }
.staff-tab svg { flex-shrink: 0; opacity: .7; }
.staff-tab.active svg { opacity: 1; }
.staff-content { flex: 1; padding: 22px 26px; overflow-y: auto; }
.staff-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.staff-search { flex: 1; max-width: 380px; position: relative; }
.staff-search-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-muted, #6b7280); pointer-events: none; display: inline-flex; }
.staff-search-inp { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--border, #d1d5db); border-radius: 8px; font-size: 13px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.staff-search-inp:focus { outline: none; border-color: var(--accent, #0067c0); box-shadow: 0 0 0 3px rgba(0,103,192,.12); }
.staff-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border, #d1d5db); background: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink, #111827); transition: background .12s, border-color .12s; }
.staff-btn:hover { background: #f3f4f6; }
.staff-btn-primary { background: var(--accent, #0067c0); color: #fff; border-color: var(--accent, #0067c0); }
.staff-btn-primary:hover { background: var(--accent2, #1d4ed8); border-color: var(--accent2, #1d4ed8); }
.staff-btn-ghost { background: transparent; border-color: transparent; padding: 8px 10px; }
.staff-btn-ghost:hover { background: rgba(0,0,0,.05); }
.staff-iconbtn { width: 30px; height: 30px; padding: 0; border: 1px solid transparent; background: transparent; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-muted, #6b7280); transition: background .12s, color .12s; }
.staff-iconbtn:hover { background: rgba(0,103,192,.1); color: var(--accent, #0067c0); }
.staff-iconbtn-danger:hover { background: #fee2e2; color: #b91c1c; }
.staff-card { background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.staff-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.staff-table thead th { text-align: left; padding: 12px 14px; background: #f9fafb; font-weight: 600; font-size: 12px; color: var(--ink-muted, #6b7280); border-bottom: 1px solid var(--border, #e5e7eb); text-transform: uppercase; letter-spacing: .3px; }
.staff-table tbody tr { cursor: pointer; transition: background .1s; }
.staff-table tbody tr:hover { background: #f9fafb; }
.staff-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border, #f3f4f6); }
.staff-table td { padding: 12px 14px; vertical-align: middle; }
.staff-col-avatar { width: 56px; padding-right: 4px; }
.staff-col-act { width: 90px; text-align: right; }
.staff-row-act { text-align: right; white-space: nowrap; }
.staff-row-act .staff-iconbtn { margin-left: 4px; }
.staff-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent, #0067c0), var(--accent2, #1d4ed8)); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.staff-name { font-weight: 600; color: var(--ink, #111827); }
.staff-email { color: var(--ink-muted, #6b7280); font-size: 13px; }
.staff-muted { color: var(--ink-muted, #6b7280); font-size: 12.5px; }
.staff-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.staff-st-active { background: rgba(16,185,129,.12); color: #047857; }
.staff-st-inactive { background: rgba(148,163,184,.18); color: #64748b; }
.staff-empty { text-align: center; padding: 36px 16px; color: var(--ink-muted, #6b7280); font-size: 13.5px; }
.staff-err { color: #b91c1c; }
.staff-pager { padding: 10px 14px; font-size: 12.5px; color: var(--ink-muted, #6b7280); border-top: 1px solid var(--border, #f3f4f6); background: #fafbfc; }
.staff-empty-big { text-align: center; padding: 80px 20px; color: var(--ink-muted, #6b7280); }
.staff-empty-ico { margin-bottom: 18px; opacity: .35; }
.staff-empty-ico svg { color: var(--accent, #0067c0); }
.staff-empty-title { font-size: 20px; font-weight: 600; margin-bottom: 8px; color: var(--ink, #111827); }
.staff-empty-sub { font-size: 13.5px; max-width: 400px; margin: 0 auto; line-height: 1.5; }
/* Modal cho Staff (override base .modal width) */
.modal.staff-modal { width: 480px; }
.staff-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 0; }
.staff-modal-title { font-size: 15px; font-weight: 600; margin: 0; color: var(--text, #111827); }
.staff-modal-close { background: transparent; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-soft, #6b7280); padding: 2px 8px; border-radius: 4px; }
.staff-modal-close:hover { background: rgba(0,0,0,.06); color: var(--text, #111827); }
.staff-modal-body { padding: 14px 22px 4px; }
/* Form fields trong modal */
.staff-form { padding: 4px 2px; }
.staff-form-row { margin-bottom: 14px; }
.staff-field { display: flex; flex-direction: column; gap: 6px; }
.staff-field-lbl { font-size: 12.5px; font-weight: 600; color: var(--text, #111827); }
.staff-modal-body .staff-field input { padding: 9px 12px; border: 1px solid var(--border, #d1d5db); border-radius: 7px; font-size: 13.5px; font-family: inherit; background: var(--surface, #fff); color: var(--text, #111827); transition: border-color .15s, box-shadow .15s; width: 100%; margin: 0; }
.staff-modal-body .staff-field input:focus { outline: none; border-color: var(--accent, #0067c0); box-shadow: 0 0 0 3px rgba(0,103,192,.12); }
.staff-form-hint { font-size: 12.5px; color: var(--text-soft, #6b7280); margin-top: 8px; padding: 10px 12px; background: rgba(0,103,192,.05); border-radius: 8px; border-left: 3px solid var(--accent, #0067c0); }
/* Staff Permissions view */
.staff-perm-layout { display: grid; grid-template-columns: 260px 1fr; gap: 18px; height: 100%; }
.staff-perm-side { background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.staff-perm-side-h { padding: 12px; border-bottom: 1px solid var(--border, #f3f4f6); }
.staff-perm-search { width: 100%; padding: 7px 12px; border: 1px solid var(--border, #d1d5db); border-radius: 7px; font-size: 13px; }
.staff-perm-search:focus { outline: none; border-color: var(--accent, #0067c0); box-shadow: 0 0 0 3px rgba(0,103,192,.12); }
.staff-perm-userlist { flex: 1; overflow-y: auto; padding: 6px; }
.staff-perm-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .12s; }
.staff-perm-user:hover { background: rgba(0,103,192,.06); }
.staff-perm-user.active { background: rgba(0,103,192,.12); }
.staff-perm-user-meta { flex: 1; min-width: 0; }
.staff-perm-user .staff-name { font-size: 13px; line-height: 1.3; }
.staff-perm-user .staff-email { font-size: 11.5px; line-height: 1.3; }
.staff-avatar-sm { width: 32px; height: 32px; font-size: 11.5px; }
.staff-perm-main { overflow-y: auto; }
.staff-perm-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 4px 2px; }
.staff-perm-title { font-size: 16px; font-weight: 700; color: var(--ink, #111827); }
.staff-perm-count { margin-left: auto; font-size: 12px; color: var(--ink-muted, #6b7280); background: rgba(0,103,192,.08); padding: 5px 12px; border-radius: 999px; font-weight: 600; }
.staff-perm-loading { padding: 32px; text-align: center; color: var(--ink-muted, #6b7280); font-size: 13.5px; }
.staff-perm-typeico { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--accent, #0067c0); }
.staff-perm-ico-group { background: rgba(0,103,192,.1); }
.staff-perm-ico-file { background: rgba(0,103,192,.06); }
.staff-perm-ico-system { background: rgba(148,163,184,.18); color: #64748b; }
.staff-perm-ico-user { background: rgba(0,103,192,.06); }
.staff-perm-ico-unknown { background: rgba(148,163,184,.18); color: #64748b; }
.staff-perm-objid { font-size: 11px; color: var(--ink-muted, #94a3b8); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.staff-role-owner { background: rgba(220,38,38,.1); color: #b91c1c; }
.staff-role-admin { background: rgba(124,58,237,.1); color: #6d28d9; }
.staff-role-member { background: rgba(0,103,192,.1); color: var(--accent, #0067c0); }
.staff-role-viewer { background: rgba(100,116,139,.12); color: #475569; }
.staff-role-super_admin { background: rgba(0,103,192,.15); color: var(--accent2, #1d4ed8); font-weight: 700; }
.staff-role-editor { background: rgba(16,185,129,.1); color: #047857; }
/* Storage view */
.staff-num { text-align: right; font-variant-numeric: tabular-nums; }
.staff-storage-table th.staff-num, .staff-storage-table td.staff-num { padding-right: 18px; }
.staff-bar-wrap { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.staff-bar-track { flex: 1; height: 6px; background: rgba(0,103,192,.08); border-radius: 999px; overflow: hidden; }
.staff-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent, #0067c0), var(--accent2, #1d4ed8)); border-radius: 999px; transition: width .3s; }
.staff-bar-label { font-size: 12.5px; font-weight: 600; color: var(--ink, #111827); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 70px; text-align: right; }
/* Staff page header */
.staff-page-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border, #e5e7eb); }
.staff-page-titles { flex: 1; min-width: 0; }
.staff-page-title { font-size: 22px; font-weight: 700; color: var(--ink, #111827); margin: 0 0 4px; letter-spacing: -0.01em; }
.staff-page-sub { font-size: 13px; color: var(--ink-muted, #6b7280); margin: 0; line-height: 1.5; }
.staff-page-stats { display: flex; gap: 8px; align-items: center; }
.staff-stat-chip { background: rgba(0,103,192,.08); color: var(--accent, #0067c0); font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
/* Staff stat cards grid */
.staff-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.staff-stat-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.staff-stat-card:hover { border-color: var(--accent, #0067c0); box-shadow: 0 1px 4px rgba(0,103,192,.08); }
.staff-stat-ico { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.staff-stat-ico-total { background: rgba(0,103,192,.1); color: var(--accent, #0067c0); }
.staff-stat-ico-active { background: rgba(16,185,129,.1); color: #047857; }
.staff-stat-ico-new { background: rgba(99,102,241,.1); color: #4f46e5; }
.staff-stat-ico-locked { background: rgba(148,163,184,.18); color: #64748b; }
/* ═══════ CHAT WINDOW ═══════ */
.chat-container { display: flex; height: 100%; background: var(--bg-card, #fff); position: relative; }
/* ── Sidebar ── */
.chat-sidebar { width: 260px; border-right: 1px solid var(--border, #e5e7eb); display: flex; flex-direction: column; background: var(--bg-sidebar, #f8fafc); }
.chat-sidebar-header { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border, #e5e7eb); background: var(--bg-card, #fff); }
.chat-sidebar-header h3 { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.chat-sidebar-header h3 svg { opacity: 0.6; }
/* Sidebar sections */
.cht-section { display: flex; flex-direction: column; }
.cht-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary, #6b7280); padding: 10px 14px 6px; display: flex; align-items: center; gap: 5px; }
.cht-section-title svg { opacity: 0.5; }
.cht-dm-section { border-top: 1px solid var(--border, #e5e7eb); flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cht-dm-section .cht-section-title { justify-content: space-between; }
/* Group tree */
.chat-tree { overflow-y: auto; flex: 1; min-height: 80px; max-height: 45vh; }
.cht-org-header { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--text-secondary, #4b5563); }
.cht-org-header svg { opacity: 0.5; }
.cht-node { display: flex; align-items: center; gap: 4px; padding: 5px 8px; cursor: pointer; font-size: 12.5px; color: var(--text-primary, #1f2937); border-radius: 4px; margin: 1px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
.cht-node:hover { background: var(--hover, rgba(0,0,0,.05)); }
.cht-node.active { background: #dbeafe; color: #1d4ed8; font-weight: 500; }
.cht-node svg { flex-shrink: 0; opacity: 0.55; }
.cht-node.active svg { opacity: 0.8; }
.cht-node-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cht-chevron { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; transition: transform .15s; transform: rotate(-90deg); flex-shrink: 0; }
.cht-chevron.expanded { transform: rotate(0deg); }
.cht-chevron-placeholder { width: 16px; height: 16px; flex-shrink: 0; }
.cht-badge, .chtw-badge { background: #ef4444; color: #fff; font-size: 9px; font-weight: 700; padding: 0 5px; border-radius: 8px; min-width: 14px; text-align: center; line-height: 16px; flex-shrink: 0; margin-left: auto; }
.chtw-row.has-unread .chtw-rlabel { font-weight: 600; }
.cht-empty { padding: 16px 14px; font-size: 11.5px; color: #9ca3af; text-align: center; }
/* DM list */
.chat-dm-list { flex: 1; overflow-y: auto; }
.cht-dm-item { display: flex; align-items: center; padding: 7px 12px; cursor: pointer; gap: 8px; border-radius: 4px; margin: 1px 6px; }
.cht-dm-item:hover { background: var(--hover, rgba(0,0,0,.05)); }
.cht-dm-item.active { background: #dbeafe; }
.cht-dm-avatar { flex-shrink: 0; }
.cht-dm-info { flex: 1; min-width: 0; }
.cht-dm-name { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cht-dm-preview { font-size: 10.5px; color: var(--text-secondary, #9ca3af); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cht-dm-meta { text-align: right; flex-shrink: 0; }
.cht-dm-time { font-size: 10px; color: #9ca3af; }
/* Button icon (generic small) */
.chat-btn-icon { background: none; border: none; cursor: pointer; padding: 3px; border-radius: 4px; color: var(--text-secondary, #6b7280); display: inline-flex; align-items: center; }
.chat-btn-icon:hover { background: var(--hover, #e5e7eb); }
/* ── Main panel ── */
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.chat-main-header { padding: 10px 16px; border-bottom: 1px solid var(--border, #e5e7eb); display: flex; align-items: center; gap: 8px; min-height: 44px; background: var(--bg-card, #fff); }
.cht-header-icon { display: flex; align-items: center; opacity: 0.5; }
.cht-header-info { display: flex; flex-direction: column; }
.cht-header-name { font-size: 14px; font-weight: 600; }
.cht-member-count { font-size: 11px; color: #9ca3af; font-weight: 400; }
/* Messages */
.chat-messages { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-card, #fff); }
.chat-date-sep { display: flex; align-items: center; gap: 12px; margin: 12px 0 8px; }
.chat-date-sep::before, .chat-date-sep::after { content: ''; flex: 1; height: 1px; background: var(--border, #e5e7eb); }
.chat-date-sep span { font-size: 10.5px; color: #9ca3af; font-weight: 500; white-space: nowrap; }
.chat-msg { display: flex; gap: 8px; max-width: 75%; }
.chat-msg-own { margin-left: auto; flex-direction: row-reverse; }
.chat-msg-avatar { flex-shrink: 0; width: 32px; height: 32px; }
.chat-msg-own .chat-msg-avatar { display: none; }
.chat-msg-body { min-width: 0; }
.chat-msg-sender { font-size: 11px; font-weight: 600; color: var(--text-secondary, #4b5563); margin-bottom: 2px; }
.chat-msg-own .chat-msg-sender { text-align: right; }
.chat-msg-time { font-weight: 400; color: #9ca3af; margin-left: 6px; }
.chat-msg-content { font-size: 13px; line-height: 1.4; padding: 8px 12px; border-radius: 12px; background: #f3f4f6; word-break: break-word; }
.chat-msg-own .chat-msg-content { background: #3b82f6; color: #fff; border-radius: 12px 12px 4px 12px; }
.chat-msg:not(.chat-msg-own) .chat-msg-content { border-radius: 12px 12px 12px 4px; }
.chat-msg-system { max-width: 100%; text-align: center; }
.chat-msg-system .chat-msg-content { background: none; color: #9ca3af; font-size: 11px; font-style: italic; padding: 4px; }
.chat-msg-sending { opacity: 0.6; }
.chat-msg-failed { border: 1px solid #fca5a5; background: #fef2f2 !important; }
/* Typing + Composer */
.chat-typing { padding: 0 16px; font-size: 11px; color: #9ca3af; min-height: 20px; font-style: italic; }
.chat-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border, #e5e7eb); background: var(--bg-card, #fff); }
.chat-input { flex: 1; resize: none; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-family: inherit; outline: none; max-height: 120px; line-height: 1.4; background: var(--bg-input, #f9fafb); }
.chat-input:focus { border-color: #3b82f6; }
.chat-btn-send { background: #3b82f6; border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-btn-send:hover { background: #2563eb; }
.chat-btn-send:disabled { background: #d1d5db; cursor: not-allowed; }
/* Avatar */
.chat-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: #fff; flex-shrink: 0; }
.chat-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.chat-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #9ca3af; gap: 8px; font-size: 13px; }
.chat-empty svg { opacity: 0.3; }
/* Loading spinner */
.cht-loading-spinner { width: 24px; height: 24px; border: 3px solid #e5e7eb; border-top-color: #3b82f6; border-radius: 50%; animation: cht-spin .7s linear infinite; }
@keyframes cht-spin { to { transform: rotate(360deg); } }
/* Tray badge */
.tb-tray-btn { position: relative; }
.tb-chat-badge { position: absolute; top: 2px; right: 2px; background: #ef4444; color: #fff; font-size: 9px; font-weight: 700; padding: 0 4px; border-radius: 6px; min-width: 14px; text-align: center; line-height: 14px; }
/* New DM overlay */
.chat-new-dm { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-card, #fff); z-index: 10; display: flex; flex-direction: column; }
.chat-new-dm-header { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border, #e5e7eb); gap: 8px; }
.chat-new-dm-list { flex: 1; overflow-y: auto; }
.chat-new-dm-item { display: flex; align-items: center; padding: 8px 14px; cursor: pointer; gap: 10px; }
.chat-new-dm-item:hover { background: var(--hover, #f3f4f6); }
.chat-search { padding: 8px 10px; }
.chat-search-input { width: 100%; padding: 6px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; font-size: 12px; outline: none; background: var(--bg-input, #f9fafb); box-sizing: border-box; }
.chat-search-input:focus { border-color: #3b82f6; }
/* File messages */
.chat-file-img { max-width: 320px; border-radius: 8px; overflow: hidden; }
.chat-file-img img { display: block; max-width: 100%; max-height: 300px; object-fit: contain; border-radius: 8px; cursor: pointer; transition: opacity .15s; }
.chat-file-img img:hover { opacity: .85; }
.chat-file-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f3f4f6; border-radius: 10px; text-decoration: none; color: inherit; min-width: 200px; max-width: 320px; transition: background .15s; cursor: pointer; }
.chat-file-img { cursor: pointer; }
.chat-file-card:hover { background: #e5e7eb; }
.chat-msg-own .chat-file-card { background: rgba(255,255,255,.18); }
.chat-msg-own .chat-file-card:hover { background: rgba(255,255,255,.28); }
.chat-file-icon { flex-shrink: 0; opacity: .5; }
.chat-file-info { flex: 1; min-width: 0; }
.chat-file-name { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-file-size { font-size: 10.5px; color: #9ca3af; margin-top: 1px; }
.chat-file-dl { flex-shrink: 0; opacity: .4; }
.chat-file-dl:hover { opacity: .7; }
/* Drag overlay */
.chat-drag-overlay { display: none; position: absolute; inset: 0; background: rgba(59,130,246,.08); border: 2px dashed #3b82f6; border-radius: 8px; z-index: 20; align-items: center; justify-content: center; }
.chat-drag-overlay.visible { display: flex; }
.chat-drag-text { text-align: center; color: #3b82f6; font-size: 14px; font-weight: 500; }
.chat-drag-text svg { opacity: .5; margin-bottom: 6px; }
/* Attach button */
.chat-btn-attach { flex-shrink: 0; }
/* Upload preview bar — staged files before sending */
.chat-upload-preview, .exp-chat-staged { display: none; padding: 6px 12px 0; }
.chat-upload-preview:not(:empty), .exp-chat-staged:not(:empty) { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--border, #e5e7eb); background: var(--bg-card, #fff); }
.chat-staged-item { display: flex; align-items: center; gap: 6px; background: var(--bg-input, #f3f4f6); border-radius: 8px; padding: 4px 8px; max-width: 220px; position: relative; }
.chat-staged-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.chat-staged-icon { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.chat-staged-icon svg { display: block; }
.chat-staged-name { flex: 1; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-main, #374151); }
.chat-staged-remove { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; border: none; background: #ef4444; color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.chat-staged-item:hover .chat-staged-remove { opacity: 1; }
/* ── Chat panel inside Explorer (chatMode) ── */
.exp-main.chat-mode .exp-body-wrap { flex: 1; min-height: 0; }
.exp-chat-area { display: flex; flex-direction: column; height: 240px; min-height: 120px; border-top: 2px solid var(--border, #e5e7eb); background: var(--bg-card, #fff); }
.exp-chat-messages { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.exp-chat-typing { font-size: 11px; color: #9ca3af; padding: 0 12px; min-height: 16px; }
.exp-chat-composer { display: flex; align-items: flex-end; gap: 6px; padding: 6px 12px 8px; border-top: 1px solid var(--border, #e5e7eb); }
.exp-chat-composer .chat-input { flex: 1; resize: none; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-family: inherit; outline: none; max-height: 80px; line-height: 1.4; background: var(--bg-input, #f9fafb); }
.exp-chat-composer .chat-input:focus { border-color: #3b82f6; }
.exp-chat-composer .chat-btn-send { flex-shrink: 0; width: 32px; height: 32px; border: none; border-radius: 50%; background: #3b82f6; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.exp-chat-composer .chat-btn-send:hover { background: #2563eb; }
.exp-chat-composer .chat-btn-icon { flex-shrink: 0; }
/* ═══════════════════════════════════════════════════════════════
CHAT WINDOW — Chat-first layout (chtw-*)
═══════════════════════════════════════════════════════════════ */
.chtw { display: flex; height: 100%; overflow: hidden; }
/* ── Sidebar ── */
.chtw-side {
width: 240px; min-width: 180px;
display: flex; flex-direction: column;
border-right: 1px solid var(--border, #e5e7eb);
background: var(--bg-side, #f8fafc);
overflow: hidden;
}
.chtw-side-hd {
display: flex; align-items: center; gap: 8px;
padding: 12px 16px; font-size: 15px; font-weight: 600;
border-bottom: 1px solid var(--border, #e5e7eb);
color: var(--ink, #111827);
}
/* Tabs */
.chtw-tabs { display: flex; border-bottom: 1px solid var(--border, #e5e7eb); background: var(--bg-side, #f8fafc); flex-shrink: 0; }
.chtw-tab { flex: 1; padding: 8px 0; font-size: 12px; font-weight: 500; text-align: center; cursor: pointer; background: none; border: none; border-bottom: 2px solid transparent; color: #6b7280; transition: color .15s, border-color .15s; }
.chtw-tab:hover { color: #374151; background: rgba(0,0,0,.03); }
.chtw-tab.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
/* Flat list (Zalo-style) */
.chtw-flat { flex: 1; overflow-y: auto; }
.chtw-flat-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background .12s; }
.chtw-flat-item:hover { background: rgba(0,0,0,.04); }
.chtw-flat-item.active { background: #dbeafe; }
.chtw-flat-item.has-unread { background: rgba(59,130,246,.05); }
.chtw-flat-item.has-unread.active { background: #dbeafe; }
.chtw-flat-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #e0e7ff; flex-shrink: 0; }
.chtw-flat-icon svg { color: #4f46e5; }
.chtw-flat-body { flex: 1; min-width: 0; }
.chtw-flat-top { display: flex; align-items: baseline; gap: 6px; }
.chtw-flat-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--ink, #111827); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chtw-flat-item.has-unread .chtw-flat-name { font-weight: 700; }
.chtw-flat-time { font-size: 11px; color: #9ca3af; flex-shrink: 0; }
.chtw-flat-item.has-unread .chtw-flat-time { color: #2563eb; font-weight: 600; }
.chtw-flat-bot { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.chtw-flat-preview { flex: 1; font-size: 12px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chtw-flat-badge { background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 10px; min-width: 18px; text-align: center; line-height: 18px; flex-shrink: 0; }
.chtw-flat-empty { padding: 32px 16px; text-align: center; font-size: 13px; color: #9ca3af; }
.chtw-flat-section { display: flex; align-items: center; gap: 6px; padding: 8px 14px 4px; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; }
.chtw-flat-section svg { opacity: .55; }
/* DM tab */
.chtw-dm { flex: 1; overflow-y: auto; padding: 0; }
.chtw-dm-new { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 500; color: #2563eb; border-bottom: 1px solid var(--border, #e5e7eb); transition: background .12s; }
.chtw-dm-new:hover { background: rgba(37,99,235,.06); }
.chtw-dm-new svg { color: #2563eb; }
.chtw-dm-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #818cf8, #6366f1); color: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chtw-dm-avatar-sm { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #818cf8, #6366f1); color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.chtw-dm-picker { border-bottom: 1px solid var(--border, #e5e7eb); padding: 8px; background: #f8fafc; }
.chtw-dm-search { width: 100%; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; outline: none; box-sizing: border-box; }
.chtw-dm-search:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.chtw-dm-picker-list { max-height: 240px; overflow-y: auto; margin-top: 6px; }
.chtw-dm-picker-item { display: flex; align-items: center; gap: 10px; padding: 7px 6px; cursor: pointer; border-radius: 6px; transition: background .12s; }
.chtw-dm-picker-item:hover { background: rgba(59,130,246,.08); }
.chtw-dm-picker-info { flex: 1; min-width: 0; }
.chtw-dm-picker-name { font-size: 13px; font-weight: 500; color: var(--ink, #111827); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chtw-dm-picker-email { font-size: 11px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── Lib.userPicker SSOT ── */
.up-picker { border-bottom: 1px solid var(--border, #e5e7eb); padding: 8px; background: #f8fafc; }
.up-search { width: 100%; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; outline: none; box-sizing: border-box; }
.up-search:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.up-list { max-height: 240px; overflow-y: auto; margin-top: 6px; }
.up-item { display: flex; align-items: center; gap: 10px; padding: 7px 6px; cursor: pointer; border-radius: 6px; transition: background .12s; }
.up-item:hover { background: rgba(59,130,246,.08); }
.up-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #818cf8, #6366f1); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.up-info { flex: 1; min-width: 0; }
.up-name { font-size: 13px; font-weight: 500; color: var(--ink, #111827); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-email { font-size: 11px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-empty { padding: 16px 8px; text-align: center; color: #9ca3af; font-size: 13px; }
.chtw-tree { flex: 1; overflow-y: auto; padding: 6px 0; }
/* Tree nodes */
.chtw-row {
display: flex; align-items: center; gap: 4px;
padding: 6px 8px 6px 12px;
cursor: pointer; font-size: 13px;
border-radius: 6px; margin: 1px 6px;
transition: background .15s;
color: var(--ink, #374151);
}
.chtw-row:hover { background: var(--hover, rgba(0,0,0,.05)); }
.chtw-row.active { background: #dbeafe; color: #1d4ed8; font-weight: 500; }
.chtw-arrow {
display: flex; align-items: center; justify-content: center;
width: 16px; height: 16px; flex-shrink: 0;
transition: transform .15s;
}
.chtw-arrow.open { transform: rotate(90deg); }
.chtw-arrow.invis { visibility: hidden; }
.chtw-ricon { display: flex; align-items: center; flex-shrink: 0; opacity: .7; }
.chtw-rlabel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chtw-children { padding-left: 16px; }
/* ── Center: chat column ── */
.chtw-center {
flex: 1; display: flex; flex-direction: column;
min-width: 0; overflow: hidden;
background: var(--bg-card, #fff);
}
/* ── Resize handle ── */
.chtw-handle {
width: 5px; cursor: col-resize; flex-shrink: 0;
background: transparent; transition: background .15s;
display: none; /* hidden until explorer open */
}
.chtw-handle.active { display: block; }
.chtw-handle:hover { background: #3b82f6; }
/* ── Explorer right panel ── */
.chtw-exp {
width: 0; overflow: hidden; flex-shrink: 0;
display: flex; flex-direction: column;
border-left: 1px solid var(--border, #e5e7eb);
transition: width .2s ease;
}
.chtw-exp.open { width: 240px; overflow: hidden; }
.chtw-exp-hd {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 10px; min-height: 40px;
border-bottom: 1px solid var(--border, #e5e7eb);
background: var(--bg-side, #f8fafc);
}
.chtw-exp-title {
display: flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; color: var(--ink, #374151);
opacity: .75;
}
.chtw-exp-close {
width: 26px; height: 26px; border: none; background: transparent;
border-radius: 6px; cursor: pointer; display: flex;
align-items: center; justify-content: center; color: #9ca3af;
transition: all .12s;
}
.chtw-exp-close:hover { background: #fee2e2; color: #dc2626; }
.chtw-exp-body { flex: 1; height: 0; overflow: auto; }
/* hide Explorer's own sidebar inside embedded panel */
.chtw-exp .exp-side { display: none !important; }
/* Explorer main fills full width when sidebar hidden */
.chtw-exp .exp-main { border-left: none; }
/* Header */
.chtw-hd {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 16px;
border-bottom: 1px solid var(--border, #e5e7eb);
min-height: 48px;
}
.chtw-hd-info { display: flex; align-items: center; gap: 8px; }
.chtw-hd-icon { display: flex; opacity: .6; }
.chtw-hd-name { font-size: 15px; font-weight: 600; color: var(--ink, #111827); }
.chtw-hd-sub { font-size: 12px; color: #9ca3af; }
.chtw-hd-act { display: flex; gap: 6px; }
.chtw-fbtn {
display: flex; align-items: center; gap: 5px;
padding: 5px 12px; border-radius: 8px;
border: 1px solid var(--border, #e5e7eb);
background: var(--bg-input, #f9fafb);
font-size: 12px; cursor: pointer;
transition: all .15s; color: var(--ink, #374151);
}
.chtw-fbtn:hover { background: #f0f4ff; border-color: #93c5fd; }
.chtw-fbtn.active { background: #dbeafe; border-color: #60a5fa; color: #1d4ed8; }
.chtw-fcnt { font-weight: 600; color: #3b82f6; }
/* Chat area — takes all remaining space */
.chtw-chat {
flex: 1; display: flex; flex-direction: column;
min-height: 0; overflow: hidden;
position: relative;
}
/* Override embedded panel styles when inside chtw */
.chtw-chat .exp-chat-messages {
flex: 1; overflow-y: auto; padding: 12px 20px;
display: flex; flex-direction: column; gap: 2px;
font-size: 14px; line-height: 1.5;
}
.chtw-chat .exp-chat-typing {
font-size: 12px; color: #9ca3af; padding: 2px 20px; min-height: 20px;
}
.chtw-chat .exp-chat-composer {
display: flex; align-items: flex-end; gap: 8px;
padding: 10px 20px 14px; border-top: 1px solid var(--border, #e5e7eb);
background: var(--bg-card, #fff);
}
.chtw-chat .chat-input {
flex: 1; resize: none;
border: 1.5px solid var(--border, #e5e7eb);
border-radius: 22px; padding: 10px 16px;
font-size: 14px; font-family: inherit;
outline: none; max-height: 120px; line-height: 1.45;
background: var(--bg-input, #f9fafb);
transition: border-color .15s, box-shadow .15s;
}
.chtw-chat .chat-input:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.chtw-chat .chat-btn-send {
flex-shrink: 0; width: 38px; height: 38px;
border: none; border-radius: 50%;
background: #3b82f6; color: #fff;
cursor: pointer; display: flex;
align-items: center; justify-content: center;
transition: background .15s, transform .1s;
}
.chtw-chat .chat-btn-send:hover { background: #2563eb; transform: scale(1.05); }
.chtw-chat .chat-btn-icon { flex-shrink: 0; }
/* (old .chtw-files panel removed — replaced by embedded Explorer in .chtw-exp) */
/* ── Enhanced message styles ── */
.chat-msg-grouped { margin-top: -1px; }
.chat-msg-gutter {
width: 34px; flex-shrink: 0;
display: flex; align-items: flex-start;
justify-content: flex-end; padding-right: 6px;
padding-top: 3px;
}
.chat-msg-time-hover {
font-size: 10px; color: #b0b0b0;
opacity: 0; transition: opacity .15s;
white-space: nowrap;
}
.chat-msg:hover .chat-msg-time-hover { opacity: 1; }
/* Better file cards in messages */
.chat-file-card {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: 12px;
background: var(--bg-input, #f3f4f6);
text-decoration: none; color: inherit;
max-width: 340px; transition: background .12s;
}
.chat-file-card:hover { background: #e5e7eb; }
.chat-file-icon { flex-shrink: 0; }
.chat-file-info { flex: 1; min-width: 0; }
.chat-file-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-file-size { font-size: 11px; color: #9ca3af; margin-top: 1px; }
.chat-file-dl { flex-shrink: 0; opacity: 0.3; transition: opacity .15s; }
.chat-file-card:hover .chat-file-dl { opacity: 0.7; }
/* Better image messages */
.chat-file-img img {
max-width: 340px; max-height: 280px;
border-radius: 12px; cursor: pointer;
object-fit: cover; display: block;
}
.chat-file-img img:hover { opacity: .92; }
/* URL links in messages */
.chat-msg-content a {
color: #2563eb; text-decoration: underline;
text-decoration-color: rgba(37,99,235,.3);
transition: text-decoration-color .15s;
}
.chat-msg-content a:hover { text-decoration-color: #2563eb; }
/* Drag overlay for chat panel */
.chat-panel-drag-overlay {
position: absolute; inset: 0;
background: rgba(59,130,246,.06);
border: 2px dashed #60a5fa; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
z-index: 50; pointer-events: none;
opacity: 0; transition: opacity .2s;
}
.chat-panel-drag-overlay.visible { opacity: 1; }
.chat-panel-drag-text {
text-align: center; color: #3b82f6;
font-size: 14px; font-weight: 500;
}
.chat-panel-drag-text div { margin-top: 6px; }
/* ── Emoji picker ── */
.chat-btn-emoji {
font-size: 18px; line-height: 1;
border: none; background: transparent; cursor: pointer;
padding: 4px; border-radius: 6px; transition: background .12s;
}
.chat-btn-emoji:hover { background: rgba(0,0,0,.06); }
.chat-emoji-picker {
position: absolute; bottom: 100%; left: 0;
width: 320px; max-height: 320px;
background: var(--bg-card, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,.15);
z-index: 200; display: flex; flex-direction: column;
margin-bottom: 6px; overflow: hidden;
}
.cep-tabs {
display: flex; gap: 2px; padding: 6px 8px;
border-bottom: 1px solid var(--border, #e5e7eb);
overflow-x: auto; flex-shrink: 0;
}
.cep-tab {
font-size: 16px; padding: 4px 8px;
border: none; background: transparent;
border-radius: 6px; cursor: pointer;
transition: background .1s;
}
.cep-tab:hover { background: rgba(0,0,0,.06); }
.cep-tab.active { background: #dbeafe; }
.cep-grid {
display: grid; grid-template-columns: repeat(8, 1fr);
gap: 2px; padding: 8px;
overflow-y: auto; flex: 1;
}
.cep-emoji {
font-size: 22px; padding: 4px;
border: none; background: transparent;
border-radius: 6px; cursor: pointer;
text-align: center; transition: background .1s, transform .1s;
}
.cep-emoji:hover { background: #f0f4ff; transform: scale(1.15); }
/* ── Message code formatting ── */
.chat-code-inline {
background: rgba(0,0,0,.06); padding: 1px 5px;
border-radius: 4px; font-family: 'Consolas', 'Monaco', monospace;
font-size: 0.9em; color: #d63384;
}
.chat-code-block {
background: #1e1e2e; color: #cdd6f4;
padding: 10px 14px; border-radius: 8px;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px; overflow-x: auto;
margin: 4px 0; line-height: 1.5;
white-space: pre-wrap; word-break: break-all;
}
.chat-code-block code { color: inherit; background: none; padding: 0; font-size: inherit; }
/* ── Emoji reactions (Zalo-style: trigger btn + picker popup) ── */
.chat-react-trigger {
position: absolute; bottom: -10px; right: 4px;
width: 22px; height: 22px;
border: 1px solid var(--border, #e5e7eb);
background: var(--bg-card, #fff);
border-radius: 50%; cursor: pointer;
font-size: 12px; line-height: 1;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 3px rgba(0,0,0,.1);
opacity: 0; transition: opacity .15s;
z-index: 5;
}
.chat-msg:hover .chat-react-trigger { opacity: 1; }
.chat-react-trigger:hover { background: #f0f4ff; transform: scale(1.15); }
.chat-msg-own .chat-react-trigger { right: auto; left: 4px; }
.chat-react-picker {
position: fixed;
display: flex; gap: 2px;
background: var(--bg-card, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 20px; padding: 4px 6px;
box-shadow: 0 4px 16px rgba(0,0,0,.15);
z-index: 9999;
}
.chat-react-btn {
font-size: 18px; padding: 4px 5px;
border: none; background: transparent;
border-radius: 50%; cursor: pointer;
transition: transform .12s, background .12s;
line-height: 1;
}
.chat-react-btn:hover { transform: scale(1.3); background: #f0f4ff; }
.chat-reactions {
display: flex; flex-wrap: wrap; gap: 4px;
margin-top: 4px;
}
.chat-react-pill {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 8px; border-radius: 12px;
border: 1px solid var(--border, #e5e7eb);
background: var(--bg-input, #f9fafb);
font-size: 14px; cursor: pointer;
transition: all .12s;
}
.chat-react-pill:hover { border-color: #93c5fd; background: #f0f4ff; }
.chat-react-pill.cr-mine { border-color: #60a5fa; background: #dbeafe; }
.cr-cnt { font-size: 11px; color: #6b7280; font-weight: 500; }
.staff-stat-body { flex: 1; min-width: 0; }
.staff-stat-val { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--ink, #111827); }
.staff-stat-lbl { font-size: 11.5px; color: var(--ink-muted, #6b7280); margin-top: 3px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
/* ═══════════════════════════════════════════════════════════════
CHAT ENHANCEMENTS — Unread, Typing, Actions, Grouping
═══════════════════════════════════════════════════════════════ */
/* ── Zalo-style group tree nodes with preview ── */
.cht-node { display: flex; align-items: center; gap: 6px; min-height: 40px; }
.cht-node-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.cht-node-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cht-node-meta { display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.cht-node-preview { font-size: 11px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.cht-node-time { font-size: 10px; color: #9ca3af; white-space: nowrap; flex-shrink: 0; }
.cht-node.unread .cht-node-name { font-weight: 700; color: #111827; }
.cht-node.unread .cht-node-preview { color: #374151; font-weight: 500; }
.cht-node.unread .cht-node-time { color: #3b82f6; font-weight: 600; }
.cht-node.unread { background: rgba(59,130,246,.06); }
.cht-dm-item.unread .cht-dm-name { font-weight: 700; color: #111827; }
.cht-dm-item.unread .cht-dm-preview { color: #374151; font-weight: 500; }
.cht-dm-item.unread { background: rgba(59,130,246,.06); }
.chtw-row.unread .chtw-rlabel { font-weight: 700; color: #111827; }
.chtw-row.unread { background: rgba(59,130,246,.06); }
/* ── Typing indicator dots ── */
.chat-typing-dots { display: inline-flex; align-items: center; gap: 3px; padding: 2px 0; }
.chat-typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: #9ca3af; animation: cht-typing-bounce .9s infinite ease-in-out; }
.chat-typing-dots span:nth-child(2) { animation-delay: .15s; }
.chat-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes cht-typing-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: .4; }
30% { transform: translateY(-4px); opacity: 1; }
}
/* ── Message grouping (main window) ── */
.chat-msg-grouped { margin-top: -2px; }
.chat-msg-grouped .chat-msg-avatar { visibility: hidden; }
.chat-msg-grouped .chat-msg-sender { display: none; }
.chat-msg-gutter { width: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.chat-msg-time-hover { font-size: 9.5px; color: #9ca3af; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.chat-msg:hover .chat-msg-time-hover { opacity: 1; }
/* ── Message hover action bar ── */
.chat-msg { position: relative; }
.chat-msg-actions {
position: absolute; top: -8px; right: 8px;
display: none; align-items: center; gap: 1px;
background: var(--bg-card, #fff);
border: 1px solid var(--border, #e5e7eb);
border-radius: 6px;
box-shadow: 0 1px 4px rgba(0,0,0,.1);
padding: 2px;
z-index: 5;
}
.chat-msg:hover .chat-msg-actions { display: flex; }
.chat-msg-own .chat-msg-actions { right: auto; left: 8px; }
.chat-msg-act-btn {
width: 28px; height: 26px;
display: flex; align-items: center; justify-content: center;
border: none; background: transparent;
border-radius: 4px; cursor: pointer;
color: #6b7280; transition: all .12s;
}
.chat-msg-act-btn:hover { background: #f3f4f6; color: #111827; }
.chat-msg-act-btn svg { width: 14px; height: 14px; }
/* ── Reply quote ── */
.chat-reply-quote { background: var(--bg-input, #f3f4f6); border-left: 3px solid #3b82f6; border-radius: 6px; padding: 6px 10px; margin-bottom: 4px; cursor: pointer; max-width: 320px; }
.chat-reply-quote:hover { background: #e5e7eb; }
.chat-reply-author { font-size: 11px; font-weight: 600; color: #3b82f6; margin-bottom: 2px; }
.chat-reply-text { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-reply-preview { padding: 0 16px; }
.chat-reply-bar { display: flex; align-items: center; gap: 8px; background: var(--bg-input, #f3f4f6); border-left: 3px solid #3b82f6; border-radius: 6px; padding: 6px 10px; margin-bottom: 4px; }
.chat-reply-info { flex: 1; min-width: 0; }
.chat-reply-label { font-size: 11px; font-weight: 600; color: #3b82f6; display: block; }
.chat-reply-snippet { font-size: 12px; color: #6b7280; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-reply-close { border: none; background: transparent; cursor: pointer; color: #9ca3af; display: flex; align-items: center; padding: 2px; border-radius: 4px; }
.chat-reply-close:hover { background: #e5e7eb; color: #111827; }
.chat-msg-highlight { animation: chatMsgFlash 1.5s ease; }
@keyframes chatMsgFlash { 0%,40% { background: rgba(59,130,246,0.12); } 100% { background: transparent; } }
/* ── Chat search ── */
.chat-btn-search { margin-left: auto; color: #6b7280; }
.chat-btn-search:hover { color: #111827; }
.chat-search-panel { border-bottom: 1px solid var(--border, #e5e7eb); background: var(--bg-card, #fff); }
.chat-search-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; }
.chat-search-icon { display: flex; color: #9ca3af; }
.chat-search-input { flex: 1; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; padding: 6px 10px; font-size: 13px; font-family: inherit; outline: none; background: var(--bg-input, #f9fafb); }
.chat-search-input:focus { border-color: #3b82f6; }
.chat-search-close { color: #9ca3af; }
.chat-search-close:hover { color: #111827; }
.chat-search-results { max-height: 240px; overflow-y: auto; }
.chat-search-item { padding: 8px 14px; cursor: pointer; border-bottom: 0.5px solid var(--border, #e5e7eb); }
.chat-search-item:hover { background: var(--bg-input, #f3f4f6); }
.chat-search-sender { font-size: 12px; font-weight: 600; color: var(--text, #111827); }
.chat-search-time { font-weight: 400; color: #9ca3af; font-size: 11px; margin-left: 6px; }
.chat-search-snippet { font-size: 12px; color: #6b7280; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-search-snippet b { color: #3b82f6; font-weight: 600; }
.chat-search-loading, .chat-search-empty { padding: 16px; text-align: center; font-size: 12px; color: #9ca3af; }
/* ── New messages scroll banner ── */
.chat-new-msg-banner {
position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
display: none; align-items: center; gap: 6px;
padding: 6px 16px; border-radius: 20px;
background: #1d4ed8; color: #fff;
font-size: 12px; font-weight: 500;
cursor: pointer; box-shadow: 0 2px 8px rgba(29,78,216,.35);
z-index: 10; transition: opacity .2s;
animation: cht-banner-in .25s ease;
}
.chat-new-msg-banner.visible { display: flex; }
.chat-new-msg-banner svg { opacity: .7; }
@keyframes cht-banner-in { from { transform: translateX(-50%) translateY(8px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
/* ── Edited tag ── */
.chat-msg-edited { font-size: 10px; color: #9ca3af; font-style: italic; margin-left: 4px; }
/* ── Edit inline input ── */
.chat-edit-input {
width: 100%; padding: 4px 8px; font-size: 13px; font-family: inherit;
border: 1px solid #3b82f6; border-radius: 6px; outline: none;
background: var(--bg-input, #fff); line-height: 1.4;
}
.chat-edit-hint { font-size: 10px; color: #9ca3af; margin-top: 2px; }
/* ── Retry button for failed messages ── */
.chat-msg-retry {
display: inline-flex; align-items: center; gap: 3px;
font-size: 11px; color: #dc2626; cursor: pointer;
margin-top: 2px; border: none; background: none;
font-family: inherit;
}
.chat-msg-retry:hover { text-decoration: underline; }
/* ============================================================
AI SETTINGS TAB
============================================================ */
/* -- Header with action buttons -- */
.ai-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.ai-header h2 { margin: 0; }
.ai-header-btns { display: flex; gap: 8px; flex-shrink: 0; }
/* -- Buttons -- */
.ai-btn {
padding: 7px 16px; border-radius: 7px; border: 1px solid var(--hair);
background: var(--surface); color: var(--text); font-size: 13px;
font-family: inherit; cursor: pointer; transition: all .15s;
white-space: nowrap;
}
.ai-btn:hover { border-color: var(--accent); color: var(--accent); }
.ai-btn-primary {
background: var(--accent); color: #fff; border-color: var(--accent);
font-weight: 600;
}
.ai-btn-primary:hover { opacity: .88; color: #fff; }
.ai-btn-sm {
padding: 3px 10px; border-radius: 5px; border: 1px solid var(--hair);
background: transparent; color: var(--text-soft); font-size: 11px;
font-family: inherit; cursor: pointer; transition: all .12s;
}
.ai-btn-sm:hover { border-color: var(--accent); color: var(--accent); }
.ai-btn-del { color: #d44; border-color: transparent; }
.ai-btn-del:hover { color: #fff; background: #d44; border-color: #d44; }
.ai-btn-cancel { background: var(--surface); }
.ai-btn-save { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.ai-btn-save:hover { opacity: .88; }
/* -- Vendor cards -- */
.ai-cards { display: flex; flex-direction: column; gap: 12px; }
.ai-card {
background: var(--panel); border-radius: 10px;
padding: 16px; border: 1px solid var(--hair);
}
.ai-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ai-card-info { display: flex; align-items: center; gap: 8px; }
.ai-card-actions { display: flex; align-items: center; gap: 6px; }
.ai-vendor-icon { font-size: 20px; line-height: 1; }
.ai-vendor-name { font-weight: 600; font-size: 14px; }
.ai-vendor-desc { font-size: 12px; color: var(--text-soft); margin-bottom: 8px; line-height: 1.4; }
.ai-badge {
font-size: 10px; padding: 2px 8px; border-radius: 4px;
background: var(--accent-soft, rgba(0,103,192,.1)); color: var(--accent);
font-family: monospace; font-weight: 500; letter-spacing: .3px;
}
.ai-type-badge {
font-size: 9px; padding: 2px 6px; border-radius: 3px;
background: rgba(128,128,128,.12); color: var(--text-soft);
font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
}
.ai-key-ok { font-size: 11px; color: #2a9; font-weight: 500; }
.ai-key-no { font-size: 11px; color: #c55; font-weight: 500; }
/* -- Toggle inside cards (reuse .switch but smaller) -- */
.ai-toggle { flex-shrink: 0; }
/* -- Fields (legacy, kept for compatibility) -- */
.ai-fields { display: flex; gap: 10px; margin-bottom: 2px; }
.ai-field-row { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ai-flabel { font-size: 11px; color: var(--text-soft); font-weight: 500; }
.ai-finput {
padding: 7px 10px; border-radius: 6px; border: 1px solid var(--hair);
background: var(--surface); font-size: 12px; font-family: monospace;
color: var(--text); outline: none; transition: border-color .15s;
width: 100%; box-sizing: border-box;
}
.ai-finput:focus { border-color: var(--accent); }
.ai-finput::placeholder { color: var(--text-soft); opacity: .6; }
/* -- Model table inside vendor card -- */
.ai-card-models { margin-top: 12px; border-top: 1px solid var(--hair); padding-top: 10px; }
.ai-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.ai-th {
text-align: left; padding: 4px 8px 8px; font-weight: 600;
color: var(--text-soft); font-size: 11px; white-space: nowrap;
}
.ai-trow { border-top: 1px solid var(--hair); }
.ai-tcell { padding: 7px 8px; vertical-align: middle; }
.ai-tcell-id { font-family: monospace; font-weight: 500; font-size: 11.5px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-tcell-name { color: var(--text-soft); font-size: 12px; }
.ai-tcell-ctx { font-size: 11px; color: var(--text-soft); font-family: monospace; white-space: nowrap; }
.ai-tcell-actions { white-space: nowrap; }
.ai-tcell-act { width: 36px; }
.ai-tcell-def { width: 76px; text-align: right; }
/* -- Switch inside model table (smaller) -- */
.ai-sw { width: 32px; height: 18px; }
.ai-sw::after { width: 14px; height: 14px; top: 2px; left: 2px; }
.ai-sw.on::after { left: 16px; }
/* -- Modal overlay -- */
.ai-overlay {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,.45); display: flex;
align-items: center; justify-content: center;
animation: aiFadeIn .15s ease;
}
@keyframes aiFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ai-modal {
background: var(--panel); border-radius: 12px;
border: 1px solid var(--hair); width: 420px; max-width: 92vw;
max-height: 85vh; display: flex; flex-direction: column;
box-shadow: 0 12px 40px rgba(0,0,0,.25);
animation: aiSlideUp .2s ease;
}
@keyframes aiSlideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.ai-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid var(--hair);
font-weight: 600; font-size: 15px;
}
.ai-modal-x {
font-size: 20px; cursor: pointer; color: var(--text-soft);
line-height: 1; padding: 2px 6px; border-radius: 4px;
transition: background .12s;
}
.ai-modal-x:hover { background: rgba(128,128,128,.15); }
.ai-modal-body {
padding: 16px 18px; overflow-y: auto; flex: 1;
display: flex; flex-direction: column; gap: 12px;
}
.ai-modal-field { display: flex; flex-direction: column; gap: 4px; }
.ai-modal-field label { font-size: 12px; font-weight: 500; color: var(--text-soft); }
.ai-modal-field input,
.ai-modal-field select {
padding: 8px 10px; border-radius: 6px; border: 1px solid var(--hair);
background: var(--surface); font-size: 13px; color: var(--text);
font-family: inherit; outline: none; transition: border-color .15s;
}
.ai-modal-field input:focus,
.ai-modal-field select:focus { border-color: var(--accent); }
.ai-modal-field input[type="number"] { font-family: monospace; }
.ai-modal-chk {
display: flex; align-items: center; gap: 8px;
font-size: 13px; cursor: pointer; padding: 2px 0;
}
.ai-modal-chk input[type="checkbox"] {
width: 16px; height: 16px; accent-color: var(--accent);
}
.ai-modal-foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 18px; border-top: 1px solid var(--hair);
}
/* -- Status & misc -- */
.ai-model-default {
font-size: 10px; padding: 3px 8px; border-radius: 5px;
border: 1px solid var(--hair);
background: transparent; cursor: pointer; font-family: inherit;
color: var(--text-soft); transition: all .15s; white-space: nowrap;
}
.ai-model-default:hover { border-color: var(--accent); color: var(--accent); }
.ai-model-default.active {
background: var(--accent); color: #fff; border-color: var(--accent);
}
.ai-empty { text-align: center; padding: 20px; color: var(--text-soft); font-size: 13px; }
.ai-loading { text-align: center; padding: 20px; color: var(--text-soft); }
/* ============================================================
AI CHAT WINDOW
============================================================ */
.aichat { display: flex; height: 100%; overflow: hidden; }
/* --- Sidebar --- */
.aichat-side {
width: 240px; min-width: 200px; border-right: 1px solid var(--hair);
display: flex; flex-direction: column; background: var(--surface);
}
.aichat-new {
display: flex; align-items: center; gap: 6px; margin: 10px;
padding: 9px 14px; border-radius: 8px; border: 1px solid var(--hair);
background: var(--panel); cursor: pointer; color: var(--text);
font-size: 13px; font-family: inherit; transition: background .15s, box-shadow .15s;
}
.aichat-new:hover { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(124,58,237,.25); }
.aichat-list { flex: 1; overflow-y: auto; padding: 4px 6px; }
.aichat-sess {
display: flex; align-items: center; gap: 4px; padding: 8px 10px; margin: 2px 0;
border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--text);
transition: background .12s;
}
.aichat-sess:hover { background: rgba(124,58,237,.06); }
.aichat-sess.active { background: rgba(124,58,237,.12); font-weight: 600; }
.aichat-sess-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aichat-sess-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.aichat-sess-time { font-size: 11px; color: var(--text-soft); }
.aichat-sess-del {
opacity: 0; border: none; background: none; cursor: pointer;
font-size: 15px; color: #ef4444; padding: 2px 4px; line-height: 1; flex-shrink: 0;
}
.aichat-sess:hover .aichat-sess-del { opacity: .5; }
.aichat-sess-del:hover { opacity: 1 !important; }
/* --- Main area --- */
.aichat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--panel); }
/* --- Top bar with selectors --- */
.aichat-topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 14px; border-bottom: 1px solid var(--hair);
background: var(--surface); gap: 10px; flex-shrink: 0;
}
.aichat-selectors { display: flex; gap: 8px; flex: 1; min-width: 0; }
.aichat-sel {
padding: 6px 10px; border-radius: 6px; border: 1px solid var(--hair);
background: var(--panel); color: var(--text); font-size: 12.5px;
font-family: inherit; outline: none; cursor: pointer;
min-width: 100px; max-width: 200px;
transition: border-color .15s;
}
.aichat-sel:focus { border-color: var(--accent); }
.aichat-topbar-actions { display: flex; gap: 4px; flex-shrink: 0; }
.aichat-topbar-btn {
width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--hair);
background: var(--panel); color: var(--text-soft); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s;
}
.aichat-topbar-btn:hover { background: #fef2f2; color: #ef4444; border-color: #fecaca; }
/* --- Messages area --- */
.aichat-msgs {
flex: 1; overflow-y: auto; padding: 20px 16px; display: flex;
flex-direction: column; gap: 16px;
}
/* --- Message bubble --- */
.aichat-msg { display: flex; gap: 10px; max-width: 90%; animation: aichat-fadein .25s ease; }
.aichat-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.aichat-msg-ai { align-self: flex-start; }
@keyframes aichat-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Avatar */
.aichat-msg-avatar {
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; text-transform: uppercase; line-height: 1;
}
.aichat-msg-user .aichat-msg-avatar { background: #7c3aed; color: #fff; }
.aichat-msg-ai .aichat-msg-avatar { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
/* Body */
.aichat-msg-body { min-width: 0; flex: 1; }
/* Content */
.aichat-msg-content {
padding: 10px 14px; border-radius: 14px; font-size: 13.5px;
line-height: 1.6; word-break: break-word;
}
.aichat-msg-user .aichat-msg-content {
background: #7c3aed; color: #fff; border-bottom-right-radius: 4px;
}
.aichat-msg-ai .aichat-msg-content {
background: var(--surface); border: 1px solid var(--hair); border-bottom-left-radius: 4px;
}
.aichat-msg-ai .aichat-msg-content code {
background: rgba(0,0,0,.06); padding: 2px 6px; border-radius: 4px;
font-size: 12px; font-family: 'Consolas','Monaco','Courier New',monospace;
}
.aichat-msg-ai .aichat-msg-content pre {
background: rgba(0,0,0,.06); padding: 12px; border-radius: 8px;
overflow-x: auto; margin: 8px 0; font-size: 12px;
}
.aichat-msg-ai .aichat-msg-content p { margin: 0 0 8px; }
.aichat-msg-ai .aichat-msg-content p:last-child { margin-bottom: 0; }
.aichat-msg-ai .aichat-msg-content ul,
.aichat-msg-ai .aichat-msg-content ol { margin: 4px 0; padding-left: 20px; }
/* Meta / Vendor pill */
.aichat-msg-meta { margin-bottom: 4px; }
.aichat-vendor-pill {
display: inline-block; padding: 2px 8px; border-radius: 10px;
font-size: 10.5px; font-weight: 600; color: var(--accent);
background: rgba(124,58,237,.08); letter-spacing: .3px;
}
/* Copy button */
.aichat-msg-actions { margin-top: 4px; opacity: 0; transition: opacity .15s; }
.aichat-msg:hover .aichat-msg-actions { opacity: 1; }
.aichat-copy-btn {
border: none; background: var(--surface); color: var(--text-soft);
font-size: 11px; padding: 3px 10px; border-radius: 5px; cursor: pointer;
font-family: inherit; border: 1px solid var(--hair);
transition: background .15s, color .15s;
}
.aichat-copy-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Blinking cursor during streaming */
.aichat-cursor {
display: inline-block; width: 2px; height: 14px;
background: var(--accent); margin-left: 2px; vertical-align: text-bottom;
animation: aichat-cursor-blink .6s ease-in-out infinite;
}
@keyframes aichat-cursor-blink { 0%,100%{opacity:1} 50%{opacity:0} }
/* Typing state */
.aichat-msg-typing .aichat-msg-content { min-height: 36px; }
/* Error message */
.aichat-msg-error .aichat-msg-content {
background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;
}
/* --- Input area --- */
.aichat-input-area {
padding: 10px 16px 14px; border-top: 1px solid var(--hair);
background: var(--surface); flex-shrink: 0;
}
.aichat-input-box {
display: flex; align-items: flex-end; gap: 8px;
border: 1px solid var(--hair); border-radius: 12px;
background: var(--panel); padding: 6px 8px 6px 14px;
transition: border-color .15s, box-shadow .15s;
}
.aichat-input-box:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(124,58,237,.1);
}
.aichat-input {
flex: 1; resize: none; border: none; padding: 6px 0;
font-size: 13.5px; font-family: inherit; outline: none;
background: transparent; color: var(--text);
min-height: 20px; max-height: 150px; line-height: 1.4;
}
.aichat-input::placeholder { color: var(--text-soft); }
.aichat-input-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.aichat-send {
width: 34px; height: 34px; border-radius: 50%; border: none;
background: var(--accent); color: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: opacity .15s, transform .1s; flex-shrink: 0;
}
.aichat-send:hover { opacity: .85; transform: scale(1.05); }
.aichat-send.disabled { opacity: .4; pointer-events: none; }
.aichat-stop {
display: none; align-items: center; gap: 4px;
padding: 6px 14px; border-radius: 18px; border: 1px solid #ef4444;
background: #fef2f2; color: #ef4444; cursor: pointer;
font-size: 12px; font-family: inherit; font-weight: 500;
transition: background .15s;
}
.aichat-stop:hover { background: #fee2e2; }
/* --- Welcome screen --- */
.aichat-welcome {
text-align: center; padding: 60px 20px; margin: auto;
display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.aichat-welcome-icon { opacity: .3; }
.aichat-welcome-title {
font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -.3px;
}
.aichat-welcome-sub { font-size: 13px; color: var(--text-soft); max-width: 320px; line-height: 1.5; }
/* --- Empty / Loading --- */
.aichat-empty { text-align: center; padding: 20px; color: var(--text-soft); font-size: 12.5px; }
.aichat-loading { text-align: center; padding: 40px; color: var(--text-soft); font-size: 13px; margin: auto; }
/* --- Typing dots --- */
.aichat-dots span {
animation: aichat-blink 1.4s infinite both;
font-size: 22px; letter-spacing: 2px;
}
.aichat-dots span:nth-child(2) { animation-delay: .2s; }
.aichat-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes aichat-blink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }
/* --- Dark mode overrides --- */
[data-theme="dark"] .aichat-msg-ai .aichat-msg-content { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .aichat-msg-ai .aichat-msg-content code { background: rgba(255,255,255,.1); }
[data-theme="dark"] .aichat-msg-ai .aichat-msg-content pre { background: rgba(255,255,255,.1); }
[data-theme="dark"] .aichat-msg-error .aichat-msg-content { background: #2d1517; color: #fca5a5; border-color: #7f1d1d; }
[data-theme="dark"] .aichat-input-box { background: rgba(255,255,255,.04); }
[data-theme="dark"] .aichat-topbar-btn:hover { background: rgba(239,68,68,.15); }
[data-theme="dark"] .aichat-copy-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .aichat-stop { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.4); }
[data-theme="dark"] .aichat-vendor-pill { background: rgba(124,58,237,.15); }