/* Online customer service, local-only DEMO. Scoped to support components. */
.support-admin,.support-chat,.support-editor{min-width:0}.support-admin .btn,.support-chat .btn,.support-editor .btn{min-height:44px;white-space:normal}.support-admin button:focus-visible,.support-chat button:focus-visible,.support-editor button:focus-visible,.support-chat textarea:focus-visible,.support-editor input:focus-visible{outline:3px solid #a2bc6c;outline-offset:3px}.support-chat-heading{display:flex;gap:16px;align-items:center;justify-content:space-between}.support-chat-heading h2{margin:12px 0 16px;font-size:23px;overflow-wrap:anywhere}.support-status{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #c4d6c8;border-radius:100px;background:#eff6ee;color:#335541;font-size:11px;line-height:1.5;flex-shrink:0;white-space:nowrap}.support-status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.support-status.queued{background:#fff6e9;border-color:#efd3a9;color:#875b28}.support-status.unavailable{background:#f3f1ef;border-color:#d8d0c7;color:#76624f}.support-context{display:flex;flex-wrap:wrap;gap:8px 20px;background:#f2f5ed;border:1px solid var(--line,#dce3d6);border-radius:8px;padding:12px;font-size:12px;line-height:1.7;overflow-wrap:anywhere}.support-context span{max-width:100%}.support-disclaimer{font-size:11px;line-height:1.8;color:var(--muted,#65745e);margin:12px 0}.support-messages{height:clamp(180px,31vh,330px);overflow:auto;overscroll-behavior:contain;background:#f7f8f3;border:1px solid var(--line,#dce3d6);border-radius:10px;padding:14px;margin-top:16px;scrollbar-gutter:stable}.support-message{max-width:90%;width:fit-content;padding:11px 14px;border:1px solid #dce4d7;border-radius:11px 11px 11px 3px;background:#fff;margin:0 0 12px;overflow-wrap:anywhere;word-break:break-word}.support-message.own{margin-left:auto;margin-right:0;background:#e6edda;border-color:#d5dfc9;border-radius:11px 11px 3px 11px}.support-message.other{margin-left:0;margin-right:auto;background:#fff;border-radius:11px 11px 11px 3px}.support-message.system{margin-left:auto;margin-right:auto;max-width:100%;background:transparent;border:0;border-radius:0;text-align:center;color:var(--muted,#65745e)}.support-message.system p{font-size:11px}.support-system-note{clear:both;align-self:stretch}.support-message-meta{font-size:10px;line-height:1.6;color:#687760}.support-message p{font-size:13px;line-height:1.8;margin:5px 0 0;white-space:pre-wrap}.support-response{font-size:10px;color:var(--muted,#65745e);margin:9px 0 15px}.support-compose-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.support-compose-actions small{font-size:10px;color:var(--muted,#65745e)}.support-chat textarea{resize:vertical;min-height:85px;max-height:220px;font-size:14px}.support-chat .field{font-size:12px}.support-request{width:100%;margin-top:14px}.support-agent-panel{border:1px solid var(--line,#dce3d6);border-radius:10px;background:#fcfdf9;margin:20px 0 26px;padding:0 16px}.support-agent-panel summary{font-size:14px;font-weight:650;padding:16px 0;cursor:pointer;min-height:44px}.support-agent-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;border-top:1px solid var(--line,#dce3d6)}.support-agent-row>div{min-width:0}.support-agent-row b,.support-agent-row small{overflow-wrap:anywhere}.support-agent-row small{font-size:10px;color:var(--muted,#65745e)}.support-agent-row .help{margin:7px 0}.support-agent-row .inline-actions{justify-content:flex-end;flex-shrink:0;max-width:63%;gap:6px}.support-agent-row .btn{font-size:11px;padding:9px 12px}.support-inbox-title{font-size:17px}.support-inbox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.support-conversation{display:flex;flex-direction:column;gap:9px;min-width:0;text-align:left;background:#fff;border:1px solid var(--line,#dce3d6);border-radius:9px;padding:17px;color:var(--green,#183f35);font:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s;overflow-wrap:anywhere}.support-conversation:hover{border-color:#96ad7e;box-shadow:0 4px 15px #183f3508}.support-conversation>span{font-size:12px;line-height:1.7}.support-conversation .support-conversation-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}.support-conversation .support-conversation-context,.support-conversation small{color:var(--muted,#65745e);font-size:10px}.support-preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#4d5f47;min-height:36px}.support-empty{padding:24px 15px;text-align:center;font-size:12px;line-height:1.9;color:var(--muted,#65745e)}.support-inbox>.support-empty{grid-column:1/-1;border:1px dashed #ccd6c4;border-radius:8px}.support-order-summary{padding:16px 0}.support-order-summary>b{font-size:14px;margin-right:10px;overflow-wrap:anywhere}.support-order-summary .support-status{vertical-align:middle}.support-editor .check-row{font-size:12px;min-height:44px;align-items:center;margin:4px 0}.support-editor .check-row input{width:18px;height:18px;margin:0;flex:none}
@media(max-width:760px){.support-inbox{grid-template-columns:1fr}.support-agent-row{flex-direction:column;align-items:stretch;gap:12px}.support-agent-row .inline-actions{justify-content:flex-start;max-width:100%}.support-admin>.section-title{align-items:flex-start;gap:12px;flex-wrap:wrap}.support-chat-heading{align-items:flex-start}.support-chat-heading h2{font-size:21px}.support-chat-heading>.support-status{margin-top:5px}.support-message{max-width:94%}}
@media(max-width:420px){.support-chat-heading{flex-direction:column;gap:0;margin-bottom:12px}.support-chat-heading h2{margin-bottom:8px}.support-messages{padding:10px;height:27vh;min-height:170px}.support-context{gap:5px 12px;padding:10px;font-size:11px}.support-compose-actions{align-items:stretch;flex-direction:column;gap:8px}.support-compose-actions .btn{width:100%}.support-conversation{padding:14px}.support-conversation .support-conversation-top{flex-wrap:wrap;gap:6px}.support-agent-panel{padding:0 11px}.support-agent-row .btn{padding:9px 11px}.support-order-summary>.support-status{margin-top:8px}.support-chat textarea{font-size:16px}}