:root{
    --page-bg:#FFFFFF;
    --agent-bubble:#F1F4F5;
    --agent-text:#0B1220;
    --user-bubble:#03363D;
    --user-text:#FFFFFF;
}

body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Heebo',sans-serif;
}

.dg-center{display:flex;align-items:center;justify-content:center;padding:16px;background:var(--page-bg)}
.dg-wrap{width:360px;height:520px;border-radius:24px;box-shadow:0 12px 30px rgba(0,0,0,.12);overflow:hidden;background:#fff;font-family:system-ui,sans-serif}
.dg-body{background:var(--page-bg);padding:12px;height:100%;overflow:hidden}
.dg-card{padding:14px;border-radius:16px;height:100%;overflow:hidden}

/* Base bubbles */
.dg-msg{display:block;width:fit-content;max-width:90%;margin-bottom:10px;white-space:normal;line-height:1.6;direction:rtl;text-align:right}
.dg-msg.bot{background:var(--agent-bubble);color:var(--agent-text);border-radius:16px;padding:10px 14px}
.dg-msg.user{background:var(--user-bubble);color:var(--user-text);border-radius:16px;padding:10px 14px;margin-left:auto}

.dg-typing{display:block;width:fit-content;background:var(--agent-bubble);color:var(--agent-text);border-radius:16px;padding:8px 12px;margin-bottom:10px}
.dg-typing .dot{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:#9aa4ad;animation:blink 1.2s infinite ease-in-out}
.dg-typing .dot:nth-child(2){animation-delay:.15s}
.dg-typing .dot:nth-child(3){animation-delay:.3s}

.dg-thinking{margin:12px 0}
.dg-thinking .line{background:none;color:var(--agent-text);font-size:14px;line-height:1.5;margin:6px 0;text-align:center;direction:rtl;opacity:0;transition:opacity .35s ease}
.dg-thinking.show-step .line:nth-child(1){opacity:.95;transition-delay:.0s}
.dg-thinking.show-step .line:nth-child(2){opacity:.95;transition-delay:.2s}
.dg-thinking.show-step .line:nth-child(3){opacity:.95;transition-delay:.4s}
.dg-thinking.show-step .line:nth-child(4){opacity:.95;transition-delay:.6s}
.dg-thinking.show-step .line:nth-child(5){opacity:.95;transition-delay:.8s}

/* Enter animations controlled by JS */
.enter-anim{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.show-step{opacity:1;transform:translateY(0)}
.is-hidden{display:none!important}

@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}

@media (prefers-reduced-motion:reduce){
    .enter-anim{transition:none}
    .dg-thinking .line{transition:none;opacity:1}
}