@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap";:root{--bg-base:#050505;--bg-surface:#ffffff08;--bg-surface-hover:#ffffff14;--bg-surface-active:#ffffff1f;--text-primary:#fff;--text-secondary:#fff9;--text-tertiary:#fff6;--border-subtle:#ffffff1a;--border-glow:#9333ea80;--accent-primary:#9333ea;--accent-secondary:#06b6d4;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-pill:9999px;--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-base);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none;background-image:radial-gradient(circle at 15%,#9333ea0d,#0000 25%),radial-gradient(circle at 85% 30%,#06b6d40d,#0000 25%);overflow:hidden}h1,h2,h3,h4,p{margin:0}.glass-panel{background:var(--bg-surface);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}.flex-center{justify-content:center;align-items:center;display:flex}.text-gradient{background:linear-gradient(135deg,#fff 0%,#a5a5a5 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.app-container{width:100%;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;display:flex;position:relative;overflow:hidden}.chat-scroll-area{-webkit-overflow-scrolling:touch;scroll-behavior:smooth;z-index:10;overscroll-behavior-y:contain;flex-direction:column;flex:1;gap:24px;padding:80px 24px 160px;display:flex;position:relative;overflow-y:auto}.chat-scroll-area::-webkit-scrollbar{width:6px}.chat-scroll-area::-webkit-scrollbar-thumb{background:var(--bg-surface-hover);border-radius:var(--radius-pill)}.message-bubble{border-radius:var(--radius-lg);max-width:80%;padding:16px 20px;font-size:15px;line-height:1.6;position:relative}.message-bubble.user{background:var(--bg-surface-hover);border:1px solid var(--border-subtle);border-bottom-right-radius:4px;align-self:flex-end}.message-bubble.assistant{-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-subtle);background:#0a0a0a99;align-self:flex-start;padding-left:20px}.input-container-wrapper{bottom:env(safe-area-inset-bottom,0px);pointer-events:none;flex-direction:column;align-items:center;gap:12px;padding:0 24px 24px;display:flex;position:absolute;left:0;right:0}.input-glass-bar{pointer-events:auto;-webkit-backdrop-filter:blur(40px);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);background:#14141499;align-items:flex-end;gap:12px;width:100%;max-width:768px;padding:8px 8px 8px 24px;transition:box-shadow .3s,border-color .3s;display:flex;box-shadow:0 12px 40px #00000080,inset 0 0 0 1px #ffffff0d}.input-glass-bar:focus-within{border-color:#9333ea80;box-shadow:0 12px 40px #00000080,0 0 20px #9333ea26,inset 0 0 0 1px #ffffff0d}.input-field{color:var(--text-primary);resize:none;background:0 0;border:none;outline:none;flex:1;min-width:0;height:24px;min-height:24px;max-height:120px;margin-bottom:8px;padding:0;font-family:inherit;font-size:16px;line-height:24px}.input-field::placeholder{color:var(--text-tertiary)}.send-button{background:var(--text-primary);width:40px;height:40px;color:var(--bg-base);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;transition:transform .2s cubic-bezier(.34,1.56,.64,1);display:flex}.send-button:disabled{background:var(--bg-surface-hover);color:var(--text-tertiary);cursor:not-allowed;transform:scale(1)!important}.send-button:hover:not(:disabled){transform:scale(1.05)}.send-button:active:not(:disabled){transform:scale(.95)}.bento-grid{grid-template-columns:repeat(2,1fr);gap:16px;width:100%;max-width:768px;margin:40px auto 0;display:grid}.bento-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);cursor:pointer;padding:24px;transition:all .3s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.bento-card:before{content:"";background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%), #ffffff0d, transparent 100%);opacity:0;transition:opacity .3s;position:absolute;inset:0}.bento-card:hover{background:var(--bg-surface-hover);border-color:#fff3;transform:translateY(-2px)}.bento-card:hover:before{opacity:1}.bento-title{color:var(--text-primary);margin-bottom:8px;font-weight:600}.bento-desc{color:var(--text-secondary);font-size:14px}.message-bubble pre{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:#0d0d0d;margin:12px 0;padding:16px;overflow-x:auto}.message-bubble code{font-family:monospace;font-size:13px}.input-actions-left{align-items:center;gap:8px;margin-right:8px;display:flex}.input-toggle-btn{color:var(--text-tertiary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.input-toggle-btn:hover{background:var(--bg-surface-hover);color:var(--text-secondary)}.input-toggle-btn.active{color:var(--accent-primary);background:#9333ea33}.nina-fullscreen-overlay{-webkit-backdrop-filter:blur(40px);z-index:200;background:#050505f2;flex-direction:column;justify-content:center;align-items:center;height:100dvh;display:flex;position:absolute;inset:0}.nina-canvas-container{z-index:1;width:100%;height:100dvh;position:absolute;inset:0}.nina-ui-layer{z-index:10;pointer-events:none;flex-direction:column;justify-content:space-between;align-items:center;width:100%;height:100%;padding:40px;display:flex;position:relative}.nina-header{pointer-events:auto;justify-content:space-between;align-items:center;width:100%;max-width:800px;display:flex}.nina-close-btn{background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-primary);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .2s;display:flex}.nina-close-btn:hover{background:var(--bg-surface-hover);transform:scale(1.05)}.app-header{height:64px;padding:env(safe-area-inset-top,0px) 24px 0 24px;z-index:50;pointer-events:none;background:linear-gradient(#050505e6 0%,#05050500 100%);justify-content:space-between;align-items:center;display:flex;position:absolute;top:0;left:0;right:0;overflow:hidden}.header-btn{pointer-events:auto;background:var(--bg-surface);border:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text-primary);border-radius:var(--radius-pill);cursor:pointer;justify-content:center;align-items:center;gap:8px;height:36px;padding:0 16px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.header-btn.icon-only{width:36px;padding:0}.header-btn:hover{background:var(--bg-surface-hover);border-color:#fff3}.sidebar{-webkit-backdrop-filter:blur(40px);border-right:1px solid var(--border-subtle);z-index:100;width:300px;padding:24px 16px;padding-top:calc(24px + env(safe-area-inset-top,0px));background:#0a0a0ad9;flex-direction:column;display:flex;position:absolute;top:0;bottom:0;left:0}.sidebar-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:90;background:#0006;position:absolute;inset:0}.chat-history-item{border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;align-items:center;gap:12px;margin-bottom:4px;padding:12px 16px;font-size:14px;transition:all .2s;display:flex}.chat-history-item:hover{background:var(--bg-surface-hover);color:var(--text-primary)}.chat-history-item.active{background:var(--bg-surface-active);color:var(--text-primary)}.animated-bg{z-index:0;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.chat-scroll-area,.input-container-wrapper,.bento-grid{z-index:10}@supports (-webkit-touch-callout:none){.app-container{height:-webkit-fill-available}}input,textarea{appearance:none;border-radius:0}html{overscroll-behavior:none;height:100%}iframe{-webkit-overflow-scrolling:touch}@media (width<=768px){body,html,.app-container{width:100vw;overflow-x:hidden}.message-bubble{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;min-width:0;max-width:95%;padding:12px 16px}.message-bubble>div{max-width:100%}.message-bubble span,.message-bubble p,.message-bubble a{white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word}.input-glass-bar{align-items:flex-end;gap:8px;padding:6px 6px 6px 16px}.send-button,.sidebar-button,button{min-width:44px;min-height:44px}.chat-scroll-area{padding:80px 12px 140px}}
