/**
 * 상품 추천 챗봇 위젯 (계획서 8절)
 *
 * 색은 프로젝트 디자인 토큰(--color-*)에서 받고, 모서리와 그림자는 위젯이 직접 정한다.
 * 어느 쪽이든 값은 아래 지역 변수로 한 번만 선언한다 — 파일 곳곳에
 * `var(--color-primary, #2563eb)` 를 되풀이하면 폴백이 어긋나기 시작한다.
 *
 * 레이아웃 원칙: 대화 로그 하나가 모든 것을 담는다. 말풍선·조건 칩·상품 카드가
 * 같은 흐름에 시간순으로 쌓이고, 로그 밖에 고정되는 것은 비교함뿐이다
 * (스크롤을 올리면 사라지면 안 되는 유일한 요소라서).
 */

.mublo-chat {
    /* 색은 스킨 토큰을 따른다 — 판매점이 브랜드 색을 바꾸면 위젯도 함께 바뀐다. */
    --chat-primary: var(--color-primary, #2563eb);
    --chat-accent: var(--color-amber-500, #f59e0b);
    --chat-surface: var(--color-bg, #fff);
    --chat-muted: var(--color-bg-muted, #f1f5f9);
    --chat-border: var(--color-border, #e5e7eb);
    --chat-text: var(--color-text, #0f172a);
    --chat-text-muted: var(--color-text-muted, #64748b);

    /*
     * 모서리는 토큰을 쓰지 않는다.
     *
     * 프로젝트 --radius-sm/md/lg 는 4/8/12px 로, 문서형 레이아웃에 맞춘 값이다.
     * 채팅 UI 는 알약형 입력창·둥근 말풍선·바텀시트가 한 화면에 모여 있어서
     * 그 값을 그대로 쓰면 버튼만 각져 보인다. 위젯의 형태 언어는 여기서 정한다.
     */
    --chat-radius-sm: 10px;
    --chat-radius-md: 14px;
    --chat-radius-lg: 20px;

    /* 원색 위에 얹는 하이라이트. 어떤 브랜드 색에도 통한다. */
    --chat-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%);
    --chat-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --chat-shadow-md: 0 6px 18px rgba(15, 23, 42, 0.1);
    --chat-shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.22);

    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9000;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── 등장 모션 ─────────────────────────────────────────── */

/*
 * 새로 붙는 조각은 전부 이 한 가지 궤적으로 들어온다. 요소마다 다른 방식으로
 * 나타나면 시선이 어디를 봐야 할지 모른다. 계단은 animation-delay 로만 준다.
 */
.mublo-chat .is-entering {
    animation: mublo-chat-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mublo-chat-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* ── 런처 ──────────────────────────────────────────────── */

.mublo-chat__launcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* 단색보다 방향이 있는 그라디언트가 원형에서 훨씬 살아난다. 브랜드 색 위에 얹으므로
       판매점이 색을 바꿔도 그대로 따라간다. */
    background-color: var(--chat-primary);
    background-image:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 62%);
    color: #fff;
    cursor: pointer;
    box-shadow: var(--chat-shadow-md);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease;
}

.mublo-chat__launcher:hover { transform: translateY(-3px) scale(1.04); box-shadow: var(--chat-shadow-lg); }
.mublo-chat__launcher:active { transform: translateY(-1px) scale(1); }
.mublo-chat__launcher:focus-visible { outline: 3px solid var(--chat-primary); outline-offset: 3px; }
.mublo-chat.is-open .mublo-chat__launcher { display: none; }

.mublo-chat__launcher-icon {
    display: block;
    width: 32px;
    height: 32px;
}

/* 캐릭터가 살짝 인사하듯 — 한 번에 눈이 가되 계속 흔들리지는 않게 길게 쉬어준다. */
.mublo-chat__launcher-icon svg {
    display: block;
    animation: mublo-chat-nod 4.5s ease-in-out infinite;
    transform-origin: 50% 80%;
}

@keyframes mublo-chat-nod {
    0%, 88%, 100% { transform: rotate(0deg); }
    91%           { transform: rotate(-7deg); }
    95%           { transform: rotate(6deg); }
}

/*
 * 원형 버튼에는 글자가 안 들어간다. 무엇인지 모른 채 두면 누를 이유가 없으므로
 * hover·focus 에서 이름을 띄운다. 스크린리더는 버튼의 aria-label 을 읽는다.
 */
.mublo-chat__launcher-tip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    padding: 7px 12px;
    border-radius: var(--chat-radius-sm);
    background: var(--chat-text);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.mublo-chat__launcher:hover .mublo-chat__launcher-tip,
.mublo-chat__launcher:focus-visible .mublo-chat__launcher-tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* 터치 기기에는 hover 가 없다. 탭할 때 잠깐 스쳐 보이는 것만 남으므로 아예 감춘다. */
@media (hover: none) {
    .mublo-chat__launcher-tip { display: none; }
}

/* 눈에 띄되 성가시지 않게 — 한 번 퍼지고 사라지는 링을 느리게 반복한다. */
.mublo-chat__launcher::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--chat-primary);
    animation: mublo-chat-ring 2.8s ease-out infinite;
    pointer-events: none;
}

@keyframes mublo-chat-ring {
    0%       { opacity: 0.45; transform: scale(1); }
    60%, 100% { opacity: 0; transform: scale(1.28); }
}

/* ── 런처 말풍선 ───────────────────────────────────────── */

/*
 * 닫혀 있을 때만 잠깐 떴다 사라진다. 원형 버튼만 놓여 있으면 무엇을 하는 것인지
 * 알기 어려워 눌러볼 이유가 생기지 않는다. 표시 주기와 횟수는 JS(NUDGE)가 정한다.
 */
.mublo-chat__nudge {
    position: absolute;
    right: 74px;                 /* 런처(60px) + 꼬리 자리 */
    bottom: 13px;
    display: flex;
    align-items: center;
    gap: 4px;

    /*
     * width 를 반드시 지정한다.
     *
     * 이 요소의 컨테이닝 블록은 .mublo-chat 인데, 닫혀 있을 때 그 폭은 런처와 같은
     * 60px 이다. width 를 비워두면 브라우저가 그 60px 에서 right:74px 를 뺀 값으로
     * 폭을 맞추려 해 사실상 0 이 되고, 글자가 한 줄에 하나씩 세로로 접힌다.
     * max-content 로 내용 기준 폭을 잡고 max-width 로만 줄바꿈을 허용한다.
     */
    width: max-content;
    max-width: min(210px, calc(100vw - 110px));

    padding: 8px 8px 8px 12px;
    border-radius: 14px;
    background: var(--chat-surface);
    color: var(--chat-text);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: var(--chat-shadow-md), inset 0 0 0 1px var(--chat-border);
    opacity: 0;
    transform: translateX(10px) scale(0.96);
    transform-origin: 100% 70%;
    pointer-events: none;
    transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* 말풍선 꼬리 — 런처를 가리켜야 "이 버튼이 하는 말" 로 읽힌다. */
.mublo-chat__nudge::after {
    content: '';
    position: absolute;
    right: -7px;
    bottom: 14px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid var(--chat-surface);
}

.mublo-chat.has-nudge .mublo-chat__nudge {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

/* 대화가 열려 있으면 런처와 함께 사라진다. */
.mublo-chat.is-open .mublo-chat__nudge { display: none; }

/* min-width:0 이 없으면 flex 항목이 min-content 아래로 못 줄어 max-width 를 넘긴다. */
.mublo-chat__nudge-text { min-width: 0; cursor: pointer; }

.mublo-chat__nudge-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--chat-text-muted);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
}

.mublo-chat__nudge-close:hover { background: var(--chat-muted); color: var(--chat-text); }

/* 말풍선이 떠 있는 동안에는 hover 툴팁을 접는다 — 같은 자리를 두고 다투게 된다. */
.mublo-chat.has-nudge .mublo-chat__launcher-tip { opacity: 0 !important; }

/* ── 패널 ──────────────────────────────────────────────── */

.mublo-chat__panel {
    position: relative; /* 상세 시트가 이 안을 덮는다 */
    display: flex;
    flex-direction: column;
    width: 384px;
    max-width: calc(100vw - 40px);
    height: 620px;
    max-height: calc(100vh - 40px);
    background: var(--chat-surface);
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius-lg);
    box-shadow: var(--chat-shadow-lg);
    overflow: hidden;
    transform-origin: bottom right;
}

.mublo-chat__panel[hidden] { display: none; }

.mublo-chat.is-open .mublo-chat__panel {
    animation: mublo-chat-open 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mublo-chat-open {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

/* 헤더는 브랜드 색으로 채운다 — 대화 영역과 확실히 분리돼야 상담창처럼 읽힌다. */
.mublo-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    background-color: var(--chat-primary);
    background-image: var(--chat-sheen);
    color: #fff;
}

.mublo-chat__identity { display: flex; align-items: center; gap: 11px; min-width: 0; }

.mublo-chat__header-avatar {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* 헤더는 브랜드 색 위라 캐릭터를 흰색으로 뺀다. */
.mublo-chat__header-avatar-face {
    display: block;
    width: 22px;
    height: 22px;
    color: #fff;
}

/* 응대 중이라는 신호. 실제 상담원 유무와 무관한 장식이 아니라 봇이 즉답한다는 뜻이다. */
.mublo-chat__status-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px var(--chat-primary);
}

.mublo-chat__headings { display: flex; flex-direction: column; min-width: 0; }

.mublo-chat__title {
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.mublo-chat__subtitle {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mublo-chat__close {
    flex: 0 0 auto;
    border: 0;
    background: rgba(255, 255, 255, 0.24);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 9px 10px;
    border-radius: 50%;
    color: #fff;
    transition: background-color 150ms ease;
}

.mublo-chat__close:hover { background: rgba(255, 255, 255, 0.28); }
.mublo-chat__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* ── 대화 로그 ──────────────────────────────────────────── */

.mublo-chat__log {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    padding: 16px 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--chat-muted);
}

.mublo-chat__log::-webkit-scrollbar { width: 8px; }
.mublo-chat__log::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    background-clip: content-box;
    background-color: rgba(100, 116, 139, 0.32);
    border-radius: 999px;
}

/* 한 턴 = 아바타 + 그 턴에 딸린 모든 것(말풍선, 카드, 칩, 평가) */
.mublo-chat__turn { display: flex; align-items: flex-start; gap: 8px; }
.mublo-chat__turn--user { justify-content: flex-end; }

.mublo-chat__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--chat-surface);
    box-shadow: var(--chat-shadow-sm), inset 0 0 0 1px var(--chat-border);
    /* 말풍선 옆 아바타는 흰 배경 위라 브랜드 색으로 그린다 — 헤더와 같은 그림, 다른 색. */
    color: var(--chat-primary);
    padding: 5px;
}

.mublo-chat__avatar svg { display: block; }

.mublo-chat__stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    /* 카드 캐러셀이 아바타 폭을 뺀 나머지를 다 쓰도록 */
    flex: 1 1 auto;
}

/*
 * 사용자 말풍선은 반대쪽 여백을 남긴다. 폭을 꽉 채우면 누가 한 말인지가
 * 정렬만으로는 읽히지 않는다. 봇 쪽은 카드 캐러셀이 폭을 다 써야 해서 스택 자체는
 * 넓게 두고 말풍선에만 상한을 건다.
 */
.mublo-chat__turn--user .mublo-chat__stack {
    align-items: flex-end;
    flex: 0 1 auto;
    max-width: 84%;
}

/* 말풍선 + 시각을 한 줄로 — 메신저의 기본 단위 */
.mublo-chat__line { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; }
.mublo-chat__turn--user .mublo-chat__line { flex-direction: row-reverse; }

.mublo-chat__time {
    flex: 0 0 auto;
    padding-bottom: 2px;
    font-size: 10px;
    color: var(--chat-text-muted);
    opacity: 0.75;
    white-space: nowrap;
}

.mublo-chat__bubble {
    max-width: 100%;
    padding: 10px 14px;
    border-radius: 16px 16px 16px 5px;
    background: var(--chat-surface);
    color: var(--chat-text);
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: var(--chat-shadow-sm);
}

.mublo-chat__turn--bot .mublo-chat__bubble { max-width: 92%; }

.mublo-chat__turn--user .mublo-chat__bubble {
    border-radius: 16px 16px 5px 16px;
    background-color: var(--chat-primary);
    background-image: var(--chat-sheen);
    color: #fff;
    box-shadow: var(--chat-shadow-sm);
}

/* 파서가 이해한 조건 되비추기 */
.mublo-chat__understood {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--chat-text-muted);
}

.mublo-chat__tag {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--chat-surface);
    box-shadow: inset 0 0 0 1px var(--chat-border);
    color: var(--chat-text);
    font-weight: 600;
}

/* ── 입력 중 표시 ───────────────────────────────────────── */

.mublo-chat__bubble--typing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 14px 16px;
}

.mublo-chat__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chat-text-muted);
    animation: mublo-chat-blink 1.25s infinite ease-in-out;
}

.mublo-chat__dot:nth-child(2) { animation-delay: 0.16s; }
.mublo-chat__dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes mublo-chat-blink {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0) scale(0.9); }
    30%           { opacity: 1; transform: translateY(-3px) scale(1); }
}

/* ── 상품 카드 (세로 목록) ──────────────────────────────── */

/*
 * 한 줄에 한 상품. 그 줄 안에서 월 렌탈료 / 사은품 금액 / 제휴카드 적용가가
 * 모두 보여야 위아래로 훑으며 고를 수 있다. 옆으로 미는 캐러셀은 카드가 좁아
 * 금액을 하나밖에 못 넣었고, 나머지가 화면 밖이라 비교가 되지 않았다.
 */
.mublo-chat__cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 2px 0 4px;
}

.mublo-chat__card {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius-md);
    background: var(--chat-surface);
    color: var(--chat-text);
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-shadow: var(--chat-shadow-sm);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 180ms ease,
                border-color 180ms ease;
}

.mublo-chat__card:hover {
    transform: translateY(-2px);
    border-color: var(--chat-primary);
    box-shadow: var(--chat-shadow-md);
}

.mublo-chat__card:active { transform: translateY(0); }
.mublo-chat__card:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: 2px; }

.mublo-chat__card-thumb {
    position: relative;
    flex: 0 0 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-height: 88px;
    background: var(--chat-muted);
    overflow: hidden;
}

.mublo-chat__card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mublo-chat__card:hover .mublo-chat__card-thumb img { transform: scale(1.06); }

.mublo-chat__card-noimage {
    padding: 0 4px;
    font-size: 10.5px;
    text-align: center;
    color: var(--chat-text-muted);
}

/* 첫 카드는 서버가 매긴 1순위다. 그 사실을 굳이 감추지 않는다. */
.mublo-chat__card-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 2px 7px;
    border-radius: 999px;
    background-color: var(--chat-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mublo-chat__card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 3px;
    min-width: 0;
    padding: 10px 4px 10px 11px;
}

.mublo-chat__card-title {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
    /* 상품명 길이가 제각각이라 두 줄로 자른다. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mublo-chat__card-fee {
    margin-bottom: 1px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--chat-primary);
}

/* 혜택 줄 — 아이콘 한 칸 + 값(+ 조건) 한 칸 */
.mublo-chat__card-benefit {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--chat-text-muted);
}

.mublo-chat__card-benefit-icon { flex: 0 0 auto; font-size: 11px; line-height: 1.5; }

.mublo-chat__card-benefit-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mublo-chat__card-benefit-text {
    font-weight: 600;
    color: var(--chat-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * 실적 조건. 금액 줄과 달리 잘라내지 않고 두 줄까지 흘린다 —
 * 여기가 잘리면 조건부 금액이 확정 금액처럼 읽힌다.
 */
.mublo-chat__card-benefit-note {
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--chat-text-muted);
    opacity: 0.9;
}

/*
 * 사은품 줄.
 *
 * 앰버 글자만으로는 흰 배경에서 눈에 걸리지 않았다(#f59e0b 는 흰 바탕 대비 2:1 수준).
 * 배경을 깐 알약으로 바꿔 대비를 올리고, 글자색도 한 단계 진한 앰버로 내린다.
 * 카드 한 줄에서 렌탈료 다음으로 먼저 읽혀야 하는 정보다.
 */
.mublo-chat__card-benefit--gift .mublo-chat__card-benefit-text {
    align-self: flex-start;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fef3c7;
    color: #b45309;
    font-weight: 700;
}

.mublo-chat__card-chevron {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 10px 0 4px;
    font-size: 18px;
    line-height: 1;
    color: var(--chat-text-muted);
    opacity: 0.55;
    transition: color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.mublo-chat__card:hover .mublo-chat__card-chevron {
    color: var(--chat-primary);
    opacity: 1;
    transform: translateX(2px);
}

/* ── 상품 상세 시트 ─────────────────────────────────────── */

/*
 * 대화를 완전히 덮지 않는다. 위쪽에 흐릿하게 남은 대화가 "돌아갈 곳"을 알려주고,
 * 그 자리를 눌러 닫는 동작이 설명 없이 통한다.
 */
.mublo-chat__modal {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(15, 23, 42, 0.44);
    animation: mublo-chat-fade 200ms ease both;
}

@keyframes mublo-chat-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.mublo-chat__sheet {
    display: flex;
    flex-direction: column;
    max-height: 94%;
    background: var(--chat-surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.24);
    animation: mublo-chat-sheet-up 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mublo-chat-sheet-up {
    from { transform: translateY(18%); opacity: 0.6; }
    to   { transform: none; opacity: 1; }
}

.mublo-chat__sheet-grip {
    width: 38px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: var(--chat-border);
}

.mublo-chat__modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--chat-border);
}

.mublo-chat__modal-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.mublo-chat__modal-close {
    flex: 0 0 auto;
    border: 0;
    background: var(--chat-muted);
    font-size: 13px;
    line-height: 1;
    padding: 7px 8px;
    border-radius: 50%;
    color: var(--chat-text-muted);
    cursor: pointer;
    transition: background-color 150ms ease;
}

.mublo-chat__modal-close:hover { background: var(--chat-border); }
.mublo-chat__modal-close:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: 1px; }

.mublo-chat__modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 16px 18px;
}

.mublo-chat__modal-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 176px;
    margin-bottom: 14px;
    border-radius: var(--chat-radius-md);
    background: var(--chat-muted);
    overflow: hidden;
}

.mublo-chat__modal-image img { max-width: 100%; max-height: 100%; object-fit: contain; }

.mublo-chat__modal-headline {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--chat-text-muted);
}

.mublo-chat__modal-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--chat-radius-md);
    background: var(--chat-muted);
}

.mublo-chat__modal-fee {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--chat-primary);
}

.mublo-chat__modal-variant {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--chat-surface);
    font-size: 11px;
    font-weight: 600;
    color: var(--chat-text-muted);
}

.mublo-chat__modal-section { margin-top: 16px; }

.mublo-chat__modal-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--chat-text-muted);
}

/* 섹션 제목 앞의 짧은 브랜드 색 막대 — 구분선을 긋는 것보다 가볍다. */
.mublo-chat__modal-section-title::before {
    content: '';
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--chat-primary);
}

.mublo-chat__modal-text { margin: 0; font-size: 13px; line-height: 1.6; word-break: break-word; }

.mublo-chat__modal-list { margin: 0; padding-left: 17px; font-size: 13px; line-height: 1.6; }
.mublo-chat__modal-list li { margin-bottom: 3px; }
.mublo-chat__modal-list--caution { color: var(--chat-text-muted); }

/*
 * border-collapse 인 표는 overflow:hidden 으로 모서리가 깎이지 않는다.
 * 둥글리기를 흉내내는 대신 줄무늬 첫/끝 셀에만 반경을 준다.
 */
.mublo-chat__modal-specs {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.mublo-chat__modal-specs th,
.mublo-chat__modal-specs td {
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
}

.mublo-chat__modal-specs tr:nth-child(odd) th,
.mublo-chat__modal-specs tr:nth-child(odd) td { background: var(--chat-muted); }

.mublo-chat__modal-specs tr:nth-child(odd) th {
    border-radius: var(--chat-radius-sm) 0 0 var(--chat-radius-sm);
}

.mublo-chat__modal-specs tr:nth-child(odd) td {
    border-radius: 0 var(--chat-radius-sm) var(--chat-radius-sm) 0;
}

.mublo-chat__modal-specs th {
    width: 38%;
    font-weight: 600;
    color: var(--chat-text-muted);
}

.mublo-chat__modal-note {
    margin: 12px 0 0;
    font-size: 11px;
    line-height: 1.55;
    color: var(--chat-text-muted);
    opacity: 0.85;
}

.mublo-chat__modal-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--chat-border);
    background: var(--chat-surface);
}

/* ── 버튼 ──────────────────────────────────────────────── */

.mublo-chat__btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid var(--chat-border);
    border-radius: var(--chat-radius-sm);
    background: var(--chat-surface);
    color: var(--chat-text);
    font-size: 13px;
    font-weight: 700;
    /* 좁은 패널에 버튼 셋이 서므로 줄바꿈은 막고 폭으로 조절한다. */
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.mublo-chat__btn:hover { background: var(--chat-muted); }
.mublo-chat__btn:active { transform: scale(0.98); }
.mublo-chat__btn:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: 2px; }
.mublo-chat__btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.mublo-chat__btn--primary {
    background-color: var(--chat-primary);
    background-image: var(--chat-sheen);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--chat-shadow-sm);
}

.mublo-chat__btn--primary:hover {
    background-color: var(--chat-primary);
    box-shadow: var(--chat-shadow-md);
}

.mublo-chat__btn--sm { flex: 0 0 auto; padding: 7px 14px; font-size: 12px; }

/*
 * 뒤로가기는 결정 버튼이 아니다. 자리는 차지하되 시선은 가져가지 않도록
 * 폭을 내용에 맞추고 색을 죽인다 — 나란히 선 셋 중 무엇을 누를지 헷갈리면 안 된다.
 */
.mublo-chat__btn--back {
    flex: 0 0 auto;
    padding: 11px 13px;
    background: var(--chat-muted);
    border-color: transparent;
    color: var(--chat-text-muted);
}

.mublo-chat__btn--back:hover { background: var(--chat-border); color: var(--chat-text); }

.mublo-chat__btn-icon { font-size: 15px; line-height: 1; }

/* ── 상담 신청 ─────────────────────────────────────────── */

.mublo-chat__consult {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
    padding: 14px;
    border-radius: var(--chat-radius-md);
    background: var(--chat-surface);
    box-shadow: var(--chat-shadow-sm), inset 0 0 0 1px var(--chat-border);
}

.mublo-chat__consult.is-done { text-align: center; }

.mublo-chat__consult-title { margin: 0; font-size: 13px; font-weight: 700; }

.mublo-chat__consent {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--chat-text-muted);
    cursor: pointer;
}

/* ── 조건 선택 칩 (대화 안) ─────────────────────────────── */

.mublo-chat__chips {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    padding-top: 2px;
}

/*
 * 지난 턴의 칩. 지우지 않고 잠근다 — 어떤 조건을 골라 왔는지는 대화의 일부다.
 * 다만 지금 누를 수 있는 것과 헷갈리지 않도록 눈에 띄게 죽인다.
 */
.mublo-chat__chips.is-stale { opacity: 0.42; }
.mublo-chat__chips.is-stale .mublo-chat__chip { cursor: default; box-shadow: none; }

.mublo-chat__chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.mublo-chat__chip-label {
    width: 100%;
    font-size: 11px;
    font-weight: 700;
    color: var(--chat-text-muted);
}

.mublo-chat__chip {
    padding: 7px 13px;
    border: 0;
    border-radius: 999px;
    background: var(--chat-surface);
    box-shadow: inset 0 0 0 1.5px var(--chat-primary), var(--chat-shadow-sm);
    color: var(--chat-primary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.mublo-chat__chip:hover {
    background-color: var(--chat-primary);
    color: #fff;
    transform: translateY(-1px);
}

.mublo-chat__chip:active { transform: translateY(0); }
.mublo-chat__chip:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: 2px; }

.mublo-chat__chip:disabled {
    cursor: not-allowed;
    box-shadow: inset 0 0 0 1px var(--chat-border);
    color: var(--chat-text-muted);
    background: var(--chat-surface);
    transform: none;
}

/* ── 비교 ──────────────────────────────────────────────── */

.mublo-chat__compare-tray {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--chat-border);
    background: var(--chat-muted);
}

.mublo-chat__chip--removable {
    font-size: 11.5px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mublo-chat__compare {
    width: 100%;
    margin: 2px 0;
    padding: 10px;
    border-radius: var(--chat-radius-md);
    background: var(--chat-surface);
    box-shadow: var(--chat-shadow-sm), inset 0 0 0 1px var(--chat-border);
    /* 항목이 많으면 표가 넓어진다. 패널이 아니라 표 안에서 스크롤되게 둔다. */
    overflow-x: auto;
}

.mublo-chat__compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.mublo-chat__compare-table th,
.mublo-chat__compare-table td {
    padding: 7px 9px;
    border-bottom: 1px solid var(--chat-border);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.mublo-chat__compare-table thead th {
    font-weight: 700;
    color: var(--chat-text);
    border-bottom: 2px solid var(--chat-border);
}

.mublo-chat__compare-table tbody th {
    font-weight: 500;
    color: var(--chat-text-muted);
}

/* ── 입력 ──────────────────────────────────────────────── */

.mublo-chat__form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px calc(11px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--chat-border);
    background: var(--chat-surface);
}

.mublo-chat__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 15px;
    border: 1px solid var(--chat-border);
    border-radius: 999px;
    background: var(--chat-muted);
    color: var(--chat-text);
    font-size: 14px;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.mublo-chat__input::placeholder { color: var(--chat-text-muted); }

.mublo-chat__input:focus {
    outline: none;
    background: var(--chat-surface);
    border-color: var(--chat-primary);
}

.mublo-chat__input:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: -1px; }

/* 상담 폼 안의 입력칸은 말풍선 폭에 맞춘 사각형이 자연스럽다 */
.mublo-chat__consult .mublo-chat__input {
    border-radius: var(--chat-radius-sm);
    padding: 10px 12px;
    background: var(--chat-surface);
}

/* select 도 같은 입력칸으로 보이게 — 기본 위젯 모양이면 폼 안에서 혼자 튄다. */
.mublo-chat__consult select.mublo-chat__input {
    appearance: none;
    cursor: pointer;
    /* 화살표는 배경 이미지로 그린다(외부 아이콘 의존 없이) */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--chat-text-muted) 50%),
        linear-gradient(135deg, var(--chat-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) calc(50% + 2px), calc(100% - 11px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px;
}

.mublo-chat__send {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background-color: var(--chat-primary);
    background-image: var(--chat-sheen);
    color: #fff;
    cursor: pointer;
    box-shadow: var(--chat-shadow-sm);
    transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.mublo-chat__send-icon { font-size: 18px; font-weight: 700; line-height: 1; }
.mublo-chat__send:hover { transform: translateY(-1px); box-shadow: var(--chat-shadow-md); }
.mublo-chat__send:active { transform: scale(0.94); }
.mublo-chat__send:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.mublo-chat__send:focus-visible { outline: 3px solid var(--chat-primary); outline-offset: 2px; }

/* ── 피드백 ────────────────────────────────────────────── */

.mublo-chat__feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--chat-text-muted);
}

.mublo-chat__feedback-btn {
    border: 0;
    border-radius: 999px;
    background: var(--chat-surface);
    box-shadow: inset 0 0 0 1px var(--chat-border);
    padding: 4px 10px;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.mublo-chat__feedback-btn:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--chat-primary); }
.mublo-chat__feedback-btn:focus-visible { outline: 2px solid var(--chat-primary); outline-offset: 2px; }

/* ── 모바일: 전체 화면 ──────────────────────────────────── */

@media (max-width: 480px) {
    .mublo-chat { right: 14px; bottom: 14px; }

    .mublo-chat.is-open {
        inset: 0;
        right: 0;
        bottom: 0;
    }

    .mublo-chat.is-open .mublo-chat__panel {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
        /* 전체 화면에서는 아래에서 밀어 올리는 편이 자연스럽다 */
        animation-name: mublo-chat-open-full;
    }

    @keyframes mublo-chat-open-full {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: none; }
    }

    /* 화면이 넓어진 만큼 썸네일도 키운다 */
    .mublo-chat__card-thumb { flex-basis: 96px; min-height: 96px; }
    .mublo-chat__modal-image { height: 220px; }
}

/*
 * 접근성: 모션 최소화 설정 존중.
 *
 * duration 만 줄이면 delay 가 그대로 남아 계단식 등장이 "빈 화면 대기"가 된다.
 * delay 도 함께 걷어내야 한다. 대화 리듬(setTimeout)은 JS 쪽에서 같이 줄인다.
 */
@media (prefers-reduced-motion: reduce) {
    .mublo-chat *,
    .mublo-chat *::before,
    .mublo-chat *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .mublo-chat__log { scroll-behavior: auto; }
}