/* Zeevou Brand Book 2026 tokens */
:root{
  --purple-lighter:#F6F1FD; --purple-light:#C69BF9; --purple:#6C1DCC; --purple-dark:#4A148C; --purple-darker:#39106D;
  --yellow-lighter:#FFF8E1; --yellow-light:#FFE182; --yellow:#FFC400; --yellow-dark:#BE9100;
  --success-lighter:#E5FDE7; --success-light:#5BE584; --success:#00AB55; --success-dark:#007B55;
  --error-lighter:#F7D7E8; --error-light:#FE9BC8; --error:#E30168; --error-dark:#A3014A;
  --warning-lighter:#FFF8DF; --warning-light:#FFD166; --warning:#FF7A00; --warning-dark:#D15C1D;
  --info-lighter:#E5EEFF; --info-light:#84A9FF; --info:#3366FF; --info-dark:#1939B7;
  --g0:#FFFFFF; --g10:#F9FAFB; --g20:#F4F6F8; --g30:#DFE3E8; --g40:#C4CDD5; --g50:#919EAB;
  --g60:#637381; --g70:#454F5B; --g80:#212B36; --g90:#161C24;
  --font-head:'Nunito',system-ui,sans-serif;
  --font-body:'Roboto',system-ui,sans-serif;
  --radius:12px;
  --shadow:0 2px 8px rgba(22,28,36,.08);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font-body);font-size:14px;color:var(--g80);background:var(--g20)}
h1,h2,h3,h4,.btn,.wsname,.tab{font-family:var(--font-head)}
h1{font-weight:900}h2{font-weight:800;margin:0 0 6px}h3{font-weight:700;color:var(--g80);margin:0 0 10px}
a{color:var(--purple);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--g60);font-weight:400}
.warn{color:var(--warning-dark);font-weight:600}
.hidden{display:none!important}
code{background:var(--g20);border:1px solid var(--g30);padding:1px 6px;border-radius:6px;font-size:12px}
hr{border:none;border-top:1px solid var(--g30);margin:20px 0}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:248px;flex-shrink:0;background:var(--g0);border-right:1px solid var(--g30);
  display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
.logo img{width:170px;display:block;margin:4px 8px 18px}
.maincol{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:60px;background:var(--g0);border-bottom:1px solid var(--g30);display:flex;
  align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:40}
.pagetitle{font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--g80)}
.pagetitle .crumb{color:var(--g50);font-weight:600}
main{padding:26px 28px;max-width:1280px;width:100%}

/* sidebar nav */
nav{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--g70);
  font-family:var(--font-head);font-weight:700;font-size:13.5px}
nav a:hover{background:var(--g10);text-decoration:none}
nav a.on{background:var(--purple-lighter);color:var(--purple)}
nav a.on .ic{color:var(--purple)}
.ic{width:18px;height:18px;flex-shrink:0}
.navlabel{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--g50);margin:14px 12px 6px;font-family:var(--font-head)}
.sidefoot{margin-top:auto;padding:12px;font-family:var(--font-head);font-weight:700;
  font-size:11px;color:var(--g40);letter-spacing:.06em;text-transform:uppercase}
.badge{background:var(--error);color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:700;margin-left:auto}

/* workspace dropdown */
.wsdrop{position:relative;margin-bottom:14px}
.wsbtn{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:1px solid var(--g30);
  border-radius:var(--radius);background:var(--g10);cursor:pointer;font:inherit;text-align:left}
.wsbtn:hover{border-color:var(--purple-light)}
.wsbtn .ic{margin-left:auto;color:var(--g50)}
.wsname{font-weight:800;font-size:14px;color:var(--g80);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsavatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;
  border-radius:9px;background:var(--purple);color:#fff;font-family:var(--font-head);font-weight:800;font-size:12px}
.wsavatar.sm{width:24px;height:24px;font-size:10px;border-radius:7px}

/* dropdown menus */
.dropwrap{position:relative}
.menu{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:var(--g0);
  border:1px solid var(--g30);border-radius:var(--radius);box-shadow:0 8px 24px rgba(22,28,36,.16);
  padding:6px;z-index:60;display:none}
.menu.show{display:block}
.topactions .menu{left:auto;right:0}
.menu.wide{min-width:340px;max-width:400px}
.menuhead{padding:8px 10px;font-size:12px;font-weight:700;color:var(--g60);font-family:var(--font-head)}
.menuitem{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;color:var(--g80);width:100%;font-size:13.5px}
.menuitem:hover{background:var(--g10);text-decoration:none}
.menuitem.sel{background:var(--purple-lighter);color:var(--purple);font-weight:700}
.belllist{max-height:380px;overflow-y:auto}
.belllist .menuitem{white-space:normal;line-height:1.4;flex:1}
.belllist .menuitem.unread{background:var(--purple-lighter)}
.belllist time{display:block;font-size:11px;color:var(--g50)}
.bellhead{display:flex;align-items:center;justify-content:space-between}
.bellitem{display:flex;align-items:flex-start;gap:2px}
.bellx{border:none;background:none;cursor:pointer;color:var(--g40);padding:8px 6px;border-radius:6px;
  font-size:11px;flex-shrink:0}
.bellx:hover{color:var(--error);background:var(--error-lighter)}

/* topbar */
.topactions{display:flex;gap:10px;align-items:center}
.iconbtn{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--g30);background:var(--g0);cursor:pointer;color:var(--g70)}
.iconbtn:hover{background:var(--g10)}
.iconbtn .badge.bell{position:absolute;top:-4px;right:-4px;margin:0}
.iconbtn.avatar{background:var(--purple);color:#fff;border:none;font-family:var(--font-head);font-weight:800;font-size:13px}
.avatar{display:inline-flex;align-items:center;justify-content:center;background:var(--purple);color:#fff;
  font-family:var(--font-head);font-weight:800;border-radius:50%}
.avatar.sm{width:32px;height:32px;font-size:12px}
.avatar.lg{width:56px;height:56px;font-size:19px}

/* ---------- components ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--g30);background:var(--g0);
  padding:9px 16px;border-radius:10px;cursor:pointer;font-family:var(--font-head);font-weight:700;
  font-size:13.5px;color:var(--g80)}
.btn:hover{background:var(--g10);text-decoration:none}
.btn.primary{background:var(--purple);border-color:var(--purple);color:#fff}
.btn.primary:hover{background:var(--purple-dark)}
.btn.danger{color:var(--error);border-color:var(--error-lighter)}
.btn.danger:hover{background:var(--error-lighter)}
.btn.sm{padding:5px 11px;font-size:12.5px;border-radius:8px}
.btn.full{width:100%;justify-content:center;margin-top:16px}
.btn.ghost{border:none;background:transparent;color:var(--g50)}
.btn.ghost:hover{color:var(--purple);background:var(--purple-lighter)}
.btn:disabled{opacity:.55;cursor:not-allowed}

label{display:block;margin:13px 0 5px;font-weight:600;font-size:13px;color:var(--g70)}
input,textarea,select{width:100%;padding:10px 12px;border:1px solid var(--g30);border-radius:10px;
  font:inherit;color:var(--g80);background:var(--g0)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-lighter)}
textarea{resize:vertical}
select{width:auto}
.inline{display:inline}

.alert{padding:11px 14px;border-radius:10px;margin:0 0 14px;font-weight:500}
.alert.error{background:var(--error-lighter);color:var(--error-dark)}
.alert.info{background:var(--info-lighter);color:var(--info-dark)}
.chip{display:inline-block;background:var(--g20);color:var(--g70);border-radius:20px;padding:2px 11px;
  font-size:12px;font-weight:600}
.chip.purple{background:var(--purple-lighter);color:var(--purple)}
.chip.green{background:var(--success-lighter);color:var(--success-dark)}
.chip.yellow{background:var(--yellow-lighter);color:var(--yellow-dark)}

.panel{background:var(--g0);border:1px solid var(--g30);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.panel.narrow{max-width:560px}
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.pagehead h2{display:flex;align-items:center;gap:10px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.split{display:grid;grid-template-columns:1fr 430px;gap:22px;align-items:start}
@media(max-width:1100px){.twocol,.split{grid-template-columns:1fr}}

/* status + dots */
.status{font-size:11px;padding:3px 10px;border-radius:20px;font-weight:800;text-transform:uppercase;
  font-family:var(--font-head);letter-spacing:.04em}
.status.active{background:var(--success-lighter);color:var(--success-dark)}
.status.paused{background:var(--warning-lighter);color:var(--warning-dark)}
.status.draft{background:var(--g20);color:var(--g60)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:6px}
.dot.success{background:var(--success)}
.dot.error{background:var(--error)}
.dot.running{background:var(--warning)}

/* live run effects */
.spinner{display:inline-block;width:13px;height:13px;border:2.5px solid var(--purple-light);
  border-top-color:var(--purple);border-radius:50%;margin-right:7px;vertical-align:-2px;
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
tr.runlive td{background:linear-gradient(90deg,var(--purple-lighter) 0%,#fff 40%,var(--purple-lighter) 80%);
  background-size:200% 100%;animation:shimmer 1.8s linear infinite;font-weight:600;color:var(--purple-dark)}
@keyframes shimmer{to{background-position:-200% 0}}
.livetext{color:var(--purple);animation:pulse 1.6s ease-in-out infinite}
tr.runsettle td{animation:settle 1.6s ease-out}
@keyframes settle{0%{background:var(--success-lighter)}100%{background:transparent}}
.askzee{margin-left:8px;color:var(--purple);border-color:var(--purple-light);font-size:11.5px;
  padding:3px 10px;vertical-align:1px}
.askzee:hover{background:var(--purple-lighter)}

/* automation cards */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin-bottom:14px}
.autocard{background:var(--g0);border:1px solid var(--g30);border-radius:var(--radius);box-shadow:var(--shadow);
  display:flex;flex-direction:column}
.autocard:hover{border-color:var(--purple-light)}
.autolink{display:block;padding:16px;color:inherit;flex:1}
.autolink:hover{text-decoration:none}
.autocard h3{margin:8px 0 4px}
.autotop{display:flex;align-items:center;gap:6px}
.autometa{color:var(--g60);font-size:12.5px;margin-top:8px;line-height:1.5}
.autoactions{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--g20)}
.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}

/* empty state */
.emptystate{background:var(--g0);border:1px dashed var(--g40);border-radius:var(--radius);
  padding:48px 24px;text-align:center;color:var(--g60)}
.emptystate h2,.emptystate h3{color:var(--g80);margin:14px 0 8px}
.emptystate .btn{margin-top:14px}

/* tables */
.table{width:100%;border-collapse:collapse}
.table.panel{padding:0;overflow:hidden}
.table td,.table th{padding:11px 14px;border-bottom:1px solid var(--g20);font-size:13.5px;text-align:left;vertical-align:middle}
.table th{font-family:var(--font-head);font-weight:800;font-size:12px;color:var(--g60);
  text-transform:uppercase;letter-spacing:.05em;background:var(--g10)}
.table tr:last-child td{border-bottom:none}
.mutedrow{opacity:.62}
.runrow{cursor:pointer}
.runrow:hover{background:var(--g10)}
.runout{display:none}
.runout.open{display:table-row}
.runout pre{white-space:pre-wrap;font-size:12px;background:var(--g90);color:var(--g30);
  padding:14px;border-radius:10px;max-height:320px;overflow:auto;margin:6px 0}

/* n8n-style workflow canvas */
.flowcanvas{display:flex;align-items:center;overflow-x:auto;padding:30px 18px;border-radius:12px;
  border:1px solid var(--g30);background-color:var(--g10);
  background-image:radial-gradient(var(--g30) 1.1px, transparent 1.1px);background-size:17px 17px}
.fnode{flex-shrink:0;width:216px;background:var(--g0);border:1px solid var(--g30);border-radius:10px;
  box-shadow:0 2px 6px rgba(22,28,36,.09);transition:border-color .15s, box-shadow .15s;overflow:hidden}
.fnode:hover{border-color:var(--purple-light);box-shadow:0 5px 16px rgba(108,29,204,.15)}
.fnodehead{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--g20);
  background:var(--g10)}
.fnode.trigger .fnodehead{background:var(--purple);border-bottom-color:var(--purple-dark)}
.fnode.trigger .fnodetype{color:var(--purple-light)}
.fnode.trigger{border-color:var(--purple-dark)}
.fnodeicon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;
  background:var(--purple-lighter);color:var(--purple);flex-shrink:0}
.fnode.trigger .fnodeicon{background:var(--yellow);color:var(--g90)}
.fic{width:14px;height:14px;stroke-width:2.2}
.fnodetype{font-family:var(--font-head);font-weight:800;font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--g50)}
.fnodetitle{font-family:var(--font-head);font-weight:800;font-size:13.5px;color:var(--g80);
  padding:9px 12px 3px;line-height:1.35}
.fnodedetail{color:var(--g60);font-size:12px;line-height:1.45;padding:0 12px 11px}
.fconn{display:flex;align-items:center;flex-shrink:0;width:46px}
.fconndot{width:7px;height:7px;border-radius:50%;background:var(--g40);flex-shrink:0}
.fconnline{flex:1;height:2px;background:var(--g40)}
.fconnarrow{width:0;height:0;border:5px solid transparent;border-left:7px solid var(--g40);flex-shrink:0}

/* automation card meta rows */
.metalist{display:flex;flex-direction:column;gap:5px;margin-top:10px;font-size:12.5px}
.metalist.wide{max-width:560px;margin:6px 0 10px;font-size:13px}
.metarow{display:flex;gap:8px;align-items:center}
.metalabel{flex-shrink:0;width:104px;color:var(--g50);font-weight:600;display:inline-flex;
  align-items:center;gap:6px}
.metalist.wide .metalabel{width:120px}
.mic{width:13px;height:13px;flex-shrink:0}
.metarow .ok{color:var(--success-dark)}
.metarow .bad{color:var(--error-dark)}

/* integrations */
.intgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.intcard{background:var(--g0);border:1px solid var(--g30);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.intcard.on{border-color:var(--success-light)}
.intcard.off{opacity:.72}
.inttop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.inttop b{font-family:var(--font-head);font-size:15px}

/* chat */
.chatpage{max-width:860px}
.chatpage.full{max-width:none}
.chatpage.side{max-width:none}
.chatbox{background:var(--g0);border:1px solid var(--g30);border-radius:var(--radius);display:flex;
  flex-direction:column;height:calc(100vh - 150px);box-shadow:var(--shadow)}
.chatpage.side .chatbox{height:calc(100vh - 130px);position:sticky;top:80px}
.chathead{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--g30);
  font-family:var(--font-head);font-weight:800}
.botavatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:10px;background:var(--yellow);color:var(--g90);font-weight:900}
.busytag{font-size:12px;font-weight:600;color:var(--warning-dark);background:var(--warning-lighter);
  border-radius:20px;padding:3px 11px}
.chatlog{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:4px}
.msgrow{display:flex;gap:9px;margin-top:10px;max-width:92%}
.msgrow.mine{align-self:flex-end;flex-direction:row-reverse}
.msgrow .avatar.sm{width:28px;height:28px;font-size:11px;flex-shrink:0;margin-top:16px}
.msgrow.bot .avatar.sm{background:var(--yellow);color:var(--g90)}
.msgcol{display:flex;flex-direction:column;gap:2px;min-width:0}
.msgname{font-size:11.5px;font-weight:700;color:var(--g50);padding:0 6px;font-family:var(--font-head)}
.msgrow.mine .msgname{text-align:right}
.msg{padding:10px 14px;border-radius:14px;line-height:1.5;font-size:13.5px;
  background:var(--g20);color:var(--g80);border-bottom-left-radius:4px;overflow-wrap:break-word}
.msgrow.mine .msg{background:var(--purple);color:#fff;border-bottom-left-radius:14px;border-bottom-right-radius:4px}
.msgrow.mine .msg a{color:var(--yellow-light)}
.msg.pending{color:var(--g50)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
/* streaming reply effects */
.msg.waiting{display:flex;align-items:center;gap:10px;font-style:italic}
.workingtext{transition:opacity .25s ease}
.typingdots{display:inline-flex;gap:4px;align-items:center}
.typingdots i{width:7px;height:7px;border-radius:50%;background:var(--purple);display:inline-block;
  animation:tdots 1.2s ease-in-out infinite}
.typingdots i:nth-child(2){animation-delay:.15s}
.typingdots i:nth-child(3){animation-delay:.3s}
@keyframes tdots{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-5px);opacity:1}}
.msg.streaming{position:relative;border:1.5px solid transparent;
  background:linear-gradient(var(--g20),var(--g20)) padding-box,
             linear-gradient(120deg,var(--purple-light),var(--yellow),var(--purple)) border-box;
  background-size:100% 100%,300% 300%;animation:streamborder 2.6s linear infinite}
@keyframes streamborder{to{background-position:0 0,300% 0}}
.streamcursor{display:inline-block;width:9px;height:15px;border-radius:2.5px;vertical-align:-2px;
  margin-left:3px;background:linear-gradient(180deg,var(--purple),var(--purple-light));
  animation:cursorblink .9s steps(2,start) infinite}
@keyframes cursorblink{to{visibility:hidden}}
.avatar.thinkglow{animation:avatarglow 1.6s ease-in-out infinite}
@keyframes avatarglow{0%,100%{box-shadow:0 0 0 0 rgba(255,196,0,.55)}50%{box-shadow:0 0 0 7px rgba(255,196,0,0)}}
.msg.system{background:var(--info-lighter);color:var(--info-dark);font-size:12.5px;align-self:center}
.msgrow.sys{align-self:center}
.msgname time{font-weight:400;color:var(--g40);font-size:10.5px;margin-left:4px}
/* markdown inside messages */
.msg p{margin:0 0 8px}.msg p:last-child{margin:0}
.msg ul,.msg ol{margin:4px 0;padding-left:20px}
.msg li{margin:2px 0}
.msg blockquote{margin:6px 0;padding:4px 12px;border-left:3px solid var(--purple-light);color:var(--g60)}
.msg code{background:rgba(22,28,36,.08);padding:1px 5px;border-radius:5px;font-size:12px;border:none}
.msgrow.mine .msg code{background:rgba(255,255,255,.2);color:#fff}
.msg pre{background:var(--g90);color:var(--g30);padding:10px;border-radius:8px;overflow-x:auto;font-size:12px}
.msg pre code{background:none;color:inherit}
.msg h1,.msg h2,.msg h3,.msg h4{font-size:14.5px;margin:8px 0 4px}
.msg table{border-collapse:collapse;margin:6px 0}
.msg th,.msg td{border:1px solid var(--g30);padding:4px 9px;font-size:12.5px}
/* automation card inside a message */
.autochip{display:flex;align-items:center;gap:11px;background:var(--purple-lighter);
  border:1.5px solid var(--purple-light);border-radius:12px;padding:11px 14px;margin:8px 0 2px;
  color:var(--g80);max-width:420px}
.autochip:hover{text-decoration:none;border-color:var(--purple);box-shadow:var(--shadow)}
.autochipicon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;
  background:var(--purple);border-radius:10px;color:#fff}
.autochipicon svg{width:18px;height:18px}
.autochipsub{color:var(--g60);font-size:12px}
.autochiparrow{margin-left:auto;color:var(--purple);display:flex;flex-shrink:0}
.autochiparrow svg{width:17px;height:17px}
.filechip{display:inline-flex;align-items:center;gap:5px;background:var(--g20);border:1px solid var(--g30);
  border-radius:16px;padding:3px 11px;font-size:12.5px;margin:2px 4px 2px 0}
.filechip svg{width:13px;height:13px;flex-shrink:0}
.msgrow.mine .filechip{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#fff}
.filechip button{border:none;background:none;cursor:pointer;color:var(--g50);padding:0 2px}

/* composer */
.chatcomposer{border-top:1px solid var(--g30);position:relative}
.chatform{display:flex;gap:9px;padding:12px 13px;align-items:center}
.composerbox{flex:1;display:flex;align-items:center;gap:4px;border:1px solid var(--g30);
  border-radius:14px;padding:0 8px 0 0;background:var(--g0)}
.composerbox:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-lighter)}
.chatinput{flex:1;min-height:21px;max-height:170px;overflow-y:auto;padding:10px 12px;outline:none;
  font:inherit;line-height:1.5;color:var(--g80)}
.chatinput:empty:before{content:attr(data-placeholder);color:var(--g50);pointer-events:none}
.chatinput.dim{opacity:.55}
.chatinput ul,.chatinput ol{margin:4px 0;padding-left:20px}
.chatinput a{color:var(--purple)}
.composeractions{display:flex;gap:2px;align-items:center}
.mentionchip{display:inline-block;background:var(--purple-lighter);color:var(--purple);
  border-radius:7px;padding:0 7px;font-weight:600;white-space:nowrap}
.msgrow.mine .mentionchip{background:rgba(255,255,255,.22);color:#fff}
.cabtn{border:none;background:none;cursor:pointer;width:32px;height:32px;border-radius:9px;
  color:var(--g50);display:inline-flex;align-items:center;justify-content:center}
.cabtn:hover{background:var(--g20);color:var(--purple)}
.tic{width:17px;height:17px}
.sendbtn{border-radius:50%;width:42px;height:42px;justify-content:center;padding:0;flex-shrink:0}
.sendbtn .tic{width:16px;height:16px;margin-left:-2px}
.attachbar{padding:8px 14px 0}
/* right-click formatting menu */
.ctxmenu{position:absolute;z-index:80;display:flex;align-items:center;gap:1px;background:var(--g90);
  border-radius:11px;padding:5px 7px;box-shadow:0 10px 28px rgba(22,28,36,.35)}
.ctxmenu button,.ctxmenu .ctxcolor{border:none;background:none;cursor:pointer;width:29px;height:28px;
  border-radius:7px;color:var(--g30);display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-family:var(--font-head);font-weight:800}
.ctxmenu button:hover,.ctxmenu .ctxcolor:hover{background:var(--g70);color:#fff}
.ctxmenu .tsep{width:1px;height:16px;background:var(--g70);margin:0 4px}
.ctxmenu .tic{width:14px;height:14px}
.ctxcolor{position:relative;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2.5px}
.ctxcolor input{position:absolute;inset:0;opacity:0;cursor:pointer}
.alic{display:inline-block;width:14px;height:10px;position:relative}
.alic:before,.alic:after{content:'';position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:1px}
.alic:before{top:1px}
.alic:after{bottom:1px;width:9px}
.alic.c:after{left:2.5px;right:auto}
.alic.r:after{left:auto;right:0}
.emojipanel{position:absolute;bottom:100%;left:12px;background:var(--g0);border:1px solid var(--g30);
  border-radius:12px;box-shadow:0 8px 24px rgba(22,28,36,.18);padding:10px;display:grid;
  grid-template-columns:repeat(10,30px);gap:2px;z-index:70}
.emojipanel button{border:none;background:none;font-size:17px;cursor:pointer;border-radius:6px;padding:2px}
.emojipanel button:hover{background:var(--g20)}
.mentionmenu{position:absolute;bottom:100%;left:12px;min-width:240px;background:var(--g0);
  border:1px solid var(--g30);border-radius:12px;box-shadow:0 8px 24px rgba(22,28,36,.18);
  padding:5px;z-index:70;max-height:260px;overflow-y:auto}
.mhead{font-size:11px;font-weight:800;color:var(--g50);padding:5px 9px;text-transform:uppercase;
  font-family:var(--font-head);letter-spacing:.05em}
.mi{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:13.5px}
.mi svg{width:14px;height:14px;flex-shrink:0;color:var(--g50)}
.mi:hover,.mi.sel{background:var(--purple-lighter);color:var(--purple)}
.mi:hover svg,.mi.sel svg{color:var(--purple)}
.chatempty{text-align:center;color:var(--g60);margin:auto;padding:20px;display:flex;flex-direction:column;
  align-items:center;gap:6px}
.chatempty h3{margin:8px 0 2px}
.example{display:block;width:100%;max-width:440px;text-align:left;background:var(--purple-lighter);
  border:1px solid transparent;color:var(--purple-dark);border-radius:10px;padding:10px 14px;margin-top:8px;
  cursor:pointer;font:inherit;font-size:13px}
.example:hover{border-color:var(--purple-light)}

/* pick lists / modals */
.filterbox{margin-bottom:8px}
.picklist{max-height:260px;overflow-y:auto;border:1px solid var(--g30);border-radius:10px;padding:4px}
.picklist.short{max-height:170px}
.pickitem{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;margin:0;font-weight:400}
.pickitem:hover{background:var(--g10)}
.pickitem input{width:auto}
.modal{position:fixed;inset:0;background:rgba(22,28,36,.5);display:flex;align-items:center;
  justify-content:center;z-index:100;padding:20px}
.modalcard{background:var(--g0);border-radius:16px;padding:24px;width:100%;max-width:520px;
  max-height:88vh;overflow-y:auto;box-shadow:0 16px 48px rgba(22,28,36,.3)}
.modalactions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.uicard{max-width:420px}
.btn.dangerfill{background:var(--error);border-color:var(--error);color:#fff;font-weight:700}
.btn.dangerfill:hover{background:var(--error-dark)}

/* toggles, tabs */
.togglerow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--g20)}
.ticker{width:30px;height:30px;border-radius:8px;border:2px solid var(--g30);background:var(--g0);
  cursor:pointer;font-weight:800;color:var(--success);flex-shrink:0}
.ticker.yes{background:var(--success-lighter);border-color:var(--success-light)}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--g30);margin-bottom:20px}
.tab{padding:9px 18px;font-weight:800;color:var(--g60);border-radius:10px 10px 0 0;margin-bottom:-2px;
  border-bottom:2px solid transparent;font-size:13.5px}
.tab:hover{text-decoration:none;color:var(--purple)}
.tab.on{color:var(--purple);border-bottom-color:var(--purple)}

/* profile */
.profilehead{display:flex;gap:18px;align-items:center;margin:8px 0 24px;padding-bottom:20px;
  border-bottom:1px solid var(--g20)}
.profilehead .avatar.lg{flex-shrink:0}
.profilehead > div{display:flex;flex-direction:column;gap:5px;line-height:1.5}
.profilehead .chip{margin-right:4px}
.twocol .panel form .btn{margin-top:18px}
.twocol .panel + .panel{}

/* credentials */
.credbox{background:var(--g90);color:var(--g30);padding:10px;border-radius:8px;font-size:12px;
  white-space:pre-wrap;max-width:260px;overflow:auto}

/* toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--g90);color:#fff;
  padding:12px 20px;border-radius:12px;z-index:200;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.3)}

/* ---------- auth ---------- */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--purple-lighter) 0%,var(--g10) 45%,var(--yellow-lighter) 100%);padding:20px}
.authpanel{width:430px;max-width:100%}
.authlogo{width:210px;display:block;margin:0 auto 22px}
.authcard{background:var(--g0);border-radius:18px;padding:30px;box-shadow:0 12px 40px rgba(57,16,109,.14)}
.authcard h1{font-size:22px;margin:0 0 6px;color:var(--g90)}
.center{text-align:center}
.authfoot{text-align:center;color:var(--g50);font-size:12px;margin-top:18px;font-family:var(--font-head);font-weight:600}
.googlebtn{margin-top:4px;gap:10px}
.orsep{display:flex;align-items:center;gap:12px;color:var(--g50);font-size:12px;margin:16px 0 2px}
.orsep:before,.orsep:after{content:'';flex:1;height:1px;background:var(--g30)}

@media(max-width:860px){
  .sidebar{width:70px;padding:12px 8px}
  .logo img{width:46px;overflow:hidden;object-fit:cover;object-position:left}
  .wsname,.sidefoot,.navlabel{display:none}
  nav a{justify-content:center;padding:11px}
  nav a .ic{margin:0}
  nav a{font-size:0}
  .wsbtn{justify-content:center}
  .wsbtn .ic{display:none}
  main{padding:18px 14px}
}