/**
 * 제주넷 AI 챗봇 - 스타일시트
 * 서버 경로: /chatbot/widget/chatbot.css
 * 
 * 🍊 제주 감귤 테마 - 따뜻하고 친근한 디자인
 * 어르신도 편하게 사용할 수 있도록 글씨 크기 넉넉하게
 */

/* ============================================================
   CSS 변수
   ============================================================ */
:root {
    --jn-primary: #FF8C3A;
    --jn-primary-dark: #E67A2E;
    --jn-primary-light: #FFF3E8;
    --jn-secondary: #5C9E31;
    --jn-secondary-light: #EDF7E5;
    --jn-text: #333333;
    --jn-text-light: #777777;
    --jn-bg: #FFFFFF;
    --jn-bg-gray: #F7F7F7;
    --jn-border: #E8E8E8;
    --jn-shadow: rgba(0, 0, 0, 0.12);
    --jn-chat-user: #FF8C3A;
    --jn-chat-bot: #F0F2F5;
    --jn-radius: 16px;
    --jn-font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
   플로팅 버튼
   ============================================================ */
#jn-chatbot-toggle {
    position: fixed;
    bottom: 34px;
    right: 24px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--jn-primary), var(--jn-primary-dark));
    border: 3px solid white;
    cursor: pointer;
    z-index: 2147483646;
    box-shadow: 0 4px 20px rgba(255, 140, 58, 0.4);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: visible;
}

#jn-chatbot-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(255, 140, 58, 0.5);
}

#jn-chatbot-toggle:active {
    transform: scale(0.96);
}

#jn-chatbot-toggle .jn-toggle-icon {
    font-size: 28px;
    line-height: 1;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

#jn-chatbot-toggle.jn-active {
    display: none;
}

#jn-chatbot-toggle.jn-active .jn-toggle-icon {
    transform: none;
}

/* 새 메시지 뱃지 */
#jn-chatbot-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #EF4444;
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    font-family: var(--jn-font);
}

/* 둥근 버튼 하단 X 버튼 */
#jn-chatbot-dismiss {
    position: absolute;
    bottom: -4px;
    left: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #000;
    color: white;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    border: 2px solid white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    transition: background 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
#jn-chatbot-dismiss:hover {
    background: #000;
}
#jn-chatbot-toggle.jn-active #jn-chatbot-dismiss {
    display: none;
}

/* 안내 말풍선 (처음 방문 시) */
#jn-chatbot-tooltip {
    position: fixed;
    bottom: 96px;
    right: 24px;
    background: white;
    color: var(--jn-text);
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-family: var(--jn-font);
    box-shadow: 0 4px 20px var(--jn-shadow);
    z-index: 2147483645;
    max-width: 260px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
    pointer-events: none;
    line-height: 1.5;
}

#jn-chatbot-tooltip.jn-show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.jn-tooltip-btn {
    flex: 1;
    padding: 6px 8px;
    font-size: 12px;
    font-family: var(--jn-font);
    border: 1.5px solid var(--jn-primary);
    border-radius: 8px;
    background: white;
    color: var(--jn-primary);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}
.jn-tooltip-btn:hover {
    background: var(--jn-primary);
    color: white;
}
.jn-tooltip-greeting {
    margin-bottom: 8px;
}

#jn-chatbot-tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 24px;
    width: 16px;
    height: 16px;
    background: white;
    transform: rotate(45deg);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.04);
}

/* ============================================================
   미니 바 (X 클릭 후 납작하게 표시)
   ============================================================ */
#jn-chatbot-minibar {
    position: fixed;
    bottom: 24px;
    right: 24px;
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--jn-primary), var(--jn-primary-dark));
    border: 2px solid white;
    cursor: pointer;
    z-index: 2147483646;
    box-shadow: 0 2px 12px rgba(255, 140, 58, 0.35);
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    transition: all 0.3s ease;
    pointer-events: none;
    font-family: var(--jn-font);
}
#jn-chatbot-minibar.jn-show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
#jn-chatbot-minibar:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 18px rgba(255, 140, 58, 0.5);
}
#jn-chatbot-minibar:active {
    transform: scale(0.96);
}
.jn-minibar-icon {
    font-size: 16px;
    line-height: 1;
}
.jn-minibar-text {
    font-size: 12px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

/* ============================================================
   채팅 창
   ============================================================ */
#jn-chatbot-window {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 520px;
    height: 740px;
    max-height: calc(100vh - 120px);
    background: var(--jn-bg);
    border-radius: var(--jn-radius);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    z-index: 2147483647;
    display: none;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--jn-font);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

#jn-chatbot-window.jn-open {
    display: flex;
    animation: jnSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes jnSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================
   헤더
   ============================================================ */
#jn-chatbot-header {
    background: linear-gradient(135deg, var(--jn-primary), var(--jn-primary-dark));
    color: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.jn-header-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    overflow: hidden;
}

.jn-header-info {
    flex: 1;
    min-width: 0;
}

.jn-header-name {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 2px;
}

.jn-header-status {
    font-size: 12px;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 6px;
}

.jn-header-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ADE80;
    display: inline-block;
}

.jn-header-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.jn-header-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ============================================================
   메시지 영역
   ============================================================ */
#jn-chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--jn-bg-gray);
    scroll-behavior: smooth;
}

/* 스크롤바 스타일 */
#jn-chatbot-messages::-webkit-scrollbar {
    width: 5px;
}

#jn-chatbot-messages::-webkit-scrollbar-track {
    background: transparent;
}

#jn-chatbot-messages::-webkit-scrollbar-thumb {
    background: #D0D0D0;
    border-radius: 10px;
}

/* 메시지 공통 */
.jn-message {
    display: flex;
    gap: 8px;
    max-width: 85%;
    animation: jnFadeIn 0.3s ease;
}

@keyframes jnFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* AI 메시지 (왼쪽) */
.jn-message-bot {
    align-self: flex-start;
}

.jn-message-bot .jn-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--jn-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    overflow: hidden;
}

.jn-message-bot .jn-msg-bubble {
    background: white;
    color: var(--jn-text);
    padding: 12px 16px;
    border-radius: 4px 16px 16px 16px;
    font-size: 14px;
    line-height: 1.65;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 고객 메시지 (오른쪽) */
.jn-message-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.jn-message-user .jn-msg-bubble {
    background: var(--jn-chat-user);
    color: white;
    padding: 12px 16px;
    border-radius: 16px 4px 16px 16px;
    font-size: 14px;
    line-height: 1.65;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 타이핑 인디케이터 */
.jn-typing {
    align-self: flex-start;
    display: flex;
    gap: 8px;
    padding: 4px 0;
}

.jn-typing .jn-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--jn-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
}

.jn-typing-dots {
    background: white;
    padding: 12px 18px;
    border-radius: 4px 16px 16px 16px;
    display: flex;
    gap: 5px;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.jn-typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #CCCCCC;
    animation: jnTypingBounce 1.2s infinite;
}

.jn-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.jn-typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes jnTypingBounce {
    0%, 60%, 100% { transform: translateY(0); background: #CCCCCC; }
    30% { transform: translateY(-6px); background: var(--jn-primary); }
}

/* 시간 표시 */
.jn-msg-time {
    font-size: 11px;
    color: var(--jn-text-light);
    margin-top: 4px;
    padding: 0 4px;
}

.jn-message-user .jn-msg-time {
    text-align: right;
}

/* 빠른 질문 버튼 */
.jn-quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
    align-self: flex-start;
    max-width: 90%;
}

.jn-quick-btn {
    background: white;
    border: 1.5px solid var(--jn-primary);
    color: var(--jn-primary);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-family: var(--jn-font);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.jn-quick-btn:hover {
    background: var(--jn-primary);
    color: white;
}

/* ============================================================
   입력 영역
   ============================================================ */
#jn-chatbot-input-area {
    padding: 12px 16px;
    background: white;
    border-top: 1px solid var(--jn-border);
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
}

#jn-chatbot-input {
    flex: 1;
    border: 1.5px solid var(--jn-border);
    border-radius: 24px;
    padding: 11px 18px;
    font-size: 14px;
    font-family: var(--jn-font);
    color: var(--jn-text);
    outline: none;
    resize: none;
    max-height: 100px;
    line-height: 1.4;
    transition: border-color 0.2s;
}

#jn-chatbot-input:focus {
    border-color: var(--jn-primary);
}

#jn-chatbot-input::placeholder {
    color: #BBBBBB;
}

#jn-chatbot-send {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--jn-primary);
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

#jn-chatbot-send:hover {
    background: var(--jn-primary-dark);
    transform: scale(1.05);
}

#jn-chatbot-send:disabled {
    background: #DDDDDD;
    cursor: not-allowed;
    transform: none;
}

/* 마이크 버튼 */
#jn-chatbot-mic {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #F0F2F5;
    border: none;
    color: #777;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

#jn-chatbot-mic:hover {
    background: #E8E8E8;
    color: var(--jn-primary);
}

#jn-chatbot-mic.jn-mic-recording {
    background: #FFEBEE;
    color: #E53935;
    animation: jnMicPulse 1.2s infinite;
}

@keyframes jnMicPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.3); }
    50% { box-shadow: 0 0 0 8px rgba(229, 57, 53, 0); }
}

#jn-chatbot-mic.jn-mic-hidden {
    display: none;
}

/* 타이핑 메시지 텍스트 */
.jn-typing-text {
    font-size: 12px;
    color: #999;
    margin-left: 8px;
    animation: jnFadeInOut 2s infinite;
}

@keyframes jnFadeInOut {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ============================================================
   푸터
   ============================================================ */
#jn-chatbot-footer {
    padding: 6px 16px 8px;
    text-align: center;
    font-size: 11px;
    color: #BBBBBB;
    background: white;
    flex-shrink: 0;
}

#jn-chatbot-footer a {
    color: var(--jn-primary);
    text-decoration: none;
}

/* ============================================================
   링크 스타일 (메시지 내)
   ============================================================ */
.jn-msg-bubble a {
    color: var(--jn-primary-dark);
    text-decoration: underline;
    font-weight: 500;
}

.jn-message-user .jn-msg-bubble a {
    color: white;
    text-decoration: underline;
}

/* ============================================================
   모바일 반응형
   ============================================================ */
@media (max-width: 768px) {
    #jn-chatbot-window {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        z-index: 2147483647;
    }

    #jn-chatbot-toggle {
        bottom: 26px;
        right: 16px;
        width: 58px;
        height: 58px;
        z-index: 2147483646;
    }

    #jn-chatbot-tooltip {
        bottom: 82px;
        right: 16px;
        padding: 10px 14px;
    }
    .jn-tooltip-greeting {
        display: none;
    }

    #jn-chatbot-minibar {
        bottom: 16px;
        right: 16px;
    }

    #jn-chatbot-dismiss {
        width: 18px;
        height: 18px;
        font-size: 11px;
        bottom: -4px;
        left: -4px;
    }

    .jn-message {
        max-width: 90%;
    }

    #jn-chatbot-input {
        font-size: 16px; /* iOS 줌 방지 */
    }

    .jn-quick-buttons {
        max-width: 100%;
    }

    .jn-quick-btn {
        font-size: 14px;
        padding: 10px 16px;
    }
}

/* ============================================================
   카드 UI 스타일 (주문조회 / 주문수집 서버 카드)
   ============================================================ */

/* 카드 공통 버블 */
.jn-card-bubble {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    max-width: 320px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* 카드 타이틀 */
.jn-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

/* 카드 본문 */
.jn-card-body {
    font-size: 13px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 12px;
}
/* ★ 카드 본문 내 굵은 글씨 → 짙은 로얄 블루 */
.jn-card-body strong {
    color: #0C447C;
}

/* ★ 강조 프롬프트 (## 헤딩 → 눈에 띄는 안내 문구) */
.jn-highlight-prompt {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #0C447C;
    margin: 8px 0;
    line-height: 1.4;
}

/* ★ 주문 확인 CTA 메시지 강조 */
.jn-card-summary .jn-card-body {
    background: #e6f1fb;
    border: 2px solid #185FA5;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    text-align: center;
}
.jn-card-summary .jn-card-body .jn-highlight-prompt {
    color: #0C447C;
    font-size: 16px;
    margin: 0 0 4px;
}

/* ★ 주문 접수 버튼 — 더 크고 눈에 띄게 + 펄스 애니메이션 */
.jn-card-summary .jn-card-btn-primary {
    font-size: 16px;
    padding: 14px;
    text-align: center;
    background: linear-gradient(135deg, #5c9e31 0%, #3d8b1a 100%);
    border-color: #3d8b1a;
    animation: jn-pulse-btn 2s ease-in-out infinite;
}
.jn-card-summary .jn-card-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #4a8226 0%, #2d6b10 100%);
}
@keyframes jn-pulse-btn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(92,158,49,0.5); }
    50% { box-shadow: 0 0 0 10px rgba(92,158,49,0); }
}

/* 카드 버튼 영역 */
.jn-card-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

/* 카드 버튼 */
.jn-card-btn {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}
.jn-card-btn:hover:not(:disabled) {
    background: #e8f5e9;
    border-color: #5c9e31;
    color: #2d7a00;
}
.jn-card-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.jn-card-btn-selected {
    background: #5c9e31 !important;
    border-color: #4a8226 !important;
    color: #ffffff !important;
}
/* 확인 버튼 강조 */
.jn-card-btn-primary {
    background: #5c9e31;
    border-color: #4a8226;
    color: #ffffff;
    font-weight: 700;
}
.jn-card-btn-primary:hover:not(:disabled) {
    background: #4a8226;
}

/* ★ 상품 버튼 + 상세보기 가로 배치 */
.jn-btn-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
}
.jn-btn-row .jn-card-btn {
    flex: 1;
    min-width: 0;
}
.jn-detail-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    min-width: 30px;
    background: #f0f4ff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.jn-detail-link:hover {
    background: #dce8ff;
    border-color: #4a90d9;
}

/* ★ 카드 제목 옆 상세보기 링크 */
.jn-detail-link-title {
    display: inline-block;
    font-size: 11px;
    color: #4a90d9;
    text-decoration: none;
    margin-left: 6px;
    font-weight: 400;
    cursor: pointer;
}
.jn-detail-link-title:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* 주문서 확인 카드 */
.jn-card-summary .jn-summary-lines {
    margin-bottom: 12px;
}
.jn-summary-row {
    display: flex;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 13px;
}
.jn-summary-label {
    flex-shrink: 0;
    width: 70px;
    color: #888;
    font-size: 12px;
}
.jn-summary-value {
    color: #222;
    flex: 1;
    word-break: break-all;
}

/* 주문조회 결과 카드 */
.jn-lookup-card {
    max-width: 340px;
}
.jn-lookup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}
.jn-lookup-orderno {
    font-size: 11px;
    color: #999;
}
.jn-lookup-orderno-link {
    font-size: 11px;
    color: #4a90d9;
    text-decoration: none;
    cursor: pointer;
}
.jn-lookup-orderno-link:hover {
    color: #2a6cb8;
    text-decoration: underline;
}
.jn-lookup-status {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    background: #f0f0f0;
    color: #555;
}
.jn-status-paid       { background: #fff3cd; color: #856404; }
.jn-status-preparing  { background: #d1ecf1; color: #0c5460; }
.jn-status-shipping   { background: #cce5ff; color: #004085; }
.jn-status-delivered  { background: #d4edda; color: #155724; }
.jn-status-confirmed  { background: #e2e3e5; color: #383d41; }

.jn-lookup-goods {
    padding: 6px 0;
    border-bottom: 1px solid #f5f5f5;
}
.jn-lookup-goods-name {
    font-size: 13px;
    font-weight: 500;
    color: #222;
    margin-bottom: 4px;
}
.jn-invoice {
    font-size: 11px;
    color: #888;
    margin-right: 8px;
}
.jn-track-btn {
    display: inline-block;
    font-size: 11px;
    padding: 3px 8px;
    background: #5c9e31;
    color: #ffffff !important;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 4px;
}
.jn-track-btn:hover {
    background: #4a8226;
}
.jn-lookup-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-size: 11px;
    color: #999;
}

/* ============================================================
   ★ SSE 상품 카드 (product_card) 스타일
   ============================================================ */
.jn-product-card {
    border-left: 3px solid #5c9e31;
}
.jn-pc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.jn-pc-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    flex: 1;
}
.jn-pc-instock {
    font-size: 11px;
    padding: 2px 8px;
    background: #e8f5e9;
    color: #2d7a00;
    border-radius: 10px;
    white-space: nowrap;
    font-weight: 600;
}
.jn-pc-soldout {
    font-size: 11px;
    padding: 2px 8px;
    background: #ffebee;
    color: #c62828;
    border-radius: 10px;
    white-space: nowrap;
    font-weight: 600;
}
.jn-pc-price-row {
    margin-bottom: 10px;
    line-height: 1.6;
}
.jn-pc-price {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}
.jn-pc-original {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
    margin-right: 6px;
}
.jn-pc-sale {
    font-size: 16px;
    font-weight: 700;
    color: #e53935;
}
.jn-pc-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 6px;
    background: #fff3e0;
    color: #e65100;
    border-radius: 4px;
    font-weight: 600;
    margin-left: 4px;
    vertical-align: middle;
}
.jn-pc-options {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.jn-pc-opt-title {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}
.jn-pc-opt {
    font-size: 12px;
    color: #444;
    padding: 4px 0;
    border-bottom: 1px solid #eee;
    line-height: 1.5;
}
.jn-pc-opt:last-child {
    border-bottom: none;
}
.jn-pc-opt strong {
    color: #1a1a1a;
}
.jn-pc-link {
    display: inline-block;
    font-size: 12px;
    color: #5c9e31;
    text-decoration: none;
    font-weight: 600;
    padding: 4px 0;
}
.jn-pc-link:hover {
    color: #4a8226;
    text-decoration: underline;
}

/* ============================================================
   ★ 상품 목록 카드 (product_cards) 스타일
   ============================================================ */
.jn-product-list-card {
    border-left: 3px solid #5c9e31;
    padding: 12px 14px !important;
}
.jn-pl-header {
    font-size: 13px;
    font-weight: 700;
    color: #2d7a00;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e8f5e9;
}
.jn-pl-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
}
.jn-pl-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid #eee;
    transition: all 0.15s;
}
.jn-pl-clickable {
    cursor: pointer;
}
.jn-pl-clickable:hover {
    background: #e8f5e9;
    border-color: #5c9e31;
}
.jn-pl-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    margin-bottom: 4px;
}
.jn-pl-price {
    margin-bottom: 4px;
}
.jn-pl-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.jn-pl-opt {
    display: inline-block;
    font-size: 11px;
    background: #e3f2fd;
    color: #1565c0;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* ============================================================
   📎 파일첨부 버튼
   ============================================================ */
#jn-chatbot-attach {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #F0F2F5;
    border: none;
    color: #777;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
#jn-chatbot-attach:hover {
    background: #E8E8E8;
    color: var(--jn-primary);
}

/* ============================================================
   업로드 미리보기 영역
   ============================================================ */
#jn-upload-preview {
    background: #FAFAFA;
    border-top: 1px solid var(--jn-border);
    padding: 10px 16px;
    max-height: 200px;
    overflow-y: auto;
}
.jn-upload-preview-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.jn-upload-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid var(--jn-border);
    border-radius: 10px;
    padding: 8px 12px;
}
.jn-upload-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.jn-upload-icon {
    font-size: 28px;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}
.jn-upload-name {
    flex: 1;
    font-size: 13px;
    color: var(--jn-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jn-upload-size {
    font-size: 11px;
    color: #999;
    flex-shrink: 0;
}
.jn-upload-remove {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: #f5f5f5;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.jn-upload-remove:hover {
    background: #FFEBEE;
    color: #E53935;
}
.jn-upload-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}
.jn-upload-send-btn {
    background: var(--jn-primary);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.jn-upload-send-btn:hover {
    background: var(--jn-primary-dark);
}
.jn-upload-send-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.jn-upload-cancel-btn {
    background: #F0F2F5;
    color: #666;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
}
.jn-upload-cancel-btn:hover {
    background: #E8E8E8;
}

/* ============================================================
   카드 내 업로드 트리거 버튼 (📎 / 📷)
   ============================================================ */
.jn-upload-trigger-area {
    display: flex;
    gap: 8px;
    margin: 12px 0 8px;
}
.jn-upload-trigger-btn {
    flex: 1;
    padding: 14px 12px;
    border: 2px dashed #ccc;
    border-radius: 12px;
    background: #FAFAFA;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.jn-upload-trigger-btn:hover {
    border-color: var(--jn-primary);
    background: #FFF8E1;
}
.jn-upload-trigger-btn:active {
    transform: scale(0.97);
}

/* ============================================================
   단체주문/파손접수 완료 카드
   ============================================================ */
.jn-card-complete {
    border-left: 4px solid #4CAF50;
}

/* ============================================================
   모바일 대응 (파일 업로드)
   ============================================================ */
@media (max-width: 480px) {
    #jn-chatbot-attach {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    .jn-upload-trigger-btn {
        padding: 12px 8px;
        font-size: 13px;
    }
    .jn-upload-thumb {
        width: 40px;
        height: 40px;
    }
}