/* Layout for support controls only. Branding, fonts, colors, panels, fields and
   buttons come directly from the existing website's unmodified style.css. */
.support-contact{position:relative;z-index:1}
.support-contact .player-panel-shell{gap:24px}
.support-contact .page-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
@media(min-width:1025px){.support-contact>.player-panel-shell{padding-right:220px}}
.support-contact .page-heading h1{margin:0 0 12px;color:var(--gold-light);font-family:Cinzel,Georgia,serif;font-size:clamp(2rem,4vw,3.4rem)}
.support-contact .page-heading p{margin:0;color:var(--muted)}
.support-contact .eyebrow{color:var(--gold);font-size:.7rem;letter-spacing:.12em;margin-bottom:12px}
.support-contact .contact-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.support-contact .contact-toolbar>span{margin-inline-end:auto;color:var(--text-soft);font-size:.82rem}
.support-contact .contact-toolbar .field{grid-template-columns:auto 150px;align-items:center;margin:0}
.support-contact .contact-login{text-align:center;padding-block:42px}
.support-contact .contact-login p,.support-contact .subtle{color:var(--muted);font-size:.8rem}
.support-contact .empty{text-align:center;padding:32px}
.support-contact .form-card{display:grid;gap:20px}
.support-contact .field small{color:var(--muted);font-size:.75rem}
.support-contact .form-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:18px}
.support-contact .ticket-row{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:18px;align-items:center;text-decoration:none;padding:22px 0;border-top:1px solid var(--line)}
.support-contact .ticket-title{margin:8px 0;color:var(--gold-light);font-family:Cinzel,Georgia,serif;font-size:1rem;overflow-wrap:anywhere}
.support-contact .ticket-ref{color:var(--gold);font-size:.72rem;font-family:Consolas,monospace;letter-spacing:.04em}
.support-contact .ticket-meta{color:var(--muted);font-size:.78rem}
.support-contact .pill{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);background:var(--surface-soft);border-radius:var(--radius-sm);color:var(--gold-light);padding:7px 10px;font-size:.73rem;width:max-content}
.support-contact .pill.resolved{color:var(--success)}
.support-contact .link-back{color:var(--gold-light);font-size:.82rem;text-decoration:none}
.support-contact .message{padding:22px 0;border-bottom:1px solid var(--line)}
.support-contact .message:first-child{padding-top:0}
.support-contact .message header{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.support-contact .message header strong{font-size:.85rem;color:var(--gold-light)}
.support-contact .message header small{display:block;color:var(--muted);font-size:.72rem}
.support-contact .message p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;color:var(--text-soft);font-size:.9rem;unicode-bidi:plaintext}
.support-contact .avatar{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;color:var(--gold);background:var(--surface-solid);font-family:Cinzel,Georgia,serif}
.support-contact .composer{padding:24px 0}
.support-contact .composer label{color:var(--text-soft);font-size:.8rem;display:block;margin-bottom:8px}
.support-contact .composer textarea{width:100%;min-height:145px;resize:vertical;padding:11px 13px;border:1px solid var(--line);border-radius:8px;background:rgba(1,9,15,.72);color:var(--text)}
.support-contact .attachment-grid{display:flex;gap:12px;flex-wrap:wrap}
.support-contact .attachment-grid a{width:110px;height:90px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);overflow:hidden}
.support-contact .attachment-grid img{width:100%;height:100%;max-width:100%;object-fit:cover}
.support-contact .error-box{padding:18px;color:var(--danger);border:1px solid var(--danger);border-radius:var(--radius-sm);background:var(--surface);overflow-wrap:anywhere}
.support-contact button:disabled{opacity:.5;cursor:wait}
[dir=rtl] .support-contact .page-heading h1,[dir=rtl] .support-contact .ticket-title{font-family:inherit;letter-spacing:0}
@media(max-width:700px){.support-contact{padding-top:24px}.support-contact .contact-toolbar{gap:12px}.support-contact .contact-toolbar>span{width:100%}.support-contact .contact-toolbar .field{width:100%;grid-template-columns:1fr 150px}.support-contact .contact-toolbar>.button{flex:1;padding-inline:10px;font-size:.68rem}.support-contact .form-grid{grid-template-columns:1fr}.support-contact .ticket-row{grid-template-columns:1fr}.support-contact .form-actions .button{flex:1}.support-contact .page-heading{align-items:flex-start}.support-contact .message p{font-size:.85rem}}

.support-contact .avatar{overflow:hidden;flex-shrink:0}.support-contact .avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}

.support-contact .message .avatar img{width:36px;height:36px;min-width:36px;max-width:none;object-fit:cover;border-radius:50%}