Update app.py

app.py

@@ -78,7 +78,7 @@ def chat_response(user_input, history_pairs):
     return r["choices"][0]["message"]["content"].strip()
 
 # ------------------------------------------------------------------
-# 4. CSS (강력한 선택자로 재작성)
+# 4. CSS (강력한 선택자로 재작성 - 진짜 해결 버전)
 # ------------------------------------------------------------------
 PC_COM_CSS = r"""
 @import url('https://cdn.jsdelivr.net/gh/neodgm/neodgm-webfont@latest/neodgm/neodgm.css');
@@ -113,6 +113,14 @@ h1 {
 h1::before { content: "☎ "; }
 h1::after { content: " ☎"; }
 
+/* 설명 텍스트 (접속 메시지) - 호박색으로 변경 */
+.gradio-container p {
+  color: var(--pc-amber) !important;
+  font-size: 18px !important;
+  border-bottom: 1px dashed var(--pc-grey);
+  padding-bottom: 5px;
+}
+
 /* 챗봇 컨테이너 */
 .chatbot {
   background-color: var(--pc-blue) !important;
@@ -122,95 +130,128 @@ h1::after { content: " ☎"; }
 }
 
 /* =================================================================
-   [강제 스타일 적용 구간]
-   Gradio 기본 테마를 뚫고 들어가기 위해 선택자를 깊게 씀
+   [강제 스타일 적용 구간 - v2]
+   더욱 구체적인 선택자로 그라디오 기본 스타일을 덮어씀
    ================================================================= */
 
-/* 1. 모든 메시지 박스 초기화 (배경, 테두리, 그림자 제거) */
-.chatbot .message-wrap .message,
-.chatbot .message,
-.chatbot td {
+/* 1. 기본 메시지 초기화 */
+.chatbot .message, 
+.chatbot .message-wrap,
+.chatbot .message-row,
+div[data-testid="user"],
+div[data-testid="bot"] {
   background: transparent !important;
-  border: none !important;
   box-shadow: none !important;
-  padding: 5px 10px !important;
+  border: none !important;
 }
 
-/* 2. 유저 메시지 (오른쪽 정렬 + 흰색) */
-.chatbot .user-row {
+/* 2. 유저 메시지 (우측 정렬 해결) */
+/* .user, .user-row, data-testid="user" 모두 타겟팅 */
+.chatbot .user-row, 
+.chatbot .user,
+div[data-testid="user"] {
   display: flex !important;
-  justify-content: flex-end !important; /* 플렉스 우측 정렬 */
   width: 100% !important;
-  border-bottom: none !important; /* 가로선 제거 */
+  justify-content: flex-end !important; /* 플렉스 우측 정렬 */
+  margin-left: auto !important;
+  background: transparent !important;
+  padding: 0 !important;
 }
 
-/* 유저 말풍선 내부 */
-.chatbot .user-row .message {
-  background: transparent !important;
+/* 유저 말풍선 텍스트 */
+.chatbot .user-row .message, 
+.chatbot .user .message,
+div[data-testid="user"] .message {
   text-align: right !important;
-  margin-left: auto !important; /* 블록 우측 정렬 */
+  color: #FFFFFF !important;
+  background: transparent !important;
+  padding: 5px 10px !important;
   border: none !important;
+  width: auto !important;
+  max-width: 80% !important; /* 너무 길어지지 않게 */
 }
 
-/* 유저 텍스트 색상 강제 (흰색) */
-.chatbot .user-row .message, 
-.chatbot .user-row .message *, 
-.chatbot .user-row .message p {
+/* 유저 텍스트 강제 흰색 */
+.chatbot .user-row p, 
+.chatbot .user p,
+div[data-testid="user"] p {
   color: #FFFFFF !important;
+  text-align: right !important;
 }
 
 /* 유저 접두사 처리 */
-.chatbot .user-row .message::after {
+.chatbot .user-row .message::after,
+.chatbot .user .message::after {
   content: " < 나";
   color: var(--pc-grey);
   margin-left: 5px;
   font-size: 16px;
+  display: inline-block;
 }
 
-/* 3. 봇 메시지 (왼쪽 정렬 + 호박색) */
-.chatbot .bot-row {
+/* 3. 봇 메시지 (좌측 정렬 + 호박색) */
+.chatbot .bot-row, 
+.chatbot .bot,
+div[data-testid="bot"] {
   display: flex !important;
-  justify-content: flex-start !important;
   width: 100% !important;
-  border-bottom: none !important; /* 가로선 제거 */
+  justify-content: flex-start !important;
+  background: transparent !important;
+  padding: 0 !important;
 }
 
-/* 봇 말풍선 내부 */
-.chatbot .bot-row .message {
-  background: transparent !important;
+/* 봇 말풍선 텍스트 */
+.chatbot .bot-row .message, 
+.chatbot .bot .message,
+div[data-testid="bot"] .message {
   text-align: left !important;
-  margin-right: auto !important;
+  color: var(--pc-amber) !important;
+  background: transparent !important;
+  padding: 5px 10px !important;
   border: none !important;
+  width: auto !important;
 }
 
-/* 봇 텍스트 색상 강제 (호박색) */
-.chatbot .bot-row .message, 
-.chatbot .bot-row .message *, 
-.chatbot .bot-row .message p {
+/* 봇 텍스트 강제 호박색 */
+.chatbot .bot-row p, 
+.chatbot .bot p,
+div[data-testid="bot"] p {
   color: var(--pc-amber) !important;
 }
 
 /* 봇 접두사 처리 */
-.chatbot .bot-row .message::before {
+.chatbot .bot-row .message::before,
+.chatbot .bot .message::before {
   content: "똘배 > ";
   color: var(--pc-cyan);
   margin-right: 5px;
   font-size: 16px;
+  display: inline-block;
 }
 
-/* 4. 아바타 숨김 */
-.avatar { display: none !important; }
-
-
-/* 5. 로딩(초시계) ���타일 수정 */
-/* 로딩 컨테이너 배경 날리기 */
+/* 4. 로딩(초시계) 하얀 배경 진짜 날리기 */
+/* 로딩 관련 모든 컨테이너 타겟팅 */
 .chatbot .pending,
-.chatbot .generating {
+.chatbot .generating,
+.chatbot .message.pending,
+.chatbot .message.generating,
+.chatbot .wrap.default.full {
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
 }
 
+/* 로딩 내부의 테이블 구조 배경 제거 (그라디오 일부 버전 대응) */
+.chatbot .pending table, 
+.chatbot .pending tr, 
+.chatbot .pending td,
+.chatbot .generating table, 
+.chatbot .generating tr, 
+.chatbot .generating td {
+    background: transparent !important;
+    border: none !important;
+}
+
 /* 로딩 텍스트(초) 하얗게 */
 .chatbot .pending span, 
 .chatbot .generating span,
@@ -218,14 +259,19 @@ span.progress-text {
     color: #FFFFFF !important;
     background: transparent !important;
     font-family: 'NeoDunggeunmo', monospace !important;
+    font-size: 16px !important;
 }
 
-/* 로딩 애니메이션 바 숨기기 */
+/* 로딩바 애니메이션 숨기기 */
 .chatbot .load-wrap,
-.chatbot .loading-indicator {
+.chatbot .loading-indicator,
+.chatbot .meta-text {
     display: none !important;
 }
 
+/* 아바타 숨김 */
+.avatar { display: none !important; }
+
 /* ================================================================= */
 
 .input-container {
@@ -361,4 +407,5 @@ with gr.Blocks(theme=gr.themes.Base(), css=PC_COM_CSS, title="CHOLLIAN 98") as d
         )
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    demo.launch(server_name="0.0.0.0", server_port=7860)
+