/* 港言AI 手机端界面 v4 ——「深夜书房的台灯与灵感微光」暗色主题
   色板：底 #0A0C12 / 卡 #12151C / 层 #1F2430
        主 #10B981（开始聊天）/ 辅 #8B5CF6 #A78BFA（虚拟人物）
        字 #F1F5F9 / #94A3B8 / #475569
   背景：static/app-bg-night.jpg（星空/紫月/湖面，本地自绘）
   全部规则仅在窄屏(<=768px)生效，电脑端一个像素都不变 */

@media (max-width: 768px) {

  /* ==================== 0. 暗色底 + 星空月亮 ==================== */
  html.yj-mobile body {
    background: #0A0C12 !important;
    color: #F1F5F9;
    height: 100dvh !important;
    /* 74px = TabBar 58px + 16px 呼吸，避免底部按钮被导航遮住 */
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  /* 背景插画：星空 / 紫月 / 星云 / 湖面倒影
     来源：本项目自绘生成，存于服务器本地 static/app-bg-night.jpg（88KB，无外链、无第三方域名）
     —— 若图片加载失败，下面还有底色 #0A0C12 与 ::after 光晕兜底，界面不会崩 */
  html.yj-mobile body::before {
    content: '';
    position: fixed; left: 0; top: 0; right: 0; bottom: 0;
    z-index: 0; pointer-events: none;
    background-color: #0A0C12;
    background-image:
      /* ① 上下压暗，保证顶栏与底栏文字对比度 */
      linear-gradient(180deg,
        rgba(10, 12, 18, .60) 0%,
        rgba(10, 12, 18, .14) 30%,
        rgba(10, 12, 18, .30) 60%,
        rgba(10, 12, 18, .84) 100%),
      /* ② 左侧渐隐压暗，让「晚上好」区域更实、更像画布的留白 */
      linear-gradient(90deg, rgba(10, 12, 18, .46) 0%, rgba(10, 12, 18, 0) 56%),
      /* ③ 插画本体 */
      url('/static/app-bg-night.jpg');
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center top, center top, center top;
    background-repeat: no-repeat, no-repeat, no-repeat;
  }
  /* 环境光晕：把插画里的紫/绿再"提"一层，卡片辉光有呼应 */
  html.yj-mobile body::after {
    content: '';
    position: fixed; left: 0; top: 0; right: 0; bottom: 0;
    z-index: 0; pointer-events: none;
    background-image:
      radial-gradient(circle at 80% 4%, rgba(139, 92, 246, .26) 0%, transparent 40%),
      radial-gradient(circle at 6% 66%, rgba(16, 185, 129, .12) 0%, transparent 46%),
      radial-gradient(circle at 50% 118%, rgba(167, 139, 250, .10) 0%, transparent 52%);
  }
  html.yj-mobile main,
  html.yj-mobile header { position: relative; z-index: 1; }

  /* 主侧栏收进「我的」抽屉，汉堡按钮与遮罩不再需要 */
  aside.w-64, #navOverlay { display: none !important; }
  button[onclick="toggleNav()"] { display: none !important; }

  /* 首页隐藏 PC 顶栏，改用 H5 自建顶栏 */
  html.yj-page-home header.h-16 { display: none !important; }
  /* 内页顶栏改成半透明毛玻璃，和背景插画、TabBar 同一套材质 */
  header.h-16 {
    height: 52px !important;
    background: rgba(10, 12, 18, .72) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
  }
  header .text-\[10px\] { display: none !important; }

  /* 移动端顶栏精简：隐藏兑换码/可用字数，历史记录只留图标，头像胶囊保留 */
  html.yj-mobile .yj-hdr-off { display: none !important; }
  html.yj-mobile .yj-hdr-txt { display: none !important; }
  html.yj-mobile .yj-hdr-me { padding-left: 4px; padding-right: 4px; margin-left: 2px; }
  html.yj-mobile .yj-hdr-pill,
  html.yj-mobile .yj-hdr-me { height: 34px; }
  html.yj-mobile .yj-hdr-me .yj-avx { width: 26px !important; height: 26px !important; box-shadow: 0 0 0 1.5px rgba(167, 139, 250, .35); }
  html.yj-mobile .yj-hdr-me .yj-avx i { font-size: 13px !important; }

  /* 「我的」抽屉内头像 + 相机角标 */
  .yj-mine-av { position: relative; display: inline-flex; cursor: pointer; flex: none; }
  .yj-mine-av .yj-avx { width: 46px !important; height: 46px !important; box-shadow: 0 0 0 2px rgba(167, 139, 250, .35), 0 4px 14px rgba(0, 0, 0, .35); }
  .yj-mine-av-cam {
    position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, #A78BFA, #10B981); color: #fff;
    border-radius: 50%; font-size: 9px; border: 2px solid #0A0C12;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .4); pointer-events: none;
  }

  /* ==================== 1. 暗色兜底（非首页页面也别刺眼） ==================== */
  /* 色阶递进：底 #0A0C12 → 卡 #12151C → 层 #1F2430 */
  html.yj-mobile .bg-slate-50,
  html.yj-mobile .bg-white { background-color: #12151C !important; }
  html.yj-mobile .bg-slate-100,
  html.yj-mobile .bg-slate-200 { background-color: #1F2430 !important; }
  html.yj-mobile .text-slate-900,
  html.yj-mobile .text-slate-800,
  html.yj-mobile .text-slate-700 { color: #F1F5F9 !important; }
  html.yj-mobile .text-slate-600,
  html.yj-mobile .text-slate-500,
  html.yj-mobile .text-slate-400,
  html.yj-mobile .text-slate-300 { color: #94A3B8 !important; }
  html.yj-mobile .text-blue-600,
  html.yj-mobile .text-indigo-600 { color: #60A5FA !important; }
  html.yj-mobile .text-emerald-600,
  html.yj-mobile .text-emerald-700 { color: #34D399 !important; }
  html.yj-mobile .text-violet-600,
  html.yj-mobile .text-fuchsia-600 { color: #A78BFA !important; }
  html.yj-mobile .text-rose-600,
  html.yj-mobile .text-red-500,
  html.yj-mobile .text-red-600 { color: #FB7185 !important; }
  html.yj-mobile .text-amber-600,
  html.yj-mobile .text-amber-700 { color: #FBBF24 !important; }
  html.yj-mobile .border-slate-200,
  html.yj-mobile .border-slate-100,
  html.yj-mobile .border-slate-300 { border-color: rgba(255, 255, 255, .08) !important; }
  html.yj-mobile input,
  html.yj-mobile textarea,
  html.yj-mobile select {
    background-color: #12151C !important;
    color: #F1F5F9 !important;
    border-color: rgba(255, 255, 255, .08) !important;
    font-size: 16px !important;
  }
  html.yj-mobile input::placeholder,
  html.yj-mobile textarea::placeholder { color: #475569 !important; }

  /* ==================== 2. 首页品牌栏 ==================== */
  .yj-brand { display: flex; align-items: center; gap: 10px; padding: 12px 2px 4px; }
  .yj-logo {
    width: 38px; height: 38px; border-radius: 12px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, rgba(167, 139, 250, .22), rgba(16, 185, 129, .12));
    border: 1px solid rgba(167, 139, 250, .30);
    box-shadow: 0 0 20px rgba(139, 92, 246, .28);
  }
  .yj-logo svg { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(196, 181, 253, .9)); }
  .yj-brand-t { min-width: 0; }
  .yj-brand-n { font-size: 18px; font-weight: 600; color: #F8FAFC; letter-spacing: -.01em; line-height: 1.2; }
  .yj-brand-e { font-size: 9px; color: #7C8AA5; letter-spacing: .22em; margin-top: 2px; }
  .yj-gear {
    margin-left: auto; width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: #94A3B8; background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1);
  }
  .yj-gear svg { width: 17px; height: 17px; }
  .yj-gear:active { transform: scale(.94); opacity: .9; }

  /* ==================== 3. 问候区 ==================== */
  .yj-hero { padding: 26px 2px 20px; }
  .yj-hi { font-size: 30px; font-weight: 600; color: #F8FAFC; letter-spacing: -.02em; line-height: 1.15; }
  .yj-hi::after {
    content: '';
    display: inline-block; width: 17px; height: 17px; border-radius: 50%;
    margin-left: 9px; vertical-align: 1px;
    box-shadow: inset -5px -2px 0 1px #C4B5FD;
  }
  .yj-sub { font-size: 13px; color: #94A3B8; margin-top: 9px; }

  /* ==================== 4. 字数卡（发光） ==================== */
  .yj-credit {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 12px;
    padding: 16px 16px 16px 18px;
    border-radius: 20px; cursor: pointer;
    background:
      linear-gradient(118deg, rgba(139, 92, 246, .26) 0%, rgba(99, 102, 241, .10) 46%, rgba(10, 12, 18, 0) 100%),
      #12151C;
    border: 1px solid rgba(167, 139, 250, .30);
    box-shadow: 0 0 26px rgba(139, 92, 246, .22), inset 0 1px 0 rgba(255, 255, 255, .07);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1);
  }
  .yj-credit:active { transform: scale(.98); opacity: .93; }
  .yj-credit-lab { font-size: 12px; color: #C4B5FD; margin-bottom: 4px; }
  .yj-credit-num {
    font-size: 30px; font-weight: 600; color: #F8FAFC;
    line-height: 1.1; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
  }
  .yj-credit .yj-arw { margin-left: auto; color: #C4B5FD; font-size: 20px; }
  .yj-orb {
    width: 46px; height: 46px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 50%, rgba(167, 139, 250, .34), rgba(99, 102, 241, .10) 62%, transparent 100%);
    color: #DDD6FE;
  }
  .yj-orb svg { width: 20px; height: 20px; filter: drop-shadow(0 0 8px rgba(167, 139, 250, .95)); }

  /* ==================== 5. 两个核心入口 ==================== */
  .yj-entry {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 14px;
    padding: 18px 16px; min-height: 96px;
    border-radius: 20px; cursor: pointer;
    background:
      linear-gradient(118deg, rgba(16, 185, 129, .20) 0%, rgba(16, 185, 129, .05) 46%, rgba(10, 12, 18, 0) 100%),
      #12151C;
    border: 1px solid rgba(16, 185, 129, .28);
    box-shadow: 0 0 26px rgba(16, 185, 129, .16), inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1);
  }
  .yj-entry:active { transform: scale(.98); opacity: .93; }
  .yj-entry-v {
    background:
      linear-gradient(118deg, rgba(139, 92, 246, .24) 0%, rgba(139, 92, 246, .06) 46%, rgba(10, 12, 18, 0) 100%),
      #12151C;
    border-color: rgba(167, 139, 250, .32);
    box-shadow: 0 0 26px rgba(139, 92, 246, .20), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .yj-ico {
    width: 54px; height: 54px; border-radius: 18px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, .28), rgba(16, 185, 129, .05) 70%, transparent);
    border: 1px solid rgba(16, 185, 129, .32);
  }
  .yj-entry-v .yj-ico {
    background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, .32), rgba(139, 92, 246, .06) 70%, transparent);
    border-color: rgba(167, 139, 250, .34);
  }
  .yj-ico svg { width: 26px; height: 26px; filter: drop-shadow(0 0 7px rgba(16, 185, 129, .95)); }
  .yj-entry-v .yj-ico svg { filter: drop-shadow(0 0 7px rgba(167, 139, 250, .95)); }
  .yj-e-t { font-size: 20px; font-weight: 600; color: #F8FAFC; letter-spacing: -.01em; }
  .yj-e-d { font-size: 13px; color: #94A3B8; margin-top: 6px; }
  .yj-arw { margin-left: auto; color: #64748B; font-size: 20px; }
  .yj-foot { font-size: 11px; color: #475569; text-align: center; padding: 18px 0 6px; }

  /* ==================== 首页：只留两个入口 ==================== */
  html.yj-page-home main > * { display: none !important; }
  html.yj-page-home main > #yjMobileHome { display: block !important; }
  #yjMobileHome { padding: 0; display: flex; flex-direction: column; gap: 14px; }

  /* ==================== 底部导航 ==================== */
  .yj-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: calc(58px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex; align-items: stretch;
    background: rgba(10, 12, 18, .88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, .05);
  }
  .yj-tab {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    color: #64748B; font-size: 11px; line-height: 1;
    -webkit-tap-highlight-color: transparent; cursor: pointer;
    transition: color .2s cubic-bezier(.4, 0, .2, 1);
  }
  .yj-tab svg { width: 22px; height: 22px; }
  .yj-tab-on { color: #C4B5FD; }
  .yj-tab-on svg { filter: drop-shadow(0 0 8px rgba(167, 139, 250, .85)); }
  .yj-tab:active { opacity: .75; }

  /* ==================== 我的抽屉 ==================== */
  .yj-mask {
    position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(0, 0, 0, .60);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .yj-mask-on { opacity: 1; pointer-events: auto; }
  .yj-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    max-height: 84vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: #12151C; color: #F1F5F9;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-radius: 24px 24px 0 0;
    padding: 6px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    transform: translateY(102%); transition: transform .27s cubic-bezier(.32, .72, 0, 1);
  }
  .yj-sheet-on { transform: translateY(0); }
  .yj-grab { width: 38px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); margin: 6px auto 10px; }
  .yj-sec { font-size: 11px; font-weight: 700; color: #475569; margin: 14px 0 2px; letter-spacing: .05em; }
  .yj-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 4px; border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 14px; color: #F1F5F9; cursor: pointer;
    transition: background .2s cubic-bezier(.4, 0, .2, 1);
  }
  .yj-row:active { background: rgba(255, 255, 255, .04); }
  .yj-ri {
    width: 32px; height: 32px; border-radius: 10px; flex: none;
    background: rgba(255, 255, 255, .06); color: #94A3B8;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
  }
  .yj-rr { margin-left: auto; color: #475569; font-size: 13px; }
  .yj-login-btn {
    width: 100%; height: 46px; border-radius: 14px; font-size: 14px; font-weight: 700;
    background: linear-gradient(120deg, #10B981, #34D399); color: #04231A; border: 0;
    cursor: pointer; margin-top: 8px;
    box-shadow: 0 0 22px rgba(16, 185, 129, .30);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1);
  }
  .yj-login-btn:active { transform: scale(.98); opacity: .9; }

  /* ==================== 开始聊天 ==================== */
  #msgList { padding: 12px 12px !important; }
  #modelSel { max-width: 96px !important; font-size: 11px !important; padding: 6px 4px !important; }
  #btnMem { font-size: 11px !important; padding: 6px 8px !important; }
  #btnNew { font-size: 11px !important; padding: 6px 8px !important; }
  #btnSend { width: 44px !important; height: 44px !important; }
  #btnStop { width: 44px !important; height: 44px !important; }
  #inp { min-height: 24px !important; }
  #cacheTip { padding-left: 14px !important; padding-right: 30px !important; font-size: 10.5px !important; }
  /* 聊天页底部输入区：与 TabBar 拉开距离，避免发送按钮被导航文字压住 */
  html.yj-page-chat .border-t.border-slate-200.bg-white.px-4 {
    margin-bottom: 6px !important;
    border-top-color: rgba(255, 255, 255, .07) !important;
  }

  /* ==================== 虚拟人物 ==================== */
  .tab-btn { flex: 1; text-align: center; font-size: 13px !important; padding: 9px 4px !important; }
  .tab-btn + .tab-btn { margin-left: 2px; }
  div.bg-slate-200\/70 {
    width: 100% !important; display: flex !important;
    background: rgba(255, 255, 255, .05) !important;
  }
  .tab-btn.tab-on {
    background: rgba(167, 139, 250, .18) !important;
    color: #F1F5F9 !important;
  }
  /* 房间内底部操作区：避免按钮被 TabBar 压住 */
  #actionRow { padding-bottom: 4px !important; }

  /* 人物卡两列，房间卡单列 */
  #charGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #shareGrid, #myShareGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* 房间内：剧情放上面，角色卡挪到下面 */
  #roomDetailView .lg\:col-span-3 { order: 1 !important; }
  #roomDetailView .lg\:col-span-1 { order: 2 !important; }
  #msgBox {
    height: auto !important; min-height: 200px !important;
    max-height: 44vh !important; padding: 12px !important;
  }
  #choiceBox { grid-template-columns: 1fr !important; gap: 8px !important; }
  #actionRow { flex-wrap: wrap !important; gap: 8px !important; }
  #actionInput { flex: 1 1 100% !important; min-height: 62px !important; font-size: 16px !important; }
  #actionRow button { flex: 1 1 auto !important; min-height: 44px !important; font-size: 13px !important; }
  #roomDetailView > div:first-child { flex-wrap: wrap !important; gap: 6px !important; }
  #roomDetailView > div:first-child button { font-size: 12px !important; padding: 7px 10px !important; }

  /* 新建按钮在手机上占满一行，避免和其他元素挤在一起 */
  #btnNewChar, #btnNewRoom { width: 100% !important; margin-top: 10px !important; }
  div.flex.items-center.justify-between.mb-4 { flex-wrap: wrap !important; }

  /* ==================== 底部合规条：H5 隐藏 ====================
     static/beian.js 会往 body 尾部插一个 position:fixed / bottom:0 / z-index:60 的条，
     1) 和 .yj-tabbar 抢同一个 bottom:0，把 TabBar 的文字压掉；
     2) 还会把 body 的 padding-bottom 改写成 38px。
     当前 /api/site 的 icp_beian 与 gongan_beian 都是空的（没有备案号），
     这个条只显示「站名 + 用户协议 | 隐私政策 | 违规举报」，而这三个入口
     「我的」抽屉里都有。所以 H5 直接不显示它 —— 底部只留 TabBar。
     ★ 以后真拿到备案号，不要直接放回来（会再挡 TabBar），
       告诉我，我把它改成显示在「我的」抽屉的页脚里。 */
  #siteBeianBar { display: none !important; }
  /* 双保险：TabBar 层级抬到合规条(60)之上 */
  .yj-tabbar { z-index: 62; }

  /* ==================== 聊天页 / 虚拟人物页：主列钉在可视区内 ====================
     chat.html 与 roleplay.html 的 body 都是 flex + Tailwind h-screen(100vh)。
     手机浏览器上 100vh 通常大于真正可见的高度（地址栏/底部工具栏不参与 vh 计算），
     于是 flex 主列比屏幕高，最下面的输入区被挤出可视范围 —— 用户只看到一大片空白，
     找不到输入框。改成 fixed 定位后，主列高度由「实际视口」决定，
     上贴屏幕顶、下抵 TabBar 上方，不再依赖 vh / dvh 的差异。 */
  html.yj-page-chat body > div.flex-1.flex.flex-col.min-w-0.overflow-hidden,
  html.yj-page-role body > div.flex-1.flex.flex-col.min-w-0.overflow-hidden {
    position: fixed !important;
    left: 0; right: 0; top: 0;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 14px) !important;
    height: auto !important;
    z-index: 10;
  }

  /* 聊天页顶栏：手机上拆成两行，避免「开始聊天」被右侧按钮挤到下一行溢出 */
  html.yj-page-chat header.h-16 {
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    padding: 8px 12px 10px !important;
  }
  html.yj-page-chat header.h-16 > div:last-child { width: 100%; }
  html.yj-page-chat header.h-16 h2 { font-size: 15px !important; }
  /* 输入条做成毛玻璃，和 TabBar 一套材质，边界更清楚 */
  html.yj-page-chat .border-t.border-slate-200.bg-white.px-4 {
    background: rgba(10, 12, 18, .90) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  /* 对话历史抽屉底部让开 TabBar，最后一条会话不再被压住 */
  html.yj-page-chat #convAside {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ==================== 聊天页空状态引导 ====================
     新会话还没消息时 #msgList 是空的，手机上就是一大片背景图，
     用户不知道这里能干什么。由 mobile-ui.js 注入 #yjChatEmpty。 */
  .yj-empty {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 30px 8px 12px;
    animation: yjFadeIn .4s cubic-bezier(.4, 0, .2, 1) both;
  }
  @keyframes yjFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  .yj-empty-ico {
    width: 62px; height: 62px; border-radius: 21px; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: #34D399;
    background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, .26), rgba(16, 185, 129, .05) 70%, transparent);
    border: 1px solid rgba(16, 185, 129, .30);
    box-shadow: 0 0 26px rgba(16, 185, 129, .18);
  }
  .yj-empty-ico svg { width: 29px; height: 29px; filter: drop-shadow(0 0 8px rgba(16, 185, 129, .85)); }
  .yj-empty-t { font-size: 19px; font-weight: 600; color: #F8FAFC; margin-top: 18px; letter-spacing: -.01em; }
  .yj-empty-d { font-size: 12.5px; color: #94A3B8; margin-top: 9px; line-height: 1.75; }
  .yj-empty-chips {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px; margin-top: 22px; max-width: 320px;
  }
  .yj-chip2 {
    font-size: 12.5px; color: #C7D2E0; line-height: 1.3;
    padding: 9px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), background .2s, border-color .2s, color .2s;
  }
  .yj-chip2:active {
    transform: scale(.97);
    background: rgba(16, 185, 129, .14);
    border-color: rgba(16, 185, 129, .34);
    color: #A7F3D0;
  }
}