/* 모바일 최적화 스타일 - 플레이캣 다크모드 */

/* CSS 변수 정의 */
:root {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-accent: #fbbf24;
    --orange-primary: #f97316;
    --orange-secondary: #ea580c;
}

/* 모바일 기본 설정 */
@media (max-width: 768px) {
    body {
        padding: 0;
        margin: 0;
        -webkit-overflow-scrolling: touch;
        background: linear-gradient(135deg, var(--bg-primary) 0%, #1a202c 100%) !important;
    }

    /* 헤더 모바일 최적화 */
    header {
        padding: 0.75rem 1rem;
        position: sticky;
        top: 0;
        z-index: 50;
    }

    header h1 {
        font-size: 1.25rem;
        color: var(--text-primary) !important;
    }

    header p {
        font-size: 0.875rem;
        margin-top: 0.25rem;
        color: rgba(255, 255, 255, 0.8) !important;
    }

    /* 컨테이너 모바일 최적화 */
    .container {
        padding: 0.5rem;
    }

    /* 채팅 컨테이너 높이 조정 */
    .chat-container {
        height: calc(100vh - 180px);
        min-height: 250px;
        max-height: none;
        background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important;
        padding: 1rem !important;
    }

    /* 메시지 버블 모바일 크기 */
    .message-bubble {
        max-width: 85%;
        font-size: 0.9rem;
        padding: 0.75rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 입력창 모바일 최적화 */
    .chat-input {
        font-size: 1rem; /* iOS 자동 줌 방지 */
        padding: 0.875rem 3rem 0.875rem 1rem;
        background: var(--bg-secondary) !important;
        border: 1px solid var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
    }

    .chat-input::placeholder {
        color: var(--text-secondary) !important;
    }

    #send-button {
        padding: 0.875rem 1.25rem;
        background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-secondary) 100%) !important;
    }

    /* 외부 피드백 버튼 모바일 최적화 */
    .feedback-btn-small {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
    
    .feedback-submitted-small {
        font-size: 0.6rem;
        padding: 0.2rem 0.4rem;
    }
    
    .feedback-container-external {
        margin-top: 0.2rem;
        margin-bottom: 0.3rem;
    }

    /* 레거시 피드백 버튼 (호환성) */
    .feedback-container {
        margin-top: 0.5rem;
        gap: 0.375rem;
    }
    
    .feedback-btn {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
        min-width: 70px;
    }

    /* 빠른 질문 버튼 모바일 */
    .quick-question {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
        margin: 0.25rem 0;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: var(--text-primary) !important;
    }

    .quick-question:hover {
        background: rgba(255, 255, 255, 0.2) !important;
    }

    /* 상담 양식 모바일 */
    .consultation-form-container {
        background: var(--bg-secondary) !important;
        border: 1px solid var(--bg-tertiary) !important;
    }

    .consultation-form-container input,
    .consultation-form-container textarea {
        background: var(--bg-primary) !important;
        border: 1px solid var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
    }

    .consultation-form-container input::placeholder,
    .consultation-form-container textarea::placeholder {
        color: var(--text-secondary) !important;
    }

    /* 로딩 오버레이 모바일 */
    #loading-overlay > div {
        margin: 1rem;
        padding: 1.5rem;
        background: var(--bg-secondary) !important;
        border: 1px solid var(--bg-tertiary) !important;
    }

    /* 상태 표시 */
    #status-display {
        font-size: 0.75rem;
        padding: 0.25rem 0;
        color: var(--text-secondary) !important;
    }

    /* 글자 수 카운터 */
    #char-count {
        font-size: 0.7rem;
        right: 0.75rem;
        color: var(--text-secondary) !important;
    }
}

/* 초소형 모바일 (320px 이하) */
@media (max-width: 320px) {
    header h1 {
        font-size: 1.1rem;
    }

    .chat-container {
        padding: 0.5rem !important;
    }

    .message-bubble {
        max-width: 95%;
        font-size: 0.85rem;
        padding: 0.5rem;
    }

    .chat-input {
        padding: 0.75rem 2.5rem 0.75rem 0.75rem;
        font-size: 0.9rem;
    }

    #send-button {
        padding: 0.75rem 1rem;
    }

    .feedback-btn-small {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
    }
    
    .feedback-submitted-small {
        font-size: 0.55rem;
        padding: 0.15rem 0.3rem;
    }

    .feedback-btn {
        font-size: 0.65rem;
        padding: 0.25rem 0.5rem;
        min-width: 60px;
    }

    .playcat-quick-btn {
        padding: 0.5rem;
        font-size: 0.75rem;
    }

    .consultation-form-container {
        padding: 1rem !important;
    }

    .consultation-form-container input,
    .consultation-form-container textarea {
        padding: 0.5rem !important;
        font-size: 0.9rem !important;
    }
}

/* 가로 모드 최적화 */
@media (max-width: 768px) and (orientation: landscape) {
    .chat-container {
        height: calc(100vh - 140px);
        padding: 0.75rem !important;
    }

    header {
        padding: 0.5rem 1rem;
    }

    header h1 {
        font-size: 1.1rem;
    }

    header p {
        display: none; /* 가로 모드에서는 부제목 숨김 */
    }

    .message-bubble {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    .playcat-quick-btn {
        padding: 0.5rem;
        font-size: 0.75rem;
    }
}

/* 터치 인터랙션 최적화 */
@media (hover: none) and (pointer: coarse) {
    /* 터치 디바이스용 스타일 */
    .quick-question,
    .feedback-btn,
    #send-button {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .quick-question:active,
    .feedback-btn:active {
        transform: scale(0.98);
        opacity: 0.8;
    }

    #send-button:active {
        transform: scale(0.95);
    }

    /* 입력 필드 터치 최적화 */
    .chat-input {
        -webkit-appearance: none;
        border-radius: 1.5rem;
    }

    .chat-input:focus {
        transform: none; /* 모바일에서는 변형 효과 제거 */
    }
}

/* 안전 영역 고려 (iPhone X 이후) */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    header {
        padding-top: max(0.75rem, env(safe-area-inset-top));
    }

    .chat-input-area {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* 다크 모드 강제 적용 */
@media (prefers-color-scheme: light) {
    /* 라이트 모드 선호시에도 다크 모드 유지 */
    body {
        background: linear-gradient(135deg, var(--bg-primary) 0%, #1a202c 100%) !important;
        color: var(--text-primary) !important;
    }
}

/* 애니메이션 감소 선호 설정 고려 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 고대비 모드 지원 - 다크 테마 */
@media (prefers-contrast: high) {
    .bot-message {
        background: var(--orange-primary) !important;
        color: var(--text-primary) !important;
        border: 2px solid var(--text-primary) !important;
    }

    .user-message {
        background: #8b5cf6 !important;
        color: var(--text-primary) !important;
        border: 2px solid var(--text-primary) !important;
    }

    .feedback-btn {
        border: 2px solid var(--text-primary) !important;
    }
}

/* PWA 지원을 위한 추가 스타일 */
.standalone {
    /* PWA 모드에서의 추가 스타일 */
}

@media (display-mode: standalone) {
    /* PWA 전체화면 모드 스타일 */
    header {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* 태블릿 최적화 */
@media (min-width: 769px) and (max-width: 1024px) {
    .message-bubble {
        max-width: 75%;
    }
    
    .feedback-container {
        gap: 0.75rem;
    }
    
    .feedback-btn {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
        min-width: 90px;
    }
}

/* 접근성 향상 */
@media (prefers-reduced-motion: no-preference) {
    .feedback-btn:hover {
        transform: translateY(-1px);
        transition: all 0.2s ease;
    }
    
    .message-bubble {
        animation: fadeIn 0.3s ease-out;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}