:root { --ink:#191b24; --muted:#717582; --purple:#7048e8; --purple-soft:#f0ebff; --line:#e9e7ef; --surface:rgba(255,255,255,.88); }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:radial-gradient(circle at 15% 10%,#f3ebff 0,transparent 34%),radial-gradient(circle at 90% 88%,#fff0df 0,transparent 34%),#f8f8fb; }
button,textarea { font:inherit; }
.assistant-page { min-height:100dvh; display:grid; place-items:center; padding:24px 14px; }
.assistant-card-public { width:min(680px,100%); min-height:min(790px,calc(100dvh - 48px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(255,255,255,.9); border-radius:30px; background:var(--surface); box-shadow:0 30px 80px rgba(58,44,100,.13); backdrop-filter:blur(20px); }
.assistant-header { display:flex; align-items:center; gap:13px; padding:20px 22px 16px; border-bottom:1px solid var(--line); }
.assistant-avatar { width:47px; height:47px; display:grid; place-items:center; flex:0 0 auto; border-radius:16px; color:white; font-size:21px; background:linear-gradient(145deg,#8f63ff,#5d35d9); box-shadow:0 10px 24px rgba(112,72,232,.28); }
.assistant-header strong { display:block; font-size:16px; }
.assistant-header span { display:flex; align-items:center; gap:6px; margin-top:5px; color:#438f58; font-size:11px; }
.assistant-header i { width:7px; height:7px; border-radius:50%; background:#30a952; box-shadow:0 0 0 4px rgba(48,169,82,.1); }
.assistant-intro { margin:18px 22px 0; padding:13px 15px; border-radius:15px; color:#585d69; background:#f5f3f9; font-size:12px; line-height:1.55; }
.public-conversation { flex:1; min-height:320px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; padding:20px 22px; }
.public-bubble { max-width:84%; padding:12px 14px; border-radius:17px 17px 17px 5px; color:#383b45; background:#f0eef4; font-size:13px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.public-bubble.me { align-self:flex-end; border-radius:17px 17px 5px 17px; color:white; background:linear-gradient(145deg,#7951ea,#6038d6); }
.public-bubble.typing { color:#8a8497; }
.public-bubble a { color:#5f3bd0; font-weight:700; }
.public-bubble.me a { color:white; }
.suggestion-row { display:flex; gap:7px; overflow-x:auto; padding:0 22px 12px; scrollbar-width:none; }
.suggestion-row button { white-space:nowrap; border:1px solid #ded7f5; border-radius:999px; padding:8px 11px; color:#6544c5; background:#faf8ff; cursor:pointer; font-size:10px; }
.chat-form { display:grid; grid-template-columns:1fr 44px; align-items:end; gap:9px; margin:0 16px 12px; padding:8px 8px 8px 14px; border:1px solid #dfdce7; border-radius:18px; background:white; box-shadow:0 8px 30px rgba(46,37,74,.06); }
.chat-form label { min-width:0; }
.chat-form textarea { display:block; width:100%; max-height:120px; resize:none; border:0; outline:0; padding:10px 0; color:var(--ink); background:transparent; font-size:13px; line-height:1.45; }
.chat-form button { width:44px; height:44px; border:0; border-radius:14px; color:white; background:var(--purple); cursor:pointer; font-size:20px; font-weight:800; }
.chat-form button:disabled { opacity:.55; cursor:wait; }
.assistant-note { margin:0 18px calc(14px + env(safe-area-inset-bottom)); color:#9a9ca4; text-align:center; font-size:9px; }
.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; }
@media (max-width:600px) { .assistant-page{padding:0}.assistant-card-public{min-height:100dvh;border:0;border-radius:0}.assistant-header{padding-top:calc(16px + env(safe-area-inset-top))}.public-conversation{padding:17px 16px}.assistant-intro{margin:14px 16px 0}.suggestion-row{padding-left:16px;padding-right:16px}.public-bubble{max-width:90%}.chat-form{margin-left:10px;margin-right:10px} }