/* VizzySMP support desk — layered on top of styles.css. */

.support-main{
  max-width:1180px;
  margin:0 auto;
  padding:0 5vw 100px;
}

/* ---- hero + search -------------------------------------------------- */

.support-hero{
  text-align:center;
  padding:78px 0 34px;
}
.support-hero h1{
  font-family:"Press Start 2P",monospace;
  font-size:33px;
  margin:0 0 18px;
  line-height:1.45;
  text-shadow:0 4px 0 #331a02;
}
.support-hero p{
  color:var(--muted);
  font-size:16px;
  margin:0 0 28px;
}
#support-search{
  width:min(560px,100%);
  background:#0a100c;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  padding:15px 18px;
  font:inherit;
  font-size:15px;
}
#support-search:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(240,138,18,.13)}
#support-search::placeholder{color:#6f776f}

.search-results{
  max-width:760px;
  margin:0 auto 54px;
  display:grid;
  gap:10px;
}
.no-results{
  color:var(--muted);
  text-align:center;
  font-size:14.5px;
  line-height:1.7;
  margin:0;
}
.search-categories{
  display:grid;
  gap:8px;
  margin-top:8px;
}
.search-categories a{
  background:rgba(240,138,18,.08);
  border:1px solid rgba(240,138,18,.35);
  border-radius:9px;
  padding:12px 16px;
  color:#ffd29a;
  font-size:14px;
}
.search-categories a:hover{background:rgba(240,138,18,.16)}

/* ---- sections ------------------------------------------------------- */

.support-section{margin-bottom:66px}
.support-heading{
  font-family:"Press Start 2P",monospace;
  font-size:16px;
  margin:0 0 24px;
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}
.support-heading small{
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:14px;
  color:var(--muted);
  font-weight:400;
}

/* ---- categories ----------------------------------------------------- */

.category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:18px;
}
.category-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px;
  display:flex;
  flex-direction:column;
  transition:.18s;
}
.category-card:hover{border-color:rgba(240,138,18,.45);transform:translateY(-3px)}
.category-icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  background:#0a100c;
  border:1px solid var(--line);
  border-radius:9px;
  font-size:20px;
  margin-bottom:16px;
}
.category-card h3{margin:0 0 8px;font-size:16.5px}
.category-card p{margin:0 0 18px;color:var(--muted);font-size:13.5px;line-height:1.6;flex:1}
.category-card a{color:var(--green2);font-size:13.5px}
.category-card a:hover{text-decoration:underline}

/* ---- logged-out callout --------------------------------------------- */

.login-callout{
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px 24px;
  margin-bottom:66px;
  flex-wrap:wrap;
}
.login-callout-icon{
  width:46px;height:46px;
  display:grid;place-items:center;
  background:#0a100c;
  border:1px solid var(--line);
  border-radius:9px;
  font-size:22px;
}
.login-callout div:nth-child(2){flex:1;min-width:200px}
.login-callout strong{display:block;font-size:16px;margin-bottom:3px}
.login-callout span{color:var(--muted);font-size:13.5px}

/* ---- ticket list ---------------------------------------------------- */

.ticket-list{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.ticket-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:.15s;
}
.ticket-row:last-child{border-bottom:none}
.ticket-row:hover{background:rgba(240,138,18,.05)}
.ticket-row strong{display:block;font-size:15px;margin-bottom:3px}
.ticket-row small{color:var(--muted);font-size:12.5px}
.empty{color:var(--muted);padding:26px 20px;font-size:14px;margin:0;text-align:center}

.pill{
  font-size:11px;
  padding:5px 10px;
  border-radius:20px;
  border:1px solid var(--line);
  text-transform:capitalize;
  white-space:nowrap;
}
.pill.open{border-color:rgba(240,138,18,.5);color:#ffd29a;background:rgba(240,138,18,.1)}
.pill.answered{border-color:rgba(88,101,242,.55);color:#c3caff;background:rgba(88,101,242,.12)}
.pill.waiting{border-color:rgba(255,255,255,.2);color:#c8ccc6}
.pill.resolved{border-color:rgba(59,165,93,.5);color:#8fe3aa;background:rgba(59,165,93,.1)}
.pill.closed{border-color:rgba(255,255,255,.14);color:#8b938b}

/* ---- articles ------------------------------------------------------- */

.article-grid{display:grid;gap:10px}
.article{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
.article summary{
  padding:15px 18px;
  cursor:pointer;
  font-size:15px;
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
}
.article summary::-webkit-details-marker{display:none}
.article summary::before{content:"▸";color:var(--green);transition:.15s}
.article[open] summary::before{transform:rotate(90deg)}
.article summary:hover{background:rgba(240,138,18,.05)}
.article > div{
  padding:0 18px 18px 40px;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}
.article strong{color:var(--text)}

/* ---- thread views --------------------------------------------------- */

.thread-view{padding:44px 0 0;max-width:840px;margin:0 auto}
.back-link{
  background:none;
  border:none;
  color:var(--muted);
  cursor:pointer;
  font-size:14px;
  padding:0 0 18px;
}
.back-link:hover{color:var(--green2)}

.thread-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px;
}
.thread-card h2{margin:0 0 8px;font-size:22px}
.thread-blurb{color:var(--muted);font-size:14px;margin:0 0 24px;line-height:1.6}

.thread-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  border-bottom:1px solid var(--line);
  padding-bottom:20px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.thread-id{
  font-family:"Press Start 2P",monospace;
  font-size:9px;
  color:var(--green);
  display:block;
  margin-bottom:10px;
}

.thread-card label{display:block;margin-bottom:18px}
.thread-card label > span{
  display:block;
  font-size:13.5px;
  margin-bottom:7px;
  color:#d7dbd4;
}
.thread-card input,.thread-card textarea{
  width:100%;
  background:#080d0a;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text);
  padding:12px 14px;
  font:inherit;
  resize:vertical;
}
.thread-card input:focus,.thread-card textarea:focus{outline:none;border-color:var(--green)}

.thread-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.thread-status{font-size:13.5px}
.thread-status.pending{color:var(--muted)}
.thread-status.error{color:#ff9d9f}

/* ---- messages ------------------------------------------------------- */

.thread-messages{
  display:grid;
  gap:14px;
  max-height:min(56vh,520px);
  overflow-y:auto;
  padding-right:6px;
  margin-bottom:24px;
}
.msg{
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  background:#0a100c;
}
.msg.staff{border-color:rgba(240,138,18,.4);background:rgba(240,138,18,.06)}
.msg.system{
  background:none;
  border:none;
  text-align:center;
  color:var(--muted);
  font-size:12.5px;
  padding:2px;
}
.msg-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  font-size:13.5px;
}
.msg-head time{color:#7d857d;font-size:12px;margin-left:auto}
.staff-tag{
  background:var(--green);
  color:#1a0e02;
  font-family:"Press Start 2P",monospace;
  font-size:7px;
  padding:4px 6px;
  border-radius:4px;
}
.msg-body{font-size:14.5px;line-height:1.7;color:#dfe3dc;word-break:break-word}

.reply-form textarea{margin-bottom:14px}

@media (max-width:720px){
  .support-hero{padding:46px 0 26px}
  .support-hero h1{font-size:22px}
  .thread-card{padding:20px}
  .ticket-row{flex-direction:column;align-items:flex-start}
}

/* ---------------------------------------------------------------- */
/* Minecraft heads                                                   */
/* ---------------------------------------------------------------- */

/* Rendered by mc-heads.net from the account's UUID. `pixelated` matters:
   a 64px skin head scaled with smoothing turns into mush. */
.mc-head{
  width:28px;
  height:28px;
  border-radius:5px;
  flex:none;
  image-rendering:pixelated;
  background:rgba(255,255,255,.05);
}
.mc-head.large{width:46px;height:46px;border-radius:7px}

/* The ticket rows are space-between, so the middle column takes the slack and
   the head stays pinned left with the status pill on the right. */
.ticket-row > div{flex:1;min-width:0}

/* The in-game name, when it differs from the Discord display name. */
.msg-ign{
  color:var(--green2);
  font-size:12px;
  background:rgba(240,138,18,.12);
  padding:2px 7px;
  border-radius:5px;
}

/* ---------------------------------------------------------------- */
/* "Which account is this about?" on the new-ticket form             */
/* ---------------------------------------------------------------- */

.ticket-mc{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:16px 18px;
  margin-bottom:18px;
  background:rgba(0,0,0,.24);
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .2s;
}
.ticket-mc.is-linked{border-color:rgba(240,138,18,.4)}
.ticket-mc-copy{flex:1;min-width:180px}
.ticket-mc-copy strong{display:block;font-size:14.5px;margin-bottom:3px}
.ticket-mc-copy p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.6}

.ticket-mc-form{display:flex;gap:8px;flex-wrap:wrap}
.ticket-mc-form input{
  background:#080d0a;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--text);
  padding:10px 13px;
  font:inherit;
  font-size:13.5px;
  width:210px;
}
.ticket-mc-form input:focus{outline:none;border-color:var(--green)}

#ticket-mc-status:empty{display:none}

@media (max-width:560px){
  .ticket-mc{align-items:flex-start}
  .ticket-mc-form{width:100%}
  .ticket-mc-form input{flex:1;width:auto}
}

/* ---------------------------------------------------------------- */
/* Closed tickets                                                    */
/* ---------------------------------------------------------------- */

/* Replaces the reply box once a ticket is finished. */
.thread-locked{
  margin:18px 0 0;
  padding:16px 18px;
  text-align:center;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.6;
  background:rgba(0,0,0,.24);
  border:1px dashed var(--line);
  border-radius:12px;
}

/* ---------------------------------------------------------------- */
/* A player's other tickets, in the staff thread view                */
/* ---------------------------------------------------------------- */

.thread-history{
  margin:0 0 16px;
  background:rgba(0,0,0,.22);
  border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden;
}
.thread-history summary{
  padding:12px 16px;
  cursor:pointer;
  color:var(--green2);
  font-size:13px;
  list-style:none;
}
.thread-history summary::-webkit-details-marker{display:none}
.thread-history summary::before{content:"▸ ";display:inline-block;transition:.15s}
.thread-history[open] summary::before{transform:rotate(90deg)}
.thread-history summary:hover{background:rgba(240,138,18,.06)}

.history-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  padding:11px 16px;
  background:none;
  border:none;
  border-top:1px solid rgba(255,255,255,.06);
  color:inherit;
  text-align:left;
  cursor:pointer;
  font:inherit;
}
.history-row:hover{background:rgba(240,138,18,.05)}
.history-row strong{display:block;font-size:13.5px;margin-bottom:2px}
.history-row small{color:var(--muted);font-size:12px}

/* The staff version of the locked notice carries the Reopen button. */
.thread-locked{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}