:root { --bg:#f5f6f7; --card:#fff; --text:#1f2329; --sub:#555b63; --line:#d9dce0; --accent:#3370ff; --accent-bg:#eef3ff; --ok:#1a7f37; --ok-bg:#e8f6ec; --ng:#c62828; --ng-bg:#fdecec; }
* { box-sizing:border-box; }
html { font-size:20px; }
body { margin:0; background:var(--bg); color:var(--text); line-height:1.7;
  font-family:-apple-system,"Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif; }
header { background:var(--card); border-bottom:1px solid var(--line); padding:12px 20px; display:flex; align-items:center; gap:12px; }
header b { font-size:1.1rem; }
header .tag { font-size:.7rem; color:var(--sub); border:1px solid var(--line); border-radius:4px; padding:0 6px; }
header .spacer { flex:1; }
.btn { display:inline-block; border:2px solid var(--line); background:var(--card); color:var(--text); border-radius:12px;
  padding:14px 22px; font:inherit; font-size:1rem; cursor:pointer; text-decoration:none; text-align:center; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
.btn.ok { background:var(--ok); border-color:var(--ok); color:#fff; }
.btn.big { display:block; width:100%; padding:18px 22px; font-size:1.1rem; margin:10px 0; }
.btn:disabled { opacity:.5; cursor:default; }
.muted { color:var(--sub); font-size:.85rem; }
.hidden { display:none !important; }
.ans-ok { background:var(--ok-bg); border:2px solid var(--ok); }
.ans-ng { background:var(--ng-bg); border:2px solid var(--ng); }
/* chat */
.msgs { display:flex; flex-direction:column; gap:12px; overflow-y:auto; padding:16px; }
.msg { max-width:85%; padding:12px 16px; border-radius:16px; white-space:pre-wrap; word-break:break-word; }
.msg.ai { align-self:flex-start; background:var(--card); border:1px solid var(--line); }
.msg.me { align-self:flex-end; background:var(--accent); color:#fff; }
.msg .who { display:block; font-size:.7rem; color:var(--sub); margin-bottom:2px; }
.msg.me .who { color:#dfe7ff; }
.msg .btn { margin-top:8px; }
.typing { font-size:.8rem; color:var(--sub); padding:0 16px 6px; min-height:1.6em; }
.composer { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:var(--card); }
.composer textarea { flex:1; min-width:0; border:2px solid var(--line); border-radius:12px; padding:12px; font:inherit; font-size:1rem; resize:none; height:3.4em; }
.quick { display:flex; gap:8px; flex-wrap:wrap; padding:8px 12px 0; background:var(--card); }
.quick .btn { padding:8px 16px; font-size:.9rem; }
/* Lark 画面图 */
.shot { margin:10px 0 16px; white-space:normal; }
.shot .zoom { display:block; width:100%; padding:0; border:2px solid var(--line); border-radius:10px; background:#fff; cursor:zoom-in; overflow:hidden; }
.shot img { display:block; width:100%; height:auto; max-height:420px; object-fit:contain; }
.shot figcaption { font-size:.85rem; color:var(--text); margin-top:4px; }
.shot .dev { display:inline-block; font-size:.7rem; color:var(--sub); border:1px solid var(--line); border-radius:4px; padding:0 6px; margin-right:6px; }
.shot-ref { font-size:.85rem; color:var(--sub); margin:4px 0 12px; }
.credit { font-size:.7rem; color:var(--sub); margin:8px 0 0; }
.btn.video { display:block; margin:12px 0; text-align:left; }
.btn.video span { display:block; font-size:.75rem; color:var(--sub); font-weight:400; }
.msg .shot { max-width:480px; }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; cursor:zoom-out; }
.lightbox img { max-width:100%; max-height:88vh; background:#fff; border-radius:8px; }
.lightbox p { color:#fff; font-size:.85rem; margin:8px 0 0; }