/* Operate: the thread and the full company editor share a bounded working surface. */
#view-support { max-width: none; }
.support-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.support-heading h2 { margin: 0; }
#support-sync { margin-left: auto; color: var(--ink-secondary); font-size: .8125rem; }
.support-workspace { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(330px, 1.3fr) minmax(340px, 1fr); height: calc(100dvh - 210px); min-height: 520px; border: 1px solid var(--rule); background: var(--paper-lit); }
.support-queue, .support-profile { overflow: auto; padding: 16px; min-width: 0; }
.support-queue { border-right: 1px solid var(--rule); background: var(--paper); }
.support-queue label { display: block; margin-bottom: 12px; }
.support-queue input, .support-queue select { width: 100%; min-width: 0; }
#support-list { margin: 16px -16px 0; }
.support-item { display: flex; flex-direction: column; gap: 6px; padding: 16px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--rule); background: transparent; text-transform: none; letter-spacing: normal; white-space: normal; font-family: inherit; }
.support-item span, .support-item small { color: var(--ink-secondary); }
.support-item.selected { background: var(--pula-tint); outline: 1px solid var(--pula); outline-offset: -1px; }
.support-item:hover { background: var(--paper-sunk); color: var(--ink); }
.support-item:focus-visible { outline: 2px solid var(--pula); outline-offset: -3px; }
.support-preview { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.support-pages { display: flex; justify-content: space-between; margin-top: 16px; gap: 8px; }
.support-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#support-contact { padding: 16px 20px 0; }
#support-contact h3 { margin: 0 0 6px; }
#support-contact p { margin: 6px 0; }
#support-actions { padding: 8px 20px; gap: 8px; margin: 0; }
#support-actions button { font-size: .8125rem; }
#support-messages { overflow: auto; flex: 1; min-height: 120px; padding: 20px; background: var(--paper); border-block: 1px solid var(--rule); }
.support-message { max-width: 92%; width: fit-content; padding: 12px; margin-bottom: 16px; background: var(--paper-lit); overflow-wrap: anywhere; }
.support-message.outbound { margin-left: auto; background: var(--pula); color: var(--paper-lit); }
.support-message p { white-space: pre-wrap; margin: 6px 0; font-size: .9375rem; line-height: 1.5; }
.support-message-meta, .support-message small { font-size: .75rem; }
#support-compose { padding: 16px 20px; }
#support-compose label { display: block; margin-bottom: 6px; }
#support-reply { width: 100%; resize: vertical; max-height: 180px; min-height: 72px; box-sizing: border-box; }
#support-window { margin: 8px 0; }
.support-profile { border-left: 1px solid var(--rule); }
.support-profile > h3 { margin-top: 0; }
.support-profile #company-detail { display: block; }
.support-profile .card { padding: 12px 0; border: 0; border-bottom: 1px solid var(--rule); margin: 0 0 16px; }
.support-profile .grid-form { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.support-profile .grid-form .wide { grid-column: 1 / -1; }
.support-profile input, .support-profile select, .support-profile textarea { max-width: 100%; min-width: 0; width: 100%; box-sizing: border-box; }
.support-profile dl { display: block; }
.support-profile dd { margin: 4px 0 12px; overflow-wrap: anywhere; }
.support-profile .scroller { max-width: 100%; overflow: auto; }
.support-profile .editor { margin-top: 16px; }
.support-profile summary { cursor: pointer; }
@media (min-width: 1600px) { .support-profile .grid-form { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 1100px) {
 .support-workspace { grid-template-columns: 220px minmax(0,1fr); height: auto; min-height: 0; }
 .support-thread { height: 650px; }
 .support-queue { max-height: 650px; }
 .support-profile { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--rule); max-height: 700px; }
 .support-profile .grid-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
 .support-workspace { display: block; }
 .support-queue { max-height: 320px; border-right: 0; border-bottom: 1px solid var(--rule); }
 .support-thread { height: 650px; }
 .support-profile .grid-form { grid-template-columns: minmax(0,1fr); }
 .support-heading { gap: 8px; }
 #support-sync { margin-left: 0; }
 #support-contact, #support-compose { padding-inline: 12px; }
}

.support-profile #company-detail > .card:first-child > dl { display: none; }
.support-profile #company-detail > .card:first-child > h3 { font-size: .9375rem; margin-top: 0; }

#support-attachment-dialog { width: min(900px, 92vw); max-height: 90dvh; padding: 20px; background: var(--paper-lit); border: 1px solid var(--ink); }
#support-attachment-dialog::backdrop { background: #0008; }
#support-attachment-content img, #support-attachment-content video { display: block; max-width: 100%; max-height: 68dvh; margin: 0 auto 16px; }
#support-attachment-content iframe { width: 100%; height: 65dvh; border: 0; display: block; }
#support-attachment-content audio { display: block; width: 100%; margin-bottom: 16px; }