/* ---------- support ---------- */
#support-root{max-width:1200px; display:flex; flex-direction:column; gap:26px}
.faq{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:12px}
.faq details{background:#fff; border:3px solid var(--ink); border-radius:18px; padding:12px 16px; box-shadow:0 4px 0 var(--ink)}
.faq summary{cursor:pointer; font-weight:800; font-family:var(--display); font-size:16px}
.faq p{margin:10px 0 2px; color:var(--dim); line-height:1.55; font-size:14px}
.support-shell{display:grid; grid-template-columns:340px 1fr; gap:24px; align-items:start}
@media(max-width:900px){.support-shell{grid-template-columns:1fr}}
.ticket-list-wrap{background:#fff; border:3px solid var(--ink); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:16px; display:flex; flex-direction:column; gap:12px}
.ticket-list-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.ticket-list-head h3{font-size:20px}
.ticket-list{display:flex; flex-direction:column; gap:8px; max-height:520px; overflow-y:auto}
.ticket-row{text-align:left; background:var(--bg); border:2px solid var(--line); border-radius:14px; padding:10px 12px; cursor:pointer; font:inherit; color:var(--ink); display:flex; flex-direction:column; gap:6px; transition:transform .12s}
.ticket-row:hover{transform:translateX(3px); border-color:var(--ink)}
.ticket-row.active{border-color:var(--ink); background:var(--yellow); box-shadow:0 3px 0 var(--ink)}
.ticket-top{display:flex; justify-content:space-between; align-items:center; gap:8px}
.ticket-top b{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ticket-row.unread .ticket-top b{font-weight:800}
.dot{width:10px; height:10px; border-radius:50%; background:var(--pink); border:2px solid var(--ink); flex:0 0 auto}
.ticket-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12px; color:var(--dim); font-weight:600}
.ticket-meta .pillx{font-size:10px; padding:2px 8px}
.ticket-pane{min-height:320px}
.ticket-pane .panel{max-width:640px}
.thread-head{display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-bottom:14px}
.thread-head h3{font-size:24px; margin-bottom:6px}
.thread{display:flex; flex-direction:column; gap:12px; max-height:460px; overflow-y:auto; padding:6px 4px 14px}
.bubble{max-width:82%; border:2.5px solid var(--ink); border-radius:20px; padding:10px 14px; background:#fff; box-shadow:0 3px 0 var(--ink)}
.bubble.mine{align-self:flex-end; background:var(--sky); border-bottom-right-radius:6px}
.bubble.theirs{align-self:flex-start; border-bottom-left-radius:6px}
.bubble.staff:not(.mine){background:var(--mint)}
.bubble-who{font-size:11.5px; font-weight:800; margin-bottom:3px} .bubble-who span{font-weight:600; color:var(--dim); margin-left:6px}
.bubble-body{line-height:1.5; font-size:14.5px; word-break:break-word}
.bubble-img{max-width:100%; max-height:240px; border-radius:12px; border:2px solid var(--ink); margin-top:8px; display:block}
.reply-form{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.reply-form textarea,.reply-form select{width:100%}
.reply-row{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.ctx{background:rgba(255,255,255,.8); border:2px dashed var(--ink); border-radius:16px; padding:12px 14px; margin-bottom:12px; display:flex; flex-direction:column; gap:10px}
.ctx-grid{display:flex; gap:22px; flex-wrap:wrap} .ctx-grid div{display:flex; flex-direction:column; font-size:13px} .ctx-grid b{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim)}
.ctx-actions{display:flex; gap:8px}

.nav-badge{position:absolute; top:4px; right:10px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--pink); color:#fff; border:2px solid var(--ink); font-style:normal; font-size:10px; font-weight:800; display:grid; place-items:center}