/* Try Human AI — halftone stage design. Reuses :root tokens from styles.css. */
.try-body{background:#050505;height:100svh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}

/* red halftone dot walls */
.dots{position:fixed;top:0;bottom:0;width:min(300px,24vw);pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,rgba(232,40,47,.85) 1.6px,transparent 1.7px);
  background-size:13px 13px}
.dots-left{left:0;-webkit-mask-image:linear-gradient(90deg,#000 20%,transparent 95%);mask-image:linear-gradient(90deg,#000 20%,transparent 95%)}
.dots-right{right:0;-webkit-mask-image:linear-gradient(-90deg,#000 20%,transparent 95%);mask-image:linear-gradient(-90deg,#000 20%,transparent 95%)}

/* slim top bar */
.try-top{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:18px max(4vw,24px)}
.try-top-actions{display:flex;align-items:center;gap:10px}
.limit-hint{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line-soft);padding:6px 12px;border-radius:999px}
.mini-btn{background:transparent;border:1px solid var(--line);color:var(--white);border-radius:999px;padding:8px 18px;font-size:13px;cursor:pointer;font-family:inherit;transition:.25s var(--ease)}
.mini-btn:hover{border-color:rgba(232,40,47,.6);background:rgba(232,40,47,.08)}

/* stage */
.try-stage{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;width:min(820px,94vw);margin:0 auto;padding:2vh 0 8px}

/* empty hero */
.hero-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:5vh 0 26px;animation:heroIn .7s var(--ease)}
.hero-empty.hide{display:none}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}}
.mascot{margin-bottom:10px;animation:floaty 5s ease-in-out infinite}
.mascot img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 0 26px rgba(232,40,47,.35))}
@keyframes floaty{50%{transform:translateY(-8px)}}
.try-stage.is-streaming .mascot{animation:none}
.try-stage.is-streaming .mascot img{filter:drop-shadow(0 0 46px rgba(232,40,47,.7));animation:pulseGlow 1.6s ease-in-out infinite}
@keyframes pulseGlow{50%{transform:scale(1.06)}}
.hero-empty h1{font-size:clamp(34px,5.4vw,56px);font-weight:600;margin-bottom:12px}
.hero-empty p{color:var(--muted);font-size:15.5px}
.hero-empty p strong{color:#fff;font-weight:600}

/* messages */
.messages{width:100%;flex:1;min-height:0;max-height:none;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:6px 4px 18px;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.messages::-webkit-scrollbar{display:none;width:0}
.messages.live{scroll-behavior:auto}
.messages:empty{display:none;flex:0}
.msg{max-width:82%;font-size:14.5px;line-height:1.65;animation:msgIn .3s var(--ease);white-space:pre-wrap;word-break:break-word}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}}
.msg.user{align-self:flex-end;background:#f5f5f4;color:#0b0b0c;padding:12px 18px;border-radius:20px;border-bottom-right-radius:6px}
.msg.ai{align-self:flex-start;color:#e9e9ec;padding:2px 6px 2px 16px;border-left:2px solid var(--red)}
.msg.ai.streaming::after{content:"▍";color:var(--red);animation:blinkCur 1s steps(1) infinite}
@keyframes blinkCur{50%{opacity:0}}
.msg.sys,.msg.err{align-self:center;max-width:94%;text-align:center;font-size:13.5px;padding:12px 20px;border-radius:14px}
.msg.sys{background:rgba(232,40,47,.07);border:1px solid rgba(232,40,47,.3);color:#e8c9cb}
.msg.err{background:rgba(232,40,47,.08);border:1px dashed rgba(232,40,47,.5);color:#ffd7d9}
.msg .retry{margin-top:8px;color:#fff;border:none;border-bottom:1px solid var(--red);background:none;cursor:pointer;font:inherit;font-size:13px;padding:0}
.typing{align-self:flex-start;display:flex;gap:6px;padding:10px 4px 10px 16px;border-left:2px solid var(--red)}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:tp 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes tp{40%{transform:translateY(-5px);background:#fff}}

/* composer */
.composer-zone{width:100%;padding-bottom:4px}
.composer{background:rgba(20,20,23,.92);border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:18px 18px 12px;box-shadow:0 24px 80px rgba(0,0,0,.6);transition:border-color .25s}
.composer:focus-within{border-color:rgba(232,40,47,.55)}
.composer textarea{width:100%;resize:none;background:transparent;border:none;outline:none;color:#fff;font:inherit;font-size:16px;line-height:1.5;max-height:150px;padding:2px 4px 10px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.composer textarea::-webkit-scrollbar{display:none;width:0}
.composer textarea::placeholder{color:#6d6d76}
.composer-bar{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ai-select{position:relative}
.ai-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:#fff;border-radius:999px;padding:8px 15px;font:inherit;font-size:13.5px;cursor:pointer;transition:.25s var(--ease)}
.ai-btn:hover{border-color:rgba(232,40,47,.55)}
.ai-btn .live{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);flex:none}
.ai-btn .chev{color:var(--dim);font-size:11px}
.ai-menu{position:absolute;bottom:calc(100% + 10px);left:0;min-width:280px;background:#101013;border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 24px 70px rgba(0,0,0,.7);z-index:20}
.ai-menu[hidden]{display:none}
.ai-opt{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:12px;color:#fff;padding:11px 13px;cursor:pointer;font:inherit}
.ai-opt:hover:not(:disabled){background:rgba(232,40,47,.08)}
.ai-opt.active{border-color:rgba(232,40,47,.55);background:rgba(232,40,47,.07)}
.ai-opt:disabled{opacity:.6;cursor:not-allowed}
.ai-opt strong{font-size:14px;display:flex;align-items:center;gap:8px}
.ai-opt .off{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#ffb3b6;border:1px solid rgba(232,40,47,.45);padding:2px 8px;border-radius:999px}
.ai-opt small{font-size:12px;color:var(--muted)}
.opt-link{display:inline-block;margin-top:6px;font-size:12.5px;color:#fff;border-bottom:1px solid var(--red);padding-bottom:1px;pointer-events:auto}
.opt-link:hover{color:#ffb3b6}
.composer-right{display:flex;align-items:center;gap:12px}
.count{font-size:12px;color:var(--dim)}
.round-btn{width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;background:linear-gradient(135deg,#f2333b,var(--red) 55%,#7d0d13);color:#fff;box-shadow:0 8px 28px rgba(232,40,47,.4);transition:transform .2s var(--ease),box-shadow .25s}
.round-btn:hover{transform:scale(1.06)}
.round-btn:active{transform:scale(.96)}
.round-btn .ic-stop{display:none}
.try-stage.is-streaming .round-btn{background:#1b1b1f;border:1px solid rgba(232,40,47,.6);box-shadow:none}
.try-stage.is-streaming .round-btn .ic-send{display:none}
.try-stage.is-streaming .round-btn .ic-stop{display:block}
.composer-hint{text-align:center;font-size:12px;color:var(--dim);margin-top:12px}

/* footer */
.try-foot{position:relative;z-index:2;display:flex;justify-content:center;gap:26px;flex-wrap:wrap;padding:20px;font-size:12.5px;color:var(--dim)}
.try-foot a:hover{color:#fff}

@media(max-width:640px){
  .dots{width:90px;background-size:10px 10px;opacity:.8}
  .limit-hint{display:none}
  .messages{min-height:0;max-height:none}
  .msg{max-width:90%}
  .try-foot{gap:16px}
}
@media(prefers-reduced-motion:reduce){
  .mascot,.mascot .eye,.try-stage.is-streaming .mascot svg{animation:none}
  .msg{animation:none}
  .messages{scroll-behavior:auto}
}