/* Simplified acquisition version of the live blue Storytailor prompt surface.
   Colors, 26px shell, 10px shell padding and 8px text inset, chip and send states sampled from the app. */
.sth .sth-prompt,.prompt-study .sth-prompt{box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:642px;padding:10px;border:1px solid var(--color-warm-800);border-radius:var(--radius-dock-inner);background:var(--color-ink);box-shadow:var(--shadow-raised)}
.sth-prompt textarea{box-sizing:border-box;display:block;width:100%;min-height:36px;max-height:232px;margin:0;padding:8px;border:0;border-radius:0;outline:none;resize:none;overflow:auto;background:transparent;color:var(--color-cream-50);font:400 14px/20px var(--font-body);letter-spacing:normal}
.sth-prompt textarea::placeholder{color:rgb(247 241 232 / 0.7)}
.sth-prompt textarea:focus-visible{outline:none}
.sth-prompt .sth-prompt-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sth-prompt .sth-idea-next,.sth-prompt .sth-send{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;height:36px;min-height:36px;margin:0;border:0;border-radius:var(--radius-full);font:400 12px/18px var(--font-body);cursor:pointer;transition:background-color 260ms cubic-bezier(.4,0,.2,1),box-shadow 260ms}
.sth-prompt .sth-idea-next{padding:0 12px;background:var(--color-warm-800);color:var(--color-cream-50);width:auto;flex:0 1 auto}
.sth-prompt .sth-idea-next:hover{background:var(--color-warm-800)}.sth-prompt .sth-idea-next:active{background:var(--color-warm-800);transform:none}
.sth-prompt .sth-send{flex:0 0 36px;width:36px;padding:8px;background:var(--color-warm-25);color:var(--color-ink)}
.sth-prompt .sth-send:hover{background:rgb(247 241 232 / 0.88)}.sth-prompt .sth-send:disabled{background:rgb(247 241 232 / 0.4);opacity:1;cursor:default}
.sth-prompt .sth-send svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.sth-prompt .sth-idea-next:focus-visible,.sth-prompt .sth-send:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-ink),0 0 0 4px var(--color-warm-25)}
/* Match the app's invisible enlarged targets while keeping its 36px controls. */
.sth-prompt .sth-idea-next:before,.sth-prompt .sth-send:before{content:'';position:absolute;inset:-4px}
@media(max-width:600px){.sth-prompt textarea{font-size:17px;line-height:22px}}
@media(prefers-reduced-motion:reduce){.sth-prompt *{transition:none!important}}

.sth .sth-prompt:focus-within,.prompt-study .sth-prompt:focus-within{box-shadow:0 0 0 3px rgba(28,25,21,.24),var(--shadow-raised)}

/* Exact Figma 758:25831 glyphs. Populated CTA adds the approved acquisition label. */
.sth-prompt img{display:block;width:20px;height:20px;flex:none}
.sth-prompt .sth-idea-label{display:block;font-size:12px;margin:0;padding:0 2px}
.sth-prompt .sth-send-label{display:none;margin:0;font-size:12px}
.sth-prompt .sth-send.is-ready{width:auto;flex:0 0 auto;padding:8px 12px;gap:6px}
.sth-prompt .sth-send.is-ready .sth-send-label{display:block}
@media(max-width:370px){.sth-prompt .sth-prompt-actions{flex-wrap:wrap;row-gap:12px}.sth-prompt .sth-send{margin-left:auto}}

/* Owner-selected Figma 827:25176 / 25153 / 25108 / 25071.
   Messages belong to the shell and only appear for actual context or feedback. */
.sth-prompt-frame{--prompt-message-bg:var(--color-ink);--prompt-message-ink:var(--color-cream-50);border-radius:var(--radius-dock-inner);background:transparent}
.sth-prompt-frame[data-prompt-state]:not([data-prompt-state=""]){background:var(--prompt-message-bg)}
.sth-prompt-frame[data-prompt-state=warning]{--prompt-message-bg:var(--color-lamp-400);--prompt-message-ink:var(--color-ink)}
.sth-prompt-frame[data-prompt-state=error]{--prompt-message-bg:var(--color-red-500)}
.prompt-study .sth-prompt-frame>.sth-feedback,.sth .sth-prompt-frame>.sth-feedback{box-sizing:border-box;margin:0;padding:8px max(12px,calc((100% - 528px)/2));color:var(--prompt-message-ink);background:transparent;font:500 14px/20px var(--font-body);letter-spacing:normal;text-align:center;overflow-wrap:anywhere;border-radius:0 0 var(--radius-dock-inner) var(--radius-dock-inner)}
.prompt-study .sth-prompt-frame>.sth-feedback:empty,.sth .sth-prompt-frame>.sth-feedback:empty{display:none}
.prompt-study .sth-prompt-frame[data-prompt-state=sending]>.sth-feedback,.sth .sth-prompt-frame[data-prompt-state=sending]>.sth-feedback{padding:8px 16px 12px}
/* The note shares the outer silhouette. Keep the existing dock size, input,
   actions and collapse transitions; only move its border to the blue surface
   while a note is visible. */
.sth-dock:not(.is-collapsed):has(.sth-feedback:not(:empty)){border-color:transparent;background:transparent}
.sth-dock:not(.is-collapsed) .sth-prompt-frame:has(>.sth-feedback:not(:empty))>.sth-prompt{box-shadow:inset 0 0 0 1px var(--color-warm-800)}
.sth-dock:not(.is-collapsed) .sth-prompt-frame:has(>.sth-feedback:not(:empty))>.sth-prompt:focus-within{box-shadow:inset 0 0 0 1px var(--color-warm-800),inset 0 0 0 3px rgb(247 241 232 / 0.75)}
.sth-prompt-frame .sth-progress-copy{display:flex;justify-content:space-between;gap:16px;font-size:12px;line-height:18px;font-weight:400;text-align:left}
.sth-prompt-frame .sth-prompt-progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:8px;margin:4px 0 0;border:0;border-radius:var(--radius-full);overflow:hidden;background:var(--color-warm-200);color:var(--color-warm-800)}
.sth-prompt-progress::-webkit-progress-bar{background:var(--color-warm-200);border-radius:var(--radius-full)}
.sth-prompt-progress::-webkit-progress-value{background:var(--color-warm-800);border-radius:var(--radius-full)}
.sth-prompt-progress::-moz-progress-bar{background:var(--color-warm-800);border-radius:var(--radius-full)}
.sth-prompt-progress:indeterminate{background:linear-gradient(90deg,var(--color-warm-200) 0 25%,var(--color-warm-800) 25% 65%,var(--color-warm-200) 65% 100%);background-size:200% 100%;animation:prompt-working 1.7s ease-in-out infinite}
.sth-prompt-progress:indeterminate::-webkit-progress-bar{background:transparent}
@keyframes prompt-working{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.sth-prompt-progress:indeterminate{animation:none}}
/* At the narrowest phone width, keep the existing arrow control and its
   accessible name instead of squeezing the two action labels. */
@media(max-width:370px){.sth-dock .sth-send.is-ready .sth-send-label{display:none}.sth-dock .sth-send.is-ready{width:44px;flex:0 0 44px;padding:8px}}