/* Marco Robots front-end skin for Mates 1.2.7 */
:root {
    --marco-blue: #0867ff;
    --marco-navy: #001d2a;
    --marco-ice: #f4f9ff;
}

.mdp-mates-box.mdp-mates-bot-position-fixed-bottom-right {
    z-index: 999999 !important;
}

.mdp-mates-open-button-wrapper {
    right: 18px !important;
    bottom: 18px !important;
}

#mdp-mates-open-button.mdp-mates-open-chatbot-button {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    padding: 14px !important;
    margin: 0 !important;
    border: 2px solid rgba(255,255,255,.86) !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #0b72ff, #0455e8) !important;
    box-shadow: 0 13px 34px rgba(0, 61, 170, .30), 0 0 0 0 rgba(8,103,255,.32) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    animation: marcoRobotFloat 3.2s ease-in-out infinite, marcoRobotPulse 2.4s ease-out infinite !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
}

#mdp-mates-open-button:hover,
#mdp-mates-open-button:focus-visible {
    transform: translateY(-4px) scale(1.06) !important;
    box-shadow: 0 17px 38px rgba(0, 61, 170, .38) !important;
}

#mdp-mates-open-button .mdp-mates-open-button-icon {
    width: 48px !important;
    height: 48px !important;
    display: block !important;
    color: #0867ff !important;
    background: url('../images/marco-robots/robot-agent.svg') center/contain no-repeat !important;
}
#mdp-mates-open-button .mdp-mates-open-button-icon > svg { display: none !important; }

.mdp-mates-chatbot-box {
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 22px 70px rgba(0, 29, 42, .28) !important;
    border: 1px solid rgba(8,103,255,.15) !important;
}

.mdp-mates-chatbot-header {
    background: linear-gradient(135deg, #001d2a 0%, #003a58 100%) !important;
    color: #fff !important;
}

.mdp-mates-chatbot-toolbar,
.mdp-mates-chatbot-footer {
    background: #fff !important;
}

.mdp-mates-chatbot-messages,
.mdp-mates-chatbot-messages-container {
    background: #f7fbff !important;
}

.mdp-mates-bot-message,
.mdp-mates-bot-message .mdp-mates-message-text {
    border-radius: 16px 16px 16px 5px !important;
}

.mdp-mates-user-message,
.mdp-mates-user-message .mdp-mates-message-text {
    border-radius: 16px 16px 5px 16px !important;
}

.mdp-mates-send-message-button {
    background: var(--marco-blue) !important;
    border-radius: 999px !important;
}

#mdp-mates-input-messages-field:focus {
    border-color: var(--marco-blue) !important;
    box-shadow: 0 0 0 3px rgba(8,103,255,.10) !important;
}

.mdp-mates-chatbot-footer-text a { color: var(--marco-blue) !important; }

.marco-agent-nudge {
    position: fixed;
    right: 24px;
    bottom: 102px;
    z-index: 999998;
    width: min(285px, calc(100vw - 40px));
    padding: 12px 15px;
    border: 1px solid rgba(8,103,255,.15);
    border-radius: 14px 14px 4px 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(0,29,42,.17);
    color: #06233a;
    font: 600 14px/1.4 system-ui, -apple-system, Segoe UI, sans-serif;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px) scale(.97);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.marco-agent-nudge.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.marco-agent-nudge small { display:block; margin-top:3px; color:#536b7b; font-weight:400; }

@keyframes marcoRobotFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@keyframes marcoRobotPulse {
    0% { box-shadow: 0 13px 34px rgba(0,61,170,.30), 0 0 0 0 rgba(8,103,255,.28); }
    65% { box-shadow: 0 13px 34px rgba(0,61,170,.30), 0 0 0 14px rgba(8,103,255,0); }
    100% { box-shadow: 0 13px 34px rgba(0,61,170,.30), 0 0 0 0 rgba(8,103,255,0); }
}

@media (max-width: 600px) {
    #mdp-mates-open-button.mdp-mates-open-chatbot-button {
        width: 62px !important; height: 62px !important; min-width: 62px !important; min-height: 62px !important;
    }
    #mdp-mates-open-button .mdp-mates-open-button-icon { width: 41px !important; height: 41px !important; }
    .marco-agent-nudge { right: 16px; bottom: 89px; }
}

@media (prefers-reduced-motion: reduce) {
    #mdp-mates-open-button.mdp-mates-open-chatbot-button { animation: none !important; }
    .marco-agent-nudge { transition: none !important; }
}

/* v1.2.5 professional local-agent additions */
#mdp-mates-open-button { position: relative !important; }
.marco-agent-online-dot {
    position: absolute;
    right: 3px;
    top: 5px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #27c96f;
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(39,201,111,.18);
}

.marco-agent-quick-actions {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 9px 12px 7px;
    background: #fff;
    border-top: 1px solid rgba(8,103,255,.08);
    scrollbar-width: none;
}
.marco-agent-quick-actions::-webkit-scrollbar { display: none; }
.marco-agent-chip {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(8,103,255,.18);
    border-radius: 999px;
    background: #f5f9ff;
    color: #082a48;
    font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, sans-serif;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.marco-agent-chip:hover,
.marco-agent-chip:focus-visible {
    background: #eef5ff;
    border-color: #0867ff;
    transform: translateY(-1px);
    outline: none;
}

.marco-agent-contact-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 9px;
    background: #fff;
    color: #667a89;
    font: 500 11px/1.25 system-ui, -apple-system, Segoe UI, sans-serif;
}
.marco-agent-contact-strip span { margin-right: auto; }
.marco-agent-contact-strip a {
    color: #0867ff !important;
    text-decoration: none !important;
    font-weight: 700;
}
.marco-agent-contact-strip a:hover { text-decoration: underline !important; }

@media (max-width: 600px) {
    .marco-agent-quick-actions { padding-left: 10px; padding-right: 10px; }
    .marco-agent-contact-strip { padding-left: 10px; padding-right: 10px; }
}

/* v1.2.7 UI polish: visible send control, prominent header subtitle, one-time Marco intro */
.mdp-mates-chatbot-header,
.mdp-mates-chatbot-header h1,
.mdp-mates-chatbot-header h2,
.mdp-mates-chatbot-header h3,
.mdp-mates-chatbot-header h4,
.mdp-mates-chatbot-header h5,
.mdp-mates-chatbot-header h6,
.mdp-mates-chatbot-header p,
.mdp-mates-chatbot-header span,
.mdp-mates-chatbot-header strong {
    color: #ffffff !important;
}
.mdp-mates-chatbot-header h4 {
    margin: 0 0 4px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
}
.mdp-mates-chatbot-header p {
    margin: 0 !important;
    opacity: .96 !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

.mdp-mates-send-form {
    align-items: stretch !important;
    gap: 9px !important;
}
.mdp-mates-send-message-button,
.marco-agent-send-fallback {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(145deg, #0b72ff, #0455e8) !important;
    color: #fff !important;
    box-shadow: 0 7px 18px rgba(8, 103, 255, .24) !important;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease !important;
}
.mdp-mates-send-message-button:hover:not(:disabled),
.mdp-mates-send-message-button:focus-visible:not(:disabled),
.marco-agent-send-fallback:hover:not(:disabled),
.marco-agent-send-fallback:focus-visible:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px rgba(8, 103, 255, .32) !important;
    outline: none !important;
}
.mdp-mates-send-message-button:disabled,
.marco-agent-send-fallback:disabled {
    opacity: .38 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}
.mdp-mates-send-message-button .mdp-mates-send-message-button-icon,
.mdp-mates-send-message-button .mdp-mates-send-message-button-icon svg,
.marco-agent-send-fallback svg {
    width: 21px !important;
    height: 21px !important;
    fill: currentColor !important;
    color: #fff !important;
}
#mdp-mates-input-messages-field {
    min-height: 48px !important;
}

/* One-time on-load Marco mascot intro. It does not block the page. */
.marco-intro-stage {
    position: fixed;
    inset: 0;
    z-index: 1000002;
    pointer-events: none;
    overflow: hidden;
}
.marco-intro-actor {
    position: fixed;
    left: max(22px, 5vw);
    bottom: max(30px, 7vh);
    width: clamp(210px, 20vw, 330px);
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
}
.marco-intro-robot {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    pointer-events: auto;
    filter: drop-shadow(0 24px 30px rgba(0, 29, 42, .26));
}
.marco-intro-robot:focus-visible {
    outline: 3px solid rgba(8, 103, 255, .46);
    outline-offset: 5px;
    border-radius: 34px;
}
.marco-intro-robot svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.marco-intro-wave-arm {
    transform-box: fill-box;
    transform-origin: 20% 15%;
    animation: marcoIntroWave .72s ease-in-out 2 alternate;
}
.marco-intro-copy {
    position: absolute;
    left: min(72%, 235px);
    top: 10%;
    width: min(310px, 45vw);
    padding: 15px 17px;
    border: 1px solid rgba(8, 103, 255, .16);
    border-radius: 18px 18px 18px 5px;
    background: rgba(255,255,255,.98);
    color: #082a48;
    box-shadow: 0 18px 48px rgba(0, 29, 42, .20);
    font: 500 14px/1.42 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    opacity: 0;
    transform: translateY(9px) scale(.97);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
}
.marco-intro-copy::before {
    content: "";
    position: absolute;
    left: -9px;
    bottom: 20px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-left: 1px solid rgba(8,103,255,.12);
    border-bottom: 1px solid rgba(8,103,255,.12);
    transform: rotate(45deg);
}
.marco-intro-copy strong {
    display: block;
    margin-bottom: 3px;
    color: #001d2a;
    font-size: 16px;
    font-weight: 800;
}
.marco-intro-copy.is-visible {
    opacity: 1;
    transform: none;
}
.marco-intro-copy.is-leaving {
    opacity: 0;
    transform: translateY(-5px) scale(.98);
}
#mdp-mates-open-button.marco-intro-target-pulse {
    animation: marcoIntroTargetPulse .72s ease-out 1 !important;
}

@keyframes marcoIntroWave {
    from { transform: rotate(-5deg); }
    to { transform: rotate(16deg); }
}
@keyframes marcoIntroTargetPulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.18); box-shadow: 0 0 0 14px rgba(8,103,255,.16), 0 15px 38px rgba(0,61,170,.32); }
    100% { transform: scale(1); }
}

@media (max-width: 720px) {
    .mdp-mates-send-message-button,
    .marco-agent-send-fallback {
        flex-basis: 44px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 12px !important;
    }
    #mdp-mates-input-messages-field { min-height: 44px !important; }
    .marco-intro-actor {
        left: 12px;
        bottom: 95px;
        width: 170px;
    }
    .marco-intro-copy {
        left: 62%;
        top: 8%;
        width: min(205px, 56vw);
        padding: 12px 13px;
        font-size: 12px;
    }
    .marco-intro-copy strong { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .marco-intro-stage { display: none !important; }
    .marco-intro-wave-arm { animation: none !important; }
}