/* Gemini-inspired interaction layer for DubdibAi; keeps the product's own visual identity. */
.real-chat-log{gap:22px;padding:30px clamp(18px,4vw,44px);background:linear-gradient(180deg,#fbfdff 0%,#fff 62%)}
.real-chat-message{box-sizing:border-box}
.real-chat-message.theirs{width:100%;max-width:100%;margin-right:0;padding:2px 0 6px;border:0;border-radius:0;background:transparent;box-shadow:none}
.assistant-identity{display:flex;align-items:center;gap:9px;width:max-content;margin-bottom:8px}
.assistant-identity strong{display:block;margin:0;color:#357fc0;font-size:11px;letter-spacing:.02em}
.assistant-avatar{display:block;width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 4px 8px #3f97dc30);transform:translateZ(0)}
.real-chat-message.theirs>p{max-width:850px;margin-left:39px;color:#334f68;font-size:14px;line-height:1.9}
.real-chat-message.mine{max-width:min(78%,680px);padding:13px 17px;border:0;border-radius:22px 22px 7px 22px;background:#edf5fc;box-shadow:none}
.real-chat-message.mine>strong{display:none}
.real-chat-message.mine>p{color:#385a77;font-size:13px;line-height:1.75}
.chat-message-actions{margin-top:10px}
.assistant-actions{position:relative;justify-content:flex-start;gap:2px;max-width:max-content;margin-left:35px;opacity:.82;transition:opacity .18s,transform .18s}
.real-chat-message.theirs:hover .assistant-actions,.assistant-actions:focus-within{opacity:1;transform:translateY(-1px)}
.assistant-actions .chat-message-icon{width:36px;height:36px;border-radius:50%;color:#7891a6}
.assistant-actions .chat-message-icon svg{width:18px;height:18px;stroke-width:1.85}
.assistant-actions .chat-message-icon:hover,.assistant-actions .chat-message-icon:focus-visible{border-color:transparent;background:#edf5fb;color:#277fc9}
.assistant-actions .chat-message-icon.is-active,.assistant-actions .chat-message-icon[aria-pressed=true]{background:#e8f3fd;color:#1979cc}
.assistant-actions .chat-message-icon[data-action=dislike][aria-pressed=true]{background:#fff0f1;color:#c1535d}
.assistant-actions .chat-message-icon.is-confirmed{background:#e7f8f1;color:#278d6c}
.assistant-more-wrap{position:relative;display:grid}
.assistant-more-menu{position:absolute;z-index:12;left:0;top:calc(100% + 5px);width:max-content;min-width:170px;padding:6px;border:1px solid #dce9f5;border-radius:13px;background:#fff;box-shadow:0 14px 34px #315b7e26}
.assistant-more-menu[hidden]{display:none}
.assistant-more-menu button{display:block;width:100%;padding:9px 11px;border:0;border-radius:9px;background:transparent;color:#52718d;text-align:left;font:600 11px 'IBM Plex Sans Thai',sans-serif;cursor:pointer}
.assistant-more-menu button:hover,.assistant-more-menu button:focus-visible{background:#edf6ff;color:#267fc9;outline:none}
.user-actions{opacity:.58;transition:opacity .18s}
.real-chat-message.mine:hover .user-actions,.user-actions:focus-within{opacity:1}
.real-chat-message small.chat-response-metadata{max-width:850px;margin:7px 0 0 39px;padding-top:0;border-top:0;color:#9aabba}
.chat-motion{min-height:48px;margin-left:39px;padding:2px 0;gap:9px}
.real-chat-message.chat-is-working{min-width:0;border:0;background:transparent}
.chat-motion-symbol{position:relative;width:30px;height:30px;border-radius:50%;background:transparent;color:#4a8fe5;overflow:visible}
.chat-motion-symbol:after{content:"";position:absolute;inset:2px;border:1px solid #b7dafa;border-radius:50%;animation:gemini-orbit 1.8s ease-in-out infinite}
.chat-motion-symbol svg{position:relative;z-index:1;width:15px;height:15px;filter:drop-shadow(0 2px 5px #5098dd48)}
.chat-motion-copy{flex:0 1 auto}
.chat-motion-heading{font-size:12px;background:linear-gradient(90deg,#397fd0,#58b6d2,#397fd0);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gemini-shimmer 2s linear infinite}
.chat-motion-detail{font-size:10px;color:#9aaec1}
.chat-motion-dots{gap:3px}
.chat-motion-dots i{width:5px;height:5px;background:#6ca9e4;animation:gemini-dot 1.15s ease-in-out infinite}
.chat-motion-time{font-size:9px;color:#9aafc1}
.chat-motion-skip{margin-left:2px;border:0;border-radius:999px;background:#edf6ff;color:#3f84c1}
.chat-answer-revealing{animation:answer-soft-in .28s ease both}
.chat-livebar{padding:8px 24px;border-bottom:0;background:#f7fbff;color:#6b93b5}
.chat-live-emblem{width:24px;height:24px;border-radius:50%;box-shadow:none}
.chat-live-emblem svg{width:13px;height:13px}
.chat-live-subtitle{display:none}
.chat-live-time{border:0;background:transparent;min-width:50px;padding:4px 0}
.real-chat-form{margin:0 22px 18px;border-color:#d9e6f2;border-radius:25px;background:#f5f8fb;box-shadow:0 12px 34px #375a7612;transition:border-color .2s,box-shadow .2s}
.real-chat-form:focus-within{border-color:#a8cef1;box-shadow:0 13px 36px #3c80ba1c,0 0 0 3px #d9ecfc88}
.real-chat-form textarea{min-height:68px;max-height:180px;padding:16px 19px 8px;resize:none;font-size:14px;line-height:1.7}
.chat-send-row{padding:5px 9px 9px 12px}
.chat-action-slot{min-width:108px}
.chat-action-slot .button,.chat-stop-button{min-height:42px;border-radius:18px}
@keyframes gemini-dot{0%,65%,100%{transform:translateY(0) scale(.75);opacity:.38}32%{transform:translateY(-4px) scale(1);opacity:1}}
@keyframes gemini-orbit{0%,100%{transform:scale(.86);opacity:.35}50%{transform:scale(1.08);opacity:.85}}
@keyframes gemini-shimmer{to{background-position:-220% 0}}
@keyframes answer-soft-in{from{opacity:.4;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){
  .chat-toolbar{position:sticky;top:0;z-index:8;background:#fbfdfff2;backdrop-filter:blur(15px)}
  .chat-livebar{display:none!important}
  .real-chat-log{min-height:52dvh;max-height:62dvh;padding:20px 16px 28px;gap:20px}
  .real-chat-message.theirs>p{font-size:14px;line-height:1.82}
  .real-chat-message.mine{max-width:86%;padding:12px 15px}
  .assistant-actions{gap:0;margin-top:8px}
  .assistant-actions .chat-message-icon{width:35px;height:35px}
  .assistant-more-menu{left:auto;right:0}
  .real-chat-form{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:7;margin:0 10px 12px;border-radius:27px;background:#f4f7faee;backdrop-filter:blur(15px);box-shadow:0 12px 38px #2447652c}
  .real-chat-form textarea{min-height:58px;padding:14px 15px 6px;font-size:16px}
  .chat-send-row{flex-wrap:nowrap;gap:7px;padding:4px 7px 7px}
  .chat-send-row>span{width:auto;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
  .chat-action-slot{min-width:98px}
  .chat-action-slot .button,.chat-stop-button{min-height:40px;padding:9px 12px;border-radius:20px;font-size:11px}
  .chat-motion{gap:5px;min-height:42px;flex-wrap:nowrap}
  .chat-motion-detail{display:none}
  .chat-motion-time{margin-left:auto}
  .chat-motion-skip{white-space:nowrap}
  .real-chat-message small.chat-response-metadata{font-size:9px;line-height:1.6}
}
@media(max-width:390px){
  .assistant-actions .chat-message-icon{width:33px;height:33px}
  .assistant-actions .chat-message-icon svg{width:17px;height:17px}
  .real-chat-log{padding-inline:13px}
  .chat-motion-time{display:none}
}
@media(prefers-reduced-motion:reduce){
  .chat-motion-symbol:after,.chat-motion-heading,.chat-answer-revealing{animation:none!important}
}
/* Crystal brand integration and higher-fidelity mobile chat motion. */
.brand-mark{overflow:visible!important;background:transparent!important;box-shadow:none!important}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 10px #278edc35)}
.chat-greeting .chat-mark{width:76px!important;height:76px!important;border-radius:0!important;animation:logo-float 4.2s ease-in-out infinite}
.chat-greeting .chat-mark img{width:76px;height:76px}
.real-chat-log{scrollbar-gutter:stable;scroll-behavior:smooth;contain:layout style}
.real-chat-message{transform-origin:bottom center;will-change:transform,opacity}
.real-chat-message.theirs{animation:gemini-response-in .44s cubic-bezier(.16,1,.3,1) both}
.real-chat-message.mine{animation:gemini-user-in .32s cubic-bezier(.16,1,.3,1) both}
.real-chat-message.theirs.chat-is-finished>p{animation:answer-settle .34s ease both}
.chat-motion-symbol{animation:thinking-breathe 1.8s ease-in-out infinite}
.real-chat-form:before{content:"";display:block;height:2px;width:0;margin:auto;background:linear-gradient(90deg,transparent,#5aa7ee,#6bd6d1,transparent);transition:width .35s ease}
.real-chat-form:focus-within:before{width:72%}
.real-chat-form textarea{transition:min-height .22s ease,color .2s}
.chat-toolbar{box-shadow:0 8px 22px #4a74900a}
.model-picker-toggle{border-radius:18px}
@keyframes gemini-response-in{from{opacity:0;transform:translateY(13px) scale(.992);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes gemini-user-in{from{opacity:0;transform:translateY(10px) scale(.975)}to{opacity:1;transform:none}}
@keyframes answer-settle{from{opacity:.72;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes thinking-breathe{0%,100%{transform:scale(.96)}50%{transform:scale(1.05)}}
@keyframes logo-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@media(max-width:700px){
  .chat-panel{border-radius:22px!important;overflow:clip!important;background:#fff}
  .chat-toolbar{min-height:62px;border-bottom:0;background:#fbfdfff0}
  .real-chat-log{min-height:54dvh;max-height:64dvh;padding:22px 16px 38px;background:linear-gradient(180deg,#fbfdff 0%,#fff 38%)}
  .assistant-avatar{width:28px;height:28px}
  .assistant-identity{gap:8px;margin-bottom:7px}
  .real-chat-message.theirs>p{margin-left:36px;font-size:15px;line-height:1.82}
  .chat-motion{margin-left:36px}
  .assistant-actions{margin-left:31px;opacity:.9}
  .real-chat-message small.chat-response-metadata{margin-left:36px}
  .real-chat-message.mine{max-width:84%;border-radius:24px 24px 6px 24px;background:#eef3f8}
  .chat-greeting{min-height:46dvh}
  .chat-greeting .chat-mark,.chat-greeting .chat-mark img{width:68px!important;height:68px!important}
  .real-chat-form{isolation:isolate}
}
@media(max-width:390px){
  .real-chat-message.theirs>p{margin-left:34px}
  .assistant-actions{margin-left:28px}
  .chat-motion,.real-chat-message small.chat-response-metadata{margin-left:34px}
}
/* Assistant actions: fit small phones without losing any of the six controls. */
.real-chat-message .assistant-actions{display:flex;flex-wrap:wrap;max-width:calc(100% - 40px);gap:2px}
.real-chat-message .assistant-actions .chat-message-icon{width:39px;height:39px;min-width:39px;touch-action:manipulation}
@media(max-width:700px){
  .real-chat-message .assistant-actions .chat-message-icon{width:38px;height:38px;min-width:38px}
  .real-chat-message .assistant-more-menu{top:auto;bottom:calc(100% + 6px)}
}