/* ════════════════════════════════════════════════════════════
   49. 助手形象(T188):面形图 + 代码画的眼睛(agent-face.js 画)。头像、抽屉入口、转达署名同一份,
   入口与署名的尺寸写在各自位置(47-personal-agent-entry / 05-messages)。
   动作:点它 / 收到你的话歪头眯眼;回复落到页面两只眼快眨一下;有没看的消息停在眯眼脸;不动处眯眼脸静止。
   眯着的眼是一划,脸上就是一点一划(Dida 的符号,不加眼角纹)。
   头像带形象的助手(body.agent-face-chat,agent-view.js 套):你发的气泡跟形象颜色;
   聊天窗口外观下手机顶栏浮空、形象居中、名字胶囊压在形象下沿,点名字打开换样子面板(本文件末段)。
   视觉规则见 VISUAL_DESIGN_PRINCIPLES「Dida」,效果图 xhtml_archive/2026-10-18_delivery_P787_dida_chat.html。
   ════════════════════════════════════════════════════════════ */

/* ── 形象本身 ── */
.agent-face { display: block; width: 100%; height: 100%; }
.agent-face > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.agent-face :is(.fx-body, .fx-left, .fx-open, .fx-wink) { transform-box: fill-box; }
.agent-face .fx-body { transform-origin: 50% 100%; }
.agent-face :is(.fx-left, .fx-open, .fx-wink) { transform-origin: center; }
.agent-face .fx-wink { opacity: 0; }
.agent-face:is(.is-winked, .is-unread, .is-still) .fx-open { opacity: 0; }
.agent-face:is(.is-winked, .is-unread, .is-still) .fx-wink { opacity: 1; }

/* 歪头眯眼 1.4 秒:0–10% 身子缩一下,24% 歪到 7°,72% 起回正(86% 略过头);右眼 16–22% 合上、73–82% 睁开 */
@keyframes agentFaceTilt  { 0% { transform: none } 10% { transform: scale(1.04, .95) } 24% { transform: rotate(7deg) } 72% { transform: rotate(7deg) } 86% { transform: rotate(-1.5deg) } 100% { transform: none } }
@keyframes agentFaceClose { 0%, 16% { transform: scaleY(1); opacity: 1 } 22% { transform: scaleY(.1); opacity: 1 } 23%, 73% { transform: scaleY(.1); opacity: 0 } 74% { transform: scaleY(.1); opacity: 1 } 82%, 100% { transform: scaleY(1); opacity: 1 } }
@keyframes agentFaceWink  { 0%, 20% { transform: scaleX(.5); opacity: 0 } 27% { transform: scaleX(1); opacity: 1 } 72% { transform: scaleX(1); opacity: 1 } 75%, 100% { transform: scaleX(.6); opacity: 0 } }
/* 新消息到达:同样歪头眯眼,但眼睛不再睁开,停在眯眼脸 */
@keyframes agentFaceCloseHold { 0%, 16% { transform: scaleY(1); opacity: 1 } 22% { transform: scaleY(.1); opacity: 1 } 23%, 100% { transform: scaleY(.1); opacity: 0 } }
@keyframes agentFaceWinkHold  { 0%, 20% { transform: scaleX(.5); opacity: 0 } 27%, 100% { transform: scaleX(1); opacity: 1 } }
@keyframes agentFaceBlink { 0%, 100% { transform: scaleY(1) } 40%, 60% { transform: scaleY(.1) } }

.agent-face:is(.is-wink, .is-arrive) .fx-body { animation: agentFaceTilt 1.4s cubic-bezier(.3, .7, .3, 1) 1; }
.agent-face.is-wink .fx-open { animation: agentFaceClose 1.4s ease-in-out 1; }
.agent-face.is-wink .fx-wink { animation: agentFaceWink 1.4s ease-out 1; }
.agent-face.is-arrive .fx-open { animation: agentFaceCloseHold 1.4s ease-in-out 1 forwards; }
.agent-face.is-arrive .fx-wink { animation: agentFaceWinkHold 1.4s ease-out 1 forwards; }
.agent-face.is-blink :is(.fx-left, .fx-open) { animation: agentFaceBlink .32s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) {
  .agent-face * { animation: none !important; }
}

/* 带底框的头像位(顶栏、卡片等):形象自己是圆的,不垫底色 */
.agent-avatar.has-face { background: none; border-color: transparent; border-radius: 50%; overflow: visible; }

/* ── 头像带形象的助手对话页 ── */
/* 你发的气泡跟形象颜色:只换现有两个变量,气泡样式本身不另写 */
body.agent-face-chat #chat-view { --user-message-bg: var(--agent-tone-bg); --user-message-text: var(--agent-tone-text); }
body.agent-face-chat #chat-view :is(.topbar-agent-avatar, .topbar-agent-name) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* 名字后一个小箭头:点名字能换样子 */
body.agent-face-chat #chat-view .topbar-agent-name { display: inline-flex; align-items: center; }
body.agent-face-chat #chat-view .topbar-agent-name::after {
  content: ''; flex-shrink: 0; width: 5px; height: 5px; margin: -3px 1px 0 7px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: .55;
}

/* 手机 · 聊天窗口外观:照用户选定的参考图 —— 不铺横条,顶上一层由实到虚的磨砂,正文从下面滑过变模糊;
   两侧磨砂圆钮;形象 60px 居中;名字是压在形象下沿的磨砂胶囊 */
@media (max-width: 1023px) {
  body.messenger-chat.agent-face-chat #chat-view { --chat-topbar-h: 88px; }
  body.messenger-chat.agent-face-chat #chat-view .topbar { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border: 0; }
  body.messenger-chat.agent-face-chat #chat-view .topbar::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -20px; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--chat-main-bg) 80%, transparent), color-mix(in srgb, var(--chat-main-bg) 40%, transparent) 75%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent);
  }
  body.messenger-chat.agent-face-chat #chat-view :is(#btn-chat-drawer, #btn-mobile-panel) {
    width: 44px; height: 44px; border-radius: 50%; background: var(--chrome-glass-strong);
    -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur);
    box-shadow: var(--chrome-edge), var(--chrome-shadow);
  }
  body.messenger-chat.agent-face-chat #chat-view :is(#btn-chat-drawer, .came-back, .topbar-right) { align-self: start; margin-top: 8px; }
  body.messenger-chat.agent-face-chat #chat-view .came-back { height: 44px; border-radius: 22px; }  /* 来处条与两侧圆钮同高(50-came-from) */
  body.messenger-chat.agent-face-chat #chat-view .topbar-identity { flex-direction: column; align-items: center; gap: 0; margin-top: 4px; }
  body.messenger-chat.agent-face-chat #chat-view .topbar-agent-avatar { display: block; }
  body.messenger-chat.agent-face-chat #chat-view .topbar-agent-avatar .agent-avatar { width: 60px; height: 60px; }
  body.messenger-chat.agent-face-chat #chat-view .topbar-identity-text { position: relative; z-index: 1; margin-top: -12px; }
  body.messenger-chat.agent-face-chat #chat-view .topbar-agent-name {
    padding: 3px 10px 3px 12px; border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--text-bright);
    background: var(--chrome-glass-strong); -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur);
    box-shadow: var(--chrome-edge), var(--chrome-shadow);
  }
}

/* ── 换样子面板(点形象对话页的名字打开,agent-look.js)── */
.look-sheet-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .38); opacity: 0; pointer-events: none; transition: opacity .2s; }
.look-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.look-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 301; max-width: 520px; margin: 0 auto;
  padding: 8px 20px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0;
  background: var(--bg-modal); box-shadow: 0 -10px 40px var(--shadow-overlay);
  transform: translateY(105%); visibility: hidden;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
}
.look-sheet.open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.look-sheet-handle { width: 36px; height: 4px; margin: 0 auto 6px; border-radius: 2px; background: var(--border-light); }
.look-sheet-head { display: flex; justify-content: flex-end; }
.look-sheet-done { min-height: 36px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--text-bright); cursor: pointer; }
.look-sheet-hero { display: block; width: 128px; height: 128px; margin: -6px auto 6px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.look-sheet-error { margin: 0 2px 4px; font-size: 13px; color: var(--error-text); text-align: center; }
.look-sheet-label { margin: 14px 2px 8px; font-size: 12px; color: var(--text-muted); }
.look-sheet-faces[hidden] { display: none; }
.look-sheet-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.look-sheet-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 6px;
  border: 0; border-radius: 14px; background: none; font: inherit; font-size: 12.5px; color: var(--text-muted);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.look-sheet-opt .agent-face { width: 44px; height: 44px; border-radius: 50%; }
.look-sheet-opt.is-on { color: var(--text-bright); font-weight: 600; }
.look-sheet-opt.is-on .agent-face { box-shadow: 0 0 0 2px var(--bg-modal), 0 0 0 4px var(--text-bright); }
.look-sheet.is-saving .look-sheet-row { pointer-events: none; }