[data-panel="support"] button { min-height: 34px; border: 1px solid #dce2e5; border-radius: 6px; padding: 0 10px; background: #fff; color: #24332e; cursor: pointer; }
[data-panel="support"] button:disabled { opacity: .5; cursor: default; }
[data-panel="support"] [hidden], #supportAdminUnread[hidden] { display: none !important; }
.support-admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.support-admin-toolbar input[type="search"], .support-admin-toolbar select { min-height: 36px; max-width: 100%; border: 1px solid #dce2e5; border-radius: 6px; padding: 0 10px; background: #fff; color: #24332e; }
.support-admin-toolbar label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.support-admin-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: max(520px, calc(100dvh - 220px)); border: 1px solid #dce2e5; background: #fff; }
.support-admin-sidebar { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid #dce2e5; }
#supportThreadList { overflow-y: auto; flex: 1; min-height: 0; }
[data-panel="support"] .support-thread { position: relative; display: block; border: 0; border-radius: 0; border-bottom: 1px solid #edf0ee; width: 100%; text-align: left; padding: 12px; }
[data-panel="support"] .support-thread.active { background: #e9f6ef; box-shadow: inset 3px 0 #16634c; }
.support-thread strong { font-size: 14px; padding-right: 40px; }
.support-thread p { font-size: 13px; color: #5d6d65; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 6px 0; }
.support-thread small { font-size: 11px; color: #78827d; }
.support-thread-unread, #supportAdminUnread { border-radius: 12px; background: #b93636; color: #fff; font-size: 11px; padding: 2px 6px; }
.support-thread-unread { position: absolute; right: 12px; top: 12px; }
.support-thread-pages { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid #dce2e5; }
.support-admin-conversation { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #f7f9f8; }
.support-admin-conversation header { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #dce2e5; background: #fff; }
.support-admin-conversation header strong { flex: 1 1 150px; min-width: 140px; overflow-wrap: anywhere; }
#supportAdminMessages { min-height: 0; flex: 1; overflow-y: auto; padding: 16px; }
.support-admin-conversation .support-message { width: fit-content; max-width: 85%; margin-bottom: 14px; }
.support-admin-conversation .support-message.mine { margin-left: auto; }
.support-admin-conversation .support-message small { display: block; color: #68746f; font-size: 11px; line-height: 1.5; margin-bottom: 4px; overflow-wrap: anywhere; }
.support-admin-conversation .support-message p { padding: 10px 12px; border: 1px solid #e1e7e4; border-radius: 6px; margin: 0; background: #fff; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; }
.support-admin-conversation .support-message.mine p { background: #e9f6ef; border-color: #cbe4d5; }
#supportReplyForm { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 8px; background: #fff; border-top: 1px solid #dce2e5; }
#supportReplyBody { box-sizing: border-box; flex: 1; min-width: 0; width: 0; height: 36px; min-height: 36px; max-height: 36px; border: 1px solid #dce2e5; border-radius: 6px; padding: 7px 8px; resize: none; font: inherit; font-size: 14px; line-height: 20px; color: #24332e; background: #fff; }
#supportReplyForm button { min-width: 52px; min-height: 36px; padding: 0 8px; background: #16634c; color: #fff; border-color: #16634c; }
#supportAdminError { font-size: 13px; color: #a82e2e; overflow-wrap: anywhere; }
#supportAdminOlder, #supportAdminNew { align-self: center; margin: 6px; }
.support-admin-empty { text-align: center; color: #78827d; font-size: 14px; }
@media (max-width: 900px) {
  .support-admin-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
  .support-admin-sidebar { border-right: 0; border-bottom: 1px solid #dce2e5; height: max(480px, calc(100dvh - 240px)); }
  #supportThreadList { min-height: 80px; }
  .support-admin-conversation { height: max(480px, calc(100dvh - 120px)); }
  .support-admin-layout:not(.has-thread) .support-admin-conversation { display: none; }
  .support-admin-layout.has-thread .support-admin-sidebar { display: none; }
  #supportThreadBack { display: block !important; font-size: 26px; padding: 0 8px; }
}
#supportThreadBack { display: none; }
.support-composer-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; position: relative; min-height: 36px; }
#supportReplyForm .support-composer-tools button { min-width: 36px; background: #fff; color: #44564d; border-color: #dce2e5; }
#supportAdminEmoji { font-size: 22px; padding: 0 8px; }
.support-emoji-picker { position: absolute; bottom: 44px; left: 0; display: grid; grid-template-columns: repeat(6, 36px); gap: 4px; border: 1px solid #dce2e5; border-radius: 6px; padding: 8px; background: #fff; z-index: 2; box-shadow: 0 4px 16px rgb(0 0 0 / 10%); }
[data-panel="support"] .support-emoji-picker button { border: 0; padding: 0; font-size: 22px; width: 36px; height: 36px; }
.support-draft-photo { position: absolute; bottom: 48px; left: 0; width: 66px; height: 54px; padding: 4px; background: #fff; border: 1px solid #dce2e5; border-radius: 6px; }
.support-draft-photo img { width: 66px; height: 54px; object-fit: contain; background: #f4f7f5; }
#supportReplyForm .support-draft-photo button { position: absolute; right: -4px; top: -5px; min-width: 22px; width: 22px; min-height: 22px; height: 22px; padding: 0; border-radius: 50%; font-size: 18px; background: #fff; }
[data-panel="support"] .support-message-image { display: flex; align-items: center; justify-content: center; margin-top: 4px; width: 260px; max-width: 100%; height: 200px; padding: 0; background: #fff; overflow: hidden; }
.support-message-image img { width: 100%; height: 100%; object-fit: contain; }
.support-admin-conversation .support-delivery { text-align: right; margin-top: 4px; }
.support-dispatch-dialog { box-sizing: border-box; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border: 1px solid #dce2e5; border-radius: 8px; }
.support-dispatch-dialog::backdrop { background: rgb(0 0 0 / 42%); }
.support-dispatch-dialog form, .support-dispatch-dialog label { display: grid; gap: 8px; }
.support-dispatch-dialog form { gap: 16px; }
.support-dispatch-dialog h2 { margin: 0; font-size: 18px; }
.support-dispatch-dialog input, .support-dispatch-dialog select, .support-dispatch-dialog textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px; border: 1px solid #dce2e5; border-radius: 6px; font: inherit; }
.support-dispatch-dialog textarea { resize: vertical; }
.support-dispatch-dialog [hidden] { display: none; }
.support-dispatch-dialog output { font-size: 13px; overflow-wrap: anywhere; }
.support-dispatch-actions { display: flex; justify-content: flex-end; gap: 8px; }
.support-dispatch-actions button { min-height: 36px; padding: 0 16px; border: 1px solid #dce2e5; border-radius: 6px; background: #fff; }
.support-dispatch-actions button[type="submit"] { color: #fff; background: #16634c; border-color: #16634c; }
.support-admin-conversation header { flex-wrap: wrap; }
#supportClearBtn { color: #b93636; }
