[hidden]{display:none!important}
:root{--red:#e32119;--red-d:#b81a13;--ink:#1e2122;--ink2:#3b4248;--mute:#767676;--bg:#f4f5f6;--line:#e3e6e8;--card:#fff;--yellow:#ffc20e;--green:#1f8a4c;--r:16px}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'Libre Franklin','Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.45;display:flex;flex-direction:column;min-height:100vh}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.topbar{background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:64px;border-bottom:4px solid var(--red);flex:none;gap:12px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand .logo{height:40px;width:auto;display:block}
.brand .appname{border-left:1px solid #ffffff44;padding-left:14px;margin-left:2px}
.brand div{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-weight:800;letter-spacing:.02em;font-size:18px}
.brand span{font-weight:300;font-size:13px;opacity:.8;letter-spacing:.08em;text-transform:uppercase}
.proto{font-style:normal;background:var(--yellow);color:var(--ink);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:99px;margin-left:8px;white-space:nowrap}
.top-actions{display:flex;gap:8px;align-items:center}
.chip-btn,.top-actions select{background:transparent;color:#fff;border:1px solid #ffffff55;border-radius:99px;padding:7px 14px;font-size:14px;font-weight:500}
.chip-btn:hover{background:#ffffff1a}
.top-actions select{background:#2c3032;appearance:none;padding-right:14px}
.chip-btn[aria-pressed=false]{opacity:.65;border-style:dashed}

/* welcome */
.welcome{flex:1;display:flex;padding:32px 20px 100px;background:
 linear-gradient(135deg,rgba(30,33,34,.97) 0 55%,rgba(30,33,34,.88)),repeating-linear-gradient(90deg,#2a2e30 0 2px,transparent 2px 60px);color:#fff;position:relative;overflow:hidden}
.welcome:before{content:"";position:absolute;left:-10%;right:-10%;bottom:-40px;height:150px;background:
 repeating-linear-gradient(90deg,#3a3f42 0 14px,transparent 14px 54px) 0 40px/100% 14px no-repeat,linear-gradient(#cfd4d8,#cfd4d8) 0 56px/100% 5px no-repeat,linear-gradient(#cfd4d8,#cfd4d8) 0 92px/100% 5px no-repeat;opacity:.25;transform:perspective(500px) rotateX(35deg)}
.welcome:after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:var(--red);opacity:.9;filter:blur(2px)}
.welcome-inner{position:relative;z-index:1;max-width:980px;text-align:center;margin:auto}
.hero-mascot{width:170px;margin:0 auto -6px}
.welcome h1{font-size:clamp(34px,6vw,60px);font-weight:300;margin:0 0 8px;letter-spacing:-.02em}
.lead{font-size:18px;font-weight:300;max-width:640px;margin:0 auto 18px;opacity:.92}
.pick{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--yellow);margin:22px 0 12px}
.starters{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.starter{background:#fff;color:var(--ink);border:0;border-radius:var(--r);padding:20px 22px;width:270px;text-align:left;box-shadow:0 10px 30px #0006;transition:.15s;border-top:5px solid var(--red)}
.starter:hover{transform:translateY(-4px)}
.starter .av{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:10px}
.starter b{display:block;font-size:19px}
.starter small{display:block;color:var(--mute);margin-top:2px}
.starter .tag{display:inline-block;margin-top:10px;background:#f1f3f4;border-radius:99px;font-size:12px;font-weight:600;padding:3px 10px}
.starter .resume{display:block;margin-top:10px;font-size:13px;color:var(--red);font-weight:700;text-decoration:underline}
.fine{font-size:13px;opacity:.7;margin-top:22px}

/* app layout */
.app{flex:1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,1fr);gap:20px;padding:20px 24px 96px;max-width:1380px;width:100%;margin:0 auto;min-height:0}
.panel{background:var(--card);border-radius:var(--r);box-shadow:0 1px 3px #0001,0 8px 24px #0000000d;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.chat{height:calc(100vh - 64px - 40px - 78px);min-height:520px}
.plan{height:calc(100vh - 64px - 40px - 78px);min-height:520px;overflow:auto}
.chat-head{display:flex;align-items:center;gap:14px;padding:10px 20px 10px 14px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#fff 60%,#fff6f5)}
.mascot-wrap{width:112px;height:112px;flex:none;margin:-8px 0 -14px}
.mascot{width:100%;height:100%;overflow:visible}
.who{display:flex;flex-direction:column;flex:1;min-width:0}
.who b{font-size:20px}
.who span{color:var(--mute);font-size:14px}
.who span.live{color:var(--red);font-weight:600}
.head-clock{font-size:13px;font-weight:600;background:var(--ink);color:#fff;border-radius:10px;padding:6px 12px;text-align:right;line-height:1.25;white-space:nowrap}
.head-clock small{display:block;font-weight:400;opacity:.75}
.messages{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.msg{max-width:88%;display:flex;flex-direction:column;gap:6px;animation:pop .25s ease-out}
.msg.bot{align-self:flex-start}.msg.me{align-self:flex-end}
.bubble{padding:11px 15px;border-radius:18px;white-space:pre-wrap}
.bot .bubble{background:#f1f3f4;border-top-left-radius:4px}
.me .bubble{background:var(--ink);color:#fff;border-top-right-radius:4px}
.bubble.typing{display:inline-flex;gap:5px;align-items:center;padding:14px 16px}
.bubble.typing i{width:7px;height:7px;border-radius:50%;background:#9aa3ab;animation:dot 1s infinite}
.bubble.typing i:nth-child(2){animation-delay:.15s}.bubble.typing i:nth-child(3){animation-delay:.3s}
.sources{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--mute)}
.src{background:#fff;border:1px solid var(--line);border-radius:99px;padding:3px 10px;color:var(--ink2);font-weight:500}
.src:hover{border-color:var(--red);color:var(--red)}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:var(--red);color:#fff;border:0;border-radius:10px;padding:9px 16px;font-weight:600;text-decoration:none;display:inline-block;font-size:14.5px}
.btn:hover{background:var(--red-d)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid #cfd4d8}
.btn.ghost:hover{background:#f1f3f4}
.btn.sm{padding:6px 12px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:default}
.websearch{border:1px solid var(--line);border-radius:12px;background:#fff;padding:4px 14px;font-size:14.5px}
.websearch .res{padding:10px 0;border-bottom:1px solid var(--line)}.websearch .res:last-of-type{border:0}
.websearch a{color:#0b57d0;font-weight:600;text-decoration:none}.websearch a:hover{text-decoration:underline}
.websearch p{margin:2px 0 0;color:var(--ink2);font-size:13.5px}
.websearch .prov{font-size:12px;color:var(--mute);padding:8px 0;font-style:italic}
.suggest{display:flex;gap:8px;overflow-x:auto;padding:0 20px 10px;flex:none;align-items:center}
.suggest span{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em;font-weight:600;white-space:nowrap}
.suggest button{white-space:nowrap;background:#fff;border:1px solid #cfd4d8;border-radius:99px;padding:6px 13px;font-size:13.5px}
.suggest button:hover{border-color:var(--red);color:var(--red)}
.composer{display:flex;gap:10px;padding:12px 16px 16px;border-top:1px solid var(--line);flex:none}
.composer input{flex:1;border:1.5px solid #cfd4d8;border-radius:12px;padding:12px 16px;outline:none;min-width:0}
.composer input:focus{border-color:var(--red)}
.send{background:var(--ink);color:#fff;border:0;border-radius:12px;padding:0 22px;font-weight:600}
.send:hover{background:#000}
.mic{background:#fff;border:1.5px solid #cfd4d8;border-radius:12px;width:46px;font-size:18px}
.mic.on{background:var(--red);border-color:var(--red)}

/* task card */
.task{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px 14px;display:flex;flex-direction:column;gap:7px;box-shadow:0 2px 8px #0000000a;min-width:min(430px,100%)}
.task.is-done{background:#f4fbf6;border-color:#cfe9d8}
.task-top{display:flex;gap:10px;align-items:flex-start}
.ico{width:34px;height:34px;flex:none;border-radius:10px;background:#fdeceb;color:var(--red);display:flex;align-items:center;justify-content:center;font-size:17px}
.is-done .ico{background:#dff3e6;color:var(--green)}
.task h4{margin:0;font-size:15.5px;line-height:1.25}
.task .meta{font-size:12px;color:var(--mute);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.task p{margin:0;font-size:14px;color:var(--ink2)}
.donepill{color:var(--green);font-weight:700;font-size:13.5px}
.new-task{border-left:4px solid var(--red)}

/* plan */
.who-card{padding:18px 20px 12px;display:flex;gap:12px;align-items:center}
.who-card .av{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.who-card b{font-size:17px;display:block}.who-card small{color:var(--mute);display:block;line-height:1.3}
.progress{padding:4px 20px 12px}
.progress-top{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.bar{height:10px;background:#e9ecee;border-radius:99px;overflow:hidden}
.bar div{height:100%;background:linear-gradient(90deg,var(--red),#ff5b4f);width:0;transition:width .5s;border-radius:99px}
.daytabs{display:flex;gap:6px;padding:6px 20px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.daytabs button{flex:1;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 4px;font-weight:600;font-size:13.5px;line-height:1.2;color:var(--ink2)}
.daytabs button small{display:block;font-weight:400;font-size:11px;color:var(--mute)}
.daytabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}.daytabs button.on small{color:#cfd4d8}
.daytabs button.locked{opacity:.55}
.daytabs button.done:after{content:" \2713";color:var(--green)}
.tasklist{padding:10px 14px 24px;display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:9px 11px;background:#fff;cursor:pointer}
.row:hover{border-color:#b8bec3}
.row .st{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;border:2px solid #cfd4d8;color:#9aa3ab;background:#fff}
.row.done .st{background:var(--green);border-color:var(--green);color:#fff}
.row.due .st{border-color:var(--red);color:var(--red);animation:pulse 1.6s infinite}
.row.future{opacity:.55;cursor:default;background:#fafafa}
.row .tx{flex:1;min-width:0}.row .tx b{display:block;font-size:14.5px;line-height:1.25}
.row .tx small{color:var(--mute);font-size:12px}
.row .go{font-size:12.5px;font-weight:700;color:var(--red)}
.row.done .tx b{text-decoration:line-through;color:var(--mute)}
#dueBadge{font-style:normal}

/* demo bar */
.demo{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff8dc;border-top:3px solid var(--yellow);box-shadow:0 -6px 20px #0002}
.demo-toggle{display:block;width:100%;background:var(--yellow);border:0;padding:6px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--ink)}
.demo-body{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:flex-end;padding:8px 24px 10px;justify-content:center}
.demo.collapsed .demo-body{display:none}
.clock{background:var(--ink);color:#fff;border-radius:10px;padding:6px 14px;min-width:200px;text-align:center;line-height:1.2}
.clock b{font-size:18px;display:block}.clock small{opacity:.75}
.demo-group label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:#7a6200;margin-bottom:3px}
.btnrow{display:flex;gap:6px;flex-wrap:wrap}
.demo button:not(.demo-toggle){background:#fff;border:1px solid #d6c27a;border-radius:8px;padding:6px 11px;font-size:13px;font-weight:600}
.demo button:not(.demo-toggle):hover{background:#fff1b8}
.demo button.strong{background:var(--ink);color:#fff;border-color:var(--ink)}
.demo button.on{background:var(--red)!important;color:#fff;border-color:var(--red)}

/* modal */
.modal{position:fixed;inset:0;background:#0009;z-index:100;display:flex;align-items:center;justify-content:center;padding:18px;animation:fade .2s}
.modal[hidden]{display:none}
.modal-card{background:#fff;border-radius:18px;max-width:900px;width:100%;max-height:92vh;overflow:auto;padding:22px 24px;position:relative}
.modal-card.wide{max-width:1100px}
.modal-card h3{margin:0 40px 4px 0;font-size:22px}
.modal-card .sub{color:var(--mute);font-size:14px;margin:0 0 14px}
.x{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:34px;line-height:1;color:var(--mute)}
.modal video{width:100%;border-radius:12px;background:#000;max-height:62vh}
.modal iframe{width:100%;height:60vh;border:1px solid var(--line);border-radius:12px}
.modal .actions{display:flex;gap:10px;margin-top:14px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;font-size:14.5px;margin-bottom:5px}
.field input[type=text],.field select,.field textarea{width:100%;border:1.5px solid #cfd4d8;border-radius:10px;padding:10px 12px;outline:none;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red)}
.field textarea{min-height:80px;resize:vertical}
.field.err input,.field.err select,.field.err textarea{border-color:var(--red);background:#fff6f5}
.rating{display:flex;gap:8px}
.rating button{width:48px;height:48px;border-radius:12px;border:1.5px solid #cfd4d8;background:#fff;font-weight:700;font-size:17px}
.rating button.on{background:var(--red);border-color:var(--red);color:#fff}
.rating-lbl{display:flex;justify-content:space-between;width:264px;font-size:11.5px;color:var(--mute);margin-top:3px}
.errmsg{color:var(--red);font-weight:600;font-size:14px;margin-top:6px}
.checkrow{display:flex;gap:8px;align-items:center;font-weight:600}
.doc{font-size:15px}.doc h1{font-size:22px;margin:0 0 6px}.doc h2{font-size:17px;margin:18px 0 4px;padding:4px 8px;border-radius:6px}.doc h2.hl{background:#fff3c4}.doc blockquote{margin:0 0 10px;padding:8px 12px;background:#fff8dc;border-left:4px solid var(--yellow);font-size:13.5px}
table.data{border-collapse:collapse;width:100%;font-size:13px}table.data th{background:var(--ink);color:#fff;text-align:left;padding:7px 9px;position:sticky;top:0}table.data td{border-bottom:1px solid var(--line);padding:6px 9px;vertical-align:top}
.tabs{display:flex;gap:6px;margin:10px 0}.tabs button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;font-weight:600}.tabs button.on{background:var(--red);color:#fff;border-color:var(--red)}
.tablewrap{max-height:55vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:99px;z-index:200;font-weight:600;box-shadow:0 8px 24px #0005}
.toast[hidden]{display:none}
.mobile-tabs{display:none}

/* mascot animation */
.mascot .body{animation:bob 3.2s ease-in-out infinite;transform-origin:106px 240px}
.mascot .shadow{animation:shadow 3.2s ease-in-out infinite;transform-origin:106px 246px}
.mascot .eye{animation:blink 5s infinite}
.mascot .arm{transform:rotate(62deg);transition:transform .3s}
.mascot.waving .arm{animation:wave .55s ease-in-out infinite alternate}
.mascot.talking .mouth{animation:talk .26s ease-in-out infinite alternate}
.mascot.talking .body{animation:bobtalk .5s ease-in-out infinite}
.mascot.talking .hat{animation:hatnod .5s ease-in-out infinite}
.mascot.thinking .pupil{animation:look 1.2s ease-in-out infinite alternate}
.mascot:not(.talking) .mouth{transform:scale(1,1)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1.2deg)}}
@keyframes bobtalk{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px) rotate(.8deg)}}
@keyframes hatnod{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.5deg) translateY(-1px)}}
@keyframes shadow{0%,100%{transform:scale(1)}50%{transform:scale(.88)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes wave{from{transform:rotate(-28deg)}to{transform:rotate(-4deg)}}
@keyframes talk{from{transform:scale(1,.45)}to{transform:scale(1.12,1.7)}}
@keyframes look{from{transform:translateX(-4px)}to{transform:translateX(4px)}}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 #e3211966}70%{box-shadow:0 0 0 8px #e3211900}100%{box-shadow:0 0 0 0 #e3211900}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.mascot *{animation:none!important}}

@media (max-width:980px){
 .app{grid-template-columns:1fr;padding:12px 12px 120px}
 .chat,.plan{height:calc(100vh - 64px - 60px - 110px);min-height:420px}
 .mobile-tabs{display:flex;gap:6px}.mobile-tabs button{flex:1;padding:10px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:700}.mobile-tabs button.on{background:var(--ink);color:#fff}
 #dueBadge:not(:empty){background:var(--red);color:#fff;border-radius:99px;padding:1px 7px;margin-left:4px;font-size:12px}
 .app[data-tab=chat] .plan{display:none}.app[data-tab=plan] .chat{display:none}
 .topbar{padding:0 10px;height:56px}.brand b{font-size:15px}.brand span{display:none}.proto{display:none}.top-actions select,#kbBtn{display:none}.chip-btn{padding:6px 10px;font-size:13px;white-space:nowrap}.brand .logo{height:30px}
 .chat,.plan{height:calc(100vh - 56px - 60px - 70px)}.toast{bottom:80px;width:max-content;max-width:90vw;text-align:center}
 .head-clock{display:none}.demo-body{padding:6px 10px}.starter{width:100%}.task{min-width:0}
}