/* forms that wrap a panel must not widen a grid column */
form:has(> .ct-panel) { min-width: 0; }
/* Customer service module (WP-G): case thread, composer, workspace, SLA chips, knowledge, chat. Uses the design system tokens. */
.sv-sla { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.sv-sla.on_track, .sv-sla.met { background: var(--okBg); color: var(--okFg); }
.sv-sla.at_risk, .sv-sla.paused { background: var(--warnBg); color: var(--warnFg); }
.sv-sla.breached { background: var(--badBg); color: var(--badFg); }
.sv-sla.none { background: #eef3f7; color: var(--muted); }
.sv-prio { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; }
.sv-prio::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #97a6b8; }
.sv-prio.urgent::before { background: #e8365d; } .sv-prio.high::before { background: #f5a524; } .sv-prio.medium::before { background: #2083ee; }
.sv-flags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.sv-flag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 1px 6px; border-radius: 3px; background: #eef3f7; color: #2f5f88; }
.sv-flag.c { background: var(--badBg); color: var(--badFg); } .sv-flag.v { background: #f3e8ff; color: #5b2bb0; } .sv-flag.x { background: #fff1cc; color: #8b620d; } .sv-flag.r { background: #e4f0ff; color: #0f5aa6; }

/* header facts strip */
.sv-head { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); }
.sv-head > div { padding: 10px 12px; border-right: 1px solid var(--line2); min-width: 0; }
.sv-head > div:last-child { border-right: 0; }
.sv-head small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.sv-head b { display: block; margin-top: 3px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-head .sub { color: var(--muted); font-size: 11.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* conversation thread */
.sv-thread { display: grid; gap: 10px; }
.sv-msg { border: 1px solid #d8e2eb; border-radius: 6px; background: #fff; max-width: 92%; }
.sv-msg.in { justify-self: start; border-left: 3px solid #2083ee; }
.sv-msg.out { justify-self: end; background: #f2f8ff; border-right: 3px solid #13b985; }
.sv-msg.internal { justify-self: stretch; max-width: 100%; background: #fffbea; border-color: #f0e2a8; border-left: 3px solid #f5a524; }
.sv-msg .mh { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-bottom: 1px solid #e6edf3; font-size: 12px; flex-wrap: wrap; }
.sv-msg .mh i { color: var(--blue); }
.sv-msg .mh .when { margin-left: auto; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.sv-msg .mb { padding: 9px 11px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }
.sv-msg .mf { padding: 6px 10px; border-top: 1px dashed #e0e7ed; display: flex; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.sv-msg .mf a { font-weight: 700; }
.sv-msg .tr { padding: 8px 11px; border-top: 1px dashed #c2d9f5; background: #f5f9ff; font-size: 12px; color: var(--text2); white-space: pre-wrap; }

/* composer */
.sv-composer { border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.sv-composer .tabs { display: flex; border-bottom: 1px solid var(--line2); }
.sv-composer .tabs label { flex: 1; text-align: center; padding: 8px; font-weight: 700; font-size: 12px; cursor: pointer; color: #22517a; background: var(--panel2); }
.sv-composer .tabs label:has(input:checked) { background: #fff; box-shadow: inset 0 -2px 0 #0a6fd2; color: var(--text); }
.sv-composer .tabs input { position: absolute; opacity: 0; pointer-events: none; }
.sv-composer .body { padding: 10px; display: grid; gap: 8px; }
.sv-composer textarea { min-height: 130px; }
.sv-composer .bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.sv-composer .bar .ct-field { flex: 1 1 160px; }

/* context column */
.sv-ctx .ct-pbody { display: grid; gap: 8px; }
.sv-cust { display: flex; gap: 10px; align-items: center; }
.sv-cust .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #2083ee, #0b2a57); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.sv-cust b { display: block; }
.sv-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sv-mini div { background: var(--panel2); border: 1px solid #dde5ed; border-radius: 3px; padding: 6px 8px; min-width: 0; }
.sv-mini small { display: block; color: var(--muted); font-size: 10.5px; }
.sv-mini b { font-size: 14px; }
.sv-list { list-style: none; margin: 0; padding: 0; }
.sv-list li { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid #e6edf3; font-size: 12.5px; }
.sv-list li:last-child { border-bottom: 0; }
.sv-list li > i { margin-top: 2px; color: var(--blue); }
.sv-list li .grow { flex: 1; min-width: 0; }
.sv-list li .sub { display: block; color: var(--muted); font-size: 11.5px; }
.sv-next li.warn > i { color: #e08a00; } .sv-next li.bad > i { color: #c01d47; } .sv-next li.info > i { color: var(--blue); }
.sv-checklist label { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid #eef2f6; font-size: 12.5px; cursor: pointer; }
.sv-checklist label:last-child { border-bottom: 0; }
.sv-checklist input { margin-top: 2px; accent-color: #0a6fd2; }
.sv-checklist .who { display: block; color: var(--muted); font-size: 11px; }
.sv-match { font-size: 11px; color: var(--muted); }
.sv-match b { color: var(--okFg); }

/* milestones */
.sv-ms { display: grid; gap: 10px; }
.sv-ms .row { display: grid; grid-template-columns: 150px 1fr 140px; gap: 10px; align-items: center; font-size: 12.5px; }
.sv-ms .bar { height: 10px; border-radius: 6px; background: #e8eef4; overflow: hidden; }
.sv-ms .bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #13b985, #04955d); }
.sv-ms .bar i.at_risk, .sv-ms .bar i.paused { background: linear-gradient(90deg, #f5a524, #e08a00); }
.sv-ms .bar i.breached { background: linear-gradient(90deg, #e8365d, #c01d47); }

/* workspace */
.sw { display: grid; grid-template-columns: 280px minmax(0, 1fr) 320px; gap: 10px; align-items: start; }
.sw-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; border-bottom: 2px solid #0a6fd2; margin-bottom: 10px; }
.sw-tabs .t { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #cbd7e2; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#fff, #edf3f8); font: 700 12px var(--fb); white-space: nowrap; color: #22517a; }
.sw-tabs .t.on { background: #0a6fd2; border-color: #0a6fd2; color: #fff; }
.sw-tabs .t form { display: inline; } .sw-tabs .t button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0 0 0 2px; font-size: 13px; line-height: 1; }
.sw-queue { max-height: calc(100vh - 230px); overflow: auto; }
.sw-queue a.item { display: block; padding: 9px 12px; border-bottom: 1px solid #e6edf3; color: var(--text); }
.sw-queue a.item:hover { background: #f3f8fd; }
.sw-queue a.item.on { background: #e8f2ff; box-shadow: inset 3px 0 0 #0a6fd2; }
.sw-queue a.item b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-queue a.item .meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 11px; color: var(--muted); }
.sw-presence { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sw-presence .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.available { background: #13b985; } .dot.busy { background: #f5a524; } .dot.away { background: #ef5927; } .dot.offline { background: #97a6b8; }

/* knowledge */
.kb-body { font-size: 13.5px; line-height: 1.65; max-width: 860px; }
.kb-body h2, .kb-body h3 { margin-top: 1em; }
.kb-body ol, .kb-body ul { padding-left: 22px; }
.kb-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.kb-ver { font-size: 12px; }

/* chat console */
.sv-chat { display: grid; gap: 8px; max-height: 460px; overflow: auto; padding: 4px; }
.sv-chat .l { max-width: 80%; padding: 8px 11px; border-radius: 10px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sv-chat .l small { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 2px; font-weight: 700; }
.sv-chat .l.customer { justify-self: start; background: #eef3f7; }
.sv-chat .l.bot { justify-self: start; background: #f3e8ff; }
.sv-chat .l.agent { justify-self: end; background: #e1f6ec; }
.sv-chat .l.system { justify-self: center; background: none; color: var(--muted); font-size: 11.5px; font-style: italic; }

/* heat & forecast tables */
.sv-heat td { text-align: center; font-size: 11px; padding: 4px 2px; min-width: 24px; }
.sv-heat th { font-size: 10.5px; padding: 4px 2px; }
.sv-score { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid #eef2f6; }
.sv-score .opts { display: inline-flex; gap: 2px; }
.sv-score .opts label { width: 30px; height: 28px; border: 1px solid #b9c8d6; display: grid; place-items: center; border-radius: 3px; cursor: pointer; font-weight: 700; font-size: 12px; }
.sv-score .opts input { position: absolute; opacity: 0; pointer-events: none; }
.sv-score .opts label:has(input:checked) { background: #0a6fd2; color: #fff; border-color: #0a6fd2; }
.sv-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sv-tree { font-size: 12.5px; }
.sv-tree .node { border: 1px solid #dde5ed; border-radius: 4px; padding: 8px 10px; margin-bottom: 6px; background: var(--panel2); }
.sv-tree .node b { display: block; margin-bottom: 4px; }
.sv-tree .node .opt { display: inline-flex; gap: 4px; align-items: center; margin: 2px 8px 2px 0; font-size: 11.5px; }

@media (max-width: 1280px) {
    .sw { grid-template-columns: 250px minmax(0, 1fr); }
    .sw > .sw-right { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .sv-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-head > div:nth-child(2n) { border-right: 0; }
    .sv-head > div { border-bottom: 1px solid var(--line2); }
    .sw { grid-template-columns: minmax(0, 1fr); }
    .sw-queue { max-height: 260px; }
    .sv-ms .row { grid-template-columns: 1fr; gap: 4px; }
    .sv-msg { max-width: 100%; }
    .sv-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* Pinnacle Premier Bank: black navigation with restrained gold selection accents. */
.ct-top,header.top,.ct-modbar,.topnav,.ct-navtitle,.navtitle,.navbar.bg-primary,.nav-menu.bg-primary,.sidebar.bg-primary{background:#000!important;background-image:none!important;border-color:#252525!important;color:#fff!important}
.ct-top-title,.ct-top-title b,.ct-session,.ct-modbar a,.topnav a,.topnav button,.ct-navtitle span,.navtitle span{color:#fff!important}
.ct-modbar a:hover,.ct-modbar a.on,.topnav a:hover,.topnav a.on,.topnav button:hover,.topnav button.on{background:#242424!important;color:#fff!important}
.ct-sidebar,.shell>.sidebar{background:#f2f2f2!important;border-color:#d3d3d3!important}
.ct-navitem,.navitem{color:#171717!important;background:linear-gradient(#fff,#f3f3f3)!important;border-color:#d0d0d0!important}
.ct-navitem i,.navitem svg{color:#171717!important}
.ct-navitem:hover,.ct-navitem.on,.navitem:hover,.navitem.on,.nav-link.active,.sidebar .nav-link.active{color:#fff!important;background:#111!important;box-shadow:inset 3px 0 0 #c8a34a!important}
.ct-navitem:hover i,.ct-navitem.on i,.navitem:hover svg,.navitem.on svg{color:#e3c375!important}
.ct-navtitle span,.navtitle span{background:#292929!important}
.ct-topbtn,.ct-command,.ct-command input,.ct-top .ct-avatar{background:#171717!important;border-color:#454545!important;color:#fff!important}
.ct-menu .drop a:hover,.ct-menu .drop button:hover{background:#111!important;color:#fff!important}