/* Prompt Bar / Thought Line interaction study, inspired by React Bits.
   https://reactbits.dev/micro/prompt-bar — https://reactbits.dev/micro/thought-line */
.question-app{width:min(560px,100%);margin:auto;font:15px/1.5 Arial,Helvetica,sans-serif;color:#181818}
.question-conversation{display:flex;flex-direction:column;gap:28px;margin-bottom:24px}
.question-conversation:empty{display:none}
.question-turn{display:flex;flex-direction:column;gap:20px;animation:question-arrive .25s ease both}
.question-user{align-self:flex-end;max-width:88%;background:#f3f3f3;border-radius:16px 16px 4px 16px;padding:12px 17px;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.prompt-bar{background:#f4f4f4;border:1px solid #ededed;border-radius:16px;padding:14px;transition:border-color .2s,box-shadow .2s;min-width:0}
.prompt-bar:focus-within{border-color:#c6c6c6;box-shadow:0 0 0 3px #00000003}
.prompt-bar textarea{display:block;resize:none;width:100%;min-height:50px;max-height:150px;overflow-y:auto;border:0;outline:none;background:transparent;color:inherit;padding:3px 3px 8px;font:15px/1.5 Arial,sans-serif;border-radius:0}
.prompt-bar textarea:focus-visible{outline:none}
.prompt-bar textarea::placeholder{color:#929292}
.prompt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.prompt-model{display:flex;align-items:center;gap:7px;color:#777;font-size:11px;padding-left:3px}
.prompt-model svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3}
.prompt-send{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:11px;background:#171717;color:#fff!important;padding:8px;transition:transform .2s,background .2s,opacity .2s}
.prompt-send:disabled{background:#dedede;color:#aaa!important;opacity:1;cursor:default}
.prompt-send:not(:disabled):active{transform:scale(.94)}
.prompt-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .24s}
.prompt-bar.is-busy .prompt-send svg{transform:rotate(90deg);opacity:.4}
.thought-line{color:#777;font-size:14px}
.thought-toggle{display:flex;align-items:center;gap:8px;border:0;padding:3px 0;background:none;color:inherit;text-align:left;min-height:30px;font:inherit}
.thought-spark{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;flex:none}
.is-thinking .thought-spark{animation:thought-breathe 1.6s ease-in-out infinite}
.thought-label{display:inline-block}
.is-thinking .thought-label{background:linear-gradient(100deg,#aaa 20%,#222 45%,#aaa 70%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:thought-shimmer 1.8s linear infinite}
.thought-time{font-variant-numeric:tabular-nums;min-width:3ch;color:#999}
.thought-chevron{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.3;transition:transform .3s;margin-left:1px}
.thought-toggle[aria-expanded=true] .thought-chevron{transform:rotate(180deg)}
.thought-trace{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .35s,opacity .25s}
.thought-trace.is-open{grid-template-rows:1fr;opacity:1}
.thought-trace-inner{overflow:hidden;min-height:0}
.thought-steps{list-style:none;margin:9px 0 8px 8px;padding:0 0 0 19px;border-left:1px solid #e2e2e2;font-size:12px;line-height:1.65;color:#999}
.thought-steps li{position:relative;padding:3px 0;animation:question-arrive .22s ease both}
.thought-steps li::before{content:'✓';position:absolute;left:-24px;top:3px;background:#fff;font-size:9px;color:#999;width:9px;text-align:center}
.thought-steps li:last-child{color:#555}
.is-thinking .thought-steps li:last-child::before{content:'·';font-size:16px;animation:thought-breathe 1s infinite}
.question-reply{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.question-answer{font:inherit;max-width:88%;background:#f8f8f8;border-radius:16px 16px 16px 4px;padding:12px 17px;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;animation:question-arrive .32s ease both}
.question-answer[hidden]{display:none}
.question-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes thought-breathe{50%{opacity:.35;transform:scale(.9)}}
@keyframes thought-shimmer{to{background-position:-250% 0}}
@keyframes question-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:767px){.question-app{width:100%}.prompt-bar textarea{font-size:16px}.question-answer,.question-user{font-size:14px}}
@media(prefers-reduced-motion:reduce){.question-app *{animation:none!important;transition:none!important}}