/* DubdibAi! chat motion: native SVG, no emoji, responsive, accessible. */
.chat-livebar{
  display:flex;align-items:center;gap:11px;margin:0;padding:12px 24px;
  background:linear-gradient(100deg,#f4faff 0%,#eaf6ff 70%,#f7fbff);
  border-bottom:1px solid #e0edf9;color:#4c84b9;
  animation:chat-live-enter .22s ease both;
}
.chat-livebar[hidden]{display:none}
.chat-live-emblem{display:grid;place-items:center;height:30px;width:30px;border-radius:10px;flex:none;
  background:linear-gradient(140deg,#4296ea,#82d1ff);box-shadow:0 5px 14px #4296ea2d;color:#fff}
.chat-live-emblem svg{width:17px;height:17px;stroke-width:2.1;animation:chat-glow-spin 3.4s ease-in-out infinite}
.chat-live-words{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
#chat-live-label{font-size:12px;font-weight:700;color:#3e7db3}
.chat-live-subtitle{font-size:10px;color:#89a9c3;line-height:1.6}
.chat-live-time{flex:none;border-radius:9px;padding:7px 10px;background:white;border:1px solid #dae9f8;
  color:#317cbe;font:700 12px 'Plus Jakarta Sans',sans-serif;min-width:64px;text-align:center;font-variant-numeric:tabular-nums}
.chat-livebar[data-phase=thinking] .chat-live-emblem{animation:chat-emblem-pulse 1.5s ease-in-out infinite}
.chat-livebar[data-phase=typing] .chat-live-emblem{background:linear-gradient(140deg,#3caab8,#7bdad7)}
.real-chat-message.mine{animation:chat-sent-in .25s cubic-bezier(.15,.8,.4,1) both}
.real-chat-message.theirs{animation:chat-received-in .3s cubic-bezier(.18,.8,.32,1) both}
.real-chat-message.chat-is-working{border-color:#d5e9fc;background:linear-gradient(120deg,#fff,#f8fcff);min-width:min(300px,80%);}
.real-chat-message.chat-is-working>p[hidden]{display:none}
.real-chat-message.chat-is-finished{transition:background .25s,border-color .25s}
.real-chat-message.chat-is-error{border-color:#fadadd;background:#fffafa}
.chat-motion{display:flex;align-items:center;gap:10px;min-width:0}
.chat-motion-symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:#eaf5ff;color:#4a9de8;flex:none}
.chat-motion-symbol svg{width:17px;height:17px}
.chat-motion[data-phase=thinking] .chat-motion-symbol svg{animation:chat-glow-spin 2.3s ease-in-out infinite}
.chat-motion[data-phase=typing] .chat-motion-symbol{background:#e8faf8;color:#299b9b}
.chat-motion-copy{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.chat-motion-heading{font-size:12px;color:#4479a6;line-height:1.45}
.chat-motion-detail{font-size:10px;color:#99afc4;line-height:1.55}
.chat-motion-dots{display:flex;align-items:center;gap:4px;margin-inline:3px;flex:none}
.chat-motion-dots i{width:5px;height:5px;border-radius:50%;background:#6bb4f3;animation:chat-dot 1.25s ease-in-out infinite}
.chat-motion-dots i:nth-child(2){animation-delay:.16s}
.chat-motion-dots i:nth-child(3){animation-delay:.32s}
.chat-motion-time{font:700 10px 'Plus Jakarta Sans',sans-serif;font-variant-numeric:tabular-nums;
  color:#719ab9;white-space:nowrap;flex:none}
.chat-motion-skip{padding:5px 7px;border:1px solid #d5e8f8;border-radius:8px;background:#fff;
  color:#4689c4;cursor:pointer;font:700 10px 'IBM Plex Sans Thai',sans-serif}
.chat-motion-skip:hover,.chat-motion-skip:focus-visible{background:#eaf5ff;outline-color:#6eb5f3}
.real-chat-message.theirs.chat-is-working>p:not([hidden]){
  overflow-wrap:anywhere;animation:chat-text-fade .14s ease;
}
.real-chat-message small.chat-response-metadata{display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  color:#809eb9;font-size:10px;margin-top:10px;padding-top:9px;border-top:1px solid #edf3f9}
.chat-response-metadata svg{width:13px;height:13px;color:#5caaef}
.chat-response-metadata .chat-latency{font:700 10px 'Plus Jakarta Sans',sans-serif;color:#4787c6;white-space:nowrap}
.real-chat-message strong{font-weight:750}
.real-chat-message .chat-live-billing{display:block;margin-top:10px;padding:9px 11px;border-radius:11px;
  border:1px solid #dbeeff;background:#f2f9ff;color:#4f7fa8;font-size:10px;line-height:1.65}
.real-chat-message .chat-live-billing.settled{border-color:#d4efe4;background:#f1fbf7;color:#39876b}
.real-chat-message .chat-billing-details{display:inline-block;position:relative;font-size:10px;color:#7e99b0}
.chat-billing-details summary{list-style:none;cursor:pointer;color:#508bbc;font-weight:600}
.chat-billing-details summary::-webkit-details-marker{display:none}
.chat-billing-details summary:hover{text-decoration:underline}
.chat-billing-details[open] span{display:block;margin-top:5px;line-height:1.65;color:#7193af}
.real-chat-message.chat-cancelled{border-color:#eadfbf;background:#fffdf7}
.chat-send-row .button:disabled{transition:opacity .2s;opacity:.62}
@keyframes chat-live-enter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes chat-sent-in{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes chat-received-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes chat-dot{0%,70%,100%{transform:translateY(0);opacity:.42}35%{transform:translateY(-5px);opacity:1}}
@keyframes chat-emblem-pulse{0%,100%{box-shadow:0 5px 14px #4296ea2d;transform:scale(1)}50%{box-shadow:0 5px 20px #4296ea68;transform:scale(1.035)}}
@keyframes chat-glow-spin{0%,100%{transform:rotate(0) scale(1)}45%{transform:rotate(28deg) scale(1.07)}75%{transform:rotate(-13deg) scale(.95)}}
@keyframes chat-text-fade{from{opacity:.65}to{opacity:1}}
@media(max-width:750px){
  .chat-livebar{padding:10px 15px;gap:9px}
  .chat-live-time{padding:7px;min-width:58px}
  .chat-motion{gap:6px;flex-wrap:wrap}
  .chat-motion-copy{min-width:130px}
  .chat-motion-time{order:3;margin-left:auto}
  .chat-motion-skip{order:4}
  .real-chat-message.chat-is-working{min-width:min(270px,97%)}
}
@media(max-width:390px){
  .chat-live-subtitle{font-size:9px}
  .chat-motion-detail{font-size:9px}
  .chat-motion-symbol{width:29px;height:29px}
}
@media(prefers-reduced-motion:reduce){
  .chat-livebar,.real-chat-message.mine,.real-chat-message.theirs,.chat-motion-dots i,
  .chat-motion-symbol svg,.chat-live-emblem,.chat-live-emblem svg,.real-chat-message.theirs.chat-is-working>p{
    animation:none!important;transition:none!important
  }
}