styles.py

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

POKER_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;
}

/* 保留原有设计的完整CSS */
:root{
/* 桌面与通用色，不变 */
--felt:#0e6b3d;         /* 绿色绒面 */
--felt-2:#0b5a34;
--wood:#72451d;         
--wood-2:#5e3717;
--ink:#f3f4f6;          
--muted:#cbd5e1;

/* ===== HERO 渐变预设（左深 → 右浅）===== */
/* 预设 A：Emerald → Soft Rouge（推荐，赌场绿+柔和红，左侧白字对比最佳） */
--hero-left:#081813;     /* 深黑绿 */
--hero-mid:#0e6b3d;      /* 翡翠绿 */
--hero-right:#ff8a80;    /* 浅柔红 */

/* 预设 B：Rouge Noir（更偏红黑风） */
/* --hero-left:#0b0b0b;  --hero-mid:#7a0c0c;  --hero-right:#ff6b6b; */

/* 预设 C：Emerald Noir（绿黑→薄荷） */
/* --hero-left:#071510;  --hero-mid:#075e3a;  --hero-right:#5bd1a8; */
}

body, .gradio-container{
background: radial-gradient(1200px 800px at 20% -10%, #1b4731 0%, #0b2b1d 35%, #081f16 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:after{
color:#fff;
content:"♠ ♣ ♥ ♦";
position:absolute; right:16px; top:10px; font-weight:700; font-size:28px; letter-spacing:6px;
}

/* 左侧设置卡片（半透明） */
.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(1200px 800px at 35% 10%, var(--felt) 0%, var(--felt-2) 55%, #083c25 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:
    radial-gradient(12px 12px at 12% 16%, rgba(255,255,255,.06) 0 40%, transparent 45%),
    radial-gradient(10px 10px at 78% 24%, rgba(255,255,255,.05) 0 40%, transparent 45%),
    radial-gradient(12px 12px at 30% 70%, rgba(0,0,0,.10) 0 40%, transparent 45%),
    radial-gradient(8px 8px at 64% 82%, rgba(0,0,0,.09) 0 40%, transparent 45%);
  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:none; color:#fff; font-weight:700; letter-spacing:.3px;
  background: radial-gradient(circle at 50% 38%, #ff6b6b 0%, #e53935 60%, #b71c1c 100%);
  border-radius:999px;
  box-shadow: 0 8px 0 #7f1010, inset 0 0 0 5px #fff, inset 0 0 0 10px rgba(255,255,255,.35);
  padding:10px 18px;
  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 4px 0 #7f1010, inset 0 0 0 5px #fff, inset 0 0 0 10px rgba(255,255,255,.35);
}

/* 输入框在桌面里更融洽 */
.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-image{ width:40px !important; height:40px !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: 60px !important;   /* 改成你要的大小 */
  height: 60px !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; }
"""