/* Support chat with the AVA team (support-chat.js) */
.sc { display: flex; flex-direction: column; min-height: 0; color: var(--ink, #1b2236); font-family: var(--font, system-ui, sans-serif); }
.sc-intro { padding: 14px 16px 10px; }
.sc-intro b, .sc-form > b { display: block; color: var(--navy, #1d2a47); font-size: 1rem; }
.sc-intro p { margin: 4px 0 10px; color: var(--muted, #4e5568); font-size: .84rem; line-height: 1.45; }
.sc-primary { padding: .65em 1.2em; border: 0; border-radius: 999px; background: var(--orange, #f39a1d); color: var(--navy-ink, #131c33); font: 700 .86rem var(--font, inherit); cursor: pointer; }
.sc-primary:disabled { opacity: .6; cursor: wait; }
.sc-link { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--navy, #1d2a47); font: 600 .8rem var(--font, inherit); cursor: pointer; }
.sc-link:hover { color: var(--orange-2, #e07f00); }
.sc-list { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 14px; overflow-y: auto; }
.sc-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--line, #dcdcdc); border-radius: 14px; background: #fff; text-align: left; font: inherit; cursor: pointer; }
.sc-item:hover { border-color: var(--orange, #f39a1d); }
.sc-item-top { display: flex; align-items: center; gap: 8px; color: var(--navy, #1d2a47); font-size: .85rem; }
.sc-item-last { overflow: hidden; color: var(--muted, #4e5568); font-size: .8rem; white-space: nowrap; text-overflow: ellipsis; }
.sc-status { padding: .1em .6em; border-radius: 999px; background: #eef0f5; color: var(--muted, #4e5568); font-size: .7rem; font-weight: 600; }
.sc-status.open { background: var(--warn-soft, #fff4d6); color: #7a5300; }
.sc-status.answered { background: var(--ok-soft, #e4f5ea); color: var(--ok, #1f8a4c); }
.sc-dot { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--bad, #c0392b); color: #fff; font-size: .7rem; font-weight: 700; text-align: center; }
.sc-muted { color: var(--muted, #4e5568); font-size: .85rem; }
.sc-form { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; overflow-y: auto; }
.sc-f { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--navy, #1d2a47); }
.sc-f input, .sc-f textarea { width: 100%; padding: .6em .8em; border: 1.5px solid var(--line, #dcdcdc); border-radius: 12px; font: 400 .88rem var(--font, inherit); resize: vertical; }
.sc-f input:focus, .sc-f textarea:focus, .sc-compose textarea:focus { border-color: var(--orange, #f39a1d); outline: none; }
.sc-f input[readonly] { background: #f5f6f8; color: var(--muted, #4e5568); }
.sc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.sc-prow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-attach { width: 38px; height: 38px; flex: none; border: 1.5px solid var(--line, #dcdcdc); border-radius: 50%; background: #fff; font-size: 1rem; cursor: pointer; }
.sc-attach:hover { border-color: var(--orange, #f39a1d); }
.sc-thumbs { display: flex; gap: 6px; }
.sc-thumbs[hidden] { display: none; }
.sc-thumb { position: relative; width: 48px; height: 48px; }
.sc-thumb img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
.sc-thumb button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--navy, #1d2a47); color: #fff; font-size: .75rem; line-height: 1; cursor: pointer; }
.sc-err { margin: 0; padding: .55em .8em; border-radius: 10px; background: var(--bad-soft, #fbe7e4); color: #8d2419; font-size: .8rem; }
.sc-err[hidden] { display: none; }
.sc-ok { margin: 10px 12px 0; padding: .6em .8em; border-radius: 10px; background: var(--ok-soft, #e4f5ea); color: #13623a; font-size: .8rem; }
.sc-thread { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.sc-thead { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-bottom: 1px solid var(--line, #dcdcdc); }
.sc-thead > div { display: flex; align-items: center; gap: 8px; color: var(--navy, #1d2a47); }
.sc-thead > .sup-info { display: block; color: var(--muted, #4e5568); }
.sc-log { flex: 1; min-height: 120px; padding: 12px; overflow-y: auto; background: #f4f5f7; }
.sc-msg { max-width: 85%; margin-bottom: 10px; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: 0 2px 8px rgba(29,42,71,.06); font-size: .88rem; line-height: 1.5; }
.sc-msg.me { margin-left: auto; border-radius: 16px 16px 4px 16px; background: var(--orange-soft, #fff1dc); }
.sc-msg p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-who { display: block; color: var(--muted, #4e5568); font-size: .68rem; }
.sc-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sc-imgs img { display: block; width: 92px; height: 92px; border-radius: 10px; background: #e7e9ee; object-fit: cover; }
.sc-sys { margin: 4px auto 0; color: var(--muted, #4e5568); font-size: .72rem; text-align: center; }
.sc-compose { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--line, #dcdcdc); background: #fff; }
.sc-row { display: flex; align-items: flex-end; gap: 6px; }
.sc-compose textarea { flex: 1; min-width: 0; max-height: 140px; padding: .55em .85em; border: 1.5px solid var(--line, #dcdcdc); border-radius: 18px; font: 400 .88rem var(--font, inherit); line-height: 1.4; resize: none; min-height: 40px; }
.sup-thread .sc-compose textarea { min-height: 76px; }
.sc-send { width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; background: var(--orange, #f39a1d); color: var(--navy-ink, #131c33); font-size: .95rem; cursor: pointer; }
.sc-send:disabled { opacity: .5; cursor: wait; }
.sc-admin-acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* Admin › Support */
.sup-wrap { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 14px; height: min(720px, calc(100vh - 200px)); min-height: 460px; }
.sup-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.sup-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line, #dcdcdc); border-radius: 12px; background: #fff; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.sup-item.active { border-color: var(--orange, #f39a1d); box-shadow: 0 0 0 2px var(--orange-soft, #fff1dc); }
.sup-last { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sup-thread { overflow: hidden; border: 1px solid var(--line, #dcdcdc); border-radius: 16px; background: #fff; }
.sup-thread .sc-thread { height: 100%; }
.sup-info { color: var(--muted, #4e5568); }
@media (max-width: 860px) { .sup-wrap { grid-template-columns: 1fr; height: auto; } .sup-list { max-height: 260px; } .sup-thread { height: 560px; } }