/* =============================================================
   Ask Mint — concierge chat widget
   Brand: Forest #0E3B37, Sage #A7B1A3, Sand #DCCDB9,
          Stone #E9E4DC, Ivory #F7F5F2 — Jost typography.
   ============================================================= */

.mint-concierge,
.mint-concierge * {
        box-sizing: border-box;
        font-family: 'Jost', system-ui, sans-serif;
}

.mint-concierge {
        position: fixed;
        left: calc(env(safe-area-inset-left, 0px) + 18px);
        top: 50%;
        transform: translateY(-50%);
        z-index: 9990;
        color: #0E3B37;
}

/* ---------- Bubble ---------- */
.mc-bubble {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 76px;
        height: 76px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #0E3B37;
        color: #F7F5F2;
        cursor: pointer;
        box-shadow:
                0 0 0 1px rgba(220, 205, 185, 0.55) inset,
                0 0 0 4px #F7F5F2,
                0 0 0 5px rgba(220, 205, 185, 0.7),
                0 18px 32px -16px rgba(14, 59, 55, 0.55);
        transition: transform .25s cubic-bezier(.2,.7,.2,1),
                                box-shadow .25s ease,
                                background .25s ease;
}
.mc-bubble:hover,
.mc-bubble:focus-visible {
        transform: translateY(-3px);
        outline: none;
        box-shadow:
                0 0 0 1px rgba(247, 245, 242, 0.85) inset,
                0 0 0 4px #F7F5F2,
                0 0 0 5px #DCCDB9,
                0 22px 38px -16px rgba(14, 59, 55, 0.65);
}
.mc-bubble-eyebrow {
        font-size: 9px;
        letter-spacing: .26em;
        text-transform: uppercase;
        font-weight: 500;
        color: #DCCDB9;
        line-height: 1;
        margin-bottom: 4px;
}
.mc-bubble-mark {
        font-size: 18px;
        font-weight: 500;
        letter-spacing: .04em;
        line-height: 1;
}
.mc-bubble-pulse {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #DCCDB9;
        box-shadow: 0 0 0 2px #0E3B37;
        animation: mcPulse 2.4s ease-in-out infinite;
}
@keyframes mcPulse {
        0%, 100% { transform: scale(1);   opacity: 1;   }
        50%      { transform: scale(1.4); opacity: .55; }
}
.mint-concierge[data-mc-open="true"] .mc-bubble-pulse { display: none; }
.mint-concierge[data-mc-open="true"] .mc-bubble {
        transform: scale(.85) translateY(0);
        opacity: 0;
        pointer-events: none;
}

/* ---------- Panel ---------- */
.mc-panel {
        position: absolute;
        left: 92px;
        top: 50%;
        width: 380px;
        max-width: calc(100vw - 110px);
        height: min(640px, 86vh);
        background: #F7F5F2;
        border-radius: 18px;
        box-shadow:
                0 0 0 1px rgba(14, 59, 55, .08),
                0 30px 60px -20px rgba(14, 59, 55, .35);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform: translateY(-50%) translateX(-8px) scale(.98);
        opacity: 0;
        transform-origin: left center;
        transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
}
.mint-concierge[data-mc-open="true"] .mc-panel {
        transform: translateY(-50%) translateX(0) scale(1);
        opacity: 1;
}
.mc-panel[hidden] { display: none !important; }

.mc-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px 14px;
        background: #0E3B37;
        color: #F7F5F2;
}
.mc-head-mark { display: flex; flex-direction: column; gap: 2px; }
.mc-head-eyebrow {
        font-size: 9px;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: #DCCDB9;
        font-weight: 500;
}
.mc-head-title {
        font-size: 15px;
        letter-spacing: .04em;
        font-weight: 500;
}
.mc-close {
        width: 32px;
        height: 32px;
        border: 0;
        background: transparent;
        color: #F7F5F2;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
        opacity: .8;
        transition: opacity .2s;
}
.mc-close:hover { opacity: 1; }

/* ---------- Stream ---------- */
.mc-stream {
        flex: 1;
        overflow-y: auto;
        padding: 18px 18px 8px;
        background: #F7F5F2;
        scroll-behavior: smooth;
}
.mc-stream::-webkit-scrollbar { width: 8px; }
.mc-stream::-webkit-scrollbar-thumb { background: #DCCDB9; border-radius: 8px; }

.mc-msg {
        max-width: 88%;
        margin: 0 0 12px;
        padding: 10px 14px;
        font-size: 14px;
        line-height: 1.5;
        border-radius: 14px;
        animation: mcIn .22s ease-out;
}
@keyframes mcIn {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
}
.mc-msg p { margin: 0 0 6px; }
.mc-msg p:last-child { margin-bottom: 0; }

/* ---------- Markdown / GFM (assistant replies) ---------- */
.mc-msg h1, .mc-msg h2, .mc-msg h3, .mc-msg h4 {
        font-family: inherit;
        font-weight: 600;
        color: #0E3B37;
        margin: 10px 0 6px;
        line-height: 1.25;
        letter-spacing: 0.01em;
}
.mc-msg h1 { font-size: 17px; }
.mc-msg h2 { font-size: 16px; }
.mc-msg h3, .mc-msg h4 { font-size: 14.5px; }
.mc-msg ul, .mc-msg ol {
        margin: 4px 0 8px;
        padding-left: 22px;
}
.mc-msg li { margin: 2px 0; }
.mc-msg li > p { margin: 0; }
.mc-msg ul li::marker { color: #A7B1A3; }
.mc-msg ol li::marker { color: #A7B1A3; font-variant-numeric: tabular-nums; }
.mc-msg input[type="checkbox"] { margin-right: 6px; vertical-align: -1px; }
.mc-msg a {
        color: inherit;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
}
.mc-msg--user a { color: #DCCDB9; }
.mc-msg strong { font-weight: 600; }
.mc-msg em { font-style: italic; }
.mc-msg del { opacity: 0.6; }
.mc-msg blockquote {
        margin: 6px 0;
        padding: 4px 10px;
        border-left: 2px solid #A7B1A3;
        color: #355753;
        font-style: italic;
        background: rgba(167, 177, 163, 0.12);
}
.mc-msg code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 12.5px;
        background: rgba(14, 59, 55, 0.08);
        padding: 1px 5px;
        border-radius: 4px;
}
.mc-msg--user code { background: rgba(247, 245, 242, 0.18); }
.mc-msg pre {
        margin: 6px 0;
        padding: 10px 12px;
        background: #F7F5F2;
        border: 1px solid #DCCDB9;
        border-radius: 8px;
        overflow-x: auto;
        font-size: 12.5px;
        line-height: 1.45;
}
.mc-msg pre code {
        background: transparent;
        padding: 0;
        border-radius: 0;
}
.mc-msg hr {
        border: 0;
        border-top: 1px solid #DCCDB9;
        margin: 10px 0;
}
.mc-msg table {
        width: 100%;
        border-collapse: collapse;
        margin: 6px 0;
        font-size: 13px;
}
.mc-msg th, .mc-msg td {
        text-align: left;
        padding: 5px 8px;
        border-bottom: 1px solid #DCCDB9;
}
.mc-msg th {
        font-weight: 600;
        background: rgba(167, 177, 163, 0.15);
}
.mc-msg img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 4px 0;
}

.mc-msg--user {
        margin-left: auto;
        background: #0E3B37;
        color: #F7F5F2;
        border-bottom-right-radius: 4px;
}
.mc-msg--assistant {
        margin-right: auto;
        background: #E9E4DC;
        color: #0E3B37;
        border-bottom-left-radius: 4px;
}
.mc-msg--greeting {
        background: transparent;
        color: #0E3B37;
        padding: 0 4px;
        font-style: italic;
        font-size: 15px;
        margin-bottom: 18px;
}
.mc-msg--escalated {
        background: #DCCDB9;
        border: 1px solid #C4B49E;
        color: #0E3B37;
}
.mc-msg--system {
        font-size: 12px;
        color: #6a6859;
        text-align: center;
        margin: 0 auto 12px;
        max-width: 100%;
        background: transparent;
        font-style: italic;
}

/* ---------- Typing indicator ---------- */
.mc-typing {
        display: flex;
        gap: 4px;
        padding: 0 22px 8px;
        height: 18px;
}
.mc-typing span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #A7B1A3;
        animation: mcBounce 1.2s infinite ease-in-out;
}
.mc-typing span:nth-child(2) { animation-delay: .15s; }
.mc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes mcBounce {
        0%, 80%, 100% { transform: scale(.7); opacity: .5; }
        40%           { transform: scale(1);  opacity: 1;  }
}

/* ---------- Lead capture card ---------- */
.mc-lead {
        margin: 0 18px 12px;
        padding: 14px 16px;
        background: #DCCDB9;
        border-radius: 14px;
        border: 1px solid #C4B49E;
        animation: mcIn .25s ease-out;
}
.mc-lead-title {
        margin: 0 0 8px;
        font-size: 11px;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: #0E3B37;
        font-weight: 500;
}
.mc-lead-form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
}
.mc-lead-form input {
        width: 100%;
        padding: 9px 12px;
        font-size: 14px;
        border: 1px solid #C4B49E;
        background: #F7F5F2;
        color: #0E3B37;
        border-radius: 8px;
}
.mc-lead-form input:focus { outline: none; border-color: #0E3B37; }
.mc-lead-form button {
        padding: 10px 14px;
        font-size: 11px;
        letter-spacing: .22em;
        text-transform: uppercase;
        font-weight: 500;
        border: 0;
        background: #0E3B37;
        color: #F7F5F2;
        border-radius: 8px;
        cursor: pointer;
        transition: background .2s;
}
.mc-lead-form button:hover { background: #062825; }
.mc-lead-skip {
        background: transparent !important;
        color: #0E3B37 !important;
        font-size: 11px !important;
}

/* ---------- Input form ---------- */
.mc-form {
        display: flex;
        gap: 8px;
        align-items: flex-end;
        padding: 12px 14px;
        background: #F7F5F2;
        border-top: 1px solid #E9E4DC;
}
.mc-input {
        flex: 1;
        min-height: 40px;
        max-height: 140px;
        padding: 10px 12px;
        border: 1px solid #E9E4DC;
        border-radius: 12px;
        background: #fff;
        color: #0E3B37;
        font-size: 14px;
        line-height: 1.4;
        resize: none;
        font-family: 'Jost', system-ui, sans-serif;
}
.mc-input:focus { outline: none; border-color: #A7B1A3; }
.mc-send {
        padding: 0 16px;
        height: 40px;
        border: 0;
        background: #DCCDB9;
        color: #0E3B37;
        border-radius: 10px;
        font-size: 11px;
        letter-spacing: .22em;
        text-transform: uppercase;
        font-weight: 500;
        cursor: pointer;
        transition: background .2s;
}
.mc-send:hover { background: #C4B49E; }
.mc-send:disabled { opacity: .5; cursor: not-allowed; }

.mc-foot {
        padding: 8px 16px 12px;
        background: #F7F5F2;
        color: #6a6859;
        font-size: 11px;
        text-align: center;
        border-top: 1px solid #E9E4DC;
}
.mc-foot a { color: #0E3B37; text-decoration: none; }
.mc-foot a:hover { text-decoration: underline; }
.mc-foot span { margin: 0 6px; }
.mc-foot-leave {
        background: none;
        border: none;
        padding: 0;
        font: inherit;
        color: inherit;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
}
.mc-foot-leave:hover { opacity: .75; }
.mc-foot-addr { display: block; margin-top: 4px; font-style: italic; }

/* ---------- Mobile ---------- */
/* Mobile — bubble stays mid-left, panel goes full-bleed when opened */
@media (max-width: 640px) {
        .mint-concierge {
                left: 12px;
                top: 50%;
                transform: translateY(-50%);
        }
        .mc-bubble { width: 58px; height: 58px; }
        .mc-bubble-mark { font-size: 14px; }
        .mc-bubble-eyebrow { font-size: 8px; }

        .mint-concierge[data-mc-open="true"] {
                left: 0;
                top: 0;
                transform: none;
                width: 100vw;
                height: 100vh;
                height: 100dvh;
        }
        .mint-concierge[data-mc-open="true"] .mc-panel {
                position: fixed;
                inset: 0;
                left: 0;
                top: 0;
                width: 100vw;
                max-width: 100vw;
                height: 100vh;
                height: 100dvh;
                max-height: 100dvh;
                border-radius: 0;
                transform: none;
                transform-origin: center;
                padding-top: env(safe-area-inset-top, 0px);
                padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        .mint-concierge[data-mc-open="true"] .mc-panel .mc-head {
                padding-top: calc(18px + env(safe-area-inset-top, 0px));
        }
}