:root{color-scheme:light}*{box-sizing:border-box}body,html{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden;background:radial-gradient(800px 500px at 15% 20%,rgba(170,120,255,.35),transparent 55%),radial-gradient(900px 600px at 85% 35%,rgba(120,170,255,.35),transparent 60%),radial-gradient(900px 700px at 25% 85%,rgba(255,140,200,.25),transparent 55%),linear-gradient(180deg,#fff,#f7f8ff)}button,input,select,textarea{font-size:16px;line-height:1.4;-webkit-tap-highlight-color:transparent;touch-action:manipulation}html{-webkit-text-size-adjust:100%}.app-shell{height:100svh;display:flex;gap:18px;padding:18px;max-width:1200px;margin:0 auto;width:100%;justify-content:center}.app-main{flex:0 0 700px;width:700px;min-width:0;display:flex;flex-direction:column;min-height:0}.sidebar-toggle{display:none;position:absolute;top:18px;left:18px;width:40px;height:40px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:hsla(0,0%,100%,.75);cursor:pointer;z-index:10;font-size:18px}.sidebar{width:280px;min-width:280px;max-width:280px;border:1px solid rgba(0,0,0,.06);border-radius:18px;background:hsla(0,0%,100%,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:14px;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);flex:0 0 280px;order:-1}.sidebar-header{display:flex;justify-content:space-between;align-items:flex-start}.sidebar-brand .sidebar-title{font-weight:800;letter-spacing:.3px;font-size:20px}.sidebar-brand .sidebar-subtitle{font-size:12px;opacity:.7;margin-top:6px;line-height:1.35}.close-btn{width:30px;height:30px;border-radius:8px;border:1px solid rgba(0,0,0,.12);background:hsla(0,0%,100%,.75);cursor:pointer;display:grid;place-items:center;font-size:14px;transition:all .2s ease}.close-btn:hover{background:hsla(0,0%,100%,.9)}@media (min-width:981px){.close-btn{display:none}}.sidebar-nav{display:flex;flex-direction:column;gap:8px}.sidebar-link{display:flex;align-items:center;gap:8px;width:100%;border:1px solid rgba(0,0,0,.08);background:hsla(0,0%,100%,.65);border-radius:12px;padding:10px 12px;text-align:left;text-decoration:none;color:inherit;transition:all .2s ease;cursor:pointer;opacity:.7}.sidebar-link:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1);opacity:1}.sidebar-link.active{cursor:default;opacity:1;box-shadow:0 8px 24px rgba(0,0,0,.06);border-color:rgba(120,120,255,.3);background:rgba(120,120,255,.1)}.link-icon{font-size:16px}.sidebar-footer{margin-top:auto;font-size:12px;opacity:.7}.hero-wrap{flex:1 1;min-height:0;display:grid;place-items:center;width:100%}.hero-card{width:min(700px,100%);border:1px solid rgba(0,0,0,.06);border-radius:22px;background:hsla(0,0%,100%,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:22px;box-shadow:0 18px 50px rgba(0,0,0,.08);animation:slideUp .5s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.hero-title{margin:0 0 6px;font-size:42px;line-height:1.05;letter-spacing:.2px}.hero-dot{color:#785aff}.hero-sub{margin:0 0 16px;font-size:16px;opacity:.8;line-height:1.45}.hero-row{display:flex;gap:10px;align-items:center}.hero-input{flex:1 1;border:1px solid rgba(0,0,0,.12);background:hsla(0,0%,100%,.85);border-radius:14px;padding:14px;outline:none;transition:border-color .2s ease}.hero-input:focus{border-color:rgba(120,120,255,.5)}.hero-meta{margin-top:14px;display:flex;flex-direction:column;gap:10px}.chat-shell{flex:1 1;min-height:0;width:100%;display:flex;flex-direction:column;gap:10px}.chat-topbar{display:flex;justify-content:space-between;align-items:center}.chat-topbar-right,.tone-row{display:flex;gap:10px;align-items:center}.tone-label{font-size:12px;opacity:.7}.tone-label strong{opacity:1;color:#785aff;font-weight:600}.tone-select{padding:8px 10px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:hsla(0,0%,100%,.75);transition:border-color .2s ease}.tone-select:focus{border-color:rgba(120,120,255,.5)}.new-chat-btn{padding:8px 14px;border-radius:12px;border:1px solid rgba(120,120,255,.3);background:rgba(120,120,255,.1);color:rgba(120,120,255,.8);cursor:pointer;font-size:13px;font-weight:500;transition:all .2s ease;white-space:nowrap;display:flex;align-items:center;gap:4px}.new-chat-btn:hover:not(:disabled){background:rgba(120,120,255,.15);border-color:rgba(120,120,255,.5);color:#7878ff}.new-chat-btn:disabled{opacity:.6;cursor:not-allowed}.new-chat-text{display:inline}.menu-btn,.new-chat-mobile{display:none}.menu-btn{width:40px;height:40px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:hsla(0,0%,100%,.75);cursor:pointer;display:grid;place-items:center;font-size:18px;transition:all .2s ease}.menu-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,.1)}.typing{font-size:12px;opacity:.65}.chat-box{flex:1 1;min-height:0;border:1px solid rgba(0,0,0,.06);border-radius:18px;background:hsla(0,0%,100%,.58);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:hidden}.chat-scroll{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px}.msg-row{display:flex;margin-bottom:10px}.msg-row.left{justify-content:flex-start}.msg-row.right{justify-content:flex-end}.bubble{max-width:min(600px,88%);padding:10px 12px;border-radius:16px;border:1px solid rgba(0,0,0,.06);box-shadow:0 10px 26px rgba(0,0,0,.06);white-space:pre-wrap;animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.bubble.assistant{background:hsla(0,0%,100%,.78)}.bubble.user{background:rgba(160,140,255,.2)}.chat-inputbar{display:flex;gap:10px;align-items:center}.chat-inputbar input{flex:1 1;min-width:0;padding:14px;border-radius:14px;border:1px solid rgba(0,0,0,.12);background:hsla(0,0%,100%,.82);outline:none;transition:border-color .2s ease}.chat-inputbar input:focus{border-color:rgba(120,120,255,.5)}.icon-btn{width:46px;height:46px;border-radius:14px;border:1px solid rgba(0,0,0,.12);background:hsla(0,0%,100%,.75);cursor:pointer;display:grid;place-items:center;transition:all .2s ease}.icon-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,.1)}.disclaimer{margin:0;font-size:12px;opacity:.7}.settings-wrapper{flex:1 1;min-height:0;width:100%;display:flex;flex-direction:column;gap:0}.settings-topbar{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.06)}.settings-topbar .menu-btn{display:none}.back-to-chat-btn{width:40px;height:40px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:hsla(0,0%,100%,.75);cursor:pointer;display:grid;place-items:center;font-size:18px;transition:all .2s ease}.back-to-chat-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,.1)}.settings-panel{flex:1 1;min-height:0;width:100%;border:none;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding:22px;overflow-y:auto;-webkit-overflow-scrolling:touch}.settings-panel h2{margin:0 0 8px;font-size:24px;line-height:1.1;letter-spacing:.2px}.settings-panel .muted{margin:0 0 16px;font-size:14px;opacity:.65;line-height:1.4}.empty-state{margin-top:12px;padding:16px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:rgba(120,120,255,.05)}.empty-state strong{display:block;margin-bottom:6px}.empty-state p{margin:0;font-size:13px;opacity:.7;line-height:1.4}.tone-options{display:flex;flex-direction:column;gap:8px;margin:16px 0}.tone-option{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:hsla(0,0%,100%,.65);cursor:pointer;transition:all .2s ease}.tone-option:hover{border-color:rgba(120,120,255,.3);background:rgba(120,120,255,.05)}.tone-option input[type=radio]{flex-shrink:0}.tone-option label{flex:1 1;cursor:pointer;font-size:14px}.custom-role-section{margin-top:24px;padding-top:24px;border-top:1px solid rgba(0,0,0,.08)}.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.form-group label{font-size:13px;font-weight:500;opacity:.85}.form-group input,.form-group select,.form-group textarea{padding:10px 12px;border:1px solid rgba(0,0,0,.12);border-radius:10px;background:hsla(0,0%,100%,.85);font-family:inherit;font-size:14px;outline:none;transition:border-color .2s ease}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:rgba(120,120,255,.5)}.form-group textarea{resize:vertical;min-height:80px;line-height:1.4}.form-helper{font-size:12px;opacity:.6;margin-top:4px;line-height:1.35}.save-role-btn{margin-top:12px;padding:12px 18px;border:1px solid rgba(120,120,255,.3);border-radius:12px;background:rgba(120,120,255,.15);color:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.save-role-btn:hover{background:rgba(120,120,255,.25);box-shadow:0 4px 12px rgba(120,120,255,.2)}@media (max-width:980px){body{overflow:auto}.app-shell{height:auto;min-height:100svh;flex-direction:column;padding:10px;gap:10px}.app-main,.app-shell{max-width:100%;width:100%}.app-main{flex:1 1}.sidebar{width:100%;min-width:0;max-width:100%;position:fixed;bottom:0;left:0;right:0;max-height:100svh;overflow-y:auto;border-radius:18px 18px 0 0;z-index:100;flex:auto;order:auto}.app-sidebar.hidden .sidebar{display:none}.app-main{min-height:70svh;padding:0;gap:8px}.chat-shell{gap:8px}.chat-box{border-radius:14px}.chat-scroll{padding:10px}.settings-panel{width:100%;max-width:100%;border-radius:0;padding:14px;background:transparent}.settings-topbar{padding:10px 0}.settings-topbar .menu-btn{display:grid!important}.back-to-chat-btn{width:40px;height:40px}.settings-wrapper{border-radius:14px;background:hsla(0,0%,100%,.58);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(0,0,0,.06);overflow:hidden}.chat-topbar{flex-wrap:wrap;gap:8px}.tone-row{flex:1 1;min-width:0;gap:6px}.tone-label{display:none}.tone-select{font-size:12px;padding:6px 8px;flex:1 1}.chat-topbar-right{flex:0 1;gap:6px}.new-chat-text{display:none}.new-chat-mobile{display:inline}.new-chat-btn{padding:8px 10px;font-size:16px;border-radius:10px}.menu-btn{display:grid!important;width:40px;height:40px}.hero-wrap{padding:0}.hero-card{border-radius:16px;padding:16px}.hero-title{font-size:32px}.chat-inputbar{gap:8px}.chat-inputbar input{padding:10px 12px;font-size:16px}.icon-btn{width:40px;height:40px}}