/* ==========================================================================
   机器人脸 · 照搬自 AIBOT 电脑预览端（D:\AIwork\AIBOT\preview\app\globals.css）
   —— 原设计：纯 CSS 画脸（无图片、无 canvas、无 SVG），五种状态靠 --face-accent 换色，
      眨眼/说话/思考/聆听四种动效全部用 @keyframes 驱动。
   本文件把这些规则原样搬过来，只做了两件事：
     ① 类名保持与 AIBOT 一致（robot-face / eyes / eye / mouth / face-aura / …）
     ② 状态类名从 AIBOT 的 mode-xxx 映射到我们 kiosk 的既有状态名（见 robotface.js）
   ========================================================================== */

/* ---------- 脸本体 ----------
   注：AIBOT 原值 width:min(56%,430px) 是给它 960px 宽的预览框调的；
   我们的机器端是整屏（待机时脸板铺满），照搬会显小，所以按屏幕尺寸放大。
   16:10 大屏 ≈ 62%；小屏（平板竖屏）回落，保证不溢出。 */
.robot-face{ --face-accent:#2e7cf6; position:relative; width:min(62%,640px); aspect-ratio:1.6/1; transform:translateY(-4%); }
.robot-face.mode-listening{ --face-accent:#18a991; }
.robot-face.mode-low{ --face-accent:#e8a11f; }
.robot-face.mode-fault{ --face-accent:#df5555; }
.robot-face.mode-ticket{ --face-accent:#38a169; }
.robot-face.mode-person{ --face-accent:#2e7cf6; }
.robot-face.mode-goodbye{ --face-accent:#2e7cf6; }

.face-aura,.listening-ring{ position:absolute; inset:-14%; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--face-accent) 16%,transparent),transparent 64%); }
.listening-ring{ display:none; background:none; border:2px solid color-mix(in srgb,var(--face-accent) 24%,transparent); }
.mode-listening .listening-ring{ display:block; animation:listen-pulse 1.7s ease-out infinite; }
.mode-listening .listening-ring-two{ animation-delay:.65s; }

/* ---------- 眼睛（带白点高光 + 眨眼）---------- */
.eyes{ position:absolute; inset:20% 17% auto; display:flex; justify-content:space-between; }
.eye{ position:relative; width:27%; aspect-ratio:.82/1; border-radius:48%; background:#0b2545; box-shadow:0 10px 26px rgb(9 35 66/18%); animation:blink 4.4s infinite; transform-origin:center; }
.eye::after{ content:''; position:absolute; left:22%; top:18%; width:18%; aspect-ratio:1; border-radius:50%; background:white; }
.mode-listening .eye{ outline:7px solid rgb(24 169 145/15%); animation:none; }
.mode-fault .eye{ border-radius:45% 45% 20% 20%; transform:scaleY(.34); animation:none; }
.mode-low .eye{ animation-duration:6.5s; }

/* ---------- 嘴（用 border 技巧画弧线；各状态换形状）---------- */
.mouth{ position:absolute; left:50%; bottom:15%; width:31%; height:19%; transform:translateX(-50%); }
.mouth span{ position:absolute; inset:0; border:8px solid #0b2545; border-top-color:transparent; border-left-color:transparent; border-right-color:transparent; border-radius:0 0 50% 50%; }
.mode-listening .mouth span{ inset:42% 22%; border-width:5px; border-radius:999px; border-color:#0b2545; }
.mode-thinking .mouth span{ inset:28% 37%; border-width:6px; border-radius:50%; border-color:#0b2545; }
.mode-speaking .mouth span{ inset:5% 5%; border:0; border-radius:45%; background:#0b2545; box-shadow:inset 0 -14px #f28fa4; animation:talk .24s ease-in-out infinite alternate; }
.mode-fault .mouth span,.mode-low .mouth span{ transform:rotate(180deg); }

/* ---------- 思考小点 ---------- */
.thinking-dots{ position:absolute; right:2%; top:18%; display:none; align-items:flex-end; gap:7px; }
.mode-thinking .thinking-dots{ display:flex; }
.thinking-dots span{ width:10px; aspect-ratio:1; border-radius:50%; background:var(--face-accent); animation:think 1.1s ease-in-out infinite alternate; }
.thinking-dots span:nth-child(2){ animation-delay:.18s; transform:translateY(-8px); }
.thinking-dots span:nth-child(3){ animation-delay:.36s; transform:translateY(-18px); }

/* ---------- 标题 + 提示 ---------- */
.face-copy{ z-index:1; margin-top:-18px; text-align:center; }
.face-copy h2{ color:#0b2545; font-size:clamp(24px,3vw,38px); font-weight:750; letter-spacing:-.035em; margin:0; }
.face-copy p{ margin:7px 0 0; color:#6e8494; font-size:clamp(12px,1.35vw,16px); }

/* ---------- 聆听音量波形 ---------- */
.voice-meter{ position:relative; z-index:2; display:flex; flex:0 0 26px; height:26px; align-items:center; gap:4px; margin-top:5px; }
.voice-meter span{ width:3px; height:8px; border-radius:99px; background:#18a991; animation:meter .7s ease-in-out infinite alternate; animation-delay:calc(var(--bar-index) * -42ms); }

/* ---------- 实时字幕条 ---------- */
.speech-caption{ position:relative; z-index:2; display:grid; width:min(78%,660px); flex:0 0 auto; gap:3px; margin-top:10px; border:1px solid rgb(119 158 180/22%); border-radius:14px; background:rgb(255 255 255/82%); padding:8px 14px; box-shadow:0 8px 24px rgb(42 94 124/8%); text-align:center; backdrop-filter:blur(9px); }
.speech-caption span{ color:#638096; font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.speech-caption strong{ overflow:hidden; color:#21435d; font-size:clamp(10px,1.15vw,13px); font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.speech-caption em{ color:#c04747; font-size:9px; font-style:normal; }
.speech-caption.is-live{ border-color:rgb(24 169 145/38%); box-shadow:0 0 0 4px rgb(24 169 145/7%); }

/* ---------- 屏幕内顶部状态条 / 底部信息栏 ---------- */
.screen-topline{ display:flex; height:42px; flex:0 0 auto; align-items:center; justify-content:space-between; padding:0 22px; color:#587285; background:rgb(255 255 255/72%); border-bottom:1px solid rgb(120 158 181/22%); font-size:12px; font-weight:600; }
.screen-footer{ position:absolute; left:22px; right:22px; bottom:16px; display:flex; justify-content:space-between; color:#7890a2; font-size:12px; font-weight:600; }
.screen-footer span:first-child{ display:flex; align-items:center; gap:7px; color:#4c6c84; }

/* ---------- 动效 ---------- */
@keyframes blink{ 0%,4%,100%{ transform:scaleY(1); } 2%{ transform:scaleY(.08); } }
@keyframes talk{ from{ transform:scaleY(.55); } to{ transform:scaleY(1.05); } }
@keyframes think{ from{ opacity:.25; } to{ opacity:1; } }
@keyframes listen-pulse{ 0%{ opacity:.8; transform:scale(.84); } 100%{ opacity:0; transform:scale(1.2); } }
@keyframes meter{ from{ height:7px; opacity:.45; } to{ height:30px; opacity:1; } }

/* ---------- 屏幕尺寸适配 ---------- */
/* 超大屏（走廊电视/一体机）：脸再大一点，顾客远处也看得清 */
@media (min-width:1600px) and (min-height:900px){
  .robot-face{ width:min(66%,780px); }
  .face-copy h2{ font-size:clamp(30px,3.2vw,46px); }
}
/* 平板竖屏 / 窄屏：脸收窄，别把标题挤出去 */
@media (max-width:820px){
  .robot-face{ width:min(78%,420px); }
  .face-copy h2{ font-size:clamp(20px,5vw,28px); }
}