.support-page{background:#f5f7fb;color:#0f172a;min-height:var(--app-dvh, 100vh);overflow:hidden}.support-shell{display:block;min-height:var(--app-dvh, 100vh)}.support-workspace{min-width:0;padding:16px 24px;overflow:hidden}.support-hero,.card-like{background:#fff;border:1px solid #e5eaf2;border-radius:18px;box-shadow:0 12px 28px #0f172a0f}.support-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;margin-bottom:12px}.support-hero h1{margin:0;font-size:24px;letter-spacing:-.02em}.support-hero p{margin:4px 0 0;color:#64748b}.support-hero-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.support-hero-actions select,.support-hero-actions button,.support-queue-head input,.support-queue-head select,.support-queue-head button{border:1px solid #dbe3ee;border-radius:12px;background:#fff;padding:10px 12px;font-weight:800;color:#0f172a}.support-hero-actions button{background:#0f766e;color:#fff;border-color:#0f766e}.support-hero-actions button:nth-of-type(1){background:#fff;color:#2563eb;border-color:#bfdbfe}.support-hero-actions button:nth-of-type(2){background:#2563eb;border-color:#2563eb}.support-hero-actions button:disabled{opacity:.55;cursor:not-allowed}.support-kpis{display:grid;grid-template-columns:repeat(8,minmax(118px,1fr));gap:10px;margin-bottom:12px}.support-kpi{text-align:left;background:#fff;border:1px solid #e5eaf2;border-radius:16px;padding:11px 12px;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;cursor:pointer;box-shadow:0 8px 20px #0f172a0d}.support-kpi.active{border-color:#2563eb;box-shadow:inset 0 0 0 1px #2563eb}.support-kpi-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:999px;background:#eef2ff}.support-kpi span:nth-child(2){font-size:13px;color:#334155;font-weight:850}.support-kpi strong{font-size:24px;color:#2563eb}.support-notice{margin-bottom:12px;padding:10px 14px;border-radius:12px;background:#eef6ff;color:#1d4ed8;border:1px solid #bfdbfe;font-weight:750}.support-grid{display:grid;grid-template-columns:minmax(300px,390px) minmax(420px,1fr) minmax(280px,360px);gap:14px;align-items:stretch;height:calc(var(--app-dvh, 100vh) - 188px);min-height:620px}.support-queue,.support-main,.support-side{min-height:0;height:100%}.support-queue{padding:12px;display:flex;flex-direction:column;overflow:hidden}.support-queue-head{display:grid;gap:10px;margin-bottom:12px}.support-tabs{display:flex;gap:6px;border-bottom:1px solid #e5eaf2;margin-bottom:8px;overflow-x:auto}.support-tabs button{border:0;background:transparent;padding:10px 8px;color:#475569;font-weight:850;cursor:pointer}.support-tabs button.active{color:#2563eb;border-bottom:3px solid #2563eb}.support-tabs span{background:#e8eef8;border-radius:999px;padding:1px 7px;margin-left:4px}.support-operational-tabs{display:flex;gap:6px;margin:0 0 8px;overflow-x:auto;padding-bottom:4px}.support-operational-tabs button{border:1px solid #dbe3ee;background:#fff;color:#475569;border-radius:999px;padding:7px 9px;font-weight:850;cursor:pointer;white-space:nowrap}.support-operational-tabs button.active{border-color:#2563eb;color:#2563eb;background:#eff6ff}.support-thread-list{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;overflow:auto;padding-right:3px}.support-thread{border:1px solid #e5eaf2;background:#fff;border-radius:14px;padding:10px;display:grid;grid-template-columns:40px minmax(0,1fr) minmax(118px,auto);gap:10px;text-align:left;cursor:pointer}.support-thread.active{border-color:#2563eb;box-shadow:inset 3px 0 #2563eb;background:#f8fbff}.support-thread-icon{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;background:#eef2ff}.support-thread-icon.sac{background:#e0f2fe}.support-thread-icon.chat{background:#dcfce7}.support-thread-icon.question{background:#f3e8ff}.support-thread-body{min-width:0;display:flex;flex-direction:column;gap:3px}.support-thread-body strong,.support-thread-body small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.support-thread-body small,.support-thread-body em{color:#64748b;font-style:normal;font-size:12px}.support-badge{border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900;white-space:nowrap;align-self:start}.support-badge.danger{background:#fee2e2;color:#b91c1c}.support-badge.blocked{background:#ffe4e6;color:#be123c}.support-badge.warning{background:#ffedd5;color:#c2410c}.support-badge.success{background:#dcfce7;color:#15803d}.support-badge.info{background:#dbeafe;color:#1d4ed8}.support-badge.neutral{background:#e2e8f0;color:#334155}.support-thread-badges{display:flex;flex-direction:column;gap:5px;align-items:flex-end}.support-sla-badge{border-radius:999px;padding:5px 8px;font-size:11px;font-weight:900;white-space:nowrap}.support-sla-badge.on-track{background:#dcfce7;color:#166534}.support-sla-badge.due-soon{background:#fef3c7;color:#a16207}.support-sla-badge.at-risk{background:#ffedd5;color:#c2410c}.support-sla-badge.overdue{background:#fee2e2;color:#b91c1c}.support-main{padding:14px;display:flex;flex-direction:column;overflow:hidden}.support-main-head{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #e5eaf2;padding-bottom:14px}.support-main-head h2{margin:0;font-size:20px}.support-main-head p{margin:4px 0 0;color:#64748b}.support-status-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;align-items:center;color:#475569;font-size:13px}.support-close-button{border:1px solid #fca5a5;border-radius:10px;background:#fff;color:#b91c1c;padding:7px 11px;font-weight:900;cursor:pointer}.support-close-button:hover:not(:disabled){background:#fef2f2}.support-close-button:disabled{opacity:.5;cursor:not-allowed}.support-sla-panel{margin-top:10px;padding:11px 12px;border:1px solid #bbf7d0;border-radius:14px;background:#f0fdf4;display:grid;grid-template-columns:minmax(210px,1fr) minmax(180px,280px);gap:8px 16px;align-items:center;flex-shrink:0}.support-sla-panel.due-soon{border-color:#fde68a;background:#fffbeb}.support-sla-panel.at-risk{border-color:#fdba74;background:#fff7ed}.support-sla-panel.overdue{border-color:#fca5a5;background:#fef2f2}.support-sla-copy{display:grid;gap:2px}.support-sla-copy span{color:#475569;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.support-sla-copy strong{color:#166534;font-size:17px}.support-sla-panel.due-soon .support-sla-copy strong{color:#a16207}.support-sla-panel.at-risk .support-sla-copy strong{color:#c2410c}.support-sla-panel.overdue .support-sla-copy strong{color:#b91c1c}.support-sla-copy small,.support-sla-rule{color:#64748b;font-size:11px}.support-sla-progress{height:9px;overflow:hidden;border-radius:999px;background:#94a3b83d}.support-sla-progress span{display:block;height:100%;border-radius:inherit;background:#22c55e;transition:width .2s ease}.support-sla-panel.due-soon .support-sla-progress span{background:#eab308}.support-sla-panel.at-risk .support-sla-progress span{background:#f97316}.support-sla-panel.overdue .support-sla-progress span{background:#ef4444}.support-sla-rule{grid-column:2;text-align:right}.support-detail-tabs,.support-reply-tabs{display:flex;gap:16px;border-bottom:1px solid #e5eaf2;margin-top:10px;flex-shrink:0}.support-detail-tabs button{background:none;border:0;padding:12px 0;font-weight:900;color:#475569;cursor:pointer;text-transform:capitalize}.support-detail-tabs button.active{color:#2563eb;border-bottom:3px solid #2563eb}.support-messages{flex:1;min-height:180px;overflow:auto;padding:12px 4px;display:flex;flex-direction:column;gap:12px}.support-message{display:flex;gap:10px;max-width:82%}.support-message.outbound{align-self:flex-end;flex-direction:row-reverse}.support-message.system{align-self:center;max-width:92%}.support-avatar{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:#dbeafe;color:#1d4ed8;font-weight:900;flex-shrink:0}.support-bubble{border:1px solid #e5eaf2;border-radius:14px;padding:10px 12px;background:#fff}.support-message.outbound .support-bubble{background:#eff6ff;border-color:#bfdbfe}.support-message.system .support-bubble{background:#fff7ed;border-color:#fed7aa}.support-bubble header{display:flex;gap:16px;justify-content:space-between;color:#334155;font-size:12px}.support-bubble p{margin:8px 0 0;white-space:pre-wrap}.support-bubble small{display:inline-block;margin-top:8px;color:#2563eb;font-weight:800}.support-message-error{color:#be123c!important;display:block!important}.support-audit{flex:1;min-height:180px;overflow:auto;padding:12px 0;display:grid;gap:8px;align-content:start}.support-audit div{border:1px solid #e5eaf2;border-radius:12px;padding:10px;display:flex;justify-content:space-between;gap:8px}.support-json{flex:1;min-height:220px;overflow:auto;margin:12px 0;padding:12px;border:1px solid #dbe3ee;border-radius:14px;background:#0f172a;color:#e2e8f0;font-size:12px}.support-reply{border:1px solid #e5eaf2;border-radius:16px;padding:10px;flex-shrink:0}.support-reply-tabs{margin-top:0;padding-bottom:8px;font-weight:900}.support-reply-tabs span{color:#64748b}.support-manual-notice,.support-block-notice{border-radius:10px;padding:8px 10px;margin:6px 0;font-size:12px;font-weight:800}.support-manual-notice{background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8}.support-block-notice{background:#fff7ed;border:1px solid #fed7aa;color:#c2410c}.support-reply textarea{width:100%;min-height:72px;max-height:120px;resize:vertical;border:0;padding:10px 2px;outline:none;font:inherit}.support-reply-actions{display:flex;align-items:center;gap:8px;border-top:1px solid #e5eaf2;padding-top:10px;flex-wrap:wrap}.support-reply-actions button{border:1px solid #dbe3ee;border-radius:10px;background:#fff;padding:9px 12px;font-weight:800}.support-reply-actions .primary{margin-left:auto;background:#2563eb;color:#fff;border-color:#2563eb}.support-reply-actions button:disabled{opacity:.55;cursor:not-allowed}.support-steps{margin-top:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex-shrink:0}.support-steps div{border:1px solid #e5eaf2;border-radius:14px;padding:8px;display:flex;align-items:center;gap:8px;color:#64748b}.support-steps div.active{border-color:#93c5fd;background:#eff6ff;color:#1d4ed8}.support-steps strong{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:#e2e8f0}.support-steps div.active strong{background:#2563eb;color:#fff}.support-side{padding:12px;display:flex;flex-direction:column;gap:10px;overflow:auto}.support-side section{border:1px solid #e5eaf2;border-radius:14px;padding:12px}.support-side h3{margin:0 0 10px;font-size:15px}.support-side p{margin:6px 0;color:#475569;overflow-wrap:anywhere}.support-side button{border:1px solid #bfdbfe;color:#2563eb;background:#fff;border-radius:10px;padding:8px 10px;font-weight:900}.support-side button:disabled{opacity:.5;cursor:not-allowed}.support-product-image,.support-image-placeholder{width:96px;height:78px;object-fit:contain;border-radius:12px;border:1px solid #e5eaf2;background:#f8fafc;margin-bottom:8px}.support-image-placeholder{display:grid;place-items:center;color:#94a3b8;font-size:12px}.support-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.support-empty{color:#64748b;padding:16px;text-align:center}@media (max-width: 1440px){.support-kpis{grid-template-columns:repeat(4,1fr)}.support-grid{grid-template-columns:minmax(280px,350px) minmax(420px,1fr) minmax(260px,330px);height:calc(var(--app-dvh, 100vh) - 230px)}}@media (max-width: 1180px){.support-grid{grid-template-columns:320px 1fr;height:auto;overflow:visible}.support-side{grid-column:1 / -1;min-height:0}.support-page,.support-workspace{overflow:visible}}@media (max-width: 860px){.support-workspace{padding:12px}.support-hero,.support-main-head{flex-direction:column;align-items:flex-start}.support-kpis,.support-grid{grid-template-columns:1fr;height:auto}.support-sla-panel{grid-template-columns:1fr}.support-sla-rule{grid-column:1;text-align:left}.support-queue,.support-main,.support-side{min-height:0}}

.support-attach-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d1d5db;background:#fff;color:#111827;border-radius:8px;padding:8px 10px;font-size:13px;font-weight:700;cursor:pointer}.support-attach-button:hover{background:#f3f4f6}.support-attach-button:has(input:focus-visible){outline:2px solid #2563eb;outline-offset:2px}