/* Dayra chat UI — standalone page, website widget iframe, and mobile WebView. */
:root {
    --dc-accent: #C4E435;
    --dc-accent-dark: #A8C428;
    --dc-ink: #1a1a1a;
    --dc-muted: #6c757d;
    --dc-bg: #f4f5f7;
    --dc-bot: #ffffff;
    --dc-user: #1a1a1a;
    --dc-agent: #eef5d0;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    background: var(--dc-bg); color: var(--dc-ink);
    -webkit-text-size-adjust: 100%;
}
body.mode-page { display: flex; align-items: center; justify-content: center; padding: 16px; background: #e9ecef; }

.dc-chat { display: flex; flex-direction: column; height: 100%; width: 100%; background: var(--dc-bg); }
body.mode-page .dc-chat {
    max-width: 440px; height: min(720px, calc(100vh - 32px));
    border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.15);
}

/* Header */
.dc-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top));
    background: var(--dc-accent); flex-shrink: 0;
}
.dc-logo { height: 26px; width: auto; }
.dc-title { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.dc-title strong { font-size: .95rem; }
.dc-status { font-size: .75rem; color: #3a4a00; display: flex; align-items: center; gap: 5px; }
.dc-dot { width: 8px; height: 8px; border-radius: 50%; background: #2e7d32; }
.dc-dot.busy { background: #f9a825; }
.dc-dot.error { background: #c62828; }
.dc-human, .dc-close {
    border: none; background: rgba(0,0,0,.08); color: var(--dc-ink);
    width: 34px; height: 34px; border-radius: 50%; font-size: 1.05rem; cursor: pointer; flex-shrink: 0;
}
.dc-close { font-size: 1.5rem; line-height: 1; }
.dc-human:hover, .dc-close:hover { background: rgba(0,0,0,.16); }
.dc-human:disabled { opacity: .45; cursor: default; }

.dc-banner {
    background: #fff8e1; color: #6d4c00; font-size: .82rem;
    padding: 8px 14px; border-bottom: 1px solid #ffe08a; flex-shrink: 0;
}

/* Messages */
.dc-messages {
    flex: 1; overflow-y: auto; padding: 14px 12px;
    display: flex; flex-direction: column; gap: 8px;
    overscroll-behavior: contain;
}
.dc-msg {
    max-width: 85%; padding: 9px 13px; border-radius: 16px;
    font-size: .92rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
    unicode-bidi: plaintext;
}
.dc-msg a { color: inherit; text-decoration: underline; word-break: break-all; }
.dc-bot  { align-self: flex-start; background: var(--dc-bot); border-end-start-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.dc-user { align-self: flex-end; background: var(--dc-user); color: #fff; border-end-end-radius: 4px; }
.dc-user a { color: var(--dc-accent); }
.dc-agent { align-self: flex-start; background: var(--dc-agent); border-end-start-radius: 4px; }
.dc-agent-label { display: block; font-size: .72rem; font-weight: 700; color: #4b5d00; margin-bottom: 2px; }
.dc-msg.dc-pending { opacity: .7; }
.dc-status-line { align-self: center; font-size: .76rem; color: var(--dc-muted); text-align: center; padding: 2px 8px; }
.dc-thinking {
    align-self: flex-start; font-size: .8rem; color: var(--dc-muted); font-style: italic;
    padding: 6px 12px; background: rgba(255,255,255,.6); border-radius: 12px; max-width: 85%;
}
.dc-typing { display: inline-flex; gap: 3px; vertical-align: middle; margin-inline-end: 6px; }
.dc-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--dc-muted); animation: dc-b 1.2s infinite; }
.dc-typing i:nth-child(2) { animation-delay: .15s; }
.dc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dc-b { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Input */
.dc-input {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #e3e5e8; flex-shrink: 0;
}
.dc-input textarea {
    flex: 1; resize: none; border: 1px solid #d5d8dc; border-radius: 20px;
    padding: 9px 14px; font: inherit; font-size: .92rem; max-height: 120px; outline: none;
}
.dc-input textarea:focus { border-color: var(--dc-accent-dark); }
.dc-input button {
    width: 40px; height: 40px; border-radius: 50%; border: none; flex-shrink: 0;
    background: var(--dc-ink); color: var(--dc-accent); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.dc-input button:disabled { opacity: .4; cursor: default; }
[dir="rtl"] .dc-input button svg { transform: scaleX(-1); }