/* Vibe existing-client feedback chat (vibereformer.au/client-feedback.html).
   Vibe colours only: olive #505238, sage #858869, blush #D8A6A5, linen #F4EDE3, brown #3A2928. No yellow, gold or amber. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');
:root{--olive:#505238;--olive-dark:#3f412b;--sage:#858869;--blush:#D8A6A5;--blush-soft:#f2dedd;--linen:#F4EDE3;--brown:#3A2928;--cream:#faf6f0;--line:#e3d8cb;--white:#fffdf9;--muted:#6f625c;--bad:#f6e1df}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--cream);color:var(--brown);font:16px/1.5 'DM Sans',Arial,sans-serif;min-width:320px}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--olive)}
:focus-visible{outline:3px solid var(--sage);outline-offset:3px}
.topbar{height:72px;background:var(--white);display:flex;align-items:center;gap:20px;padding:0 clamp(16px,4vw,60px);border-bottom:1px solid var(--line)}
.brand img{width:96px;max-height:52px;object-fit:contain;display:block}
.topbar-note{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.topbar-back{margin-left:auto;text-decoration:none;font-weight:700;font-size:.88rem;color:var(--olive)}
.page{width:min(760px,100%);margin:0 auto;padding:clamp(14px,3vw,36px) clamp(10px,3vw,24px) 40px}
.chat{background:var(--white);border:1px solid var(--line);border-radius:26px;box-shadow:0 18px 50px rgba(58,41,40,.08);overflow:hidden;display:flex;flex-direction:column;min-height:min(78vh,760px)}
.chat-head{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:16px 20px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fffdf9,#fbf6ef)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--olive);color:var(--linen);display:grid;place-items:center;font:500 1.3rem/1 'Playfair Display',Georgia,serif;grid-row:span 2}
.chat-head strong{font:500 1.15rem/1.2 'Playfair Display',Georgia,serif;color:var(--brown)}
.chat-head small{display:block;color:var(--muted);font-size:.82rem}
.progress{grid-column:1/-1;height:5px;background:var(--linen);border-radius:99px;margin-top:10px;overflow:hidden}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sage),var(--olive));border-radius:99px;transition:width .5s ease}
.thread{flex:1;padding:22px clamp(14px,3vw,26px) 10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:62vh;scroll-behavior:smooth}
.msg{max-width:min(84%,560px);padding:11px 16px;border-radius:20px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.msg.bot{align-self:flex-start;background:var(--linen);border-bottom-left-radius:6px}
.msg.bot + .msg.bot{border-top-left-radius:6px}
.msg.bot.hint{background:transparent;color:var(--muted);font-size:.9rem;padding:0 4px 2px;max-width:90%}
.msg.bot.problem{background:var(--bad)}
.msg.me{align-self:flex-end;background:var(--olive);color:#fff;border-bottom-right-radius:6px;margin-top:4px}
.msg.me ol{margin:0;padding-left:20px}
.msg.me .rate{display:block;font-weight:700}
.msg.me .note{display:block;opacity:.9;font-size:.92rem;margin-top:2px}
.msg.me .stars{letter-spacing:2px;font-size:1.25rem;color:var(--blush)}
.edit{align-self:flex-end;border:0;background:none;color:var(--sage);font-size:.8rem;font-weight:700;padding:0 6px 6px;text-decoration:underline;text-underline-offset:2px}
.edit:hover{color:var(--olive)}
.anim{animation:pop .32s ease both}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.typing{align-self:flex-start;background:var(--linen);border-radius:20px;border-bottom-left-radius:6px;padding:14px 16px;display:flex;gap:5px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--sage);animation:blink 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.composer{border-top:1px solid var(--line);padding:14px clamp(12px,3vw,22px) 16px;background:#fdfaf5;display:grid;gap:10px}
.composer:empty{display:none}
.row{display:flex;gap:8px;align-items:flex-end}
.field{flex:1;width:100%;border:1px solid var(--line);background:#fff;border-radius:18px;padding:12px 16px;transition:border-color .2s ease,box-shadow .2s ease;resize:vertical}
.field:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(133,136,105,.18);outline:none}
textarea.field{min-height:96px}
.send{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--olive);color:#fff;display:grid;place-items:center;transition:background .2s ease,transform .15s ease}
.send:hover{background:var(--olive-dark);transform:translateY(-1px)}
.send svg{width:20px;height:20px}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--olive);background:#fff;color:var(--olive);border-radius:999px;padding:9px 16px;font-weight:600;transition:background .2s ease,color .2s ease,transform .15s ease}
.chip:hover{background:var(--linen);transform:translateY(-1px)}
.chip[aria-pressed=true]{background:var(--olive);color:#fff}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scale .chip{border-radius:16px;padding:10px 4px;display:grid;gap:2px;text-align:center}
.scale .chip b{font-size:1.15rem}
.scale .chip small{font-size:.72rem;font-weight:600;line-height:1.2}
.starbar{display:flex;gap:6px;justify-content:center;padding:4px 0}
.star{border:0;background:none;padding:2px;transition:transform .15s ease}
.star:hover{transform:scale(1.12)}
.star svg{width:44px;height:44px;fill:#fff;stroke:var(--blush);stroke-width:1.6;transition:fill .15s ease}
.star.on svg{fill:var(--blush);stroke:#b98382}
.star-label{text-align:center;color:var(--muted);font-weight:600;min-height:1.5em;margin:0}
.three{display:grid;gap:8px}
.three label{display:flex;gap:10px;align-items:center}
.three span{width:26px;height:26px;border-radius:50%;background:var(--blush-soft);color:var(--brown);display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{border:0;background:var(--olive);color:#fff;border-radius:999px;padding:11px 20px;font-weight:700;transition:background .2s ease,transform .15s ease;text-decoration:none;display:inline-block}
.btn:hover{background:var(--olive-dark);transform:translateY(-1px)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.btn.ghost{background:transparent;color:var(--olive);border:1.5px solid var(--line)}
.btn.ghost:hover{background:var(--linen)}
.quiet{border:0;background:none;color:var(--muted);font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:6px}
.meta{margin-left:auto;color:var(--muted);font-size:.8rem}
.error{background:var(--bad);color:var(--brown);border-radius:14px;padding:10px 14px;font-size:.92rem}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--brown)}
.consent input{margin-top:4px;width:18px;height:18px;accent-color:var(--olive)}
.privacy-note{color:var(--muted);font-size:.84rem;text-align:center;margin:18px auto 0;max-width:620px;line-height:1.55}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.noscript{padding:20px;text-align:center}
@media (max-width:560px){
  .topbar-note{display:none}
  .chat{border-radius:20px;min-height:calc(100vh - 120px)}
  .thread{max-height:none}
  .msg{max-width:90%}
  .scale .chip small{font-size:.66rem}
  .star svg{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){.anim,.typing i{animation:none}.thread{scroll-behavior:auto}}