:root{
  --washi:#f5f4ef; --panel:#edece4; --panel-2:#e6e4d9; --sel:#e5ebf1;
  --surface:#ffffff;
  --sumi:#1c1b17; --sumi-soft:#6a675e; --muted:#a5a196;
  --line:#e0ddd1; --line-2:#d7d3c6;
  --ai:#2d6398; --ai-deep:#254f7c; --ai-tint:#dfe8f1;
  --shu:#c1392e;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background:var(--washi);color:var(--sumi);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;height:100vh;height:100dvh;overflow:hidden;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--ai);outline-offset:2px;}
.hidden{display:none !important;}

/* ---- Login gate ---- */
.gate{height:100%;display:grid;place-items:center;padding:24px;background:radial-gradient(120% 80% at 50% -10%, #e9ecf1 0%, var(--washi) 60%);}
.gate-card{width:100%;max-width:340px;display:grid;justify-items:center;gap:12px;text-align:center;}
.seal-lg{width:52px;height:52px;}
.gate-word{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:32px;letter-spacing:-.02em;margin:6px 0 0;}
.gate-word .the{color:var(--muted);} .gate-word .ai{color:var(--ai);}
.gate-tag{color:var(--sumi-soft);margin:0 0 8px;font-size:14px;}
#login-form{display:grid;gap:10px;width:100%;}
#password{width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface);font-size:16px;font-family:inherit;color:var(--sumi);}
#password::placeholder{color:var(--muted);}
.gate-btn{padding:13px;border:0;border-radius:11px;background:var(--ai);color:#fff;font-size:16px;font-weight:500;transition:background .15s;}
.gate-btn:hover{background:var(--ai-deep);}
.gate-error{color:#b23a2e;font-size:13.5px;min-height:18px;margin:2px 0 0;}

/* ---- App shell ---- */
.app{display:grid;grid-template-columns:270px 1fr;height:100%;}
.sidebar{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;}
.side-head{display:flex;align-items:center;gap:10px;padding:16px 16px 8px;}
.seal{width:26px;height:26px;flex:none;}
.brand{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:16px;letter-spacing:-.01em;}
.brand .ai{color:var(--ai);}
.new-chat{margin:8px 12px 10px;padding:10px 12px;border:0;border-radius:10px;background:var(--ai);color:#fff;font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;justify-content:center;transition:background .15s;}
.new-chat:hover{background:var(--ai-deep);}
.scroll{flex:1;overflow-y:auto;padding:8px 8px 16px;min-height:0;}
.section{margin-top:22px;} .section:first-child{margin-top:6px;}
.sec-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#b4b0a4;padding:4px 8px 9px;font-weight:500;}
.rec-note{font-size:12px;color:var(--muted);padding:2px 8px;line-height:1.5;margin:2px 0 0;}
.item{display:flex;align-items:center;gap:8px;padding:9px 8px;border-radius:9px;font-size:13.5px;color:var(--sumi);border:0;background:transparent;width:100%;text-align:left;}
.item:hover{background:var(--panel-2);}
.item.active{background:var(--sel);}
.item .ico{flex:none;color:var(--sumi-soft);display:grid;place-items:center;}
.item .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.item .star{flex:none;border:0;background:transparent;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--muted);opacity:0;transition:opacity .12s;}
.item:hover .star{opacity:1;} .item .star.on{opacity:1;color:var(--shu);}
.side-foot{border-top:1px solid var(--line);padding:10px 12px;display:flex;align-items:center;gap:10px;}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--ai);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none;}
.who{font-size:13px;line-height:1.2;} .who small{color:var(--muted);font-size:11px;}
.gear{margin-left:auto;border:0;background:transparent;color:var(--muted);width:30px;height:30px;border-radius:7px;display:grid;place-items:center;}
.gear:hover{background:var(--panel-2);color:var(--sumi);}

/* ---- Main ---- */
.main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;}
.menu-btn{display:none;}

.home{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12vh 20px 40px;overflow-y:auto;}
.wordmark{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:44px;letter-spacing:-.018em;line-height:1;}
.wordmark .the{color:var(--muted);} .wordmark .ai{color:var(--ai);}
.sword{width:min(360px,86vw);height:auto;margin:16px 0 28px;display:block;}
.mode{display:inline-flex;background:var(--panel);border-radius:999px;padding:3px;margin-bottom:22px;}
.mode-btn{border:0;background:transparent;color:var(--sumi-soft);padding:7px 15px;border-radius:999px;font-size:13px;font-weight:500;}
.mode-btn.is-active{background:var(--ai);color:#fff;}
.search{width:100%;max-width:620px;display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 20px;box-shadow:0 1px 2px rgba(28,27,23,.04);transition:box-shadow .18s,border-color .18s;}
.search:focus-within{box-shadow:0 8px 30px rgba(28,27,23,.09);border-color:var(--line-2);}
.search input{flex:1;border:0;outline:0;font-size:16px;font-family:inherit;color:var(--sumi);background:transparent;}
.search input::placeholder{color:var(--muted);}
.send{flex:none;border:0;background:transparent;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--ai);transition:background .15s;}
.send:hover{background:var(--ai-tint);}
.send-fill{background:var(--ai);color:#fff;width:38px;height:38px;border-radius:10px;}
.send-fill:hover{background:var(--ai-deep);}

.voice-btn{margin-top:18px;display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border:1px solid var(--line-2);background:var(--surface);border-radius:999px;font-size:14px;color:var(--sumi);transition:border-color .15s,background .15s;}
.voice-btn:hover{border-color:#cfcbbe;}
.voice-btn .vico{display:grid;place-items:center;width:18px;height:18px;color:var(--ai);}
.voice-btn.listening{background:var(--ai);color:#fff;border-color:var(--ai);}
.voice-btn.listening .vico{color:#fff;}
.voice-btn .dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:pulse 1.1s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.75);}50%{opacity:1;transform:scale(1.15);}}
.coach-prompt{max-width:540px;text-align:center;color:var(--sumi-soft);font-size:15px;line-height:1.55;margin:20px 0 0;}

/* ---- Conversation ---- */
.chat{flex:1;display:flex;flex-direction:column;min-height:0;}
.chat-head{display:flex;align-items:center;gap:8px;padding:13px 20px;border-bottom:1px solid var(--line);}
.back{border:0;background:transparent;color:var(--sumi-soft);width:30px;height:30px;border-radius:8px;display:grid;place-items:center;}
.back:hover{background:var(--panel);}
.chat-title{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%;}
.chat-model{font-size:12px;color:var(--muted);margin-left:2px;}
.chat-star{margin-left:auto;border:0;background:transparent;color:var(--muted);width:32px;height:32px;border-radius:8px;display:grid;place-items:center;}
.chat-star:hover{background:var(--panel);} .chat-star.on{color:var(--shu);}
.thread{flex:1;overflow-y:auto;padding:24px 20px;display:flex;flex-direction:column;gap:16px;max-width:820px;width:100%;margin:0 auto;}
.msg{position:relative;max-width:88%;padding:13px 16px;border-radius:14px;font-size:15px;line-height:1.6;white-space:pre-wrap;word-wrap:break-word;}
.msg.user{align-self:flex-end;background:var(--ai);color:#fff;border-bottom-right-radius:5px;}
.msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px;}
.msg.bot.pending{color:var(--sumi-soft);font-style:italic;}
.msg-keep{position:absolute;top:-9px;right:-6px;width:22px;height:22px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);display:grid;place-items:center;opacity:.4;transition:opacity .12s,color .12s;box-shadow:0 1px 2px rgba(28,27,23,.08);}
.msg:hover .msg-keep{opacity:1;}
.msg-keep.on{opacity:1;color:var(--shu);border-color:#e4b6b0;}
.msg.kept{box-shadow:0 0 0 1.5px var(--shu);}
.msg.pending .msg-keep{display:none;}
.composer{display:flex;align-items:flex-end;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);max-width:820px;width:100%;margin:0 auto;}
.composer textarea{flex:1;resize:none;max-height:160px;padding:12px 15px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);font-size:16px;font-family:inherit;line-height:1.5;color:var(--sumi);}

@media (max-width:820px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:fixed;z-index:20;width:270px;height:100%;transform:translateX(-100%);transition:transform .2s;}
  .sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.15);}
  .menu-btn{display:grid;place-items:center;position:absolute;top:12px;left:12px;z-index:10;width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--sumi);}
  .home{padding-top:13vh;} .wordmark{font-size:34px;} .chat-head{padding-left:60px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;} .voice-btn .dot{animation:none;}}