/**
 * 이미지 AI 전용 스타일
 * 독립적인 CSS 파일 - 병원 문서 분석 CSS와 분리
 */

/* 기본 레이아웃 */
.dazabi-image-ai-wrapper {
    min-height: calc(100vh - 200px);
    padding-top: 72px;
    padding-bottom: 32px;
    background-color: #ffffff;
}

.dazabi-image-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.dazabi-image-container .row {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.dazabi-image-container .row [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    width: 100%;
}

.dazabi-image-container .row .col-lg-2 {
    flex: 0 0 18%;
    max-width: 18%;
}

.dazabi-image-container .row .col-lg-10 {
    flex: 0 0 82%;
    max-width: 82%;
}

@media (min-width: 992px) {
    .dazabi-image-container .row .col-lg-2 {
        flex: 0 0 18%;
        max-width: 18%;
    }
    
    .dazabi-image-container .row .col-lg-10 {
        flex: 0 0 82%;
        max-width: 82%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .dazabi-image-container .row .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    .dazabi-image-container .row .col-md-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }
}

/* 왼쪽 사이드바 */
.dazabi-image-sidebar {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 25px;
    height: fit-content;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

.sidebar-title {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-title i {
    color: #06b6d4; /* 청록색 계열로 변경 */
}


.ai-service-tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.ai-service-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none !important;
    color: #334155;
    font-weight: 600;
    font-size: 0.95rem;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.ai-service-tab:hover {
    border-color: #06b6d4; /* 청록색 계열로 변경 */
    background: #e0f7fa; /* 연한 청록색 배경 */
    color: #06b6d4; /* 청록색 계열로 변경 */
    opacity: 0.9;
    text-decoration: none !important;
}

.ai-service-tab.active {
    background: linear-gradient(135deg, #06b6d4 0%, #14b8a6 100%); /* 청록색 그라데이션 */
    color: #ffffff;
    border-color: transparent;
}

.ai-service-tab.active:hover {
    opacity: 0.9;
    color: #ffffff;
}

.ai-service-tab i {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.ai-service-tab span {
    flex: 1;
}

.ai-service-tab small {
    font-size: 0.75rem;
    opacity: 0.8;
    font-weight: 500;
}

/* 업로드 영역 */
.upload-section {
    margin-top: 20px;
}

/* 출력 비율 선택 영역 */
.aspect-ratio-section {
    margin-top: 20px;
}

.upload-zone {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    background: #f9fafb;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-zone:hover {
    border-color: #06b6d4; /* 청록색 계열로 변경 */
    background: #e0f7fa; /* 연한 청록색 배경 */
}

.upload-zone i {
    color: #06b6d4; /* 청록색 계열로 변경 */
    margin-bottom: 12px;
}

.upload-zone p {
    margin: 8px 0;
    color: #374151;
    font-size: 0.9rem;
}

.upload-zone input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

/* 문서 액션 버튼 */
.document-actions {
    margin-top: 10px;
}

.btn-gallery {
    padding: 12px 20px;
    background: linear-gradient(135deg, #4b4b4b 0%, #8f8f8f 100%);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}

.btn-gallery:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
    color: #ffffff;
}

.btn-reset {
    padding: 12px 20px;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.btn-reset:hover {
    border-color: #ef4444;
    background: #fef2f2;
    color: #dc2626;
}

.btn-reset i {
    font-size: 0.9rem;
}

/* 나노바나나3 버튼 스타일 */
.btn-nanobanana {
    background: #ffffff;
    color: #111827;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.btn-nanobanana::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #f7cc0f;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.btn-nanobanana:hover::after {
    transform: translateX(0);
}

.btn-nanobanana:hover {
    background: #f7d22d;;
    color: #050505;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 235, 59, 0.3);
}

.btn-nanobanana.active {
    background: #fee269;
    color: #070707;
    width: 100%;
}

.btn-nanobanana.active::after {
    transform: translateX(0);
    background: linear-gradient(90deg, #fff59d, #fff9c4, #fff59d);
}

.btn-nanobanana i {
    font-size: 1.1rem;
}

/* 나노바나나3 버튼 비활성화 상태 */
.btn-nanobanana.disabled,
.btn-nanobanana:disabled {
    background: #f3f4f6;
    color: #9ca3af;
    border-color: #d1d5db;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-nanobanana.disabled:hover,
.btn-nanobanana:disabled:hover {
    background: #f3f4f6;
    color: #9ca3af;
    border-color: #d1d5db;
    transform: none;
    box-shadow: none;
}

.btn-nanobanana.disabled::after,
.btn-nanobanana:disabled::after {
    display: none;
}

.btn-nanobanana.disabled.active,
.btn-nanobanana:disabled.active {
    background: #f3f4f6;
    color: #9ca3af;
    border-color: #d1d5db;
    box-shadow: none;
}

/* 기본 모델 선택 버튼 스타일 */
.model-selector-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.model-selector-btn {
    background: #ffffff;
    color: #374151;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.model-selector-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.1), transparent);
    transition: left 0.5s ease;
}

.model-selector-btn:hover::before {
    left: 100%;
}

.model-selector-btn:hover {
    background: #f0f9ff;
    color: #0891b2;
    border-color: #06b6d4;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}

.model-selector-btn.active {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: #ffffff;
    border-color: #06b6d4;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.model-selector-btn.active:hover {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(6, 182, 212, 0.4);
}

/* GPT-5 Image 버튼 스타일 */
.btn-gpt5-image {
    background: #ffffff;
    color: #111827;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.btn-gpt5-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #8b5cf6, #a78bfa, #8b5cf6);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.btn-gpt5-image:hover::after {
    transform: translateX(0);
}

.btn-gpt5-image:hover {
    background: #f3f4f6;
    color: #6d28d9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.btn-gpt5-image.active {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    color: #6d28d9;
    border-color: #8b5cf6;
}

.btn-gpt5-image.active::after {
    transform: translateX(0);
    background: linear-gradient(90deg, #8b5cf6, #a78bfa, #c4b5fd, #a78bfa, #8b5cf6);
}

.btn-gpt5-image i {
    font-size: 1.1rem;
    color: #8b5cf6;
}

.btn-gpt5-image.active i {
    color: #6d28d9;
}

/* 관리자 모델 버튼 컨테이너 */
.admin-model-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

/* 나노바나나3 사용 횟수 안내 뱃지 */
.nanobanana-cost-info {
    margin-top: 10px;
    padding: 0;
}

.cost-info-badge {
    background: linear-gradient(135deg, #fffde7 0%, #fff9c4 100%);
    border: 2px solid #fdd835;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #f57f17;
    box-shadow: 0 2px 8px rgba(255, 235, 59, 0.2);
}

.cost-info-badge i {
    color: #f9a825;
    font-size: 0.9rem;
}

.cost-info-badge span {
    padding: 4px 8px;
    background: rgba(255, 235, 59, 0.2);
    border-radius: 4px;
    white-space: nowrap;
    color: #f57f17;
}

/* 나노바나나3 해상도 선택 버튼 */
.nanobanana-resolution-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.nanobanana-resolution-btn {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.nanobanana-resolution-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #fdd835, #fff59d, #fdd835);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.nanobanana-resolution-btn:hover::after {
    transform: translateX(0);
}

.nanobanana-resolution-btn:hover {
    border-color: #fdd835;
    color: #f57f17;
    background: linear-gradient(135deg, #fffde7 0%, #fff9c4 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 235, 59, 0.2);
}

.nanobanana-resolution-btn.active {
    background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
    border-color: #f9a825;
    color: #f57f17;
    box-shadow: 0 0 0 2px rgba(255, 235, 59, 0.3);
}

.nanobanana-resolution-btn.active::after {
    transform: translateX(0);
    background: linear-gradient(90deg, #fdd835, #fff59d, #fdd835);
}

/* 우측 채팅 영역 */
.dazabi-image-chat {
    background: #ffffff;
    border-radius: 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 250px); /* 최소 높이 설정하여 하단까지 확장 */
}

.chat-header {
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border-radius: 12px 12px 0 0;
}

.chat-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

/* PC에서 chat-header-left-row2는 일반 flex 컨테이너로 작동 */
.chat-header-left-row2 {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 모바일에서 채팅 헤더 2줄 레이아웃 */
@media (max-width: 768px) {
    .chat-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 13px 16px 0px 16px;
        position: relative; /* 절대 위치 기준 */
    }
    
    .chat-header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        width: 100%;
    }
    
    /* 🔥 1줄: 이미지AI 아이콘 + 제목 + 필터/버튼 (같은 줄) */
    .chat-header-left > h5 {
        width: 100%;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start; /* 아이콘과 텍스트를 왼쪽에 붙여서 배치 */
        padding-right: 120px; /* 필터/버튼 공간 확보 (3개 아이콘 + gap) */
        gap: 8px; /* 아이콘과 텍스트 간격 */
    }

    /* 🔥 이미지 AI 아이콘 크기를 필터 아이콘과 동일하게 (32px) */
    .chat-header-left > h5 i {
        font-size: 1rem;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-right: 0; /* 간격 제거 (gap으로 처리) */
    }

    /* 🔥 모바일 뒤로가기 버튼 */
    .mobile-back-btn {
        position: absolute;
        top: 13px;
        left: 16px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: #374151;
        font-size: 1.1rem;
        cursor: pointer;
        z-index: 10;
        border-radius: 8px;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    
    .mobile-back-btn:hover {
        background: #f3f4f6;
        color: #111827;
    }
    
    .mobile-back-btn:active {
        background: #e5e7eb;
    }
    
    /* 🔥 모바일에서 chat-header-actions를 h5와 같은 줄에 배치 (우측 상단) */
    .chat-header-actions {
        position: absolute;
        top: 13px;
        right: 16px;
        display: flex;
        align-items: center;
        gap: 6px;
        z-index: 10;
    }
    
    /* 🔥 모바일에서 뒤로가기 버튼이 있을 때 h5 왼쪽 패딩 추가 */
    .chat-header-left > h5 {
        padding-left: 48px !important; /* 뒤로가기 버튼 공간 확보 */
    }
    
    /* 2줄: 사용횟수 + 쿠폰 입력 */
    .chat-header-left-row2 {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 7px;
    }
    
    .usage-badge {
        flex-shrink: 0;
    }
    
    .coupon-input-wrapper {
        flex: 1;
        min-width: 0;
    }
    
    .coupon-input {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
    
    .chat-header-title-mobile {
        display: inline;
    }
    
    .chat-header-title-pc {
        display: none;
    }
}

.chat-header h5 {
    margin: 0;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px; /* 아이콘과 텍스트 간격 */
    flex-wrap: wrap;
}

/* 🔥 이미지 AI 아이콘과 텍스트 간격 조정 (PC/모바일 공통) */
.chat-header h5 i {
    margin-right: 0; /* 간격 제거 (gap으로 처리) */
}

/* 모델 뱃지 스타일 */
.model-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 8px;
}

.model-badge.nanobanana-badge {
    background: linear-gradient(135deg, #fffde7 0%, #fff9c4 100%);
    color: #f57f17;
    border: 1px solid #fdd835;
    box-shadow: 0 2px 6px rgba(255, 235, 59, 0.3);
}

.model-badge.nanobanana-badge i {
    color: #f9a825;
    font-size: 0.9rem;
}

/* 사용 횟수 배지 */
.usage-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #e0f7fa;
    border: 1px solid #06b6d4;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0891b2;
    white-space: nowrap;
}

.usage-badge i {
    font-size: 0.8rem;
}

.usage-badge small {
    font-size: 0.75rem;
    opacity: 0.8;
    font-weight: 500;
}

.usage-badge.usage-exceeded {
    background: #fef2f2;
    border-color: #ef4444;
    color: #dc2626;
}

.usage-badge.usage-exceeded i {
    color: #ef4444;
}

.usage-badge.usage-admin {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #d97706;
}

.usage-badge.usage-admin i {
    color: #f59e0b;
}

/* 쿠폰 입력 필드 */
.coupon-input-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    transition: all 0.2s ease;
}

.coupon-input-wrapper:focus-within {
    border-color: #06b6d4;
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.1);
}

.coupon-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.8rem;
    padding: 4px 8px;
    width: 120px;
    color: #374151;
}

.coupon-input::placeholder {
    color: #9ca3af;
    font-size: 0.75rem;
}

.coupon-apply-btn {
    border: none;
    background: transparent;
    color: #06b6d4;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.coupon-apply-btn:hover {
    background: #e0f7fa;
    color: #0891b2;
}

.coupon-apply-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.coupon-apply-btn i {
    font-size: 0.85rem;
}

.chat-header-title-pc {
    display: inline;
}

.chat-header-title-mobile {
    display: none;
}

.chat-header h5 i {
    color: #06b6d4; /* 청록색 계열로 변경 */
}

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-header-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0; /* 모바일에서 크기 고정 */
}

.chat-header-icon-btn i {
    font-size: 0.9rem;
}

/* 🔥 모바일에서 필터 아이콘 크기 통일 (32px) */
@media (max-width: 768px) {
    .gallery-filter-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 999px !important; /* 원형으로 통일 */
    }
    
    .gallery-filter-icon i {
        font-size: 0.9rem !important;
    }
}

.chat-header-icon-btn:hover {
    border-color: #06b6d4; /* 청록색 계열로 변경 */
    background: #e0f7fa; /* 연한 청록색 배경 */
    color: #0891b2; /* 진한 청록색 */
}

/* 채팅 메시지 영역 */
.chat-messages {
    flex: 1;
    overflow-y: visible; /* 내부 스크롤 제거 - 전체 스크롤로 변경 */
    padding: 20px 25px;
    min-height: 400px;
    max-height: none; /* 최대 높이 제한 제거 */
    padding-bottom: 100px; /* 하단 여백 추가 */
    scroll-behavior: smooth;
    position: relative; /* 문서 흐름 유지 */
    z-index: 1; /* 낮은 z-index로 다른 요소 위에 겹치지 않도록 */
}

/* 이미지 갤러리 레이아웃 (Masonry 스타일) */
.chat-messages.has-images {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 10px; /* 작은 기본 행 높이 */
    gap: 0; /* gap 제거 - 이미지들이 붙어서 갤러리처럼 보이도록 */
    align-items: start;
    position: relative; /* 문서 흐름 유지 */
    z-index: 1; /* 낮은 z-index로 다른 요소 위에 겹치지 않도록 */
}

/* 🔥 사용자 메시지는 그리드에서 제외하고 항상 전체 너비 사용 (위에 표시) */
.chat-messages.has-images .message.user {
    grid-column: 1 / -1; /* 전체 너비 사용 */
    display: flex; /* 원래 flex 레이아웃 유지 */
    width: 100%;
    margin-bottom: 20px; /* AI 이미지와 간격 증가 */
    flex-direction: column; /* 세로 배치 */
    align-items: flex-end; /* 오른쪽 정렬 */
}

/* 🔥 갤러리 모드에서 사용자 메시지 내용 전체 너비 사용 */
.chat-messages.has-images .message.user .message-content {
    max-width: 85%; /* 프롬프트가 더 넓게 표시 */
    margin-left: auto;
    margin-right: 0;
    width: auto;
}

/* 이미지 메시지를 그리드 아이템으로 변환 */
.chat-messages.has-images .message.ai {
    display: block; /* contents 제거 - 구조 유지 */
    grid-column: 1 / -1; /* 전체 너비 사용 */
    width: 100%;
    margin-bottom: 20px; /* 다음 메시지와 간격 */
    position: relative; /* 문서 흐름 유지 */
    z-index: 1; /* 낮은 z-index로 다른 요소 위에 겹치지 않도록 */
}

.chat-messages.has-images .message.ai .message-content.message-image-container {
    grid-row: span var(--image-row-span, 30); /* 이미지 비율에 따라 동적 조정 */
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    margin-top: 0; /* 사용자 메시지와의 간격은 상위에서 관리 */
}

/* 🔥 사용자 메시지 바로 다음에 오는 AI 이미지는 전체 너비 사용 (세로 배치) */
.chat-messages.has-images .message.user + .message.ai {
    grid-column: 1 / -1; /* 전체 너비 사용 */
    display: block; /* block으로 유지하여 구조 보존 */
    width: 100%;
    margin-top: 0;
    margin-bottom: 20px; /* 다음 메시지와 간격 */
}

.chat-messages.has-images .message.user + .message.ai .message-content.message-image-container {
    grid-column: 1 / -1; /* 전체 너비 사용 */
    width: 100%;
    max-width: 100%;
    margin-top: 0;
}

/* 텍스트 메시지는 그리드에서 제외 (전체 너비 사용) */
.chat-messages.has-images .message.ai .message-content:not(.message-image-container) {
    grid-column: 1 / -1; /* 전체 너비 사용 */
    display: block;
    width: 100%;
    max-width: 100%;
}

/* welcome 메시지도 그리드에서 제외 */
.chat-messages.has-images .welcome-message {
    grid-column: 1 / -1; /* 전체 너비 사용 */
    display: flex;
}

/* bird231 이미지 그리드 스타일 (Masonry) */
.bird231-images-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    grid-auto-rows: 10px !important;
    gap: 0 !important; /* gap 제거 - 이미지들이 붙어서 갤러리처럼 보이도록 */
    align-items: start !important;
    width: 100%;
    margin-top: 30px;
    padding: 0; /* padding도 제거하여 완전히 붙도록 */
}

.bird231-image-item {
    position: relative;
    border-radius: 0; /* border-radius 제거하여 완전히 붙도록 */
    overflow: hidden;
    cursor: pointer;
    box-shadow: none; /* 그림자 제거하여 깔끔하게 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    height: 100%;
    margin: 0; /* 마진 제거 */
}

.bird231-image-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0; /* border-radius 제거하여 완전히 붙도록 */
}

.bird231-image-item:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    z-index: 10;
    position: relative;
}

.welcome-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 위로 정렬 */
    text-align: center;
    padding: 5px; /* 위쪽 패딩 줄임 */
    color: #6b7280;
    width: 100%;
}

/* welcome 메시지 내부의 그리드가 제대로 작동하도록 */
.welcome-message .bird231-images-grid {
    width: 100%;
    max-width: 100%;
    margin-top: 0px !important;
}

.welcome-message h4 {
    font-size: 1rem; /* 작게 변경 */
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px; /* 간격 줄임 */
    margin-top: 15px;
}

.usage-guide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 작게 변경 */
    gap: 12px; /* 간격 줄임 */
    margin-top: 16px; /* 간격 줄임 */
    width: 100%;
    max-width: 600px; /* 작게 변경 */
    margin-bottom: 15px
}

.usage-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px; /* 패딩 줄임 */
    background: #f9fafb;
    border-radius: 8px; /* 작게 변경 */
    border: 1px solid #e5e7eb;
}

.usage-step-number {
    width: 28px; /* 작게 변경 */
    height: 28px; /* 작게 변경 */
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4 0%, #14b8a6 100%); /* 청록색 그라데이션 */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem; /* 작게 변경 */
    margin-bottom: 8px; /* 간격 줄임 */
}

.usage-step-body {
    text-align: center;
}

.usage-step-body strong {
    display: block;
    font-size: 0.85rem; /* 작게 변경 */
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px; /* 간격 줄임 */
}

.usage-step-body p {
    font-size: 0.75rem; /* 작게 변경 */
    color: #6b7280;
    margin: 0;
    line-height: 1.4; /* 줄간격 줄임 */
}

/* 메시지 스타일 */
.message {
    display: flex;
    margin-bottom: 16px;
    align-items: flex-start;
    gap: 12px;
}

.message.user {
    justify-content: flex-end;
    width: 100%; /* 전체 너비 사용 */
    margin-bottom: 12px; /* AI 응답과 간격 */
    position: relative; /* 문서 흐름 유지 */
    z-index: 1; /* 낮은 z-index로 다른 요소 위에 겹치지 않도록 */
}

.message.ai {
    justify-content: flex-start;
    position: relative; /* 문서 흐름 유지 */
    z-index: 1; /* 낮은 z-index로 다른 요소 위에 겹치지 않도록 */
}

.message-content {
    max-width: 70%;
    padding: 10px 15px;
    border-radius: 12px;
    background: #f3f4f6;
    color: #111827;
    font-size: 0.9375rem;
    line-height: 1.6;
    word-wrap: break-word; /* 긴 텍스트 줄바꿈 */
    overflow-wrap: break-word;
}

/* 🔥 사용자 메시지 내용도 긴 텍스트 처리 */
.message.user .message-content {
    max-width: 85%; /* 프롬프트가 더 넓게 표시되도록 */
    margin-left: auto; /* 오른쪽 정렬 */
    margin-right: 0; /* 오른쪽 정렬 */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap; /* 줄바꿈 유지 */
    padding: 14px 18px; /* 패딩 증가 */
    font-size: 0.95rem; /* 폰트 크기 약간 증가 */
}

.message.ai .message-content {
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

/* 이미지 메시지 컨테이너 - 테두리/쉐도우 제거, 이미지 비율에 맞게 표시 */
.message-content.message-image-container {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    margin-top: 0; /* 상위에서 간격 관리 */
    position: relative; /* 문서 흐름 유지 */
    z-index: 1; /* 낮은 z-index로 다른 요소 위에 겹치지 않도록 */
    box-sizing: border-box;
    overflow: hidden; /* 이미지가 컨테이너를 벗어나지 않도록 */
}

/* 🔥 사용자 메시지 다음에 오는 AI 이미지는 위쪽 간격 추가 */
.message.user + .message.ai .message-content.message-image-container {
    margin-top: 0; /* 이미 상위에서 간격 관리 */
}

.message-text {
    margin: 0;
    word-wrap: break-word;
}

/* 🔥 로딩 메시지 스타일 - 채팅 영역에만 표시, 전체 페이지 블로킹 없음 */
.loading-message {
    position: relative; /* fixed 제거하여 전체 페이지 오버레이 방지 */
    z-index: 1; /* 낮은 z-index로 다른 요소와 겹치지 않게 */
    pointer-events: auto; /* 클릭 가능하게 유지 */
}

.loading-message .loading-content {
    background: rgba(6, 182, 212, 0.1);
    border-left: 4px solid #06b6d4;
    padding: 12px 20px;
    border-radius: 8px;
    animation: pulse 2s ease-in-out infinite;
}

.loading-message .loading-content .message-text {
    color: #06b6d4;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.loading-message .loading-content .fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* 기존 로딩 메시지 스타일 (하위 호환성) */
.loading-message.old {
    opacity: 0.7;
}

/* 다운로드 버튼 */
.btn-download-image {
    margin-top: 8px;
    padding: 6px 12px;
    font-size: 0.875rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-download-image:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 반응형 디자인 */
@media (max-width: 992px) {
    .dazabi-image-chat {
        height: auto;
        min-height: 500px;
    }
    
    .dazabi-image-sidebar {
        max-height: none;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .dazabi-image-ai-wrapper {
        padding-top: 50px;
    }
    
    .dazabi-image-container {
        padding: 0;
    }

    .dazabi-image-container .row.g-4 > main.dazabi-image-chat {
        padding-left: 0;
        padding-right: 0;
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .usage-guide {
        display: none !important; /* 모바일에서 안내문구(1, 2, 3 가이드) 숨기기 */
    }
    
    .chat-messages {
        padding: 0px 5px; /* 좌우 패딩 5px */
        max-height: none; /* 모바일에서도 전체 스크롤 */
        padding-bottom: 180px; /* 하단바 높이 줄여서 여백 조정 */
    }
    
    .message-content {
        max-width: 85%;
    }
    
    /* 모바일에서 휴지통 버튼을 우측 상단에 고정 */
    #clearChat {
        position: fixed !important;
        top: 55px; /* 헤더 아래 */
        right: 20px;
        z-index: 999;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #clearChat:hover {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    /* 모바일에서 모드 버튼 텍스트 숨김 (아이콘만 표시) */
    .mobile-bottom-bar-btn:not(.upload-btn) span {
        display: none;
    }
    
    .mobile-bottom-bar-btn:not(.upload-btn) {
        gap: 0; /* 간격 제거 */
    }
    
    /* welcome 메시지 좌우 패딩 조정 */
    .welcome-message {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    /* 출력 비율 선택 영역 좌우 패딩 */
    .mobile-ratio-prompt-area {
        padding-left: 5px;
        padding-right: 5px;
        bottom: 60px; /* 하단바 높이에 맞춰 조정 */
    }
}

/* 🔥 AI 서비스 타이틀과 빠른 버튼 */
.sidebar-title-with-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.sidebar-title-with-buttons .sidebar-title {
    margin: 0;
    flex: 1;
}

.ai-service-quick-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ai-service-quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.ai-service-quick-btn:hover {
    background: #06b6d4; /* 청록색 계열로 변경 */
    border-color: #06b6d4; /* 청록색 계열로 변경 */
    color: #ffffff;
    transform: translateY(-1px);
}

.ai-service-quick-btn i {
    font-size: 0.9rem;
}

/* 모드 선택 버튼 (이미지 변환 / 이미지 생성) */
.mode-selector-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0px;
}

.mode-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    color: #334155;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    width: 100%;
    overflow: hidden;
    margin-bottom: 5px;
}

.mode-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #06b6d4; /* 청록색 계열 */
    transition: width 0.3s ease;
}

.mode-btn:hover {
    border-color: #06b6d4; /* 청록색 테두리 */
    background: #ffffff;
    color: #334155;
}

.mode-btn:hover::after {
    width: 100%;
}

.mode-btn.active {
    background: linear-gradient(135deg, #06b6d4 0%, #14b8a6 100%); /* 청록색 그라데이션 */
    color: #ffffff;
    border-color: transparent;
}

.mode-btn.active::after {
    display: none; /* active 상태에서는 after 숨김 */
}

.mode-btn.active:hover {
    opacity: 0.9;
    color: #ffffff;
}

.mode-btn i {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.mode-btn span {
    flex: 1;
}

/* 비율 선택 버튼 (라디오 버튼 대신 버튼 사용) */
.aspect-ratio-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px 0;
    background: #ffffff;
    border-radius: 8px;
}

.aspect-ratio-btn {
    padding: 8px 6px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    color: #6b7280;
    position: relative;
    overflow: hidden;
}

.aspect-ratio-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #06b6d4; /* 청록색 계열 */
    transition: width 0.2s ease;
}

.aspect-ratio-btn:hover {
    border-color: #06b6d4; /* 청록색 테두리 */
    background: #ffffff;
    color: #334155;
}

.aspect-ratio-btn:hover::after {
    width: 100%;
}

.aspect-ratio-btn.active {
    border-color: #06b6d4;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(20, 184, 166, 0.1) 100%);
    color: #06b6d4;
    font-weight: 700;
}

.aspect-ratio-btn.active::after {
    width: 100%;
    display: block;
}

.message-image {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 0; /* border-radius 제거하여 완전히 붙도록 */
    box-shadow: none; /* 그림자 제거하여 깔끔하게 */
    margin: 0;
    object-fit: contain; /* cover에서 contain으로 변경하여 이미지 비율 유지 */
    box-sizing: border-box;
}

.message-image:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    z-index: 1;
    position: relative;
}

/* 이미지 컨테이너 스타일 (갤러리 레이아웃용) */
.message-image-container {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: relative;
}

/* 이미지 액션 버튼 영역 */
.message-image-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: center; /* 버튼도 중앙 정렬 */
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.btn-download-image {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    color: white;
    cursor: pointer;
    font-size: 0.875rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-download-image:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

/* 이미지 확대 모달 */
.image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(4px);
    overflow: auto; /* 이미지가 크면 스크롤 가능 */
}

.image-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.image-modal-content {
    position: relative;
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px; /* 상하 여백 추가 */
}

.image-modal-image {
    max-width: none; /* 원본 크기로 표시 */
    max-height: none; /* 원본 크기로 표시 */
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    display: block;
}

/* 이미지가 화면보다 크면 스크롤 가능하도록 */
.image-modal-image[style*="width"] {
    max-width: 100vw;
    max-height: 100vh;
}

.image-modal-close {
    position: fixed; /* fixed로 변경하여 화면에 고정 */
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.image-modal-close:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    border-color: rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
}

/* 모바일에서 이미지 모달 */
@media (max-width: 768px) {
    .image-modal-content {
        min-width: 100%;
        min-height: 100%;
        padding: 20px;
    }
    
    .image-modal-image {
        max-width: 100vw;
        max-height: 100vh;
    }
    
    .image-modal-close {
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
        background: rgba(0, 0, 0, 0.7);
    }
}

.message-label {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 4px;
    font-weight: 600;
}

/* 프롬프트 입력 영역 스타일 (병원 분석 시스템 참고) */
.prompt-input-wrapper {
    position: relative;
    display: flex;
    align-items: flex-end;
    background: #ffffff;
    border-radius: 12px;
    padding: 14px 16px;
    border: 2px solid #cbd5e1;
    transition: all 0.25s ease;
    width: 100%;
}

.prompt-input-wrapper:focus-within {
    border-color: #06b6d4; /* 청록색 계열로 변경 */
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18); /* 청록색 그림자 */
    background: #ffffff;
}

.prompt-input-textarea {
    width: 100%;
    max-width: 100%;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    line-height: 1.6;
    min-height: 100px;
    max-height: 200px;
    color: #111827;
    font-family: 'Pretendard', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 0;
    box-sizing: border-box;
    /* 🔥 긴 텍스트 줄바꿈 처리 */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    overflow-x: hidden;
    overflow-y: auto;
}

.prompt-input-textarea::placeholder {
    color: #9ca3af;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* 프롬프트 입력 포커스 아웃라인 제거 */
.prompt-input-textarea:focus,
.prompt-input-textarea:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.btn-generate {
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #06b6d4 0%, #14b8a6 100%); /* 청록색 그라데이션 */
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3); /* 청록색 그림자 */
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-generate:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-generate:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.3);
}

.btn-generate i {
    font-size: 0.9rem;
}

/* 채팅 입력 영역 스타일 (병원 분석 시스템과 동일) */
.chat-input-area {
    padding: 20px 25px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    position: relative; /* sticky 제거 - 전체 스크롤로 변경 */
    z-index: 10;
}

.chat-input-wrapper {
    position: relative;
    display: flex;
    align-items: flex-end;
    background: #f9fafb;
    border-radius: 999px;
    padding: 12px 64px 12px 18px;
    border: 2px solid #cbd5e1;
    transition: all 0.25s ease;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 720px;
}

.chat-input-wrapper:focus-within {
    border-color: #06b6d4; /* 청록색 계열로 변경 */
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18); /* 청록색 그림자 */
    background: #ffffff;
}

/* 🔥 이미지 AI 페이지 전용 textarea 스타일 */
.dazabi-image-ai-wrapper .chat-input-textarea,
.dazabi-image-ai-wrapper #chatInput,
.dazabi-image-ai-wrapper #promptInput,
.chat-input-wrapper .chat-input-textarea,
.chat-input-wrapper #chatInput,
.chat-input-wrapper #promptInput {
    width: 100%;
    max-width: 100%;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    line-height: 1.6;
    max-height: 120px;
    min-height: 24px;
    color: #111827;
    font-family: 'Pretendard', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* 🔥 긴 텍스트 줄바꿈 처리 */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    overflow-x: hidden;
    overflow-y: auto;
}

.dazabi-image-ai-wrapper .chat-input-textarea::placeholder,
.dazabi-image-ai-wrapper #chatInput::placeholder,
.dazabi-image-ai-wrapper #promptInput::placeholder,
.chat-input-wrapper .chat-input-textarea::placeholder,
.chat-input-wrapper #chatInput::placeholder,
.chat-input-wrapper #promptInput::placeholder {
    color: #9ca3af;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.dazabi-image-ai-wrapper .chat-input-textarea:focus,
.dazabi-image-ai-wrapper .chat-input-textarea:focus-visible,
.dazabi-image-ai-wrapper #chatInput:focus,
.dazabi-image-ai-wrapper #chatInput:focus-visible,
.dazabi-image-ai-wrapper #promptInput:focus,
.dazabi-image-ai-wrapper #promptInput:focus-visible,
.chat-input-wrapper .chat-input-textarea:focus,
.chat-input-wrapper .chat-input-textarea:focus-visible,
.chat-input-wrapper #chatInput:focus,
.chat-input-wrapper #chatInput:focus-visible,
.chat-input-wrapper #promptInput:focus,
.chat-input-wrapper #promptInput:focus-visible {
    outline: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

.chat-send-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #06b6d4 0%, #14b8a6 100%); /* 청록색 그라데이션 */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.30); /* 청록색 그림자 */
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-send-btn:not(:disabled):hover {
    transform: translateY(-50%) translateY(-1px);
    box-shadow: 0 6px 14px rgba(6, 182, 212, 0.45); /* 청록색 그림자 */
}

.chat-send-btn:not(:disabled):active {
    transform: translateY(-50%);
    box-shadow: 0 3px 8px rgba(6, 182, 212, 0.3); /* 청록색 그림자 */
}

.chat-send-btn i {
    font-size: 0.9rem;
}

.input-hints {
    margin-top: 8px;
    text-align: left;
    width: 100%;
    max-width: 720px;
}

.input-hints small {
    color: #9ca3af;
    font-size: 0.85rem;
}

/* 이미지 창고 모달 스타일 */
#imageGalleryModal .modal-content {
    border-radius: 12px;
}

#imageGalleryModal .modal-header {
    border-bottom: 1px solid #e5e7eb;
    padding: 20px 24px;
}

#imageGalleryModal .modal-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

#imageGalleryModal .modal-title i {
    color: #06b6d4;
}

#imageGalleryModal .modal-body {
    padding: 24px;
}

.gallery-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gallery-filters .filter-btn.active {
    background: #06b6d4;
    border-color: #06b6d4;
    color: #ffffff;
}

.gallery-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* 갤러리 뷰 컨테이너 (우측 메인 영역) */
.gallery-view-container {
    max-width: 100%;
}

/* 갤러리 필터 아이콘 (헤더에 표시) */
.gallery-filter-icons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.gallery-filter-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.gallery-filter-icon.active {
    background-color: var(--primary-color);
    color: white;
}

.gallery-filter-icon:not(.active) {
    background-color: #f3f4f6;
    color: #6b7280;
}

.gallery-filter-icon:not(.active):hover {
    background-color: #e5e7eb;
    color: var(--primary-color);
}

.gallery-content {
    min-height: 400px;
    margin-top: 24px;
}

/* 갤러리 썸네일 그리드 (1줄에 3개) */
.gallery-thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    padding: 0;
}

.gallery-thumbnail-item {
    position: relative;
    aspect-ratio: 0.5;
    background: #f3f4f6;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-thumbnail-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.gallery-thumbnail-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    padding: 0px;
}

.gallery-image-checkbox {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.gallery-thumbnail-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 모델 뱃지 스타일 (공통) */
.gallery-model-badge,
.message-model-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    pointer-events: none;
}

.message-model-badge {
    position: relative;
    top: auto;
    right: auto;
    margin-bottom: 8px;
    display: inline-block;
}

/* Gemini 2.5 뱃지 */
.model-badge-gemini,
.gallery-model-badge.model-badge-gemini {
    background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
    border: 1px solid #06b6d4;
    color: #0891b2;
}

.model-badge-gemini i,
.gallery-model-badge.model-badge-gemini i {
    color: #06b6d4;
    font-size: 0.65rem;
}

/* GPT-5 Mini 뱃지 */
.model-badge-gpt-mini,
.gallery-model-badge.model-badge-gpt-mini {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border: 1px solid #9c27b0;
    color: #7b1fa2;
}

.model-badge-gpt-mini i,
.gallery-model-badge.model-badge-gpt-mini i {
    color: #9c27b0;
    font-size: 0.65rem;
}

/* 나노바나나3 뱃지 */
.model-badge-nanobanana,
.gallery-model-badge.model-badge-nanobanana {
    background: linear-gradient(135deg, #fffde7 0%, #fff9c4 100%);
    border: 1px solid #fdd835;
    color: #f57f17;
}

.model-badge-nanobanana i,
.gallery-model-badge.model-badge-nanobanana i {
    color: #f9a825;
    font-size: 0.65rem;
}

/* GPT-5 Image 뱃지 */
.model-badge-gpt,
.gallery-model-badge.model-badge-gpt {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border: 1px solid #8b5cf6;
    color: #6d28d9;
}

.model-badge-gpt i,
.gallery-model-badge.model-badge-gpt i {
    color: #8b5cf6;
    font-size: 0.65rem;
}

/* 하위 호환성: 기존 gallery-nanobanana-badge 클래스 */
.gallery-nanobanana-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: linear-gradient(135deg, #fffde7 0%, #fff9c4 100%);
    border: 1px solid #fdd835;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #f57f17;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(255, 235, 59, 0.4);
    white-space: nowrap;
    pointer-events: none;
}

.gallery-nanobanana-badge i {
    color: #f9a825;
    font-size: 0.65rem;
}

.gallery-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-thumbnail-item:hover .gallery-thumbnail-image {
    transform: scale(1.1);
}

.gallery-thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gallery-thumbnail-item:hover .gallery-thumbnail-overlay {
    opacity: 1;
}

.gallery-thumbnail-overlay i {
    color: white;
    font-size: 1.5rem;
}

/* 선택된 썸네일 스타일 */
.gallery-thumbnail-item.selected {
    border: 3px solid var(--primary-color);
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
}

/* 썸네일 액션 버튼 영역 */
.gallery-thumbnail-actions {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
}

.gallery-thumbnail-item:hover .gallery-thumbnail-actions {
    opacity: 1;
}

.gallery-thumbnail-download-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: #06b6d4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.gallery-thumbnail-download-btn:hover {
    background: #ffffff;
    color: #0891b2;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.gallery-thumbnail-download-btn:active {
    transform: scale(0.95);
}

.gallery-thumbnail-download-btn i {
    font-size: 0.9rem;
}

/* 페이지네이션 */
.gallery-pagination {
    margin-top: 32px;
}

.gallery-pagination .pagination {
    margin: 0;
}

.gallery-pagination .page-link {
    color: var(--primary-color);
    border-color: #e5e7eb;
    padding: 8px 16px;
}

.gallery-pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.gallery-pagination .page-link:hover {
    background-color: #f0f9ff;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    /* 좌측 사이드바 숨기기 */
    .dazabi-image-sidebar {
        display: none !important;
    }
    
    /* 메인 채팅 영역 전체 너비 */
    .dazabi-image-chat {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-bottom: 56px; /* 병원문서와 동일한 하단바 높이 */
        margin-bottom: 56px; /* 병원문서와 동일 */
    }
    
    /* 하단바 스타일 (병원문서와 동일한 크기) */
    .mobile-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: #ffffff;
        border-top: 1px solid #e5e7eb; /* 병원문서와 동일 */
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        padding: 6px 10px; /* 병원문서와 동일: 6px 10px */
        display: flex;
        gap: 8px; /* 병원문서와 동일 */
        align-items: center;
        justify-content: space-between; /* 병원문서와 동일 */
        height: auto; /* 병원문서와 동일 */
    }
    
    .mobile-bottom-bar-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px; /* 병원문서와 동일 */
        padding: 8px 12px; /* 병원문서와 동일 */
        border: 1px solid #e2e8f0; /* 병원문서와 동일 */
        background: #f1f5f9; /* 병원문서와 동일 */
        color: #64748b; /* 병원문서와 동일 */
        font-size: 0.82rem; /* 병원문서와 동일 */
        font-weight: 600; /* 병원문서와 동일 */
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; /* 병원문서와 동일 */
        border-radius: 10px; /* 병원문서와 동일 */
        text-decoration: none !important; /* 병원문서와 동일 */
    }
    
    .mobile-bottom-bar-btn i {
        font-size: 1rem; /* 아이콘 크기 약간 증가 (0.9rem → 1rem) */
        font-weight: 600; /* 아이콘 선명도 향상 */
    }
    
    .mobile-bottom-bar-btn.active {
        background: linear-gradient(135deg, #06b6d4 0%, #14b8a6 100%); /* 이미지 AI 색상 */
        color: #ffffff;
        border-color: transparent;
        text-decoration: none !important;
    }
    
    .mobile-bottom-bar-btn.active:hover {
        opacity: 0.9;
        text-decoration: none !important;
    }
    
    .mobile-bottom-bar-btn:not(.active):hover {
        background: #e2e8f0; /* 병원문서와 동일 */
        color: #475569; /* 병원문서와 동일 */
        opacity: 0.85;
        text-decoration: none !important;
    }
    
    .mobile-bottom-bar-btn.upload-btn {
        width: 36px; /* 업로드 버튼 크기 증가 */
        height: 36px; /* 업로드 버튼 크기 증가 */
        border-radius: 999px;
        border: 2px solid #06b6d4; /* 이미지 AI 색상 */
        background: linear-gradient(135deg, #06b6d4 0%, #14b8a6 100%); /* 그라데이션 배경 */
        color: #ffffff; /* 흰색 아이콘 */
        padding: 0;
        flex: 0 0 auto; /* 업로드 버튼만 고정 크기 */
        min-width: 36px;
        box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3); /* 그림자 효과 */
        transition: all 0.3s ease;
    }
    
    .mobile-bottom-bar-btn.upload-btn:hover,
    .mobile-bottom-bar-btn.upload-btn:active {
        border-color: #0891b2; /* 진한 청록색 */
        background: linear-gradient(135deg, #0891b2 0%, #0d9488 100%);
        color: #ffffff;
        transform: translateY(-2px); /* 살짝 올라가는 효과 */
        box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4); /* 더 강한 그림자 */
    }
    
    /* 🔥 비활성화된 업로드 버튼 스타일 (비로그인 상태) */
    .mobile-bottom-bar-btn.upload-btn.disabled,
    .mobile-bottom-bar-btn.upload-btn:disabled {
        background: #e5e7eb !important; /* 회색 배경 */
        border-color: #d1d5db !important; /* 회색 테두리 */
        color: #9ca3af !important; /* 회색 아이콘 */
        cursor: not-allowed !important;
        opacity: 0.6 !important;
        box-shadow: none !important;
    }
    
    .mobile-bottom-bar-btn.upload-btn.disabled:hover,
    .mobile-bottom-bar-btn.upload-btn.disabled:active,
    .mobile-bottom-bar-btn.upload-btn:disabled:hover,
    .mobile-bottom-bar-btn.upload-btn:disabled:active {
        background: #e5e7eb !important;
        border-color: #d1d5db !important;
        color: #9ca3af !important;
        transform: none !important;
        box-shadow: none !important;
    }
    
    .mobile-bottom-bar-btn.upload-btn i {
        font-size: 1.1rem; /* 아이콘 크기 증가 */
        font-weight: 600; /* 아이콘 선명도 향상 */
    }
    
    .mobile-bottom-bar-btn.upload-btn span {
        display: none; /* 텍스트 숨김 */
    }
    
    /* 모바일 하단바 버튼 그룹 (병원문서와 동일한 구조) */
    .mobile-image-tabs {
        display: flex;
        align-items: center;
        gap: 6px; /* 병원문서와 동일 */
        flex: 1;
    }
    
    .mobile-image-actions {
        display: flex;
        gap: 6px; /* 병원문서와 동일 */
    }
    
    /* 출력 비율 선택 영역 (하단바 위) */
    .mobile-ratio-prompt-area {
        position: fixed;
        bottom: 56px; /* 병원문서 하단바 높이와 동일 (56px) */
        left: 0;
        right: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0);
        padding: 12px 5px; /* 좌우 패딩 5px, 상하 패딩 줄임 */
        z-index: 999;
        display: none;
    }
    
    .mobile-ratio-prompt-area.show {
        display: block;
        padding: 10px;
    }
    
    .mobile-ratio-buttons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 12px;
    }
    
    .mobile-ratio-btn {
        padding: 10px 8px;
        border: 2px solid #ffffff;
        border-radius: 8px;
        background: #ffffff;
        color: #6b7280;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: center;
    }
    
    .mobile-ratio-btn.active {
        border-color: #06b6d4;
        background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(20, 184, 166, 0.1) 100%);
        color: #06b6d4;
    }
    
    .mobile-prompt-input-wrapper {
        display: flex;
        gap: 8px;
        align-items: flex-end;
    }
    
    .mobile-prompt-input {
        flex: 1;
        padding: 12px 16px;
        border: 2px solid #ffffff;
        border-radius: 12px;
        font-size: 0.9rem;
        resize: none;
        min-height: 50px;
        max-height: 120px;
        /* 🔥 긴 텍스트 줄바꿈 처리 */
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: pre-wrap;
        overflow-x: hidden;
        overflow-y: auto;
        max-width: 100%;
        box-sizing: border-box;
        /* 🔥 폰트 적용 */
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-weight: 400;
        line-height: 1.5;
        color: #374151;
    }
    
    .mobile-prompt-input:focus {
        outline: none;
        border-color: #06b6d4;
    }
    
    .mobile-prompt-send-btn {
        padding: 12px 20px;
        background: linear-gradient(135deg, #06b6d4 0%, #14b8a6 100%);
        border: none;
        border-radius: 12px;
        color: #ffffff;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: 60px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-prompt-send-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
    }
    
    .mobile-prompt-send-btn:active {
        transform: translateY(0);
    }
    
    /* 나노바나나3 해상도 버튼 (모바일) */
    .mobile-nanobanana-buttons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 12px;
    }
    
    .mobile-nanobanana-btn {
        padding: 10px 8px;
        border: 2px solid #ffffff;
        border-radius: 8px;
        background: #ffffff;
        color: #6b7280;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: center;
    }
    
    .mobile-nanobanana-btn.active {
        border-color: #f7cc0f;
        background: linear-gradient(135deg, rgba(247, 204, 15, 0.1) 0%, rgba(228, 187, 4, 0.1) 100%);
        color: #f57f17;
    }
    
    .gallery-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .gallery-header h4 {
        font-size: 1.25rem;
    }
    
    .gallery-filters {
        width: 100%;
        justify-content: flex-start;
    }
    
    .gallery-filter-btn {
        flex: 1;
        text-align: center;
        font-size: 0.85rem;
        padding: 6px 12px;
    }
    
    .gallery-item-info {
        padding: 12px;
    }
    
    /* welcome 메시지 스타일 조정 */
    .welcome-message {
        padding: 0px; /* 하단바 공간 확보 */
    }
    
    /* 채팅 메시지 하단 여백 조정 */
    .chat-messages {
        padding-bottom: 200px; /* 하단바 + 비율 선택 영역 공간 */
    }
}