:root { --ink:#152321; --muted:#687471; --paper:#f3f1e9; --card:#fffef9; --line:#d7d9d0; --accent:#e15f3f; --green:#1f6d58; --shadow:0 12px 35px rgba(25,38,34,.08); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 80% 0,#e4ede5 0,transparent 32%),var(--paper); }
button,input,select,textarea { font:inherit; }
button { border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:9px; padding:.68rem .95rem; cursor:pointer; font-weight:650; }
button:hover { border-color:#9aa39f; }
.primary { color:white; border-color:var(--green); background:var(--green); }
.topbar { display:flex; justify-content:space-between; align-items:flex-end; padding:2rem clamp(1rem,4vw,4rem) 1.4rem; border-bottom:1px solid var(--line); }
h1,h2,p { margin:0; } h1 { font-family:Georgia,serif; font-size:clamp(2rem,4vw,3.6rem); font-weight:500; letter-spacing:-.04em; } h2 { font-size:1.05rem; }
.eyebrow { color:var(--accent); font-size:.68rem; font-weight:800; letter-spacing:.16em; margin-bottom:.45rem; }
.actions { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }.status { color:var(--muted); font-size:.82rem; }
.user-chip { background:#e7f0eb; color:var(--green); border-radius:999px; padding:.4rem .8rem; font-size:.8rem; font-weight:700; }
.logout { color:var(--muted); font-size:.8rem; text-decoration:none; font-weight:600; } .logout:hover { color:var(--ink); }
.hint { color:var(--muted); font-size:.82rem; margin:0 0 1rem; }
.user-add { display:grid; grid-template-columns:1fr auto auto; gap:.6rem; margin-bottom:1rem; }
.users-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; max-height:50vh; overflow:auto; }
.users-list li { display:flex; justify-content:space-between; align-items:center; gap:.8rem; padding:.6rem .8rem; border:1px solid var(--line); border-radius:9px; }
.users-list small { display:block; color:var(--muted); margin-top:.15rem; }
.users-list .user-actions { display:flex; gap:.4rem; flex-shrink:0; } .users-list .user-actions button { padding:.4rem .6rem; font-size:.78rem; }
.users-list li.blocked strong { color:var(--muted); text-decoration:line-through; }
.users-list .you { color:var(--muted); font-size:.75rem; font-weight:700; }
#usersDialog { border:0; border-radius:15px; width:min(520px,calc(100vw - 2rem)); padding:1.3rem; box-shadow:0 25px 90px rgba(12,24,21,.3); }
#usersDialog::backdrop { background:rgba(15,27,24,.5); backdrop-filter:blur(3px); }
main { padding:1.4rem clamp(1rem,4vw,4rem) 3rem; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:1.2rem; }
.metrics article { background:rgba(255,254,249,.78); padding:1rem 1.25rem; }.metrics span { display:block; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }.metrics strong { display:block; font-size:1.55rem; margin-top:.25rem; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:1.2rem; align-items:start; }
.asset-panel,.bot-panel { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.toolbar { display:grid; grid-template-columns:minmax(200px,1fr) repeat(4,minmax(120px,160px)) auto; gap:.75rem; padding:1rem; border-bottom:1px solid var(--line); align-items:end; }
label span { display:block; color:var(--muted); font-size:.73rem; font-weight:700; margin-bottom:.35rem; }
input,select,textarea { width:100%; border:1px solid var(--line); border-radius:8px; background:white; padding:.68rem .75rem; color:var(--ink); outline:none; } input:focus,select:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(31,109,88,.1); }
.table-wrap { overflow:auto; max-height:66vh; } table { width:100%; border-collapse:collapse; min-width:850px; } th { position:sticky; top:0; background:#f7f6f0; z-index:1; text-align:left; color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; padding:.75rem; border-bottom:1px solid var(--line); } td { padding:.78rem .75rem; border-bottom:1px solid #ecece6; font-size:.84rem; vertical-align:top; } td small { display:block; color:var(--muted); margin-top:.2rem; }.tag { font-family:ui-monospace,monospace; font-size:.75rem; }.pill { display:inline-block; border-radius:999px; padding:.25rem .5rem; background:#e7f0eb; color:var(--green); font-size:.7rem; font-weight:700; }.empty { text-align:center; color:var(--muted); padding:3rem; }.message { margin:1rem; background:#fff3dc; border:1px solid #e9d19e; padding:.8rem; border-radius:8px; font-size:.82rem; }
.bot-panel { min-height:520px; display:flex; flex-direction:column; }.bot-heading { display:flex; gap:.75rem; padding:1rem; border-bottom:1px solid var(--line); }.bot-heading p { font-size:.76rem; color:var(--muted); margin-top:.2rem; }.bot-mark { display:grid; place-items:center; width:36px; height:36px; background:var(--ink); color:white; border-radius:50%; font-size:.68rem; font-weight:800; }.chat { flex:1; padding:1rem; display:flex; flex-direction:column; gap:.65rem; max-height:440px; overflow:auto; }.bubble { max-width:90%; padding:.72rem .8rem; border-radius:10px; font-size:.82rem; line-height:1.45; white-space:pre-wrap; }.bubble.bot { background:#eef0ea; }.bubble.user { background:var(--green); color:white; align-self:flex-end; }#chatForm { padding:1rem; border-top:1px solid var(--line); }#chatForm button { width:100%; margin-top:.5rem; }
dialog { border:0; border-radius:15px; width:min(780px,calc(100vw - 2rem)); padding:0; box-shadow:0 25px 90px rgba(12,24,21,.3); }dialog::backdrop { background:rgba(15,27,24,.5); backdrop-filter:blur(3px); }#assetForm { padding:1.3rem; }.dialog-head,.dialog-actions { display:flex; justify-content:space-between; align-items:center; }.dialog-head { margin-bottom:1.2rem; }.icon { border:0; font-size:1.5rem; padding:.2rem .6rem; }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }.wide { grid-column:1/-1; }.dialog-actions { justify-content:flex-end; gap:.7rem; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); }
@media (max-width:950px){.workspace{grid-template-columns:1fr}.bot-panel{min-height:440px}.toolbar{grid-template-columns:1fr 1fr}.toolbar button{grid-column:1/-1}.topbar{align-items:flex-start;gap:1rem;flex-direction:column}.actions{width:100%;justify-content:space-between}}
@media (max-width:580px){.metrics{grid-template-columns:1fr}.form-grid,.toolbar{grid-template-columns:1fr}.wide{grid-column:auto}.actions{align-items:flex-start;flex-direction:column}}

/* employee portal */
.portal-main { max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:1.6rem; }
.portal-help { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:1.2rem 1.4rem; }
.portal-help p { color:var(--muted); font-size:.88rem; margin-top:.3rem; }
.portal-help button:disabled { opacity:.6; cursor:not-allowed; }
.portal-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.8rem; }
.device-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.device { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.1rem; display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; }
.device h3 { margin:.2rem 0 0; font-size:1.05rem; }
.device p { margin:0; font-size:.84rem; color:var(--ink); }
.device small { color:var(--muted); font-size:.78rem; }
.device-grid .empty { grid-column:1/-1; background:var(--card); border:1px dashed var(--line); border-radius:12px; }
/* Excel sync badge */
.sync-badge { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.8rem; color:var(--ink); }
.sync-badge .dot { width:9px; height:9px; border-radius:50%; background:#b9bfbb; flex-shrink:0; }
.sync-badge .dot.ok { background:var(--green); }
.sync-badge .dot.warn { background:#d69a1f; }
.sync-badge .dot.bad { background:#c0392b; }
.sync-badge .dot.busy { background:var(--green); animation:pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.25; } }
@media (prefers-reduced-motion: reduce) { .sync-badge .dot.busy { animation:none; } }
#syncDialog { width:min(640px,calc(100vw - 2rem)); padding:1.3rem; }
.sync-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1.2rem; margin:0 0 1rem; }
.sync-facts dt { color:var(--muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.sync-facts dd { margin:.2rem 0 0; font-size:.88rem; } .sync-facts small { color:var(--muted); }
.sync-warnings { margin:0 0 1rem; padding:.7rem .9rem .7rem 1.8rem; background:#fff3dc; border:1px solid #e9d19e; border-radius:8px; font-size:.82rem; display:grid; gap:.3rem; }
.sync-files { min-width:0; } .sync-files td { font-size:.8rem; }
@media (max-width:580px){ .sync-facts { grid-template-columns:1fr; } }
/* lifecycle status pills */
.pill.status-assigned { background:#e7f0eb; color:var(--green); }
.pill.status-in_stock { background:#e6eef8; color:#2b5c99; }
.pill.status-reserved { background:#efe8f7; color:#6a3f9c; }
.pill.status-in_repair { background:#fff1d9; color:#9a6206; }
.pill.status-damaged { background:#fbe4e1; color:#a53225; }
.pill.status-lost, .pill.status-retired, .pill.status-none { background:#eceae4; color:var(--muted); }
.flag { display:block; width:max-content; margin-top:.3rem; font-size:.68rem; font-weight:700; color:#9a6206; cursor:help; }
.flag.bad { color:#a53225; }
.muted { color:var(--muted); }
@media (max-width:950px){ .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* email link review */
.link-banner { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; background:#e6eef8; border-color:#bcd0ea; }
.link-banner button { padding:.45rem .8rem; font-size:.8rem; }
#linkDialog { width:min(680px,calc(100vw - 2rem)); padding:1.3rem; }
.link-details { max-height:55vh; overflow:auto; }
.link-details h3 { font-size:.9rem; margin:1rem 0 .4rem; }
.link-details table { min-width:0; } .link-details td { font-size:.8rem; padding:.45rem .5rem; }
/* device panel */
#deviceDialog { width:min(760px,calc(100vw - 2rem)); padding:1.3rem; max-height:90vh; overflow:auto; }
.device-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1.2rem; margin-bottom:1rem; }
.device-summary > div > span { display:block; color:var(--muted); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.device-summary strong { display:block; font-weight:600; font-size:.88rem; margin-top:.25rem; } .device-summary small { display:block; color:var(--muted); font-weight:500; }
.device-summary .wide { grid-column:1/-1; }
.device-actions { display:flex; gap:.5rem; flex-wrap:wrap; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.device-actions button:disabled { opacity:.45; cursor:not-allowed; }
.action-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; padding:1rem; background:#f7f6f0; border:1px solid var(--line); border-radius:12px; }
.action-form h3, .action-form .segmented, .action-form .hint, .action-form .dialog-actions, .action-form .wide { grid-column:1/-1; }
.action-form h3 { margin:0; font-size:1rem; } .action-form .hint { margin:0; }
.action-form .dialog-actions { margin-top:0; padding-top:.6rem; }
.segmented { display:flex; gap:.4rem; flex-wrap:wrap; }
.segmented label { display:flex; align-items:center; gap:.4rem; border:1px solid var(--line); background:var(--card); border-radius:999px; padding:.4rem .8rem; font-size:.84rem; cursor:pointer; }
.segmented input { width:auto; margin:0; }
.segmented label:has(input:checked) { border-color:var(--green); color:var(--green); font-weight:700; }
.timeline-heading { margin:1.2rem 0 .6rem; font-size:.95rem; }
.timeline { list-style:none; margin:0; padding:0; display:grid; gap:0; }
.timeline li { display:grid; grid-template-columns:150px 1fr; gap:1rem; padding:.7rem 0; border-top:1px solid #ecece6; font-size:.84rem; }
.timeline time { color:var(--muted); font-size:.76rem; font-variant-numeric:tabular-nums; }
.timeline small { display:block; color:var(--muted); margin-top:.2rem; }
.timeline ul { margin:.3rem 0 0; padding-left:1.1rem; color:var(--muted); } .timeline s { color:#a0a6a2; }
.timeline q { color:var(--muted); font-style:italic; }
#deviceMessage { margin:0 0 1rem; }
@media (max-width:580px){ .device-summary, .action-form { grid-template-columns:1fr; } .timeline li { grid-template-columns:1fr; gap:.2rem; } }
/* overview strip */
.overview { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin-bottom:1.2rem; }
.overview > div { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; }
.overview h3 { margin:0 0 .6rem; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.chip { padding:.35rem .7rem; border-radius:999px; font-size:.8rem; font-weight:600; background:#f2f1ea; }
.chip strong { font-variant-numeric:tabular-nums; }
.chip:disabled { opacity:.45; cursor:default; }
.chip.warn { background:#fff1d9; color:#9a6206; border-color:#f0d9ab; } .chip.bad { background:#fbe4e1; color:#a53225; border-color:#f1c4bd; }
.chip.status-assigned { background:#e7f0eb; color:var(--green); } .chip.status-in_stock { background:#e6eef8; color:#2b5c99; }
.chip.status-in_repair { background:#fff1d9; color:#9a6206; } .chip.status-damaged { background:#fbe4e1; color:#a53225; }
.chip.status-reserved { background:#efe8f7; color:#6a3f9c; }
.chip-note { color:var(--muted); font-size:.76rem; }
.warn-text { color:#9a6206; font-weight:700; } .bad-text { color:#a53225; font-weight:700; }
@media (max-width:950px){ .overview { grid-template-columns:1fr; } }
/* conflicts */
.conflict-heading { margin:1rem 0 .5rem; font-size:.95rem; }
.conflict { display:grid; grid-template-columns:1fr auto; gap:1rem; padding:.9rem; border:1px solid #e9d19e; background:#fffaf0; border-radius:10px; margin-bottom:.6rem; }
.conflict p { margin:.3rem 0; font-size:.84rem; } .conflict small { color:var(--muted); }
.conflict ul { margin:.4rem 0 0; padding-left:1.1rem; font-size:.8rem; color:var(--muted); }
.conflict-actions { display:flex; flex-direction:column; gap:.4rem; } .conflict-actions button { padding:.45rem .7rem; font-size:.8rem; }
#syncDialog { max-height:90vh; overflow:auto; }
@media (max-width:580px){ .conflict { grid-template-columns:1fr; } .conflict-actions { flex-direction:row; flex-wrap:wrap; } }
/* intune */
.intune-box { background:#f7f6f0; border:1px solid var(--line); border-radius:10px; padding:.8rem; }
.intune-box dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem 1rem; margin:.5rem 0; }
.intune-box dt { color:var(--muted); font-size:.68rem; font-weight:700; } .intune-box dd { margin:.1rem 0 0; font-size:.82rem; }
.intune-box button { margin-top:.5rem; padding:.4rem .7rem; font-size:.78rem; }
.dot-inline { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:.4rem; background:#d69a1f; }
#intuneDialog { width:min(820px,calc(100vw - 2rem)); padding:1.3rem; }
@media (max-width:580px){ .intune-box dl { grid-template-columns:1fr 1fr; } }
.device-summary small.warn-text, .intune-box small.warn-text { color:#9a6206; font-weight:700; margin-top:.2rem; }
/* shared navigation */
.topbar { align-items:center; gap:1.2rem; flex-wrap:wrap; }
.app-nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex:1; flex-wrap:wrap; min-width:0; }
.nav-pages { display:flex; gap:.4rem; flex-wrap:wrap; background:#e9e7de; padding:.3rem; border-radius:12px; }
.nav-user { display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.nav-button { position:relative; display:inline-flex; align-items:center; gap:.45rem; padding:.55rem 1rem; border-radius:9px; font-weight:700; font-size:.88rem;
  color:var(--ink); text-decoration:none; border:1px solid transparent; background:transparent; }
.nav-button:hover { background:var(--card); border-color:var(--line); }
.nav-button:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.nav-button.active { background:var(--card); border-color:var(--line); box-shadow:0 2px 6px rgba(25,38,34,.08); color:var(--green); }
.nav-button.subtle { border-color:var(--line); background:var(--card); font-weight:600; }
.nav-badge { min-width:1.35rem; height:1.35rem; padding:0 .35rem; border-radius:999px; background:#c0392b; color:white; font-size:.72rem; display:inline-grid; place-items:center; }
.toolbar-strip { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding:.8rem clamp(1rem,4vw,4rem); border-bottom:1px solid var(--line); }
.strip-actions { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.toast { position:fixed; right:1.2rem; bottom:1.2rem; background:var(--ink); color:white; padding:.9rem 1.1rem; border-radius:12px; font-weight:700; text-decoration:none;
  box-shadow:0 12px 35px rgba(0,0,0,.25); transform:translateY(20px); opacity:0; transition:.3s; z-index:50; }
.toast.show { transform:none; opacity:1; }
@media (prefers-reduced-motion: reduce) { .toast { transition:none; } }
/* tickets desk */
.desk { display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:1.2rem; align-items:start; }
.queue, .ticket-detail { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
.queue-filters { padding:1rem; border-bottom:1px solid var(--line); display:grid; gap:.7rem; }
.queue-row { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.queue-counts { margin:0; color:var(--muted); font-size:.76rem; }
.seg { padding:.4rem .75rem; font-size:.8rem; border-radius:999px; }
.seg.active { background:var(--ink); color:white; border-color:var(--ink); }
.ticket-list { list-style:none; margin:0; padding:.4rem; max-height:70vh; overflow:auto; display:grid; gap:.3rem; }
.ticket-row { width:100%; text-align:left; display:grid; gap:.2rem; padding:.7rem .8rem; border-radius:10px; border:1px solid transparent; background:transparent; font-weight:500; }
.ticket-row:hover { background:#f7f6f0; }
.ticket-row.selected { background:#eef5f1; border-color:#cfe2d8; }
.ticket-row.unread strong { font-weight:800; }
.ticket-row small { color:var(--muted); font-size:.76rem; }
.row-top { display:flex; gap:.5rem; align-items:center; }
.new-dot { width:9px; height:9px; border-radius:50%; background:#c0392b; margin-left:auto; }
.prio { font-size:.68rem; font-weight:800; padding:.1rem .45rem; border-radius:999px; background:#eceae4; color:var(--muted); }
.prio-urgent { background:#c0392b; color:white; } .prio-high { background:#fbe4e1; color:#a53225; } .prio-normal { background:#e6eef8; color:#2b5c99; }
.ticket-detail { padding:1.3rem; min-height:420px; }
.detail-empty { padding:4rem 1rem; }
.detail-head h2 { font-size:1.35rem; margin:.2rem 0 .3rem; } .detail-head p { margin:.2rem 0; font-size:.84rem; }
.nav-button.small { padding:.35rem .7rem; font-size:.8rem; }
.detail-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin:1rem 0; }
.resolve-box { display:grid; gap:.6rem; padding:1rem; background:#eef5f1; border:1px solid #cfe2d8; border-radius:10px; margin-bottom:1rem; }
.resolve-box .dialog-actions { margin:0; padding:0; border:0; }
.resolution { background:#eef5f1; border-radius:8px; padding:.6rem .8rem; font-size:.86rem; }
.files { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.file { display:grid; gap:.3rem; width:120px; font-size:.72rem; color:var(--ink); text-decoration:none; }
.file img { width:120px; height:84px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.thread { list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.7rem; }
.msg { padding:.8rem 1rem; border-radius:12px; max-width:85%; }
.msg p { margin:.35rem 0 0; white-space:pre-wrap; font-size:.9rem; line-height:1.5; }
.msg-head { font-size:.74rem; color:var(--muted); }
.msg.from-user { background:#f2f1ea; }
.msg.from-it { background:#e7f0eb; justify-self:end; }
.msg.internal { background:#fff3dc; border:1px dashed #e9c77e; justify-self:end; }
.reply { display:grid; gap:.5rem; border-top:1px solid var(--line); padding-top:1rem; }
.reply.is-internal textarea { background:#fffaf0; border-color:#e9c77e; }
.reply-actions { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.reply-actions .primary { margin-left:auto; }
.check { display:flex; align-items:center; gap:.4rem; font-size:.82rem; } .check input { width:auto; }
.file-pick { cursor:pointer; font-size:.84rem; font-weight:700; padding:.5rem .7rem; border:1px solid var(--line); border-radius:9px; background:var(--card); }
@media (max-width:950px){ .desk { grid-template-columns:1fr; } .detail-controls { grid-template-columns:1fr; } .msg { max-width:100%; } }
button.danger { color:#a53225; border-color:#f1c4bd; } button.danger:hover { background:#fbe4e1; }
/* portal tickets */
.portal-main { padding-top:1.4rem; }
button.big { padding:.8rem 1.4rem; font-size:1rem; }
.my-tickets { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.my-ticket { width:100%; text-align:left; display:grid; grid-template-columns:auto 1fr auto auto; gap:.3rem .8rem; align-items:center; padding:.9rem 1rem; background:var(--card); border:1px solid var(--line); border-radius:12px; font-weight:500; }
.my-ticket small { grid-column:2/-1; color:var(--muted); font-size:.78rem; }
.my-ticket.unread { border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.08); }
.new-reply { background:#c0392b; color:white; font-size:.7rem; font-weight:800; padding:.15rem .5rem; border-radius:999px; }
.my-tickets .empty { background:var(--card); border:1px dashed var(--line); border-radius:12px; }
.device .report { margin-top:.4rem; padding:.4rem .7rem; font-size:.78rem; }
#raiseDialog, #ticketDialog { width:min(640px,calc(100vw - 2rem)); padding:1.3rem; max-height:92vh; overflow:auto; }
.raise-form { display:grid; gap:.8rem; }
.urgency { border:0; padding:0; margin:0; display:grid; gap:.4rem; }
.urgency legend { color:var(--muted); font-size:.73rem; font-weight:700; margin-bottom:.35rem; padding:0; }
.urgency label { display:grid; grid-template-columns:auto 1fr; gap:0 .6rem; align-items:center; padding:.6rem .8rem; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.urgency label:has(input:checked) { border-color:var(--green); background:#eef5f1; }
.urgency input { width:auto; margin:0; grid-row:span 2; } .urgency small { color:var(--muted); font-size:.76rem; }
.form-error { color:#a53225; font-size:.84rem; margin:0; }
.msg.mine { justify-self:end; background:#e7f0eb; } .msg.theirs { justify-self:start; background:#f2f1ea; }
.resolved-actions { display:flex; gap:.8rem; align-items:center; margin-top:.6rem; flex-wrap:wrap; }
@media (max-width:580px){ .my-ticket { grid-template-columns:1fr auto; } .my-ticket .tag { grid-column:1/-1; } }
/* laptop agent */
.chip.primary-chip { background:var(--green); color:white; border-color:var(--green); }
.ok-text, .device-summary small.ok-text { color:var(--green); font-weight:700; }
#agentDialog { width:min(640px,calc(100vw - 2rem)); padding:1.3rem; }
.steps { margin:0 0 1rem; padding-left:1.2rem; display:grid; gap:.5rem; font-size:.88rem; }
.agent-code { display:grid; grid-template-columns:1fr 1fr auto; gap:.7rem; align-items:end; }
@media (max-width:580px){ .agent-code { grid-template-columns:1fr; } }
/* account dropdown */
.menu { position:relative; margin-left:auto; }
.menu-button { gap:.5rem; padding:.4rem .8rem .4rem .45rem; }
.menu-avatar { width:1.8rem; height:1.8rem; border-radius:50%; background:var(--green); color:white; display:grid; place-items:center; font-size:.8rem; }
.caret { color:var(--muted); font-size:.7rem; }
.menu-dot { display:none; width:9px; height:9px; border-radius:50%; background:#d69a1f; position:absolute; top:5px; right:6px; }
.menu-button.attention .menu-dot { display:block; }
.menu-panel { position:absolute; right:0; top:calc(100% + .4rem); z-index:40; width:280px; background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 45px rgba(25,38,34,.18); padding:.4rem; display:grid; gap:.15rem; }
.menu-who { padding:.6rem .7rem; border-bottom:1px solid var(--line); margin-bottom:.2rem; }
.menu-who small, .menu-item small { display:block; color:var(--muted); font-weight:500; font-size:.76rem; margin-top:.1rem; }
.menu-extras { display:grid; gap:.15rem; } .menu-extras:not(:empty) { border-bottom:1px solid var(--line); padding-bottom:.3rem; margin-bottom:.2rem; }
.menu-item { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; padding:.6rem .7rem; border-radius:8px; border:0; background:transparent;
  font-weight:600; font-size:.86rem; color:var(--ink); text-decoration:none; cursor:pointer; }
.menu-item:hover, .menu-item:focus-visible { background:#f2f1ea; outline:none; }
.menu-item.sync-badge .dot { flex-shrink:0; }
.list-count { grid-column:1/-1; margin:0; color:var(--muted); font-size:.78rem; }

/* fit the screen: only lists scroll (desktop) */
@media (min-width:951px) and (min-height:640px) {
  body.fixed-page { height:100vh; display:flex; flex-direction:column; overflow:hidden; }
  body.fixed-page .topbar { padding-top:1rem; padding-bottom:.9rem; }
  body.fixed-page h1 { font-size:2.3rem; }
  body.fixed-page main { flex:1; min-height:0; display:flex; flex-direction:column; padding-top:1rem; padding-bottom:1rem; }
  body.fixed-page .overview { flex-shrink:0; margin-bottom:.9rem; gap:.8rem; }
  body.fixed-page .overview > div { padding:.65rem .8rem; }
  body.fixed-page .overview h3 { margin-bottom:.45rem; }
  body.fixed-page .chip { padding:.25rem .6rem; font-size:.76rem; }
  body.fixed-page .workspace { flex:1; min-height:0; }
  body.fixed-page .asset-panel { display:flex; flex-direction:column; height:100%; min-height:0; }
  body.fixed-page .table-wrap { flex:1; min-height:0; max-height:none; }
  body.fixed-page .bot-panel { height:100%; min-height:0; }
  body.fixed-page .chat { max-height:none; min-height:0; }
  body.fixed-page main.desk { display:grid; grid-template-rows:minmax(0,1fr); align-items:stretch; }
  body.fixed-page .queue { display:flex; flex-direction:column; height:100%; min-height:0; }
  body.fixed-page .ticket-list { flex:1; max-height:none; min-height:0; }
  body.fixed-page .ticket-detail { height:100%; overflow:auto; min-height:0; }
}
.ticket-list { align-content:start; }
/* laptop health page */
.health-main { display:flex; flex-direction:column; gap:1rem; }
.health-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.8rem; flex-shrink:0; }
.summary-card { display:grid; gap:.1rem; text-align:left; padding:.9rem 1rem; border-radius:12px; border:1px solid var(--line); background:var(--card); }
.summary-card strong { font-size:1.8rem; line-height:1.1; font-variant-numeric:tabular-nums; }
.summary-card span { font-weight:700; } .summary-card small { color:var(--muted); font-weight:500; }
.summary-card.good strong { color:var(--green); } .summary-card.warn strong { color:#9a6206; } .summary-card.bad strong { color:#a53225; }
.summary-card.active { border-color:var(--ink); box-shadow:0 0 0 2px var(--ink) inset; }
.summary-note { display:grid; gap:.3rem; align-content:center; padding:.8rem 1rem; border-radius:12px; background:#eef5f1; font-size:.8rem; color:var(--ink); }
.health-panel { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); display:flex; flex-direction:column; min-height:0; flex:1; }
.health-toolbar { display:grid; grid-template-columns:minmax(220px,300px) minmax(200px,1fr) auto; gap:.8rem; align-items:end; padding:1rem; border-bottom:1px solid var(--line); }
.legend { margin:0; font-size:.76rem; color:var(--muted); display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
.health-table table { min-width:1250px; }
.health-table tbody tr { cursor:pointer; } .health-table tbody tr:hover td { background:#f7f6f0; }
.health-table tbody tr:focus-visible { outline:2px solid var(--green); outline-offset:-2px; }
.cell { display:inline-block; padding:.2rem .5rem; border-radius:6px; font-size:.78rem; font-weight:700; white-space:nowrap; }
.cell.good { background:#e7f0eb; color:var(--green); } .cell.warn { background:#fff1d9; color:#9a6206; }
.cell.bad { background:#fbe4e1; color:#a53225; } .cell.none { background:#f0efe9; color:var(--muted); font-weight:600; }
@media (min-width:951px) and (min-height:640px) { body.fixed-page .health-panel { min-height:0; } body.fixed-page .health-table { flex:1; min-height:0; max-height:none; } }
@media (max-width:950px){ .health-summary { grid-template-columns:1fr 1fr; } .health-toolbar { grid-template-columns:1fr; } }
.agent-card { display:grid; gap:.25rem; }
.agent-stat { font-size:.82rem; color:var(--ink); text-decoration:none; padding:.15rem 0; } .agent-stat:hover { text-decoration:underline; }
.agent-stat strong { font-variant-numeric:tabular-nums; } .agent-stat.warn strong { color:#9a6206; } .agent-stat.bad strong { color:#a53225; }
.agent-actions { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.3rem; } .agent-actions a.chip { text-decoration:none; }
.health-table td.problems { display:flex; flex-wrap:wrap; gap:.25rem; min-width:170px; }
/* welcome page (signed-out visitors) */
body.welcome { min-height:100vh; display:flex; flex-direction:column; }
.welcome-top { display:flex; justify-content:space-between; align-items:center; padding:1.2rem clamp(1rem,4vw,4rem); }
.welcome-brand { display:flex; align-items:center; gap:.6rem; font-size:1rem; }
.welcome-mark { width:2.2rem; height:2.2rem; border-radius:10px; background:var(--green); color:white; display:grid; place-items:center; font-weight:800; font-size:.85rem; }
.welcome-main { flex:1; width:min(1040px,100%); margin:0 auto; padding:clamp(1.5rem,6vw,4.5rem) clamp(1rem,4vw,2rem) 2rem; display:grid; gap:clamp(2rem,6vw,3.5rem); }
.welcome-hero { max-width:44rem; display:grid; gap:1rem; justify-items:start; }
.welcome-hero h1 { font-size:clamp(2.2rem,6vw,3.8rem); line-height:1.05; text-wrap:balance; }
.welcome-lede { font-size:1.08rem; line-height:1.6; color:var(--muted); max-width:36rem; }
.welcome-cta { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; border-radius:10px; margin-top:.4rem; }
.welcome-cta:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.welcome-note { font-size:.82rem; color:var(--muted); }
.welcome-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.welcome-steps article { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.2rem; display:grid; gap:.4rem; align-content:start; }
.welcome-steps h2 { font-size:1.02rem; } .welcome-steps p { color:var(--muted); font-size:.88rem; line-height:1.5; }
.step-num { width:1.8rem; height:1.8rem; border-radius:50%; background:#e7f0eb; color:var(--green); display:grid; place-items:center; font-weight:800; font-size:.85rem; }
.welcome-foot { text-align:center; color:var(--muted); font-size:.8rem; padding:1.2rem 1rem 1.6rem; }
@media (max-width:760px){ .welcome-steps { grid-template-columns:1fr; } }
.health-table td .nav-button.small { margin-top:.4rem; }
.signed-in { display:block; margin-top:.35rem; font-size:.76rem; }
.signed-in.mismatch { display:grid; gap:.25rem; padding:.45rem .55rem; border-radius:8px; background:#fff1d9; border:1px solid #f0d9ab; }
.signed-in.mismatch small { margin:0; color:var(--ink); }
.reassign { justify-self:start; padding:.3rem .6rem; font-size:.76rem; font-weight:700; background:var(--green); color:white; border-color:var(--green); }
.reassign:disabled { opacity:.6; }