:root{
  --ink:#12161D; --ink-soft:#1B2129; --paper:#EEF0F0; --card:#FFFFFF; --line:#E1E4E6;
  --muted:#6B7480; --teal:#1F6F72; --teal-deep:#164F52; --amber:#E4972E; --red:#D14C3F;
  --green:#3E8E5B; --blue:#3468C4; --gray:#8B93A0; --radius:10px;
  --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-body);background:var(--paper);color:var(--ink);}
a{color:inherit;}
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh;}
.sidebar{background:var(--ink);color:#D8DCE1;display:flex;flex-direction:column;padding:22px 16px;}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px 22px 6px;border-bottom:1px solid #262C36;margin-bottom:18px;}
.brand-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--teal),var(--amber));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:#0C0F13;font-size:13px;}
.brand-text{font-family:var(--font-display);font-weight:600;font-size:14.5px;line-height:1.2;}
.brand-text span{display:block;font-size:10.5px;color:#8890A0;font-weight:500;letter-spacing:.04em;}
.nav-group-label{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#5C6472;margin:16px 8px 6px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13.5px;font-weight:500;color:#B6BCC6;cursor:pointer;}
.nav-item:hover{background:#1D232C;color:#fff;}
.nav-item.active{background:var(--teal-deep);color:#fff;}
.nav-item .count{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;background:#2A313B;padding:1px 6px;border-radius:20px;color:#B6BCC6;}
.sidebar-foot{margin-top:auto;padding-top:14px;border-top:1px solid #262C36;font-size:11px;color:#5C6472;cursor:pointer;}
.main{display:flex;flex-direction:column;min-width:0;}
.topbar{display:flex;align-items:center;gap:16px;padding:14px 26px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;}
.topbar h1{font-family:var(--font-display);font-size:18px;margin:0;font-weight:600;}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--amber);color:#3A2A08;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;font-family:var(--font-display);cursor:pointer;}
.content{padding:24px 26px 60px;}
.view{display:none;} .view.active{display:block;}
.subhead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.subhead h2{font-family:var(--font-display);font-size:20px;margin:0 0 3px;}
.subhead p{margin:0;color:var(--muted);font-size:13px;}
.btn{border:none;border-radius:8px;padding:9px 16px;font-weight:600;font-size:13px;cursor:pointer;font-family:var(--font-body);}
.btn-primary{background:var(--teal);color:#fff;}
.btn-ghost{background:var(--card);border:1px solid var(--line);color:var(--ink);}
.btn-danger{background:#FBE7E4;color:var(--red);}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;}
.stat-card .label{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600;}
.stat-card .value{font-family:var(--font-display);font-size:28px;font-weight:700;margin:6px 0 2px;}
.grid-2{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;}
.panel h3{font-family:var(--font-display);font-size:14.5px;margin:0 0 14px;display:flex;justify-content:space-between;align-items:center;}
.filters{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.filters select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;background:var(--card);}
.ticket-row{display:grid;grid-template-columns:5px auto 1fr auto auto auto auto;gap:14px;align-items:center;padding:11px 6px 11px 0;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer;}
.ticket-row:last-child{border-bottom:none;}
.ticket-row:hover{background:#FAFBFB;}
.status-bar{align-self:stretch;border-radius:3px;}
.status-new .status-bar{background:var(--red);}
.status-progress .status-bar{background:var(--amber);}
.status-solved .status-bar{background:var(--green);}
.t-main{min-width:0;} .t-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.t-meta{font-size:11.5px;color:var(--muted);margin-top:2px;}
.cat-tag{font-size:10px;color:var(--muted);background:var(--paper);padding:2px 7px;border-radius:5px;font-weight:600;white-space:nowrap;}
.badge{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;}
.badge-new{background:#FBE7E4;color:var(--red);} .badge-progress{background:#FBF0DC;color:#94660D;} .badge-solved{background:#E3F3E9;color:var(--green);}
.bill-row{display:grid;grid-template-columns:5px 1fr auto auto auto auto;gap:14px;align-items:center;padding:11px 6px 11px 0;border-bottom:1px solid var(--line);font-size:13px;}
.bill-row:last-child{border-bottom:none;}
.bill-row.st-overdue .status-bar{background:var(--red);}
.bill-row.st-upcoming .status-bar{background:var(--amber);}
.bill-row.st-scheduled .status-bar{background:var(--blue);}
.bill-row.st-paid .status-bar{background:var(--green);}
.badge-overdue{background:#FBE7E4;color:var(--red);} .badge-upcoming{background:#FBF0DC;color:#94660D;}
.badge-scheduled{background:#E7EEFB;color:var(--blue);} .badge-paid{background:#E3F3E9;color:var(--green);}
.bill-amount{font-family:var(--font-mono);font-weight:600;font-size:13px;}
.bill-actions{display:flex;gap:6px;}
.bill-actions button{padding:4px 10px;font-size:11px;}
.quad-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;white-space:nowrap;}
.quad-ui{background:#FBE4E9;color:#A31E42;} .quad-inu{background:#E7EEFB;color:var(--blue);}
.quad-uni{background:#FCF1DC;color:#94660D;} .quad-nn{background:#EEF0F0;color:var(--gray);}
.assignee{width:24px;height:24px;border-radius:50%;background:var(--ink-soft);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);flex-shrink:0;}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;}
.col{background:#E6E9E9;border-radius:var(--radius);padding:12px;min-height:200px;}
.col-new{border-top:3px solid var(--red);} .col-progress{border-top:3px solid var(--amber);} .col-solved{border-top:3px solid var(--green);}
.col-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-display);font-weight:600;font-size:12.5px;margin-bottom:10px;padding:6px 4px 0;}
.col-head .n{font-family:var(--font-mono);font-weight:500;color:var(--muted);background:var(--card);border-radius:20px;padding:1px 7px;font-size:11px;}
.card{background:var(--card);border-radius:8px;padding:11px 12px;margin-bottom:9px;border:1px solid var(--line);cursor:pointer;}
.card .cid{font-family:var(--font-mono);font-size:10px;color:var(--muted);}
.card .ctitle{font-size:12.5px;font-weight:600;margin:4px 0 8px;line-height:1.3;}
.card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.card-foot{display:flex;justify-content:space-between;align-items:center;}
.dept-tag{font-size:10px;color:var(--muted);background:var(--paper);padding:2px 6px;border-radius:5px;font-weight:600;}
.form-wrap{max-width:640px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;}
.field .hint{font-size:11px;color:var(--muted);font-weight:400;margin-top:4px;}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-family:var(--font-body);font-size:13px;background:var(--paper);}
.field textarea{min-height:90px;resize:vertical;}
.matrix{border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.matrix-row{display:grid;grid-template-columns:1fr 1fr;}
.quad{padding:14px;cursor:pointer;border:2px solid transparent;font-size:12.5px;}
.quad b{display:block;font-family:var(--font-display);font-size:13px;margin-bottom:2px;}
.quad.q-ui{background:#FBE4E9;} .quad.q-inu{background:#E7EEFB;border-right:1px solid var(--line);}
.quad.q-uni{background:#FCF1DC;border-top:1px solid var(--line);} .quad.q-nn{background:#EEF0F0;border-top:1px solid var(--line);border-right:1px solid var(--line);}
.quad.selected{border-color:var(--ink);}
.overlay{position:fixed;inset:0;background:rgba(15,18,22,.5);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;}
.overlay.show{display:flex;}
.modal{background:var(--card);width:560px;max-width:100%;border-radius:12px;padding:26px 28px;max-height:85vh;overflow:auto;}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;}
.close{cursor:pointer;color:var(--muted);font-size:20px;line-height:1;background:none;border:none;}
.modal h2{font-family:var(--font-display);font-size:18px;margin:6px 0 10px;}
.modal-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.who-line{font-size:12px;color:var(--muted);margin-bottom:14px;display:flex;flex-direction:column;gap:3px;}
.status-set{display:flex;gap:8px;margin-bottom:10px;}
.status-set button{flex:1;border:1.5px solid var(--line);background:var(--card);border-radius:8px;padding:8px 0;font-size:12px;font-weight:700;cursor:pointer;}
.status-set button.s-new.active{background:var(--red);border-color:var(--red);color:#fff;}
.status-set button.s-progress.active{background:var(--amber);border-color:var(--amber);color:#fff;}
.status-set button.s-solved.active{background:var(--green);border-color:var(--green);color:#fff;}
.thread{border-top:1px solid var(--line);padding-top:14px;margin-top:6px;}
.msg{font-size:12.5px;margin-bottom:12px;}
.msg b{font-family:var(--font-display);font-size:12px;}
.msg .when{color:var(--muted);font-size:11px;margin-left:6px;}
.msg p{margin:3px 0 0;color:#333;}
.msg.system{color:var(--muted);font-style:italic;}
.note{background:#FBF0DC;border:1px solid #EBD4A0;color:#7A5A0E;font-size:12px;border-radius:8px;padding:10px 14px;margin-bottom:18px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);}
td{padding:10px;border-bottom:1px solid var(--line);}
.pill{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:capitalize;}
.pill-admin{background:#E7EEFB;color:var(--blue);} .pill-it_staff{background:#E3F3E9;color:var(--green);} .pill-manager{background:#F1E6FB;color:#6B3FA0;}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ink);}
.login-card{background:var(--card);border-radius:14px;padding:36px 34px;width:340px;}
.login-card .brand-mark{margin:0 auto 14px;}
.login-card h1{font-family:var(--font-display);font-size:20px;text-align:center;margin:0 0 4px;}
.login-card p{text-align:center;color:var(--muted);font-size:12.5px;margin:0 0 22px;}
.err{color:var(--red);font-size:12.5px;margin-top:10px;text-align:center;}
.chat-msg{margin-bottom:16px;max-width:82%;clear:both;}
.chat-msg.user{margin-left:auto;text-align:right;}
.chat-msg.assistant{margin-right:auto;}
.chat-bubble{display:inline-block;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.55;text-align:left;white-space:pre-wrap;word-break:break-word;}
.chat-msg.user .chat-bubble{background:var(--teal);color:#fff;}
.chat-msg.assistant .chat-bubble{background:var(--paper);color:var(--ink);}
.chat-bubble pre{background:rgba(0,0,0,.08);padding:8px 10px;border-radius:6px;overflow-x:auto;font-family:var(--font-mono);font-size:12px;white-space:pre;}
.chat-bubble code{font-family:var(--font-mono);background:rgba(0,0,0,.08);padding:1px 4px;border-radius:4px;}
.chat-conv-item{padding:8px 10px;border-radius:8px;font-size:12px;cursor:pointer;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);}
.chat-conv-item:hover{background:var(--paper);}
.chat-conv-item.active{background:var(--teal);color:#fff;}
.chat-attach-chip{display:inline-flex;align-items:center;gap:4px;background:var(--paper);border-radius:6px;padding:2px 8px;font-size:11px;margin-right:4px;}
.toast{background:var(--ink);color:#fff;padding:12px 16px;border-radius:8px;font-size:13px;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,.2);opacity:0;transform:translateX(20px);transition:opacity .25s,transform .25s;max-width:320px;}
.toast.show{opacity:1;transform:translateX(0);}
.followup-badge{background:#FCE4EC;color:#A31E5C;}
.msg.followup{background:#FCE4EC;border-left:3px solid #A31E5C;padding:8px 10px;border-radius:6px;}

/* Users & Desks */
.btn-tiny{padding:2px 8px;font-size:10.5px;border-radius:6px;}
.office-box{border:1px solid var(--line);border-radius:10px;margin-bottom:20px;overflow:hidden;background:var(--card);}
.office-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--ink);color:#fff;}
.office-head .name{font-family:var(--font-display);font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:8px;}
.office-head .name .count{font-family:var(--font-mono);font-size:10.5px;color:#B6BCC6;font-weight:500;}
.office-head .actions{display:flex;gap:6px;}
.office-head .actions .btn{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.15);}
.office-head .actions .btn:hover{background:rgba(255,255,255,.18);}
.person-row{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);}
.person-row:last-child{border-bottom:none;}
.person-row:hover{background:#FAFBFB;}
.person-name{font-weight:600;font-size:13px;min-width:140px;flex-shrink:0;cursor:pointer;}
.person-name:hover{text-decoration:underline;}
.person-dept{font-size:10.5px;color:var(--muted);display:block;font-weight:400;}
.desk-tags{display:flex;flex-wrap:wrap;gap:6px;flex:1;}
.desk-tag{display:inline-flex;align-items:center;gap:5px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:3px 8px;font-size:11.5px;font-family:var(--font-mono);color:var(--ink-soft);}
.desk-tag .x{cursor:pointer;color:var(--muted);font-weight:700;}
.desk-tag .x:hover{color:var(--red);}
.add-desk-tag{display:inline-flex;align-items:center;gap:4px;border:1px dashed var(--line);border-radius:6px;padding:3px 9px;font-size:11.5px;color:var(--muted);cursor:pointer;background:none;}
.add-desk-tag:hover{background:var(--paper);color:var(--teal-deep);border-color:var(--teal);}
.person-remove{color:var(--muted);cursor:pointer;font-size:12px;flex-shrink:0;}
.person-remove:hover{color:var(--red);}
.unassigned-row{padding:10px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--paper);}
.unassigned-row .label{font-size:11.5px;color:var(--muted);font-weight:600;flex-shrink:0;}
.add-person-row{padding:9px 16px;text-align:left;}
.add-person-row button{font-size:12px;color:var(--teal-deep);background:none;border:none;cursor:pointer;font-weight:600;padding:0;}
.unassigned-person-row{display:flex;align-items:center;gap:14px;padding:9px 6px;border-bottom:1px solid var(--line);}
.unassigned-person-row:last-child{border-bottom:none;}
.unassigned-person-row .name{font-weight:600;font-size:13px;min-width:140px;flex-shrink:0;cursor:pointer;}
.unassigned-person-row .name:hover{text-decoration:underline;}
.unassigned-person-row .meta{flex:1;font-size:11.5px;color:var(--muted);}

/* Krisp — orange accent */
:root{--orange:#E07B1F;--orange-deep:#B2590F;--orange-light:#FCEBD9;}
.krisp-desk-box{border:1px solid var(--line);border-radius:10px;margin-bottom:20px;overflow:hidden;background:var(--card);}
.krisp-desk-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(135deg,var(--orange-deep),var(--orange));color:#fff;}
.krisp-desk-head .name{font-family:var(--font-display);font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:8px;}
.krisp-desk-head .name .count{font-family:var(--font-mono);font-size:10.5px;color:var(--orange-light);font-weight:500;}
.krisp-desk-head .actions{display:flex;gap:6px;}
.krisp-desk-head .actions .btn{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.2);}
.krisp-desk-head .actions .btn:hover{background:rgba(255,255,255,.26);}
.krisp-entry-row{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line);}
.krisp-entry-row:last-child{border-bottom:none;}
.krisp-entry-row:hover{background:#FFFAF3;}
.krisp-avatar{width:26px;height:26px;border-radius:50%;background:var(--orange-light);color:var(--orange-deep);font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);flex-shrink:0;}
.krisp-agent-name{font-weight:600;font-size:13px;min-width:130px;flex-shrink:0;}
.krisp-email{font-family:var(--font-mono);font-size:11.5px;background:var(--orange-light);color:var(--orange-deep);padding:3px 9px;border-radius:6px;flex-shrink:0;}
.krisp-comment{font-size:12px;color:var(--muted);flex:1;display:flex;align-items:center;gap:5px;}
.krisp-entry-actions{display:flex;gap:6px;flex-shrink:0;}
.krisp-entry-actions button{padding:4px 10px;font-size:11px;}
.krisp-add-row{padding:9px 16px;text-align:left;}
.krisp-add-row button{font-size:12px;color:var(--orange-deep);background:none;border:none;cursor:pointer;font-weight:600;padding:0;}
.btn-orange{background:var(--orange);color:#fff;}

/* Email Directory */
.pw-cell{display:flex;align-items:center;gap:8px;}
.pw-masked{font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:1px;}
.pw-revealed{font-family:var(--font-mono);font-size:12px;background:var(--paper);padding:3px 8px;border-radius:6px;}
.pw-toggle{font-size:11px;color:var(--teal-deep);background:none;border:none;cursor:pointer;font-weight:600;padding:0;white-space:nowrap;}
.emaildir-note{background:#E7EEFB;border:1px solid #C7D7F5;color:#2A4A8A;font-size:12px;border-radius:8px;padding:10px 14px;margin-bottom:16px;}

/* Telephony */
.tel-brand-box{border:1px solid var(--line);border-radius:10px;margin-bottom:20px;overflow:hidden;background:var(--card);}
.tel-brand-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--ink);color:#fff;}
.tel-brand-head .name{font-family:var(--font-display);font-weight:600;font-size:14.5px;}
.tel-brand-head .actions{display:flex;gap:6px;}
.tel-brand-head .actions .btn{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.15);}
.tel-brand-head .actions .btn:hover{background:rgba(255,255,255,.18);}
.tel-brand-body{padding:14px 16px;}
.tel-desk-block{border:1px solid var(--line);border-radius:8px;margin-bottom:14px;overflow:hidden;}
.tel-desk-block:last-child{margin-bottom:0;}
.tel-desk-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--paper);}
.tel-desk-head .name{font-family:var(--font-display);font-weight:600;font-size:13px;}
.tel-desk-head .actions{display:flex;gap:6px;}
table.tel-grid{border-collapse:collapse;font-size:12.5px;width:100%;}
table.tel-grid th, table.tel-grid td{border:1px solid var(--line);padding:0;}
.tel-agent-head-cell{background:var(--paper);width:140px;min-width:140px;padding:8px 12px;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
.tel-provider-head{background:var(--paper);padding:8px 12px;font-family:var(--font-display);font-weight:600;font-size:11.5px;min-width:150px;}
.tel-agent-cell{padding:8px 12px;font-weight:600;font-size:12.5px;position:relative;}
.tel-agent-cell .del{position:absolute;top:4px;right:6px;color:var(--muted);cursor:pointer;font-size:11px;display:none;}
.tel-agent-cell:hover .del{display:inline;}
.tel-agent-cell .del:hover{color:var(--red);}
.tel-data-cell{cursor:pointer;text-align:center;}
.tel-data-cell:hover{background:#FAFBFB;}
.tel-cell-inner{padding:8px 10px;font-family:var(--font-mono);font-size:11.5px;}
.tel-cell-empty{color:var(--line);font-size:16px;}
.tel-add-agent-row td{padding:8px 12px;background:var(--paper);}
.tel-add-agent-row button{font-size:11.5px;color:var(--teal-deep);background:none;border:none;cursor:pointer;font-weight:600;padding:0;}
.tel-add-desk-row{padding:4px 0;}
.tel-add-desk-row button{font-size:12px;color:var(--teal-deep);background:none;border:none;cursor:pointer;font-weight:600;padding:0;}

/* Truncate long cell content instead of letting it wrap and break row alignment — full value still available on hover via title attribute */
.truncate{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle;}
.truncate-sm{max-width:100px;}
.truncate-lg{max-width:240px;}
#emailDirTableEl{table-layout:fixed;}
#emailDirTableEl td, #emailDirTableEl th{overflow:hidden;}

.search-bar{flex:1;min-width:200px;padding:7px 12px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;font-family:var(--font-body);}
.filter-select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;background:var(--card);}