:root {
  --bg: var(--tg-bg, #f4f6fb);
  --text: var(--tg-text, #14161b);
  --hint: var(--tg-hint, #7b8494);
  --card: var(--tg-card, #ffffff);
  --accent: var(--tg-button, #4f6bff);
  --accent-text: var(--tg-button-text, #ffffff);
  --mine: var(--accent);
  --ai1: #7c5cff;
  --ai2: #00b4d8;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: var(--tg-bg, #0f1218); --text: var(--tg-text, #eef1f6); --hint: var(--tg-hint, #8b95a7); --card: var(--tg-card, #1a1f29); }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
.hero { position: relative; overflow: hidden; padding: 18px 16px 16px; color: #fff; background: linear-gradient(120deg, var(--ai1), var(--ai2), #ff7eb3); background-size: 300% 300%; animation: flow 12s ease infinite; flex: none; }
.glow { position: absolute; inset: -40% -10% auto auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.45), transparent 70%); animation: float 7s ease-in-out infinite; }
.who { position: relative; display: flex; gap: 12px; align-items: center; }
.avatar { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(255,255,255,.22); backdrop-filter: blur(4px); animation: pop .6s ease; }
.biz { font-weight: 700; font-size: 17px; }
.sub { font-size: 13px; opacity: .9; display: flex; gap: 6px; align-items: center; }
.sub .dot { width: 8px; height: 8px; border-radius: 50%; background: #5dff9c; box-shadow: 0 0 0 0 rgba(93,255,156,.7); animation: pulse 2s infinite; }
main { flex: 1; overflow-y: auto; padding: 14px 12px 8px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 82%; padding: 9px 12px; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word; animation: rise .25s ease; }
.msg.you { align-self: flex-end; background: var(--mine); color: var(--accent-text); border-bottom-right-radius: 4px; }
.msg.team { align-self: flex-start; background: var(--card); border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.msg.ai { align-self: flex-start; background: var(--card); border-bottom-left-radius: 4px; border: 1.5px solid transparent; background-image: linear-gradient(var(--card), var(--card)), linear-gradient(120deg, var(--ai1), var(--ai2)); background-origin: border-box; background-clip: padding-box, border-box; }
.meta { font-size: 11px; color: var(--hint); margin-top: 3px; }
.msg.you .meta { color: rgba(255,255,255,.8); text-align: right; }
.typing { align-self: flex-start; background: var(--card); border-radius: 16px; padding: 12px 14px; display: flex; gap: 4px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--hint); animation: bounce 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
.empty { margin: auto; text-align: center; color: var(--hint); padding: 24px; }
.empty .big { font-size: 40px; animation: float 4s ease-in-out infinite; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 8px; flex: none; }
.chips button { flex: none; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: var(--card); color: var(--text); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.composer { flex: none; display: flex; gap: 8px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid color-mix(in srgb, var(--hint) 25%, transparent); }
.composer textarea { flex: 1; resize: none; border: 0; outline: 0; background: var(--bg); color: var(--text); border-radius: 18px; padding: 10px 14px; font: inherit; max-height: 120px; }
.composer button { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--ai1), var(--ai2)); color: #fff; font-size: 18px; cursor: pointer; transition: transform .15s; }
.composer button:active { transform: scale(.92); }
.composer button:disabled { opacity: .5; }
.error { align-self: center; color: #e5484d; font-size: 13px; text-align: center; padding: 8px; }
@keyframes flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(93,255,156,.7); } 70% { box-shadow: 0 0 0 7px rgba(93,255,156,0); } 100% { box-shadow: 0 0 0 0 rgba(93,255,156,0); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
.composer .tool { width: 40px; height: 44px; background: transparent; color: var(--text); font-size: 20px; border-radius: 12px; }
.composer .tool.on { background: #e5484d; color: #fff; animation: pulse 1.4s infinite; }
.composer button#send { display: none; }
.composer.has-text button#send { display: block; }
.composer.has-text #mic { display: none; }
.rec { flex: none; display: flex; gap: 8px; align-items: center; justify-content: center; padding: 6px; font-size: 13px; color: var(--hint); }
.rec .red { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; animation: pulse 1.2s infinite; }
.msg img { display: block; max-width: 220px; max-height: 260px; border-radius: 12px; margin-bottom: 4px; object-fit: cover; }
.msg.uploading { opacity: .7; }
.who .grow { flex: 1; min-width: 0; }
.privacy { flex: none; border: 0; border-radius: 12px; padding: 6px 10px; font: inherit; font-size: 13px; color: #fff; background: rgba(255,255,255,.22); cursor: pointer; }

.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }