#callcenter{--cc-green:#067647;--cc-red:#b42318;--cc-yellow:#b54708;--cc-blue:#175cd3;--cc-border:#e4e7ec;--cc-bg:#f6f8fb}
#callcenter .call-center-grid{grid-template-columns:minmax(320px,370px) minmax(0,1fr);align-items:start;background:var(--cc-bg);padding:18px;border-radius:18px}
.cc-commandbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;background:#101828;color:#fff;border-radius:14px;position:sticky;top:76px;z-index:30;box-shadow:0 8px 25px #10182826}
.cc-commandbar h2{margin:0;font-size:19px}.cc-command-meta,.cc-status-actions,.cc-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cc-live-pill,.cc-status-pill{padding:7px 11px;border-radius:999px;background:#344054;font-weight:800;font-size:13px}.cc-status-pill[data-status=available]{background:#067647}.cc-status-pill[data-status=busy]{background:#b42318}.cc-status-pill[data-status=break]{background:#b54708}.cc-status-pill[data-status=wrapup]{background:#175cd3}.cc-status-pill[data-status=offline]{background:#475467}.cc-status-select{padding:8px;border-radius:8px;border:1px solid #667085;background:#fff;color:#101828}
.cc-tabs{grid-column:1/-1;background:#fff;border:1px solid var(--cc-border);padding:7px;border-radius:12px}.cc-tab{border:0;background:transparent;padding:9px 13px;border-radius:8px;font-weight:800;cursor:pointer}.cc-tab.active{background:#101828;color:#fff}.cc-tab-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:5px;padding:0 5px;border-radius:10px;background:#d92d20;color:#fff;font-size:11px}
#callcenter .queue-panel{grid-column:1;order:3;position:sticky;top:164px;max-height:calc(100vh - 180px);overflow:auto}#callcenter .phone-console{grid-column:2;order:4;min-width:0}#callcenter .call-case{grid-column:2;order:5;margin-top:0;min-width:0}.call-history-panel{order:6}.cc-missed-panel{order:7}.cc-supervisor-panel{order:2;grid-column:1/-1}
#callcenter .queue-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
#callcenter .queue-metrics .metric-card{min-width:0;overflow:hidden}
#callcenter .queue-metrics .metric-card strong{overflow-wrap:anywhere;line-height:1.25}
#callcenter .queue-metrics .metric-card:last-child{grid-column:1/-1}
.cc-operator-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}.cc-operator-card{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--cc-border);border-radius:10px;background:#fff}.cc-operator-card b{display:block}.cc-operator-card small{color:#667085}.cc-dot{width:10px;height:10px;border-radius:50%;background:#98a2b3;box-shadow:0 0 0 4px #98a2b322}.cc-dot.available{background:#12b76a}.cc-dot.busy{background:#f04438}.cc-dot.break{background:#f79009}.cc-dot.offline{background:#98a2b3}
#callcenter .phone-console{border:2px solid #d0d5dd}#callcenter .phone-console:has(.phone-status[data-kind=online]){border-color:#75e0a7}#callcenter .phone-console:has(.phone-status[data-kind=ringing]){border-color:#fdb022;box-shadow:0 0 0 4px #fdb02222}
.cc-call-ref{font-family:ui-monospace,Consolas,monospace;font-weight:800;color:#175cd3}.cc-recording{display:inline-flex;gap:6px;align-items:center;color:#b42318;font-weight:800}.cc-recording::before{content:"";width:8px;height:8px;border-radius:50%;background:#f04438;animation:ccpulse 1.2s infinite}@keyframes ccpulse{50%{opacity:.35}}
.queue-caller{border-left:4px solid #12b76a!important}.queue-caller[data-sla=warning]{border-left-color:#f79009!important;background:#fffaeb!important}.queue-caller[data-sla=breach]{border-left-color:#f04438!important;background:#fef3f2!important}.queue-caller time{font-size:15px}.queue-call-actions .answer{min-width:88px}
.cc-field{display:grid;gap:6px;font-weight:700}.cc-field select{padding:11px;border:1px solid #d0d5dd;border-radius:8px;font:inherit}.cc-wrapup-banner{display:none;padding:12px;border-radius:10px;background:#eff8ff;color:#175cd3;font-weight:800}.cc-wrapup-banner.active{display:block}
.cc-task-link{display:inline-flex;padding:5px 8px;border-radius:7px;background:#eff8ff;color:#175cd3;font-weight:800;text-decoration:none}.cc-call-link{border:0;background:none;color:#175cd3;font-weight:800;cursor:pointer;padding:0}.cc-history-filters{display:flex;gap:8px;flex-wrap:wrap}.cc-history-filters input,.cc-history-filters select{padding:8px;border:1px solid #d0d5dd;border-radius:8px}.cc-detail-drawer{position:fixed;inset:0 0 0 auto;width:min(520px,100vw);z-index:95;background:#fff;box-shadow:-20px 0 50px #10182833;padding:22px;overflow:auto}.cc-detail-drawer[hidden]{display:none}.cc-drawer-head{display:flex;justify-content:space-between;gap:12px}.cc-close{border:0;background:#f2f4f7;border-radius:8px;width:36px;height:36px;cursor:pointer;font-size:20px}
.cc-empty{padding:24px;text-align:center;color:#667085;border:1px dashed #d0d5dd;border-radius:10px}.cc-missed-list{display:grid;gap:8px}.cc-missed-item{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:11px;border:1px solid var(--cc-border);border-radius:10px}.cc-missed-item strong,.cc-missed-item span{display:block}
.caller-profile-panel .cc-popup-close{padding:7px 10px}.caller-profile-panel.wrapup{border:2px solid #2e90fa}.caller-profile-panel.wrapup .caller-popup-head::after{content:"Zəng bitdi · müraciəti tamamlayın";display:block;margin-top:8px;padding:8px;border-radius:7px;background:#eff8ff;color:#175cd3;font-weight:800}
@media(max-width:1050px){#callcenter .call-center-grid{grid-template-columns:1fr}.cc-commandbar,#callcenter .queue-panel,#callcenter .phone-console,#callcenter .call-case,.cc-supervisor-panel{grid-column:1}.cc-commandbar{position:static}#callcenter .queue-panel{position:static;max-height:none;order:4}#callcenter .phone-console{order:3}#callcenter .call-case{order:5}}
@media(max-width:600px){#callcenter .call-center-grid{padding:8px;gap:10px}.cc-commandbar{align-items:flex-start}.cc-command-meta{width:100%}.cc-status-actions{width:100%}.cc-status-select{flex:1}.cc-missed-item{grid-template-columns:1fr}.call-history-table{min-width:1050px}}

/* Give the wrap-up form the full workspace width and adapt columns to its
   actual width, not the window width (the queue occupies a second column). */
#callcenter .call-case{grid-column:1/-1;container-type:inline-size}
#callcenter .call-case-form{grid-template-columns:repeat(4,minmax(0,1fr))}
#callcenter .call-case-form>label{min-width:0}
#callcenter .courier-lookup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%;min-width:0}
#callcenter .courier-lookup input{width:100%;min-width:0}
#callcenter .courier-lookup .btn{white-space:nowrap}
#callcenter .courier-result{min-width:0;overflow-wrap:anywhere}
@container (max-width:1150px){#callcenter .call-case-form{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:880px){#callcenter .call-case-form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:560px){#callcenter .call-case-form{grid-template-columns:minmax(0,1fr)}}
.cc-call-contact{margin-top:18px;padding-top:14px;border-top:1px solid #eaecf0}.cc-call-contact h3{margin:16px 0 8px}.cc-call-contact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.cc-call-contact-form label{display:grid;gap:5px;font-weight:700}.cc-call-contact-form input{width:100%;min-width:0;padding:9px;border:1px solid #d0d5dd;border-radius:8px;font:inherit}.cc-call-contact-form button{width:max-content;max-width:100%}.cc-call-contact-history{display:grid;gap:8px;max-height:420px;overflow:auto}.cc-call-contact-item{display:grid;gap:5px;padding:10px;border:1px solid #eaecf0;border-radius:9px;background:#f8fafc}.cc-call-contact-item span{color:#667085;font-size:12px;overflow-wrap:anywhere}.cc-call-contact-item p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:520px){.cc-call-contact-form{grid-template-columns:minmax(0,1fr)}}
.cc-manual-case{margin:12px 0 18px;padding:14px;border:1px solid var(--cc-border);border-radius:12px;background:#fcfcfd}.cc-manual-case h3{margin:0 0 12px}.cc-manual-case form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.cc-manual-case label{display:grid;gap:5px;font-weight:700}.cc-manual-case input,.cc-manual-case select,.cc-manual-case textarea{width:100%;min-width:0;padding:9px;border:1px solid #d0d5dd;border-radius:8px;font:inherit}.cc-manual-request{grid-column:1/-1}.cc-requests-panel tbody td{vertical-align:top}.cc-requests-panel td:nth-child(2){white-space:nowrap}@media(max-width:650px){.cc-manual-case form{grid-template-columns:1fr 1fr}.cc-manual-request{grid-column:1/-1}}@media(max-width:420px){.cc-manual-case form{grid-template-columns:1fr}}
.cc-requests-panel .panel-head>div:last-child{display:flex;gap:8px;align-items:center}.cc-requests-panel input{min-width:min(360px,45vw);padding:9px;border:1px solid #d0d5dd;border-radius:8px;font:inherit}.cc-requests-table{min-width:1050px}.cc-request-detail{max-width:420px;border:0;background:transparent;color:#175cd3;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;cursor:pointer;font:inherit}.cc-request-task,.cc-task-detail-link{border:0;background:transparent;color:#175cd3;text-decoration:underline;cursor:pointer;font:inherit;font-weight:700}.cc-linked-task{margin-top:14px;padding:14px;border:1px solid #d0d5dd;border-radius:10px;background:#f8fafc}.cc-linked-task p{white-space:pre-wrap;overflow-wrap:anywhere}@media(max-width:600px){.cc-requests-panel .panel-head{align-items:stretch;flex-direction:column}.cc-requests-panel .panel-head>div:last-child{align-items:stretch;flex-direction:column}.cc-requests-panel input{min-width:0;width:100%}}