/* ============================================================
   OKAY 网页版 · 电脑横屏排版(2026-07-31)
   手机(<1100px)完全不受影响;电脑上:
   左侧品牌导航栏 + 加宽的工作区,沿用 APP 蜜桃色设计语言
   ============================================================ */

.desktop-rail { display: none; }
.plan-ribbon,
.plan-avg,
.billing-aside,
.profile-email,
.profile-vip-tag,
.profile-extra-entry { display: none; } /* 仅电脑版显示,手机端隐藏 */

@media (min-width: 1100px) {

  /* ---------- 背景:蜜桃色氛围 ---------- */
  body {
    background:
      radial-gradient(720px 420px at 12% 8%, rgba(255, 214, 186, .55), transparent 70%),
      radial-gradient(640px 420px at 88% 92%, rgba(223, 242, 235, .8), transparent 70%),
      linear-gradient(160deg, #fff0e7 0%, #fdf6ef 50%, #f4efe6 100%);
  }

  .prototype-root {
    grid-template-columns: 296px minmax(0, 1320px);
    gap: 26px;
    place-items: center;
    place-content: center;
    padding: 30px 40px;
  }

  /* ---------- 左侧品牌导航栏 ---------- */
  .desktop-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 296px;
    height: min(880px, calc(100vh - 60px));
    min-height: 700px;
    padding: 26px 22px;
    border-radius: 30px;
    background: linear-gradient(180deg, #fffaf6 0%, #fff3ea 100%);
    border: 1px solid rgba(20, 32, 29, .07);
    box-shadow: 0 22px 70px rgba(20, 32, 29, .14);
  }

  .desktop-rail .rail-logo {
    width: 132px;
    align-self: flex-start;
  }

  .desktop-rail .rail-slogan {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    line-height: 1.7;
  }

  .desktop-rail .rail-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
  }

  .desktop-rail .rail-nav button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }

  .desktop-rail .rail-nav button:hover {
    background: #ffffff;
    border-color: rgba(8, 120, 95, .18);
    transform: translateX(3px);
  }

  .desktop-rail .rail-nav button .rail-ico {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 15px;
  }

  .desktop-rail .rail-girl {
    margin-top: auto;
    align-self: center;
  }

  .desktop-rail .rail-note {
    text-align: center;
    font-size: 11px;
    color: var(--muted);
  }

  /* ---------- 工作区:去掉手机边框,变成横屏卡片 ---------- */
  .phone-shell {
    grid-template-rows: 1fr;
    width: min(1320px, 100%);
    height: min(880px, calc(100vh - 60px));
    min-height: 700px;
    border: 1px solid rgba(20, 32, 29, .08);
    border-radius: 30px;
    box-shadow: 0 22px 70px rgba(20, 32, 29, .14);
  }

  .phone-shell::before { display: none; }

  .screen { padding: 26px 34px; }

  /* ---------- 翻译主屏:电脑习惯重排 ----------
     打字为主:输入框常驻对话区正下方(全宽)+ 发送按钮
     语音为辅:小小的"按住说话"收在右列底部
     ------------------------------------------------ */
  .translate-screen.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 14px 22px;
    padding: 18px 30px 22px;
  }

  /* 选声音浮层:宽度自适应内容,避免外语文字出框 */
  .translate-screen.active .voice-gender-selector {
    right: 30px;
    bottom: 100px;
    width: auto;
    min-width: 260px;
    max-width: 360px;
  }

  .translate-topbar { grid-column: 1 / -1; grid-row: 1; grid-template-columns: 50px minmax(0, 1fr) auto; }
  .translate-topbar .topbar-actions { display: flex; gap: 10px; }

  .chat-display { grid-column: 1; grid-row: 2; }

  .translate-meta { grid-column: 2; grid-row: 2; align-self: start; }

  /* 输入区:常驻显示,占据左列底部整行(压住原"底部抽屉"的隐藏与定位) */
  .translate-screen .text-sheet,
  .translate-screen .text-sheet[hidden] {
    grid-column: 1;
    grid-row: 3;
    display: grid !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 8px 14px;
    align-items: stretch;
    margin: 0;
  }
  .text-sheet textarea {
    grid-column: 1;
    grid-row: 1 / 3;
    min-height: 88px;
    resize: none;
    font-size: 15px;
  }
  .text-sheet .text-send-button {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-width: 120px;
    font-size: 15px;
    font-weight: 900;
  }
  .text-sheet .text-limit-hint {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    text-align: center;
    font-size: 11px;
  }

  /* 语音降为辅助:紧凑地放在右列底部 */
  .voice-dock {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
  }
  .voice-dock .keyboard-button { display: none; }
  .voice-dock .voice-hold-button { flex: 1; font-size: 13px; min-height: 44px; }

  .voice-gender-selector { grid-column: 2; }

  /* 左栏少女头像:圆形融入背景,去掉外圈白框 */
  /* 圆环由 CSS 重新画,图片放大裁掉自带的白边+绿边,边缘干净均匀 */
  .desktop-rail .rail-girl {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #a7cbb5;
    box-shadow: 0 12px 28px rgba(20, 32, 29, .16);
  }
  .desktop-rail .rail-girl img {
    display: block;
    width: 134%;
    height: 134%;
    object-fit: cover;
    margin: -17% 0 0 -17%;
  }

  /* ---------- 敬语/称呼:去掉折叠按钮,选项直接平铺在右列 ---------- */
  .translate-screen.active .relationship-button { display: none !important; }

  .translate-screen.active .relationship-menu {
    display: block;
    width: 100%;
  }

  .translate-screen.active .relationship-panel,
  .translate-screen.active .relationship-panel[hidden] {
    display: flex !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-height: none;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .translate-screen.active .relationship-panel .relationship-option {
    display: block;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    border: 1px solid rgba(8, 120, 95, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
  }
  .translate-screen.active .relationship-panel .relationship-option:hover {
    transform: translateY(-1px);
    border-color: rgba(8, 120, 95, .4);
  }
  .translate-screen.active .relationship-panel .relationship-option.selected {
    background: #dff4eb;
    border-color: var(--accent);
  }
  .translate-screen.active .relationship-panel .relationship-option strong {
    display: block;
    font-size: 14px;
    font-weight: 900;
    color: #17342c;
  }
  .translate-screen.active .relationship-panel .relationship-option span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted);
  }

  /* ---------- 注册:表单居中、两列字段 ---------- */
  .register-screen.active { display: flex; flex-direction: column; align-items: center; }
  .register-screen .app-header { width: min(720px, 100%); }
  .register-form {
    width: min(720px, 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
  }
  .register-form .auth-method-tabs,
  .register-form .auth-status,
  .register-form .auth-method-panel,
  .register-form .consent-row,
  .register-form .ghost-action-button { grid-column: 1 / -1; }

  /* ---------- 选择语言 / 方向 / 称呼:多列卡片 ---------- */
  /* 三个选择页统一:单列、居中、卡片固定尺寸,不因国家名长短而缩放 */
  .screen[data-screen="language"] .card-list,
  .screen[data-screen="direction"] .card-list,
  .screen[data-screen="scene"] .scene-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
  }
  .screen[data-screen="language"] .card-list > *,
  .screen[data-screen="direction"] .card-list > *,
  .screen[data-screen="scene"] .scene-list > * {
    width: 100%;
    min-height: 78px;
  }

  /* ---------- 历史 / 客服:舒适阅读宽度 ---------- */
  .screen[data-screen="history"] .history-list,
  .support-panel { width: min(760px, 100%); margin: 0 auto; }
  .screen[data-screen="history"] .app-header { width: min(760px, 100%); margin-left: auto; margin-right: auto; }

  /* ---------- 我的:卡片双列 ---------- */
  /* ===== 个人页:方案 A(左独立身份卡 + 右会员横幅 + 功能宫格)===== */
  .profile-content {
    display: grid;
    grid-template-columns: 300px 1fr 1fr;
    grid-template-areas:
      "hero vip  vip"
      "hero cs   priv"
      "hero hist pref";
    gap: 16px;
    max-width: 960px;
    margin: 0 auto;
    align-content: center;
  }
  /* 左:独立身份卡,竖排居中 */
  .profile-screen .profile-hero-card {
    grid-area: hero;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 32px 24px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(20, 32, 29, .07);
  }
  .profile-screen .profile-hero-card .avatar-editor { flex-direction: column; gap: 8px; }
  .profile-screen .profile-hero-card .avatar-preview { width: 90px; height: 90px; font-size: 38px; }
  .profile-screen .profile-hero-card .name-editor { width: 100%; align-items: center; gap: 6px; }
  .profile-screen .profile-hero-card .name-editor input { text-align: center; }
  .profile-screen .profile-email { display: block; font-size: 12px; color: var(--muted); }
  .profile-screen .profile-vip-tag {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #dff4eb;
    color: var(--accent-dark);
    font-size: 12px;
    font-weight: 900;
  }
  /* 右上:会员横幅 */
  .profile-screen .vip-status-card { grid-area: vip; border-radius: 20px; padding: 22px 28px; }
  /* 右下:2×2 功能宫格 */
  .profile-screen #supportEntryButton { grid-area: cs; }
  .profile-screen #privacyEntryButton { grid-area: priv; }
  .profile-screen .profile-hist-entry { grid-area: hist; }
  .profile-screen .profile-pref-entry { grid-area: pref; }
  .profile-screen .profile-extra-entry { display: flex; }
  .profile-screen .support-entry-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 18px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(20, 32, 29, .06);
  }
  .profile-screen .support-entry-card .support-entry-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 900;
    flex: none;
  }
  .profile-screen #supportEntryButton .support-entry-icon { background: #dff4eb; color: var(--accent); }
  .profile-screen #privacyEntryButton .support-entry-icon { background: #fdece0; color: #c47a3a; }
  .profile-screen .profile-hist-entry .support-entry-icon { background: #e8f0fb; color: #3f6ea8; }
  .profile-screen .profile-pref-entry .support-entry-icon { background: #f0ecfb; color: #7159a8; }
  .profile-screen .support-entry-card .support-entry-arrow { display: none; }

  /* 底部导航在电脑上隐藏(左侧栏替代) */
  .app-bottom-nav { display: none; }

  /* ---------- 会员:方案横排 ---------- */
  /* ===== 会员页:方案 B(左权益 + 右套餐,年付置顶)===== */
  .billing-screen.active {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    grid-template-areas: "aside plans" "aside buy";
    grid-template-rows: auto auto;
    column-gap: 44px;
    row-gap: 12px;
    align-items: start;
    align-content: center;
    max-width: 1040px;
    margin: 0 auto;
    padding: 40px;
  }
  .billing-screen .app-header { display: none; }

  .billing-aside { grid-area: aside; display: flex; flex-direction: column; justify-content: center; align-self: stretch; }
  .billing-aside-kicker { color: var(--accent-dark); font-size: 12px; font-weight: 900; letter-spacing: .2em; }
  .billing-aside-title { font-size: 32px; font-weight: 950; color: var(--ink); margin: 12px 0 22px; line-height: 1.25; }
  .billing-aside-perks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
  .billing-aside-perks li { font-size: 15px; font-weight: 600; color: var(--ink); }
  .billing-aside-perks li::before { content: "✓"; color: var(--accent); font-weight: 900; margin-right: 10px; }

  .billing-plans {
    grid-area: plans;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  .billing-plans .billing-plan-card {
    position: relative;
    display: block;
    min-height: 0;
    height: auto;
    flex: none;
    padding: 16px 100px 16px 24px;
    border: 1.5px solid var(--line);
    border-radius: 18px;
    background: #fff;
    text-align: left;
  }
  .billing-plans .billing-plan-card [data-plan-title] { display: block; font-size: 15px; font-weight: 900; color: var(--ink); }
  .billing-plans .billing-plan-card .plan-avg,
  .billing-plans .billing-plan-card small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
  .billing-plans .billing-plan-card strong {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 950;
    color: var(--accent-dark);
  }
  .billing-plans .billing-plan-card.selected { border-color: var(--accent); box-shadow: 0 10px 26px rgba(8, 120, 95, .14); }

  /* 三个白卡:统一高度,内容垂直居中,不因文字多少变高 */
  .billing-plans .billing-plan-card:not([data-plan="yearly"]) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 76px;
    height: 76px;
  }
  /* 白卡统一两行,隐藏月均行使三卡等高;月均仅在年付高亮卡展示 */
  .billing-plans .billing-plan-card:not([data-plan="yearly"]) .plan-avg { display: none; }
  /* 顺序与设计稿一致:年付 → 连续包月 → 季度 → 单月 */
  .billing-plans .billing-plan-card[data-plan="monthly_auto"] { order: 1; }
  .billing-plans .billing-plan-card[data-plan="quarterly"] { order: 2; }
  .billing-plans .billing-plan-card[data-plan="monthly_once"] { order: 3; }

  /* 年付置顶 + 墨绿高亮 */
  .billing-plans .billing-plan-card[data-plan="yearly"] {
    order: -1;
    background: linear-gradient(120deg, #0c6f58, #045846);
    border-color: transparent;
    padding: 20px 100px 20px 24px;
  }
  .billing-plans .billing-plan-card[data-plan="yearly"] [data-plan-title] { display: inline-block; color: #fff; }
  .billing-plans .billing-plan-card[data-plan="yearly"] strong { color: #fff; }
  .billing-plans .billing-plan-card[data-plan="yearly"] .plan-avg,
  .billing-plans .billing-plan-card[data-plan="yearly"] small { color: rgba(255, 255, 255, .82); }
  .billing-plans .plan-ribbon {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    background: var(--gold);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .plan-avg { display: block; }
  .billing-plan-card-hidden { display: none; }

  .purchase-button {
    grid-area: buy;
    position: static;
    justify-self: stretch;
    width: 100%;
    margin: 0;
    min-height: 54px;
    font-size: 16px;
    font-weight: 900;
    border-radius: 999px;
    background: linear-gradient(135deg, #0c6f58, #045846);
    color: #fff;
    box-shadow: 0 12px 30px rgba(8, 120, 95, .28);
  }

  /* ---------- 启动屏:内容居中收窄 ---------- */
  .splash-layout { max-width: 640px; margin: 0 auto; }
}


/* ===== 夜间模式:电脑版专属背景覆盖 ===== */
@media (min-width: 1100px) {
  body.dark-mode {
    background:
      radial-gradient(720px 420px at 12% 8%, rgba(30,58,47,.45), transparent 70%),
      radial-gradient(640px 420px at 88% 92%, rgba(20,40,34,.55), transparent 70%),
      linear-gradient(160deg, #0f1613 0%, #101815 50%, #0e1512 100%);
  }
  body.dark-mode .desktop-rail { background: linear-gradient(180deg, #18211d, #141c19); border-color: #2c3a34; }
  body.dark-mode .phone-shell { background: #141c19; border-color: #2c3a34; }
  body.dark-mode .billing-plans .billing-plan-card:not([data-plan="yearly"]),
  body.dark-mode .profile-screen .profile-hero-card,
  body.dark-mode .profile-screen .vip-status-card,
  body.dark-mode .profile-screen .support-entry-card { background: #1c2622; }
  body.dark-mode .text-sheet { background: #1c2622; }
}
/* 夜间模式:电脑版补齐(称呼平铺卡 + 输入框)*/
@media (min-width: 1100px) {
  body.dark-mode .translate-screen.active .relationship-panel .relationship-option { background: #1c2622 !important; border-color: #2c3a34 !important; }
  body.dark-mode .translate-screen.active .relationship-panel .relationship-option strong { color: #e9efec; }
  body.dark-mode .text-sheet textarea { background: #1c2622; }
}
/* 夜间模式:电脑左栏 logo 白底 + 敬语副文字 */
@media (min-width: 1100px) {
  body.dark-mode .rail-logo { background: #ffffff; border-radius: 14px; padding: 8px 12px; }
  body.dark-mode .translate-screen.active .relationship-panel .relationship-option span { color: #a6b8b1; }
}
/* ===== 2026-08-02 · 桌面端:语音遮罩禁用 + 点击说话录音态 + A/文位置 ===== */
@media (min-width: 1100px) {
  .voice-overlay { display: none !important; }
  .splash-lang-fab { top: 26px; left: 26px; }
  #holdButton.desktop-recording { background: #d43c2f !important; color: #ffffff !important; animation: okay-rec-pulse 1.2s ease-in-out infinite; }
}
@keyframes okay-rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 60, 47, 0.35); }
  50% { box-shadow: 0 0 0 10px rgba(212, 60, 47, 0); }
}