/* 기본 변수 설정 - 유지보수 용이 */
:root {
    --sf-bg-main: #1a1a1e;
    --sf-bg-sub: #252529;
    --sf-accent: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --sf-text-primary: #f8fafc;
    --sf-text-dim: #94a3b8;
    --sf-border: rgba(255, 255, 255, 0.08);
    --sf-radius: 20px;
    --sf-primary: #10b981;
}

/* 런처 버튼 */
#sf_launcher {
    position: fixed;
    right: 25px;
    bottom: 25px;
    padding: 8px 16px;
    background: #2d2d33; /* 차분한 다크 그레이 */
    color: #a1a1aa;      /* 은은한 텍스트 색 */
    border-radius: 8px;  /* 둥근 캡슐 대신 깔끔한 사각형 느낌 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    z-index: 100000;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 호버 시에만 살짝 밝아지도록 */
#sf_launcher:hover {
    background: #3f3f46;
    color: #fff;
    border-color: #6366f1; /* 호버 시에만 브랜드 컬러 살짝 노출 */
}

/* 상태 표시 아이콘 (선택 사항) */
#sf_launcher::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #6366f1;
    border-radius: 50%;
}

/* 메인 패널 */
#sf_widget {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 470px;
    background: var(--sf-bg-main);
    border-radius: var(--sf-radius);
    border: 1px solid var(--sf-border);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    display: none; /* 기본은 flex이나 스크립트로 제어 시 display: none 처리 */
    flex-direction: column;
    overflow: hidden;
    z-index: 100001;
    font-family: 'Pretendard', system-ui, sans-serif;
}

/* 헤더 스타일 */
.sf-header {
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--sf-border);
}

.sf-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sf-text-dim); }
.sf-status__dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; box-shadow: 0 0 8px #10b981; }

.sf-btn--close { background: none; border: none; color: var(--sf-text-dim); font-size: 22px; cursor: pointer; }

/* 레이아웃 내부 여백 */
.sf-content { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

/* 채팅 뷰포트 */
.sf-chat-viewport {
    height: 520px;
    overflow-y: auto;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    padding: 15px;
}

/* 말풍선 공통 */
.sf-bubble {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 12px;
    line-height: 1.5;
    position: relative;
    font-size: 13px;
    word-break: break-word;
}

.sf-bubble--user { background: #4f46e5; color: white; margin-left: auto; border-bottom-right-radius: 2px; }
.sf-bubble--ai { background: var(--sf-bg-sub); color: var(--sf-text-primary); border-bottom-left-radius: 2px; }

/* 입력창 */
.sf-textarea {
    /* 배경색과 글자색 강제 적용 */
    background-color: #111113 !important;
    color: #ffffff !important;

    /* 나머지 스타일도 안전하게 보강 */
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid var(--sf-border) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    font-size: 13px !important;
    resize: none !important;
    outline: none !important;
}

/* 포커스 시에도 색상이 변하지 않도록 추가 */
textarea.sf-textarea:hover,
textarea.sf-textarea:focus,
.sf-panel .sf-textarea:hover,
.sf-panel .sf-textarea:focus {
    background-color: #111113 !important;
    color: #ffffff !important;
    border: 1px solid var(--sf-primary) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease-in-out;
}

/* ✅ 입력창 비활성화 상태 스타일 */
.sf-textarea:disabled {
    background: #141417 !important;
    color: #444 !important;
    cursor: not-allowed !important;
    border-color: var(--sf-border) !important;
}

/* 코드 영역 전용 스타일 */
.sf-code-wrapper {
    background: #000;
    border-radius: 12px;
    max-height: 200px;
    overflow: auto;
    border: 1px solid var(--sf-border);
}

#sf_code_display {
    margin: 0 !important;
    padding: 16px !important;
    font-size: 12px !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    background: transparent !important;
}

/* 버튼 공통 시스템 */
.sf-actions { display: flex; gap: 8px; margin-top: 5px; }
.sf-btn {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.sf-btn--primary { background: #6366f1; color: white; }
.sf-btn--secondary { background: #334155; color: #cbd5e1; }
.sf-btn--success { background: #059669; color: white; }
.sf-btn--outline { background: transparent; border: 1px solid var(--sf-border); color: var(--sf-text-dim); }
.sf-btn:hover { filter: brightness(1.2); }

/* 스크롤바 커스텀 */
.sf-chat-viewport::-webkit-scrollbar, .sf-code-wrapper::-webkit-scrollbar { width: 5px; }
.sf-chat-viewport::-webkit-scrollbar-thumb, .sf-code-wrapper::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 10px; }

@media screen and (max-width: 768px) {
    /* 1. 메인 패널을 화면 전체로 확장 */
    #sf_widget {
        width: 100% !important;
        height: 100% !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important; /* 전체 화면일 때는 굴곡 제거 */
        z-index: 1000000; /* 모바일에서는 최상단 */
    }

    /* 2. 내용 영역 높이 조절 (스크롤 최적화) */
    .sf-content {
        height: calc(100% - 60px); /* 헤더 제외 나머지 전체 */
        padding: 15px;
        gap: 12px;
    }

    /* 3. 채팅창 높이를 더 유연하게 (모바일은 채팅 위주) */
    .sf-chat-viewport {
        flex: 1; /* 남는 공간을 최대한 활용 */
        height: auto !important;
        max-height: none !important;
    }

    /* 4. 코드 영역이 너무 크지 않게 조절 */
    .sf-code-wrapper {
        max-height: 150px;
    }

    /* 5. 런처 버튼 위치 조정 (엄지손가락이 닿기 편하게) */
    #sf_launcher {
        right: 15px;
        bottom: 15px;
        padding: 10px 18px;
    }

    /* 6. 헤더 닫기 버튼 크기 확대 (터치 편의성) */
    .sf-btn--close {
        padding: 5px 10px;
        font-size: 28px;
    }

    /* 2. 내용 영역 수정 */
    .sf-content {
        display: flex;
        flex-direction: column;
        height: calc(100% - 60px);
        padding: 15px;
        gap: 12px;
        overflow-y: auto; /* 내용이 길어지면 content 자체에 스크롤 허용 */
    }

    /* 3. 채팅창 영역 */
    .sf-chat-viewport {
        flex: 0 0 auto; /* 채팅창이 내용에 따라 늘어나게 하거나 */
        /* 또는 flex: 1; 로 설정하여 남는 공간을 다 차지하게 함 */
        overflow-y: visible; /* 부모인 sf-content에서 스크롤을 잡으므로 여기선 해제 가능 */
    }

    /* 4. 코드 및 버튼 영역 */
    .sf-code-wrapper {
        flex: 0 0 auto; /* 버튼이 밀리지 않도록 고정 크기 유지 또는 자동 조절 */
        max-height: 200px; /* 조금 더 여유 있게 조절 */
        overflow-y: auto;
    }

    /* 하단 버튼이 절대 잘리지 않도록 설정 */
    .sf-btn-run {
        margin-top: auto; /* 공간이 남으면 맨 아래로 붙임 */
        margin-bottom: 20px; /* 하단 여백 확보 */
        flex-shrink: 0; /* 어떤 상황에서도 크기가 줄어들지 않음 */
    }
}

/* 코드 영역 로딩 오버레이 */
.sf-code-wrapper { position: relative; min-height: 100px; }

/* 코드 영역 로딩 오버레이 - 좀 더 확실한 대비 */
.sf-code-loader {
    display: none;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 10, 12, 0.95); /* 배경을 더 불투명하게 */
    z-index: 50;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

/* 텍스트에도 생동감 추가 (두근두근 효과) */
.sf-loader-text {
    font-size: 14px; /* 조금 더 크게 */
    color: #a855f7; /* 보라색 포인트 */
    font-weight: 600;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
    animation: sf-text-pulse 1.5s ease-in-out infinite;
}

/* 회전 애니메이션 */
@keyframes sf-spin {
    to { transform: rotate(360deg); }
}

/* 텍스트 페이드 애니메이션 */
@keyframes sf-text-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.98); }
}

/* 추가 포인트: 로딩 중일 때 코드 박스 테두리에 빛나는 효과 */
.sf-code-wrapper.is-loading {
    border-color: #6366f1;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
    transition: all 0.3s ease;
}

/* ✅ 버튼 비활성화 상태 스타일 */
.sf-btn:disabled {
    opacity: 0.5 !important;      /* 반투명하게 */
    filter: grayscale(1) !important; /* 흑백 처리로 색감 제거 */
    cursor: not-allowed !important;  /* 클릭 금지 커서 표시 */
    pointer-events: none;           /* 실제 클릭 이벤트 차단 */
    transform: none !important;      /* 호버 애니메이션 중단 */
}

/* 대화창 내부 코드 액션바 버튼 */
.sf-chat-btn {
    background: #444;
    color: #efefef;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 3px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.sf-chat-btn:hover {
    background: #555;
    border-color: #777;
}

.sf-chat-btn.sf-chat-run {
    background: #10b981; /* 실행 버튼은 초록색 계열 */
    border-color: #059669;
}

.sf-chat-btn.sf-chat-run:hover {
    background: #059669;
}

/* 대화 버블 안의 코드 블록 너비 조정 */
.sf-bubble--ai {
    max-width: 90% !important; /* 코드 가독성을 위해 AI 버블은 좀 더 넓게 */
}


/* 로딩 애니메이션 (점 세 개) */
.sf-loader-dots {
    display: flex;
    gap: 4px;
}
.sf-loader-dots span {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    animation: sf-dots 1.4s infinite ease-in-out both;
}
.sf-loader-dots span:nth-child(1) { animation-delay: -0.32s; }
.sf-loader-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes sf-dots {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}


.sf-chat-line {
    display: flex;
    width: 100%;
    margin-bottom: 20px; /* 대화 세트 간의 간격을 넓힙니다 */
    flex-direction: column;
}

/* 유저 대화 라인 (오른쪽 정렬) */
.sf-chat-line--user {
    align-items: flex-end;
}

/* 말풍선 기본 스타일 보강 */
.sf-bubble {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 12px;
    line-height: 1.5;
    position: relative;
    font-size: 13px;
    word-break: break-word;
}

/* AI 말풍선: 왼쪽 회색 계열 */
.sf-bubble--ai {
    background-color: #2f2f2f;
    color: #ececec;
    border-bottom-left-radius: 2px;
    align-self: flex-start;
}

/* 유저 말풍선: 오른쪽 포인트 컬러 */
.sf-bubble--user {
    background-color: #075e54; /* 또는 승규 님이 선호하는 색상 */
    color: #ffffff;
    border-bottom-right-radius: 2px;
}

/* 유저와 AI 사이에 아주 작은 간격 추가 (선택 사항) */
.sf-chat-line + .sf-chat-line {
    margin-top: 5px;
}