/* Milo Chat — launcher + slide-in panel. Loads on every eezyprint page. */

.milo-chat-launcher {
    position: fixed; right: 24px; bottom: 24px; z-index: 99998;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 18px; border: none; border-radius: 26px; cursor: pointer;
    background: var(--eezy-primary, #00A7E1); color: #fff;
    font: 700 14px/1 inherit; box-shadow: 0 6px 20px rgba(0,167,225,.35);
    transition: transform .15s, box-shadow .15s, opacity .15s;
}
.milo-chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,167,225,.45); }
.milo-chat-launcher--hidden { opacity: 0; pointer-events: none; }
.milo-chat-launcher__avatar {
    width: 26px; height: 26px; border-radius: 50%; background: #0090c4;
    display: flex; align-items: center; justify-content: center; font-weight: 800;
}

.milo-chat-panel {
    position: fixed; right: 24px; bottom: 24px; z-index: 99999;
    width: 380px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 48px);
    display: flex; flex-direction: column; overflow: hidden;
    background: #0f172a; color: #e2e8f0;
    border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    transform: translateY(16px) scale(.98); opacity: 0; pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
}
.milo-chat-panel--open { transform: none; opacity: 1; pointer-events: auto; }

.milo-chat-head {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px;
    background: var(--eezy-secondary, #1B365D); border-bottom: 1px solid rgba(255,255,255,.08);
}
.milo-chat-head__avatar {
    width: 34px; height: 34px; border-radius: 50%; background: var(--eezy-primary, #00A7E1);
    display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff;
}
.milo-chat-head__meta { display: flex; flex-direction: column; line-height: 1.2; }
.milo-chat-head__meta small { color: rgba(255,255,255,.6); font-size: 11px; }
.milo-chat-head__close {
    margin-left: auto; background: none; border: none; color: rgba(255,255,255,.7);
    font-size: 24px; cursor: pointer; line-height: 1;
}

.milo-chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.milo-chat-msg {
    max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5;
    word-wrap: break-word;
}
.milo-chat-msg--assistant { align-self: flex-start; background: #1e293b; border-bottom-left-radius: 4px; }
.milo-chat-msg--user { align-self: flex-end; background: var(--eezy-primary, #00A7E1); color: #fff; border-bottom-right-radius: 4px; }

.milo-chat-typing span {
    display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%;
    background: rgba(255,255,255,.5); animation: milo-blink 1.2s infinite both;
}
.milo-chat-typing span:nth-child(2) { animation-delay: .2s; }
.milo-chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes milo-blink { 0%,80%,100% { opacity: .2; } 40% { opacity: 1; } }

.milo-chat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-self: stretch; }
.milo-chat-card {
    display: flex; flex-direction: column; background: #1e293b; border-radius: 10px; overflow: hidden;
    text-decoration: none; color: inherit; border: 1px solid rgba(255,255,255,.06); transition: border-color .15s;
}
.milo-chat-card:hover { border-color: var(--eezy-primary, #00A7E1); }
.milo-chat-card img, .milo-chat-card__noimg { width: 100%; aspect-ratio: 1; object-fit: cover; background: #0b1220; }
.milo-chat-card__body { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.milo-chat-card__name { font-size: 12px; line-height: 1.3; }
.milo-chat-card__price { font-size: 12px; font-weight: 700; color: var(--eezy-primary, #00A7E1); }

.milo-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.milo-chat-input {
    flex: 1; padding: 10px 14px; border-radius: 22px; border: 1px solid rgba(255,255,255,.12);
    background: #1e293b; color: #fff; font: 14px/1 inherit; outline: none;
}
.milo-chat-input:focus { border-color: var(--eezy-primary, #00A7E1); }
.milo-chat-send {
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--eezy-primary, #00A7E1); color: #fff; font-size: 18px;
}

@media (max-width: 480px) {
    .milo-chat-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100vh - 16px); max-height: none; }
}