/* Purple Repair Desk — layered on top of /styles.css brand tokens. No inline styles (CSP). */
.page-body { padding-top: 32px; padding-bottom: 64px; flex: 1; }
.card.narrow { max-width: 640px; margin: 24px auto; }
.card h3 { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 20px; margin: 0 0 12px; }
textarea, select {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px;
}
textarea { resize: vertical; }
textarea:focus, select:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-soft); }
input.mono, .mono { font-family: 'Geist Mono', monospace; }
.mono { letter-spacing: .5px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.error { color: #8A1C1C; background: #FBECEC; border: 1px solid #F0C8C8; border-radius: var(--radius); padding: 10px 14px; margin: 0 0 16px; font-size: 15px; }
.flash { border: 1px solid var(--line); border-left: 3px solid var(--cyan); background: var(--purple-tint); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 20px; font-size: 15px; }
.flash.ok { margin: 0 0 20px; }
.muted { color: var(--muted); font-size: 13px; }
.nowrap { white-space: nowrap; }
.inline { display: inline; margin: 0; }
.inline-note { margin-left: 12px; }
.title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.title-row h2 { margin: 0; }
.sub { color: var(--muted); margin: 6px 0 20px; font-size: 15px; }

.nav-links a { color: var(--ink); }
.nav-links .btn-outline { color: var(--ink); }
button.link { background: none; border: 0; padding: 0; color: var(--purple); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.badge { display: inline-block; font-size: 12px; font-weight: 600; text-transform: capitalize; padding: 2px 10px; border-radius: 999px; background: var(--purple-soft); color: var(--purple); border: 1px solid transparent; }
.badge.status-open { background: #E6F5FC; color: #0B6A91; }
.badge.status-pending { background: #FFF4DB; color: #7A5200; }
.badge.status-resolved { background: #E5F5EA; color: #1E6B35; }
.badge.status-closed { background: #EEEDF1; color: #5F5A6B; }
.badge.priority-urgent { background: #FBECEC; color: #8A1C1C; }
.badge.priority-high { background: #FFEBDD; color: #8A3B00; }
.badge.priority-normal { background: var(--purple-tint); color: var(--muted); }
.badge.priority-low { background: #fff; color: var(--muted); border-color: var(--line); }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tab { padding: 10px 16px; font-weight: 500; font-size: 15px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.on, .tab:hover { color: var(--purple); border-bottom-color: var(--purple); }
.count { font-family: 'Geist Mono', monospace; font-size: 12px; background: var(--purple-soft); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }


.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); margin: 12px 0; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--purple-tint); }
tr:last-child td { border-bottom: 0; }
td a { color: var(--purple); }
td.empty { text-align: center; color: var(--muted); padding: 32px; }
tr.off, li.off { opacity: .5; }
.pager { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.pager span { margin-right: auto; }

.split { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
.split.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .split, .split.three { grid-template-columns: 1fr; } }
ul.plain { list-style: none; padding: 0; margin: 0 0 16px; }
ul.plain li { padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }

.thread { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.entry { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; background: var(--white); }
.entry.response { background: var(--purple-tint); }
.entry.note { background: #FFF9E6; border-color: #F0E2A8; }
.entry.event { background: transparent; border-style: dashed; font-size: 13px; color: var(--muted); }
.entry .meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.entry .meta strong { color: var(--ink); }
.entry .body { white-space: pre-wrap; overflow-wrap: anywhere; }
pre { white-space: pre-wrap; background: var(--purple-tint); padding: 12px; border-radius: var(--radius); font-size: 13px; }
summary { cursor: pointer; }

/* Desk additions: approved domains, /help, agent new-ticket */
.badge.source-help { background: #FFF4DB; color: #7A5200; text-transform: none; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin-bottom: 16px; }
label.check input { width: auto; margin: 4px 0 0; }
/* Settings workspace: the dark rail (application areas), then the Settings menu (destinations), then the content (breadcrumb,
   heading, tabs, page). Every Settings route draws the same menu in the same place; it scrolls on its own, apart from the content. */
.settings { --set-on: #6D3FD6; --set-on-bg: #EFE8FD; display: grid; grid-template-columns: 312px minmax(0, 1fr); flex: 1; min-height: 0; }
.snav { padding: 6px 0 32px; overflow-y: auto; background: #FAFAFC; border-right: 1px solid var(--line); }
/* Spacing: 34px rows 2px apart, 12px under a group heading, 20px between groups (10px each side of the line). */
.snav-group { padding: 10px 0; border-top: 1px solid #EAE8EF; }
.snav-group:first-child { border-top: 0; }
.snav-group h2 { margin: 0 0 12px; padding: 0 24px 0 46px; font: 600 13px/1.4 'Geist', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #55515F; }
/* One active treatment for the whole of Settings: the menu item here, and the page tabs below. */
.snav-link { position: relative; display: flex; align-items: center; box-sizing: border-box; min-height: 34px; margin: 0 16px 2px 24px; padding: 0 16px 0 40px; border-radius: 0 8px 8px 0; color: #2B2735; font-weight: 400; font-size: 14px; line-height: 1.5; }
.snav-link:last-child { margin-bottom: 0; }
.snav-link:hover { background: var(--purple-tint); color: var(--ink); }
.snav-link.on, .snav-link.on:hover { background: var(--set-on-bg); color: var(--set-on); }
.snav-link.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: var(--set-on); }
.snav-toggle, .snav-scrim, .snav-open { display: none; }
@media (prefers-reduced-motion: reduce) { .snav { transition: none; } }
.settings-body { padding: 18px 40px 56px; min-width: 0; overflow-y: auto; }
.settings-body > .card, .settings-body > .sec-body > .card { max-width: 900px; padding: 0; border: 0; background: transparent; }
.settings-body > .card::before, .settings-body > .sec-body > .card::before { display: none; }
.settings-body > .flash { max-width: 900px; }
/* In the top bar, to the right of the page name. */
.page-id { display: flex; align-items: center; gap: 0 32px; min-width: 0; }
.page-id .page-title { flex: none; } /* the name keeps its size; the breadcrumb gives way */
.settings-trail { margin: 0; min-width: 0; }
.settings-trail ol { list-style: none; display: flex; flex-wrap: nowrap; overflow: hidden; margin: 0; padding: 0; font-size: 13px; color: var(--muted); }
.settings-trail li { flex: none; white-space: nowrap; }
/* When the trail is too long, the last step (the current page) shrinks with an ellipsis instead of being cut off. */
.settings-trail li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.settings-trail li + li::before { content: ">"; margin: 0 9px; color: #A9A3B5; }
.settings-trail a { color: var(--purple); }
.settings-trail [aria-current] { color: var(--ink); font-weight: 500; }
.spage-head { margin-bottom: 18px; }
.spage-head h2 { font: 500 28px/1.15 'Jost', sans-serif; margin: 0 0 4px; overflow-wrap: anywhere; }
.spage-head p { margin: 0; color: var(--muted); max-width: 680px; }
.ptabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.ptab { padding: 10px 14px; font-weight: 500; font-size: 15px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ptab:hover { color: var(--ink); }
.ptab.on, .ptab.on:hover { color: var(--set-on); border-bottom-color: var(--set-on); }
main.agent-main.flush { display: flex; flex-direction: column; padding: 0; overflow: hidden; background: #fff; }
/* Section tabs: the parts of one form (an editor), switched by hidden radios so no script is needed and nothing typed is lost. */
.sec-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sec-link { cursor: pointer; position: relative; }
/* A green dot after a tab whose section has something saved in it (Notes). */
.sec-dot { display: inline-block; width: 7px; height: 7px; margin-left: 8px; vertical-align: middle; border-radius: 50%; background: #2E9E5B; }
#sec-info:checked ~ .ptabs [for=sec-info], #sec-fields:checked ~ .ptabs [for=sec-fields], #sec-notes:checked ~ .ptabs [for=sec-notes], #sec-options:checked ~ .ptabs [for=sec-options], #sec-forms:checked ~ .ptabs [for=sec-forms], #sec-items:checked ~ .ptabs [for=sec-items], #sec-props:checked ~ .ptabs [for=sec-props], #sec-content:checked ~ .ptabs [for=sec-content], #sec-email:checked ~ .ptabs [for=sec-email] { color: var(--set-on); border-bottom-color: var(--set-on); }
#sec-info:focus-visible ~ .ptabs [for=sec-info], #sec-fields:focus-visible ~ .ptabs [for=sec-fields], #sec-notes:focus-visible ~ .ptabs [for=sec-notes], #sec-options:focus-visible ~ .ptabs [for=sec-options], #sec-forms:focus-visible ~ .ptabs [for=sec-forms], #sec-items:focus-visible ~ .ptabs [for=sec-items], #sec-props:focus-visible ~ .ptabs [for=sec-props], #sec-content:focus-visible ~ .ptabs [for=sec-content], #sec-email:focus-visible ~ .ptabs [for=sec-email] { outline: 2px solid #7E57D0; outline-offset: -2px; }
.settings-body.editor .sec-panel { display: none; }
#sec-info:checked ~ .sec-body .p-info, #sec-fields:checked ~ .sec-body .p-fields, #sec-notes:checked ~ .sec-body .p-notes, #sec-options:checked ~ .sec-body .p-options, #sec-forms:checked ~ .sec-body .p-forms, #sec-items:checked ~ .sec-body .p-items, #sec-props:checked ~ .sec-body .p-props, #sec-content:checked ~ .sec-body .p-content, #sec-email:checked ~ .sec-body .p-email { display: block; }
/* The Forms editor's field panel keeps the older side menu look for its own tabs. */
.subnav-link { display: block; margin-left: -2px; padding: 8px 14px; border-left: 2px solid transparent; color: var(--muted); font-weight: 500; font-size: 16px; transition: color .12s, border-color .12s; }
.subnav-link:hover { color: #7E57D0; border-left-color: #7E57D0; }
.kv.sl-counts { grid-template-columns: minmax(0, 170px) minmax(0, 1fr); max-width: 760px; margin-bottom: 8px; font-size: 15px; }
.sl-counts dd .muted { font-size: 13px; }

.choices { border: 0; padding: 0; margin: 0 0 14px; }
.choices legend { font-weight: 500; margin-bottom: 6px; padding: 0; }
.choices label.check { margin: 0 0 8px; }
.status-line { margin: 0 0 16px; }
.head-add { display: flex; align-items: center; gap: 12px; }
.add-btn { display: inline-flex; align-items: center; height: 26px; width: 26px; margin: 0; padding: 0 0 0 4.5px; box-sizing: border-box; overflow: hidden; border: 1.5px solid var(--purple); border-radius: 8px; color: var(--purple); font: 500 14px 'Geist', sans-serif; cursor: pointer; transition: width .22s ease, background-color .15s; }
.add-btn svg { flex: none; width: 15px; height: 15px; }
.add-btn span { margin-left: 8px; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.add-btn:hover, .modal-toggle:focus-visible ~ .card .add-btn { width: 66px; background: var(--purple-tint); }
.add-btn:hover span, .modal-toggle:focus-visible ~ .card .add-btn span { opacity: 1; }
.modal-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.modal { display: none; position: fixed; inset: 0; z-index: 60; align-items: center; justify-content: center; padding: 16px; }
.modal-toggle:checked ~ .modal, .modal:target { display: flex; }
.modal-card.wide { width: min(640px, 100%); }
.modal-scrim { display: block; }
.modal-scrim { position: absolute; inset: 0; margin: 0; background: rgba(36, 20, 64, .55); cursor: default; animation: modal-fade .18s ease; }
.modal-card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 24px 60px rgba(36, 20, 64, .35); animation: modal-pop .2s ease; }
.modal-close { position: absolute; top: 12px; right: 12px; }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .add-btn, .add-btn span, .modal-scrim, .modal-card { transition: none; animation: none; } }
.org-form { margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.org-form textarea { margin-bottom: 8px; font-family: 'Geist Mono', monospace; font-size: 14px; }
code { font-family: 'Geist Mono', monospace; font-size: 13px; overflow-wrap: anywhere; }

/* ==========================================================================
   Agent shell + workspace (rail | views | list | conversation | details)
   ========================================================================== */
body.agent-shell { background: var(--purple-tint); min-height: 100vh; }
.shell { --rail: 64px; --rail-open: 200px; position: relative; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); height: 100vh; }
.shell-main { grid-column: 2; }
.rail { position: absolute; inset: 0 auto 0 0; z-index: 30; width: var(--rail); background: #241440; color: #fff; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 0; overflow: hidden; transition: width .2s ease, box-shadow .2s ease; }
.rail:hover, .rail:focus-within { width: var(--rail-open); box-shadow: 8px 0 28px rgba(36, 20, 64, .28); }
.rail-logo { flex: none; width: 42px; height: 42px; margin: 0 0 12px 11px; border-radius: 12px; background: linear-gradient(135deg, var(--cyan), var(--purple-mid)); color: #fff; display: grid; place-items: center; font: 600 15px 'Jost', sans-serif; letter-spacing: .5px; }
.rail-link { width: 100%; box-sizing: border-box; padding: 12px 0 12px 22px; color: #BFB3D9; display: flex; flex-direction: row; align-items: center; gap: 16px; white-space: nowrap; }
.rail-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.rail-link.on { background: rgba(255,255,255,.14); color: #fff; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.rail-form { margin: 0; }
button.rail-link { background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.rail-link .av-rail { width: 24px; height: 24px; margin: 0 -2px; font-size: 10px; }
.rail-label { font-size: 14px; font-weight: 500; opacity: 0; transition: opacity .15s ease; }
.rail:hover .rail-label, .rail:focus-within .rail-label { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rail, .rail-label { transition: none; } }
.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.shell-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { flex: none; height: 64px; display: flex; align-items: center; gap: 18px; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--line); }
.topbar-logo { display: none; }
.page-title { margin: 0; font: 500 30px/1.1 'Jost', sans-serif; letter-spacing: -.3px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.search { margin-left: auto; position: relative; flex: 0 1 380px; min-width: 160px; }
.search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 17px; height: 17px; }
.search input { margin: 0; padding: 9px 12px 9px 36px; font-size: 14px; background: var(--purple-tint); border-color: transparent; }
.search input:focus { background: #fff; }
.create { white-space: nowrap; }
.create .ic { width: 16px; height: 16px; }

main.agent-main { flex: 1; min-height: 0; overflow: auto; padding: 24px 28px 48px; }
main.bleed { flex: 1; min-height: 0; display: flex; flex-direction: column; }
main.bleed > .flash { margin: 10px 16px 0; }

/* avatars */
.av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font: 600 12px 'Geist', sans-serif; letter-spacing: .02em; }
.av-sm { width: 36px; height: 36px; }
.av-0 { background: #E6F5FC; color: #0B6A91; } .av-1 { background: #EFEAF7; color: #3A2162; } .av-2 { background: #E5F5EA; color: #1E6B35; }
.av-3 { background: #FFF4DB; color: #7A5200; } .av-4 { background: #FBECEC; color: #8A1C1C; } .av-5 { background: #E8EAF8; color: #2B3A8C; }
.av-none { background: #fff; border: 1px dashed #C9C3D6; color: var(--muted); }
.av-none .ic { width: 16px; height: 16px; }

/* workspace grid */
/* The width of the ticket list is --list-w; desk.js lets the divider (.ws-resize) change it. */
.ws { --views-w: 236px; --list-w: 346px; position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: var(--views-w) var(--list-w) minmax(0, 1fr); background: #fff; }
.ws-resize { display: none; position: absolute; z-index: 2; top: 0; bottom: 0; left: calc(var(--views-w) + var(--list-w) - 5px); width: 10px; cursor: col-resize; touch-action: none; }
.js .ws-resize { display: block; }
.ws-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background .15s; }
.ws-resize:hover::after, .ws-resize.on::after, .ws-resize:focus-visible::after { background: var(--purple); }
.ws-resize:focus-visible { outline: none; }
/* The round button on the divider hides the conversation (the list takes the room) and brings it back. What stays on the right is
   a 110px bar with no ticket open, or just the panel icons (no words) with one. */
.ws { --collapsed-w: 58px; }
.ws-toggle { display: none; position: absolute; z-index: 3; top: 50%; left: calc(var(--views-w) + var(--list-w)); width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--muted); box-shadow: 0 2px 8px rgba(36, 20, 64, .16); cursor: pointer; }
.js .ws-toggle { display: grid; }
.ws-toggle:hover, .ws-toggle:focus-visible { color: var(--purple); border-color: var(--purple); }
.ws-toggle .ic { width: 16px; height: 16px; display: block; }
.ws-toggle .to-left { display: none; }
/* Only on wide screens: below 1000px the panes stack, the button is hidden, and nothing may stay hidden behind it. */
@media (min-width: 1001px) {
  .ws.collapsed:not(.has-ticket) { --collapsed-w: 110px; }
  .ws.collapsed { grid-template-columns: var(--views-w) minmax(0, 1fr) var(--collapsed-w); overflow: hidden; }
  .ws.collapsed .ws-toggle { left: calc(100% - var(--collapsed-w)); }
  .ws.collapsed .ws-toggle .to-left { display: block; }
  .ws.collapsed .ws-toggle .to-right { display: none; }
  .js .ws.collapsed .ws-resize { display: none; }
  .ws.collapsed .detail.empty-detail > div { display: none; }
  .ws.collapsed .detail:not(.empty-detail) { overflow: visible; }
  .ws.collapsed .detail:not(.empty-detail) > :not(.strip):not(.slideout):not(.scrim):not(.pn) { display: none; }
  .ws.collapsed .strip label span { display: none; }
  .ws.collapsed .slideout { width: min(380px, 70vw); }
  .ws.collapsed .scrim { inset: 0 58px 0 -100vw; }
}
.ws > * { min-height: 0; min-width: 0; }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 18px 12px; position: relative; }
.pane-head h2 { font: 500 20px 'Jost', sans-serif; margin: 0; }
.muted-count { color: var(--muted); font-weight: 400; }

.views { border-right: 1px solid var(--line); overflow-y: auto; background: #FCFBFE; }
.views ul { list-style: none; margin: 0; padding: 4px 10px 16px; }
.view { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink); }
.view:hover { background: var(--purple-tint); color: var(--ink); }
.view.on { background: var(--purple-soft); }
.view.on strong { color: var(--purple); }
.v-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.v-main strong { font-weight: 500; font-size: 15px; }
.v-main small { color: var(--muted); font-size: 12px; }
.v-count { font: 500 12px 'Geist Mono', monospace; min-width: 28px; text-align: center; padding: 3px 8px; border-radius: 999px; background: #EDEAF3; color: var(--muted); }
.view.on .v-count { background: var(--purple); color: #fff; }

.list { border-right: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; }
.filters summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 500; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; white-space: nowrap; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary:hover, .filters[open] summary { border-color: var(--purple); color: var(--purple); }
.filters form { position: absolute; z-index: 15; right: 14px; top: 62px; width: 280px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; box-shadow: 0 10px 30px rgba(36,20,64,.15); }
.filters select { margin-bottom: 10px; padding: 9px 12px; font-size: 14px; }
.filters label { font-size: 13px; }
.tk-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.tk { display: block; padding: 13px 18px 12px; border-top: 1px solid var(--line); border-left: 3px solid transparent; color: var(--ink); }
.tk:hover { background: var(--purple-tint); color: var(--ink); }
.tk.on { background: var(--purple-soft); border-left-color: var(--purple); }
.tk-top { display: flex; align-items: baseline; gap: 8px; }
.tk-name { font-weight: 600; font-size: 15px; }
.tk-num { font: 12.5px 'Geist Mono', monospace; color: var(--muted); }
.tk-top .badge { margin-left: auto; padding: 0 8px; font-size: 11px; }
.tk-subject { font-size: 14.5px; margin: 3px 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-bottom { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.tk-bottom time { margin-left: auto; white-space: nowrap; }
.tk-status { text-transform: capitalize; }
.tk-assignee { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.tk-assignee::before { content: "\00B7"; margin-right: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #9A94A8; }
.dot-urgent { background: #D92D20; } .dot-high { background: #F79009; } .dot-normal { background: #2E90FA; } .dot-low { background: #17B26A; }
.list .empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.list .pager { padding: 12px 18px 18px; border-top: 1px solid var(--line); }

/* conversation */
.detail { position: relative; overflow: hidden; background: var(--purple-tint); display: grid; grid-template-columns: minmax(0, 1fr) 58px; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head strip" "thread strip" "composer strip"; }
.detail.empty-detail { display: grid; place-items: center; text-align: center; color: var(--muted); grid-template-areas: none; grid-template-columns: 1fr; grid-template-rows: 1fr; }
.empty-detail h2 { font: 500 24px 'Jost', sans-serif; color: var(--ink); margin: 0 0 6px; }
.d-head { grid-area: head; background: #fff; border-bottom: 1px solid var(--line); padding: 16px 22px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.back { display: none; font-size: 14px; color: var(--purple); }
.d-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.d-title h2 { font: 500 21px/1.25 'Jost', sans-serif; margin: 0; overflow-wrap: anywhere; }
.d-title .mono { color: var(--purple); }
.d-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.d-people { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; border-radius: 999px; background: var(--purple-tint); }
.chip .av { width: 26px; height: 26px; font-size: 10.5px; }
.chip-sep { color: #B9B3C6; }
.d-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.act { display: inline-flex; align-items: center; gap: 6px; font: 500 13.5px 'Geist', sans-serif; padding: 6px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.act:hover { border-color: var(--purple); color: var(--purple); }
.act .ic { width: 15px; height: 15px; }
.act.on { background: #FFF4DB; border-color: #F0D58A; color: #7A5200; }
.act.on .ic { fill: #F5B301; stroke: #B07C00; }

.thread-scroll { grid-area: thread; overflow-y: auto; display: flex; flex-direction: column-reverse; padding: 0 22px; }
.thread.chat { list-style: none; margin: 0; padding: 22px 0 10px; display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; align-items: flex-start; gap: 12px; max-width: 86%; }
.msg.us, .msg.note { align-self: flex-end; flex-direction: row-reverse; }
.bubble { min-width: 0; padding: 10px 14px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.msg.them .bubble { border-top-left-radius: 4px; }
.msg.us .bubble { background: var(--purple-soft); border-color: #DCD3EE; border-top-right-radius: 4px; }
.msg.note .bubble { background: #FFF9E6; border-color: #F0E2A8; border-top-right-radius: 4px; }
.bubble .meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.bubble .meta strong { color: var(--ink); font-size: 14px; }
.bubble .meta time { margin-left: auto; }
.bubble .tag { font-size: 11px; padding: 0 7px; border-radius: 999px; background: rgba(58,33,98,.08); color: var(--purple); }
.msg.note .tag { background: #F6E8B0; color: #7A5200; }
.bubble .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.evt { align-self: center; font-size: 12.5px; color: var(--muted); text-align: center; padding: 2px 12px; }
.evt time { margin-left: 6px; opacity: .8; }

.composer { grid-area: composer; background: #fff; border-top: 1px solid var(--line); padding: 12px 22px 14px; }
.composer textarea { margin: 8px 0 10px; min-height: 92px; }
.composer .kind { display: inline-flex; gap: 4px; padding: 3px; background: var(--purple-tint); border-radius: 10px; }
.composer .kind input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.composer .kind label { margin: 0; padding: 6px 14px; border-radius: 8px; font-size: 13.5px; cursor: pointer; color: var(--muted); }
.composer .kind input:checked + label { background: #fff; color: var(--purple); box-shadow: 0 1px 3px rgba(36,20,64,.12); font-weight: 500; }
.composer .kind input:focus-visible + label { outline: 2px solid var(--purple); }
.composer .kind input#k-note:checked + label { background: #FFF9E6; color: #7A5200; }
.composer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.composer-bar label { margin: 0; font-size: 13.5px; color: var(--muted); }
.composer-bar select { width: auto; margin: 0; padding: 8px 12px; font-size: 14px; }
.composer-bar .btn { margin-left: auto; }
.composer .note { margin: 8px 0 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.kv a { color: var(--purple); }

/* ---- Client plans and the client dashboard ------------------------------------------------------------------------------------ */
.plan-tag { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--purple-soft, #EDE7FA); color: #5B33B8; font-size: 13px; font-weight: 500; vertical-align: middle; }
h2 .plan-tag { font-size: 14px; margin-left: 6px; }
.d-client { margin: 0; font-size: 14px; color: var(--muted); }
.d-client a { color: var(--purple); font-weight: 500; }
.plan-history { margin: 0 0 14px; font-size: 14px; }
.answers { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.answers > summary { padding: 10px 14px; font-weight: 500; color: var(--purple); }
.answer-card { padding: 0 14px 10px; }
.answer-card h3 { font: 500 15px 'Jost', sans-serif; margin: 6px 0; }
.answers .kv { grid-template-columns: minmax(0, 160px) minmax(0, 1fr); }
.answers .kv dd { white-space: pre-wrap; }

.dash { max-width: 980px; }
.dash-back { display: inline-block; margin: 0 0 8px; padding: 6px 0; font-size: 14px; color: var(--purple); }
.dash h2 { margin-bottom: 4px; }
.dash-h { font: 500 18px 'Jost', sans-serif; margin: 28px 0 12px; }
.dash-note { margin: 10px 0 0; font-size: 13.5px; }
.period { display: inline-flex; gap: 4px; padding: 3px; margin: 14px 0 0; background: var(--purple-tint); border-radius: 10px; }
.period-opt { padding: 6px 14px; border-radius: 8px; font-size: 14px; color: var(--muted); }
.period-opt:hover { color: var(--purple); }
.period-opt.on { background: #fff; color: var(--purple); font-weight: 500; box-shadow: 0 1px 3px rgba(36, 20, 64, .12); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.stat-n { font: 500 28px/1.1 'Jost', sans-serif; color: var(--ink); overflow-wrap: anywhere; }
.stat-l { font-size: 14px; color: var(--ink); }
.stat-l a { color: var(--purple); }
.stat-h { font-size: 12.5px; color: var(--muted); }
.stat.bad { border-color: #F0B4B4; background: #FDF3F3; } .stat.bad .stat-n { color: #8A1C1C; }
.stat.warn { border-color: #F0E2A8; background: #FFFAEB; } .stat.warn .stat-n { color: #7A5200; }
.chart { display: block; width: 100%; height: auto; max-width: 640px; margin: 4px 0 0; }
.chart-axis { stroke: var(--line); stroke-width: 1; }
.chart-tick { font: 11px 'Inter', sans-serif; fill: var(--muted); }
.bar-opened { fill: #5B33B8; } .bar-resolved { fill: #2E9E5B; }
.legend { display: flex; align-items: center; gap: 8px; margin: 6px 0 14px; font-size: 13px; color: var(--muted); }
.key { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.key-opened { background: #5B33B8; } .key-resolved { background: #2E9E5B; margin-left: 10px; }
table.trend th, table.trend td { white-space: nowrap; }
table.trend td { text-align: right; } table.trend thead th:not(:first-child) { text-align: right; }
.client-list td.num { font-variant-numeric: tabular-nums; }
.client-list th, .client-list td { padding-left: 10px; padding-right: 10px; }
.client-list th { white-space: normal; }
.client-list td:first-child { min-width: 120px; }
.dash-tabs { display: flex; width: fit-content; margin: 0 0 14px; }
.dash-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 14px 0 0; }
.dash-box { padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.dash-box h4 { margin: 0 0 8px; font: 500 15px 'Jost', sans-serif; }
.dash-box p { margin: 0 0 4px; overflow-wrap: anywhere; }
table.mini { width: 100%; border-collapse: collapse; }
table.mini th, table.mini td { padding: 5px 0; border-bottom: 1px solid var(--line); background: none; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--ink); text-align: left; }
table.mini td { text-align: right; }
.badge.provisional { background: #FFF4DB; color: #7A5200; text-transform: none; vertical-align: middle; }
.warn-note { color: #7A5200; }
table.agents td.bad { color: #8A1C1C; font-weight: 600; }
@media (max-width: 600px) { .client-list th:nth-child(2), .client-list td:nth-child(2) { display: none; } } /* the plan is on the client's own dashboard; the phone keeps what needs attention in view */
.client-list td.bad { color: #8A1C1C; font-weight: 600; } .client-list td.warn { color: #7A5200; font-weight: 600; }

/* small: one pane at a time; the rail becomes a bar */
@media (max-width: 1000px) {
  body.agent-shell { height: auto; }
  .shell { display: block; height: auto; }
  .rail, .rail:hover, .rail:focus-within { position: static; width: auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 4px; padding: 6px 8px; overflow-x: auto; box-shadow: none; }
  .rail-logo { width: 36px; height: 36px; margin: 0 8px 0 0; font-size: 13px; }
  .rail-link { width: auto; padding: 6px 12px; border-radius: 12px; gap: 8px; }
  .rail-label { opacity: 1; font-size: 13px; }
  .shell-main { grid-column: auto; }
  .rail-foot { margin-top: 0; margin-left: auto; flex-direction: row; align-items: center; }
  button.rail-link { width: auto; }
  .rail-foot .rail-label { display: none; } /* icons only on the phone bar; the titles and aria-labels remain */
  .rail-foot .rail-link { padding: 6px 10px; }
  .shell-main { min-height: calc(100vh - 54px); }
  .topbar { height: auto; flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .topbar-logo { display: block; }
  .topbar > .page-title, .page-id { order: 5; flex-basis: 100%; }
  .page-title { font-size: 24px; }
  .page-id { flex-wrap: wrap; row-gap: 4px; }
  .page-id .settings-trail { flex-basis: 100%; }
  .settings-trail ol { flex-wrap: wrap; row-gap: 2px; }
  .search { order: 4; flex-basis: 100%; margin-left: 0; }
  .create { margin-left: auto; }
  main.bleed { display: block; }
  .ws { display: block; }
  .ws-resize, .js .ws-resize, .ws-toggle, .js .ws-toggle { display: none; }
  .views ul { display: flex; overflow-x: auto; padding: 0 10px 10px; gap: 6px; }
  .views .v-main small { display: none; }
  .view { white-space: nowrap; background: var(--purple-tint); }
  .list { border-right: 0; }
  .ws.has-ticket .views, .ws.has-ticket .list { display: none; }
  .ws:not(.has-ticket) .detail { display: none; }
  .back { display: inline-block; }
  .msg { max-width: 100%; }
  .filters form { right: 10px; }
}

/* ---- slide-out details (CSS-only: hidden radios choose the open panel) ---- */
.pn { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.strip { grid-area: strip; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0; background: #fff; border-left: 1px solid var(--line); z-index: 3; }
.strip label { width: 100%; margin: 0; padding: 10px 0 8px; border-radius: 0; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.strip label span { font-size: 10px; font-weight: 500; }
.strip label:hover { background: var(--purple-tint); color: var(--purple); }
#pn-requester:checked ~ .strip label[for="pn-requester"],
#pn-properties:checked ~ .strip label[for="pn-properties"],
#pn-forms:checked ~ .strip label[for="pn-forms"],
#pn-link:checked ~ .strip label[for="pn-link"] { background: var(--purple-soft); color: var(--purple); }
#pn-requester:focus-visible ~ .strip label[for="pn-requester"],
#pn-properties:focus-visible ~ .strip label[for="pn-properties"],
#pn-forms:focus-visible ~ .strip label[for="pn-forms"],
#pn-link:focus-visible ~ .strip label[for="pn-link"],
#pn-none:focus-visible ~ .scrim { outline: 2px solid var(--purple); outline-offset: 1px; }
.scrim { position: absolute; inset: 0 58px 0 0; z-index: 4; background: rgba(36, 20, 64, .28); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; cursor: pointer; }
.slideout { position: absolute; z-index: 5; top: 0; bottom: 0; right: 58px; width: min(380px, calc(100% - 58px)); background: #fff; border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(36, 20, 64, .14); overflow-y: auto; padding: 0 22px 28px; transform: translateX(110%); visibility: hidden; transition: transform .22s ease, visibility .22s; }
.so-head { display: flex; justify-content: flex-end; padding: 12px 0 0; }
.so-close { width: 34px; height: 34px; margin: 0; display: grid; place-items: center; border-radius: 8px; color: var(--muted); cursor: pointer; }
.so-close:hover { background: var(--purple-tint); color: var(--purple); }
.slideout h3 { font: 500 19px 'Jost', sans-serif; margin: 0 0 14px; }
.slideout select { padding: 9px 12px; font-size: 14px; margin-bottom: 10px; }
.slideout label:not(.so-close) { font-size: 13px; }
.slideout code { display: block; padding: 10px 12px; background: var(--purple-tint); border-radius: 6px; user-select: all; }
.sec { display: none; }
#pn-requester:checked ~ .scrim, #pn-properties:checked ~ .scrim, #pn-forms:checked ~ .scrim, #pn-link:checked ~ .scrim { opacity: 1; visibility: visible; }
#pn-requester:checked ~ .slideout, #pn-properties:checked ~ .slideout, #pn-forms:checked ~ .slideout, #pn-link:checked ~ .slideout { transform: none; visibility: visible; }
#pn-requester:checked ~ .slideout .sec-requester, #pn-properties:checked ~ .slideout .sec-properties, #pn-forms:checked ~ .slideout .sec-forms, #pn-link:checked ~ .slideout .sec-link { display: block; }
@media (prefers-reduced-motion: reduce) { .slideout, .scrim { transition: none; } }

/* small screens: the strip becomes a row under the header and the panel covers the screen's right side.
   (Kept after the base slide-out rules so it wins the cascade.) */
@media (max-width: 1000px) {
  .detail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "strip" "thread" "composer"; overflow: visible; }
  .strip { flex-direction: row; justify-content: flex-start; border-left: 0; border-bottom: 1px solid var(--line); padding: 6px 12px; }
  .strip label { width: auto; flex-direction: row; gap: 6px; padding: 6px 12px; border-radius: 10px; }
  .strip label span { font-size: 13px; }
  .scrim { position: fixed; inset: 0; }
  .slideout { position: fixed; top: 0; bottom: 0; right: 0; width: min(420px, 100%); }
}

/* Account: sessions */
.card .sub-head { font: 500 18px 'Jost', sans-serif; margin: 30px 0 6px; padding-top: 22px; border-top: 1px solid var(--line); }
label.check small { display: block; color: var(--muted); font-size: 12.5px; }

/* Outbox: delivery status */
.outbox-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.badge.mail-sent { background: #E5F5EA; color: #1E6B35; }
.badge.mail-queued { background: #EEEDF1; color: #5F5A6B; }
.badge.mail-failed { background: #FBECEC; color: #8A1C1C; }
.badge.mail-skipped { background: #FFF4DB; color: #7A5200; }
.job-note { margin: 4px 0 0; font-size: 13px; max-width: 70ch; font-weight: 400; }
.badge.mail-legacy { background: #fff; color: var(--muted); border-color: var(--line); }
.mail-err { margin-top: 4px; font-size: 13px; color: #8A1C1C; overflow-wrap: anywhere; }
.name-note { margin: -6px 0 14px; }

/* Customer reply bar: Send reply + optional "Reopen this ticket" */
.reply-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.reply-bar .note { margin: 0; }
label.check.reopen { margin: 0; flex: 1 1 260px; }
.flash a { color: var(--purple); font-weight: 500; text-decoration: underline; margin-left: 6px; }

/* Help Topics: nested rows and form hints */
.topic-edit input.short-input, .cfg-card input.short-input { width: 120px; }
.topic-edit select.mid-select, .cfg-card select.mid-select { width: auto; min-width: 150px; }
.tt { cursor: help; border-bottom: 1px dotted var(--muted); }
.matrix .col-act { width: 60px; text-align: right; }
/* Page editor (Pages > Page Content): widgets and layers | the page | properties */
.settings-body .page-edit > .card.p-content, .settings-body .page-edit > .card.p-email { max-width: none; }
.settings-body .page-edit .p-email #tm-subject { max-width: 900px; }
.pe { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.pe-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #FCFBFE; }
.pe-bar .btn[disabled] { opacity: .45; cursor: default; }
.pe-modes { margin-left: auto; display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pe-mode { padding: 7px 16px; border: 0; background: #fff; color: var(--muted); font: 500 14px 'Geist', sans-serif; cursor: pointer; }
.pe-mode.on { background: var(--purple-soft); color: var(--purple); }
.pe-palette { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #FCFBFE; }
.pe-palette .pe-widget { padding: 4px 9px 4px 5px; gap: 6px; font-size: 13px; }
.pe-palette .pe-glyph { width: 20px; height: 20px; font-size: 11px; }
.pe-palette .pe-note { flex-basis: 100%; margin: 2px 0 0; }
.pe-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: max(520px, calc(100vh - 500px)); }
.pe.previewing .pe-body { grid-template-columns: minmax(0, 1fr); }
.pe.previewing .pe-palette, .pe.previewing .pe-right { display: none; }
.pe-right { border-left: 1px solid var(--line); background: #fff; overflow-y: auto; }
.pe-panel { padding: 12px 16px 20px; }
.pe-tabs { display: flex; border-bottom: 1px solid var(--line); }
.pe-tab { flex: 1; padding: 11px 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: 500 14px 'Geist', sans-serif; cursor: pointer; }
.pe-tab.on { color: var(--purple); border-bottom-color: var(--purple); }
.pe-widget { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: 500 14px 'Geist', sans-serif; cursor: pointer; text-align: left; }
.pe-widget:hover { border-color: #7E57D0; color: #5B33B8; }
.pe-glyph { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--purple-soft); color: var(--purple); font: 600 12px 'Geist Mono', monospace; }
.pe-layers { display: grid; gap: 2px; }
.pe-layer { display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; text-align: left; font: 14px 'Geist', sans-serif; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-layer span { color: var(--muted); }
.pe-layer.d1 { padding-left: 24px; }
.pe-layer:hover { background: var(--purple-tint); }
.pe-layer.on { background: var(--purple-soft); color: var(--purple); }
.pe-canvas { background: #F6F4FA; padding: 24px; overflow-y: auto; }
.pe-page { max-width: 640px; margin: 0 auto; min-height: 360px; padding: 28px 32px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 4px rgba(36, 20, 64, .08); }
.pe-block { margin: 0 0 6px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.pe-block:hover { border-color: var(--line); }
.pe-block.on { border-color: #7E57D0; box-shadow: 0 0 0 3px var(--purple-soft); }
.pe-h { margin: 0; font-family: 'Jost', sans-serif; font-weight: 500; color: var(--ink); }
.pe-h1 { font-size: 30px; } .pe-h2 { font-size: 22px; } .pe-h3 { font-size: 17px; }
.pe-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pe-btn { display: inline-block; cursor: inherit; }
.pe-divider { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.pe-spacer { color: transparent; }
.pe-spacer-small { height: 12px; } .pe-spacer-medium { height: 28px; } .pe-spacer-large { height: 56px; }
.pe-block .pe-spacer { background: repeating-linear-gradient(45deg, transparent, transparent 6px, #F1EEF7 6px, #F1EEF7 12px); }
.pe-faq-item { padding: 8px 0; border-bottom: 1px solid var(--line); }
.pe-faq-item:last-child { border-bottom: 0; }
.pe-faq-item p { margin: 4px 0 0; }
.pe-container { padding: 10px; border: 1px dashed #CFC6E4; border-radius: 6px; }
.pe-empty { margin: 0; color: var(--muted); font-size: 14px; }
.pe-none { margin: 24px 0 4px; text-align: center; font-weight: 500; color: var(--muted); }
.pe-note { margin: 8px 12px; color: var(--muted); font-size: 13px; }
.pe-right .pe-note { margin: 8px 0; text-align: left; }
.pe-none + .pe-note { text-align: center; }
.pe-kind { margin: 0 0 10px; font: 600 12px 'Geist Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); }
.pe-field { margin: 0 0 12px; }
.pe-field label { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 500; }
.pe-field input, .pe-field textarea, .pe-field select { margin: 0; padding: 8px 10px; font-size: 14px; }
.pe-group { margin: 0 0 14px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.pe-group .btn { margin-top: 2px; }
.pe-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pe-danger { color: #B42318; border-color: #B42318; }
@media (max-width: 900px) { .pe-body { grid-template-columns: 1fr; } .pe-right { border: 0; border-top: 1px solid var(--line); } }
.settings-body .list-edit > .card { max-width: 1000px; }
.list-table td { vertical-align: middle; }
.list-table .col-act { width: 140px; white-space: nowrap; text-align: right; }
.dis-box + .icon-btn .when-on { display: none; }
.dis-box:checked + .icon-btn .when-off { display: none; }
.dis-box:checked + .icon-btn .when-on { display: inline-grid; }
.dis-box:checked + .icon-btn { color: #067647; }
.dis-box:checked + .icon-btn:hover { color: #067647; background: #ECFDF3; }
.list-table tr:has(.dis-box:checked) input:not(.del-box):not([type="checkbox"]) { opacity: .55; }
.list-table td input[type="checkbox"] { width: auto; margin: 0; }
.muted label.link { display: inline; margin: 0; }
.table-add { margin: 12px 0 0; }
.table-add + .hint { margin-top: 12px; }
.table-add .btn { display: inline-flex; align-items: center; gap: 8px; }
.table-add .btn svg { width: 16px; height: 16px; }
.js .no-js { display: none; }
.list-table .abbr-input { max-width: 130px; }
.list-table td textarea { margin: 0; min-width: 160px; }
.list-table tr:has(.del-box:not(.dis-box):checked) input:not(.del-box):not([type="checkbox"]) { text-decoration: line-through; opacity: .6; }
/* Knowledge Base */
.kb { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.kb-filters { position: sticky; top: 0; padding-right: 8px; }
.kb-filters h2 { margin: 18px 0 6px; font: 500 14px 'Jost', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.kb-filters h2:first-child { margin-top: 0; }
.kb-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.kb-opt { display: flex; justify-content: space-between; gap: 8px; margin-left: -2px; padding: 5px 10px; border-left: 2px solid transparent; color: var(--muted); font-size: 15px; }
.kb-opt:hover { color: #7E57D0; border-left-color: #7E57D0; }
.kb-opt.on { color: #5B33B8; border-left-color: #5B33B8; font-weight: 500; }
.kb-count { color: var(--muted); font: 12px 'Geist Mono', monospace; }
.kb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-tag { display: inline-block; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 13px; }
.kb-tag:hover { border-color: #7E57D0; color: #5B33B8; }
.kb-tag.on { background: var(--purple-soft); border-color: #7E57D0; color: #5B33B8; }
.kb-manage { margin: 18px 0 0; }
.kb-top { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.kb-search { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.kb-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.kb-search input { border: 0; margin: 0; padding: 10px 0; box-shadow: none; background: transparent; }
.kb-top .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kb-top .btn svg { width: 16px; height: 16px; }
.kb-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.kb-chip { padding: 2px 10px; border-radius: 999px; background: var(--purple-soft); color: #5B33B8; font-size: 13px; }
.kb-chip:hover { background: #E3D9F6; }
.kb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.kb-switch { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.kb-switch .kb-opt { display: inline-block; margin: 0; padding: 2px 8px; border: 0; border-radius: 6px; }
.kb-switch .kb-opt.on { background: var(--purple-soft); }
.kb-group { margin: 22px 0 6px; font: 500 17px 'Jost', sans-serif; }
.kb-items { list-style: none; margin: 0; padding: 0; }
.kb-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.kb-item.off { opacity: .6; }
.kb-title { font: 500 18px 'Jost', sans-serif; color: var(--purple); margin-right: 6px; }
.kb-summary { margin: 4px 0 0; color: var(--ink); }
.kb-meta { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.kb-meta .kb-tag { margin-left: 4px; }
.kb-cat { color: var(--muted); }
.kb-article { max-width: 820px; }
.kb-article > header.kb-head { background: transparent; border: 0; padding: 0; height: auto; position: static; display: block; }
.kb-head h2 { margin: 0 0 8px; font: 500 28px/1.2 'Jost', sans-serif; }
.kb-badges { margin: 0 0 6px; }
.kb-tags-line { margin: 8px 0; }
.kb-tags-line .kb-tag { margin-right: 6px; }
.kb-actions { display: flex; gap: 8px; margin: 14px 0 0; }
.kb-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.kb-actions .btn svg { width: 15px; height: 15px; }
.kb-lead { margin: 18px 0 0; font-size: 17px; color: var(--muted); }
.kb-body { margin: 22px 0; line-height: 1.6; }
.kb-body h3, .kb-body h4 { font-family: 'Jost', sans-serif; font-weight: 500; margin: 22px 0 6px; }
.kb-body h3 { font-size: 20px; } .kb-body h4 { font-size: 17px; }
.kb-body p { margin: 0 0 12px; overflow-wrap: anywhere; }
.kb-body ul, .kb-body ol { margin: 0 0 12px; padding-left: 24px; }
.kb-body li { margin: 3px 0; }
.kb-body code { padding: 1px 5px; border-radius: 4px; background: var(--purple-tint); }
.kb-related { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.kb-related h3 { margin: 0 0 8px; font: 500 17px 'Jost', sans-serif; }
.kb-related ul { margin: 0; padding-left: 20px; }
.kb-form { max-width: 860px; }
.kb-form textarea { font-family: 'Geist Mono', monospace; font-size: 14px; }
.kb-tagpick { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 4px; margin: 0 0 16px; }
.kb-tagpick legend { font-weight: 500; padding: 0 6px; }
.kb-pick { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-weight: 400; font-size: 14px; cursor: pointer; }
.kb-pick input { width: auto; margin: 0; }
/* Help topic > Forms: room around the picker, and the hint clear of the pills. */
.p-forms .sub-head { margin-bottom: 14px; }
.p-forms .kb-tags { margin: 0 0 12px; gap: 8px; }
.p-forms .kb-tags + .hint { margin: 0 0 6px; }
.kb-manage-card { max-width: 900px; margin-bottom: 24px; }
.kb-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kb-inline input { width: auto; flex: 1 1 160px; margin: 0; padding: 8px 10px; }
.kb-add { margin-top: 14px; }
/* the Knowledge Base as a customer sees it, and its suggestions on the Open a ticket and Get help pages */
.kb-public > h2 { margin: 0 0 4px; font: 500 30px/1.2 'Jost', sans-serif; }
.kb-who { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.link-btn { display: inline; padding: 0; border: 0; background: none; color: var(--purple); font: inherit; text-decoration: underline; cursor: pointer; }
.kb-back { margin: 0 0 14px; }
.badge.kb-clients { border-color: #CDBDF0; }
.kb-suggest { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--purple-tint); }
.kb-suggest h3 { margin: 0 0 8px; font: 500 17px 'Jost', sans-serif; }
.kb-suggest .kb-search { margin: 0 0 10px; padding-right: 6px; }
.kb-suggest .kb-search input { flex: 1; min-width: 0; }
.kb-suggest ul { margin: 0 0 6px; padding-left: 20px; }
.kb-suggest .note { margin: 6px 0 0; }
.kb-ticket-link { margin: 0 0 14px; }
.kb-ticket-link a { display: inline-flex; align-items: center; gap: 6px; }
.kb-ticket-link svg { width: 16px; height: 16px; }
@media (max-width: 860px) { .kb { grid-template-columns: 1fr; } .kb-filters { position: static; } }
.table-foot { margin: 16px 0 0; }
.table-foot .btn { display: inline-flex; align-items: center; gap: 8px; }
.table-foot .btn svg { width: 16px; height: 16px; }
.th-sort a { color: inherit; text-decoration: none; white-space: nowrap; }
.th-sort a:hover, .th-sort[aria-sort] a { color: var(--purple); }
.sort-arrow { font-size: 10px; }
.topic-table .col-act form.inline { display: inline-block; margin: 0 0 0 4px; }
.topic-table .col-act { width: 110px; white-space: nowrap; }
.topic-table td { vertical-align: middle; }
.settings-body .topic-edit > .card { padding: 0; border: 0; background: transparent; }
.settings-body .topic-edit > .card::before { display: none; }
.hint { font-size: 13px; color: var(--muted); margin: -4px 0 14px; }

/* Topic edit page, Components placeholders, system defaults */
.back { margin: 0 0 14px; }
.topic-edit .card { max-width: 760px; margin-bottom: 20px; }
.options .opt { padding: 16px 0; border-top: 1px solid var(--line); }
.options .opt h4 { font: 500 17px 'Jost', sans-serif; margin: 0 0 4px; }
.options .opt .hint { margin: 0 0 10px; }
.options .opt label { margin-top: 12px; }
.form-actions { display: flex; align-items: center; gap: 18px; }
.lead { max-width: 720px; margin: 0 0 20px; }
.settings-body > .component { max-width: 720px; margin-bottom: 16px; padding: 18px 20px; border: 1px solid var(--line); }
.settings-body > .component h3 { margin-bottom: 6px; }
/* Company page: one form; the offline tick box shows (and gates Save) only while Offline is picked. Without :has() it is always shown. */
.company .status-line { margin: 0 0 14px; }
.company select { max-width: 420px; }
.company .sub-head { margin-top: 34px; }
.company .form-actions { margin-top: 22px; }
.company .kv { grid-template-columns: 210px minmax(0, 1fr); max-width: 760px; }
.offline-ack { display: none; margin: 0 0 8px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--purple); max-width: 620px; }
.offline-ack h4 { margin: 0 0 4px; font: 500 16px 'Jost', sans-serif; }
.offline-ack label.check { margin: 10px 0 0; }
.company-form.from-online:has(#st-offline:checked) .offline-ack { display: block; }
.company-form.from-online:has(#st-offline:checked):not(:has(#ack-offline:checked)) #company-save { opacity: .45; pointer-events: none; }
@supports not selector(:has(*)) { .company-form.from-online .offline-ack { display: block; } }

/* Priority matrix, SLA clocks */
.levels { margin: -4px 0 14px; font-size: 13px; }
.levels summary { cursor: pointer; color: var(--muted); }
.levels dl { margin: 8px 0 0; } .levels dt { font-weight: 600; margin-top: 6px; } .levels dd { margin: 0; color: var(--muted); }
.clock { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--purple-tint); color: var(--muted); white-space: nowrap; }
.clock.ok { background: #E6F5FC; color: #0B6A91; } .clock.soon { background: #FFF4DB; color: #7A5200; }
.clock.overdue { background: #FBECEC; color: #8A1C1C; } .clock.paused { background: #EEEDF1; color: #5F5A6B; } .clock.met { background: #E5F5EA; color: #1E6B35; }
.tk-bottom .clock { margin-left: 6px; }
.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td { text-align: left; vertical-align: middle; padding: 14px; border-bottom: 1px solid var(--line); }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }
.matrix th[scope="row"] { white-space: nowrap; font-weight: 600; }
.cal { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 6px; margin: 0 0 16px; }
.cal legend { font-weight: 600; padding: 0 6px; }
/* On the Hours page the groups are separated by a line instead of each sitting in a box. */
.p-hours .cal { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 0 22px; margin: 0 0 26px; min-width: 0; }
.p-hours .cal legend { padding: 0; margin-bottom: 8px; font-size: 17px; }
.p-hours .cal:last-of-type { border-bottom: 0; margin-bottom: 0; }
.days { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; } .days .check { margin: 0; }
.badge.priority-p1 { background: #FBECEC; color: #8A1C1C; }
.badge.priority-p2 { background: #FFEBDD; color: #8A3B00; }
.badge.priority-p3 { background: #E6F5FC; color: #0B6A91; }
.badge.priority-p4 { background: #fff; color: var(--muted); border-color: var(--line); }
.dot-p1 { background: #D92D20; } .dot-p2 { background: #F79009; } .dot-p3 { background: #2E90FA; } .dot-p4 { background: #17B26A; }
.matrix th[scope="row"] { background: transparent; text-transform: none; letter-spacing: 0; font-size: 15px; }
.settings-body > .card + .card { margin-top: 40px; }
.sub-head { font: 500 17px 'Jost', sans-serif; margin: 28px 0 8px; }
.holiday-list { border-collapse: collapse; font-size: 14px; } .holiday-list td { padding: 4px 18px 4px 0; border-bottom: 1px solid var(--line); }
.tf-table .col-act { width: 110px; white-space: nowrap; text-align: right; }
.col-del { display: inline-block; }
.col-del .del-box { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; pointer-events: none; }
.tf-table tr:has(.dis-box:checked) td:not(.col-act) { opacity: .55; }
.tf-table tr:has(.del-box:not(.dis-box):checked) td:not(.col-act) { text-decoration: line-through; opacity: .6; }
/* Reserved above Save Changes so the note appearing does not shift anything. */
.save-note { min-height: 24px; margin: 18px 0 8px; display: flex; align-items: center; }
.save-note .panel-note { margin: 0; }
/* Properties panel: who follows the ticket */
.followers { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.followers h4 { margin: 0 0 4px; font-size: 15px; }
.follower-list { list-style: none; margin: 0 0 12px; padding: 0; }
.follower-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.follower-list .icon-btn { width: 28px; height: 28px; }
/* the satisfaction survey a customer opens from the email, and the note on their resolved ticket */
.rating { border: 0; margin: 0 0 16px; padding: 0; }
.rating legend { font-weight: 500; padding: 0; margin: 0 0 8px; }
label.rate { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 400; cursor: pointer; }
label.rate:hover, label.rate:has(input:checked) { border-color: #7E57D0; background: var(--purple-soft); }
label.rate input { width: auto; margin: 0; }
.survey-note { margin: 0 0 14px; }
.survey-comment { margin-top: 4px; color: var(--muted); font-size: 13px; white-space: pre-wrap; }
/* the executive report: choosers on screen, the report itself printable */
.report-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 18px; }
.report-pick label { margin: 0; font-size: 14px; color: var(--muted); }
.report-pick select { width: auto; max-width: 100%; margin: 0; padding: 8px 12px; }
.report-title { margin: 6px 0 2px; font: 500 26px/1.2 'Jost', sans-serif; }
/* Only on paper: the page heading is left out of the print, so the report names what it is itself. */
.report-kind { display: none; }
.rpt-section { margin: 0 0 8px; page-break-inside: avoid; break-inside: avoid; }
.badge.rpt-internal { background: #EEEDF1; color: #5F5A6B; }
@media print {
  .rail, .topbar, .report-controls, .snav, .snav-open, .flash, .settings-trail, .spage-head, .foot-links { display: none !important; }
  .settings { display: block !important; }
  .shell, .shell-main, .settings-body, .card.report { display: block !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .rpt-section .table-wrap { overflow: visible; }
  .report-kind { display: block !important; margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  body { background: #fff !important; }
}
.chip-team { padding-left: 12px; background: var(--purple-soft); color: #5B33B8; }
.team-members { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px 6px; margin: 0 0 8px; }
.team-members legend { font-weight: 500; padding: 0 6px; }
.team-members .check { display: flex; margin: 4px 0; }
.followers form:not(.inline) .btn { margin-top: 2px; }
.panel-note[hidden] { display: none; }
.panel-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: #1E6B35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-note .ic { width: 15px; height: 15px; }


/* Forms: add page and field Config overlay */
.settings-body .form-edit > .card { max-width: 1000px; padding: 0; border: 0; background: transparent; overflow: visible; margin-bottom: 28px; }
.settings-body .form-edit > .card::before { display: none; }
.form-edit .hint { font-weight: 400; font-size: 13px; color: var(--muted); margin: 0 0 0 6px; }
.form-edit th .hint { text-transform: none; letter-spacing: 0; display: block; margin: 2px 0 0; }
.field-table td { vertical-align: middle; padding: 8px 10px; }
.field-table input, .field-table select { margin: 0; padding: 9px 12px; }
.type-cell { white-space: nowrap; }
.type-cell select { width: auto; min-width: 150px; max-width: 190px; }
.form-edit .form-actions { flex-wrap: wrap; gap: 12px; max-width: 1000px; }
.cfg-wrap { display: contents; }
/* Field editor: a panel that slides in from the right over a dimmed page. */
.modal.cfg-drawer { justify-content: flex-end; align-items: stretch; padding: 0; }
.modal-card.cfg-card { position: relative; display: flex; flex-direction: column; width: min(100%, max(60%, 440px)); max-height: none; height: 100%; padding: 0; border: 0; border-radius: 14px 0 0 14px; overflow: hidden; animation: drawer-in .25s ease; }
.modal-card.cfg-card::before { display: none; }
@keyframes drawer-in { from { opacity: 0; transform: translateX(48px); } }
@media (prefers-reduced-motion: reduce) { .modal-card.cfg-card { animation: none; } }
.cfg-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line); color: var(--purple); }
.cfg-head svg { width: 22px; height: 22px; }
.cfg-head h3 { margin: 0; font: 500 22px/1.2 'Jost', sans-serif; color: var(--ink); }
.cfg-card .cfg-close { position: static; margin-left: auto; }
.cfg-sub { flex: none; padding: 16px 24px; background: #FCFBFE; border-bottom: 1px solid var(--line); font: 500 18px/1.2 'Jost', sans-serif; color: var(--ink); }
.cfg-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.cfg-menu { padding: 20px 8px 20px 6px; background: #FCFBFE; border-right: 1px solid var(--line); overflow-y: auto; }
.cfg-menu .cfg-tab { padding: 8px 8px 8px 12px; margin-left: 0; border-left: 2px solid var(--line); cursor: pointer; }
.cfg-menu .cfg-tab:hover { border-left-color: #7E57D0; }
.cfg-panels { padding: 24px 28px; overflow-y: auto; }
.cfg-main.solo { grid-template-columns: minmax(0, 1fr); }
.cfg-card .error { margin: 0 0 16px; }
.dep-box { display: grid; gap: 10px; margin-top: 8px; }
.dep-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.dep-line select, .dep-line input { width: auto; flex: 1 1 140px; margin: 0; min-width: 0; }
.dep-line select.mid-select { flex: 0 1 auto; }
.dep-line select[name$="_field"] { flex: 2 1 220px; }
.dep-tag { flex: none; min-width: 52px; text-align: center; padding: 3px 8px; border-radius: 6px; background: var(--purple-soft); color: var(--purple); font: 600 12px 'Geist Mono', monospace; letter-spacing: .04em; }
.cfg-name { font-weight: 400; color: var(--muted); }
.cfg-tab-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cfg-panel { display: none; }
.cfg-tab-radio:nth-of-type(1):checked ~ .cfg-main .p1, .cfg-tab-radio:nth-of-type(2):checked ~ .cfg-main .p2, .cfg-tab-radio:nth-of-type(3):checked ~ .cfg-main .p3, .cfg-tab-radio:nth-of-type(4):checked ~ .cfg-main .p4 { display: block; }
.cfg-tab-radio:nth-of-type(1):checked ~ .cfg-main .t1, .cfg-tab-radio:nth-of-type(2):checked ~ .cfg-main .t2, .cfg-tab-radio:nth-of-type(3):checked ~ .cfg-main .t3, .cfg-tab-radio:nth-of-type(4):checked ~ .cfg-main .t4 { color: #5B33B8; border-left-color: #5B33B8; }
.cfg-row { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 0 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cfg-row label.check { margin: 0; }
.cfg-none { display: none; }
.cfg-none.on { display: block; }
.cfg-foot { flex: none; display: flex; gap: 10px; align-items: center; margin: 0; padding: 14px 24px; border-top: 1px solid var(--line); }
.cfg-foot .cfg-save { margin-left: auto; }
.cfg-foot label.btn, .cfg-foot button.btn { margin: 0; cursor: pointer; }
.js-only { display: none; }
.js .js-only { display: inline-block; }
.js span.js-only { display: inline; }
@media (max-width: 700px) { .type-cell { white-space: normal; } .cfg-row { grid-template-columns: 1fr; } .cfg-main { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .cfg-menu { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; } .cfg-menu .cfg-tab { white-space: nowrap; } .cfg-panels { padding: 18px 16px; } }
.f-var { font-family: 'Geist Mono', monospace; font-size: 15px; }

/* Forms: drag reordering, phone config */
.field-table .col-order { width: 34px; padding-right: 0; }
.drag-handle { display: grid; place-items: center; width: 28px; height: 34px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: grab; border-radius: 6px; }
.drag-handle:hover, .drag-handle:focus-visible { background: var(--purple-tint); color: var(--purple); }
.drag-handle:active { cursor: grabbing; }
.drag-handle svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.field-row.dragging, .tf-row.dragging { opacity: .45; }
.field-row.drop-before td, .tf-row.drop-before td { box-shadow: inset 0 3px 0 var(--purple); }
.field-row.drop-after td, .tf-row.drop-after td { box-shadow: inset 0 -3px 0 var(--purple); }
.form-edit .lbl { display: block; font-weight: 500; margin: 0 0 6px; }
.cfg-card input.short-input { width: 90px; }

/* Forms: edit page */
.field-table .col-act { width: 96px; white-space: nowrap; text-align: right; }
.field-table .col-del { display: inline-block; }
.field-table .del-box { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; pointer-events: none; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; margin: 0; border-radius: 8px; color: var(--muted); cursor: pointer; transition: color .12s, background-color .12s; }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { color: var(--purple); background: var(--purple-tint); }
.icon-btn.disable:hover { color: #B7791F; background: #FFF4DB; }
.icon-btn.enable:hover { color: #067647; background: #ECFDF3; }
button.icon-btn { padding: 0; border: 0; background: transparent; font: inherit; }
.plain li form.inline .icon-btn { width: 28px; height: 28px; align-self: center; }
.icon-btn.danger:hover, .del-box:checked + .icon-btn.danger { color: #B42318; background: #FEECEA; }
.del-box:focus-visible + .icon-btn { outline: 2px solid #7E57D0; outline-offset: 1px; }
.field-table select.f-type-locked { background: var(--purple-tint); color: var(--muted); }
.field-table .f-var[readonly] { background: var(--purple-tint); color: var(--muted); }
.field-row.marked .f-label, .field-row.marked .f-var, .field-row:has(.del-box:not(.dis-box):checked) .f-label, .field-row:has(.del-box:not(.dis-box):checked) .f-var { text-decoration: line-through; opacity: .6; }
.field-table .f-label { min-width: 170px; }
.field-row:has(.dis-box:checked) input:not([type="hidden"]):not([type="checkbox"]), .field-row:has(.dis-box:checked) select { opacity: .55; }
.field-table .type-cell select { min-width: 130px; max-width: 150px; }

/* Forms: delete, information content */
label.link { color: var(--purple); font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.plain a.dim { opacity: .5; }
.btn-danger { background: #B42318; border-color: #B42318; color: #fff; }
.btn-danger:hover { background: #912018; border-color: #912018; }
.btn-danger-outline { color: #B42318; border-color: #B42318; margin-left: auto; cursor: pointer; }
.del-actions { display: flex; gap: 12px; align-items: center; }
.del-actions label.btn { margin: 0; cursor: pointer; }
.req { color: #D92D20; font-weight: 600; }

/* Forms: more field setups */
.form-edit .hint.block, .cfg-card .hint.block { display: block; margin: 2px 0 6px; }
.cfg-error { margin: -6px 0 14px; color: #D92D20; font-size: 15px; }
.cfg-error a { color: inherit; text-decoration: underline; }
.cfg-card .lbl { display: block; font-weight: 500; margin: 14px 0 6px; }
.dt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dt-row input { margin: 0; max-width: 240px; }
.dt-row select { margin: 0; }
.dt-row input, .dt-row select { height: 50px; }
.dt-row .tz { color: var(--purple); font-size: 14px; }
.cfg-card input.mid-input { max-width: 260px; }
.cfg-card select.mid-select { width: auto; min-width: 150px; }

/* Forms: preview */
.link-sm { color: var(--purple); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.pv-card { max-width: 760px; }
.pv-bar { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.pv-as { color: var(--muted); font-size: 14px; margin-right: 4px; }
.pv-tab { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--muted); }
.pv-tab.on { background: var(--purple-tint); border-color: var(--purple); color: var(--purple); font-weight: 600; }
.pv-edit { margin-left: auto; }
.pv-form { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px 12px; background: var(--white); box-shadow: 0 1px 0 rgba(36, 20, 64, .04); }
.pv-title { font: 500 22px 'Jost', sans-serif; margin: 0 0 6px; }
.pv-instructions { white-space: pre-wrap; color: var(--muted); margin: 0 0 20px; }
.pv-field { margin-bottom: 18px; }
.pv-field label:not(.check) { display: block; font-weight: 500; margin: 0 0 6px; }
.pv-field input:not([type="checkbox"]), .pv-field select, .pv-field textarea { margin: 0; }
.pv-field.locked { opacity: .65; }
.pv-legend { display: block; font-weight: 500; margin-bottom: 6px; }
.pv-help { color: var(--muted); font-size: 13px; margin: 6px 0 0; white-space: pre-wrap; }
.pv-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv-inline input { max-width: 260px; }
.pv-field label.pv-ext { display: inline; margin: 0; }
.pv-inline input.pv-ext-input { max-width: 90px; }
.pv-inline .tz { color: var(--purple); font-size: 14px; }
.pv-break hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0 14px; }
.pv-break h4 { font: 500 18px 'Jost', sans-serif; margin: 0 0 4px; }
.pv-info { background: var(--purple-tint); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; }
.pv-content { white-space: pre-wrap; margin: 6px 0 0; }

/* Forms: column helpers */
.th-tip { white-space: nowrap; }
details.tip { display: inline-block; vertical-align: middle; margin-left: 4px; text-transform: none; letter-spacing: 0; font-weight: 400; }
details.tip > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--purple); }
details.tip > summary::-webkit-details-marker { display: none; }
details.tip > summary:hover, details.tip[open] > summary, details.tip > summary:focus-visible { background: var(--purple-soft); }
details.tip > summary .ic { width: 17px; height: 17px; }
.tip-pop { position: fixed; z-index: 70; top: 100px; left: 16px; width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: 18px 22px 16px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 44px rgba(36, 20, 64, .3); text-align: left; text-transform: none; letter-spacing: 0; font: 400 15px/1.5 'Geist', sans-serif; white-space: normal; }
.tip-pop::before { content: ""; position: absolute; top: -7px; left: var(--arrow, 24px); width: 12px; height: 12px; background: var(--white); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.tip-body { max-height: var(--room, calc(100vh - 260px)); overflow-y: auto; }
.tip-pop h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 34px 10px 0; border-bottom: 1px solid var(--line); font: 500 20px 'Jost', sans-serif; }
.tip-pop h4 .ic { width: 20px; height: 20px; color: var(--muted); }
.tip-pop p { margin: 0 0 12px; }
.tip-pop code { white-space: nowrap; font-family: 'Geist Mono', monospace; font-size: 13px; background: var(--purple-tint); padding: 1px 5px; border-radius: 4px; }
.tip-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--purple); cursor: pointer; place-items: center; }
.js .tip-close { display: grid; }
.tip-close:hover { background: var(--purple-tint); }
.tip-close .ic { width: 18px; height: 18px; }
.tip-soon { background: #FFF9E6; border: 1px solid #F0E2A8; border-radius: var(--radius); padding: 8px 12px; font-size: 14px; }
.tip-table { width: 100%; border: 1px solid var(--line); border-collapse: collapse; font-size: 14px; }
.tip-table th, .tip-table td { border: 1px solid var(--line); padding: 7px 10px; vertical-align: top; text-align: left; }
.tip-table th { background: var(--white); color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }
.tip-table td:first-child { width: 36%; }

/* Forms: delete-fields warning */
.warn-title { display: flex; align-items: center; gap: 10px; }
.warn-title .ic { width: 22px; height: 22px; color: var(--purple); }
.danger-text { color: #B42318; font-weight: 600; }
.doomed { list-style: none; margin: 0 0 18px; padding: 12px 0 0; border-top: 1px solid var(--line); }
.doomed li { padding: 4px 0; }
.doomed li .muted { margin-left: 6px; font-family: 'Geist Mono', monospace; }
.del-actions .cfg-save { margin-left: auto; }

/* Forms of a help topic on the New ticket page, and their answers on a ticket. */
.tkf-panel[hidden], .tkf-fixed[hidden], .tkf-dep[hidden] { display: none; }
.tkf-dep.dep-required .pv-field > label:not(.check)::after, .tkf-dep.dep-required .pv-legend::after, .tkf-dep.dep-required label.check > span::after { content: ' *'; color: #D92D20; font-weight: 600; }
.tkf-for { font: 500 16px 'Jost', sans-serif; margin: 18px 0 6px; }
.tkf-form { margin: 14px 0 6px; padding: 10px 16px 6px; border: 1px solid var(--line); border-radius: 10px; }
.tkf-form legend { padding: 0 8px; font: 500 16px 'Jost', sans-serif; }
.tf-table .col-order { width: 34px; padding-right: 0; }

.notice { display: block; margin: 0 0 14px; padding: 10px 14px; border: 1px solid #F0E2A8; border-radius: 10px; background: #FFF9E6; color: #5C4A00; font-size: 14px; }
.qr-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.qr-bar label { margin: 0; font-size: 13px; color: var(--muted); }
.qr-bar select { width: auto; max-width: 100%; margin: 0; }

/* Roadmap: the details under an item name */
.road-item { min-width: 260px; }
.road-notes { margin: 2px 0 0; font-size: 13px; max-width: 62ch; }
/* Forms panel: the answers to the forms a ticket was opened with */
.form-card { margin: 0 0 22px; }
.form-card h4 { margin: 0 0 2px; font-size: 15px; }
.form-card p { margin: 0 0 8px; font-size: 13px; }
.sec-forms .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
.sec-forms .kv dt { font-size: 13px; margin-top: 8px; }
.sec-forms .kv dd { white-space: pre-wrap; }

/* ---- Knowledge Base: clients an article is limited to, and suggestions by help topic ------------------------------------
   The article editor shows the client boxes only while "Who can read it" is Clients, and the help topic boxes only while it is Public. It is
   CSS-only and needs :has(); without that both always show, each saying when it is used. Hidden boxes are still sent, so an earlier choice is kept. */
.kb-scope { display: none; }
.kb-form:has(#kb-audience option[value="clients"]:checked) .kb-scope-orgs, .kb-form:has(#kb-audience option[value="public"]:checked) .kb-scope-topics { display: block; }
@supports not selector(:has(*)) { .kb-scope { display: block; } }
.kb-scope .kb-tags { max-height: 260px; overflow-y: auto; margin: 0 0 12px; }
.kb-scope .hint { margin: 0 0 10px; }
.kb-pick.gone { border-style: dashed; color: var(--muted); }
.badge.kb-limit { border-color: #CDBDF0; text-transform: none; }
.kb-scope-line { margin: 4px 0; font-size: 14px; color: var(--muted); }
.kb-scope-line strong { color: var(--ink); font-weight: 500; }
/* Open a ticket and Get help: one list per help topic, the chosen topic's shown by desk.js; without it every list shows under its heading */
.kb-sg[hidden] { display: none; }
.kb-sg-title { margin: 8px 0 4px; font: 500 15px 'Jost', sans-serif; color: var(--muted); }
.kb-sg-phone { display: none; }

/* ---- Satisfaction breakdowns, team figures and the client switcher (the dashboards) ----------------------------------------- */
.dash-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; }
.dash-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 14px 0 0; }
.dash-switch label { margin: 0; font-size: 14px; color: var(--muted); }
.dash-switch select { width: auto; min-width: 180px; max-width: 100%; margin: 0; padding: 8px 12px; font-size: 15px; }
.sat-h { margin: 22px 0 4px; font: 500 16px 'Jost', sans-serif; }
.sat-based { margin: 0; font-size: 14px; }
.sat-tiles { margin-top: 14px; }
table.sat th, table.sat td { white-space: normal; padding-left: 10px; padding-right: 10px; }
table.sat .num { text-align: right; font-variant-numeric: tabular-nums; }
table.sat .nowrap { white-space: nowrap; }
.sat-comment { min-width: 160px; white-space: pre-wrap; overflow-wrap: anywhere; }
.badge.few { background: #FFF4DB; color: #7A5200; text-transform: none; vertical-align: middle; }
.bar-sat { fill: #5B33B8; } .bar-few { fill: #C9BBEB; }
.key-sat { background: #5B33B8; } .key-few { background: #C9BBEB; margin-left: 10px; }

/* ---- Phone and small tablet layouts ------------------------------------------------------------------------------------
   Customer pages first, then the agent screens. Nothing here changes a screen wider than 1000px. Checked at 375px and 768px:
   no sideways scroll on the page itself (a table may scroll inside its own box), controls at least about 40px to tap. */
@media (max-width: 600px) {
  /* customer pages: the header links sit on one line of their own under the logo (three links no longer fit beside it), and the form card and its nested form boxes give width back to the fields */
  .nav { height: auto; flex-wrap: wrap; padding-top: 8px; padding-bottom: 6px; row-gap: 0; }
  .nav-links { width: 100%; justify-content: space-between; gap: 12px; }
  .nav-links a:not(.btn) { white-space: nowrap; font-size: 14px; padding: 8px 0; }
  .nav-links .btn-sm { padding: 10px 12px; }
  .brand { padding: 4px 0; }
  .brand img { height: 32px; }
  .foot-links a { display: inline-block; padding: 10px 0; }
  .tkf-form { padding: 8px 12px 4px; }
  .tkf-form legend { font-size: 15px; }
}
@media (max-width: 1000px) {
  /* agent screens: bigger touch targets on the top bar, the back link, the breadcrumb and the ticket panel buttons */
  .rail-link { min-height: 40px; }
  .back { padding: 10px 0; }
  .settings-trail ol { align-items: center; }
  .settings-trail a { display: inline-block; padding: 8px 0; }
  .d-actions .btn, .d-actions .act, .composer-bar .btn { min-height: 40px; }
  .rail-logo { width: 40px; height: 40px; }
  .composer .kind label { padding: 9px 14px; }
  .kb-switch .kb-opt { padding: 9px 12px; }
  .kb-opt { padding-top: 10px; padding-bottom: 10px; }
  th.th-sort a { display: inline-block; padding: 12px 14px; margin: -12px -14px; }
}
@media (max-width: 860px) {
  /* Settings: the content gets the whole width; the Settings menu slides out over it from the "Settings menu" button. */
  .settings { display: block; }
  main.agent-main.flush { overflow: visible; }
  .settings-body { overflow: visible; padding: 14px 16px 40px; }
  .snav { position: fixed; inset: 0 auto 0 0; z-index: 60; width: 300px; max-width: 86vw; padding-top: 20px; background: #fff; box-shadow: 8px 0 28px rgba(36, 20, 64, .2); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
  .snav-toggle { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .snav-toggle:checked ~ .snav { transform: none; visibility: visible; }
  .snav-toggle:checked ~ .snav-scrim { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(22, 18, 31, .35); }
  .snav-toggle:focus-visible ~ .settings-body .snav-open { outline: 2px solid #7E57D0; outline-offset: 2px; }
  .snav-open { display: inline-flex; margin: 0 0 12px; min-height: 40px; }
  .snav-link { padding-top: 10px; padding-bottom: 10px; }
  .ptabs { overflow-x: auto; scrollbar-width: none; }
  .ptab { padding: 12px 14px; }
}
@media (max-width: 700px) {
  /* Settings tables scroll sideways inside their box; the Edit and Enable icons stay in view at the right edge */
  .topic-table th.col-act, .topic-table td.col-act, .tf-table th.col-act, .tf-table td.col-act, .list-table th.col-act, .list-table td.col-act { position: sticky; right: 0; background: #fff; box-shadow: -8px 0 8px -8px rgba(36, 20, 64, .25); }
  .topic-table th.col-act, .tf-table th.col-act, .list-table th.col-act { background: var(--purple-tint, #F5F2FA); }
  .icon-btn { min-width: 40px; min-height: 40px; }
}
@media (max-width: 1000px) {
  /* Open a ticket and Get help: the articles for the chosen help topic sit directly under the topic select, where the person is looking when they choose, not at the top of the page (the box keeps its search; the lists are a copy in the form, desk.js shows the chosen one in both) */
  .kb-sg-top { display: none; }
  .kb-sg-phone { display: block; }
}