*{box-sizing:border-box;margin:0;padding:0}
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
html,body{min-height:100%;background:#000;color:#fff;font-family:Arial,sans-serif}
body{min-height:100vh;background:linear-gradient(to bottom,#000 0%,#020617 45%,#0f3b82 100%)}
.app{min-height:100vh;display:flex;flex-direction:column}
header{height:auto;min-height:65px;display:flex;align-items:center;padding:var(--safe-top) 20px 0;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25)}
.logo{font-size:22px;font-weight:bold}
.new-chat{margin-left:auto;padding:10px 16px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.new-chat:hover{background:rgba(255,255,255,.15)}
#chat{flex:1;padding:25px 25px calc(110px + var(--safe-bottom));overflow-y:auto}
.message{max-width:80%;margin:12px 0;padding:12px 16px;border-radius:15px;white-space:pre-wrap;word-wrap:break-word}
.message.user{margin-left:auto;background:#2563eb;text-align:right}.message.ai{margin-right:auto;background:rgba(255,255,255,.1);text-align:left}
.input-area{position:fixed;bottom:0;left:0;right:0;padding:15px max(15px,env(safe-area-inset-right)) calc(15px + var(--safe-bottom)) max(15px,env(safe-area-inset-left));background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,0))}
.input-box{max-width:850px;margin:auto;display:flex;gap:10px}#message{flex:1;padding:15px;border-radius:14px;border:1px solid rgba(255,255,255,.2);outline:none;background:rgba(20,20,30,.95);color:#fff;font-size:16px}#message::placeholder{color:#aaa}
#send{padding:0 20px;border:0;border-radius:14px;background:#2563eb;color:#fff;font-size:16px;cursor:pointer}#send:hover{background:#1d4ed8}
@media(max-width:600px){.message{max-width:90%}#chat{padding:15px 15px calc(100px + var(--safe-bottom))}.new-chat{padding:8px 12px}.logo{font-size:20px}}