@import "https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap";
@import "https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&display=swap";
*{box-sizing:border-box;scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:0}::-webkit-scrollbar{display:none}:root{--bg-primary:#0a0a0a;--bg-secondary:#141414;--bg-tertiary:#1a1a1a;--text-primary:#fafafa;--text-secondary:#a0a0a0;--accent:#3b82f6;--accent-hover:#2563eb;--border:#2a2a2a;--phone-width:390px;--phone-height:844px;--phone-border-radius:54px;--phone-bezel:12px}.desktop-wrapper{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f0f23 100%);justify-content:center;align-items:center;min-height:100dvh;padding:24px;display:flex}.phone-mockup{width:var(--phone-width);height:var(--phone-height);border-radius:var(--phone-border-radius);padding:var(--phone-bezel);background:#1c1c1e;flex-shrink:0;position:relative;box-shadow:0 0 0 2px #2a2a2c,0 0 0 4px #1c1c1e,0 25px 50px -12px #00000080,0 0 100px #3b82f61a}.phone-screen{background:var(--bg-primary);border-radius:calc(var(--phone-border-radius) - var(--phone-bezel));width:100%;height:100%;position:relative;overflow:hidden}.phone-notch{top:calc(var(--phone-bezel) + 12px);z-index:100;background:#000;border-radius:20px;width:120px;height:34px;position:absolute;left:50%;transform:translate(-50%)}.phone-home-indicator{bottom:calc(var(--phone-bezel) + 8px);z-index:100;background:#ffffff4d;border-radius:3px;width:140px;height:5px;position:absolute;left:50%;transform:translate(-50%)}@media (max-width:480px),(max-height:700px){.desktop-wrapper{background:var(--bg-primary);height:100%;min-height:100dvh;padding:0}.phone-mockup{width:100%;max-width:none;height:100dvh;max-height:none;box-shadow:none;background:0 0;border-radius:0;padding:0}.phone-screen{border-radius:0;height:100%}.phone-notch,.phone-home-indicator{display:none}}:root,:root *,[data-theme],[data-theme] *{--crayon-sunk-fills:#ffffff0d!important}html{height:100%;height:-webkit-fill-available}body{background-color:var(--bg-primary);color:var(--text-primary);width:100%;height:100%;min-height:100dvh;font-family:Figtree,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;overflow:hidden}@media (max-width:480px),(max-height:700px){html,body{height:100dvh;overflow:hidden}body{position:fixed;inset:0}.container{height:100dvh}}.phone-screen>div{height:100%}.container{flex-direction:column;width:100%;height:100%;margin:0 auto;padding:0;display:flex;position:relative;overflow:hidden}.header{z-index:10;color:var(--text-primary);background:linear-gradient(to bottom,var(--bg-primary)0%,var(--bg-primary)80%,transparent 100%);justify-content:center;align-items:center;padding:16px;font-size:1.1rem;font-weight:600;display:flex;position:absolute;top:0;left:0;right:0}.header svg{color:var(--text-primary)}.header h1{margin-bottom:.5rem;font-size:1.75rem;font-weight:600}.header p{color:var(--text-secondary);font-size:.9rem}.chat-container{-webkit-overflow-scrolling:touch;flex-direction:column;gap:1rem;width:100%;height:100%;padding:24px 16px 180px;display:flex;overflow-y:auto}@media (min-width:481px) and (min-height:701px){.chat-container{padding-top:60px}}.message{white-space:pre-wrap;border-radius:20px;max-width:85%;padding:1rem 1.25rem;line-height:1.6}.message.user{background-color:var(--bg-tertiary);color:var(--text-primary);align-self:flex-end;margin-left:auto}.message.assistant{white-space:normal;background-color:#0000;border:none;align-self:flex-start;max-width:100%;padding:0}.controls-row{justify-content:center;align-items:center;gap:16px;display:flex}.controls-spacer{width:40px}.settings-container{z-index:20;position:relative}.settings-btn{color:#a3a3a3;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#262626e6;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex;box-shadow:0 2px 8px #0000004d}.settings-btn:hover,.settings-btn.active{color:#fff;background:#3a3a3af2}.settings-backdrop{z-index:100;position:fixed;inset:0}.settings-menu{z-index:101;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#1e1e1efa;border:1px solid #ffffff1a;border-radius:12px;min-width:220px;padding:8px;animation:.15s ease-out settingsSlideUp;position:absolute;bottom:50px;right:0;box-shadow:0 4px 20px #0006}@keyframes settingsSlideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.settings-header{color:#737373;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;padding:8px 12px;font-size:11px;font-weight:600}.settings-option{cursor:pointer;text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:10px;width:100%;margin-bottom:4px;padding:10px 12px;transition:all .15s;display:flex}.settings-option:last-child{margin-bottom:0}.settings-option:hover:not(:disabled){background:#ffffff14}.settings-option.selected{background:#ffffff0d}.settings-option:disabled{opacity:.5;cursor:not-allowed}.settings-option-icon{text-align:center;width:24px;font-size:18px}.settings-option-text{flex-direction:column;flex:1;gap:2px;display:flex}.settings-option-label{color:#fff;font-size:14px;font-weight:500}.settings-option-desc{color:#737373;font-size:11px}.settings-check{color:#22c55e;font-size:14px;font-weight:600}.voice-input-area{background:linear-gradient(to top,var(--bg-primary)0%,var(--bg-primary)70%,transparent 100%);padding:16px 16px 32px;padding-bottom:max(32px,env(safe-area-inset-bottom,32px));z-index:10;flex-direction:column;align-items:center;gap:12px;display:flex;position:absolute;bottom:0;left:0;right:0}.transcription-display{background-color:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);text-align:center;border-radius:16px;justify-content:center;align-items:center;max-width:90%;min-height:48px;padding:12px 20px;font-size:1rem;animation:.2s ease-out fadeIn;display:flex}.transcription-placeholder{color:var(--text-secondary);font-style:italic}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.button-pill{border-radius:100px;align-items:center;gap:0;display:flex;overflow:hidden;box-shadow:0 4px 20px #ffffff26}.pill-button{cursor:pointer;border:none;flex-shrink:0;justify-content:center;align-items:center;height:68px;transition:all .2s;display:flex}.pill-button:hover:not(:disabled){filter:brightness(1.1)}.pill-button:active:not(:disabled){filter:brightness(.95)}.pill-button:disabled{cursor:not-allowed}.pill-button.mic{background-color:var(--text-primary);width:128px;color:var(--bg-primary);border-radius:100px}.button-pill:has(.pill-button.stop) .pill-button.mic{border-radius:100px 0 0 100px}.pill-button.mic.listening{background-color:var(--text-primary);color:var(--bg-primary);animation:2s ease-in-out infinite listeningGlow}.pill-button.mic.paused{color:#a3a3a3;opacity:.7;background-color:#525252}.pill-button.mic.active:not(.listening):not(.paused){background-color:var(--text-primary);color:var(--bg-primary)}@keyframes listeningGlow{0%,to{box-shadow:0 4px 20px #ffffff4d}50%{box-shadow:0 4px 30px #ffffff80}}.pill-button.mic.connecting{background-color:var(--bg-secondary);border:2px solid var(--border)}.spinner{border:3px solid var(--border);border-top-color:var(--text-primary);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.pill-button.stop{color:#fff;background-color:#ef4444;border-left:1px solid #fff3;border-radius:0 100px 100px 0;width:68px}.pill-button.stop:hover{background-color:#dc2626}.stop-icon{background-color:#fff;border-radius:4px;width:20px;height:20px}.status-indicator{background-color:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);border-radius:20px;align-items:center;gap:8px;padding:8px 16px;font-size:.9rem;animation:.2s ease-out fadeIn;display:flex}.loading-container{flex-direction:column;gap:16px;display:flex}.tool-indicator{background:linear-gradient(135deg,#3b82f626 0%,#8b5cf626 100%);border:1px solid #3b82f64d;border-radius:12px;align-items:center;gap:12px;padding:12px 16px;animation:2s ease-in-out infinite toolPulse,.3s ease-out fadeIn;display:flex}.tool-icon{color:#3b82f6;background:#3b82f633;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.tool-info{flex-direction:column;flex:1;gap:2px;display:flex}.tool-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem}.tool-name{color:var(--text-primary);text-transform:capitalize;font-size:.95rem;font-weight:500}.tool-spinner{border:2px solid #3b82f64d;border-top-color:#3b82f6;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes toolPulse{0%,to{box-shadow:0 0 #3b82f633}50%{box-shadow:0 0 0 8px #3b82f600}}.status-dot{background-color:#a3a3a3;border-radius:50%;width:8px;height:8px;animation:1.5s ease-in-out infinite statusPulse}@keyframes statusPulse{0%,to{opacity:1}50%{opacity:.4}}.mic-hint{color:var(--text-secondary);margin-top:4px;font-size:.85rem}.empty-state{color:var(--text-primary);text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.empty-state h2{max-width:600px;color:var(--text-secondary);letter-spacing:-.01em;font-size:1.15rem;font-weight:500;line-height:1.4}.empty-state h2 strong{color:var(--text-primary);font-weight:600}.cursor{background-color:var(--accent);vertical-align:text-bottom;width:2px;height:1.2em;margin-left:2px;animation:1s infinite blink;display:inline-block}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.skeleton-loader{flex-direction:column;gap:16px;width:100%;max-width:600px;padding:1.5rem 0;display:flex}.skeleton-row{flex-wrap:wrap;gap:12px;width:100%;display:flex}.skeleton-box{background:linear-gradient(90deg,var(--bg-secondary)0%,var(--bg-secondary)40%,#2a2a2a 50%,var(--bg-secondary)60%,var(--bg-secondary)100%);background-size:200% 100%;border-radius:8px;animation:2.5s ease-in-out infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-box.title{width:50%;min-width:120px;max-width:280px;height:28px}.skeleton-box.text-long{width:100%;height:18px}.skeleton-box.text-medium{width:65%;min-width:100px;height:18px}.skeleton-box.text-short{width:35%;min-width:80px;height:18px}.skeleton-box.card{border-radius:12px;width:100%;height:100px}.skeleton-box.card-small{border-radius:12px;flex:30%;min-width:100px;height:80px}.skeleton-box.tag{border-radius:16px;width:25%;min-width:70px;max-width:90px;height:32px}.message.assistant{width:100%;overflow:visible}.message.assistant .skeleton-loader{width:100%}.crayon-card-card{box-shadow:none!important;background-color:#0000!important;border:none!important;padding:0!important}