:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#172033;background:#f5f7fb}*{box-sizing:border-box}body{margin:0;background:#f5f7fb}.topbar{height:68px;background:#111827;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 30px}.topbar strong{font-size:22px;letter-spacing:2px}.userbox{display:flex;gap:16px;align-items:center}.userbox form{margin:0}.link-button{border:1px solid #475569;background:transparent;color:#fff;border-radius:8px;padding:8px 12px;cursor:pointer}.page{max-width:1180px;margin:0 auto;padding:34px}.hero{background:#fff;border-radius:20px;padding:34px;display:flex;justify-content:space-between;gap:20px;align-items:center;box-shadow:0 12px 36px rgba(15,23,42,.06)}.hero h1{margin:8px 0 10px;font-size:34px}.hero p{margin:0;color:#64748b}.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.5px;color:#2563eb}.status-pill{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;padding:10px 14px;border-radius:999px;font-weight:700;white-space:nowrap}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0}.card,.panel{background:#fff;border-radius:16px;padding:24px;box-shadow:0 8px 24px rgba(15,23,42,.045)}.metric{font-size:32px;font-weight:800}.label{color:#64748b;margin-top:5px}.panel{margin-top:18px}.panel h2{margin-top:0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid2 p{color:#64748b;margin:6px 0}.next{border-left:4px solid #2563eb}.login-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(145deg,#0f172a,#1e293b)}.login-shell{width:min(420px,calc(100vw - 32px));background:#fff;padding:34px;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.25)}.brand-mark{width:52px;height:52px;border-radius:14px;background:#111827;color:#fff;display:grid;place-items:center;font-size:28px;font-weight:800}.login-shell h1{margin-bottom:4px}.muted,.footnote{color:#64748b}.login-form{display:grid;gap:8px;margin-top:24px}.login-form label{font-weight:650;margin-top:6px}.login-form input{height:44px;border:1px solid #cbd5e1;border-radius:10px;padding:0 12px;font-size:15px}.login-form button{height:46px;border:0;border-radius:10px;background:#111827;color:#fff;font-size:15px;font-weight:700;margin-top:10px;cursor:pointer}.alert{padding:11px 12px;border-radius:9px;margin-top:18px;font-size:14px}.alert.error{background:#fef2f2;color:#b91c1c}.alert.ok{background:#ecfdf5;color:#047857}code{background:#eef2ff;padding:2px 5px;border-radius:5px}@media(max-width:760px){.page{padding:18px}.hero{padding:24px;align-items:flex-start;flex-direction:column}.hero h1{font-size:27px}.cards,.grid2{grid-template-columns:1fr}.topbar{padding:0 18px}}
.top-context{font-weight:400;color:#94a3b8;font-size:14px;margin-left:8px}.top-link{color:#e2e8f0;text-decoration:none;font-size:14px}.page.narrow{max-width:920px}.page-title{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}.page-title h1{margin:6px 0 6px;font-size:32px}.page-title p,.section-head p{margin:4px 0;color:#64748b}.section-head{display:flex;justify-content:space-between;gap:18px;align-items:center}.section-head h2{margin:0}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #cbd5e1;background:#fff;color:#172033;border-radius:9px;padding:10px 14px;text-decoration:none;font-weight:700;cursor:pointer}.btn.primary{background:#111827;color:#fff;border-color:#111827}.btn.small{padding:7px 10px;font-size:13px}.search-row{display:flex;gap:10px}.search-row input{flex:1}.search-row input,.field input,.field select{height:44px;border:1px solid #cbd5e1;border-radius:9px;padding:0 12px;background:#fff;font-size:14px}.candidate-list{border:1px solid #e2e8f0;border-radius:12px;margin-top:14px;overflow:hidden}.candidate{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #e2e8f0}.candidate:last-child{border-bottom:0}.candidate strong,.candidate small,.data-table td strong,.data-table td small{display:block}.candidate small,.data-table td small{color:#64748b;margin-top:3px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:flex;flex-direction:column;gap:7px}.field span,.field-label{font-size:14px;font-weight:700}.wide{grid-column:1/-1}.check-card{border:1px solid #e2e8f0;border-radius:12px;padding:14px;display:flex;gap:10px;align-items:flex-start}.check-card small{display:block;color:#64748b;margin-top:4px}.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.check-grid label{border:1px solid #e2e8f0;border-radius:9px;padding:10px;display:flex;gap:8px;align-items:center;font-size:13px}.actions{display:flex;gap:10px;justify-content:flex-end;padding-top:4px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse}.data-table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#64748b;text-align:left;padding:11px;border-bottom:1px solid #e2e8f0}.data-table td{padding:13px 11px;border-bottom:1px solid #eef2f7;vertical-align:top}.data-table .right{text-align:right}.empty{text-align:center!important;color:#64748b;padding:28px!important}.tag{display:inline-block;background:#eef2ff;color:#3730a3;border-radius:999px;padding:4px 7px;font-size:11px;margin:2px}.badge{display:inline-block;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:700}.badge.yes{background:#ecfdf5;color:#047857}.badge.no{background:#f1f5f9;color:#64748b}.warning-panel{border-left:4px solid #f59e0b}.warning-panel p{margin-bottom:0;color:#64748b}@media(max-width:760px){.section-head{align-items:flex-start;flex-direction:column}.form-grid,.check-grid{grid-template-columns:1fr}.wide{grid-column:auto}.search-row{flex-direction:column}.data-table{min-width:760px}}
.cards.four{grid-template-columns:repeat(4,1fr)}.compact-hero{padding:26px 30px}.presence-box{display:flex;align-items:center;gap:9px;border:1px solid #e2e8f0;padding:10px 14px;border-radius:999px;background:#fff}.presence-dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:#94a3b8}.presence-available{background:#10b981}.presence-busy{background:#ef4444}.presence-away{background:#f59e0b}.presence-offline{background:#94a3b8}.presence-actions{display:flex;gap:8px;flex-wrap:wrap}.presence-btn{min-width:92px}.presence-btn.available{border-color:#a7f3d0}.presence-btn.busy{border-color:#fecaca}.presence-btn.away{border-color:#fde68a}.presence-btn.offline{border-color:#cbd5e1}.priority-urgent{background:#fee2e2;color:#991b1b}.priority-high{background:#ffedd5;color:#9a3412}.priority-normal{background:#e0f2fe;color:#075985}.priority-low{background:#f1f5f9;color:#475569}.queue-table form,.data-table form{margin:0}.field textarea{border:1px solid #cbd5e1;border-radius:9px;padding:11px 12px;background:#fff;font:inherit;resize:vertical}@media(max-width:900px){.cards.four{grid-template-columns:1fr 1fr}}@media(max-width:560px){.cards.four{grid-template-columns:1fr}.presence-actions{width:100%}.presence-btn{flex:1 1 45%}}


/* P1D AI handoff context */
.narrow-page{max-width:1180px}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:10px 0 20px}
.detail-grid>div{padding:14px;border:1px solid #e7eaf0;border-radius:10px;background:#fafbfc}
.context-box{white-space:pre-wrap;padding:16px;border:1px solid #e1e6ee;border-radius:10px;background:#f8fafc;line-height:1.5;margin-bottom:18px}
.conversation-box{white-space:pre-wrap;word-break:break-word;max-height:480px;overflow:auto;padding:16px;border:1px solid #d9e0ea;border-radius:10px;background:#111827;color:#e5e7eb;line-height:1.55}
@media(max-width:720px){.detail-grid{grid-template-columns:1fr}}

.btn.danger{border-color:#fecaca;background:#fff1f2;color:#b91c1c}.btn.danger:hover{background:#ffe4e6}


/* P1E real-time chat */
.chat-page{max-width:1100px}.chat-shell{background:#fff;border:1px solid #dfe5ec;border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.06);overflow:hidden}.chat-thread{height:min(58vh,620px);min-height:360px;overflow-y:auto;padding:22px;background:#f6f8fb}.chat-message{max-width:78%;margin:0 0 14px}.chat-message.mine{margin-left:auto}.chat-message.theirs{margin-right:auto}.chat-who{font-size:12px;font-weight:700;color:#64748b;margin:0 7px 4px}.chat-message.mine .chat-who{text-align:right}.chat-bubble{white-space:pre-wrap;word-break:break-word;border-radius:16px;padding:11px 14px;background:#fff;border:1px solid #dfe5ec;line-height:1.45}.chat-message.mine .chat-bubble{background:#132c4d;color:#fff;border-color:#132c4d}.chat-meta{font-size:11px;color:#8190a5;margin:4px 7px 0}.chat-message.mine .chat-meta{text-align:right}.typing-indicator{height:26px;padding:5px 20px;font-size:12px;color:#64748b;background:#fff}.chat-compose{display:flex;gap:10px;padding:14px;border-top:1px solid #e6ebf1;background:#fff}.chat-compose textarea{flex:1;resize:none;border:1px solid #cad3df;border-radius:10px;padding:10px 12px;font:inherit}.chat-actions{display:flex;gap:10px;margin-top:12px}.copy-row{display:flex;gap:10px}.copy-row input{flex:1}.center{text-align:center}.customer-chat-page{max-width:920px}@media(max-width:700px){.chat-message{max-width:90%}.chat-compose{align-items:stretch;flex-direction:column}.copy-row{flex-direction:column}.chat-thread{height:55vh}}

/* P1G attachments + notifications */
.attachment-upload{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0 18px}.attachment-upload input[type=file]{flex:1;min-width:240px;border:1px solid #cbd5e1;border-radius:9px;padding:9px;background:#fff}.attachment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.attachment-card{border:1px solid #e2e8f0;border-radius:12px;padding:12px;background:#fff;display:flex;gap:12px;align-items:center;min-width:0}.attachment-card>div:last-child{min-width:0}.attachment-card strong{display:block;word-break:break-word}.attachment-card small{display:block;color:#64748b;margin:4px 0 8px}.attachment-preview{width:88px;height:72px;border-radius:9px;overflow:hidden;background:#f1f5f9;flex:0 0 auto}.attachment-preview img{width:100%;height:100%;object-fit:cover;display:block}.notification-row{gap:14px}.notification-unread{background:#eff6ff}.notification-panel{border-left:4px solid #2563eb}.notification-panel .candidate-list{margin-top:0}.top-link .badge{margin-left:4px;background:#ef4444;color:#fff}.customer-chat-page .attachment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:800px){.attachment-grid,.customer-chat-page .attachment-grid{grid-template-columns:1fr}.attachment-upload{align-items:stretch;flex-direction:column}.attachment-upload input[type=file]{width:100%}}

/* P1-POST1 customer finish-chat + feedback */
.finish-chat-panel{border-left:4px solid #ef4444}.feedback-panel{border-left:4px solid #f59e0b}.feedback-form{display:grid;gap:18px}.star-rating{display:flex;gap:8px;flex-wrap:wrap}.star-rating label{position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid #dbe3ed;border-radius:12px;background:#fff}.star-rating input{position:absolute;opacity:0;pointer-events:none}.star-rating span{font-size:25px;color:#cbd5e1;line-height:1}.star-rating small{margin-top:3px;color:#64748b}.star-rating label:has(input:checked){border-color:#f59e0b;background:#fffbeb;box-shadow:0 0 0 2px rgba(245,158,11,.12)}.star-rating label:has(input:checked) span{color:#f59e0b}.feedback-stars{font-size:28px;letter-spacing:2px;color:#f59e0b}.small-stars{font-size:18px;letter-spacing:1px}.feedback-thanks{border-left:4px solid #10b981}.feedback-agent-card{margin-top:14px;padding:14px;border:1px solid #fde68a;border-radius:12px;background:#fffbeb}.feedback-dashboard td:nth-child(3){max-width:520px;white-space:normal}.feedback-dashboard .status-pill{background:#fffbeb;color:#92400e;border-color:#fde68a}@media(max-width:700px){.star-rating label{width:48px;height:52px}.feedback-dashboard .data-table{min-width:700px}}

/* P2A remote support consent */
.remote-support-panel,.remote-consent-panel{border:1px solid rgba(37,99,235,.2);background:linear-gradient(180deg,#fff,#f8fbff)}
.permission-grid{display:flex;flex-wrap:wrap;gap:.55rem;margin:.65rem 0}.permission-grid span,.permission-grid label{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .65rem;border-radius:.6rem;background:#eef4ff;border:1px solid #dbe7ff;font-size:.9rem}.permission-grid.selectable label{cursor:pointer;background:#fff}.remote-request-summary{padding:.75rem 0}.approved-permissions{margin-top:.75rem;padding:.8rem;border-radius:.75rem;background:#eefbf3;border:1px solid #ccebd8}.remote-consent-actions{display:grid;gap:.8rem}.remote-request-form textarea{width:100%}

/* P2B browser WebRTC screen sharing */
.screen-share-viewer{margin-top:16px;border:1px solid #dbe5f1;border-radius:14px;overflow:hidden;background:#0b1220}.screen-share-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 14px;background:#fff;border-bottom:1px solid #dbe5f1}.screen-share-toolbar>div:first-child{display:flex;flex-direction:column;gap:3px}.screen-status,.screen-customer-status{font-size:13px;color:#64748b}.screen-share-buttons{display:flex;gap:8px;flex-wrap:wrap}.screen-video-stage{position:relative;display:grid;place-items:center;min-height:420px;background:#050a12}.screen-video-stage video{width:100%;max-height:72vh;object-fit:contain;background:#050a12;display:block}.screen-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;color:#cbd5e1;padding:24px;background:radial-gradient(circle at center,#13213a,#050a12)}.screen-placeholder strong{font-size:18px;color:#fff}.screen-placeholder span{font-size:13px;color:#94a3b8}.screen-share-customer{display:grid;gap:12px}.screen-share-customer h3{margin:0}.screen-customer-status{padding:9px 11px;border:1px solid #cfe0f6;border-radius:9px;background:#f8fbff}.screen-local-preview{position:relative;min-height:220px;display:grid;place-items:center;border-radius:12px;overflow:hidden;background:#08111e}.screen-local-preview video{display:block;width:100%;max-height:360px;object-fit:contain;background:#08111e}.screen-local-preview .screen-placeholder{position:absolute}.screen-share-customer form{margin-top:2px}.remote-support-panel .remote-request-form{display:grid;gap:12px}@media(max-width:760px){.screen-share-toolbar{align-items:flex-start;flex-direction:column}.screen-share-buttons{width:100%}.screen-share-buttons .btn{flex:1}.screen-video-stage{min-height:260px}.screen-local-preview{min-height:170px}}
