/* Help desk for partners and clients: the assistant, the ticket list and one conversation. Works inside the partner page and the client portal. */
.hd { display: grid; gap: 16px; max-width: 760px; }
.hd * { box-sizing: border-box; }
.hd-card { border: 1px solid var(--line, #e3e1da); border-radius: 14px; padding: 16px; background: var(--card, #fff); }
.hd h2, .hd h3 { margin: 0 0 6px; }
.hd .hd-muted { color: var(--muted, var(--ink2, #6b6a64)); font-size: 14px; }
.hd-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.hd-log { display: grid; gap: 8px; max-height: 340px; overflow: auto; margin: 10px 0; padding-right: 4px; }
.hd-b { max-width: 88%; padding: 9px 13px; border-radius: 14px; font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.hd-b.me { justify-self: end; background: var(--brand, var(--p, #EF4F0C)); color: #fff; border-bottom-right-radius: 4px; }
.hd-b.them { justify-self: start; background: var(--sub, var(--soft, #f1efe8)); color: var(--ink, #151514); border-bottom-left-radius: 4px; }
.hd-b small { display: block; opacity: .7; margin-top: 4px; font-size: 12px; }
.hd textarea, .hd input[type=text] { width: 100%; border: 1px solid var(--line, #d9d6cc); border-radius: 10px; padding: 10px 12px; font: inherit; background: var(--card, #fff); color: inherit; }
.hd textarea { resize: vertical; min-height: 84px; }
.hd label { display: block; font-size: 14px; margin: 10px 0 4px; }
.hd-btn { border: 0; border-radius: 10px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; background: var(--brand, var(--p, #EF4F0C)); color: #fff; }
.hd-btn.alt { background: transparent; color: inherit; border: 1px solid var(--line, #d9d6cc); }
.hd-btn:disabled { opacity: .55; cursor: default; }
.hd-btn:focus-visible, .hd textarea:focus-visible, .hd input:focus-visible, .hd-t:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand, var(--p, #EF4F0C)) 45%, transparent); outline-offset: 2px; }
.hd-t { display: flex; gap: 10px; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: 12px 4px; border: 0; border-top: 1px solid var(--line, #e3e1da); background: none; font: inherit; color: inherit; cursor: pointer; }
.hd-t:first-of-type { border-top: 0; }
.hd-t b { display: block; }
.hd-pill { font-size: 12px; padding: 2px 9px; border-radius: 99px; background: var(--sub, var(--soft, #f1efe8)); white-space: nowrap; }
.hd-pill.open { background: #fde8dd; color: #9a3412; } .hd-pill.pending { background: #e6f0ff; color: #1d4ed8; } .hd-pill.solved, .hd-pill.closed { background: #e4f4e8; color: #166534; }
.hd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand, var(--p, #EF4F0C)); margin-right: 6px; }
.hd-files { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.hd-chip { font-size: 12px; border: 1px solid var(--line, #d9d6cc); border-radius: 99px; padding: 3px 10px; background: transparent; color: inherit; cursor: pointer; }
.hd-err { color: #b42318; font-size: 14px; min-height: 1.2em; margin: 6px 0 0; }
@media (max-width: 520px) { .hd-b { max-width: 96%; } }