/* Stylist chat visual revision: existing stages, prompts, transcript and composer. */
#stylist-stage-chat .chat-topbar{padding-block:12px;background:var(--paper)}
#stylist-stage-chat .chat-identity{gap:10px}.chat-identity strong{font-size:16px;line-height:1.5}.chat-identity small{font-size:11px}
.chat-avatar.chat-avatar-top{width:36px;height:36px;background:var(--ink);color:var(--paper);border:1px solid var(--line)}
#stylist-stage-chat .chat-messages{gap:16px;padding-block:20px 12px}
#stylist-stage-chat .chat-intro{gap:6px;margin-bottom:10px}.chat-intro .chat-avatar-big{width:58px;height:66px;border-radius:50% 50% 20px 20px;background:var(--white);color:var(--ink);border:1px solid var(--line);font-size:27px;box-shadow:0 6px 20px #00000004}
#stylist-stage-chat .chat-intro h2{font-size:22px;font-weight:700;letter-spacing:0}#stylist-stage-chat .chat-intro p{font-size:13px}
#stylist-stage-chat .chat-message{max-width:94%;gap:8px;animation:chat-message-in .18s ease-out}
#stylist-stage-chat .chat-message>.chat-avatar{width:25px;height:25px;font-size:12px;background:var(--surface-soft);color:var(--ink);border:1px solid var(--line)}
#stylist-stage-chat .chat-message>div{padding:12px 14px;background:var(--white);border:1px solid var(--line);border-radius:18px 5px 18px 18px;box-shadow:0 2px 10px #00000002}
#stylist-stage-chat .chat-message p{font-size:14px;line-height:1.85}
#stylist-stage-chat .chat-message.user{max-width:85%}#stylist-stage-chat .chat-message.user>div{background:var(--ink);border-color:var(--ink);color:var(--paper);border-radius:5px 18px 18px 18px}
html[dir=ltr] #stylist-stage-chat .chat-message>div{border-radius:5px 18px 18px 18px}html[dir=ltr] #stylist-stage-chat .chat-message.user>div{border-radius:18px 5px 18px 18px}
#stylist-stage-chat .chat-welcome>div{background:transparent;box-shadow:none;border:none;padding:2px 0 8px}#stylist-stage-chat .chat-welcome>.chat-avatar{display:none}
#stylist-stage-chat .chat-suggestions{gap:10px;margin-block:4px 12px}#stylist-stage-chat .chat-sug{min-height:88px;padding:10px;gap:10px;border-radius:18px;font-size:12px;font-weight:600;background:var(--white);transition:background .16s,border-color .16s,transform .16s}
#stylist-stage-chat .chat-sug:hover{border-color:var(--ink);background:var(--accent-soft)}#stylist-stage-chat .chat-sug:active{transform:scale(.98)}
#stylist-stage-chat .sug-art{width:43px;height:62px;border-radius:45% 45% 9px 9px;background:var(--paper);color:var(--ink);padding:4px}
#stylist-stage-chat .sug-art .occasion-art{position:static;width:100%;height:100%}#stylist-stage-chat .sug-art .occasion-art img{width:100%;height:100%;object-fit:contain}#stylist-stage-chat .sug-glyph svg{width:25px;height:25px}
#stylist-stage-chat .chat-composer{padding:6px;margin-block:8px 10px;border:1px solid var(--line);border-radius:28px;background:var(--white);box-shadow:0 4px 18px #00000004;gap:6px;align-items:flex-end}
#stylist-stage-chat .chat-composer textarea{border:0;background:transparent;border-radius:0;padding:10px 12px;font-size:16px;line-height:1.45;color:var(--ink)}
#stylist-stage-chat .chat-composer:focus-within{border-color:var(--ink)}#stylist-stage-chat .chat-send{width:42px;height:42px;color:var(--muted);background:var(--surface-soft)}#stylist-stage-chat .chat-send.has-text{background:var(--ink);color:var(--paper)}
#stylist-stage-chat .chat-pinned-look{border-radius:18px;padding:10px;background:var(--white);gap:8px}.pinned-thumb,.pinned-thumbs.many .pinned-thumb{border:1px solid var(--line);border-radius:40% 40% 7px 7px;background:var(--paper)}
#stylist-stage-chat .pinned-thumb>img,#stylist-stage-chat .pinned-thumb>.photo-frame,#stylist-stage-chat .sug-piece>img{object-fit:contain;border-radius:inherit}
#stylist-stage-chat .chat-look-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:14px}.chat-look-tiles{gap:8px}.chat-outfit-piece{border-radius:40% 40% 10px 10px;background:var(--paper)}
#stylist-stage-chat .chat-pill{border-color:var(--line);background:var(--white);color:var(--ink)}
@keyframes chat-message-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#stylist-stage-chat .chat-message{animation:none}#stylist-stage-chat .chat-sug{transition:none}}
@media(max-width:360px){#stylist-stage-chat .chat-sug{gap:7px;padding:8px;font-size:11.5px}#stylist-stage-chat .sug-art{width:36px;height:55px}.pinned-thumbs.many .pinned-thumb{width:26px;height:32px}}

#stylist-stage-chat .chat-look-tiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}#stylist-stage-chat .chat-outfit-piece{grid-column:span 2;height:118px;background:var(--paper);border:1px solid var(--line);border-radius:40% 40% 10px 10px}#stylist-stage-chat .chat-look-tiles:is([data-count="2"],[data-count="4"]) .chat-outfit-piece{grid-column:span 3}#stylist-stage-chat .chat-look-tiles[data-count="1"] .chat-outfit-piece{grid-column:span 6}#stylist-stage-chat .chat-look-tiles[data-count="5"] .chat-outfit-piece:nth-child(-n+2){grid-column:span 3}
#stylist-stage-chat .chat-outfit-piece img{object-fit:contain;padding:8px}#stylist-stage-chat .chat-outfit-piece .result-piece-placeholder{display:flex;position:absolute;inset:8px;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--muted)}#stylist-stage-chat .result-piece-placeholder svg{width:32px;height:32px}#stylist-stage-chat .result-piece-placeholder small{font-size:10px}#stylist-stage-chat .pinned-thumb .result-piece-placeholder{display:grid;place-items:center;height:100%;color:var(--muted)}#stylist-stage-chat .pinned-thumb .result-piece-placeholder svg{width:20px;height:20px}#stylist-stage-chat .pinned-thumb .result-piece-placeholder small{display:none}
#stylist-stage-chat .chat-piece-swap{top:auto;bottom:8px;inset-inline-end:8px;background:var(--white);color:var(--ink);border:1px solid var(--line)}

/* The stylist's voice messages (2026-10-22): the mic beside the send button. */
#stylist-chat-mic{flex:0 0 auto;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--ink);display:grid;place-items:center;padding:0}
#stylist-chat-mic.recording{background:var(--danger-text);border-color:var(--danger-text);color:#fff;animation:mic-pulse 1.2s ease-in-out infinite}
#stylist-chat-mic:disabled{opacity:.55}
@keyframes mic-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion: reduce){#stylist-chat-mic.recording{animation:none}}