:root {
    --merva-ink: var(--text-color, #2c2c2c);
    --merva-muted: var(--muted-color, #6b6383);
    --merva-accent: var(--primary-color, #4c436f);
    --merva-ground: var(--background-color, #f4f3f7);
    --merva-surface: var(--surface-color, #faf9fc);
    --merva-line: var(--border-color, #d4d0e0);
}

.merva-shell, .merva-shell * { box-sizing: border-box; }
.merva-shell [hidden] { display: none !important; }
.merva-shell {
    position: fixed;
    z-index: 90;
    right: max(28px, env(safe-area-inset-right));
    bottom: max(28px, env(safe-area-inset-bottom));
    color: var(--merva-ink);
    font-family: "Source Serif 4", "Songti SC", "STSong", Georgia, serif;
    line-height: 1.6;
}

/* The presence is small; its invisible hit area remains comfortable. */
.merva-launcher, .merva-minimized {
    position: relative;
    display: grid;
    width: 48px;
    height: 48px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--merva-accent);
    cursor: pointer;
    transition: background 180ms ease-out;
}
.merva-launcher::before, .merva-minimized::before {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22wash%22%20cx%3D%2242%25%22%20cy%3D%2238%25%22%20r%3D%2265%25%22%3E%3Cstop%20stop-color%3D%22%23f9e7a6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f2d988%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M50%2015C70%2014%2084%2032%2084%2050C85%2070%2069%2086%2049%2085C28%2085%2015%2068%2016%2048C15%2030%2030%2015%2050%2015Z%22%20fill%3D%22%23f2d77d%22%20opacity%3D%22.12%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23756d85%22%20stroke-width%3D%22.85%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.82%22%3E%3Cpath%20d%3D%22M48%203l.8%2010M50%2017l.5%207M68%2018l-3%207M80%2023l-6%207M76%2034l6-4M80%2045l8-1M81%2056l7%202M77%2065l7%204M70%2075l4%205M58%2080l2%207M56%2090l1%208M44%2081l-1%208M33%2076l-4%207M24%2069l-6%205M21%2060l-7%203M18%2050l-9%20.2M4%2050H1M21%2040l-6-3M17%2029l5%204M29%2023l3%206M36%2016l2%208%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M49%2029C61%2028%2070%2037%2071%2049C73%2062%2064%2073%2051%2073C37%2074%2029%2065%2029%2052C28%2039%2036%2030%2049%2029Z%22%20fill%3D%22url%28%23wash%29%22%20stroke%3D%22%23655e70%22%20stroke-width%3D%221.05%22%2F%3E%3Cpath%20d%3D%22M48%2031C36%2033%2031%2040%2031%2051M33%2060C36%2068%2043%2071%2052%2071%22%20fill%3D%22none%22%20stroke%3D%22%23fff5cd%22%20stroke-width%3D%221.3%22%20opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22M52%2028C64%2030%2073%2039%2073%2051C74%2063%2065%2074%2053%2075%22%20fill%3D%22none%22%20stroke%3D%22%238c7e65%22%20stroke-width%3D%22.5%22%20opacity%3D%22.36%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    content: "";
    animation: merva-sun-breathe 8s ease-in-out infinite;
}
.merva-launcher::after, .merva-minimized::after {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 215, 125, .36) 0%, rgba(242, 215, 125, .13) 38%, transparent 70%);
    content: "";
    pointer-events: none;
    animation: merva-sun-glow 8s ease-in-out infinite;
}
.merva-launcher:hover, .merva-minimized:hover {
    background: color-mix(in srgb, var(--sun-color, #f2d77d) 9%, transparent);
}
.merva-shell button:focus-visible {
    outline: 2px solid var(--merva-accent);
    outline-offset: 4px;
}

.merva-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    width: min(364px, calc(100vw - 56px));
    height: min(460px, calc(100dvh - 56px));
    grid-template-rows: 52px minmax(0, 1fr) auto;
    overflow: clip;
    border: 1px solid color-mix(in srgb, var(--merva-line) 55%, transparent);
    border-radius: 8px;
    background: var(--merva-surface);
    box-shadow: 0 12px 48px color-mix(in srgb, var(--merva-accent) 9%, transparent);
    opacity: 0;
    transform: translateY(7px) scale(0.98);
    transform-origin: right bottom;
    transition: opacity 180ms ease-out, transform 180ms ease-out;
    visibility: hidden;
}
.merva-panel:focus { outline: none; }
.merva-shell[data-state="open"] .merva-panel {
    opacity: 1;
    transform: none;
    visibility: visible;
}
.merva-heading {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 8px;
}
.merva-control {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--merva-muted);
    cursor: pointer;
    font: 21px/1 system-ui, sans-serif;
}
.merva-control:hover { background: color-mix(in srgb, var(--merva-accent) 6%, transparent); }
.merva-transcript {
    overflow: auto;
    overscroll-behavior: contain;
    padding: 18px 28px 22px;
    scrollbar-width: thin;
    scrollbar-color: var(--merva-line) transparent;
}
.merva-message {
    width: fit-content;
    max-width: 92%;
    margin: 0 0 25px;
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.merva-message[data-welcome] {
    margin-bottom: 42px;
    color: var(--merva-accent);
    font-size: 23px;
    line-height: 1.4;
    letter-spacing: -0.025em;
}
.merva-message[data-author="visitor"] {
    margin-left: auto;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--merva-ground);
}
.merva-message p { margin: 0; }
.merva-status {
    display: flex;
    align-items: center;
    min-height: 24px;
    margin: 0 0 20px;
    color: var(--merva-muted);
}
.merva-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: merva-thinking 1.5s ease-in-out infinite;
}
.merva-system-error { margin: 0 0 20px; color: var(--merva-muted); font-size: 14px; }
.merva-retry {
    margin-top: 6px;
    padding: 0;
    min-height: 36px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: var(--merva-accent);
    cursor: pointer;
    font: inherit;
}
.merva-composer { padding: 0 22px 22px; }
.merva-composer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: end;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--merva-line);
    border-radius: 27px;
    background: color-mix(in srgb, var(--merva-ground) 45%, var(--merva-surface));
    transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.merva-composer-row:hover {
    border-color: color-mix(in srgb, var(--merva-muted) 55%, var(--merva-line));
}
.merva-composer-row:focus-within {
    border-color: var(--merva-muted);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--merva-accent) 9%, transparent);
}
.merva-composer textarea {
    width: 100%;
    min-height: 48px;
    max-height: 116px;
    resize: none;
    overflow-y: auto;
    border: 0;
    border-radius: 23px;
    background: transparent;
    color: var(--merva-ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    padding: 12px 0 12px 16px;
}
/* The shared rounded focus ring replaces the textarea's rectangular outline. */
.merva-composer textarea:focus-visible { outline: none; }
.merva-composer textarea::placeholder { color: var(--merva-muted); opacity: 1; }
.merva-send {
    display: grid;
    width: 44px;
    height: 44px;
    margin-bottom: 2px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--merva-accent);
    cursor: pointer;
    font: 23px/1 system-ui, sans-serif;
    transition: opacity 150ms ease-out;
}
.merva-send:disabled { opacity: 0.35; cursor: default; }
.merva-minimized-dot { display: none; }
@keyframes merva-sun-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-1.5px) scale(1.035); }
}
@keyframes merva-sun-glow {
    0%, 100% { opacity: .5; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.1); }
}
@keyframes merva-thinking {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}
@media (max-width: 600px) {
    .merva-shell {
        right: max(16px, env(safe-area-inset-right));
        bottom: max(18px, env(safe-area-inset-bottom));
    }
    .merva-panel {
        position: fixed;
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        width: auto;
        height: min(480px, calc(var(--merva-visible-height, 100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
        bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--merva-keyboard-bottom, 0px));
    }
    body.merva-mobile-open { overflow: hidden !important; }
    body.merva-mobile-open::after {
        position: fixed;
        z-index: 89;
        inset: 0;
        background: color-mix(in srgb, var(--merva-ground) 25%, transparent);
        content: "";
    }
}
@media (prefers-reduced-motion: reduce) {
    .merva-shell *, .merva-shell *::before, .merva-shell *::after {
        animation: none !important;
        transition: none !important;
    }
}

.merva-feedback {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 5px 12px;
    color: var(--merva-muted);
    font-size: 13px;
    line-height: 1.5;
}
.merva-feedback .merva-retry { margin: 0; min-height: 32px; }
.merva-send[data-action="cancel"] { font-size: 14px; }