@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap";@import"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css";:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--primary-color: #4f46e5;--primary-hover: #4338ca;--secondary-color: #f3f4f6;--text-primary: #1f2937;--text-secondary: #6b7280;--border-color: #e5e7eb;--background: #ffffff;--card-background: #ffffff;--message-bg: #f9fafb;--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shape-blur: 2px;--shape-opacity: .75}@media (prefers-color-scheme: dark){:root{--text-primary: #f9fafb;--text-secondary: #d1d5db;--background: #111827;--card-background: #1f2937;--message-bg: #374151;--secondary-color: #374151;--border-color: #4b5563}}*{box-sizing:border-box}body{margin:0;background-color:var(--background);color:var(--text-primary);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}#app{width:100%;max-width:1200px;height:90vh;margin:0 auto;background:var(--card-background);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column}#app:not(:has(.messages)){max-width:900px;min-height:600px;background:transparent;box-shadow:none}body:has(#app:not(:has(.messages))){background-color:#080710;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif}body:has(#app:has(.messages)){background-color:#080710;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif}#app:has(.messages){background:transparent;box-shadow:none}#app:has(.messages) h1{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom-left-radius:12px;border-bottom-right-radius:12px}h1{background:none;color:#fff;margin:0;padding:1.25rem 2rem;font-size:2rem;font-weight:700;text-align:center;letter-spacing:-.025em;border-top-left-radius:12px;border-top-right-radius:12px;position:relative;z-index:1}.user-bar{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:.25rem 2rem;margin-top:-56px;position:relative;z-index:2}.user-avatar{width:32px;height:32px;border-radius:50%;box-shadow:var(--shadow);flex-shrink:0;background:#ddd}.user-name{font-weight:600;font-size:1rem;letter-spacing:.2px;color:var(--text-primary)}.user-bar .btn,.user-bar button{margin-left:auto;background-color:#fff;color:#080710;padding:12px 14px;font-size:16px;font-weight:700;border-radius:6px;border:none;box-shadow:0 0 40px #08071059;transition:transform .15s ease,filter .15s ease}.user-bar .btn:hover,.user-bar button:hover{transform:translateY(-1px);filter:brightness(.98)}.user-bar .btn:active,.user-bar button:active{transform:translateY(0)}.chat{position:relative;isolation:isolate;display:flex;flex-direction:column;flex:1;min-height:0}.chat:before,.chat:after{content:"";position:absolute;z-index:0;width:260px;height:260px;border-radius:50%;filter:blur(var(--shape-blur, 48px)) saturate(110%);opacity:var(--shape-opacity, .45);pointer-events:none;mix-blend-mode:screen}.chat:before{background:linear-gradient(#1845ad,#23a2f6);left:8%;top:6%;transform:translate(-20px,-10px)}.chat:after{background:linear-gradient(to right,#ff512f,#f09819);right:10%;bottom:8%;transform:translate(20px,10px)}.messages{position:relative;z-index:1;flex:1;padding:1rem 1.25rem;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;min-height:0;max-height:none;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.14);border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 40px #08071059;margin:.75rem .75rem .5rem}.msg{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;background:#ffffff14;border:1px solid rgba(255,255,255,.16);border-radius:14px;box-shadow:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .2s ease}.msg.other{align-self:flex-start;max-width:70ch;background:var(--message-bg);border-top-left-radius:6px}.msg.me{align-self:flex-end;max-width:70ch;background:color-mix(in srgb,rgba(255,255,255,.08) 55%,var(--primary-color) 45%);border:1px solid rgba(79,70,229,.35);border-top-right-radius:6px;flex-direction:row-reverse}.avatar{width:36px;height:36px;border-radius:50%;box-shadow:var(--shadow);flex-shrink:0;background:#a9a9a9}.message-content{flex:1;display:flex;flex-direction:column;gap:.35rem}.message-meta{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}.username{font-weight:600;color:#9ec9ff;font-size:.95rem}.timestamp{font-size:.75rem;color:#ffffffb3;opacity:1;white-space:nowrap}.msg-text{margin:0;color:#fff;font-size:.975rem;line-height:1.5;word-wrap:break-word}form:has(input[placeholder=Message]),.composer{position:relative;z-index:1;padding:.6rem 1rem;display:flex;flex-direction:row;align-items:center;gap:.6rem;margin:.5rem .75rem .75rem;max-width:none;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.12);border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 40px #08071059}form:has(input[placeholder=Message]) input,.composer input{flex:1;margin:0;padding:.75rem 1rem;border:1.5px solid var(--border-color);border-radius:10px;font-size:1rem;line-height:1.25rem;background:var(--background);color:var(--text-primary);outline:none;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}form:has(input[placeholder=Message]) input:focus,.composer input:focus{border-color:var(--primary-color);box-shadow:0 0 0 4px #4f46e526;background:color-mix(in srgb,var(--background) 92%,var(--primary-color))}form:has(input[placeholder=Message]) button,.composer button{min-width:80px;padding:.6rem 1rem;background:#fff;color:#080710;border:0;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;box-shadow:0 6px 16px #4f46e540}form:has(input[placeholder=Message]) button:hover,.composer button:hover{filter:brightness(1.02);transform:translateY(-1px)}form:has(input[placeholder=Message]) button:active,.composer button:active{transform:translateY(0);filter:brightness(.98)}.composer input{background:#ffffff14;border:1px solid rgba(255,255,255,.18);color:#fff}.composer input::placeholder{color:#ffffffbf}.composer input:focus{box-shadow:0 0 0 3px #ffffff2e;background:#ffffff1f}.composer button{background:linear-gradient(180deg,var(--primary-color),var(--primary-hover));box-shadow:0 10px 22px #4f46e559}.messages::-webkit-scrollbar{width:6px}.messages::-webkit-scrollbar-track{background:var(--secondary-color)}.messages::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.messages::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.glass-auth{position:relative;flex:1;display:grid;place-items:center;padding:2rem;isolation:isolate;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif}.glass-bg{position:absolute;inset:0;display:grid;place-items:center;z-index:0}.glass-bg .shape{position:absolute;width:200px;height:200px;border-radius:50%;filter:blur(var(--shape-blur, 48px)) saturate(110%);opacity:var(--shape-opacity, .45);pointer-events:none;will-change:transform,filter,opacity;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .8s ease,filter .8s ease;mix-blend-mode:screen}.glass-bg .shape:first-child{background:linear-gradient(#1845ad,#23a2f6);left:50%;top:50%;transform:translate(-360px,-360px)}.glass-bg .shape:last-child{background:linear-gradient(to right,#ff512f,#f09819);left:50%;top:50%;transform:translate(180px,160px)}.glass-bg:after{content:"";position:absolute;left:50%;top:50%;width:260px;height:260px;transform:translate(-50%,-50%) scale(.85);border-radius:50%;background:var(--primary-color);filter:blur(calc(var(--shape-blur, 48px) * 1.1));opacity:0;transition:opacity .8s ease;pointer-events:none}.glass-auth.merge .glass-bg .shape:first-child{transform:translate(-60px,-60px);opacity:.5}.glass-auth.merge .glass-bg .shape:last-child{transform:translate(60px,60px);opacity:.5}.glass-auth.merge .glass-bg:after{opacity:.65}.glass-form{position:relative;z-index:1;width:400px;min-height:520px;background-color:#ffffff21;border-radius:10px;border:2px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 40px #08071099;padding:50px 35px;color:#fff}.glass-form *{color:#fff;letter-spacing:.5px;outline:none;border:none}.glass-form h3{font-size:28px;font-weight:600;line-height:36px;text-align:center}.glass-form label{display:block;margin-top:22px;font-size:14px;font-weight:500}.glass-form input[type=text],.glass-form input[type=email],.glass-form input[type=password]{display:block;height:48px;width:100%;background-color:#ffffff12;border-radius:6px;padding:0 12px;margin-top:8px;font-size:14px;font-weight:400;transition:box-shadow .2s ease,background-color .2s ease}.glass-form input::placeholder{color:#e5e5e5}.glass-form input:focus{box-shadow:0 0 0 3px #ffffff2e;background-color:#ffffff1a}.glass-form button{margin-top:22px;width:100%;background-color:#fff;color:#080710;padding:14px 0;font-size:16px;font-weight:700;border-radius:6px;cursor:pointer;transition:transform .15s ease,filter .15s ease}.glass-form button:hover{transform:translateY(-1px);filter:brightness(.98)}.glass-form button:active{transform:translateY(0)}.glass-form .social{margin-top:16px;display:flex;gap:16px}.glass-form .social div{flex:1;border-radius:6px;padding:8px 10px;background-color:#ffffff45;color:#eaf0fb;text-align:center;cursor:pointer;transition:background-color .2s ease}.glass-form .social div:hover{background-color:#ffffff78}.glass-form .social i{margin-right:6px}.glass-divider{margin:22px 0;border:none;height:1px;background:#fff3}@media (max-width: 640px){body{padding:.5rem}#app{min-height:100vh;border-radius:0}h1{font-size:1.5rem;padding:1rem}:root{--shape-blur: 28px;--shape-opacity: .5}.messages{padding:.75rem}form:has(input[placeholder=Message]),.composer{padding:.6rem .75rem;gap:.5rem}.glass-form{width:min(94vw,400px);padding:40px 28px}.glass-bg .shape:first-child{transform:translate(-160px,-200px)}.glass-bg .shape:last-child{transform:translate(140px,140px)}.glass-auth.merge .glass-bg .shape:first-child{transform:translate(-40px,-40px)}.glass-auth.merge .glass-bg .shape:last-child{transform:translate(40px,40px)}.glass-bg:after{width:220px;height:220px}}
