/* 「只要一句」演示（js/say.js）：左边三张小对话卡「往 Mibs 里记一下」、中间 Mibs 里上下两个空间（生活 / 工作）、右边新对话「去 Mibs 里查一查」。
   所有元素一开始就占好位置、只是透明；出场只动透明度和自身的小位移，弹珠落点才量得准，版面也不会跳。
   2026-10-15 收紧：舞台从 1160 宽、约 500 高收到约 1040 × 400，三栏高度彼此贴合，不再有半空的列。 */

.say { padding: clamp(80px, 11vh, 128px) 0 clamp(36px, 6vh, 72px); }
.eyebrow { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
html[lang='zh-CN'] .eyebrow { letter-spacing: 0.24em; font-family: var(--font-sans); }
/* 标题就是那两句口头禅；哪一幕在演，哪一句亮 */
.say__title { display: grid; justify-items: center; gap: 0.06em; --d: 60ms; }
/* 两行标题要和舞台同屏（900 高的屏幕也放得下），比别的段落标题小一号 */
.say .section-head h2 { font-size: clamp(32px, 4.2vw, 64px); }
.say__line { transition: color 700ms var(--ease-out), opacity 700ms var(--ease-out); }
.say[data-act='save'] .say__line--check, .say[data-act='check'] .say__line--save { color: var(--text-3); opacity: 0.32; }
.say .section-head p:last-child { --d: 120ms; }

.say__stage { position: relative; margin: 40px auto 0; width: min(1040px, calc(100% - 2 * var(--pad-x)));
  display: grid; grid-template-columns: minmax(0, 1fr) 244px minmax(0, 1fr); gap: 18px; align-items: stretch; --d: 160ms; }

/* —— 对话卡 —— */
.say__saves { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; }
.say__check { display: grid; grid-template-columns: minmax(0, 1fr); }
.chat { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-2), inset 0 1px 0 #fff;
  opacity: 0; transform: translateY(14px) scale(0.985); transition: opacity 320ms var(--ease-out), transform 720ms var(--ease-spring); }
/* 右边新对话在第一幕就「待命」摆着：淡一点，只露出名字、能用哪个空间和输入框；第二幕 is-on 亮起来（同权重，写在后面的 is-on 生效） */
.chat.is-wait { opacity: 0.5; transform: none; transition-duration: 520ms, 720ms; }
.chat.is-on { opacity: 1; transform: none; }
.is-leaving .chat { opacity: 0; transform: translateY(-8px) scale(0.99); transition: opacity 420ms var(--ease-in-out), transform 520ms var(--ease-in-out); }
.chat--mini { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 12px 11px; border-radius: 18px; }
.chat--check { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; padding: 14px 16px; container-type: inline-size; }
.composer { display: flex; align-items: center; gap: 10px; height: 40px; margin-top: 12px; padding: 0 6px 0 15px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text-3); font-size: 13.5px; }
.composer__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer__send { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--text-3); }
.composer__send svg { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chat__head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.chat__avatar { position: relative; flex: none; width: var(--a); height: var(--a); }
.chat__avatar .bot { left: 0; top: 0; pointer-events: none; }
.chat__name { font-size: 14px; font-weight: 640; letter-spacing: -0.01em; white-space: nowrap; }
.chat--check .chat__name { font-size: 16px; }
.chat__tag, .row__by { flex: none; padding: 3px 8px 4px; border-radius: var(--r-full); font-size: 12px; font-weight: 580; line-height: 1.2; white-space: nowrap;
  background: color-mix(in oklab, var(--c) 15%, var(--surface)); color: var(--cd); }
/* 「能用 生活」：右上角交代这位只被允许用哪个空间 */
.chat__can { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.chat__can b { padding: 2px 9px 3px; border-radius: var(--r-full); border: 1px solid var(--border-strong); font-weight: 580; color: var(--text-1); line-height: 1.2; }

/* 气泡：你说的话是深色气泡，口头禅用品牌渐变字高亮；agent 的回答是浅色气泡 */
.msg { max-width: 94%; padding: 8px 13px 9px; border-radius: 16px; font-size: 14.5px; line-height: 1.42; letter-spacing: -0.005em;
  opacity: 0; transform: translateY(8px) scale(0.97); transition: opacity 260ms var(--ease-out), transform 640ms var(--ease-spring); }
.msg.is-on { opacity: 1; transform: none; }
.msg--me { justify-self: end; background: var(--ink); color: #E9E6E0; border-bottom-right-radius: 5px; transform-origin: 100% 100%; }
.msg--me mark { background: var(--grad-signature); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 620; }
.msg--them { justify-self: start; align-self: start; background: var(--surface-2); color: var(--text-1); border-bottom-left-radius: 5px; transform-origin: 0 100%; }

/* 「Mibs · 记住 / 查找」：转圈 → 完成（记住换成一颗弹珠、查找换成 Mibs 标志），两种文字叠在同一处，宽度不跳；
   一行放不下就折成两行，宁可折行也不截掉空间名 */
.tool { display: inline-flex; align-items: center; gap: 7px; justify-self: start; max-width: 100%; min-height: 27px; padding: 4px 11px 4px 7px; border-radius: 14px;
  background: var(--surface-2); font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); letter-spacing: 0;
  opacity: 0; transform: translateY(6px); transition: opacity 240ms var(--ease-out), transform 560ms var(--ease-spring), background-color 360ms var(--ease-out), color 360ms; }
.tool.is-on { opacity: 1; transform: none; }
.tool.is-done { color: var(--text-1); }
.chat--mini .tool.is-done { background: color-mix(in oklab, var(--c) 13%, var(--surface)); }
.tool__icon { position: relative; flex: none; width: 16px; height: 16px; }
.tool__spin { position: absolute; inset: 1px; border-radius: 50%; border: 2px solid rgba(28,25,20,.12); border-top-color: var(--text-2);
  animation: say-spin 760ms linear infinite; transition: opacity 160ms, transform 240ms var(--ease-out); }
@keyframes say-spin { to { transform: rotate(360deg); } }
.is-done .tool__spin { opacity: 0; transform: scale(0.4); animation: none; }
.tool__mb { --s: 16px; left: 0; top: 0; transform: scale(0); transition: transform 560ms var(--ease-bounce); }
.is-done .tool__mb { transform: none; }
.tool__mark { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-1); opacity: 0; transform: scale(0.5); transition: opacity 200ms, transform 520ms var(--ease-bounce); }
.is-done .tool__mark { opacity: 1; transform: none; }
.tool__text { display: inline-grid; grid-template-columns: minmax(0, auto); min-width: 0; }
.tool__text > b { grid-area: 1 / 1; font-weight: 500; line-height: 1.35; transition: opacity 200ms var(--ease-out), transform 320ms var(--ease-spring); }
.tool__ok { opacity: 0; transform: translateY(4px); }
.is-done .tool__busy { opacity: 0; transform: translateY(-4px); }
.is-done .tool__ok { opacity: 1; transform: none; }

/* 查一查：结果框。几行早就排好，只是透明；弹珠落到哪一行，哪一行才出现。框的高度就是这几行，不预留空区 */
.chat__body { display: grid; gap: 10px; align-content: start; margin-top: 12px; }
.found { border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--border); padding: 6px 12px 2px;
  opacity: 0; transform: translateY(8px); transition: opacity 260ms var(--ease-out), transform 620ms var(--ease-spring); }
.found.is-on { opacity: 1; transform: none; }
.found .tool { display: flex; width: 100%; min-height: 28px; padding: 0; background: none; }
.found__n { margin-left: auto; font-size: 12px; color: var(--text-3); opacity: 0; transition: opacity 300ms var(--ease-out); }
.is-done > .found__n { opacity: 1; }
.found__rows { list-style: none; margin: 3px 0 0; padding: 0; }
.row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 38px; border-top: 1px solid rgba(28,25,20,.06); }
.row__mb { position: relative; --s: 14px; opacity: 0; }
.row__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 560; letter-spacing: -0.01em; }
.row__t, .row__by { opacity: 0; transform: translateX(-6px); transition: opacity 260ms var(--ease-out), transform 520ms var(--ease-spring); }
.row__by { transition-delay: 60ms; }
.row.is-on .row__mb, .row.is-on .row__t, .row.is-on .row__by { opacity: 1; transform: none; }
/* 查找卡窄（窄桌面、平板、手机）时，「某某存的」挪到标题下面：标题必须读全，不能被截成「Thin…」 */
@container (max-width: 330px) {
  .row { grid-template-columns: 14px minmax(0, 1fr); row-gap: 4px; padding-block: 7px; }
  .row__t { white-space: normal; line-height: 1.3; }
  .row__by { grid-column: 2; justify-self: start; }
}

/* 回答：打字的三个点和回答叠在同一格，回答的高度一开始就占好 */
.reply { display: grid; }
.reply > * { grid-area: 1 / 1; }
.typing { justify-self: start; align-self: start; display: inline-flex; gap: 5px; padding: 12px 14px; border-radius: 16px; border-bottom-left-radius: 5px; background: var(--surface-2);
  opacity: 0; transition: opacity 200ms var(--ease-out); }
.typing.is-on { opacity: 1; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: say-dot 1s var(--ease-in-out) infinite; }
.typing i:nth-child(2) { animation-delay: 140ms; } .typing i:nth-child(3) { animation-delay: 280ms; }
@keyframes say-dot { 0%, 60%, 100% { transform: none; opacity: .55; } 30% { transform: translateY(-4px); opacity: 1; } }

/* —— 中间：Mibs，里面上下两个空间 —— 叠在对话卡之上，抛进碗的弹珠从卡片上方飞过。
   两个空间各占一半高度，正好填满中间一列；Mibs 字样是压在面板上沿的小胶囊，不再单独占一行 */
.say__mibs { position: relative; z-index: 2; display: grid; grid-template-rows: 1fr 1fr; gap: 10px; padding: 22px 10px 10px;
  border-radius: var(--r-2xl); border: 1px solid var(--border); background: var(--bg-2); box-shadow: inset 0 1px 0 #fff;
  background-image: radial-gradient(240px circle at 50% 55%, rgba(244,185,143,.14), rgba(166,203,242,.08) 50%, transparent 72%); }
.say__brand { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px;
  border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-1); color: var(--text-1); white-space: nowrap; }
.say__brand b { font-size: 14px; font-weight: 660; letter-spacing: -0.02em; }

/* 一个空间：名字、能用它的 agent（头像）、条数，下面一只宽碗。和产品「设置 · 空间」那一行同一套信息 */
.space { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 8px; min-height: 0;
  padding: 11px 12px 8px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
/* 正在接弹珠的那个空间盖过另一个：弹珠飞过别的空间时不会从它背后穿过去 */
.space.is-active { z-index: 2; }
.space > * { transition: opacity 460ms var(--ease-out); }
.space__name { grid-area: 1 / 1; font-size: 14.5px; font-weight: 640; letter-spacing: -0.01em; line-height: 1.3; white-space: nowrap; transition: color 300ms var(--ease-out), opacity 460ms var(--ease-out); }
.space__count { grid-area: 2 / 1; justify-self: start; white-space: nowrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1.5; }
.space__name { transform-origin: 0 60%; }
.space.is-hot .space__name { animation: space-pop 620ms var(--ease-out); }
@keyframes space-pop { 25% { transform: scale(1.1); } 100% { transform: none; } }
/* 头像叠成一排，每个垫一圈白底隔开 */
.space__crew { grid-area: 1 / 2 / 3 / 3; align-self: center; display: flex; align-items: center; padding-left: 4px; }
.crew { position: relative; flex: none; width: 21px; height: 21px; padding: 1.5px; border-radius: 50%; background: var(--surface);
  transition: transform 520ms var(--ease-spring); }
.crew + .crew { margin-left: -6px; }
.crew svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* 查一查的那位：在它能用的空间里被圈出来，往上提一点 */
.crew::after { content: ''; position: absolute; inset: -1.5px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--c); opacity: 0; transition: opacity 300ms var(--ease-out); }
.crew.is-me { z-index: 1; transform: translateY(-2px) scale(1.12); }
.crew.is-me::after { opacity: 1; }
/* 它能用的空间亮一圈（颜色跟它走）；圈是伪元素，只动透明度 */
.space::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 460ms var(--ease-out);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--c, #888) 50%, transparent), 0 8px 22px -8px color-mix(in oklab, var(--c, #888) 55%, transparent); }
.space.is-open::after { opacity: 1; }
/* 它看不到的空间：内容压暗，正中一枚小锁「某某看不到」 */
.space.is-locked > :not(.space__lock) { opacity: 0.28; }
.space__lock { grid-area: 3 / 1 / 4 / 3; align-self: center; justify-self: center; z-index: 1; display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 4px 11px 5px 9px; border-radius: var(--r-full); background: var(--ink); color: #EEECE7; font-size: 12px; font-weight: 560; line-height: 1.25; white-space: nowrap;
  box-shadow: var(--shadow-2); opacity: 0; transform: translateY(6px) scale(0.94); transition: opacity 320ms var(--ease-out), transform 560ms var(--ease-spring); }
.space__lock svg { flex: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.space.is-locked .space__lock { opacity: 1; transform: none; }

/* 碗（js/bowls.js）：一个空间一只宽碗，贴在空间底部 */
.bowl { grid-area: 3 / 1 / 4 / 3; align-self: end; justify-self: center; position: relative; width: 92%; aspect-ratio: 2.3; margin-top: 6px;
  transform-origin: 50% 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bowl:active { transform: scale(.97); }
.bowl__back, .bowl__front { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bowl__back { filter: drop-shadow(0 10px 10px rgba(20,18,15,.06)); }
.bowl__marbles { position: absolute; inset: 0; }
.slot { position: absolute; display: block; width: var(--s); height: var(--s); transition: transform 520ms var(--ease-spring); transition-delay: calc(var(--k) * 28ms); }
.slot > .mb { --s: inherit; left: 0; top: 0; transition: box-shadow 400ms var(--ease-out); }
.slot.is-glow > .mb { box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 22%, transparent), 0 0 14px var(--c), inset 0 -1px 3px rgba(0,0,0,.16); }
.flyer { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; box-shadow: 0 8px 12px -4px rgba(20,18,15,.3), inset 0 -1px 3px rgba(0,0,0,.16); }
@media (hover: hover) and (pointer: fine) {
  .bowl:hover .slot { transform: translateY(-4px); }
}

/* 减弱动效：直接是结尾画面，转圈和打字都不动 */
@media (prefers-reduced-motion: reduce) {
  .tool__spin, .typing i { animation: none; }
  .chat, .msg, .tool, .found, .row__t, .row__by, .say__line, .space > *, .space::after, .space__lock, .crew, .crew::after { transition: none; }
}

/* 4K：扩大整组舞台，正文行长不变 */
@media (min-width: 1920px) and (min-height: 1000px) {
  .say__stage { width: min(1380px, calc(100% - 2 * var(--pad-x))); grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); gap: 24px; margin-top: 52px; }
  .say__saves { gap: 14px; }
  .chat--mini { padding: 15px 18px 16px; gap: 11px; }
  .chat--check { padding: 18px 20px; }
  .msg, .row__t { font-size: 18px; }
  .chat__name { font-size: 17px; } .chat--check .chat__name { font-size: 20px; }
  .tool { font-size: 15px; min-height: 34px; border-radius: 17px; }
  .say .section-head h2 { font-size: 80px; }
  .chat__tag, .row__by, .chat__can, .space__lock { font-size: 14px; }
  .space__name, .say__brand b { font-size: 17px; }
  .space__count { font-size: 13.5px; }
  .crew { width: 26px; height: 26px; }
  .row { min-height: 48px; }
  .composer { height: 48px; font-size: 15.5px; }
  .say__mibs { padding: 26px 12px 12px; gap: 12px; }
  .space { padding: 14px 15px 10px; }
}

/* 平板与手机：两个空间并排放在上面，两栏对话卡叠在同一格，按幕交叉淡入淡出 */
@media (max-width: 960px) {
  .say__stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'mibs' 'chat'; gap: 26px; max-width: 560px; margin-top: 44px; }
  .say__mibs { grid-area: mibs; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; gap: 8px; padding: 20px 8px 8px; }
  .space { padding: 10px 10px 6px; }
  .say__saves, .say__check { grid-area: chat; transition: opacity 420ms var(--ease-in-out), visibility 0s linear 420ms; }
  .say[data-act='check'] .say__saves, .say[data-act='save'] .say__check { opacity: 0; visibility: hidden; }
  .say[data-act='check'] .say__check, .say[data-act='save'] .say__saves { transition-delay: 0s; }
  /* 减弱动效的静态终态：两栏卡上下排开都看得到 */
  .is-still { grid-template-areas: 'mibs' 'saves' 'check'; }
  .is-still .say__saves { grid-area: saves; } .is-still .say__check { grid-area: check; }
}
@media (max-width: 520px) {
  .chat--mini { padding: 11px 12px 12px; }
  /* 手机上半宽的空间放不下一整行「Hidden from Hermes」：允许折成两行，居中 */
  .space__lock { white-space: normal; word-break: keep-all; text-align: center; gap: 5px; padding: 4px 9px 5px 8px; font-size: 11.5px; }
  .chat--check { padding: 13px 13px 14px; }
  .chat__can { gap: 5px; }
}
/* 很窄的屏幕：空间更紧，碗占满宽度；两句口头禅各占一行（32px 下中文「往 Mibs 里记一下」会在 320 宽断成两截） */
@media (max-width: 360px) {
  .say__mibs { padding: 19px 6px 6px; gap: 6px; }
  .space { padding: 9px 8px 5px; column-gap: 4px; }
  /* 头像只占第一行，条数让出整行宽度，英文条数才不会被挤断 */
  .space__crew { grid-area: 1 / 2; }
  .space__count { grid-area: 2 / 1 / 3 / 3; }
  /* 查找卡头部放不下「名字 + 新对话 + 能用 某空间」：让出「新对话」，留住「能用哪个空间」 */
  .chat--check .chat__tag { display: none; }
  .space__name { font-size: 13.5px; }
  .crew { width: 19px; height: 19px; }
  .bowl { width: 100%; }
  .say .section-head h2 { font-size: 26px; }
}