/* ── Settings ── */
.settings-shell{display:grid;grid-template-columns:200px 1fr;gap:24px;max-width:880px}
.settings-side{display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--rule);padding-right:16px}
.settings-tab{padding:9px 16px;font-size:13px;color:var(--ink2);cursor:pointer;border-radius:var(--r-pill);transition:all .1s}
.settings-tab:hover{background:var(--purple-lt);color:var(--ink)}
.settings-tab.active{background:var(--purple-lt);color:var(--purple);font-weight:500}
.settings-panel{min-width:0}
.settings-section + .settings-section{border-top:1px solid var(--rule);margin-top:24px;padding-top:24px}
.settings-h{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.ai-settings .btn,.ai-settings .form-input{min-height:44px}
.ai-settings .btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ai-settings .toggle{width:44px;height:44px}
.ai-settings .toggle-slider{inset:13px 6px}
.ai-settings .toggle input:focus-visible+.toggle-slider{outline:2px solid var(--ink);outline-offset:3px}
#ai-settings-status{min-height:40px}
#ai-connection-result{min-height:20px}
.ai-settings{overflow-wrap:anywhere}
.ai-settings .settings-row>div{min-width:0}
@media(max-width:900px){
  .ai-settings-shell{grid-template-columns:minmax(0,1fr)}
  .ai-settings-shell .settings-side{flex-direction:row;overflow-x:auto;border-right:0;padding-right:0}
  .ai-settings-shell .settings-tab{flex-shrink:0}
}
.settings-row:last-of-type{border-bottom:none}
/* ── Customer detail extras ── */
.cust-quickactions{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.cust-quickactions .btn{text-decoration:none}
.cust-timeline{position:relative;padding-left:18px;max-height:340px;overflow-y:auto}
.cust-timeline::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:var(--rule)}
.cust-timeline-item{position:relative;padding:8px 0 8px 8px;cursor:pointer;border-radius:var(--r);transition:background .1s}
.cust-timeline-item:hover{background:var(--off2)}
.cust-timeline-item::before{content:'';position:absolute;left:-15px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--purple);border:2px solid var(--off);box-sizing:content-box}
.cust-timeline-item.role-customer::before{background:var(--cyan)}
.cust-timeline-item.role-agent::before{background:var(--purple)}
.cust-timeline-item.role-ai::before{background:var(--green)}
.cust-timeline-item.role-note::before{background:var(--amber)}
.cust-note{padding:10px 12px;border-left:2px solid var(--amber);background:var(--amber-lt);border-radius:0 var(--r) var(--r) 0;margin-bottom:8px}
.cust-note:last-child{margin-bottom:0}
/* ── Composer extras ── */
.comp-var-btn{font-family:var(--font-mono);font-size:10px;padding:2px 9px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--off2);color:var(--ink3);cursor:pointer;transition:all .15s}
.comp-var-btn:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-lt)}
.comp-menu{display:none;position:absolute;bottom:calc(100% + 4px);right:0;background:var(--off);border:1px solid var(--rule2);border-radius:var(--r2);min-width:200px;z-index:20;box-shadow:0 8px 24px rgba(19,14,48,0.10);overflow:hidden;padding:4px 0}
/* .comp-menu is absolutely positioned and opens UPWARD — it was written for
   the composer at the bottom of the viewport. A topbar menu can use neither:
   .topbar is height:48px with overflow:hidden AND isolation:isolate
   (shell.css), so a panel rendered inside it is clipped to a sliver and its
   z-index is trapped in the topbar's stacking context, painting under the
   filter bar below. The panel is therefore built at BODY level with a
   full-viewport backdrop, the same escape .ws-switch-pop uses, and positioned
   from the trigger's bounding rect. */
.menu-backdrop{position:fixed;inset:0;z-index:200}
.comp-menu-fixed{position:fixed;top:auto;bottom:auto;right:auto;width:200px;z-index:201}
/* The items are real <button>s so they stay keyboard-operable; strip the UA
   button chrome so they still read as menu rows. */
button.comp-menu-item{display:block;width:100%;text-align:left;border:none;background:transparent}
.comp-menu-item{padding:7px 12px;cursor:pointer;font-size:12px;color:var(--ink2);white-space:nowrap;font-family:var(--font-sans)}
.comp-menu-item:hover{background:var(--purple-lt);color:var(--ink)}
.comp-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--ink3);font-family:var(--font-mono);margin-top:4px;padding:0 2px;letter-spacing:.04em}
/* ── AI page extras ── */
.ai-layout{flex:1;display:flex;overflow:hidden;min-width:0}
.ai-sidebar{width:220px;min-width:220px;border-right:1px solid var(--rule);background:var(--off);display:flex;flex-direction:column;flex-shrink:0}
.ai-sidebar-header{padding:10px;border-bottom:1px solid var(--rule)}
.ai-conv-list{flex:1;overflow-y:auto;padding:6px}
.ai-conv-empty{padding:18px 12px;font-size:11px;color:var(--ink3);text-align:center}
.ai-conv-item{padding:9px 12px;border-radius:var(--r-pill);cursor:pointer;margin-bottom:3px;display:flex;align-items:center;gap:6px;transition:background .1s}
.ai-conv-item:hover{background:var(--purple-lt)}
.ai-conv-item.active{background:var(--purple-lt)}
.ai-conv-item.active .ai-conv-title{color:var(--purple);font-weight:500}
.ai-conv-title{flex:1;min-width:0;font-size:12.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-conv-del{opacity:0;color:var(--ink3);font-size:13px;background:transparent;border:none;cursor:pointer;padding:2px 6px;border-radius:var(--r-pill);transition:all .1s;line-height:1}
.ai-conv-item:hover .ai-conv-del{opacity:1}
.ai-conv-del:hover{color:var(--red);background:var(--red-lt)}
.ai-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
/* Markdown */
.ai-md{font-size:14px;line-height:1.6}
.ai-md p{margin:0 0 8px}
.ai-md p:last-child{margin-bottom:0}
.ai-md ul, .ai-md ol{margin:6px 0;padding-left:20px}
.ai-md li{margin:2px 0}
.ai-md code{background:var(--off2);padding:1px 5px;border-radius:3px;font-family:var(--font-mono);font-size:.92em;color:var(--ink)}
.ai-md pre{background:var(--off2);border:1px solid var(--rule);border-radius:var(--r2);padding:10px 12px;overflow-x:auto;margin:8px 0;font-family:var(--font-mono);font-size:11.5px;line-height:1.5}
.ai-md pre code{background:transparent;padding:0;font-size:inherit}
.ai-md h3,.ai-md h4{margin:12px 0 6px;font-weight:600;color:var(--ink)}
.ai-md h3{font-size:14px}
.ai-md h4{font-size:13px}
.ai-md strong{color:var(--ink);font-weight:600}
.ai-msg{position:relative}
.ai-msg-copy{position:absolute;top:6px;right:6px;background:var(--off);border:1px solid var(--rule);border-radius:var(--r-pill);padding:3px 10px;font-size:10px;color:var(--ink3);cursor:pointer;opacity:0;transition:opacity .15s;font-family:var(--font-sans);letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.ai-msg:hover .ai-msg-copy{opacity:1}
.ai-msg-copy:hover{color:var(--purple);border-color:var(--purple)}
.ai-followups{display:flex;flex-wrap:wrap;gap:6px;padding:0 20px 12px}
.ai-followup{padding:6px 14px;border:1px solid var(--rule);border-radius:var(--r-pill);font-size:12px;color:var(--ink2);background:var(--off);cursor:pointer;transition:all .15s}
.ai-followup:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-lt)}
/* ── Configuration hub ── */
.confighub-subtitle{font-size:11px;color:var(--ink3);font-style:italic}
.confighub-group{margin-bottom:26px}
.confighub-group-title{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.confighub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.confighub-card{display:flex;align-items:center;gap:12px;padding:15px 18px;border:none;border-radius:var(--r-card);background:var(--off);cursor:pointer;transition:all .15s}
.confighub-card:hover{background:var(--off2)}
.confighub-icon{width:18px;height:18px;flex-shrink:0;color:var(--ink2)}
.confighub-card:hover .confighub-icon{color:var(--purple)}
.confighub-body{flex:1;min-width:0}
.confighub-label{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:3px}
.confighub-summary{font-size:11px;color:var(--ink3);line-height:1.45}
.confighub-chev{width:13px;height:13px;flex-shrink:0;color:var(--ink3);opacity:0;transition:opacity .15s}
.confighub-card:hover .confighub-chev{opacity:1;color:var(--purple)}
/* ── Help & Support ── */
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.help-quickstart{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
@media(max-width:800px){.help-grid,.help-quickstart{grid-template-columns:minmax(0,1fr)}}
.help-card{padding:12px 14px;border:none;border-radius:var(--r2);cursor:pointer;transition:all .15s;background:var(--off2)}
.help-card:hover{background:var(--purple-lt)}
.help-card-t{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:4px}
.help-card-d{font-size:11px;color:var(--ink3);line-height:1.5}
.help-kbd{font-family:var(--font-mono);font-size:11px;padding:2px 10px;border:1px solid var(--rule2);border-radius:var(--r-pill);background:var(--off2);color:var(--ink2);display:inline-block}
.help-faq-item{border-top:1px solid var(--rule)}
.help-faq-item:first-child{border-top:none}
.help-faq-q{width:100%;border:0;background:none;text-align:left;font-family:inherit;padding:12px 4px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:13px;color:var(--ink);font-weight:500;gap:12px;transition:color .1s}
.help-faq-q:hover{color:var(--purple)}
.help-faq-q:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.help-faq-chev{font-family:var(--font-mono);font-size:16px;color:var(--ink3);font-weight:400;flex-shrink:0;width:14px;text-align:center}
.help-faq-a{padding:0 4px 14px;font-size:12.5px;color:var(--ink2);line-height:1.6}
/* ── Knowledge Base ── */
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:8px}
.kb-article-list{display:flex;flex-direction:column;gap:8px}
.kb-saved-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;background:var(--off);border-bottom:1px solid var(--rule);font-size:12px}
.kb-saved-filters select{max-width:100%;min-width:0}
.kb-saved-filters .btn,.kb-saved-filters select{min-height:44px}
.kb-saved-note{color:var(--ink3)}
.kb-filter-match{flex-basis:100%;min-width:0;overflow-wrap:anywhere;color:var(--ink2)}
.kb-pinned-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex-basis:100%;min-width:0}
.kb-pinned-filters .btn{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left}
.kb-active-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 16px;font-size:12px}
.kb-active-filters .btn{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left}
.kb-active-filters:focus-visible,.kb-active-filters .btn:focus-visible,#kb-default-filter:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
#kb-saved-status:not(:empty){flex-basis:100%}
.kb-list-row{display:flex;align-items:flex-start;gap:20px;padding:16px;background:var(--off);border-radius:var(--r)}
.kb-row-content{flex:1;min-width:0}
.kb-row-title{display:block;background:none;border:0;text-align:left;color:var(--ink);font:600 14px/1.4 var(--font-sans);cursor:pointer;min-height:32px;overflow-wrap:anywhere}
.kb-row-title:hover{color:var(--purple);text-decoration:underline}
.kb-row-title:focus-visible,.kb-pagination:focus-visible,.kb-cat-item:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.kb-row-preview{font-size:13px;line-height:1.5;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;margin:4px 0 8px}
.kb-row-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--ink3)}
.kb-row-state{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:0 0 220px}
.kb-row-state .kb-select-draft{margin-left:0}
.kb-row-state .kb-updated{margin:0;order:1;flex-basis:100%}
.kb-review-status{font-size:12px;color:var(--ink2)}
.kb-review-overdue{color:var(--red);font-weight:600}
.kb-row-state>span{overflow-wrap:anywhere}
.kb-row-state>span:not(.kb-status){font-size:12px}
.kb-review-confirm{display:flex;align-items:center;gap:8px;min-height:44px}
.kb-quality-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0}
.kb-quality-controls label{display:flex;flex-direction:column;gap:4px}
.kb-quality-controls .btn,.kb-quality-item>.btn{min-height:44px}
.kb-quality-item{border-top:1px solid var(--rule);padding:16px 0;overflow-wrap:anywhere}
.kb-quality-item h3{font-size:14px;margin:0 0 8px;color:var(--ink)}
.kb-quality-item p{margin:8px 0}
.kb-quality-item>label{display:block;margin-top:12px}
.kb-quality-item textarea{min-height:64px}
.reply-evidence-source{margin:12px 0;overflow-wrap:anywhere}
.reply-evidence-source p{margin:4px 0;font-size:12px;color:var(--ink2)}
.reply-evidence-source .btn{white-space:normal;text-align:left;min-height:36px}
.reply-evidence-warnings{color:var(--red)}
.kb-library-page .kb-cat-item{width:100%;border:0;background:transparent;text-align:left;min-height:44px}
.kb-library-page .kb-cat-item.active{background:var(--purple-lt)}
.kb-library-page .filter-bar{flex-wrap:wrap;gap:8px}
.kb-result-count{font-size:12px;color:var(--ink3);flex-basis:100%}
.kb-pagination{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:12px 16px;flex-wrap:wrap;background:var(--off);border-top:1px solid var(--rule);font-size:12px;color:var(--ink2)}
.kb-pagination span{margin-right:auto}
.kb-pagination .btn{min-height:44px}
.kb-article-list .kb-directory{border-radius:var(--r);padding:16px;align-self:stretch}
.kb-article-list .kb-directory summary .kb-updated,.kb-article-list .kb-directory-status,.kb-article-list .kb-directory-hint{margin:0}
.kb-article-list .kb-directory summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:44px}
.kb-article-list .kb-directory summary::before{content:'▸';color:var(--purple)}
.kb-article-list .kb-directory[open] summary::before{content:'▾'}
.kb-article-list .kb-directory summary .kb-card-t{flex:1;min-width:120px}
@media(max-width:1000px){
  .kb-library-page .kb-sidebar{width:150px;min-width:150px}
  .kb-row-state{flex-basis:160px}
}
@media(max-width:800px){
  .kb-library-page{overflow-y:auto;display:block}
  .kb-library-page .topbar{height:auto;min-height:48px;flex-wrap:wrap;padding:12px}
  .kb-library-page .topbar .tb-title{flex-basis:100%}
  .kb-library-page .kb-layout{flex-direction:column;overflow:visible}
  .kb-library-page .kb-main{overflow:visible}
  .kb-library-page .kb-sidebar{width:100%;min-width:0;max-height:150px;border-right:0;border-bottom:1px solid var(--rule)}
  .kb-library-page .kb-cat-list{display:flex;flex-wrap:wrap;gap:4px}
  .kb-library-page .kb-cat-item{width:auto;max-width:100%}
  .kb-library-page .filter-bar input,.kb-library-page .filter-bar select{width:100%!important;min-width:0;min-height:44px}
  .kb-list-row{flex-direction:column;gap:12px}
  .kb-row-state{flex-basis:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  .kb-row-title{min-height:44px}
  .kb-library-page .page-scroll{padding:12px;overflow:visible;flex:none;order:2}
  .kb-library-page .kb-pagination{order:1}
}
.kb-card{padding:18px;border:none;border-radius:var(--r-card);background:var(--off);cursor:pointer;transition:all .15s;display:flex;flex-direction:column;gap:6px}
.kb-card:hover{background:var(--off2)}
.kb-status{display:inline-flex;align-items:center;align-self:flex-start;padding:4px 8px;border-radius:var(--r-pill);font-size:12px;font-weight:600;line-height:1.4}
.kb-status-draft{color:var(--amber);background:var(--amber-lt)}
.kb-status-published{color:var(--green);background:var(--green-lt)}
.kb-status-archived{color:var(--ink2);background:var(--off2)}
.kb-status-filters{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-bottom:1px solid var(--rule)}
.kb-status-filters .btn{min-height:44px;gap:8px}
.kb-status-filters .btn[aria-pressed="true"]{background:var(--ink);color:var(--w)}
.kb-status-filters span{font-variant-numeric:tabular-nums}
.kb-status-filters .btn:focus-visible,.kb-article-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.kb-review-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px;margin:16px 0;border-radius:var(--r);background:var(--off)}
.kb-review-banner p,.kb-form-note{color:var(--ink2);font-size:13px;line-height:1.5;margin-top:8px}
.kb-review-banner .btn{min-height:44px}
.kb-article-link{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;min-height:44px;padding:16px;border-radius:var(--r);background:var(--off);color:var(--blue);overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:3px}
.kb-article-link span{font-size:12px;color:var(--ink2)}
.kb-article-meta{flex-wrap:wrap}
@media(max-width:768px){.kb-status-filters{padding:12px}.kb-review-banner{align-items:stretch}.kb-review-banner>div{width:100%}.kb-review-banner .btn{width:100%}}
.kb-card-cat{font-family:var(--font-sans);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--purple)}
.kb-card-t{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4}
.kb-card-snippet{font-size:11.5px;color:var(--ink3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kb-card-meta{font-family:var(--font-mono);font-size:10px;color:var(--ink4);margin-top:auto;display:flex;justify-content:space-between;padding-top:8px;border-top:1px solid var(--rule)}
.kb-article{max-width:760px;margin:0 auto}
.kb-article-h{font-family:var(--font-serif);font-size:28px;font-weight:400;color:var(--ink);letter-spacing:-.01em;margin-bottom:10px;line-height:1.2}
.kb-article-meta{display:flex;gap:14px;align-items:center;font-size:11px;color:var(--ink3);font-family:var(--font-mono);margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.kb-article-body{font-size:14px;line-height:1.75;color:var(--ink2);white-space:pre-wrap;word-wrap:break-word}
.kb-layout{flex:1;display:flex;overflow:hidden;min-width:0}
.kb-sidebar{width:200px;min-width:200px;border-right:1px solid var(--rule);background:var(--off);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.kb-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.kb-cat-list{padding:6px}
.kb-cat-item{padding:7px 14px;cursor:pointer;border-radius:var(--r-pill);font-size:12.5px;color:var(--ink2);display:flex;align-items:center;justify-content:space-between;gap:8px;transition:background .1s;margin-bottom:2px}
.kb-cat-item:hover{background:var(--purple-lt);color:var(--ink)}
.kb-cat-item.active{background:var(--purple-lt);color:var(--purple);font-weight:500}
.kb-cat-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-cat-count{font-family:var(--font-mono);font-size:10px;color:var(--ink3)}
.kb-cat-item.active .kb-cat-count{color:var(--purple)}
.kb-helpful-card{margin-top:32px;padding:18px;border:none;border-radius:var(--r-card);background:var(--off2);text-align:center}
mark{background:rgba(255,226,40,0.55);color:var(--ink);padding:0 2px;border-radius:2px}
/* ── Dashboard ── */
.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:16px}
.chart-bar-wrap{display:flex;align-items:flex-end;gap:6px;height:80px;margin-top:8px}
.chart-bar-col{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.chart-bar{width:100%;background:var(--ink);border-radius:1px 1px 0 0;transition:height .3s}
.chart-bar-lbl{font-family:var(--font-sans);font-size:10px;color:var(--ink3)}
.donut-wrap{display:flex;align-items:center;gap:16px;margin-top:8px}
.donut-legend{flex:1}
.donut-row{display:flex;align-items:center;gap:6px;margin-bottom:5px;font-size:11px}
.donut-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
/* ── Ticket detail ── */
.ticket-layout{flex:1;display:flex;overflow:hidden}
.ticket-main{flex:1;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--rule)}
.ticket-sidebar{background:var(--off);width:240px;min-width:240px;overflow-y:auto;padding:16px}
.thread{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:2px}
.msg{padding:12px 16px;font-size:14px;line-height:1.65;max-width:78%;border-radius:var(--r2)}
.msg-customer{background:var(--off);border:1px solid var(--rule);border-left:2px solid var(--rule2);color:var(--ink2)}
.msg-agent{background:var(--purple-lt);border:1px solid var(--rule);border-left:2px solid var(--purple);align-self:flex-end;color:var(--ink)}
.msg-ai{background:var(--off);border:1px solid var(--green-lt);border-left:2px solid var(--green);align-self:flex-end;color:var(--ink)}
.msg-note{background:var(--amber-lt);border-left:2px solid var(--amber);color:var(--amber)}
.msg-from{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px;display:flex;align-items:center;gap:5px}
.msg-agent .msg-from{color:var(--purple)}.msg-ai .msg-from{color:var(--green)}.msg-note .msg-from{color:var(--amber)}
/* Formatted (HTML) email bodies render in a script-less sandboxed iframe;
   height is set from the frame content by tickets/message-html.js. */
.msg-frame{display:block;width:100%;border:0;height:60px;background:transparent;color-scheme:light}
.msg-remote-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;padding:6px 9px;border:1px dashed var(--rule2);border-radius:var(--r);background:var(--off2);font-size:11px;color:var(--ink3)}
/* Attachment chips under a message. */
.att-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.att-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 10px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--w);color:var(--ink);font-size:12px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-chip:hover{border-color:var(--rule3);background:var(--off)}
.att-chip-dead{opacity:.6;cursor:default}
/* Rich compose box (Quill mounts into .compose-rich; its own snow theme CSS
   is loaded on first use by tickets/composer.js). */
.compose-rich:focus-within{outline:2px solid var(--purple);outline-offset:2px}
.compose-rich{min-height:120px;max-height:340px;overflow-y:auto;padding:0}
.compose-rich .ql-editor{min-height:100px;font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--ink);padding:10px 12px}
.compose-rich .ql-editor.ql-blank::before{color:var(--ink4);font-style:normal;left:12px;right:12px}
.composer-body .ql-toolbar.ql-snow{border:0;border-bottom:1px solid var(--rule);padding:4px 8px}
.composer-body .ql-container.ql-snow{border:0;font-family:var(--font-sans)}
/* Files staged for the next reply. */
.pending-att{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 6px}
.pending-att:empty{display:none}
.att-chip-pending{background:var(--off2);border-style:dashed}
.att-chip-x{border:0;background:none;cursor:pointer;color:var(--ink3);font-size:14px;line-height:1;padding:0 0 0 2px}
.att-chip-x:hover{color:var(--ink)}
.att-size{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink3)}
.ai-mark{font-size:8px;padding:0 6px;border:1px solid var(--green);color:var(--green);border-radius:var(--r-pill);background:var(--green-lt)}
.note-mark{font-size:8px;padding:0 6px;border:1px solid var(--amber);color:var(--amber);border-radius:var(--r-pill)}
.ts-stale-badge{font-weight:400;text-transform:none;letter-spacing:0;color:var(--amber);font-size:10px;font-style:italic;margin-left:6px}
.portal-banner{padding:8px 20px;background:var(--purple-lt);border-bottom:1px solid var(--purple);color:var(--purple);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:10px;flex-shrink:0}
.portal-tabs{display:flex;gap:2px;padding:8px 20px;background:var(--off);flex-shrink:0}
.portal-tab{padding:8px 16px;font-size:12px;color:var(--ink2);cursor:pointer;border-radius:var(--r-pill);transition:all .15s}
.portal-tab:hover{background:var(--off2);color:var(--ink)}
.portal-tab.active{background:var(--purple-lt);color:var(--purple);font-weight:500}
.portal-card{background:var(--off);border:none;border-radius:var(--r-card);padding:18px 20px;margin-bottom:12px;cursor:pointer;transition:all .15s}
.portal-card:hover{background:var(--off2)}
.portal-card--static{cursor:default}
.portal-card--static:hover{background:var(--off)}
.portal-msg-customer{background:var(--purple-lt);color:var(--ink);padding:10px 14px;border-radius:var(--r2);max-width:75%;align-self:flex-end;margin-left:auto;font-size:13px;line-height:1.55}
.portal-msg-agent{background:var(--off2);color:var(--ink);padding:10px 14px;border-radius:var(--r2);max-width:75%;font-size:13px;line-height:1.55}
.mention{display:inline-block;padding:1px 6px;border-radius:var(--r-pill);background:var(--purple-lt);color:var(--purple);font-weight:500}
.mention.self{background:var(--amber-lt);color:var(--amber)}
.mention-dd{position:absolute;background:var(--off);border:1px solid var(--rule2);border-radius:var(--r);max-height:220px;overflow-y:auto;z-index:30;box-shadow:0 8px 24px rgba(19,14,48,0.10);min-width:200px}
.mention-dd-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12px}
.mention-dd-item:hover,.mention-dd-item.active{background:var(--purple-lt);color:var(--purple)}
.mention-dd-empty{padding:10px 12px;color:var(--ink3);font-size:12px;font-style:italic}
/* ── Composer ── */
.composer{border-top:1px solid var(--rule);flex-shrink:0}
.composer-tabs{display:flex;padding:0 16px;border-bottom:1px solid var(--rule)}
.ctab{padding:9px 12px;font-family:var(--font-sans);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.ctab.active{color:var(--purple);border-bottom-color:var(--purple)}
.composer-body{padding:10px 16px 12px}
.compose-area{width:100%;font-family:var(--font-sans);font-size:13px;line-height:1.6;color:var(--ink);background:#ffffff;border:1px solid var(--rule);border-radius:var(--r2);padding:9px 14px;resize:none;outline:none;height:72px}
.compose-area:focus{border-color:var(--purple);background:#ffffff;box-shadow:0 0 0 3px var(--purple-lt)}
.composer-foot{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.composer-actions{display:flex;gap:6px;align-items:center}
.thinking{font-family:var(--font-sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--purple);display:none;align-items:center;gap:4px}
.thinking.show{display:flex}
.dot{display:inline-block;animation:blink 1.2s infinite}
.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.15}40%{opacity:1}}
/* ── Ticket sidebar ── */
/* Ticket reading layout: controls stay mounted while the conversation gets
   the available height. Scope these overrides to the ticket page. */
.ticket-page{min-height:0}
.ticket-page .ticket-layout{position:relative;min-height:0}
.ticket-page .ticket-main{min-width:0;min-height:0}
.ticket-page .thread{min-height:80px;padding:16px 20px;gap:12px;overflow-anchor:none}
.ticket-page .msg{width:100%;max-width:100%;flex-shrink:0;border-radius:var(--r2);overflow-wrap:anywhere}
.ticket-page .msg-agent,.ticket-page .msg-ai{align-self:stretch}
.ticket-heading{padding:10px 20px;border-bottom:1px solid var(--rule);flex-shrink:0;overflow-wrap:anywhere}
.ticket-header-actions{margin-left:auto;display:flex;gap:6px;align-items:center}
.ticket-back{font:inherit;color:var(--ink2);border:0;background:none;padding:0;cursor:pointer}
.ticket-topbar .tb-breadcrumb{min-width:0;flex:1}
.ticket-page .ticket-topbar{overflow:visible;isolation:auto;z-index:50}
.ticket-page .ticket-topbar::before{display:none}
.ticket-thread-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--rule);flex-shrink:0;font-size:12px}
.ticket-thread-tools>strong{font-weight:600}
.ticket-language-toggle{display:flex;gap:4px;flex-wrap:wrap}
.ticket-page .ticket-language-toggle .btn{min-height:44px}
.ticket-language-toggle [aria-pressed="true"]{background:var(--purple-lt);color:var(--purple);border-color:var(--purple)}
.ticket-language-toggle .btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ticket-message-language{margin-top:6px;font-size:11px;color:var(--ink2)}
.ticket-translation-notice{padding:6px 16px;font-size:12px;color:var(--ink2);border-bottom:1px solid var(--rule)}
.ticket-translation-notice span{display:block}
.ticket-translation-state{margin-left:auto;color:var(--ink2);font-size:12px;overflow-wrap:anywhere}
.reply-language-choice{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink2)}
.reply-language-choice select{min-height:44px;max-width:100%}
.ticket-thread-tools>.auth-check{min-height:44px}
.ticket-thread-tools>[hidden]{display:none}
.ticket-popover{position:relative;flex-shrink:0}
.ticket-popover>summary{list-style:none;cursor:pointer}
.ticket-popover>summary::-webkit-details-marker{display:none}
.ticket-popover-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:40;display:flex;flex-direction:column;gap:8px;width:240px;max-width:calc(100vw - 32px);padding:12px;background:var(--w);border:1px solid var(--rule2);border-radius:var(--r2);box-shadow:0 8px 24px rgba(19,14,48,.12)}
.ticket-popover-panel>.btn{justify-content:flex-start;white-space:normal;text-align:left}
.ticket-language .ticket-popover-panel>span:empty{display:none}
.ticket-language .auth-check{align-items:flex-start}
.ticket-page .composer{background:var(--off);position:relative;min-height:0;max-height:65%;display:flex;flex-direction:column;flex-shrink:1}
.composer-launcher{display:none;align-items:center;gap:8px;padding:10px 16px;min-height:52px}
.composer-launch-hint{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticket-page[data-compose-mode="read"] .composer-launcher{display:flex}
.ticket-page[data-compose-mode="read"] .composer-tabs,.ticket-page[data-compose-mode="read"] .composer-body,.ticket-page[data-compose-mode="read"] .composer-foot{display:none}
.ticket-page .composer-tabs{align-items:center;flex-shrink:0;padding:0 16px;gap:4px}
.ticket-page .ctab{border:0;border-bottom:2px solid transparent;background:none;white-space:nowrap}
.ticket-page .ctab.active{border-bottom-color:var(--purple)}
.composer-view-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.ticket-page .composer-body{padding:8px 16px 10px;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.ticket-page .compose-rich{min-height:140px;max-height:240px;height:160px;flex:1 0 140px}
.ticket-page .compose-rich .ql-editor{min-height:76px}
.ticket-page .composer-body .ql-toolbar{flex-shrink:0}
.ticket-page .pending-att{max-height:64px;overflow-y:auto;flex-shrink:0}
.ticket-page .composer-foot{flex-shrink:0;flex-wrap:wrap;margin:0;padding:10px 16px;border-top:1px solid var(--rule2);background:var(--w);position:relative;z-index:35}
.ticket-page .composer-foot .btn,.ticket-page .composer-foot summary,.ticket-page .composer-foot .comp-menu-item{min-height:44px;font-size:13px}
.composer-send-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.ticket-page .composer-send{border-radius:var(--r) 0 0 var(--r);border-right:1px solid var(--rule2);min-width:88px;font-weight:600}
.ticket-page .composer-send-more{border-radius:0 var(--r) var(--r) 0;min-width:44px}
.ticket-language{margin-left:auto;min-width:0}
.ticket-language>summary{white-space:normal;text-align:left}
.ticket-language .ticket-popover-panel{width:300px;max-height:55dvh;overflow-y:auto}
.ticket-language .ticket-popover-panel p{margin:0;color:var(--ink2);line-height:1.5}
.composer-insert .ticket-popover-panel{max-height:50dvh;overflow-y:auto}
.ticket-page .composer-actions{flex-wrap:wrap}
.composer-insert .ticket-popover-panel{top:auto;bottom:calc(100% + 6px);right:auto;left:0}
.ticket-page .comp-meta{flex-shrink:0}
.ticket-page[data-compose-mode="expanded"] .composer{height:72%;max-height:72%}
.ticket-page[data-compose-mode="expanded"] .composer-body{flex:1}
.ticket-page[data-compose-mode="expanded"] .compose-area{height:auto;max-height:none;flex:1}
.ticket-page .composer[data-compose-tab="note"]{border-top:2px solid var(--amber)}
.ticket-page .composer[data-compose-tab="note"] .ctab.active{color:var(--amber);border-bottom-color:var(--amber)}
.ticket-page .ticket-sidebar{width:260px;min-width:260px;background:var(--off)}
.ticket-details-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px;font-size:12px}
.ticket-page[data-details="hide"] .ticket-sidebar{display:none}
.ticket-secondary>summary{cursor:pointer;color:var(--ink2);font-size:12px;font-weight:500;padding:4px 0}
.ticket-secondary[open]>summary{margin-bottom:12px}
.ticket-page :is(button,summary,select):focus-visible{outline:2px solid var(--purple);outline-offset:2px}
@media(min-width:1600px){.ticket-page .msg{max-width:1000px;align-self:center}}
@media(max-width:1100px){
  .ticket-page[data-details="auto"] .ticket-sidebar{display:none}
  .ticket-page[data-details="show"] .ticket-sidebar{position:absolute;right:0;top:0;bottom:0;z-index:45;width:min(320px,100%);min-width:0;border-left:1px solid var(--rule2);box-shadow:-8px 0 24px rgba(19,14,48,.12)}
}
@media(max-width:800px){
  .app:has(.ticket-page)>.sidebar{display:none}
  .ticket-page .ticket-topbar{padding:0 12px}
  .ticket-page .ticket-heading{padding:10px 12px}
  .ticket-page .thread{padding:12px}
  .ticket-page .msg{padding:12px}
  .ticket-page .ticket-thread-tools{padding:6px 12px;flex-wrap:wrap}
  .ticket-translation-state:not(:empty){order:4;width:100%}
  .ticket-language{margin-left:auto}
  .ticket-page .composer-tabs{padding:0 8px;gap:0}
  .ticket-page .ctab{padding:10px 8px;letter-spacing:0;text-transform:none}
  .composer-view-actions{gap:4px}
  .ticket-page .composer-body{padding:6px 10px 8px}
  .ticket-page .composer-foot{gap:6px}
  .ticket-page .composer-foot>div:last-child{margin-left:auto}
  .ticket-page .btn-sm,.ticket-page .ticket-popover>summary{min-height:32px}
  .ticket-page .composer-launcher{padding:8px 12px}
  .ticket-page .composer-launch-hint{display:none}
  .ticket-header-actions{gap:4px}
  .ticket-header-actions .presence-chips{display:none}
}
@media(max-width:500px){
  .ticket-topbar .tb-breadcrumb{flex-wrap:wrap}
  .ticket-topbar{height:auto;min-height:56px;padding-top:8px;padding-bottom:8px}
  .ticket-header-actions{flex-basis:100%;justify-content:flex-end}
  .ticket-header-actions [data-action="td.prev"],.ticket-header-actions [data-action="td.next"]{font-size:0;width:32px;padding:0;justify-content:center}
  .ticket-header-actions [data-action="td.prev"]::before{content:'←';font-size:14px}
  .ticket-header-actions [data-action="td.next"]::before{content:'→';font-size:14px}
  .ticket-topbar .tb-breadcrumb>span{white-space:nowrap}
}
@media(max-height:600px){
  .ticket-page .ticket-main{overflow-y:auto;display:block}
  .ticket-page .thread{height:96px}
  .ticket-page .composer,.ticket-page[data-compose-mode="expanded"] .composer{height:auto;max-height:none}
  .ticket-page .composer-body{max-height:55dvh}
  .ticket-page .composer-foot{position:sticky;bottom:0}
  .ticket-page .ticket-popover-panel,.ticket-page .comp-menu{max-height:100px;overflow-y:auto}
}
.ts-section{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.ts-section:last-child{border-bottom:none}
.ts-heading{font-family:var(--font-sans);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.ts-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:12.5px}
.ts-key{color:var(--ink3)}
.ts-val{font-weight:600;color:var(--ink);font-size:12px}
.ts-select{font-family:var(--font-sans);font-size:12px;padding:5px 12px;border:1px solid var(--rule);border-radius:var(--r-pill);background:#ffffff;color:var(--ink2);outline:none;width:100%;margin-bottom:6px}
.csat-ring-wrap{display:flex;align-items:center;gap:10px;margin-top:6px}
.csat-ring{position:relative;width:44px;height:44px;flex-shrink:0}
.csat-ring svg{transform:rotate(-90deg)}
.csat-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:500}
.ts-contact{margin-bottom:10px;font-size:12px;cursor:text}
.ts-contact-value{display:flex;align-items:center;gap:4px;margin-top:3px;color:var(--ink)}
.ts-contact-value>span{min-width:0;overflow-wrap:anywhere;user-select:text}
.other-ticket{padding:8px 0;border-bottom:1px solid var(--rule);font-size:11px}
.other-ticket-id{display:flex;align-items:center;gap:4px;color:var(--ink3);margin-bottom:4px}
.other-ticket-id>span{min-width:0;overflow-wrap:anywhere;user-select:text}
.ticket-copy-link,.other-ticket-link{flex-shrink:0;padding:6px 2px;color:var(--purple);text-decoration:underline}
.other-ticket-link{margin-left:auto}
.ticket-copy-link:focus-visible,.other-ticket-link:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.other-ticket-open{display:block;width:100%;text-align:left;font-family:inherit;font-size:inherit;background:transparent;color:var(--ink2);padding:0;border:0;cursor:pointer}
.other-ticket-open:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.other-ticket-meta{display:block;color:var(--ink3);line-height:1.4;margin-bottom:4px;overflow-wrap:anywhere}
.other-ticket:last-child{border-bottom:none}
.other-ticket-open:hover{color:var(--ink)}
.other-ticket-subj{display:block;color:var(--ink2);line-height:1.3;margin-bottom:3px;overflow-wrap:anywhere}
/* ── Customer page ── */
.cust-profile{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* VIP tier badges carry a 1px outline in their own ink; status pills never
   do. That outline is the shape cue that keeps them apart — a Gold customer
   on a merged profile renders the gold badge and a purple "merged" pill
   side by side in the profile header, and hue alone was not enough to
   separate them (issue #447 review). Gold is also pulled deeper than
   --amber-lt so a gold badge and an amber status pill are not one alpha step
   apart wherever the two do meet. */
.vip-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:2px 10px;border-radius:var(--r-pill);border:1px solid currentColor}
.vip-bronze{color:#8a5a2b;background:rgba(138,90,43,0.13)}
.vip-silver{color:#63626f;background:rgba(99,98,111,0.13)}
.vip-gold{color:#7a5300;background:rgba(198,150,18,0.34)}
.vip-platinum{color:var(--ink);background:rgba(19,14,48,0.12)}
/* ── Reports ── */
.report-chart{height:120px;display:flex;align-items:flex-end;gap:4px;border-bottom:1px solid var(--rule);padding-bottom:4px;margin-top:8px}
.r-bar{flex:1;background:var(--ink);border-radius:1px 1px 0 0;opacity:.8;min-height:2px}
.r-bar.accent{background:var(--blue);opacity:1}
.report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.r-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.r-bar-lbl{font-size:12px;color:var(--ink2);width:110px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}
.r-bar-track{flex:1;background:var(--off2);height:8px;border-radius:4px;overflow:hidden}
.r-bar-fill{height:100%;border-radius:4px;transition:width .3s}
.r-bar-val{font-family:var(--font-mono);font-size:11px;color:var(--ink3);min-width:32px;text-align:right}
.detection-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.detection-summary>div{padding:10px;border:1px solid var(--rule);border-radius:var(--r);background:var(--off2);min-width:0}
.detection-summary strong{display:block;font-family:var(--font-mono);font-size:20px;line-height:1;color:var(--red);font-weight:600}
.detection-card.healthy .detection-summary strong{color:var(--green)}
.detection-summary span{display:block;margin-top:5px;color:var(--ink3);font-size:10px;line-height:1.25;text-transform:uppercase;letter-spacing:.04em}
.detection-pulse{display:flex;align-items:stretch;gap:3px;height:22px;padding:3px;background:var(--off2);border-radius:var(--r)}
.detection-pulse-cell{flex:1;min-width:3px;border-radius:2px;background:var(--green);opacity:.6}
.detection-pulse-cell.warn{background:var(--amber);opacity:.85}
.detection-pulse-cell.fail{background:var(--red);opacity:1}
.detection-pulse-axis{display:flex;justify-content:space-between;margin-top:4px;font-family:var(--font-mono);font-size:9px;color:var(--ink3)}
.detection-reasons{margin-top:16px;padding-top:13px;border-top:1px solid var(--rule)}
.detection-subhead{margin-bottom:9px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.detection-card .r-bar-lbl{width:170px;text-transform:none}
.detection-empty,.detection-footnote{margin:0;color:var(--ink3);font-size:12px;line-height:1.5}
.detection-footnote{margin-top:11px;font-size:10px}
@media(max-width:560px){.detection-summary{grid-template-columns:1fr}.detection-card .r-bar-lbl{width:130px}}
.r-stack{display:flex;height:12px;border-radius:var(--r);overflow:hidden;background:var(--off2);margin-top:6px}
.r-stack > div{transition:width .3s}
.r-tile{text-align:center;padding:14px 10px;border-radius:var(--r2);border:1px solid var(--rule)}
.r-tile-n{font-size:24px;font-weight:700;font-family:var(--font-sans);letter-spacing:-.02em;line-height:1}
.r-tile-l{font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-top:6px;font-weight:500}
/* SLA breach report — attainment ring (conic-gradient set inline, % is dynamic) */
.sb-ring-wrap{display:flex;align-items:center;gap:16px;margin-top:6px}
.sb-ring{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sb-ring-inner{width:82px;height:82px;border-radius:50%;background:var(--off);display:flex;flex-direction:column;align-items:center;justify-content:center}
.sb-ring-n{font-family:var(--font-sans);font-size:17px;font-weight:700;letter-spacing:-.03em;color:var(--green);line-height:1}
.sb-ring-l{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-top:3px}
.sb-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
/* ── Agents ── */
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.agent-card{padding:18px;border:none;border-radius:var(--r-card);background:var(--off);cursor:pointer;transition:all .15s;display:flex;flex-direction:column;gap:14px}
.agent-card:hover{background:var(--off2)}
.agent-card.inactive{opacity:.55}
.agent-card-head{display:flex;align-items:center;gap:10px}
.agent-av{width:36px;height:36px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;flex-shrink:0}
.agent-name{font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-role{font-size:11px;color:var(--ink3);margin-top:2px}
.agent-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding-top:12px;border-top:1px solid var(--rule)}
.agent-stat{text-align:center}
.agent-stat-n{font-family:var(--font-sans);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1}
.agent-stat-n.c-blue{color:var(--cyan)}
.agent-stat-n.c-amber{color:var(--amber)}
.agent-stat-n.c-green{color:var(--green)}
.agent-stat-l{font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em;margin-top:4px;font-weight:500}
/* ── Dashboard layout ── */
.dash-grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.dash-grid-12 .span-12{grid-column:span 12}
.dash-grid-12 .span-8{grid-column:span 8}
.dash-grid-12 .span-6{grid-column:span 6}
.dash-grid-12 .span-4{grid-column:span 4}
@media (max-width:900px){.dash-grid-12 .span-12,.dash-grid-12 .span-8,.dash-grid-12 .span-6,.dash-grid-12 .span-4{grid-column:span 12}}
/* ── AI page ── */
.ai-chat{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.ai-msg{padding:14px 16px;font-size:14px;line-height:1.65;max-width:80%;border-radius:var(--r2)}
.ai-msg-user{background:var(--off2);border-left:2px solid var(--rule2);align-self:flex-start}
.ai-msg-ai{background:var(--purple-lt);border:1px solid var(--rule);border-left:2px solid var(--purple);align-self:flex-end;color:var(--ink)}
.ai-msg-from{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--ink3);margin-bottom:5px}
.ai-msg-ai .ai-msg-from{color:var(--purple)}
.prompt-cards{display:flex;gap:8px;flex-wrap:wrap;padding:0 20px 12px;flex-shrink:0}
.prompt-card{padding:10px 16px;border:1px solid var(--rule);border-radius:var(--r2);cursor:pointer;font-size:14px;color:var(--ink2);background:var(--off);transition:all .15s;max-width:240px}
.prompt-card:hover{border-color:var(--purple);color:var(--purple);background:var(--purple-lt)}
.ai-input-row{padding:12px 20px;border-top:1px solid var(--rule);display:flex;gap:8px;flex-shrink:0}
/* ── Drag & drop dashboard ── */
.dash-widget{border:1px solid transparent;border-radius:var(--r-card);background:var(--off);overflow:hidden;cursor:grab;transition:all .2s}
.dash-widget.dragging{opacity:.5;cursor:grabbing}
.dash-widget.drag-over{border-color:var(--purple);box-shadow:0 0 0 2px var(--rule3)}
.dash-widget-header{padding:10px 14px;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;background:var(--off2)}
.dash-widget-title{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.dash-widget-body{padding:12px 14px}
/* ── Macros ── */
.macro-item{padding:10px 14px;border:1px solid var(--rule);border-radius:var(--r2);cursor:pointer;margin-bottom:6px;font-size:13px;color:var(--ink2);transition:all .15s;display:flex;align-items:center;gap:8px}
.macro-item:hover{border-color:var(--ink);color:var(--ink);background:var(--off)}
/* ── GDPR modal ── */
.gdpr-action{padding:14px;border:none;border-radius:var(--r2);margin-bottom:8px;background:var(--off2)}
.gdpr-action-title{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:4px}
.gdpr-action-desc{font-size:11px;color:var(--ink3);margin-bottom:10px}
/* ── Pinned AI responses ── */
.pinned-response{padding:10px 12px;border:1px solid var(--amber);border-radius:var(--r2);background:var(--amber-lt);margin-bottom:8px}
.pinned-label{font-family:var(--font-sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);margin-bottom:4px}
/* ── Pinned details card (customer profile, Phase 4 PR 6) ── */
/* A direct child of .page-scroll (the scroll container), so sticky spans the
   whole profile. The 1px sentinel above it leaves the scrollport on the first
   pixel of scroll — that is the .is-stuck signal (details-card.js). Lift comes
   from border + shadow: the page ground is --w and every other card is --off,
   so a --w card with a real border reads as the one raised object. */
.cust-pin-sentinel{height:1px;margin-top:-1px}
/* top:-20px = minus .page-scroll's padding-top: Chrome measures the sticky
   offset from the scroll container's CONTENT edge, so top:0 would leave a
   20px band above the stuck card through which the scrolled content peeks. */
.cust-pin{position:sticky;top:-20px;z-index:2;background:var(--w);border-color:var(--rule2);box-shadow:0 1px 2px rgba(19,14,48,0.06);margin-bottom:16px;transition:box-shadow .15s}
.cust-pin.is-stuck{box-shadow:0 10px 28px rgba(19,14,48,0.16)}
/* One identity strip serves both states: stuck hides the body, shrinks the
   strip, drops its separator and reveals the primary email / mobile spans. */
.cust-pin.is-stuck .cust-pin-body{display:none}
.cust-pin-stuck-only{display:none}
.cust-pin.is-stuck .cust-pin-stuck-only{display:inline}
.cust-pin.is-stuck .cust-pin-ident{padding-bottom:0;border-bottom:0;margin-bottom:0}
/* The spacer takes the height the card gave up when it condensed, so
   scrollHeight doesn't shrink under the reader (which would clamp scrollTop,
   let the sentinel back in, and make the card flicker between states). */
.cust-pin-spacer{height:0}
.cust-pin-ident{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:14px}
.cust-pin-avatar{width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;flex-shrink:0}
.cust-pin.is-stuck .cust-pin-avatar{width:32px;height:32px;font-size:11px}
.cust-pin-name{font-size:17px;font-weight:600;color:var(--ink)}
.cust-pin.is-stuck .cust-pin-name{font-size:14px}
.cust-pin-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--ink3);margin-top:3px}
.cust-pin.is-stuck .cust-pin-meta{margin-top:1px}
.cust-pin-actions{margin-left:auto;display:flex;gap:8px;flex-shrink:0}
.cust-pin-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 18px;margin-bottom:14px}
.cust-pin-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);font-weight:500}
.cust-pin-v{font-size:12.5px;font-weight:600;color:var(--ink);margin-top:2px;overflow-wrap:anywhere}
.cust-pin-v .muted{color:var(--ink3);font-weight:500}
.cust-pin-addrs{display:grid;grid-template-columns:80px minmax(0,1fr);gap:8px 12px;align-items:start}
.cust-pin-addrs .cust-pin-k{padding-top:5px}
.cust-addr{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:26px}
.cust-addr-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);background:var(--off);font-size:12px;font-weight:500;color:var(--ink);border:1px solid transparent;max-width:100%}
.cust-addr-pill .cust-addr-val{overflow-wrap:anywhere}
.cust-addr-pill.is-primary{background:var(--w);border-color:var(--rule3)}
.cust-addr-primary{font-size:9.5px;font-weight:600;letter-spacing:.06em;color:var(--cta-ink);background:var(--cta);border-radius:var(--r-pill);padding:1px 6px;white-space:nowrap}
/* Controls stay in the tab order at opacity 0; hover or keyboard focus
   inside the pill reveals them. */
.cust-addr-ctl{border:0;background:transparent;color:var(--ink3);cursor:pointer;font-size:13px;line-height:1;padding:0 2px;opacity:0;transition:opacity .12s,color .12s}
.cust-addr-pill:hover .cust-addr-ctl,.cust-addr-pill:focus-within .cust-addr-ctl{opacity:1}
.cust-addr-ctl:hover,.cust-addr-ctl:focus-visible{color:var(--ink);opacity:1}
.cust-addr-add{font-family:var(--font-sans);font-size:12px;color:var(--ink2);border:1px dashed var(--rule3);border-radius:var(--r-pill);padding:3px 10px;background:transparent;cursor:pointer;transition:all .12s}
.cust-addr-add:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:900px),(max-height:640px){.cust-pin{position:static}}
@media (max-width:900px){.cust-pin-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Edit-details modal: a changed input picks up a green edge; the confirm step
   lists before → after per field. */
.form-input.is-changed{border-color:var(--green)}
.ed-changes{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--rule);font-size:12.5px}
.ed-changes .ed-from{color:var(--ink3);text-decoration:line-through}
.ed-changes .ed-to{font-weight:600}
.ed-changes .ed-lbl{color:var(--ink3)}
.customer-risk{margin-bottom:16px;min-height:220px}
.customer-risk-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.customer-risk-heading .card-title{margin:0}
.customer-risk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
.customer-risk-grid dt,.customer-risk-note{font-size:12px;line-height:1.5;color:var(--ink2)}
.customer-risk-grid dd{font-size:14px;font-weight:600;margin:4px 0 0;color:var(--ink)}
.customer-risk-grid .risk-medium{color:var(--amber)}
.customer-risk-grid .risk-high{color:var(--red)}
.customer-risk-note{margin:16px 0 0}
.customer-risk-heading .btn{min-height:32px}
@media(max-width:600px){.customer-risk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-risk-heading .btn{min-height:44px}}
/* Period reporting and the active-work summary use the existing theme tokens. */
.report-note { margin: 10px 20px; font-size: 12px; color: var(--ink2); line-height: 1.5; }
.report-period { flex-wrap: wrap; gap: 12px; }
.report-period label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.report-period span { font-size: 12px; color: var(--ink2); }
.report-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.queue-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.queue-kpis button.kpi { appearance: none; background: transparent; color: inherit; text-align: left; border: 0; border-right: 1px solid var(--rule); cursor: pointer; font: inherit; }
.queue-kpis .kpi-n, .queue-kpis .kpi-l { display: block; }
.queue-kpis button:hover { background: var(--purple-lt); }
.queue-kpis button:focus-visible, .report-period select:focus-visible, .report-period input:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }
.report-rank { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.report-rank > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.report-ticket { display: flex; justify-content: space-between; width: 100%; margin-bottom: 8px; gap: 12px; text-align: left; white-space: normal; }
.report-ticket span:first-child { min-width: 0; overflow-wrap: anywhere; }
.report-ticket span:last-child { flex-shrink: 0; }
.ticket-work-page .tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; }
.ticket-work-page .tab.active { border-bottom-color: var(--purple); }
.ticket-work-page .tab-bar { flex-wrap: wrap; }
.ticket-work-page, .dashboard-report-page { container-type: inline-size; }
@container (max-width: 380px) {
  .queue-kpis { grid-template-columns: 1fr; }
  .queue-kpis button.kpi { display: flex; gap: 12px; align-items: center; }
  .queue-kpis .kpi-l { white-space: normal; }
  .ticket-work-page .filter-bar { padding-right: 20px; }
  .ticket-work-page .filter-select { max-width: 100%; min-width: 0; }
  .ticket-work-page .topbar { flex-wrap: wrap; height: auto; min-height: 48px; padding-block: 12px; }
  .ticket-work-page .tb-title { flex-basis: 100%; }
  .ticket-work-page .queue-kpis:not(.sec-collapsed), .ticket-work-page .tab-bar:not(.sec-collapsed) { padding-top: 28px; }
  .dashboard-report-page .report-kpis { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .queue-kpis .kpi { padding: 12px 8px; }
  .queue-kpis .kpi-n { font-size: 28px; }
  .queue-kpis .kpi-l { font-size: 10px; }
  .ticket-work-page, .dashboard-report-page { overflow-y: auto; display: block; }
  .report-period { padding: 32px 20px 12px !important; }
  .report-period input, .report-period select { max-width: 100%; min-height: 44px; }
  .ticket-work-page .tab, .ticket-work-page .btn { min-height: 44px; }
}
.saved-activity-page .filter-select { min-height:32px; max-width:100%; }
.saved-activity-page .filter-bar label { display:flex; align-items:center; flex-wrap:wrap; gap:4px; min-width:0; }
.saved-activity-page input:focus-visible, .saved-activity-page select:focus-visible,
.saved-activity-page button:focus-visible, .saved-activity-page a:focus-visible { outline:2px solid var(--purple); outline-offset:2px; }
.kb-bulk-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--rule); }
.kb-bulk-bar .btn, .kb-select-draft { min-height:44px; }
.kb-select-draft { display:inline-flex; align-items:center; gap:6px; margin-left:auto; cursor:pointer; }
.kb-select-draft input { width:18px; height:18px; accent-color:var(--ink); }
.kb-select-draft:focus-within { outline:2px solid var(--ink); outline-offset:2px; }
.kb-bulk-titles { max-height:240px; overflow:auto; }
.kb-main > .filter-bar { flex-wrap:wrap; }
.reply-review-panel { min-height:0; flex:0 0 auto; }
.reply-internal-review { padding:12px 16px; margin:12px 0; border:1px solid var(--rule); border-radius:8px; background:var(--off); color:var(--ink2); font-size:13px; overflow-wrap:anywhere; }
.reply-internal-review summary { color:var(--ink); font-weight:600; cursor:pointer; min-height:32px; }
.reply-internal-review summary:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.reply-internal-review p { margin:8px 0; }
.reply-internal-review ul { margin:8px 0; padding-left:20px; }
.kb-updated { font-size:12px; color:var(--ink2); margin:8px 0; }
.kb-directory { align-self:start; }
.kb-directory summary { cursor:pointer; }
.kb-directory summary:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.kb-directory-status { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.kb-directory-hint { font-size:12px; color:var(--ink2); margin-bottom:12px; }
.kb-directory-list { list-style:none; padding:0; margin:12px 0 0; max-height:480px; overflow:auto; }
.kb-directory-list li { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0; border-top:1px solid var(--rule); }
.kb-directory-game { flex:1 1 160px; min-width:0; overflow-wrap:anywhere; }
.kb-directory-game a { color:var(--ink); text-decoration:underline; }
.kb-directory-actions { display:flex; align-items:center; gap:8px; }
.kb-directory .btn, .kb-directory-game a { min-height:44px; }
.kb-directory-game a { display:inline-flex; align-items:center; }
.reply-feedback { margin: 12px 0; padding: 12px; background: var(--off2); border: 1px solid var(--rule); border-radius: var(--r); color: var(--ink); }
.reply-feedback-compact { padding:8px 10px; }
.reply-feedback-compact>summary { cursor:pointer;font-size:12px;color:var(--ink2);padding:4px 0; }
.reply-feedback-compact[open]>summary { margin-bottom:8px; }
.reply-feedback-actions { display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.reply-feedback-compact .reply-feedback-status:empty { display:none; }
.reply-feedback p { margin: 0 0 8px; }
.reply-feedback-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.reply-feedback-controls label { display: flex; flex-direction: column; gap: 4px; }
.reply-feedback-controls button, .reply-feedback-controls select { min-height: 44px; }
.reply-feedback-controls select { padding: 8px; background: var(--off); color: var(--ink); border: 1px solid var(--rule3); border-radius: var(--r); font: inherit; }
.reply-feedback-controls [aria-pressed="true"] { background: var(--purple-lt); color: var(--purple); box-shadow: inset 0 0 0 2px var(--purple); }
.reply-feedback-card { padding: 16px; margin-top: 16px; border: 1px solid var(--rule); border-radius: var(--r); overflow-wrap: anywhere; }
.reply-feedback-card h3 { font-size: 16px; margin: 0 0 8px; }
.reply-feedback-card p { margin: 8px 0; }
.reply-feedback-card a { color: var(--purple); }
.reply-feedback-text { white-space: pre-wrap; line-height: 1.6; }
button.settings-tab { border: 0; font-family: inherit; text-align: left; min-height: 44px; }
button.settings-tab:not(.active):not(:hover) { background: transparent; }
.reply-use-confirm { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.god-page .topbar { height: auto; min-height: 48px; flex-wrap: wrap; padding-block: 8px; }
.god-page .tb-title { min-width: max-content; }
.god-page .tb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media(max-width:600px) { .god-page .tb-actions .btn { min-height: 44px; } }
.reply-use-confirm input { width: 20px; height: 20px; flex-shrink: 0; }
.ai-performance { padding: 24px; }
.performance-filters,.performance-exports { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; }
.performance-filters label { display: flex; flex-direction: column; gap: 4px; }
.ai-performance button,.performance-filters input,.performance-filters select { min-height: 44px; }
.performance-explainer { color: var(--ink2); margin: 12px 0; max-width: 100ch; }
.performance-kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; margin: 16px 0; }
.performance-kpis .card { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.performance-kpis strong { font-size: 24px; }
.performance-table { overflow-x: auto; margin: 12px 0 24px; border: 1px solid var(--rule); border-radius: var(--r); }
.performance-table table { width: 100%; border-collapse: collapse; }
.performance-table th,.performance-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; font-variant-numeric: tabular-nums; }
.performance-table th { background: var(--off2); }
.performance-table a { color: var(--purple); }
.ai-performance h2 { font-size: 20px; margin-top: 24px; }
@media(max-width:600px) { .ai-performance { padding: 12px; } .performance-filters label { width: 100%; } }
@media(max-width:600px) {
  .ai-performance-page .topbar { height: auto; min-height: 48px; flex-wrap: wrap; padding: 12px; }
  .ai-performance-page .tb-title { flex-basis: 100%; margin: 0; }
  .ai-performance-page .topbar .btn { min-height: 44px; }
  .performance-filters input,.performance-filters select { width: 100%; min-width: 0; }
  .performance-kpis { grid-template-columns: minmax(0,1fr); }
}