styles.py

"""
样式文件 - 集中管理 CSS 样式 (强制深色主题)
"""

MAHJONG_THEME_CSS = """
html, body{ background-color:#0b1220 !important; color-scheme: dark !important; }
/* ===== 仅添加强制深色主题的关键代码 ===== */
:root {
  color-scheme: dark !important;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: dark !important;
  }
}

/* 修复HuggingFace可能添加的滤镜效果 */
.gradio-container {
  filter: none !important;
  -webkit-filter: none !important;
}

/* ===== Mahjong 主题配色 ===== */
:root{
  --felt:#0f5132;          /* 青 jade */
  --felt-2:#09301d;
  --felt-light:#1c7d4f;
  --wood:#5e4430;         
  --wood-2:#3f2f21;
  --paper:#f8f3e7;
  --ink:#f3f4f6;          
  --muted:#cbd5e1;
  --accent: #ffcc4d;

  /* HERO 渐变（青→竹→朱） */
  --hero-left:#041b16;
  --hero-mid:#0c6244;
  --hero-right:#b7452f;
}

body, .gradio-container{
background: radial-gradient(1200px 800px at 15% -20%, #143828 0%, #0a1f18 45%, #050c0a 100%) !important;
}

/* 顶部 HERO：左深右浅的线性渐变，白字清晰 */
.hero{
position:relative;
background: linear-gradient(90deg, var(--hero-left) 0%, var(--hero-mid) 48%, var(--hero-right) 100%);
color:#fff;                       /* 固定白字 */
text-shadow: 0 2px 6px rgba(0,0,0,.35);
border-radius:20px;
padding:18px 16px;
box-shadow: 0 10px 28px rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.25);
margin-bottom: 10px;
}

/* Hero 右上角麻将牌组 */
.hero-icons{
position:absolute;
top:12px;
right:18px;
display:flex;
gap:8px;
}
.hero-icons .hero-photo{
  width:40px;
  height:50px;
  border-radius:8px;
  background: linear-gradient(180deg, #fdf9f0 0%, #efe4cf 55%, #d9c4a3 100%);
  box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.8);
  border:1px solid rgba(0,0,0,.28);
  background-color:#fdf9f0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* 左侧设置卡片（半透明） */
.side-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  backdrop-filter: blur(3px);
  color:var(--ink);
}
.side-card h3{ margin:0 0 8px 0; }

/* 麻将桌容器：木框 + 翡翠台呢 + 竹纹 */
.table{
  position:relative;
  background:
    radial-gradient(900px 600px at 35% 10%, rgba(255,255,255,.08) 0%, transparent 60%),
    radial-gradient(1200px 800px at 35% 10%, var(--felt) 0%, var(--felt-2) 60%, #041912 100%);
  border-radius:22px;
  border: 12px solid transparent;
  background-clip: padding-box;
  box-shadow:
    inset 0 0 50px rgba(0,0,0,.35),
    0 20px 60px rgba(0,0,0,.35);
}
.table:before{ /* 木质外框 */
  content:"";
  position:absolute; inset:-14px;
  border-radius:28px;
  background: linear-gradient(90deg, var(--wood), var(--wood-2));
  z-index:-1;
  box-shadow: 0 8px 28px rgba(0,0,0,.45), inset 0 0 8px rgba(255,255,255,.1);
}
.table:after{ /* 低透竹纹 */
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(120deg, rgba(255,255,255,.05) 15%, transparent 30%),
                    linear-gradient(300deg, rgba(0,0,0,.12) 20%, transparent 40%);
  background-size: 140px 140px;
  pointer-events:none;
}

/* 聊天组件细节：头像更小、气泡更易读 */
.custom-chatbot .message{ font-size:16px; line-height:1.6; color:var(--ink); word-break:break-word; }
.custom-chatbot .message.user{ background: rgba(255,255,255,.08) !important; }
.custom-chatbot .message.bot{  background: rgba(0,0,0,.20) !important; }

/* 按钮：麻将牌风格 */
.gradio-container button.gr-button{
  border:2px solid rgba(255,255,255,.35);
  color:#193c2a;
  font-weight:700;
  letter-spacing:.3px;
  background: linear-gradient(180deg, var(--paper) 0%, #efe6d2 60%, #dccdb0 100%);
  border-radius:18px;
  box-shadow: 0 6px 0 rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.6);
  padding:10px 20px;
  transition: transform .08s ease, box-shadow .08s ease;
}
.gradio-container button.gr-button:hover{ transform: translateY(-1px); }
.gradio-container button.gr-button:active{
  transform: translateY(2px);
  box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.6);
}

/* 输入框在桌面里更融洽 */
.table .gr-textbox textarea{
  background: rgba(0,0,0,.20) !important; color:#e5e7eb !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.18) !important;
}

/* 小提示文字颜色 */
.hint{ color:var(--muted); font-size:12px; }

@media (max-width: 820px){
  .custom-chatbot .avatar,
  .custom-chatbot .message .avatar{
    width: 62px !important;
    height: 62px !important;
  }
  .custom-chatbot .avatar-image{ width:58px !important; height:58px !important; }
}
/* === 修复 ChatInterface 内嵌发送/停止按钮在深色主题下不可见的问题 === */
:where(.gradio-container) button[aria-label="submit"],
:where(.gradio-container) button[aria-label="stop"]{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.09) !important;
  color: #fff !important;
  border-radius: 10px !important;
  height: 36px !important;
  width: 36px !important;
  cursor: pointer !important;
}

/* 保证输入框容器能正确容纳右侧内嵌按钮 */
:where(.gradio-container) .gr-chat-interface .gr-textbox{
  position: relative;
}
:where(.gradio-container) .gr-chat-interface .gr-textbox textarea{
  padding-right: 48px !important;
}

/* === Chatbot 头像尺寸 & 对齐（稳定版）=== */
/* 放大 Chatbot 头像（统一设置） */
.custom-chatbot .avatar,
.custom-chatbot .message .avatar{
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  min-height: 88px !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  border: 2px solid #ffffffcc !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
}

/* 控制头像尺寸（命中 gradio v4/5 的 DOM 结构） */
.custom-chatbot .avatar-image {
  width: 82px !important;
  height: 82px !important;
  border-radius: 50% !important; /* 保持圆形 */
  object-fit: cover !important;
}

/* 可选：调整气泡和头像的间距 */
.custom-chatbot .message {
  gap: 12px !important; /* 改成更大/更小 */
}



/* 头像图片填充容器，不变形 */
.custom-chatbot .avatar > img,
.custom-chatbot .avatar-image{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
}

/* 头像与气泡的间距与对齐（可选） */
.custom-chatbot .message{ gap: 12px !important; align-items: flex-start !important; }
.custom-chatbot .message .message-content{ margin-top: 2px !important; }
"""