/* Dayploy Chat Widget */
#dayploy-root { --dp-primary: #0F4C81; --dp-light: #f0f6ff; --dp-text: #1a1a1a; --dp-gray: #666; }
#dayploy-root * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 0; }

.dayploy-fab { position: fixed; bottom: 24px; z-index: 999999; width: 60px; height: 60px; border-radius: 50%; background: var(--dp-primary); color: #fff; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; transition: transform 0.3s, box-shadow 0.3s; font-size: 26px; }
.dayploy-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,0,0,0.3); }
.dayploy-fab.dp-right { right: 24px; }
.dayploy-fab.dp-left { left: 24px; }

.dayploy-window { position: fixed; bottom: 96px; z-index: 999999; width: 380px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 120px); background: #fff; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.18); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(20px) scale(0.95); transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
.dayploy-window.dp-right { right: 24px; }
.dayploy-window.dp-left { left: 24px; }
.dayploy-window.dp-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }

.dayploy-header { background: var(--dp-primary); color: #fff; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.dayploy-header-info { display: flex; align-items: center; gap: 10px; }
.dayploy-header-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.dayploy-header-text h3 { font-size: 15px; font-weight: 600; color: #fff; }
.dayploy-header-text span { font-size: 12px; opacity: 0.8; }
.dayploy-close { background: none; border: none; color: #fff; cursor: pointer; font-size: 22px; padding: 4px; opacity: 0.8; }
.dayploy-close:hover { opacity: 1; }

.dayploy-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.dayploy-msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; word-wrap: break-word; animation: dpFadeIn 0.3s ease; }
@keyframes dpFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dayploy-msg.dp-user { align-self: flex-end; background: var(--dp-primary); color: #fff; border-bottom-right-radius: 4px; }
.dayploy-msg.dp-assistant { align-self: flex-start; background: var(--dp-light); color: var(--dp-text); border-bottom-left-radius: 4px; }

.dayploy-typing { align-self: flex-start; background: var(--dp-light); padding: 12px 18px; border-radius: 14px; border-bottom-left-radius: 4px; display: none; gap: 4px; }
.dayploy-typing.dp-active { display: flex; }
.dayploy-typing span { width: 7px; height: 7px; border-radius: 50%; background: #aaa; animation: dpBounce 1.4s infinite; }
.dayploy-typing span:nth-child(2) { animation-delay: 0.2s; }
.dayploy-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dpBounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

.dayploy-input-area { padding: 12px 16px; border-top: 1px solid #eee; display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; }
.dayploy-input { flex: 1; border: 1px solid #ddd; border-radius: 24px; padding: 10px 16px; font-size: 14px; outline: none; font-family: inherit; resize: none; max-height: 80px; min-height: 40px; line-height: 1.4; }
.dayploy-input:focus { border-color: var(--dp-primary); }
.dayploy-send { width: 40px; height: 40px; border-radius: 50%; background: var(--dp-primary); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.dayploy-send:disabled { opacity: 0.4; cursor: not-allowed; }
.dayploy-powered { text-align: center; padding: 6px; font-size: 11px; color: #ccc; }

@media (max-width: 480px) {
    .dayploy-window { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; bottom: 0; right: 0 !important; left: 0 !important; border-radius: 0; }
    .dayploy-fab { bottom: 16px; }
}