/* Homepage-only styles: stage, composer, quick cards, chat */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px 90px;gap:0;position:relative;transition:justify-content .3s}
.stage.chat{justify-content:flex-start;padding-top:56px;align-items:stretch}

.doodle{width:400px;height:auto;margin-bottom:40px;user-select:none;transition:all .35s ease;transform-origin:top center}
.stage.chat .doodle{width:0;height:0;margin:0;opacity:0}

.composer-wrap{width:768px;max-width:calc(100% - 32px);position:relative;transition:margin-top .3s}
.stage.chat .composer-wrap{margin-bottom:18px}

.composer{
  background:var(--bg-pure);
  border:1px solid rgba(0,0,0,.173);
  border-radius:24px;
  box-shadow:var(--shadow);
  position:relative;
}
.composer-inner{padding:12px 16px 10px}
.editor{
  outline:0;min-height:54px;font-size:16px;line-height:1.5;color:var(--text);
  max-height:200px;overflow-y:auto;word-break:break-word;
}
.editor:empty:before{content:attr(data-ph);color:rgba(0,0,0,.4)}
.composer-actions{display:flex;align-items:center;justify-content:space-between;padding:2px 8px 8px}
.ca-left,.ca-right{display:flex;align-items:center;gap:6px}
.round{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text)}
.round:hover{background:var(--hover)}
.round svg{width:18px;height:18px}
.send{width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.15);color:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;transition:background .15s}
.send.active{background:#111}
.send svg{width:16px;height:16px}
.mode{display:flex;align-items:center;gap:2px;padding:6px 8px;border-radius:8px;font-size:14px;color:var(--text)}
.mode:hover{background:var(--hover)}
.mode svg{width:14px;height:14px;color:var(--text-3);margin-left:2px}
.mode span{color:var(--text-2)}

/* quick carousel */
.quick{width:768px;max-width:calc(100% - 32px);margin-top:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.quick-track{display:flex;gap:0;padding:2px}
.qcard{
  flex:0 0 auto;scroll-snap-align:start;
  display:flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:999px;font-size:13px;color:var(--text);
  min-width:unset;white-space:nowrap;
  background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);margin-right:8px;
}
.qcard:hover{background:rgba(0,0,0,.07)}
.qcard svg{width:14px;height:14px;color:rgba(0,0,0,.75)}
.stage.chat .quick{display:none}

/* messages */
.messages{flex:1;width:768px;max-width:calc(100% - 32px);margin:0 auto;overflow-y:auto;display:none;flex-direction:column;gap:18px;padding-bottom:8px}
.stage.chat .messages{display:flex}
.msg{display:flex;gap:12px;align-items:flex-start}
.msg .av{width:28px;height:28px;border-radius:50%;flex:0 0 auto}
.msg.user{flex-direction:row-reverse}
.msg.user .bubble{background:#1763e0;color:#fff;border-radius:16px 16px 4px 16px}
.msg.tcm .av{background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.msg .bubble{max-width:78%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:#f0eee9;font-size:15px;line-height:1.6;white-space:pre-wrap}
.typing{display:inline-flex;gap:4px;padding:4px 0}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:blink 1.2s infinite both}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

@media(max-width:767px){
  .stage{padding:56px 16px 90px}
  .doodle{width:min(280px,72vw);margin-bottom:28px}
  .composer-wrap{width:100%}
}