:root{
  --bg:#05070d;
  --surface:#0a1020;
  --surface-2:#0e1729;
  --fg:#f3f7ff;
  --muted:#98a6ba;
  --muted-2:#627089;
  --line:rgba(148,163,184,.16);
  --line-strong:rgba(0,229,255,.28);
  --cyan:#00e5ff;
  --green:#38f8b6;
  --danger:#ff6b7a;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --font:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font-family:var(--font);overflow-x:hidden}
button,input,textarea{font:inherit}
button{color:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:1rem;top:-5rem;z-index:100;padding:.75rem 1rem;background:var(--cyan);color:#001216;text-decoration:none;border-radius:6px;font-weight:800}
.skip-link:focus{top:1rem}

.ambient-grid{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(0,229,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.025) 1px,transparent 1px),radial-gradient(circle at 78% 20%,rgba(0,229,255,.12),transparent 34%);background-size:48px 48px,48px 48px,100% 100%;mask-image:linear-gradient(to bottom,#000 0%,transparent 88%)}

.support-topbar{height:72px;padding:0 clamp(1rem,4vw,4rem);display:flex;align-items:center;border-bottom:1px solid var(--line);background:rgba(5,7,13,.82);backdrop-filter:blur(24px);position:relative;z-index:2}
.support-brand{display:flex;align-items:center;gap:.7rem;color:var(--fg);text-decoration:none;font-family:var(--mono);font-size:.8rem;font-weight:800;letter-spacing:.2em}
.brand-dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px rgba(0,229,255,.95),0 0 32px rgba(0,229,255,.46)}
.brand-slash{color:var(--muted-2)}
.topbar-status{margin-left:auto;display:flex;align-items:center;gap:.5rem;color:var(--muted);font:600 .72rem var(--mono);letter-spacing:.08em}
.status-dot,.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px rgba(56,248,182,.75)}
.back-home{margin-left:1.5rem;padding:.62rem .9rem;border:1px solid var(--line);border-radius:999px;color:var(--fg);text-decoration:none;font:600 .7rem var(--mono);transition:.2s}
.back-home:hover,.back-home:focus-visible{border-color:var(--cyan);color:var(--cyan);outline:none}

.support-page{width:min(1480px,100%);min-height:calc(100vh - 72px);margin:0 auto;padding:clamp(2rem,5vw,5rem) clamp(1rem,4vw,4rem);display:grid;grid-template-columns:minmax(260px,390px) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center;position:relative;z-index:1}
.support-intro{align-self:center}
.eyebrow,.chat-kicker,.gate-kicker{margin:0;color:var(--cyan);font:700 .7rem var(--mono);letter-spacing:.16em}
.support-intro h1{margin:1.1rem 0 1.3rem;font-size:clamp(2.4rem,5vw,5.1rem);line-height:.98;letter-spacing:-.055em;font-weight:760}
.support-intro h1 span{color:transparent;-webkit-text-stroke:1px rgba(243,247,255,.68);font-style:italic}
.intro-copy{max-width:34rem;margin:0;color:var(--muted);font-size:.98rem;line-height:1.9}
.service-facts{margin:2.1rem 0 0;display:grid;gap:.75rem}
.service-facts div{display:grid;grid-template-columns:2.5rem 1fr;gap:.8rem;padding:1rem 0;border-top:1px solid var(--line)}
.service-facts dt{color:var(--cyan);font:700 .7rem var(--mono);padding-top:.18rem}
.service-facts dd{margin:0;display:grid;gap:.2rem}
.service-facts strong{font-size:.9rem}
.service-facts span{color:var(--muted-2);font-size:.78rem}
.privacy-note{margin-top:1.5rem;display:grid;grid-template-columns:1.6rem 1fr;gap:.75rem;padding:.9rem;border:1px solid var(--line);background:rgba(10,16,32,.56)}
.privacy-note>span{width:1.35rem;height:1.35rem;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;color:var(--cyan);font:700 .68rem var(--mono)}
.privacy-note p{margin:0;color:var(--muted-2);font-size:.72rem;line-height:1.65}

.chat-card{height:min(790px,calc(100vh - 120px));min-height:620px;border:1px solid var(--line);background:rgba(7,12,23,.91);box-shadow:0 30px 90px rgba(0,0,0,.42),0 0 0 1px rgba(0,229,255,.025) inset;backdrop-filter:blur(24px);display:flex;flex-direction:column;position:relative;overflow:hidden}
.chat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--cyan),transparent 42%,var(--green));opacity:.8}
.chat-header{min-height:88px;padding:1rem 1.25rem;display:flex;align-items:center;gap:.85rem;border-bottom:1px solid var(--line);background:rgba(14,23,41,.72)}
.agent-avatar{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-strong);background:rgba(0,229,255,.08);color:var(--cyan);font-weight:800;flex:0 0 auto}
.chat-header h2{margin:.15rem 0 .2rem;font-size:1rem;letter-spacing:.01em}
.chat-header p{margin:0;color:var(--muted-2);font-size:.7rem}
.chat-header p:last-child{display:flex;align-items:center;gap:.4rem}
.refresh-button{margin-left:auto;width:38px;height:38px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:1.1rem;transition:.2s}
.refresh-button:hover,.refresh-button:focus-visible{border-color:var(--cyan);color:var(--cyan);outline:none;transform:rotate(15deg)}
.alert{margin:.75rem 1rem 0;padding:.72rem .85rem;border:1px solid rgba(255,107,122,.34);background:rgba(255,107,122,.08);color:#ffc1c8;font-size:.78rem;line-height:1.5}
.alert.is-info{border-color:rgba(0,229,255,.3);background:rgba(0,229,255,.07);color:#bff8ff}

.identity-gate{flex:1;display:grid;place-items:center;padding:clamp(1.2rem,4vw,3rem);overflow:auto}
.identity-form{width:min(440px,100%);position:relative}
.gate-mark{position:absolute;right:0;top:-1.2rem;color:rgba(0,229,255,.08);font:800 6rem/1 var(--mono);pointer-events:none}
.identity-form h3{margin:.65rem 0 .55rem;font-size:1.65rem;letter-spacing:-.035em;position:relative}
.gate-copy{margin:0 0 1.4rem;color:var(--muted);font-size:.82rem;line-height:1.7;position:relative}
.identity-form label{display:block;margin:.85rem 0 .42rem;color:var(--muted);font:700 .68rem var(--mono);letter-spacing:.08em}
.identity-form input{width:100%;height:48px;padding:0 .85rem;border:1px solid var(--line);border-radius:0;background:rgba(5,7,13,.72);color:var(--fg);outline:none;transition:.18s}
.identity-form input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.08)}
.identity-form input::placeholder{color:#4d5b70}
.start-button,.send-button{border:1px solid var(--cyan);background:var(--cyan);color:#001216;font-weight:800;cursor:pointer;transition:.18s}
.start-button{width:100%;height:48px;margin-top:1.15rem;display:flex;align-items:center;justify-content:center;gap:.6rem}
.start-button:hover,.start-button:focus-visible,.send-button:hover,.send-button:focus-visible{background:#7ef4ff;box-shadow:0 0 24px rgba(0,229,255,.18);outline:none}
.start-button:disabled,.send-button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.form-footnote{margin:.8rem 0 0;color:var(--muted-2);font-size:.67rem;line-height:1.55;text-align:center}

.conversation{flex:1;min-height:0;display:flex;flex-direction:column}
.message-scroll{flex:1;min-height:0;padding:1.25rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:rgba(0,229,255,.25) transparent}
.empty-state{min-height:100%;display:grid;place-content:center;justify-items:center;gap:.4rem;color:var(--muted-2);text-align:center}
.empty-state div{font:800 2rem var(--mono);color:rgba(0,229,255,.25)}
.empty-state strong{color:var(--muted);font-size:.86rem}
.empty-state span{font-size:.74rem}
.message-row{display:flex;align-items:flex-end;gap:.55rem;margin:.9rem 0;max-width:82%}
.message-row.is-user{margin-left:auto;flex-direction:row-reverse}
.message-avatar{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);font:700 .62rem var(--mono);flex:0 0 auto}
.message-row.is-admin .message-avatar{border-color:rgba(0,229,255,.28);color:var(--cyan)}
.message-content{min-width:0}
.message-meta{display:flex;align-items:center;gap:.55rem;margin:0 0 .28rem;color:var(--muted-2);font-size:.64rem}
.message-row.is-user .message-meta{justify-content:flex-end}
.message-meta strong{color:var(--muted);font-weight:650}
.message-bubble{padding:.72rem .85rem;border:1px solid var(--line);background:var(--surface-2);color:#e8eef9;font-size:.83rem;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.message-row.is-user .message-bubble{border-color:rgba(0,229,255,.24);background:rgba(0,229,255,.08)}
.message-bubble a{display:block;margin-top:.55rem}
.message-bubble img{display:block;max-width:min(360px,100%);max-height:260px;object-fit:contain;border:1px solid var(--line);background:#03050a}
.expired-image{display:block;margin-top:.4rem;color:var(--muted-2);font-size:.68rem}

.image-draft{margin:.65rem 1rem 0;padding:.65rem;display:grid;grid-template-columns:54px 1fr auto;gap:.7rem;align-items:center;border:1px solid rgba(0,229,255,.23);background:rgba(0,229,255,.06)}
.image-draft img{width:54px;height:42px;object-fit:cover;border:1px solid var(--line)}
.image-draft div{display:grid;gap:.12rem}
.image-draft strong{font-size:.75rem}
.image-draft span{color:var(--muted-2);font-size:.65rem}
.image-draft button{border:0;background:transparent;color:var(--danger);font-size:.72rem;cursor:pointer}
.composer{margin:1rem 1rem .55rem;border:1px solid var(--line);background:rgba(5,7,13,.76)}
.composer:focus-within{border-color:rgba(0,229,255,.4);box-shadow:0 0 0 3px rgba(0,229,255,.05)}
.composer textarea{display:block;width:100%;min-height:76px;max-height:150px;resize:vertical;padding:.8rem;border:0;background:transparent;color:var(--fg);outline:0;font-size:.84rem;line-height:1.6}
.composer textarea::placeholder{color:#4f5d72}
.composer-footer{min-height:44px;padding:.45rem .55rem .45rem .8rem;border-top:1px solid var(--line);display:flex;align-items:center;gap:.7rem}
.paste-hint{color:var(--muted-2);font-size:.65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.character-count{margin-left:auto;color:var(--muted-2);font:600 .62rem var(--mono);white-space:nowrap}
.send-button{height:32px;padding:0 .8rem;display:flex;align-items:center;gap:.4rem;font-size:.72rem}
.sync-note{margin:0 1rem .8rem;color:var(--muted-2);text-align:center;font:500 .6rem var(--mono);letter-spacing:.02em}

@media (max-width:1024px){
  .support-page{grid-template-columns:1fr;padding-top:2.2rem;align-items:start}
  .support-intro{display:grid;grid-template-columns:1fr 1fr;column-gap:2rem}
  .support-intro .eyebrow,.support-intro h1,.support-intro .intro-copy{grid-column:1}
  .service-facts,.privacy-note{grid-column:2}
  .service-facts{grid-row:1 / span 3;margin:0}
  .privacy-note{margin-top:.75rem}
  .chat-card{height:760px;min-height:600px}
}

@media (max-width:700px){
  .support-topbar{height:64px;padding:0 .9rem}
  .support-brand{font-size:.7rem;gap:.45rem}
  .brand-slash,.topbar-status{display:none}
  .back-home{margin-left:auto;padding:.5rem .7rem}
  .support-page{min-height:calc(100vh - 64px);padding:1.15rem .75rem 1.5rem;gap:1.3rem}
  .support-intro{display:block}
  .support-intro h1{font-size:2.35rem;margin:.8rem 0 1rem}
  .intro-copy{font-size:.86rem;line-height:1.75}
  .service-facts{margin-top:1.25rem;grid-template-columns:1fr 1fr 1fr;gap:.45rem}
  .service-facts div{display:block;padding:.7rem .2rem}
  .service-facts dt{margin-bottom:.35rem}
  .service-facts span{display:none}
  .privacy-note{margin-top:.8rem}
  .chat-card{height:calc(100svh - 78px);min-height:590px}
  .chat-header{min-height:76px;padding:.8rem}
  .agent-avatar{width:38px;height:38px}
  .message-scroll{padding:.85rem}
  .message-row{max-width:92%}
  .composer{margin:.7rem .7rem .45rem}
  .composer-footer{gap:.4rem}
  .paste-hint{max-width:42%;font-size:.58rem}
  .sync-note{margin:0 .5rem .65rem;font-size:.54rem}
}

@media (max-width:400px){
  .service-facts{display:none}
  .chat-header h2{font-size:.9rem}
  .chat-header p:last-child{font-size:.62rem}
  .message-bubble{font-size:.8rem}
  .character-count{display:none}
  .paste-hint{max-width:62%}
}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}