.service-desk{color-scheme:dark;--bg:#101317;--panel:#191e25;--line:#333c48;--muted:#a9b4c2;--accent:#ffbf69;--text:#edf2f7}
.service-desk *{box-sizing:border-box}
.service-desk{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,sans-serif}
.service-desk button,.service-desk input,.service-desk textarea,.service-desk select{font:inherit}
.service-desk button,.service-desk a,.service-desk input,.service-desk select,.service-desk textarea{outline-offset:4px}
.service-desk button{border:1px solid transparent;border-radius:8px;padding:10px 15px;background:var(--accent);color:#20180d;font-weight:650;cursor:pointer}
.service-desk button:disabled{opacity:.45;cursor:default}
.service-desk button.secondary{background:transparent;color:var(--text);border-color:var(--line)}
.service-desk a{color:var(--accent)}
.service-desk .desk-header{padding:22px 32px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}
.service-desk .eyebrow{font-size:11px;letter-spacing:.16em;color:var(--accent)}
.service-desk h1{font-size:25px;margin:4px 0}
.service-desk h2{font-size:20px;margin:0 0 8px}
.service-desk h3{font-size:15px;margin:20px 0 8px}
.service-desk p{color:var(--muted);margin:6px 0 14px}
.service-desk nav{display:flex;gap:22px;flex-wrap:wrap}
.service-desk .desk-main{padding:24px 32px}
.service-desk .desk-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:20px}
.service-desk .desk-grid{display:grid;grid-template-columns:290px minmax(360px,1fr) 310px;gap:16px;align-items:start}
.service-desk .queue,.service-desk .case-pane,.service-desk .context-pane{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.service-desk .case-pane,.service-desk .context-pane{padding:22px}
.service-desk .queue-tools{padding:16px;border-bottom:1px solid var(--line);display:grid;gap:10px}
.service-desk label{display:block;color:var(--muted);font-size:13px}
.service-desk input,.service-desk select,.service-desk textarea{display:block;background:#10151b;border:1px solid #46515f;color:var(--text);border-radius:7px;padding:10px;width:100%;margin-top:5px}
.service-desk textarea{resize:vertical}
.service-desk .case-row{width:100%;text-align:left;padding:17px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--text);font-weight:400}
.service-desk .case-row:hover,.service-desk .case-row[aria-current=true]{background:#30303a;box-shadow:inset 3px 0 var(--accent)}
.service-desk .case-row strong{display:block;margin:5px 0}
.service-desk .case-row small{display:block;color:var(--muted)}
.service-desk .badge{display:inline-block;border:1px solid #665239;color:#ffd298;font-size:11px;padding:2px 7px;border-radius:20px;margin:0 5px 4px 0}
.service-desk .badge.quiet{border-color:var(--line);color:var(--muted)}
.service-desk .empty{padding:32px 12px;text-align:center}
.service-desk .case-heading{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:16px}
.service-desk .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.service-desk .checks{display:flex;gap:15px;flex-wrap:wrap;margin:16px 0}
.service-desk .checks label{display:flex;align-items:center;gap:7px;color:var(--text)}
.service-desk input[type=checkbox]{width:18px;height:18px;margin:0}
.service-desk .timeline{max-height:330px;overflow:auto;padding:4px 0;margin:18px 0}
.service-desk .event{border-left:2px solid var(--line);padding:8px 12px;margin:0 0 10px;background:#14191f}
.service-desk .event.shared{border-color:#5c9fa3}
.service-desk .event p{color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.service-desk .event small{color:var(--muted)}
.service-desk .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}
.service-desk .context-card{border-top:1px solid var(--line);padding:14px 0;overflow-wrap:anywhere}
.service-desk .context-card p{white-space:pre-wrap}
.service-desk .pagination{display:flex;gap:8px;padding:12px;align-items:center;justify-content:space-between}
.service-desk .pagination button{padding:6px 9px;font-size:12px}
.service-desk .pagination span{font-size:12px;color:var(--muted)}
.service-desk #desk-error,.service-desk #request-error{color:#ffb8ac}
.service-desk #desk-error:not([hidden]){padding:12px;border:1px solid #a25348;margin-bottom:15px;border-radius:8px}
.service-desk #desk-status{color:#a4d8bc;min-height:24px}
.service-desk .desk-transport-status{border:1px solid #7a633f;background:#2b261d;color:#f3d49f;border-radius:8px;padding:9px 12px;margin:0 0 14px}
.service-desk .desk-transport-status[data-ready="true"]{border-color:#476d5a;background:#1c2b25;color:#bde3cb}
.service-desk dialog{color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(560px,95vw);padding:26px}
.service-desk dialog::backdrop{background:#0009}
.service-desk dialog label{margin:12px 0}
.service-desk .context-pane h2{font-size:18px}
.service-desk .context-pane dl{margin:12px 0}
.service-desk .context-pane dt{font-size:12px;color:var(--muted)}
.service-desk .context-pane dd{margin:0 0 10px}
.service-desk .muted{color:var(--muted);font-size:13px}
.service-desk .case-pane form>label{margin-top:12px}
@media(min-width:1500px){.service-desk .desk-main{max-width:1750px;margin:auto}
.service-desk .desk-grid{grid-template-columns:330px minmax(420px,1fr) 350px}
}
@media(max-width:1100px){.service-desk .desk-grid{grid-template-columns:260px 1fr}
.service-desk .context-pane{grid-column:2}
}
@media(max-width:700px){.service-desk .desk-main{padding:16px}
.service-desk .desk-header{padding:16px;display:block}
.service-desk nav{margin-top:12px;gap:14px}
.service-desk .desk-grid{display:block}
.service-desk .case-pane,.service-desk .context-pane{margin-top:16px}
.service-desk .queue #desk-list{max-height:300px;overflow:auto}
.service-desk .field-grid{grid-template-columns:1fr}
.service-desk .desk-intro{align-items:start}
.service-desk .desk-intro h2{font-size:19px}
}
.service-desk{--bg:#141c27;--panel:#202d3d;--line:#46576b;--muted:#b4c3d4;--accent:#ffba52;--text:#f2f6f9}
.service-desk .desk-grid{grid-template-columns:290px minmax(0,1fr) 310px}
.service-desk .desk-grid>*{min-width:0}
.service-desk .case-pane,.service-desk .context-pane,.service-desk .case-row,.service-desk .case-heading,.service-desk nav{overflow-wrap:anywhere}
.service-desk .case-view{min-width:0}
.service-desk #desk-back{display:none}
.service-desk button,.service-desk summary,.service-desk nav a{min-height:44px;touch-action:manipulation}
.service-desk nav a{display:inline-flex;align-items:center}
.service-desk input,.service-desk select,.service-desk textarea{min-width:0;max-width:100%;font-size:16px}
.service-desk input:not([type=checkbox]),.service-desk select{min-height:44px}
.service-desk :focus-visible{outline:3px solid #8fcaff;outline-offset:3px}
.service-desk .checks label{min-height:44px}
.service-desk .pagination button{min-height:44px}
.service-desk #desk-context-disclosure>summary{cursor:pointer;display:list-item;padding:8px 0;font-weight:650}
.service-desk #desk-context-disclosure[open]>summary{border-bottom:1px solid var(--line);margin-bottom:14px}
.service-desk .queue #desk-list{max-height:65dvh;overflow:auto;overscroll-behavior:contain}
.service-desk .timeline{overscroll-behavior:contain}
.service-desk dialog{max-height:90dvh;overflow:auto}
.service-desk .desk-intro{flex-wrap:wrap}
.service-desk nav a[aria-current=page]{font-weight:700;text-decoration-thickness:3px;text-underline-offset:6px}
.service-desk .skip-link{position:fixed;left:12px;top:-100px;padding:12px;background:var(--panel);z-index:100}
.service-desk .skip-link:focus{top:12px}

@media(min-width:1500px){.service-desk .desk-grid{grid-template-columns:330px minmax(0,1fr) 350px}
}

@media(max-width:1100px){.service-desk .desk-grid{grid-template-columns:240px minmax(0,1fr)}
.service-desk .context-pane{grid-column:2}
.service-desk .case-pane,.service-desk .context-pane{padding:16px}
}

@media(max-width:760px){.service-desk .desk-main{padding:12px max(12px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.service-desk .desk-header{display:block;padding:16px}
.service-desk .desk-header nav{gap:8px 16px;margin-top:8px}
.service-desk .desk-intro{margin-bottom:8px}
.service-desk .desk-intro h2{font-size:18px}
.service-desk .desk-grid{display:block}
.service-desk .queue #desk-list{max-height:none}
.service-desk .case-view,.service-desk .context-pane{display:none}
.service-desk.has-selection .queue{display:none}
.service-desk.has-selection .case-view,.service-desk.has-selection .context-pane{display:block}
.service-desk.has-selection #desk-back{display:block;margin:0 0 10px}
.service-desk .case-pane{margin:0}
.service-desk .context-pane{margin-top:12px}
.service-desk .field-grid{grid-template-columns:1fr 1fr;gap:8px}
.service-desk .actions>button{flex:1 1 140px}
.service-desk .desk-intro p{margin-bottom:4px}
.service-desk .timeline{max-height:50dvh}

}

@media(max-width:380px){.service-desk .field-grid{grid-template-columns:1fr}
.service-desk .desk-header h1{font-size:22px}
.service-desk .case-pane,.service-desk .context-pane{padding:12px}
}

@media(forced-colors:active){.service-desk .badge,.service-desk .event,.service-desk .case-row[aria-current=true]{border:1px solid CanvasText}
.service-desk button:disabled{color:GrayText;opacity:1}
}
.service-desk .reply-shortcut{display:block;margin-top:12px}
[data-theme=light] .service-desk{color-scheme:light;--bg:#edf2f7;--panel:#fff;--line:#8197ae;--muted:#486077;--accent:#945900;--text:#18283b}
[data-theme=light] .service-desk :is(input,select,textarea){background:#fff;border-color:#8197ae}
[data-theme=light] .service-desk button:not(.secondary):not(.case-row){background:#ffba52;color:#251a07}
[data-theme=light] .service-desk .event{background:#f3f6fa}
[data-theme=light] .service-desk .case-row:hover,[data-theme=light] .service-desk .case-row[aria-current=true]{background:#e8f0f8}
[data-theme=light] .service-desk .badge{color:#805000;border-color:#a58550}
[data-theme=light] .service-desk .badge.quiet{color:var(--muted);border-color:var(--line)}
[data-theme=light] .service-desk #desk-status{color:#176044}
[data-theme=light] .service-desk :is(#desk-error,#request-error,.delivery-error){color:#a32732}
.service-desk .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-desk .field-grid>label{min-width:0}
.service-desk .case-controls,.service-desk .case-resolution{margin:12px 0}
.service-desk .case-controls>summary,.service-desk .case-resolution>summary{cursor:pointer;font-weight:650;padding:10px 0}
.service-desk .case-resolution>label{margin-top:12px}

@media(max-width:760px){.service-desk .field-grid:has([name=follow_up]){grid-template-columns:1fr}
.service-desk.has-selection .desk-intro{display:none}
}

@media(max-width:380px){.service-desk .field-grid{grid-template-columns:1fr}
}
.service-desk .skip-link:not(:focus){top:0;clip-path:inset(50%);width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap}


/* Native portal frame stays visible; all case styles are confined to this workspace. */
.service-desk{background:transparent; margin:0; min-width:0; --panel:var(--bg2,#202d3d); --line:var(--border,#46576b)}

.service-desk[hidden],#service-native-content[hidden]{display:none!important}

.service-desk .desk-main{padding:12px 0;max-width:none}

.service-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}

.service-nav button{font:inherit;min-height:44px;padding:8px 16px;border:1px solid var(--border,#46576b);border-radius:8px;background:var(--bg2,#202d3d);color:var(--text,#f2f6f9);cursor:pointer}

.service-nav button[aria-pressed=true],[data-service-open][aria-pressed=true]{box-shadow:inset 0 -3px var(--accent,#ffba52)}

.service-desk .desk-help{margin-bottom:12px;color:var(--muted);font-size:13px}

.service-desk .desk-help summary{cursor:pointer;display:flex;align-items:center;text-decoration:underline}

.service-desk .desk-help ol{padding-left:20px;max-width:70ch}

.service-desk .desk-help li{margin:8px 0}

.service-desk .context-card>button{width:100%;text-align:left}

.service-desk .desk-intro{margin-bottom:8px}

.service-desk .desk-intro h2{font-size:20px}

@media(min-width:761px) and (max-width:1350px){.service-desk .desk-grid{grid-template-columns:240px minmax(0,1fr)}
.service-desk .context-pane{grid-column:2}
}


.service-desk{container-type:inline-size;--bg:inherit;--text:inherit;--accent:inherit;--muted:var(--text-secondary,var(--fg3,#a9b4c2));color:inherit;font:inherit;color-scheme:inherit}

.service-desk h2,.service-desk h3{text-transform:none;letter-spacing:normal;color:var(--text)}

.service-desk input,.service-desk select,.service-desk textarea,.service-desk .event{background:var(--bg3,#14191f)}

.service-desk .case-row:hover,.service-desk .case-row[aria-current=true]{background:var(--bg3,#30303a)}

@container(max-width:1100px){.service-desk .desk-grid{grid-template-columns:240px minmax(0,1fr)}
.service-desk .context-pane{grid-column:2}
}

@media(max-width:760px){.service-desk .desk-grid{display:block}
}

.service-desk #desk-status:empty{display:none}

.service-desk .ticket-workflow{padding:12px;margin:12px 0;background:var(--bg3,#202d3d);border:1px solid var(--line);border-radius:8px}
.service-desk .ticket-workflow .actions{margin-top:8px}
.service-desk .ticket-next-step{margin:0;color:var(--text)}
.service-desk .ticket-person-results{display:grid;gap:6px;max-height:180px;overflow:auto;margin:8px 0}
.service-desk .ticket-person-results button{text-align:left;white-space:normal;overflow-wrap:anywhere}
.service-desk #ticket-existing{display:grid;gap:6px;max-height:160px;overflow:auto}
.service-desk #ticket-resolve-fields[hidden],.service-desk #ticket-phone-label[hidden]{display:none}
.service-desk :is(#ticket-create-error,#ticket-stage-error){color:var(--danger,#ffb8ac)}

/* Override host resets so native top-layer dialogs stay centered. */
.service-desk dialog{position:fixed;inset:0;margin:auto;max-width:calc(100vw - 24px);max-height:90dvh}
.service-desk .ticket-workflow h3{margin:0 0 8px}
.service-desk .ticket-workflow button.ticket-resolve{background:var(--accent);color:#20180d;border-color:var(--accent)}
.service-desk .ticket-outcome{white-space:pre-wrap;overflow-wrap:anywhere}