/* Approved minimal chat interior; all component rules scoped to this pane. */
[data-panel="reseller"].is-reseller-support { padding-bottom:0; }
#reseller-root.is-support-tab > .reseller-summary { display: none; }
#reseller-root.is-support-tab > .reseller-tabs { margin-bottom: 0; }
#reseller-support-chat { --bg: var(--bg-base, #070708); --surface: #101011; --surface-strong: #19191b; --text: #f4f1e9; --text-soft: #b9b5aa; --muted: #96938a; --line: #28282b; --line-strong: #414145; --accent: #ff792e; --accent-strong: #ff8c4b; --accent-ink: #24110b; --danger: #ffaaa4; display:flex; flex-direction:column; min-width:0; color:var(--text); font-size:15px; font-weight:400; line-height:1.6; }
#reseller-support-chat *, #reseller-support-chat *::before, #reseller-support-chat *::after { box-sizing:border-box; }
#reseller-support-chat [hidden] { display:none !important; }
#reseller-support-chat button, #reseller-support-chat input, #reseller-support-chat textarea { min-width:0; font:inherit; color:inherit; }
#reseller-support-chat button { cursor:pointer; }
#reseller-support-chat button:disabled { cursor:not-allowed; }
#reseller-support-chat textarea { resize:none; }
#reseller-support-chat svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
#reseller-support-chat .support-tools { display:flex; justify-content:flex-end; height:32px; flex-shrink:0; }
#reseller-support-chat .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#reseller-support-chat .icon-button, #reseller-support-chat .send-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-soft); }
#reseller-support-chat .icon-button:hover:not(:disabled) { background: var(--surface-strong); color: var(--text); }
#reseller-support-chat .reset-button { width: 32px; height: 32px; }
#reseller-support-chat .reset-button svg { width: 17px; height: 17px; }
#reseller-support-chat .workspace { display: flex; flex-direction: column; height: calc(100% - 82px); padding: 0 clamp(24px, 4vw, 58px); }
#reseller-support-chat .conversation { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
#reseller-support-chat .welcome { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 32px 0 44px; text-align: center; }
#reseller-support-chat .welcome h2 { margin: 0; font-size: clamp(25px, 2.6vw, 33px); font-weight: 650; line-height: 1.3; letter-spacing: -.035em; }
#reseller-support-chat .welcome p { margin: 13px 0 0; color: var(--muted); font-size: 14px; }
#reseller-support-chat .messages { list-style: none; width: min(100%, 760px); margin: 0 auto; padding: 32px 4px 20px; }
#reseller-support-chat .messages:empty { display: none; }
#reseller-support-chat .message { margin: 0 0 29px; min-width: 0; overflow-wrap: anywhere; animation: rs-arrive 240ms ease-out both; }
#reseller-support-chat .message-label { margin: 0 0 9px; color: var(--muted); font-size: 11px; font-weight: 650; }
#reseller-support-chat .message-user { display: flex; flex-direction: column; align-items: flex-end; margin-top: 4px; }
#reseller-support-chat .message-user > .message-label { display: none; }
#reseller-support-chat .message-user .message-body { max-width: 85%; padding: 12px 17px; border-radius: 18px 18px 5px 18px; background: var(--surface-strong); }
#reseller-support-chat .message-body p, #reseller-support-chat .reply-text { margin: 0; white-space: pre-wrap; }
#reseller-support-chat .message-body .message-request { margin-top: 6px; color: var(--text-soft); font-size: 11px; }
#reseller-support-chat .message-observation { margin-top: 5px; font-size: 12px; color: var(--text-soft); }
#reseller-support-chat .message-observation p { padding-top: 8px; }
#reseller-support-chat .message-assistant { padding: 0 0 1px; }
#reseller-support-chat .message-assistant > .message-label { color: var(--text-soft); }
#reseller-support-chat .reply-text { font-size: 15px; line-height: 1.8; }
#reseller-support-chat .answer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 22px; margin-top: 13px; }
#reseller-support-chat .quiet-button { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 2px 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; }
#reseller-support-chat .quiet-button:hover { color: var(--text); }
#reseller-support-chat .quiet-button svg { width: 14px; height: 14px; }
#reseller-support-chat .answer-details { flex-basis: 100%; margin-top: 2px; }
#reseller-support-chat summary { width: fit-content; cursor: pointer; color: var(--muted); font-size: 11px; }
#reseller-support-chat summary:hover { color: var(--text); }
#reseller-support-chat .answer-details > summary { list-style: none; }
#reseller-support-chat .answer-details > summary::-webkit-details-marker { display: none; }
#reseller-support-chat .answer-details > summary::after { display: inline-block; content: "⌄"; margin-left: 6px; transition: transform 160ms ease; }
#reseller-support-chat .answer-details[open] > summary::after { transform: rotate(180deg); }
#reseller-support-chat .details-content { padding: 17px 0 3px; color: var(--text-soft); font-size: 12px; }
#reseller-support-chat .details-content > p { margin: 0 0 12px; }
#reseller-support-chat .answer-section { margin: 16px 0; }
#reseller-support-chat .answer-section h3 { margin: 0 0 7px; color: var(--text-soft); font-size: 12px; font-weight: 650; }
#reseller-support-chat .answer-section ul, #reseller-support-chat .sources-list { margin: 0; padding-left: 17px; }
#reseller-support-chat .answer-section li, #reseller-support-chat .sources-list li { margin: 7px 0; }
#reseller-support-chat .fact-source { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
#reseller-support-chat .request-result { margin: 12px 0; }
#reseller-support-chat .request-result p { margin: 0 0 5px; }
#reseller-support-chat .request-result code { font-family: Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
#reseller-support-chat .sources-list a { text-decoration: underline; text-underline-offset: 3px; }
#reseller-support-chat .sources-list a:hover { color: var(--accent); }
#reseller-support-chat .pending { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
#reseller-support-chat .pending::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: rs-breathe 1.5s ease-in-out infinite; }
#reseller-support-chat .composer-dock { width: min(100%, 784px); flex-shrink: 0; margin-inline: auto; padding: 12px 0 max(27px, env(safe-area-inset-bottom)); }
#reseller-support-chat .composer { position: relative; padding: 16px 16px 11px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); transition: border-color 180ms ease; }
#reseller-support-chat .composer:focus-within { border-color: var(--line-strong); }
#reseller-support-chat .message-input { display: block; width: 100%; height: 38px; min-height: 38px; max-height: 150px; padding: 1px 4px 10px; border: 0; border-radius: 4px; background: transparent; line-height: 1.65; }
#reseller-support-chat .message-input::placeholder, #reseller-support-chat .request-field input::placeholder { color: var(--muted); opacity: 1; }
#reseller-support-chat .message-input:focus-visible { outline: none; }
#reseller-support-chat .composer-actions { display: flex; align-items: center; gap: 9px; margin-top: 4px; }
#reseller-support-chat .request-field { min-width: 0; flex: 1; }
#reseller-support-chat .request-field input { display: block; width: min(100%, 320px); height: 32px; padding: 4px 6px; border: 1px solid transparent; border-radius: 8px; background: transparent; font-family: Consolas, monospace; font-size: 11px; }
#reseller-support-chat .request-field input::placeholder { font-family: "Segoe UI Variable", "Aptos", Arial, sans-serif; }
#reseller-support-chat .request-field input:focus-visible { outline-offset: 0; }
#reseller-support-chat .send-button { width: 35px; height: 35px; margin-left: auto; background: var(--accent); color: var(--accent-ink); }
#reseller-support-chat .send-button:hover:not(:disabled) { background: var(--accent-strong); }
#reseller-support-chat .send-button svg { width: 19px; height: 19px; stroke-width: 2; }
#reseller-support-chat .send-button:disabled { opacity: 1; background: var(--surface-strong); color: var(--muted); }
#reseller-support-chat .form-status { margin: 7px 4px 0; font-size: 11px; color: var(--text-soft); overflow-wrap: anywhere; }
#reseller-support-chat .form-status:empty { margin: 0; }
#reseller-support-chat .form-status.is-error { color: var(--danger); }
#reseller-support-chat .form-status:not(.is-error) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#reseller-support-chat .connection-notice { width: min(100%, 784px); margin: 18px auto 0; padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
#reseller-support-chat .connection-notice p { margin: 0; font-size: 12px; color: var(--text-soft); }
#reseller-support-chat .connection-notice button { color: var(--accent); }
#reseller-support-chat .attachment { max-height: 230px; overflow-y: auto; margin: 0 3px 13px; padding-bottom: 13px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
#reseller-support-chat .attachment-heading { display: flex; align-items: center; gap: 11px; }
#reseller-support-chat .attachment-heading img { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
#reseller-support-chat .attachment-info { flex: 1; min-width: 0; }
#reseller-support-chat .attachment-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
#reseller-support-chat .attachment-info span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
#reseller-support-chat .attachment-heading .icon-button { width: 30px; height: 30px; }
#reseller-support-chat .attachment-heading .icon-button svg { width: 16px; height: 16px; }
#reseller-support-chat .ocr-details { margin-top: 9px; }
#reseller-support-chat .ocr-details textarea { display: block; width: 100%; min-height: 74px; max-height: 150px; margin-top: 9px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 12px; line-height: 1.6; }
#reseller-support-chat .field-note { margin: 7px 1px 0; color: var(--muted); font-size: 10px; }
#reseller-support-chat .drop-indicator { display: none; position: absolute; inset: 0; z-index: 3; align-items: center; justify-content: center; border: 1px dashed var(--accent); border-radius: inherit; background: var(--surface); color: var(--accent); pointer-events: none; }
#reseller-support-chat .composer.is-dragging .drop-indicator { display: flex; }
@keyframes rs-breathe { 50% { opacity: .35; } }
@keyframes rs-arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#reseller-support-chat .workspace { flex:1; min-height:0; height:auto; padding:0; }
#reseller-support-chat .composer-dock { display:flex; flex-direction:column; min-height:0; max-height:100%; padding-bottom:max(10px, env(safe-area-inset-bottom)); }
#reseller-support-chat .composer { display:flex; flex-direction:column; min-height:0; }
#reseller-support-chat .attachment { flex:0 1 auto; min-height:48px; }
#reseller-support-chat .message-input { flex:0 1 auto; color:var(--text); }
#reseller-support-chat .composer-actions, #reseller-support-chat .form-status.is-error { flex-shrink:0; }
#reseller-support-chat .request-field input { min-height:34px; border:0; border-radius:4px; background:transparent; font-size:11px; font-weight:400; }
#reseller-support-chat .send-button { color:var(--accent-ink); }
#reseller-support-chat .quiet-button { font-size:11px; color:var(--muted); }
#reseller-support-chat summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
html[data-theme="light"] #reseller-support-chat { --bg:#fafafa; --surface:#f5f5f5; --surface-strong:#eaeaea; --text:#202020; --text-soft:#505050; --muted:#676767; --line:#d7d7d7; --line-strong:#999; --danger:#a32323; }
@media (max-width:600px) {
  #reseller-root .reseller-tabs { gap:8px 17px; }
  #reseller-root.is-support-tab .reseller-tabs { margin-top:0; }
  #reseller-support-chat .welcome h2 { font-size:24px; }
  #reseller-support-chat .welcome p { max-width:240px; font-size:12px; }
  #reseller-support-chat .message { margin-bottom:24px; font-size:14px; }
  #reseller-support-chat .reply-text { font-size:14px; line-height:1.75; }
  #reseller-support-chat .message-user .message-body { max-width:92%; padding:11px 14px; }
  #reseller-support-chat .composer { padding:13px 12px 9px; border-radius:19px; }
  #reseller-support-chat .message-input { font-size:16px; }
  #reseller-support-chat .composer-actions { gap:6px; }
  #reseller-support-chat .attachment { max-height:180px; }
}
@media (prefers-reduced-motion:reduce) {
  #reseller-support-chat *, #reseller-support-chat *::before, #reseller-support-chat *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
@media (forced-colors:active) {
  #reseller-support-chat .send-button, #reseller-support-chat .composer { border:1px solid ButtonText; }
}