/* ========================================================================
   ③ 关于 trimo
   左边文字介绍 + 三个特点，右边是手机聊天示意图（纯 CSS 绘制）。
   ======================================================================== */

/* ---- 左右两栏布局 + 文字 ---- */
.about-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(48px,6vw,100px);align-items:center}
.about-text{display:flex;flex-direction:column;gap:26px}
.about-text .h2{margin-top:0}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:14px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.facts dt{font:300 clamp(22px,2vw,28px)/1.2 var(--f-sans)}
.facts dd{margin:6px 0 0;font-size:14px;color:var(--mute);line-height:1.5}

/* ---- 手机示意图：外框、屏幕、刘海 ---- */
.phone-stage{position:relative;display:grid;place-items:center;padding-block:24px}
.phone-stage .o1{width:128px;height:128px;left:0;top:6%;animation:float 7s ease-in-out infinite}
.phone-stage .o2{width:70px;height:70px;right:4%;bottom:12%;animation:float 6s ease-in-out -2s infinite}
.phone-stage .o3{width:34px;height:34px;right:14%;top:4%;animation:float 5s ease-in-out -1s infinite}
.phone{position:relative;z-index:1;width:min(300px,78vw);aspect-ratio:9/19;border-radius:46px;padding:10px;background:linear-gradient(160deg,#3b2c57,#140d22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 50px 90px -30px rgba(0,0,0,.75),0 0 140px -30px rgba(242,164,182,.5)}
.screen{height:100%;display:flex;flex-direction:column;border-radius:37px;overflow:hidden;background:linear-gradient(180deg,#2c2046 0%,#1a1230 100%);font-size:13px;line-height:1.5}
.notch{width:92px;height:24px;margin:8px auto 0;border-radius:14px;background:#0b0714;flex:none}

/* ---- 聊天头部（头像样式在 components.css） ---- */
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.chat-head b{display:block;font-weight:500;font-size:14px}
.chat-head small{display:flex;align-items:center;gap:6px;color:var(--sage);font-size:11.5px}
.chat-head small::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---- 聊天内容区（气泡样式在 components.css） ---- */
.chat-body{flex:1;display:flex;flex-direction:column;gap:9px;padding:14px;overflow:hidden}
.stamp{align-self:center;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}

/* ---- 底部输入栏：小游戏 / 输入框 / 发送 ---- */
.chat-foot{display:flex;align-items:center;gap:8px;padding:10px 12px 18px}
.chip{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 10px;border-radius:17px;border:1px solid var(--line-2);font-size:12px;color:var(--peach);white-space:nowrap}
.chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.input{flex:1;min-width:0;height:34px;display:flex;align-items:center;padding:0 12px;border-radius:17px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--dim);white-space:nowrap;overflow:hidden}
.send{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--rose);color:var(--night)}
.send svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- 响应式 ---- */
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}
@media (max-width:560px){.facts{grid-template-columns:1fr;gap:16px}}