* { box-sizing: border-box; }
[hidden] { display: none !important; }
html.auth-pending body { opacity: 0; pointer-events: none; }
body { margin: 0; background: var(--sia-bg); color: var(--sia-text); font: 15px/1.55 Inter,system-ui,sans-serif; }
button,input,select,textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
button:focus-visible,a:focus-visible,input:focus,textarea:focus,select:focus { outline: 3px solid var(--sia-teal); outline-offset: 3px; }
.app-shell { display: flex; align-items: flex-start; min-height: 100vh; }
.sidebar { width: 332px; min-width: 332px; margin: 18px 0 18px 18px; padding: 22px 18px 16px; height: calc(100vh - 36px); position: sticky; top: 18px; overflow-y: auto; background: linear-gradient(180deg, #f8fdff 0%, #f2fbfd 56%, #eef8fb 100%); border: 1px solid #d8edf0; border-radius: 30px; box-shadow: 0 10px 26px rgba(16, 72, 79, .08); display: flex; flex-direction: column; gap: 16px; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: #d7e9ee; border-radius: 999px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px 12px 4px; }
.brand-logo { width: 136px; height: auto; display: block; }
.brand-name { font-size: 3.05rem; font-weight: 700; line-height: .95; color: var(--sia-heading); letter-spacing: -.03em; }
.brand-name span,.brand-name b { display: block; }
.brand-name b { color: #24b7ad; font-weight: 700; letter-spacing: -.02em; }
.sidebar-section-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; color: var(--sia-muted); margin: 6px 0 2px; padding: 0 12px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar-nav a { display: flex; align-items: center; padding: 13px 14px; gap: 14px; border-radius: 22px; color: #1b3043; font-size: 1rem; font-weight: 500; text-decoration: none; transition: background .2s ease, color .2s ease; }
.sidebar-nav a:hover,.sidebar-nav a.active { color: #12a4a0; background: #e9f8f8; }
.sidebar-nav a.active { font-weight: 600; }
.sidebar-nav a svg { width: 28px; height: 28px; flex: 0 0 28px; fill: none; stroke: #698390; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-nav a:hover svg,.sidebar-nav a.active svg { stroke: #14afa8; }
.sidebar-user { display: flex; align-items: center; gap: 14px; margin-top: auto; min-width: 0; padding: 18px 8px 8px; border-top: 1px solid #d7e8ee; position: relative; }
.sidebar-user .avatar { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; background: linear-gradient(140deg, #34bdbb 0%, #0f8f90 100%); color: #fff; display: grid; place-items: center; font-size: 1.15rem; font-weight: 800; line-height: 1; }
.sidebar-user .user-meta { min-width: 0; flex: 1; overflow: hidden; }
.sidebar-user .user-meta strong,.sidebar-user .user-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.sidebar-user .user-meta strong { color: #192d40; font-size: .94rem; font-weight: 800; }
.sidebar-user .user-meta span { color: #178f8f; font-size: .82rem; font-weight: 600; margin-top: 2px; }
.sidebar-user-menu { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; border: 1px solid #c9dfe4; border-radius: 50%; background: #eef8fb; color: #6d8695; font-size: 1.35rem; line-height: 1; }
.sidebar-user-menu:hover { background: #e6f4f8; color: #4a6778; }
.sidebar-account-menu { position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 220px; padding: 8px; border: 1px solid #cfe3e8; border-radius: 16px; background: #fff; box-shadow: 0 16px 35px rgba(25, 69, 82, .16); display: none; z-index: 30; }
.sidebar-user.account-menu-open .sidebar-account-menu { display: block; }
.sidebar-account-menu-item { display: block; width: 100%; border: 0; border-radius: 12px; background: transparent; color: #183247; font-size: .9rem; font-weight: 700; text-align: left; padding: 10px 12px; }
.sidebar-account-menu-item:hover { background: #eef8fa; color: #108f8d; }
.sidebar-logout-btn { margin-top: 10px; width: 100%; border: 1px solid #cfe2e7; border-radius: 999px; padding: 8px 12px; font-size: .8rem; font-weight: 600; background: #f8feff; color: #1f4b63; }
.sidebar-logout-btn:hover { background: #ecf7fa; }
.main { flex: 1; min-width: 0; padding: 40px 32px; max-width: 1600px; }
h1,h2 { color: var(--sia-heading); line-height: 1.15; }
h1 { margin: 0; font-size: 40px; font-weight: 850; }
h2 { font-size: 20px; margin: 0 0 12px; }
p { margin: 8px 0; }
.support-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.support-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.muted,small { color: var(--sia-muted); }
.support-status { padding: 10px 0; overflow-wrap: anywhere; }
.support-status.is-error { color: var(--sia-danger); }
.support-workspace { display: grid; grid-template-columns: 280px minmax(0,1fr); overflow: hidden; min-height: 560px; }
.conversation-list-panel { border-right: 1px solid var(--sia-line); padding-bottom: 20px; min-width: 0; }
.list-header { padding: 24px 20px 16px; border-bottom: 1px solid var(--sia-line); }
.list-header select { width: 100%; }
.conversation-list { max-height: 650px; overflow-y: auto; }
.conversation-list p { padding: 20px; }
.conversation-item { width: 100%; border: 0; border-bottom: 1px solid var(--sia-line); text-align: left; padding: 20px; background: var(--sia-surface); color: var(--sia-text); }
.conversation-item.active,.conversation-item:hover { background: var(--sia-teal-soft); }
.conversation-item strong { display: block; overflow-wrap: anywhere; margin-bottom: 8px; }
.conversation-item small { display: block; }
.conversation-item.unread strong:before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sia-teal); margin-right: 8px; }
.conversation-empty { padding: 48px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--sia-muted); }
.conversation-empty h2 { margin-top: 24px; }
.empty-icon { width: 64px; height: 64px; border-radius: 20px; background: var(--sia-teal-soft); color: var(--sia-teal-dark); display: grid; place-items: center; font-size: 32px; }
.thread { display: flex; flex-direction: column; min-width: 0; }
.thread-header { padding: 24px; border-bottom: 1px solid var(--sia-line); }
.thread-header h2,.thread-header p { overflow-wrap: anywhere; }
.status-pill { background: var(--sia-teal-soft); color: var(--sia-teal-dark); padding: 4px 10px; border-radius: 999px; display: inline-block; font-size: 12px; font-weight: 700; margin-top: 8px; }
.message-scroll { flex: 1; min-height: 200px; max-height: 420px; overflow-y: auto; padding: 24px; background: var(--sia-surface-soft); }
.message-scroll #messages { display: flex; flex-direction: column; }
.message { max-width: 94%; margin: 0 0 20px; border-left: 3px solid var(--sia-line-strong); padding: 0 0 0 14px; overflow-wrap: anywhere; }
.message.staff { border-color: var(--sia-teal); }
.message:not(.mine) { align-self: flex-end; border-left: 0; border-right: 3px solid var(--sia-line-strong); padding: 0 14px 0 0; text-align: right; }
.message.staff:not(.mine) { border-right-color: var(--sia-teal); }
.message p { white-space: pre-wrap; }
.message strong { color: var(--sia-heading); font-size: 13px; }
.message time { display: block; font-size: 12px; color: var(--sia-muted); }
.message a { color: var(--sia-teal-dark); }
.reply-form { border-top: 1px solid var(--sia-line); padding: 20px 24px; }
.reply-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; }
.attachment-control { position: relative; border: 1px solid var(--sia-line-strong); border-radius: 14px; min-height: 44px; padding: 10px 12px; cursor: pointer; overflow: hidden; font-size: 13px; }
.attachment-control input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
input,textarea,select { width: 100%; background: var(--sia-surface); color: var(--sia-text); border: 1px solid var(--sia-line-strong); border-radius: 14px; padding: 12px 14px; margin-top: 6px; min-height: 48px; }
textarea { resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--sia-muted) 50%),linear-gradient(135deg,var(--sia-muted) 50%,transparent 50%); background-position: calc(100% - 18px) 22px,calc(100% - 13px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.new-panel { padding: 28px; margin-bottom: 24px; }
.new-panel header { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.inline-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inline-controls input { flex: 1; min-width: 160px; }
#staffControls label { margin: 0; flex: 1; min-width: 170px; }
#backToList { display: none; margin-bottom: 12px; }
#moreConversations { margin: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1190px) { .main { padding: 32px 20px; } .support-workspace { grid-template-columns: 210px minmax(0,1fr); } .thread-header,.reply-form,.message-scroll { padding: 16px; } .support-page-heading { align-items: flex-start; flex-direction: column; } .support-heading-actions { justify-content: flex-start; } }
@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar { width: auto; min-width: 0; height: auto; margin: 10px; padding: 12px 14px; top: 0; z-index: 5; border-radius: 24px; }
  .brand { display: flex; align-items: center; gap: 10px; padding: 0 0 10px; text-align: left; }
  .brand-logo { width: 44px; }
  .brand-name { font-size: 20px; letter-spacing: -.5px; margin: 0; }
  .brand-name span,.brand-name b { display: inline; }
  .brand-name b { margin-left: 6px; }
  .sidebar-nav { flex-direction: row; overflow-x: auto; flex-wrap: nowrap; }
  .sidebar-nav a { padding: 10px 12px; font-size: 14px; flex-shrink: 0; }
  .sidebar-nav a svg { width: 22px; height: 22px; flex-basis: 22px; }
  .sidebar-section-label,.sidebar-user { display: none; }
  .main { padding: 24px 16px; }
  h1 { font-size: 34px; }
  .support-page-heading { flex-direction: column; align-items: stretch; }
  .support-heading-actions { justify-content: flex-start; flex-wrap: wrap; }
  .support-workspace { display: block; min-height: 360px; }
  .conversation-list-panel { border-right: 0; }
  .thread-open .conversation-list-panel { display: none; }
  .thread-open #backToList { display: inline-flex; }
  .thread-header,.reply-form,.message-scroll { padding: 20px 16px; }
  .message-scroll { max-height: 50vh; }
  .new-panel { padding: 20px 16px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .new-panel button[type=submit] { width: 100%; }
  .conversation-empty { padding: 32px 20px; }
}