*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#F1ECE7;--card:#FCFAF8;--accent:#BD9A94;--text:#544E48;
  --textL:#8B8278;--nav:#EAE2D9;--glow:rgba(189,154,148,0.18);
  --blob1:rgba(201,160,121,0.16);--blob2:rgba(143,174,150,0.12);
  --blob3:rgba(227,206,151,0.14);--blob4:rgba(189,154,148,0.12);
  --glass:1;--radius:20px;
}
body::before{
  content:'';position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%,var(--blob1) 0%,transparent 70%),
    radial-gradient(ellipse 50% 60% at 85% 30%,var(--blob2) 0%,transparent 70%),
    radial-gradient(ellipse 55% 45% at 40% 75%,var(--blob3) 0%,transparent 70%),
    radial-gradient(ellipse 45% 50% at 75% 85%,var(--blob4) 0%,transparent 70%);
  filter:blur(60px);
}
body{
  font-family:'Cormorant Garamond','Georgia',var(--cjk-serif),serif;
  color:var(--text);
  background:linear-gradient(160deg,var(--bg) 0%,var(--card) 50%,var(--bg) 100%);
  min-height:100vh;max-width:430px;overflow-x:hidden;
  margin:0 auto;padding-bottom:80px;
  -webkit-font-smoothing:antialiased;
}

/* Pages & transitions */
.page{display:none;padding:0 20px;opacity:0;transition:opacity 0.25s ease}
.page.active{display:block;opacity:1}

/* Cards */
.card{
  background:color-mix(in srgb,var(--card) 38%,transparent);
  backdrop-filter:blur(calc(var(--glass)*20px));
  -webkit-backdrop-filter:blur(calc(var(--glass)*20px));
  border-radius:var(--radius);
  border:1px solid color-mix(in srgb,var(--accent) 10%,transparent);
  padding:16px 20px;margin-bottom:12px;
  box-shadow:0 2px 12px color-mix(in srgb,var(--accent) 4%,transparent);
}
details.fold{margin-bottom:12px}
details.fold>summary{display:flex;align-items:center;background:color-mix(in srgb,var(--card) 38%,transparent);backdrop-filter:blur(calc(var(--glass)*20px));-webkit-backdrop-filter:blur(calc(var(--glass)*20px));border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--accent) 10%,transparent);padding:16px 20px;cursor:pointer;font-size:13px;font-family:var(--ui-font);color:var(--text);list-style:none;user-select:none;-webkit-user-select:none}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary .fold-hint{font-size:10px;color:var(--textL);margin-left:auto}
details.fold>summary .fold-arrow{color:var(--textL);font-size:11px;transition:transform .2s;margin-left:8px}
details.fold[open]>summary{margin-bottom:12px}
details.fold[open]>summary .fold-arrow{transform:rotate(90deg)}
details.fold>.fold-body{padding-left:10px;border-left:2px solid color-mix(in srgb,var(--accent) 14%,transparent)}

/* 自定义背景时的可读性（不用逐气泡blur——iOS大列表会崩） */
body.has-bg .date-sep{background:color-mix(in srgb,var(--bg) 75%,transparent);border-radius:10px;padding:2px 10px}
body.has-bg .bubble.ian{background:color-mix(in srgb,var(--card) calc(var(--bubop,0.92)*100%),transparent);backdrop-filter:none;-webkit-backdrop-filter:none}
body.has-bg .chat-header{background:transparent}

/* 内心页 · 舒展版 */
#p-inner .dim{padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 7%,transparent)}
#p-inner .dim .l1{display:flex;align-items:center;gap:10px}
#p-inner .dim .name{font-size:13px;font-family:var(--ui-font);color:var(--text);width:44px;flex-shrink:0}
#p-inner .dim .bar{flex:1;height:6px;border-radius:3px;background:color-mix(in srgb,var(--accent) 10%,transparent);overflow:hidden}
#p-inner .dim .fill{height:100%;border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),var(--accent));transition:width .8s ease}
#p-inner .dim .val{font-size:13px;font-family:var(--ui-font);color:var(--text);width:30px;text-align:right;flex-shrink:0}
#p-inner .dim .l2{font-size:10px;font-family:var(--ui-font);color:var(--textL);margin-top:5px;padding-left:54px}
#p-inner .dim .bar.v2{position:relative;overflow:visible}
#p-inner .dim .bar.v2 .fill{position:absolute;left:0;top:0;bottom:0}
#p-inner .dim .bar.v2 .home{position:absolute;top:-3px;width:2px;height:12px;border-radius:1px;background:var(--text);opacity:.45;transform:translateX(-1px)}
#p-inner .dim .val.v2{width:36px;font-variant-numeric:tabular-nums}
#p-inner .emo-note{font-size:11px;font-family:var(--ui-font);color:var(--textL);line-height:1.6}
#p-inner .emo-chip{display:inline-block;margin:3px 6px 0 0;padding:3px 9px;border-radius:10px;font-size:11px;font-family:var(--ui-font);color:var(--text);background:color-mix(in srgb,var(--accent) 12%,transparent)}
#p-inner .emo-why{font-size:11px;font-family:var(--ui-font);color:var(--textL);padding:3px 0}
#p-inner .emo-why b{font-weight:600;color:var(--text)}
#p-inner .group-tag{font-size:10px;font-family:var(--ui-font);color:var(--textL);letter-spacing:1px;margin:6px 0 2px}
#p-inner .quad{position:relative;height:170px;border-radius:12px;background:color-mix(in srgb,var(--accent) 5%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 10%,transparent)}
#p-inner .quad:before{content:'';position:absolute;left:50%;top:8px;bottom:8px;width:1px;background:color-mix(in srgb,var(--accent) 14%,transparent)}
#p-inner .quad:after{content:'';position:absolute;top:50%;left:8px;right:8px;height:1px;background:color-mix(in srgb,var(--accent) 14%,transparent)}
#p-inner .corner{position:absolute;font-size:9px;font-family:var(--ui-font);color:var(--textL);padding:8px 10px}
#p-inner .qdot{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent);transition:left .8s ease,top .8s ease}

/* Drawer 侧边抽屉 */
#drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .3s;z-index:98}
#drawer-overlay.show{opacity:1;pointer-events:auto}
#drawer{position:fixed;top:0;left:0;bottom:0;width:min(78vw,300px);z-index:99;
  transform:translateX(-104%);transition:transform .32s cubic-bezier(0.32,0.72,0,1);
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-right:1px solid color-mix(in srgb,var(--accent) 12%,transparent);
  display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 28px) 12px 24px}
#drawer.open{transform:translateX(0)}
.drawer-head{display:flex;gap:12px;align-items:center;padding:6px 12px 22px}
.drawer-item{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border:none;background:transparent;border-radius:12px;font-size:14px;font-family:var(--ui-font);color:var(--text);cursor:pointer;text-align:left}
.drawer-item.active{background:color-mix(in srgb,var(--accent) 14%,transparent);font-weight:600}
.drawer-item svg{flex-shrink:0;opacity:.65}
#drawer-btn{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:12px;z-index:50;
  width:38px;height:38px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bg) 65%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--text);box-shadow:0 1px 8px rgba(0,0,0,.06);cursor:pointer}
body.tabs-mode #drawer-btn,body.tabs-mode #drawer,body.tabs-mode #drawer-overlay{display:none}
body:not(.tabs-mode) nav{display:none}
body:not(.tabs-mode) .chat-input-area{bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
body:not(.tabs-mode) #chat-list{max-height:calc(100vh - 110px)}
/* 附件合并面板 */
#attach-menu{position:absolute;bottom:58px;left:0;display:none;flex-direction:column;gap:2px;padding:6px;border-radius:14px;
  background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:0 6px 24px rgba(0,0,0,.08);z-index:30}
#attach-menu.show{display:flex}
#attach-menu button{display:flex;align-items:center;gap:10px;border:none;background:transparent;padding:10px 18px 10px 12px;border-radius:10px;font-size:13px;font-family:var(--ui-font);color:var(--text);cursor:pointer}
#attach-menu button:active{background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* Nav */
nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:430px;
  background:color-mix(in srgb,var(--nav) 55%,transparent);
  backdrop-filter:blur(calc(var(--glass)*24px));
  -webkit-backdrop-filter:blur(calc(var(--glass)*24px));
  display:flex;justify-content:space-around;align-items:center;
  padding:8px 0 env(safe-area-inset-bottom,20px);
  border-top:1px solid color-mix(in srgb,var(--accent) 8%,transparent);
  z-index:100;
}
nav button{
  background:transparent;border:none;border-radius:16px;
  padding:6px 20px;display:flex;flex-direction:column;
  align-items:center;gap:2px;cursor:pointer;transition:all 0.2s;
}
nav button.active{background:color-mix(in srgb,var(--accent) 13%,transparent)}
nav button .icon{font-size:22px;display:flex;align-items:center;justify-content:center;color:var(--textL)}
nav button .label{font-size:10px;font-family:var(--ui-font);color:var(--textL)}
nav button.active .label{color:var(--text);font-weight:600}
nav button.active .icon{color:var(--text)}

/* Inputs */
input[type=text],input[type=password],textarea{
  border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);
  border-radius:12px;padding:10px 14px;font-size:14px;
  font-family:'Cormorant Garamond','Georgia',var(--cjk-serif),serif;
  background:color-mix(in srgb,var(--bg) 60%,transparent);
  color:var(--text);outline:none;width:100%;transition:border-color 0.2s;
}
input:focus,textarea:focus{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
textarea{resize:vertical;min-height:80px}
.btn{
  padding:10px 20px;background:var(--accent);color:#fff;border:none;
  border-radius:20px;font-size:14px;font-family:var(--ui-font);cursor:pointer;
  transition:all 0.2s;
}
.btn:disabled{opacity:0.4;cursor:default}
.btn-ghost{
  padding:6px 14px;border-radius:12px;font-size:12px;
  font-family:var(--ui-font);cursor:pointer;
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  background:transparent;color:var(--textL);transition:all 0.2s;
}
.btn-ghost:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--text)}
.btn-ghost.del:hover{background:#ffe0e0;color:#c44}

/* Tags/filters */
.tag{
  padding:5px 12px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);
  background:transparent;color:var(--textL);
  font-size:12px;font-family:var(--ui-font);cursor:pointer;transition:all 0.2s;
}
.tag.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--text)}

/* Toggle */
.toggle{width:48px;height:26px;border-radius:13px;border:none;position:relative;cursor:pointer;transition:all 0.3s}
.toggle .knob{width:20px;height:20px;border-radius:50%;background:#fff;position:absolute;top:3px;transition:all 0.3s;box-shadow:0 1px 3px rgba(0,0,0,0.12)}
.toggle.on{background:var(--accent)}.toggle.on .knob{left:25px}
.toggle.off{background:color-mix(in srgb,var(--accent) 25%,transparent)}.toggle.off .knob{left:3px}

/* Sub-tabs */
.sub-tabs{display:flex;gap:0;border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,transparent);margin-bottom:16px}
.sub-tab{
  flex:1;padding:10px 0;font-size:13px;font-family:var(--ui-font);
  border:none;background:none;color:var(--textL);cursor:pointer;
  border-bottom:2px solid transparent;transition:all 0.2s;
}
.sub-tab.active{color:var(--text);font-weight:600;border-bottom-color:var(--accent)}
.core-fact-review-list{display:grid;gap:10px}
.patrol-card{padding:14px;margin-bottom:10px}
.patrol-card[hidden]{display:none}
.patrol-card.patrol-alert{border-color:color-mix(in srgb,#c0504d 38%,transparent);background:color-mix(in srgb,#c0504d 6%,var(--card))}
.recall-review-view{position:fixed;inset:0;z-index:9300;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch}
.recall-review-view[hidden]{display:none}
.recall-review-view .diary-paper-close{background:var(--card);color:var(--text);box-shadow:0 4px 14px color-mix(in srgb,var(--text) 12%,transparent)}
.recall-review-inner{max-width:560px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 60px) 16px 40px}
.patrol-job-row{display:flex;gap:9px;align-items:flex-start}
.patrol-job-dot{flex:none;width:7px;height:7px;margin-top:7px;border-radius:50%;background:#c0504d}
.core-fact-review-card{padding:14px;border:1px solid color-mix(in srgb,var(--accent) 12%,transparent)}
.core-fact-review-card.conflict{border-color:color-mix(in srgb,#d97706 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,#d97706 12%,transparent)}
.core-fact-review-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--textL);font:10px var(--ui-font)}
.core-fact-review-value{margin:9px 0;font:14px/1.7 var(--ui-font);color:var(--text);word-break:break-word}
.core-fact-review-edit{display:none;width:100%;min-height:54px;margin:8px 0;padding:8px;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);border-radius:10px;background:transparent;color:var(--text);font:13px/1.6 var(--ui-font)}
.core-fact-review-card.editing .core-fact-review-edit{display:block}
.core-fact-review-actions{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.core-fact-badge{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;font:10px/1 var(--ui-font)}
@media(max-width:520px){.core-fact-review-actions button{flex:1;min-width:78px}.core-fact-review-card{padding:12px}}

/* Chat */
.chat-header{
  position:sticky;top:0;z-index:10;padding:12px 0 8px;
  text-align:center;
  background:linear-gradient(180deg,var(--bg) 60%,transparent);
}
.chat-header h2{font-size:17px;font-family:var(--ui-font);font-weight:600;color:var(--text);letter-spacing:0.5px}
#chat-list{overflow-y:auto;max-height:calc(100vh - 180px);padding-bottom:100px;scroll-behavior:auto}
.chat-row{display:flex;gap:8px;margin-bottom:8px;align-items:flex-start}
.chat-row.right{justify-content:flex-end}
.chat-avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;object-fit:cover}
.bubble{
  max-width:78%;padding:10px 14px;margin-bottom:0;
  border:none;
}
.bubble.ian{
  border-radius:18px 18px 18px 4px;
  background:color-mix(in srgb,var(--card) calc(var(--bubop,0.65)*100%),transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.bubble.evie{
  border-radius:18px 18px 4px 18px;
  background:color-mix(in srgb,var(--accent) calc(var(--bubop,0.65)*28%),transparent);
  margin-left:auto;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.bubble .meta{font-size:10px;font-family:var(--ui-font);color:var(--textL);margin-bottom:3px;opacity:0.7}
.bubble .msg{font-size:14px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.chat-input-area{
  position:fixed;bottom:72px;left:50%;transform:translateX(-50%);
  width:calc(100% - 32px);max-width:398px;z-index:20;
  padding:8px 0;
}
.chat-input-row{
  display:flex;gap:8px;align-items:flex-end;
  background:color-mix(in srgb,var(--card) 50%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:22px;padding:4px 4px 4px 14px;
  border:1px solid color-mix(in srgb,var(--accent) 10%,transparent);
}
.chat-input-row textarea{
  flex:1;border:none;background:transparent;padding:8px 0;
  font-size:14px;line-height:1.5;resize:none;overflow-y:auto;max-height:120px;-webkit-overflow-scrolling:touch;
  font-family:'Cormorant Garamond','Georgia',var(--cjk-serif),serif;
  color:var(--text);outline:none;
}
.send-btn{
  width:34px;height:34px;border-radius:50%;background:var(--accent);
  color:#fff;border:none;font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:opacity 0.2s;
}
.send-btn:disabled{opacity:0.3}
.img-btn{
  width:34px;height:34px;border-radius:50%;background:transparent;
  color:var(--textL);border:none;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* Date separator */
.date-sep{
  text-align:center;margin:14px 0 8px;
  font-size:11px;font-family:var(--ui-font);color:var(--textL);opacity:0.6;
}

/* Think blocks */
/* === 原生手感包 === */
*{-webkit-tap-highlight-color:transparent}
button,a,textarea,input,.card,.bubble{touch-action:manipulation}
#chat-list{overscroll-behavior:contain}
button:active,.btn:active,.btn-ghost:active{transform:scale(0.96)}
.card:active{transform:scale(0.985)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-row.new-msg{animation:msgIn 0.28s cubic-bezier(0.2,0.8,0.2,1)}
@keyframes ccBlink{0%,100%{opacity:0.15}50%{opacity:0.9}}
.cc-streaming .msg::after{content:'\258d';animation:ccBlink 1.1s ease-in-out infinite;color:var(--accent);margin-left:1px}
/* Slice 3: in segment-streaming mode only the newest (last) live bubble carries the caret. */
.cc-streaming .chat-bubbles .bubble:not(:last-child) .msg::after{content:none;animation:none}
@keyframes pageIn{from{transform:translateY(6px)}to{transform:none}}
.page.active{animation:pageIn 0.25s ease}
.works-link{display:inline-flex;align-items:center;gap:6px;margin:4px 0;padding:8px 12px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text);text-decoration:none;font-size:13px;font-family:var(--ui-font)}
.works-link:active{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.works-actions{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}
.works-preview-overlay{position:fixed;inset:0;z-index:8000;background:rgba(0,0,0,.32);display:none;align-items:flex-end;justify-content:center}
.works-preview-overlay.show{display:flex}
.works-preview-panel{width:min(100%,860px);height:min(86vh,760px);background:var(--card);border-radius:22px 22px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.22);overflow:hidden;display:flex;flex-direction:column}
.works-preview-head{height:48px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--line);font-family:var(--ui-font)}
.works-preview-title{font-size:13px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.works-preview-btn{border:none;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--text);border-radius:999px;padding:7px 11px;font-size:12px;text-decoration:none;white-space:nowrap}
.works-preview-close{border:none;background:transparent;color:var(--textL);font-size:22px;line-height:1;padding:4px 6px}
.works-preview-frame{border:0;width:100%;flex:1;background:#fff}
@media (min-width:760px){.works-preview-overlay{align-items:center}.works-preview-panel{border-radius:22px;height:min(84vh,760px)}}
.cc-tools{display:flex;flex-direction:column;gap:2px;margin:2px 0}
.mem-relay{display:flex;flex-direction:column;gap:1px;margin:3px 4px 2px;font:11px/1.5 var(--ui-font);color:var(--textL)}
.mem-relay-line{letter-spacing:.02em}
.cc-tools:empty{display:none}
.cc-tool-strip{display:flex;align-items:flex-start;gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--textL);padding:2px 0;cursor:pointer;min-width:0}
.cc-tool-strip .cc-tool-dot{color:#2ea043;font-size:9px;line-height:1.7;flex-shrink:0}
.cc-tool-strip .cc-tool-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cc-tool-strip.open .cc-tool-text{white-space:normal;word-break:break-all}
.think-toggle{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-family:var(--ui-font);color:var(--textL);
  cursor:pointer;user-select:none;margin-bottom:6px;
  padding:4px 0;opacity:0.6;transition:opacity 0.2s;
}
.think-toggle:hover{opacity:0.9}
.think-toggle .think-icon{width:14px;height:14px;flex-shrink:0;opacity:0.5}
.think-toggle .think-summary{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.think-toggle .think-arrow{font-size:10px;flex-shrink:0;opacity:0.4;transition:transform 0.2s}

/* Think bottom sheet */
.think-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,0.3);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity 0.2s;pointer-events:none;
}
.think-overlay.show{opacity:1;pointer-events:auto}
.think-sheet{
  width:100%;max-width:430px;max-height:60vh;
  background:var(--bg);border-radius:20px 20px 0 0;
  padding:0 20px env(safe-area-inset-bottom,20px);
  transform:translateY(100%);transition:transform 0.3s ease;
  overflow-y:auto;
}
.think-overlay.show .think-sheet{transform:translateY(0)}
.think-sheet-handle{width:36px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--accent) 25%,transparent);margin:10px auto 0}
.think-sheet-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0 12px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 8%,transparent);
  margin-bottom:12px;
}
.think-sheet-title{font-size:15px;font-family:var(--ui-font);font-weight:600;color:var(--text)}
.think-sheet-close{
  width:28px;height:28px;border-radius:50%;border:none;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--textL);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.think-sheet-body{
  font-size:13px;line-height:1.8;color:var(--text);
  white-space:pre-wrap;word-break:break-word;
  padding-bottom:20px;
}

/* Letter/diary accordion */
.letter-header{cursor:pointer;user-select:none}
.letter-body{max-height:0;overflow:hidden;transition:max-height 0.3s ease}
.letter-body.open{max-height:99999px;overflow:visible}
.letter-preview{font-size:13px;color:var(--textL);font-style:italic;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.letter-body.open+.letter-preview{display:none}
.letter-chevron{transition:transform 0.3s;display:inline-block;font-size:11px;color:var(--textL)}
.letter-chevron.open{transform:rotate(90deg)}

/* Moments */
.moment-card{position:relative}
.moment-card .moment-img{width:100%;border-radius:12px;margin:8px 0}
.moment-card .moment-text{font-size:14px;line-height:1.8;white-space:pre-wrap}
.moment-card .moment-footer{display:flex;gap:16px;margin-top:8px;font-size:12px;font-family:var(--ui-font);color:var(--textL)}
.moment-card .moment-footer button{background:none;border:none;color:var(--textL);cursor:pointer;font-size:12px;font-family:var(--ui-font)}
.moment-route .shell-page-head{display:none}.moment-route{padding-left:0;padding-right:0}.moment-route #moment-list{padding:4px 20px 90px}
.moment-hero{position:relative;height:285px;margin-bottom:52px;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 24%,var(--bg)),color-mix(in srgb,var(--text) 12%,var(--card)));background-size:cover;background-position:center;border-radius:0 0 26px 26px}
.moment-cover-btn,.moment-compose-btn{position:absolute;top:calc(env(safe-area-inset-top,0px) + 16px);width:42px;height:42px;border:1px solid rgba(255,255,255,.35);border-radius:15px;background:rgba(20,20,24,.22);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;font-size:20px;cursor:pointer}.moment-cover-btn{right:70px}.moment-compose-btn{right:18px}
.moment-profile{position:absolute;right:22px;bottom:-39px;display:flex;align-items:flex-end;gap:11px;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.35)}.moment-profile-name{padding-bottom:12px;font:600 18px var(--ui-font)}.moment-profile img{width:78px;height:78px;border-radius:20px;object-fit:cover;border:3px solid var(--card);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.moment-compose-menu{position:absolute;z-index:6;right:18px;top:calc(env(safe-area-inset-top,0px) + 66px);display:flex;flex-direction:column;padding:6px;border-radius:15px;background:color-mix(in srgb,var(--card) 92%,transparent);box-shadow:0 14px 35px rgba(0,0,0,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.moment-compose-menu[hidden]{display:none}.moment-compose-menu button{border:0;background:transparent;color:var(--text);padding:11px 16px;text-align:left;font:13px var(--ui-font);border-radius:10px}.moment-compose-menu button:active{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.moment-composer{margin:0 20px 18px;padding:15px!important}.moment-composer[hidden]{display:none!important}
.moment-feed-item{display:grid;grid-template-columns:44px 1fr;gap:11px;padding:18px 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 8%,transparent)}.moment-feed-avatar{width:44px;height:44px;border-radius:13px;object-fit:cover}.moment-feed-name{font:600 14px var(--ui-font);color:var(--text)}.moment-feed-time{font:10px var(--ui-font);color:var(--textL);margin-top:5px}.moment-feed-item .moment-text{font:14px/1.65 var(--ui-font);white-space:pre-wrap;margin-top:6px}.moment-feed-item .moment-img{max-width:100%;max-height:420px;object-fit:cover;border-radius:8px;margin-top:9px}.moment-feed-item .moment-footer{display:flex;gap:14px;margin-top:9px}.moment-feed-item .moment-footer button{border:0;background:transparent;color:var(--textL);font:11px var(--ui-font)}
.comment-list{margin-top:8px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--accent) 8%,transparent)}
.comment-item{font-size:13px;line-height:1.6;margin-bottom:4px}
.comment-item .cname{font-weight:700;color:var(--text)}
.comment-input-row{display:flex;gap:6px;margin-top:6px}
.comment-input-row input{flex:1;border-radius:14px;padding:4px 10px;font-size:12px;border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);background:color-mix(in srgb,var(--bg) 53%,transparent);color:var(--text);outline:none}
.comment-input-row button{padding:4px 10px;border-radius:14px;font-size:11px}

/* Memory badges */
.type-badge{font-size:11px;font-family:var(--ui-font);padding:2px 8px;border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--textL)}
.layer-badge{font-size:10px;font-family:var(--ui-font);padding:2px 7px;border-radius:6px;color:#fff}
.mem-actions{display:flex;gap:6px;margin-top:8px;justify-content:flex-end}

/* State bars */
.state-bar{display:flex;align-items:center;gap:6px}
.state-label{font-size:10px;font-family:var(--ui-font);color:var(--textL);min-width:48px;text-align:right}
.state-track{flex:1;height:3px;background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:2px;overflow:hidden}
.state-fill{height:100%;border-radius:2px;background:var(--text);transition:width 0.8s ease}

/* Theme grid */
.theme-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.theme-dot{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;cursor:pointer}
.theme-circle{width:40px;height:40px;border-radius:50%;transition:all 0.2s;border:2px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.theme-dot.active .theme-circle{border-width:3px;border-color:var(--text)}
.theme-dot .tname{font-size:10px;font-family:var(--ui-font);color:var(--textL)}
.theme-dot.active .tname{color:var(--text);font-weight:600}

/* Toast */
.toast{
  position:fixed;left:50%;top:18px;transform:translateX(-50%);
  background:rgba(0,0,0,.75);color:#fff;padding:8px 18px;
  border-radius:20px;font-size:13px;font-family:var(--ui-font);z-index:9999;
  opacity:0;transition:opacity .25s;pointer-events:none;
}

/* Confirm dialog */
.confirm-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,0.3);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity 0.2s;pointer-events:none;
}
.confirm-overlay.show{opacity:1;pointer-events:auto}
.confirm-box{
  width:100%;max-width:430px;
  background:var(--bg);border-radius:20px 20px 0 0;
  padding:24px 20px env(safe-area-inset-bottom,20px);
  transform:translateY(100%);transition:transform 0.3s ease;
}
.confirm-overlay.show .confirm-box{transform:translateY(0)}
.confirm-msg{font-size:15px;text-align:center;margin-bottom:20px;line-height:1.6}
.confirm-btns{display:flex;gap:10px}
.confirm-btns button{flex:1;padding:12px;border-radius:14px;font-size:14px;font-family:var(--ui-font);cursor:pointer;border:none}
.confirm-cancel{background:color-mix(in srgb,var(--card) 60%,transparent);color:var(--text)}
.confirm-ok{background:var(--accent);color:#fff}

/* Section headers */
.section-label{font-size:11px;font-family:var(--ui-font);letter-spacing:2px;color:var(--textL);margin-bottom:10px}

/* Empty state */
.empty{text-align:center;color:var(--textL);font-size:13px;margin-top:30px;font-style:italic}
.date-small{font-size:10px;font-family:var(--ui-font);color:var(--textL);opacity:0.5}

/* Scrollbar */
::-webkit-scrollbar{width:0;height:0}

/* Settings row */
.setting-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 6%,transparent);
}
.setting-row:last-child{border-bottom:none}
.setting-title{font-size:14px;font-family:var(--ui-font)}
.setting-sub{font-size:11px;font-family:var(--ui-font);color:var(--textL);margin-top:2px}
.ai-controls{display:block}
.ai-picker{width:min(228px,56vw);font-family:var(--ui-font)}
.ai-picker>summary{list-style:none;cursor:pointer;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);border-radius:12px;padding:7px 10px;font-size:12px;color:var(--text);background:color-mix(in srgb,var(--bg) 45%,transparent);text-align:right;user-select:none}
.ai-picker>summary::-webkit-details-marker{display:none}
.ai-picker>summary::after{content:' ▾';color:var(--textL);font-size:10px}
.ai-picker[open]>summary::after{content:' ▴'}
.ai-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:7px}
.ai-choice{padding:7px 8px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);background:transparent;color:var(--textL);font:11px var(--ui-font);cursor:pointer}
.ai-choice.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text)}
.ai-choice:disabled{opacity:.35;cursor:not-allowed}
.ai-note{font-size:10px;color:var(--textL);font-family:var(--ui-font);margin-top:6px;text-align:right}
@media(max-width:430px){.ai-picker{width:min(210px,58vw)}.ai-options{grid-template-columns:1fr}}

/* Grid links */
.grid-link{
  text-align:center;padding:18px 6px;border-radius:16px;border:none;
  background:color-mix(in srgb,var(--card) 35%,transparent);
  backdrop-filter:blur(8px);cursor:pointer;transition:all 0.2s;
}
.grid-link:active{transform:scale(0.97)}
.grid-link .gl-icon{font-size:16px;color:var(--textL)}
.grid-link .gl-text{font-size:11px;font-family:var(--ui-font);color:var(--textL);margin-top:6px}


/* Calendar heatmap */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-nav button{background:none;border:none;color:var(--textL);font-size:18px;cursor:pointer;padding:4px 8px}
.cal-nav .cal-title{font-size:14px;font-family:var(--ui-font);font-weight:600;color:var(--text)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-weekday{font-size:10px;font-family:var(--ui-font);color:var(--textL);text-align:center;padding:4px 0}
.cal-cell{
  height:38px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-family:var(--ui-font);color:var(--textL);cursor:pointer;transition:all 0.15s;
  position:relative;
}
.cal-cell:hover{transform:scale(1.1)}
.cal-cell.today{font-weight:700;color:var(--text)}
.cal-cell.empty{cursor:default}
.cal-cell.empty:hover{transform:none}
.cal-heat-0{background:transparent}
.cal-heat-1{background:color-mix(in srgb,var(--accent) 15%,transparent)}
.cal-heat-2{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.cal-heat-3{background:color-mix(in srgb,var(--accent) 50%,transparent)}
.cal-heat-4{background:color-mix(in srgb,var(--accent) 70%,transparent)}
.cal-heat-5{background:var(--accent);color:#fff}
.cal-detail{margin-top:16px}
.cal-detail-title{font-size:13px;font-family:var(--ui-font);font-weight:600;color:var(--text);margin-bottom:8px}
.cal-stat{display:flex;justify-content:space-around;margin-top:12px}
.cal-stat-item{text-align:center}
.cal-stat-num{font-size:24px;font-weight:300;color:var(--text)}
.cal-stat-label{font-size:10px;font-family:var(--ui-font);color:var(--textL);margin-top:2px}

/* Edit area */
.mem-edit-area{display:none}
.mem-edit-area.show{display:block;margin-top:8px}
.skel{background:linear-gradient(90deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.11) 50%,rgba(0,0,0,.05) 75%);background-size:200% 100%;animation:skel 1.2s infinite;border-radius:14px}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Ian's Footprints */
.footprints-head{padding-top:48px;margin-bottom:22px}
.footprints-title{font-size:18px;font-family:var(--ui-font);font-weight:600;color:var(--text)}
.footprints-subtitle{font-size:11px;font-family:var(--ui-font);color:var(--textL);margin-top:5px}
.footprint-day{margin:0 0 26px}
.footprint-date{position:sticky;top:0;z-index:2;width:max-content;max-width:100%;padding:5px 11px;margin:0 0 9px -2px;border-radius:999px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:11px;font-family:var(--ui-font);font-weight:600;color:var(--textL)}
.footprint-line{position:relative;margin-left:10px;padding-left:22px}
.footprint-line:before{content:'';position:absolute;left:3px;top:9px;bottom:9px;width:1px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 45%,transparent),color-mix(in srgb,var(--accent) 10%,transparent))}
.footprint-item{position:relative;margin-bottom:12px}.footprint-item:last-child{margin-bottom:0}
.footprint-dot{position:absolute;left:-24px;top:18px;width:11px;height:11px;border-radius:50%;background:var(--accent);border:3px solid color-mix(in srgb,var(--bg) 92%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.footprint-dot.failed,.footprint-dot.cancelled{background:var(--textL);box-shadow:0 0 0 3px color-mix(in srgb,var(--textL) 12%,transparent)}
.footprint-dot.draft,.footprint-dot.partial{background:color-mix(in srgb,var(--accent) 55%,var(--textL))}
.footprint-card{padding:13px 15px;margin:0;background:color-mix(in srgb,var(--card) 44%,transparent)}
.footprint-meta{display:flex;align-items:center;gap:7px;font-size:10px;font-family:var(--ui-font);color:var(--textL);margin-bottom:5px}
.footprint-kind{font-size:11px;color:var(--text);font-weight:600}
.footprint-summary{font-size:13px;line-height:1.7;color:var(--text);word-break:break-word}
.footprint-action{display:inline-flex;margin-top:8px;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--textL);font-size:10px;font-family:var(--ui-font);text-decoration:none}
.footprint-empty{text-align:center;padding:54px 20px;color:var(--textL)}
.footprint-empty-mark{font-size:28px;opacity:.45;margin-bottom:12px}
.footprint-empty-title{font-size:14px;color:var(--text);margin-bottom:5px}
.footprint-empty-note{font-size:11px;font-family:var(--ui-font);line-height:1.7}
.footprint-more{display:block;margin:4px auto 28px}

/* 2026-07 shell refresh: preserve themes, soften structure */
:root{--ui-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif}
/* 2026-09-26: Chinese in display/serif headings follows the app font setting;
   Latin stays Cormorant. Default keeps the original Songti. */
:root{--cjk-serif:"Songti SC","Noto Serif SC"}
body{font-family:'Cormorant Garamond',var(--cjk-serif),serif}
.page{padding:0 18px 28px}
.page.active{animation:pageSoftIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes pageSoftIn{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}
.page-kicker{font:600 9px/1.2 ui-monospace,SFMono-Regular,monospace;letter-spacing:.19em;text-transform:uppercase;color:var(--textL)}
.page-heading{margin:5px 0 3px;font:400 29px/1.2 'Cormorant Garamond',var(--cjk-serif),serif;color:var(--text)}
.page-subtitle{font:11px/1.6 var(--ui-font);color:var(--textL);margin-bottom:18px}
.shell-page-head{padding-top:52px;margin-bottom:17px}
.card{box-shadow:0 12px 35px color-mix(in srgb,var(--text) 4%,transparent);transition:transform .2s ease,box-shadow .2s ease}
.card:active{transform:scale(.992)}

/* Drawer */
#drawer{width:min(82vw,318px);padding:calc(env(safe-area-inset-top,0px) + 24px) 14px calc(env(safe-area-inset-bottom,0px) + 18px);
  background:color-mix(in srgb,var(--bg) 88%,transparent);border-radius:0 26px 26px 0;
  box-shadow:28px 0 70px rgba(0,0,0,.16);transition:transform .36s cubic-bezier(.2,.8,.2,1)}
.drawer-head{padding:7px 9px 20px;border-bottom:1px solid color-mix(in srgb,var(--accent) 9%,transparent);margin-bottom:13px}
.drawer-profile-avatar{width:48px;height:48px;border-radius:17px;object-fit:cover;box-shadow:0 8px 25px color-mix(in srgb,var(--accent) 18%,transparent)}
.drawer-profile-name{font:600 16px var(--ui-font);color:var(--text)}
.drawer-profile-status{font:10px var(--ui-font);color:var(--textL);margin-top:4px}
.drawer-profile-status:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;background:#79b994;box-shadow:0 0 8px rgba(121,185,148,.6)}
.drawer-section{font:600 9px var(--ui-font);letter-spacing:.14em;color:var(--textL);padding:10px 13px 5px;text-transform:uppercase}
.drawer-item{padding:12px 13px;border-radius:15px;font:400 14px var(--ui-font);transition:background .18s,transform .18s}
.drawer-item.active{background:color-mix(in srgb,var(--accent) 15%,transparent);font-weight:550}
.drawer-item:active{transform:scale(.985)}
.drawer-settings{margin-top:auto;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--accent) 9%,transparent)}
#drawer-btn{width:40px;height:40px;border-radius:15px;background:color-mix(in srgb,var(--bg) 72%,transparent);
  box-shadow:0 8px 24px rgba(0,0,0,.08);transition:transform .2s,background .2s}
#drawer-btn:active{transform:scale(.92)}
/* Menu/back overlap fix: hide the floating menu while a second-level view (its own back) is open */
body.nav-subview #drawer-btn{display:none}

/* Chat shell */
.chat-header{padding:14px 0 10px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 94%,transparent) 55%,transparent);backdrop-filter:blur(6px)}
.chat-header h2{font:600 17px var(--ui-font)}
#chat-list{padding:8px 1px 118px}
.chat-row{gap:8px;margin-bottom:10px;align-items:flex-end}
.chat-row.grouped{margin-top:-5px}
.chat-avatar{width:30px;height:30px;border-radius:11px}
.chat-avatar.placeholder{visibility:hidden}
/* Simpler polished bubbles: content-width for short text, comfortable max width for long */
.bubble{padding:10px 14px;width:fit-content;max-width:min(80%,33rem)}
.bubble.ian,.bubble.evie{border-radius:16px}
.bubble .meta{font:9px var(--ui-font);margin-bottom:4px}
.bubble .chat-name{font:600 10px var(--ui-font);color:var(--textL);margin-bottom:4px}
.bubble .msg{font-size:14px;line-height:1.72}
.chat-input-area{bottom:calc(env(safe-area-inset-bottom,0px) + 11px);width:calc(100% - 24px);max-width:406px;padding:0}
.chat-input-row{gap:5px;border-radius:25px;padding:7px 7px 7px 9px;
  background:color-mix(in srgb,var(--card) 78%,transparent);border-color:color-mix(in srgb,var(--accent) 15%,transparent);
  box-shadow:0 18px 45px rgba(0,0,0,.13);backdrop-filter:blur(25px) saturate(1.25)}
.chat-input-row textarea{font:14px/1.5 var(--ui-font);padding:8px 3px}
.img-btn,.send-btn{width:38px;height:38px}.img-btn{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.send-btn{box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 22%,transparent);transition:transform .18s,opacity .18s}
.send-btn:active{transform:scale(.9)}

/* Hub navigation */
.hub-nav{position:fixed;z-index:45;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);transform:translateX(-50%);
  width:calc(100% - 24px);max-width:406px;display:flex;gap:3px;padding:5px;border:1px solid color-mix(in srgb,var(--accent) 11%,transparent);
  border-radius:19px;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(24px);box-shadow:0 16px 42px rgba(0,0,0,.14)}
.hub-nav[hidden]{display:none}.hub-nav button{flex:1;border:0;border-radius:14px;background:transparent;padding:9px 3px;font:10px var(--ui-font);color:var(--textL)}
.hub-nav button.active{color:var(--text);background:color-mix(in srgb,var(--accent) 14%,transparent)}
body.hub-open .page.active{padding-bottom:82px}
.treasure-switch{display:flex;gap:4px;padding:4px;margin:12px 0 16px;border:1px solid color-mix(in srgb,var(--accent) 10%,transparent);border-radius:15px;background:color-mix(in srgb,var(--card) 25%,transparent)}
.treasure-switch button{flex:1;border:0;border-radius:11px;padding:9px;background:transparent;font:12px var(--ui-font);color:var(--textL)}
.treasure-switch button.active{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--text)}
.treasure-switch button:disabled{opacity:.45}

/* Game room */
.game-room-grid{display:grid;gap:13px}.game-room-card{display:block;position:relative;overflow:hidden;min-height:148px;padding:19px;text-decoration:none;color:var(--text)}
.game-room-card:after{content:'';position:absolute;width:140px;height:140px;right:-35px;top:-45px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 68%)}
.game-room-icon{font-size:28px}.game-room-card h3{font:600 16px var(--ui-font);margin:18px 0 6px}.game-room-card p{font:11px/1.6 var(--ui-font);color:var(--textL);max-width:75%}
.game-room-action{display:inline-flex;margin-top:14px;padding:7px 11px;border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);border-radius:999px;font:10px var(--ui-font)}

/* Chat appearance settings */
.appearance-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 7%,transparent)}
.appearance-row:last-child{border-bottom:0}.appearance-copy{flex:1}.appearance-copy b{display:block;font:500 13px var(--ui-font)}.appearance-copy small{display:block;margin-top:3px;font:10px var(--ui-font);color:var(--textL)}
.avatar-preview{width:38px;height:38px;border-radius:13px;object-fit:cover;border:1px solid color-mix(in srgb,var(--accent) 15%,transparent)}
.appearance-actions{display:flex;gap:6px}.appearance-actions button{padding:6px 9px}
/* M3C: deliberate compact appearance controls -- local names, segmented stops, colour swatches */
.name-field{display:flex;align-items:center;gap:9px;padding:7px 0}
.name-field label{flex:0 0 84px;font:12px var(--ui-font);color:var(--text)}
.name-field input{flex:1;min-width:0;border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:10px;background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--text);font:13px var(--ui-font);padding:7px 9px;outline:none}
.name-field input:focus{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.seg-field{margin:12px 0 2px}
.seg-label{display:flex;justify-content:space-between;gap:8px;font:11px var(--ui-font);color:var(--textL);margin-bottom:6px}
.seg{display:flex;gap:4px;padding:4px;border-radius:13px;background:color-mix(in srgb,var(--card) 46%,transparent);border:1px solid color-mix(in srgb,var(--accent) 10%,transparent)}
.seg button{flex:1;border:0;border-radius:9px;padding:8px 4px;background:transparent;color:var(--textL);font:11px var(--ui-font);cursor:pointer;transition:background .15s,color .15s}
.seg button.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--text);font-weight:600}
.seg[data-disabled="1"]{opacity:.38;pointer-events:none}
.seg-hint{font:10px/1.5 var(--ui-font);color:var(--textL);margin-top:6px}
.swatch-row{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 2px}
.swatch{width:30px;height:30px;border-radius:9px;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 14%,transparent)}
.swatch.on{border-color:var(--text)}
.swatch-native{position:relative;width:30px;height:30px;border-radius:9px;overflow:hidden;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);cursor:pointer;flex:0 0 auto}
.swatch-native input{position:absolute;top:-6px;left:-6px;width:44px;height:44px;border:0;padding:0;background:transparent;cursor:pointer}
body.chat-avatars-hidden #chat-list .chat-avatar{display:none}
body.chat-names-hidden #chat-list .chat-name{display:none}
#drawer .drawer-item[data-page="inner"],#drawer .drawer-item[data-page="keepsakes"],#drawer .drawer-item[data-page="books"],#drawer .drawer-item[data-page="games"],#drawer .drawer-item[data-page="footprints"],#drawer .drawer-item[data-page="wallet"],#drawer .drawer-item[data-page="todo"],#drawer>div[style*="flex:1"] .drawer-item[data-page="work"],#drawer .drawer-section:nth-of-type(n+2){display:none}

/* Settings home and category pages */
.settings-home[hidden],.settings-detail[hidden]{display:none!important}
.settings-overview{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px;
}
.settings-overview-chip{
  min-width:0;padding:12px 13px;border:1px solid color-mix(in srgb,var(--accent) 11%,transparent);
  border-radius:17px;background:color-mix(in srgb,var(--card) 48%,transparent);
}
.settings-overview-label{font:600 8px var(--ui-font);letter-spacing:.15em;color:var(--textL);text-transform:uppercase}
.settings-overview-value{margin-top:5px;font:500 12px/1.4 var(--ui-font);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-menu{overflow:hidden;padding:0;margin-bottom:15px}
.settings-menu-row{
  width:100%;min-height:68px;display:flex;align-items:center;gap:13px;padding:12px 14px;border:0;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 7%,transparent);
  background:transparent;color:var(--text);text-align:left;cursor:pointer;
}
.settings-menu-row:last-child{border-bottom:0}
.settings-menu-row:active{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.settings-menu-icon{
  width:35px;height:35px;flex:0 0 35px;border-radius:12px;display:grid;place-items:center;
  color:var(--text);background:color-mix(in srgb,var(--accent) 12%,transparent);
}
.settings-menu-copy{flex:1;min-width:0}
.settings-menu-title{font:500 14px var(--ui-font);color:var(--text)}
.settings-menu-summary{margin-top:3px;font:10px/1.4 var(--ui-font);color:var(--textL);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-menu-arrow{font:18px/1 var(--ui-font);color:var(--textL);opacity:.55}
.settings-detail-head{display:flex;align-items:center;gap:10px;padding-top:52px;margin-bottom:18px}
.settings-back{
  width:38px;height:38px;flex:0 0 38px;border:1px solid color-mix(in srgb,var(--accent) 10%,transparent);
  border-radius:14px;background:color-mix(in srgb,var(--card) 55%,transparent);color:var(--text);cursor:pointer;
}
.settings-detail-heading{font:400 27px/1.15 'Cormorant Garamond',var(--cjk-serif),serif;color:var(--text)}
.settings-detail-subtitle{font:10px/1.5 var(--ui-font);color:var(--textL);margin-top:3px}
.settings-group{margin-bottom:14px}
.settings-group-title{margin:0 4px 7px;font:600 9px var(--ui-font);letter-spacing:.14em;text-transform:uppercase;color:var(--textL)}
.settings-flat-card{padding:2px 15px;margin-bottom:14px}
.settings-detail .card{margin-bottom:14px}
.settings-detail .section-label{margin-top:2px}
.settings-detail .fold-body{padding:0}
.settings-detail .fold>summary{display:none}
.settings-detail .fold{margin:0}
.settings-danger-note{padding:0 3px 13px;font:10px/1.6 var(--ui-font);color:var(--textL)}
@media(max-width:360px){.settings-overview{grid-template-columns:1fr}}

/* Us · quiet directory for shared life */
.us-page{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 38px)}
.us-hero{margin:-4px 0 28px;overflow:hidden;border-radius:24px;border:1px solid color-mix(in srgb,var(--accent) 10%,transparent);background:color-mix(in srgb,var(--card) 62%,transparent)}
.us-cover{height:112px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--bg)),color-mix(in srgb,var(--card) 82%,transparent));background-size:cover;background-position:center}
.us-cover{position:relative;cursor:pointer}.us-cover:after{content:'Change cover';position:absolute;right:13px;top:13px;padding:6px 9px;border-radius:10px;background:rgba(20,20,24,.2);color:#fff;font:10px var(--ui-font);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.us-identity{display:flex;align-items:center;gap:13px;padding:0 18px 17px;margin-top:-20px}
.us-avatars{display:flex;padding-left:6px}.us-avatars img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:3px solid var(--card);margin-left:-7px;box-shadow:0 5px 16px color-mix(in srgb,var(--text) 10%,transparent)}
.us-name{font:600 21px/1.1 'Cormorant Garamond',var(--cjk-serif),serif;color:var(--text)}
.us-note{font:11px/1.5 var(--ui-font);color:var(--textL);margin-top:4px}
.us-group{margin:0 0 25px}.us-group-title{margin:0 5px 8px;font:600 11px/1.4 var(--ui-font);color:var(--textL)}
.us-directory{overflow:hidden;border-radius:21px;border:1px solid color-mix(in srgb,var(--accent) 9%,transparent);background:color-mix(in srgb,var(--card) 55%,transparent)}
.us-entry{width:100%;min-height:76px;display:flex;align-items:center;gap:13px;padding:13px 16px;border:0;border-bottom:1px solid color-mix(in srgb,var(--accent) 7%,transparent);background:transparent;color:var(--text);text-align:left;cursor:pointer}
.us-entry:last-child{border-bottom:0}.us-entry:active{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.us-entry-icon{width:38px;height:38px;flex:0 0 38px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.us-entry-copy{flex:1;min-width:0}.us-entry-name{display:block;font:500 16px/1.3 var(--ui-font)}.us-entry-note{display:block;margin-top:4px;font:12px/1.45 var(--ui-font);color:var(--textL)}.us-entry-arrow{font:20px/1 var(--ui-font);color:var(--textL);opacity:.55}
.us-directory-head{display:flex;align-items:center;gap:11px;padding-top:48px;margin-bottom:22px}.us-directory-head button{width:40px;height:40px;border:1px solid color-mix(in srgb,var(--accent) 10%,transparent);border-radius:15px;background:color-mix(in srgb,var(--card) 58%,transparent);color:var(--text);font-size:22px}.us-directory-title{font:600 25px/1.1 'Cormorant Garamond',var(--cjk-serif),serif}.us-directory-subtitle{margin-top:3px;font:11px/1.4 var(--ui-font);color:var(--textL)}
body.us-subview #drawer-btn{display:none}
#drawer{width:min(88vw,370px);padding-left:22px;padding-right:22px}
#drawer .drawer-head{padding:18px 14px 26px}
#drawer>div[style*="flex:1"]{display:flex;flex-direction:column;justify-content:center;overflow:visible!important;padding-bottom:30px}
#drawer .drawer-section{width:min(100%,290px);margin:0 auto 9px;padding-left:18px}
#drawer .drawer-item{width:min(100%,290px);min-height:58px;margin:3px auto;padding:15px 18px;border-radius:18px;font-size:21px}
#drawer .drawer-item svg{width:21px;height:21px}
#drawer .drawer-settings{padding-top:18px}

/* 2026-07 information architecture: Claude-like typography and true sub-pages */
.drawer-profile-name,.drawer-item{
  font-family:'Cormorant Garamond',var(--cjk-serif),serif;
}
.drawer-profile-name{font-size:19px;font-weight:600;letter-spacing:.01em}
.drawer-item{font-size:18px;line-height:1.15;letter-spacing:.01em;padding:12px 13px}
.drawer-item svg{width:17px;height:17px}
.drawer-section{font-size:8px;letter-spacing:.2em;padding-top:14px}
.inner-panel[hidden],.content-route[hidden]{display:none!important}
.route-intro{margin:-5px 0 16px;font:11px/1.7 var(--ui-font);color:var(--textL)}
.keepsake-card{
  position:relative;overflow:hidden;padding:17px 18px 16px;margin-bottom:12px;cursor:pointer;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--card) 72%,transparent),color-mix(in srgb,var(--accent) 5%,var(--card)));
  border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);
  box-shadow:0 12px 30px color-mix(in srgb,var(--text) 4%,transparent);
}
.keepsake-card:before{content:'';position:absolute;left:44%;top:-5px;width:52px;height:14px;transform:rotate(-2deg);background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:2px}
.keepsake-card:after{content:'';position:absolute;right:-24px;bottom:-34px;width:90px;height:90px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 13%,transparent)}
.keepsake-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.keepsake-kind{font:600 9px var(--ui-font);letter-spacing:.16em;text-transform:uppercase;color:var(--textL)}
.keepsake-date{font:10px var(--ui-font);color:var(--textL);white-space:nowrap}
.keepsake-title{padding-right:42px;font:600 16px/1.35 'Cormorant Garamond',var(--cjk-serif),serif;color:var(--text)}
.keepsake-preview{padding-right:40px;margin-top:6px;font:12px/1.7 var(--ui-font);color:var(--textL);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.keepsake-direction{margin-top:11px;font:10px var(--ui-font);color:var(--textL)}
.diary-card{display:flex;align-items:center;gap:10px;min-height:92px;padding:16px 12px 14px 18px}
.diary-card:after{display:none}
.diary-card .dc-text{flex:1;min-width:0}
.diary-card .keepsake-title{padding-right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.diary-card .dc-date{margin-top:7px;font:11px var(--ui-font);color:var(--textL);letter-spacing:.04em}
.diary-card .dc-month{display:flex;align-items:center;gap:4px;flex:none}
.diary-card .dc-word{font:400 21px/1 'Great Vibes',cursive;color:var(--text);transform:rotate(-8deg);margin-right:-4px}
.diary-month-head{display:flex;align-items:baseline;gap:10px;margin:22px 4px 10px}
.diary-month-head:first-child{margin-top:4px}
.diary-month-head .dmh-word{font:400 28px/1 'Great Vibes',cursive;color:var(--text)}
.diary-month-head .dmh-meta{font:11px var(--ui-font);color:var(--textL);letter-spacing:.06em}
.empty-cat-art{display:block;width:120px;height:72px;margin:0 auto 10px;background:var(--textL);opacity:.75;-webkit-mask:url(/images/diary-months/m01.png) center/contain no-repeat;mask:url(/images/diary-months/m01.png) center/contain no-repeat}
.empty.empty-cat{font-style:normal}
#drawer-btn .ctx-cat{display:none}
#drawer-btn.ctx-on{overflow:visible}
#drawer-btn.ctx-on>svg{display:none}
#drawer-btn.ctx-on .ctx-cat{display:block;width:21px;height:19px;background:var(--text);-webkit-mask:url(/images/ctx-cat-head.png) center/contain no-repeat;mask:url(/images/ctx-cat-head.png) center/contain no-repeat}
#drawer-btn.ctx-on::before{content:'';position:absolute;inset:-4px;border-radius:50%;pointer-events:none;background:conic-gradient(var(--accent) calc(var(--ctx-lv,0) * 360deg),color-mix(in srgb,var(--accent) 16%,transparent) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
.drawer-ctx{margin:8px 2px 0;font:10px var(--ui-font);color:var(--textL);letter-spacing:.06em}
.cc-typing-cat{display:block;width:36px;height:40px;margin:2px 2px 0;background:var(--text);opacity:.85;-webkit-mask:url(/images/typing-cat.png) center/contain no-repeat;mask:url(/images/typing-cat.png) center/contain no-repeat;transform-origin:50% 100%;animation:ccCatSway 1.8s ease-in-out infinite alternate}
@keyframes ccCatSway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.cc-typing-cat{animation:none}}
.cc-streaming .msg:empty::after{content:none;animation:none}
.diary-card .dc-art{display:block;width:92px;height:62px;background:var(--text);opacity:.9;-webkit-mask:var(--dc-img) right center/contain no-repeat;mask:var(--dc-img) right center/contain no-repeat}
.keepsake-stamp{position:absolute;right:17px;top:46px;width:31px;height:38px;border:1px dashed color-mix(in srgb,var(--accent) 42%,transparent);border-radius:3px;display:grid;place-items:center;font-size:16px;transform:rotate(3deg);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.dream-card .keepsake-stamp{border-radius:50%;width:36px;height:36px;transform:none}
.call-record-card .keepsake-preview{display:block;-webkit-line-clamp:unset;overflow:visible}
.call-record-card .keepsake-stamp{border-radius:50%;width:34px;height:34px;transform:none}
.keepsake-detail-sheet{max-height:min(82vh,720px)}
.keepsake-detail-meta{font:10px var(--ui-font);color:var(--textL);letter-spacing:.04em;margin-top:-4px}
.keepsake-detail-content{font-size:15px;line-height:2;white-space:pre-wrap;color:var(--text);padding:18px 0 8px}
.keepsake-detail-actions{display:flex;justify-content:flex-end;gap:7px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--accent) 9%,transparent)}
.keepsake-detail-content textarea{min-height:210px;font-size:14px;line-height:1.8}
.hub-nav button:disabled{opacity:.35}
.moment-route .shell-page-head{margin-bottom:10px}

/* 2026-07 chat surface: identity header, compact runtime controls and work cards */
.chat-header{
  position:sticky;top:0;z-index:10;min-height:58px;
  padding:calc(env(safe-area-inset-top,0px) + 7px) 52px 8px;
  display:flex;align-items:center;justify-content:center;
}
/* Telegram-like centered floating identity pill: name only, no avatar/status/bot label */
.chat-header-profile{
  display:inline-flex;align-items:center;justify-content:center;min-width:0;
  border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);
  border-radius:999px;padding:7px 18px;cursor:pointer;color:var(--text);
  background:color-mix(in srgb,var(--card) 62%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 20px color-mix(in srgb,var(--text) 8%,transparent);
}
.chat-header-profile:active{transform:scale(.97)}
.chat-header-avatar,.chat-header-presence{display:none}
.chat-header-copy{text-align:center;min-width:0}
.chat-header h2{font:600 16px/1 'Cormorant Garamond',var(--cjk-serif),serif;letter-spacing:.04em;margin:0}
.chat-call-btn{position:absolute;right:3px;top:calc(env(safe-area-inset-top,0px) + 9px);width:40px;height:40px;border:0;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--card) 48%,transparent);color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.07);cursor:pointer}
.chat-call-btn:active{transform:scale(.91)}
.chat-search-btn{position:absolute;right:49px;top:calc(env(safe-area-inset-top,0px) + 9px);width:40px;height:40px;border:0;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--card) 48%,transparent);color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.07);cursor:pointer}
.chat-search-btn:active{transform:scale(.97)}
.chat-search-panel{position:absolute;z-index:32;top:calc(env(safe-area-inset-top,0px) + 58px);left:8px;right:8px;display:none;max-height:min(68%,560px);overflow:hidden;border:1px solid var(--m3d-glass-line,color-mix(in srgb,var(--accent) 16%,transparent));border-radius:22px;background:var(--m3d-glass-fill-strong,color-mix(in srgb,var(--card) 94%,transparent));box-shadow:0 16px 44px color-mix(in srgb,var(--text) 16%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.chat-search-panel.show{display:flex;flex-direction:column}
.chat-search-bar{display:flex;align-items:center;gap:8px;padding:10px;border-bottom:1px solid color-mix(in srgb,var(--accent) 10%,transparent)}
.chat-search-bar input{min-width:0;flex:1;height:38px;padding:0 13px;border:1px solid color-mix(in srgb,var(--accent) 14%,transparent);border-radius:999px;background:color-mix(in srgb,var(--bg) 52%,transparent);color:var(--text);font:13px/1 var(--ui-font);outline:none}
.chat-search-bar input:focus{border-color:color-mix(in srgb,var(--accent) 48%,transparent)}
.chat-search-close{width:34px;height:34px;flex:none;border:0;border-radius:50%;background:transparent;color:var(--textL);font-size:20px;cursor:pointer}
.chat-search-tabs{display:flex;gap:6px;padding:8px 10px 2px}
.chat-search-tab{height:30px;padding:0 13px;border:0;border-radius:999px;background:transparent;color:var(--textL);font:11px/1 var(--ui-font);cursor:pointer}
.chat-search-tab.active{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-weight:600}
.chat-search-status{padding:8px 14px 2px;color:var(--textL);font:10px/1.4 var(--ui-font)}
.chat-search-results{min-height:52px;overflow-y:auto;padding:6px 8px 10px;-webkit-overflow-scrolling:touch}
.chat-search-empty{padding:28px 12px;text-align:center;color:var(--textL);font:12px/1.6 var(--ui-font)}
.chat-search-result{width:100%;display:flex;align-items:center;gap:10px;padding:10px;border:0;border-radius:14px;background:transparent;color:var(--text);text-align:left;cursor:pointer}
.chat-search-result:active{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.chat-search-result-copy{min-width:0;flex:1}
.chat-search-result-meta{display:flex;gap:7px;margin-bottom:4px;color:var(--textL);font:10px/1.2 var(--ui-font)}
.chat-search-result-text{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font:13px/1.5 var(--ui-font)}
.chat-search-result-play{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-size:12px}
.chat-search-hit{animation:chatSearchHit 1.3s ease}
@keyframes chatSearchHit{0%,100%{filter:none}35%{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 68%,transparent))}}
.ian-call-overlay{position:fixed;inset:0;z-index:10020;display:none;overflow:hidden;background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 20%,var(--bg)),var(--bg) 58%,color-mix(in srgb,var(--card) 88%,var(--bg)));color:var(--text)}
.ian-incoming-call{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:10030;display:none;padding:18px;border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);border-radius:24px;background:color-mix(in srgb,var(--card) 90%,transparent);box-shadow:0 18px 60px rgba(0,0,0,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.ian-incoming-call.show{display:block}
.ian-incoming-title{font:600 18px/1.2 var(--ui-font);color:var(--text)}
.ian-incoming-reason{margin-top:8px;color:var(--textL);font:13px/1.55 var(--ui-font);min-height:20px}
.ian-incoming-actions{display:flex;gap:10px;margin-top:14px}.ian-incoming-actions button{flex:1;border:0;border-radius:14px;padding:11px 10px;font:600 13px var(--ui-font);cursor:pointer}.ian-incoming-accept{background:var(--accent);color:#fff}.ian-incoming-decline{background:color-mix(in srgb,var(--textL) 12%,transparent);color:var(--text)}
.ian-maintenance-card{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:10035;display:none;max-height:72vh;overflow:auto;padding:18px;border-radius:24px;background:color-mix(in srgb,var(--card) 94%,transparent);box-shadow:0 18px 60px rgba(0,0,0,.2);backdrop-filter:blur(18px)}.ian-maintenance-card.show{display:block}.ian-maintenance-title{font:600 18px var(--ui-font)}.ian-maintenance-detail{margin-top:10px;white-space:pre-wrap;color:var(--textL);font:13px/1.55 var(--ui-font)}.ian-maintenance-comment{display:none;width:100%;min-height:76px;margin-top:12px;padding:10px;border:1px solid color-mix(in srgb,var(--textL) 18%,transparent);border-radius:12px;background:transparent;color:var(--text);resize:vertical}.ian-maintenance-comment.show{display:block}.ian-maintenance-actions{display:flex;gap:8px;margin-top:14px}.ian-maintenance-actions button{flex:1;border:0;border-radius:12px;padding:10px 6px;font:600 12px var(--ui-font)}.ian-maintenance-approve{background:var(--accent);color:#fff}.ian-maintenance-reject,.ian-maintenance-note{background:color-mix(in srgb,var(--textL) 12%,transparent);color:var(--text)}
.ian-call-overlay.show{display:flex;flex-direction:column;align-items:center}
.ian-call-top{width:100%;padding:calc(env(safe-area-inset-top,0px) + 20px) 22px 0;display:flex;justify-content:space-between;align-items:center;font:12px var(--ui-font);color:var(--textL)}
.ian-call-top button{width:38px;height:38px;border:0;border-radius:50%;background:color-mix(in srgb,var(--card) 68%,transparent);color:var(--text);font-size:22px}
.ian-call-stage{flex:1;width:min(100%,520px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 28px 24px}
.ian-call-avatar-wrap{position:relative;width:132px;height:132px;margin-bottom:22px}
.ian-call-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 22px 70px color-mix(in srgb,var(--accent) 28%,transparent)}
.ian-call-ripple{position:absolute;inset:-10px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:50%;opacity:0}
.ian-call-overlay.listening .ian-call-ripple{animation:callRipple 1.8s ease-out infinite}
.ian-call-overlay.speaking .ian-call-ripple{animation:callRipple .95s ease-out infinite}
@keyframes callRipple{0%{transform:scale(.82);opacity:.65}100%{transform:scale(1.28);opacity:0}}
.ian-call-name{font-family:'Cormorant Garamond',serif;font-size:34px;line-height:1}
.ian-call-status{min-height:20px;margin-top:8px;font:13px var(--ui-font);color:var(--textL)}
.ian-call-caption{width:100%;min-height:106px;margin-top:30px;padding:18px 20px;border-radius:24px;background:color-mix(in srgb,var(--card) 62%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);font-size:16px;line-height:1.65;text-align:center;display:flex;align-items:center;justify-content:center}
.ian-call-caption:empty:before{content:'接通后，直接说话就好';color:var(--textL);font-size:13px}
.ian-call-text-entry{width:100%;margin-top:14px;display:flex;gap:8px;align-items:center}
.ian-call-text-entry input{min-width:0;flex:1;height:40px;padding:0 13px;border:1px solid color-mix(in srgb,var(--textL) 18%,transparent);border-radius:14px;background:color-mix(in srgb,var(--card) 70%,transparent);color:var(--text);font:13px var(--ui-font);outline:none}
.ian-call-text-entry input:focus{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.ian-call-text-entry input:disabled{opacity:.55}
.ian-call-text-entry button{height:40px;padding:0 15px;border:0;border-radius:14px;background:var(--accent);color:#fff;font:600 13px var(--ui-font);cursor:pointer}
.ian-call-text-entry button:disabled{opacity:.42;cursor:default}
.ian-call-text-error{width:100%;min-height:17px;margin-top:6px;color:#c85d67;font:11px/1.45 var(--ui-font);text-align:center}
.ian-call-level{width:116px;height:4px;margin-top:18px;border-radius:999px;background:color-mix(in srgb,var(--textL) 14%,transparent);overflow:hidden}
.ian-call-level i{display:block;width:3%;height:100%;border-radius:inherit;background:var(--accent);transition:width .08s linear}
.ian-call-controls{padding:0 24px calc(env(safe-area-inset-bottom,0px) + 28px);display:flex;justify-content:center;gap:26px}
.ian-call-control{width:64px;height:64px;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.16)}
.ian-call-control.mute{background:color-mix(in srgb,var(--text) 58%,transparent)}
.ian-call-control.hangup{background:#e85d65;transform:rotate(135deg)}
.ian-call-control:disabled{opacity:.45}
.chat-call-card{min-width:210px;padding:4px 2px}
.chat-call-card-actions{display:flex;gap:8px;margin-top:10px}
.chat-call-card-head>span:last-child>span{display:block}
.chat-call-card-actions .chat-call-invite-button{flex:1;margin-top:0}
.chat-call-invite-button.decline{background:color-mix(in srgb,#c05353 16%,transparent);color:#a33f3f}
.chat-call-invite-button.ghost{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text)}
.chat-call-card-head{display:flex;align-items:center;gap:9px;font-weight:600}
.chat-call-card-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 18%,transparent)}
.chat-call-card-meta{font:11px var(--ui-font);color:var(--textL);margin-top:2px}
.chat-call-card-summary{margin-top:9px;font-size:13px;line-height:1.55;color:var(--textL)}
.chat-call-invite-button{margin-top:10px;border:0;border-radius:999px;padding:9px 17px;background:var(--accent);color:white;font:600 13px var(--ui-font);cursor:pointer}
.chat-call-invite-button:disabled{opacity:.45;cursor:default}
/* Collapsed paper-slip call row + tap-to-open paper-note sheet (front-end only, no fetch/model call) */
.call-slip{display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:9px 13px;border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:13px;background:color-mix(in srgb,var(--card) 70%,transparent);color:var(--text);font:inherit;cursor:pointer;text-align:left}
.call-slip.call-slip-plain{cursor:default}
.call-slip:not(.call-slip-plain):active{transform:scale(.985)}
.call-slip-icon{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.call-slip-text{font:13px/1.4 var(--ui-font);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.call-slip-chevron{margin-left:auto;color:var(--textL);font-size:15px;flex:none}
.call-note-sheet{max-width:360px;background:linear-gradient(135deg,color-mix(in srgb,var(--card) 92%,var(--bg)),color-mix(in srgb,var(--accent) 6%,var(--card)));border:1px solid color-mix(in srgb,var(--accent) 16%,transparent)}
.call-note-row{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 8%,transparent);font:13px/1.65 var(--ui-font)}
.call-note-row:last-child{border-bottom:0}
.call-note-key{flex:0 0 52px;color:var(--textL)}
.call-note-val{flex:1;color:var(--text);white-space:pre-wrap;word-break:break-word}
/* Floating return-to-latest button */
.chat-jump-latest{
  position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 104px);z-index:21;
  width:40px;height:40px;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);border-radius:50%;
  display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--text);
  background:color-mix(in srgb,var(--card) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 26px color-mix(in srgb,var(--text) 12%,transparent);
  opacity:0;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease;
}
.chat-jump-latest.show{display:flex;opacity:1;transform:none}
body:not(.tabs-mode) .chat-jump-latest{bottom:calc(env(safe-area-inset-bottom,0px) + 90px)}
@media(prefers-reduced-motion:reduce){.chat-jump-latest{transition:none;transform:none}}
.music-card{display:flex;align-items:center;gap:10px;min-width:230px;max-width:320px;padding:8px;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);border-radius:15px;background:color-mix(in srgb,var(--card) 84%,transparent)}
.music-card img{width:54px;height:54px;object-fit:cover;border-radius:11px;background:color-mix(in srgb,var(--accent) 10%,var(--card));flex:none}
.music-card-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.music-card-copy strong,.music-card-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-card-copy strong{font-size:13px}.music-card-copy span{font-size:11px;color:var(--textL)}
.music-card-copy a{width:max-content;margin-top:4px;padding:5px 9px;border-radius:999px;background:var(--accent);color:#fff;text-decoration:none;font-size:11px}
#chat-list{padding-bottom:174px}
.chat-input-area{max-width:418px}
.chat-input-row{
  position:relative;display:flex;flex-direction:column;align-items:stretch;gap:3px;
  border-radius:26px;padding:9px 10px 8px;
}
/* GPT-like pill: textarea grows to ~4-5 lines then scrolls internally */
.chat-input-row textarea{width:100%;min-height:38px;max-height:120px;padding:7px 7px 5px;font-size:15px;line-height:1.5;overflow-y:auto;-webkit-overflow-scrolling:touch}
.composer-toolbar{display:flex;align-items:center;gap:5px;min-height:40px}
.composer-spacer{flex:1}
.composer-toolbar .img-btn,.composer-toolbar .send-btn,.composer-voice-btn,.sticker-compose-btn{width:38px;height:38px}
.composer-voice-btn{border:0;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--textL);cursor:pointer}
.composer-voice-btn .voice-keyboard-icon{display:none}
.chat-input-row.user-voice-mode .composer-voice-btn{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.chat-input-row.user-voice-mode .composer-voice-btn .voice-mic-icon{display:none}
.chat-input-row.user-voice-mode .composer-voice-btn .voice-keyboard-icon{display:block}
.chat-input-row.user-voice-mode #chat-input{display:none}
.chat-input-row.user-voice-mode .send-btn{display:none}
.user-voice-hold{
  display:none;width:100%;min-height:46px;border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);border-radius:17px;
  background:color-mix(in srgb,var(--card) 76%,transparent);color:var(--text);font:600 13px var(--ui-font);letter-spacing:.04em;
  align-items:center;justify-content:center;cursor:pointer;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;
}
.user-voice-hold *{pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.chat-input-row.user-voice-mode .user-voice-hold{display:flex}
.user-voice-hold:active,.user-voice-hold.recording{background:color-mix(in srgb,var(--accent) 18%,var(--card));color:var(--accent)}
.user-voice-hold.recording{animation:userVoicePulse 1.1s ease-in-out infinite}
.user-voice-hold.cancel-armed{background:color-mix(in srgb,#c85f68 18%,var(--card));border-color:color-mix(in srgb,#c85f68 42%,transparent);color:#b84d57;animation:none}
.user-voice-hold:disabled{opacity:.62;cursor:default}
@keyframes userVoicePulse{50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 16%,transparent)}}
.user-voice-recording{display:none;align-items:center;gap:9px;margin:0 7px 5px;padding:9px 11px;border-radius:15px;background:color-mix(in srgb,var(--card) 94%,var(--accent));border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);font:11px var(--ui-font);color:var(--textL)}
.user-voice-recording.show{display:flex}
.user-voice-recording-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:ccBlink 1s infinite}
.user-voice-recording-copy{min-width:0;flex:1}
.user-voice-recording-time{font-variant-numeric:tabular-nums;color:var(--accent)}
.user-voice-recording button{border:0;background:transparent;color:var(--textL);font:10px var(--ui-font);padding:5px;cursor:pointer}
.chat-voice{min-width:190px;max-width:260px;padding:3px 0 1px}
.chat-voice-main{display:flex;align-items:center;gap:10px}
.chat-voice-play{width:36px;height:36px;flex:0 0 36px;border:0;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);cursor:pointer}
.chat-voice-play:active{transform:scale(.92)}
.chat-voice-play svg{width:16px;height:16px}
.chat-voice-play .voice-pause{display:none}
.chat-voice.playing .chat-voice-play .voice-play{display:none}
.chat-voice.playing .chat-voice-play .voice-pause{display:block}
.chat-voice-meter{min-width:0;flex:1}
.chat-voice-track{height:4px;border-radius:999px;background:color-mix(in srgb,var(--textL) 18%,transparent);overflow:hidden}
.chat-voice-progress{display:block;width:0;height:100%;border-radius:inherit;background:var(--accent)}
.chat-voice-meta{display:flex;align-items:center;justify-content:space-between;margin-top:6px;font:9px/1 var(--ui-font);color:var(--textL)}
.chat-voice-transcript-btn{border:0;padding:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.chat-voice-transcript{display:none;margin-top:9px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--accent) 11%,transparent);font:12px/1.65 var(--ui-font);color:var(--textL);white-space:pre-wrap}
.chat-voice.transcript-open .chat-voice-transcript{display:block}
.chat-user-voice-tag{display:inline-flex;align-items:center;margin-bottom:7px;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);font:600 9px var(--ui-font);letter-spacing:.05em}
.chat-user-voice-tone{display:none;margin-top:7px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--accent) 11%,transparent);font:11px/1.65 var(--ui-font);color:var(--textL)}
.chat-voice.transcript-open .chat-user-voice-tone{display:block}
.sticker-compose-btn{border:0;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--textL);cursor:pointer}
.sticker-compose-btn:active{transform:scale(.91)}
.sticker-picker-overlay{position:fixed;inset:0;z-index:260;display:none;align-items:flex-end;justify-content:center;background:rgba(30,24,27,.22);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sticker-picker-overlay.show{display:flex}
.sticker-picker-sheet{width:min(100%,440px);max-height:min(62vh,560px);padding:13px 14px calc(16px + env(safe-area-inset-bottom,0px));border-radius:24px 24px 0 0;background:color-mix(in srgb,var(--card) 97%,var(--bg));border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:0 -18px 54px rgba(0,0,0,.14)}
.sticker-picker-head{display:flex;align-items:center;justify-content:space-between;padding:1px 3px 11px;font:600 13px var(--ui-font);color:var(--text)}
.sticker-picker-actions{display:flex;align-items:center;gap:5px}
.sticker-manage-btn{height:30px;padding:0 9px;border:0;border-radius:999px;background:transparent;color:var(--accent);font:10px var(--ui-font);cursor:pointer}
.sticker-manage-btn:active{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.sticker-manage-btn:disabled{opacity:.36;cursor:default}
.sticker-picker-close{width:30px;height:30px;border:0;border-radius:50%;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--textL);font-size:18px;cursor:pointer}
.sticker-chat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-height:calc(min(62vh,560px) - 74px);overflow:auto;padding:2px 1px 6px}
.sticker-chat-cell{position:relative;min-width:0}
.sticker-chat-item{width:100%;min-width:0;padding:5px 3px 7px;border:0;border-radius:15px;background:transparent;color:var(--textL);font:10px var(--ui-font);cursor:pointer}
.sticker-chat-item:active{background:color-mix(in srgb,var(--accent) 12%,transparent);transform:scale(.96)}
.sticker-chat-item img{display:block;width:100%;aspect-ratio:1;object-fit:contain;border-radius:12px;margin-bottom:4px}
.sticker-chat-item span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticker-add-item{width:100%}
.sticker-add-tile{display:grid;place-items:center;width:100%;aspect-ratio:1;margin-bottom:4px;border:1px dashed color-mix(in srgb,var(--accent) 34%,transparent);border-radius:12px;background:color-mix(in srgb,var(--accent) 5%,transparent);color:var(--accent)}
.sticker-delete-btn{display:none;position:absolute;right:-4px;top:-4px;z-index:2;width:23px;height:23px;border:1px solid color-mix(in srgb,var(--card) 85%,transparent);border-radius:50%;background:var(--accent);color:white;font:17px/19px var(--ui-font);box-shadow:0 4px 12px rgba(0,0,0,.18);cursor:pointer}
.sticker-picker-overlay.managing .sticker-delete-btn{display:block}
.sticker-picker-overlay.managing .sticker-chat-item{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.sticker-merge-status{display:none;align-items:center;gap:8px;margin:0 7px 5px;padding:7px 9px;border-radius:14px;background:color-mix(in srgb,var(--card) 92%,var(--accent));border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);font:10px var(--ui-font);color:var(--textL)}
.sticker-merge-status.show{display:flex}
.sticker-merge-status img{width:30px;height:30px;object-fit:contain;border-radius:8px}
.sticker-merge-copy{min-width:0;flex:1;line-height:1.35}
.sticker-merge-actions{display:flex;align-items:center;gap:3px}
.sticker-merge-actions button{border:0;background:transparent;color:var(--accent);font:10px var(--ui-font);padding:5px;cursor:pointer}
.sticker-manage-list{display:none;flex-direction:column;gap:10px;max-height:calc(min(62vh,560px) - 74px);overflow:auto;padding:2px 1px 6px}
.sticker-picker-overlay.managing .sticker-chat-grid{display:none}
.sticker-picker-overlay.managing .sticker-manage-list{display:flex}
.sticker-manage-add{width:100%;height:38px;border:1px dashed color-mix(in srgb,var(--accent) 34%,transparent);border-radius:12px;background:color-mix(in srgb,var(--accent) 5%,transparent);color:var(--accent);font:10px var(--ui-font);cursor:pointer}
.sticker-manage-add:active{transform:scale(.98)}
.sticker-manage-card{display:flex;gap:10px;padding:10px;border-radius:15px;background:color-mix(in srgb,var(--card) 96%,var(--bg));border:1px solid color-mix(in srgb,var(--accent) 14%,transparent)}
.sticker-manage-card>img{flex:0 0 auto;width:58px;height:58px;object-fit:contain;border-radius:12px;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.sticker-manage-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.sticker-manage-field label{display:block;font:10px var(--ui-font);color:var(--textL);margin-bottom:3px}
.sticker-manage-field input,.sticker-manage-field textarea{width:100%;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:10px;background:var(--bg);color:var(--text);font:12px var(--ui-font);padding:7px 8px}
.sticker-manage-field textarea{resize:vertical;min-height:66px;line-height:1.45}
.sticker-manage-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:1px}
.sticker-manage-save{height:30px;padding:0 15px;border:0;border-radius:999px;background:var(--accent);color:white;font:10px var(--ui-font);cursor:pointer}
.sticker-manage-save:disabled{opacity:.4;cursor:default}
.sticker-manage-del{height:30px;padding:0 11px;border:0;border-radius:999px;background:transparent;color:color-mix(in srgb,#c0392b 78%,var(--text));font:10px var(--ui-font);cursor:pointer}
.sticker-manage-del:active{background:color-mix(in srgb,#c0392b 12%,transparent)}
.sticker-manage-empty{padding:18px 8px;text-align:center;font:10px var(--ui-font);color:var(--textL)}
.composer-picker{position:relative;min-width:0}
.composer-picker summary{list-style:none;display:flex;align-items:center;gap:5px;height:34px;max-width:124px;padding:0 10px;border-radius:999px;cursor:pointer;background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--textL);font:10px var(--ui-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer-picker summary::-webkit-details-marker{display:none}
.composer-picker[open] summary{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--text)}
.composer-picker-menu{position:absolute;left:0;bottom:43px;width:min(280px,calc(100vw - 48px));max-height:52vh;overflow:auto;padding:8px;border-radius:17px;background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid color-mix(in srgb,var(--accent) 13%,transparent);box-shadow:0 18px 50px rgba(0,0,0,.2);backdrop-filter:blur(25px);z-index:60}
.composer-picker.effort .composer-picker-menu{width:190px}
.composer-picker-label{padding:8px 9px 5px;font:600 8px var(--ui-font);letter-spacing:.14em;text-transform:uppercase;color:var(--textL)}
.composer-picker-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px;border:0;border-radius:11px;background:transparent;color:var(--text);font:11px var(--ui-font);text-align:left;cursor:pointer}
.composer-picker-menu button:after{content:'';width:6px;height:6px;border-radius:50%;background:transparent}
.composer-picker-menu button.active{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.composer-picker-menu button.active:after{background:var(--accent)}
.composer-picker-menu button:disabled{opacity:.35}
#attach-menu{bottom:49px;left:0}
.bubble{border:1px solid color-mix(in srgb,var(--accent) 7%,transparent);box-shadow:0 8px 24px color-mix(in srgb,var(--text) 3%,transparent)}
.bubble.ian{border-bottom-left-radius:5px}
.bubble.evie{border-bottom-right-radius:5px}
.work-file-card{display:flex;align-items:center;gap:10px;margin:7px 0;padding:11px;border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);border-radius:16px;background:color-mix(in srgb,var(--card) 56%,transparent);min-width:min(280px,72vw)}
.work-file-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text)}
.work-file-copy{min-width:0;flex:1}
.work-file-name{font:600 11px/1.35 var(--ui-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.work-file-kind{margin-top:3px;font:8px var(--ui-font);letter-spacing:.12em;text-transform:uppercase;color:var(--textL)}
.work-file-actions{display:flex;align-items:center;gap:3px}
.work-file-action{width:32px;height:32px;border:0;border-radius:10px;display:grid;place-items:center;background:transparent;color:var(--textL);text-decoration:none;cursor:pointer}
.work-file-action:active{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text)}
.works-preview-btn.icon-only{width:34px;height:34px;padding:0;display:grid;place-items:center}
.works-preview-btn[hidden]{display:none}

/* 2026-07 vintage theme: sand paper + midnight rose, intentionally more solid */
body[data-theme="vintage"]::before{
  opacity:.48;filter:blur(42px);
  background:
    radial-gradient(ellipse 58% 45% at 12% 16%,rgba(151,82,96,.24),transparent 70%),
    radial-gradient(ellipse 48% 55% at 88% 28%,rgba(120,126,86,.16),transparent 72%),
    radial-gradient(ellipse 58% 46% at 36% 78%,rgba(184,139,89,.18),transparent 72%);
}
body[data-theme="vintage"]{
  background:
    linear-gradient(rgba(255,255,255,.035),rgba(255,255,255,.035)),
    repeating-linear-gradient(104deg,rgba(72,48,37,.018) 0 1px,transparent 1px 5px),
    linear-gradient(155deg,var(--bg),var(--card) 52%,var(--bg));
}
body[data-theme="vintage"] .card,
body[data-theme="vintage"] details.fold>summary,
body[data-theme="vintage"] .settings-overview-chip{
  background:color-mix(in srgb,var(--card) 95%,var(--bg));
  border-color:color-mix(in srgb,var(--accent) 19%,transparent);
  backdrop-filter:blur(calc(var(--glass)*6px));-webkit-backdrop-filter:blur(calc(var(--glass)*6px));
  box-shadow:0 10px 26px rgba(63,45,37,.08);
}
body[data-theme="vintage"] #drawer{
  background:color-mix(in srgb,var(--bg) 97%,var(--card));
  border-right-color:color-mix(in srgb,var(--accent) 22%,transparent);
  backdrop-filter:blur(calc(var(--glass)*8px));-webkit-backdrop-filter:blur(calc(var(--glass)*8px));
}
body[data-theme="vintage"] nav,
body[data-theme="vintage"] .hub-nav{
  background:color-mix(in srgb,var(--nav) 94%,var(--card));
  backdrop-filter:blur(calc(var(--glass)*8px));-webkit-backdrop-filter:blur(calc(var(--glass)*8px));
}
body[data-theme="vintage"] #drawer-btn,
body[data-theme="vintage"] .chat-call-btn,
body[data-theme="vintage"] .chat-header-profile,
body[data-theme="vintage"] .call-slip,
body[data-theme="vintage"] .chat-jump-latest,
body[data-theme="vintage"] .settings-back,
body[data-theme="vintage"] #attach-menu,
body[data-theme="vintage"] .composer-picker-menu{
  background:color-mix(in srgb,var(--card) 96%,var(--bg));
  backdrop-filter:blur(calc(var(--glass)*7px));-webkit-backdrop-filter:blur(calc(var(--glass)*7px));
}
body[data-theme="vintage"] .chat-input-row{
  background:color-mix(in srgb,var(--card) 96%,var(--bg));
  border-color:color-mix(in srgb,var(--accent) 22%,transparent);
  backdrop-filter:blur(calc(var(--glass)*7px));-webkit-backdrop-filter:blur(calc(var(--glass)*7px));
  box-shadow:0 16px 38px rgba(63,45,37,.13);
}
body[data-theme="vintage"] .bubble.ian{
  background:color-mix(in srgb,var(--card) 97%,var(--bg));
  backdrop-filter:blur(calc(var(--glass)*5px));-webkit-backdrop-filter:blur(calc(var(--glass)*5px));
}
body[data-theme="vintage"] .bubble.evie{
  background:color-mix(in srgb,var(--accent) 20%,var(--card));
  backdrop-filter:blur(calc(var(--glass)*5px));-webkit-backdrop-filter:blur(calc(var(--glass)*5px));
}
body[data-theme="vintage"] .keepsake-card{
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--card) 98%,var(--bg)),color-mix(in srgb,var(--accent) 8%,var(--card)));
}
body[data-theme="vintage"] input[type=text],
body[data-theme="vintage"] input[type=password],
body[data-theme="vintage"] textarea{
  background:color-mix(in srgb,var(--card) 90%,var(--bg));
}

.chat-photo-stack{width:154px;height:198px;margin:5px 2px 3px;white-space:normal}
.chat-photo-stack .pstack-stage{margin:auto}
.chat-photo-stack-fallback{width:148px;height:190px;display:block;object-fit:cover;border-radius:13px}
.chat-image-stage{padding:7px 10px 8px;background:color-mix(in srgb,var(--card) 80%,transparent);border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);border-radius:17px 17px 6px 6px}
.chat-image-stage-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font:11px var(--ui-font);color:var(--textL)}
.chat-image-stage-clear{border:0;background:transparent;color:var(--textL);font:12px var(--ui-font);padding:2px 4px;cursor:pointer}
.chat-image-stage-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.chat-image-stage-item{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;background:color-mix(in srgb,var(--accent) 10%,var(--card))}
.chat-image-stage-item img{width:100%;height:100%;display:block;object-fit:cover}
.chat-image-stage-remove{position:absolute;top:3px;right:3px;width:18px;height:18px;border:0;border-radius:50%;background:rgba(20,18,19,.62);color:#fff;font:13px/18px var(--ui-font);text-align:center;cursor:pointer}
.chat-image-stage-uploading{font:11px var(--ui-font);color:var(--textL);padding:9px 2px 2px}
.chat-music-stage{display:none;margin:0 10px 7px;padding:8px;border-radius:14px;background:color-mix(in srgb,var(--card) 84%,transparent);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);align-items:center;gap:9px}
.chat-music-stage img{width:46px;height:46px;border-radius:10px;object-fit:cover;background:color-mix(in srgb,var(--accent) 10%,var(--card))}
.chat-music-stage-copy{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}.chat-music-stage-copy strong,.chat-music-stage-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-music-stage-copy strong{font-size:13px}.chat-music-stage-copy span{font:11px var(--ui-font);color:var(--textL)}
.chat-video-stage{display:none;margin:0 10px 7px;padding:8px;border-radius:14px;background:color-mix(in srgb,var(--card) 84%,transparent);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);align-items:center;gap:9px}
.chat-video-stage video{width:46px;height:46px;border-radius:10px;object-fit:cover;background:color-mix(in srgb,var(--accent) 10%,var(--card));pointer-events:none}
.chat-video-stage-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.chat-video-stage-copy span{font:12px var(--ui-font);color:var(--textL)}
.chat-video-stage-bar{height:3px;border-radius:2px;background:color-mix(in srgb,var(--accent) 16%,transparent);overflow:hidden}
.chat-video-stage-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease}
.chat-video-stage.processing .chat-video-stage-bar i{width:100%!important;animation:videoStagePulse 1.2s ease-in-out infinite}
@keyframes videoStagePulse{50%{opacity:.35}}
#chat-list .chat-video{position:relative;display:block;width:min(220px,62vw);border-radius:16px;overflow:hidden;background:#000;cursor:pointer;
  box-shadow:0 2px 4px rgba(40,32,28,.08),0 14px 30px rgba(40,32,28,.16)}
#chat-list .chat-video video{display:block;width:100%;max-height:300px;object-fit:cover}
#chat-list .chat-video.playing video{object-fit:contain}
.chat-video-play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(20,16,14,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(255,255,255,.35) inset;pointer-events:none}
.chat-video-play:after{content:'';position:absolute;left:18px;top:14px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent rgba(255,255,255,.95)}
#chat-list .chat-video.playing .chat-video-play{display:none}
body #chat-list .bubble.evie:has(> .msg > .chat-video:only-child){padding:0;border:0;border-radius:0;box-shadow:none;background:none;background-image:none}
.chat-music-stage-remove{border:0;background:transparent;color:var(--textL);font-size:18px;cursor:pointer;padding:5px}
.photo-viewer{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;background:rgba(17,14,16,.94);touch-action:none}
.photo-viewer.show{display:flex}
.photo-viewer-image{max-width:100vw;max-height:100vh;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
.photo-viewer-close,.photo-viewer-nav{position:absolute;z-index:2;border:0;color:#fff;background:rgba(0,0,0,.36);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer}
.photo-viewer-close{top:calc(env(safe-area-inset-top,0px) + 12px);right:14px;width:38px;height:38px;border-radius:50%;font-size:22px}
.photo-viewer-nav{top:50%;transform:translateY(-50%);width:40px;height:48px;border-radius:14px;font-size:28px}
.photo-viewer-prev{left:10px}.photo-viewer-next{right:10px}
.photo-viewer-count{position:absolute;z-index:2;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);left:50%;transform:translateX(-50%);padding:6px 11px;border-radius:999px;background:rgba(0,0,0,.4);color:#fff;font:12px var(--ui-font)}
@media(max-width:430px){.chat-image-stage-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.photo-viewer-nav{display:none}}
@media(prefers-reduced-motion:reduce){.page.active,.chat-row.new-msg{animation:none!important}#drawer,.hub-nav,.card{transition:none!important}}
/* ── Claude Work Window ── */
.work-page{display:flex;flex-direction:column;height:100%;overflow:hidden}
.work-statusbar{display:flex;align-items:center;gap:6px;padding:10px 14px 8px;border-bottom:1px solid var(--line);flex-wrap:wrap;flex:0 0 auto}
.work-status-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font:10px/1 var(--ui-font);letter-spacing:.05em;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--text)}
.work-status-pill.idle{background:color-mix(in srgb,var(--textL) 12%,transparent);color:var(--textL)}
.work-status-pill.running{background:color-mix(in srgb,#3b82f6 15%,transparent);color:#3b82f6}
.work-status-pill.awaiting{background:color-mix(in srgb,#f59e0b 15%,transparent);color:#d97706}
.work-status-pill.error{background:color-mix(in srgb,#ef4444 12%,transparent);color:#ef4444}
.work-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.work-usage-bar{font:10px var(--ui-font);color:var(--textL);margin-left:auto;white-space:nowrap}
.work-timeline{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.work-event{border-radius:12px;padding:10px 12px;font:13px/1.55 var(--ui-font);word-break:break-word}
.work-event.ev-text{background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid var(--line);white-space:pre-wrap}
.work-event.ev-user{background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);align-self:flex-end;max-width:90%}
.work-event.ev-tool{background:color-mix(in srgb,var(--card) 60%,transparent);border:1px solid var(--line);font-size:12px}
.work-event.ev-tool-done{opacity:.75;font-size:11px}
.work-event.ev-bash{background:color-mix(in srgb,#1e1e2e 90%,transparent);border:1px solid #333;font:12px/1.4 monospace;color:#a6e3a1}
.work-event.ev-permission{background:color-mix(in srgb,#f59e0b 10%,transparent);border:1px solid color-mix(in srgb,#f59e0b 30%,transparent)}
.work-event.ev-error{background:color-mix(in srgb,#ef4444 8%,transparent);border:1px solid color-mix(in srgb,#ef4444 20%,transparent);color:#ef4444;font-size:12px}
.work-event.ev-result{background:color-mix(in srgb,var(--accent) 6%,transparent);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);font-size:12px}
.work-event.ev-cancelled{background:color-mix(in srgb,var(--textL) 8%,transparent);border:1px solid var(--line);color:var(--textL);font-size:12px}
.work-event.ev-init{font-size:11px;color:var(--textL);padding:4px 8px;border-radius:6px;border:none;background:none}
.work-event-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.work-event-type{font:9px/1 var(--ui-font);letter-spacing:.08em;text-transform:uppercase;color:var(--textL)}
.work-event-tool{font:11px/1 var(--ui-font);font-weight:600;color:var(--text)}
.work-event-time{font:9px var(--ui-font);color:var(--textL);margin-left:auto}
.work-event-summary{font:11px/1.4 var(--ui-font);color:var(--textL);margin-top:2px}
.work-perm-btns{display:flex;gap:8px;margin-top:8px}
.work-perm-btn{padding:5px 14px;border-radius:8px;font:12px var(--ui-font);font-weight:600;border:none;cursor:pointer}
.work-perm-btn.allow{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--text)}
.work-perm-btn.deny{background:color-mix(in srgb,#ef4444 12%,transparent);color:#ef4444}
.work-tool-elapsed{font:10px var(--ui-font);color:var(--textL);margin-top:2px}
.work-input-area{flex:0 0 auto;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.work-input-row{display:flex;gap:8px;align-items:flex-end}
.work-textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:14px var(--ui-font);background:var(--card);color:var(--text);line-height:1.4;max-height:120px;min-height:42px;overflow-y:auto}
.work-textarea:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.work-send-btn{padding:10px 16px;border-radius:12px;border:none;background:var(--accent);color:#fff;font:14px/1 var(--ui-font);font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0}
.work-send-btn:disabled{opacity:.4;cursor:not-allowed}
.work-cancel-btn{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--textL);font:12px var(--ui-font);cursor:pointer}
.work-session-bar{display:flex;align-items:center;gap:8px;font:11px var(--ui-font);color:var(--textL)}
.work-new-session-btn{padding:3px 10px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--textL);font:11px var(--ui-font);cursor:pointer}
.work-spinner{display:inline-block;width:10px;height:10px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:work-spin .7s linear infinite}
@keyframes work-spin{to{transform:rotate(360deg)}}

/* Wallet · 小荷包 */
.wallet-card{padding:20px}
.wallet-name{font:600 13px var(--ui-font);color:var(--textL);letter-spacing:.02em}
.wallet-balance{margin:6px 0 2px;font:400 34px/1.15 'Cormorant Garamond',var(--cjk-serif),serif;color:var(--text)}
.wallet-balance small{font:500 15px var(--ui-font);color:var(--textL);margin-left:2px}
.wallet-goal-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font:12px var(--ui-font);color:var(--textL)}
.wallet-goal-name{color:var(--text);font-weight:600}
.wallet-progress{height:8px;border-radius:6px;margin-top:8px;overflow:hidden;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.wallet-progress span{display:block;height:100%;border-radius:6px;background:var(--accent);transition:width .35s ease}
.wallet-progress-meta{display:flex;justify-content:space-between;margin-top:6px;font:11px var(--ui-font);color:var(--textL)}
.wallet-nogoal{margin-top:12px;font:12px var(--ui-font);color:var(--textL)}
.wallet-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.wallet-months{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin:4px 0 10px}
.wallet-month-btn{flex:0 0 auto;padding:5px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);background:transparent;color:var(--textL);font:12px var(--ui-font);cursor:pointer;white-space:nowrap}
.wallet-month-btn.active{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text);font-weight:600}
.wallet-month-summary{display:flex;gap:16px;font:12px var(--ui-font);color:var(--textL);margin-bottom:10px}
.wallet-month-summary b{color:var(--text)}
.wallet-entry{padding:13px 14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 9%,transparent);margin-bottom:9px;background:color-mix(in srgb,var(--card) 30%,transparent)}
.wallet-entry-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.wallet-entry-amt{font:600 15px var(--ui-font);white-space:nowrap}
.wallet-entry-amt.pos{color:#2f855a}
.wallet-entry-amt.neg{color:#c05353}
.wallet-entry-amt.zero{color:var(--textL)}
.wallet-entry-reason{font:13px/1.5 var(--ui-font);color:var(--text);margin-top:3px;word-break:break-word}
.wallet-entry-meta{font:10px var(--ui-font);color:var(--textL);margin-top:5px;display:flex;flex-wrap:wrap;gap:8px}
.wallet-entry-kindtag{padding:1px 7px;border-radius:8px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--textL)}
.wallet-correction{margin-top:8px;padding-left:10px;border-left:2px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.wallet-correction .wallet-entry{margin-bottom:6px;background:color-mix(in srgb,var(--accent) 5%,transparent)}
.wallet-correction-label{font:10px var(--ui-font);color:var(--textL);margin-bottom:4px}
.wallet-form{margin-top:10px;display:grid;gap:9px}
.wallet-form label{font:11px var(--ui-font);color:var(--textL);display:grid;gap:4px}
.wallet-form input,.wallet-form select{padding:9px 10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);background:transparent;color:var(--text);font:13px var(--ui-font)}
.wallet-form-row{display:flex;gap:9px}
.wallet-form-row>*{flex:1}
.wallet-msg{font:11px var(--ui-font);margin-top:4px;min-height:14px}
.wallet-msg.err{color:#c05353}
.wallet-msg.ok{color:#2f855a}
.wallet-empty{padding:22px;text-align:center;font:12px var(--ui-font);color:var(--textL)}
.wallet-entry-ops{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.wallet-entry.voided{opacity:.72}
.wallet-entry.voided .wallet-entry-reason{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--textL) 70%,transparent)}
.wallet-void-badge{padding:1px 8px;border-radius:8px;font:10px var(--ui-font);background:color-mix(in srgb,#c05353 16%,transparent);color:#c05353}
@media(max-width:520px){.wallet-form-row{flex-direction:column}}

/* Gallery · Ian 的收藏 (phase 1) */
.gallery-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.gallery-add-btn{width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);cursor:pointer;font-size:19px;line-height:1}
.gallery-moved-btn{border:0;border-radius:999px;padding:6px 12px;font:11px var(--ui-font);background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--textL);cursor:pointer}
.gallery-moved-btn.active{background:var(--accent);color:#fff}
.gallery-archived-head{display:flex;align-items:center;justify-content:space-between;font:600 12px var(--ui-font);color:var(--text);margin:4px 2px 12px}
.gallery-archived-head button{border:0;background:transparent;color:var(--accent);font:11px var(--ui-font);cursor:pointer}
.gallery-archived-card{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:9px;border-radius:14px;background:var(--card);border:1px solid color-mix(in srgb,var(--accent) 10%,transparent)}
.gallery-archived-card .ga-thumb{width:46px;height:46px;flex-shrink:0;border-radius:10px;border:1px dashed color-mix(in srgb,var(--accent) 26%,transparent);display:grid;place-items:center;color:var(--textL);opacity:.7}
.gallery-archived-card .ga-body{flex:1;min-width:0}
.gallery-archived-card .ga-title{font:600 13px var(--ui-font);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gallery-archived-card .ga-meta{font:10px var(--ui-font);color:var(--textL);margin-top:3px}
.gallery-archived-card .ga-actions{display:flex;gap:6px;flex-shrink:0}
.gallery-archived-card .ga-actions button{border:0;border-radius:999px;padding:6px 11px;font:11px var(--ui-font);cursor:pointer;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.gallery-archived-card .ga-actions button.primary{background:var(--accent);color:#fff}
.gallery-archived-card .ga-actions button:disabled{opacity:.4;cursor:default}
.gallery-add-btn:active{transform:scale(.92)}
.gallery-cal{padding:14px}
.gallery-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.gallery-cal-nav button{width:32px;height:32px;border:0;border-radius:10px;background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--text);font-size:16px;cursor:pointer}
.gallery-cal-nav button:disabled{opacity:.35;cursor:default}
.gallery-cal-title{font:600 14px var(--ui-font);color:var(--text)}
.gallery-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.gallery-cal-weekday{text-align:center;font:10px var(--ui-font);color:var(--textL);padding-bottom:4px}
.gallery-cal-cell{position:relative;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font:12px var(--ui-font);color:var(--text);background:transparent;border:1px solid transparent;cursor:default;overflow:hidden}
.gallery-cal-cell.blank{visibility:hidden}
.gallery-cal-cell.has-img{cursor:pointer;color:#fff;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.gallery-cal-cell.has-img .gallery-cal-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.82)}
.gallery-cal-cell .gallery-cal-num{position:relative;z-index:1}
.gallery-cal-cell.is-today{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.gallery-cal-cell.is-selected{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.gallery-cal-count{position:absolute;right:2px;bottom:2px;z-index:2;min-width:14px;height:14px;padding:0 3px;border-radius:8px;background:var(--accent);color:#fff;font:9px/14px var(--ui-font);text-align:center}
.gallery-cal-stack{position:absolute;left:3px;top:3px;z-index:2;width:8px;height:8px;border-radius:2px;background:color-mix(in srgb,#fff 70%,transparent);box-shadow:2px 2px 0 color-mix(in srgb,#fff 45%,transparent)}
.gallery-day{margin-top:14px}
.gallery-day-label{font:600 12px var(--ui-font);color:var(--textL);margin-bottom:8px}
.gallery-card{display:flex;gap:11px;padding:11px;border-radius:16px;background:color-mix(in srgb,var(--card) 96%,var(--bg));border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);margin-bottom:9px}
.gallery-card img{flex:0 0 auto;width:64px;height:64px;object-fit:cover;border-radius:12px;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.gallery-card-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.gallery-card-title{font:600 14px var(--ui-font);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gallery-card-impression{font:11px/1.5 var(--ui-font);color:var(--textL);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gallery-card-actions{display:flex;gap:6px;margin-top:2px}
.gallery-card-actions button{border:0;background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent);font:10px var(--ui-font);padding:5px 9px;border-radius:999px;cursor:pointer}
.gallery-empty{padding:20px;text-align:center;font:12px var(--ui-font);color:var(--textL)}
.gallery-detail-sheet .gallery-detail-img{width:100%;max-height:44vh;object-fit:contain;border-radius:14px;background:color-mix(in srgb,var(--accent) 5%,transparent)}
.gallery-detail-field{margin-top:14px}
.gallery-detail-field .section-label{margin-bottom:4px}
.gallery-detail-field .gallery-detail-value{font:13px/1.7 var(--ui-font);color:var(--text);white-space:pre-wrap}
.gallery-detail-field textarea,.gallery-detail-field input{width:100%;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:10px;background:var(--bg);color:var(--text);font:13px var(--ui-font);padding:8px}
.gallery-detail-field textarea{min-height:96px;line-height:1.6;resize:vertical}
.gallery-detail-actions{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;margin-top:18px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--accent) 9%,transparent)}
.gallery-detail-actions button{border:0;border-radius:999px;font:11px var(--ui-font);padding:7px 13px;cursor:pointer;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.gallery-detail-actions button.primary{background:var(--accent);color:#fff}
.gallery-detail-actions button:disabled{opacity:.4;cursor:default}
.gallery-detail-actions .next-phase{background:transparent;color:var(--textL);cursor:default}
.gallery-detail-actions .gallery-forget-btn{background:transparent;color:#b23b3b;border:1px solid color-mix(in srgb,#b23b3b 32%,transparent)}
.gallery-detail-actions .gallery-forget-btn.danger{background:#b23b3b;color:#fff;border-color:#b23b3b}
.wallet-msg.warn{color:#8a5a1c}
.gallery-chat-placeholder{display:flex;align-items:center;gap:7px;max-width:100%;margin:4px 0;padding:10px 13px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--accent) 26%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent);color:var(--textL);font:12px var(--ui-font)}
.gallery-chat-placeholder svg{flex-shrink:0;opacity:.7}
.gallery-ask-row{display:none;align-items:center;gap:8px;padding:6px 12px 2px;font:11px var(--ui-font);color:var(--textL)}
.gallery-ask-row.show{display:flex}
.gallery-ask-row label{display:flex;align-items:center;gap:6px;cursor:pointer}
.gallery-ask-row .gallery-ask-note{opacity:.75}
.gallery-from-tag{font:10px var(--ui-font);color:var(--accent);padding:2px 4px}

/* ============================================================
   2026-09 M3B chat revision: true visual turns (flat rows, no
   wrapper-per-turn), spacious bubbles, split colour variables,
   lighter header, standalone completed-call slip, process-trail
   tools, compact composer, retuned return-to-latest.
   Chat selectors are scoped under #chat-list / #p-chat so the
   calendar day sheet (which reuses .chat-row / .bubble) is
   untouched.
   ============================================================ */
:root{
  --ian-bubble:#FBF7F0;                       /* fixed warm ivory in light themes */
  --ian-bubble-edge:color-mix(in srgb,#8c7a58 15%,transparent);
  --ian-bubble-text:var(--text);
  --evie-bubble:color-mix(in srgb,var(--accent) 24%,var(--card)); /* follows theme/accent */
  --composer-surface:color-mix(in srgb,#FBF7F0 93%,transparent);  /* same ivory family, slight translucency */
  --m3d-glass-fill:color-mix(in srgb,var(--card) 82%,transparent);
  --m3d-glass-fill-strong:color-mix(in srgb,var(--card) 90%,transparent);
  --m3d-glass-line:color-mix(in srgb,var(--accent) 18%,transparent);
  --m3d-glass-highlight:color-mix(in srgb,#fff 34%,transparent);
  --m3d-glass-shadow:0 9px 26px color-mix(in srgb,var(--text) 10%,transparent);
  --m3d-glass-blur:calc(var(--glass)*10px);
  --m3d-glass-blur-strong:calc(var(--glass)*14px);
  --chat-turn-gap:18px;
  --chat-same-gap:6px;
}
body[data-theme="vintage"]{
  --ian-bubble:#F6EDDC;
  --composer-surface:color-mix(in srgb,#F6EDDC 95%,transparent);
}
body[data-theme="spring"]{
  --ian-bubble:#EBF4E1;                       /* 2026-09-27 春日樱芽: Ian in spring green (lightened on request), Evie stays pink */
  --ian-bubble-edge:color-mix(in srgb,#6f9f50 15%,transparent);
  --composer-surface:color-mix(in srgb,#FCFEF7 93%,transparent);
}
body[data-theme="fjord"]{
  --ian-bubble:#1E1E2B;                       /* readable dark-theme fallback */
  --ian-bubble-edge:color-mix(in srgb,#9aa0bd 18%,transparent);
  --composer-surface:color-mix(in srgb,#1E1E2B 90%,transparent);
  --m3d-glass-fill:color-mix(in srgb,var(--card) 86%,transparent);
  --m3d-glass-fill-strong:color-mix(in srgb,var(--card) 92%,transparent);
  --m3d-glass-line:color-mix(in srgb,#fff 14%,transparent);
  --m3d-glass-highlight:color-mix(in srgb,#fff 12%,transparent);
  --m3d-glass-shadow:0 9px 26px rgba(0,0,0,.28);
}

/* --- turn layout: identity + turn-time are bubble siblings, one per turn --- */
#chat-list .chat-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-width:0;margin:var(--chat-same-gap) 0 0}
#chat-list .chat-row:first-child{margin-top:0}
#chat-list .chat-row.group-start{margin-top:var(--chat-turn-gap)}
#chat-list .chat-row.grouped{margin-top:var(--chat-same-gap)}   /* override legacy -5px */
#chat-list .chat-row.right{align-items:flex-end}
#chat-list .chat-identity{display:flex;align-items:center;gap:7px;margin:0 2px 3px;max-width:100%}
#chat-list .chat-row.right .chat-identity{flex-direction:row-reverse}
#chat-list .chat-identity .chat-avatar{width:26px;height:26px;border-radius:9px;flex:none}
#chat-list .chat-identity .chat-name{font:600 12px/1 var(--ui-font);color:var(--textL);letter-spacing:.01em;margin:0}
body.chat-avatars-hidden.chat-names-hidden #chat-list .chat-identity{display:none}
#chat-list .chat-turn-time{margin:3px 4px 1px;font:10px/1 var(--ui-font);color:var(--textL);opacity:.7}
#chat-list .chat-bubbles{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;min-width:0}
#chat-list .chat-row.right .chat-bubbles{align-items:flex-end}

/* --- spacious bubbles --- */
#chat-list .bubble{display:block;box-sizing:border-box;padding:8px 11px;width:fit-content;max-width:min(89%,34rem);border:1px solid var(--ian-bubble-edge);box-shadow:0 5px 17px color-mix(in srgb,var(--text) 4%,transparent)}
#chat-list .bubble,#chat-list .bubble *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#chat-list .bubble .msg{font-size:14px;line-height:1.55;font-family:var(--ui-font);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
#chat-list .bubble.ian{background:var(--ian-bubble);color:var(--ian-bubble-text);border-radius:16px;backdrop-filter:none;-webkit-backdrop-filter:none}
#chat-list .bubble.evie{background:var(--evie-bubble);border-radius:16px;backdrop-filter:none;-webkit-backdrop-filter:none}
/* M3C: fully rounded bubbles -- the group-end tail is neutralised to the full 16px radius */
#chat-list .chat-row.group-end .bubble.ian{border-bottom-left-radius:16px}
#chat-list .chat-row.group-end .bubble.evie{border-bottom-right-radius:16px}
body.has-bg #chat-list .bubble.ian{background:color-mix(in srgb,var(--ian-bubble) calc(var(--bubop,0.92)*100%),transparent)}
/* M3C: with a custom chat background, bubble-opacity reaches Evie bubble + composer too */
body.has-bg #chat-list .bubble.evie{background:color-mix(in srgb,var(--evie-bubble) calc(var(--bubop,0.92)*100%),transparent)}
body.has-bg #p-chat .chat-input-row{background:color-mix(in srgb,var(--composer-surface) calc(var(--bubop,0.92)*100%),transparent)}

/* --- process-trail tools: no avatar/name/time/bubble of their own --- */
#chat-list .cc-tools{display:flex;flex-direction:column;gap:0;margin:3px 2px 0;max-width:min(84%,32rem)}
#chat-list .chat-row.right .cc-tools{align-items:flex-end}
#chat-list .cc-tools:empty{display:none}
.cc-tools-summary{display:inline-flex;align-items:center;gap:7px;max-width:100%;border:0;background:transparent;padding:3px 2px;cursor:pointer;font:11px/1.4 var(--ui-font);color:var(--textL);text-align:left}
.cc-tools-dot{width:6px;height:6px;border-radius:50%;flex:none;background:#3fae55}
.cc-tools-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cc-tools-chevron{flex:none;transition:transform .18s;opacity:.6}
.cc-tools.open .cc-tools-chevron{transform:rotate(90deg)}
.cc-tools-detail{display:none;padding:2px 2px 4px 15px}
.cc-tools.open .cc-tools-detail{display:flex;flex-direction:column;gap:3px}
.cc-tool-line{font:11px/1.5 var(--ui-font);color:var(--textL);word-break:break-word}
.cc-tool-line b{font-weight:600;color:var(--text)}
#chat-list .ian-link-chips{display:flex;flex-wrap:wrap;gap:6px;margin:3px 2px 0;max-width:min(84%,32rem)}
#chat-list .ian-link-chips a{display:inline-block;max-width:200px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid color-mix(in srgb,var(--accent) 14%,transparent);font:11px/1.4 var(--ui-font);color:var(--textL);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a lone chat image sits on the page like the music card: no bubble, fixed small size */
#chat-list .chat-single-img{cursor:zoom-in;display:block;max-width:min(200px,60vw);max-height:200px;width:auto;height:auto;border-radius:16px;margin:0;
  box-shadow:0 2px 4px rgba(40,32,28,.08),0 14px 30px rgba(40,32,28,.16)}
body #chat-list .bubble.ian:has(> .msg > .chat-single-img:only-child),
body #chat-list .bubble.evie:has(> .msg > .chat-single-img:only-child){
  padding:0;border:0;border-radius:0;box-shadow:none;background:none;background-image:none;
}

/* --- lighter chat header: drop the heavy full-width board, enlarge the pill --- */
#p-chat .chat-header{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:calc(env(safe-area-inset-top,0px) + 12px) 56px 6px}
#p-chat .chat-header-profile{padding:10px 24px;border-radius:999px;background:color-mix(in srgb,var(--card) 70%,transparent);box-shadow:0 4px 16px color-mix(in srgb,var(--text) 7%,transparent)}
#p-chat .chat-header h2{font-size:18px;letter-spacing:.03em}
#p-chat .chat-call-btn{top:calc(env(safe-area-inset-top,0px) + 13px)}

/* --- standalone completed-call slip: slim cream-yellow paper --- */
#chat-list .chat-row.chat-row-event{align-items:center;align-self:stretch;width:100%;margin:var(--chat-turn-gap) 0}
#chat-list .chat-row-event .call-line{display:flex;align-items:center;gap:10px;width:min(80%,300px);margin:2px auto;font:12px/1.4 var(--ui-font);letter-spacing:.06em;color:color-mix(in srgb,var(--textL) 72%,transparent)}
#chat-list .chat-row-event .call-line::before,#chat-list .chat-row-event .call-line::after{content:'';flex:1;height:1px;background:color-mix(in srgb,var(--textL) 22%,transparent)}
#chat-list .chat-row-event .call-line span{flex:none}
#chat-list .chat-row-event .call-slip{position:relative;overflow:hidden;min-width:min(72vw,280px);max-width:min(86%,330px);min-height:42px;padding:8px 17px;border:1px solid #E6D49A;border-radius:3px;color:#6c5d31;background:linear-gradient(176deg,#FCF4D8 0%,#F7EBBE 62%,#F2E3AC 100%);box-shadow:0 3px 9px rgba(120,98,38,.16),inset 0 1px 0 rgba(255,255,255,.55);clip-path:polygon(0 6%,2% 0,98% 2%,100% 0,100% 94%,98% 100%,3% 98%,0 100%)}
#chat-list .chat-row-event .call-slip::before{content:'';position:absolute;left:0;right:0;top:34%;height:1px;background:linear-gradient(90deg,transparent,rgba(150,125,60,.28) 20%,rgba(150,125,60,.28) 80%,transparent)}
#chat-list .chat-row-event .call-slip::after{content:'';position:absolute;left:-10%;top:-40%;width:32%;height:180%;transform:rotate(9deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent)}
#chat-list .chat-row-event .call-slip .call-slip-icon{background:rgba(150,125,60,.16);color:#8a7333}
#chat-list .chat-row-event .call-slip .call-slip-text{color:#6c5d31;font-weight:600}
#chat-list .chat-row-event .call-slip .call-slip-chevron{color:rgba(108,93,49,.6)}
#chat-list .chat-row-event .call-slip.call-slip-plain{background:color-mix(in srgb,var(--card) 78%,transparent);border-color:color-mix(in srgb,var(--textL) 20%,transparent);color:var(--textL);clip-path:none;box-shadow:none}
#chat-list .chat-row-event .call-slip.call-slip-plain::before,#chat-list .chat-row-event .call-slip.call-slip-plain::after{display:none}
#chat-list .chat-row-event .call-slip.call-slip-plain .call-slip-icon{background:color-mix(in srgb,var(--textL) 14%,transparent);color:var(--textL)}
#chat-list .chat-row-event .call-slip.call-slip-plain .call-slip-text{color:var(--textL);font-weight:400}

/* --- compact composer: warm-ivory surface, combined-looking model - effort --- */
#p-chat .chat-input-row{background:var(--composer-surface);border-color:var(--ian-bubble-edge)}
.composer-modelrow{display:flex;align-items:center;min-width:0;border-radius:999px;background:color-mix(in srgb,var(--accent) 7%,transparent)}
.composer-modelrow .composer-picker summary{background:transparent;max-width:104px}
.composer-modelrow .composer-picker[open] summary{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.composer-modelrow .composer-picker:first-child summary{border-radius:999px 0 0 999px}
.composer-modelrow .composer-picker+.composer-picker summary{border-left:1px solid color-mix(in srgb,var(--textL) 22%,transparent);border-radius:0 999px 999px 0}
#p-chat .send-btn{background:var(--accent);box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 28%,transparent)}

/* --- M3D WebKit-first glass: floating chat controls only --- */
#drawer-btn,
#p-chat .chat-header-profile,
#p-chat .chat-call-btn,
#attach-menu,
#p-chat .composer-picker-menu,
#p-chat .chat-jump-latest{
  background:var(--m3d-glass-fill);
  border:1px solid var(--m3d-glass-line);
  box-shadow:inset 0 1px 0 var(--m3d-glass-highlight),var(--m3d-glass-shadow);
  backdrop-filter:blur(var(--m3d-glass-blur));
  -webkit-backdrop-filter:blur(var(--m3d-glass-blur));
}
#p-chat .chat-input-row{
  background:var(--composer-surface);
  border-color:var(--m3d-glass-line);
  box-shadow:inset 0 1px 0 var(--m3d-glass-highlight),var(--m3d-glass-shadow);
  backdrop-filter:blur(var(--m3d-glass-blur-strong));
  -webkit-backdrop-filter:blur(var(--m3d-glass-blur-strong));
}
#p-chat .composer-picker-menu,
#attach-menu{background:var(--m3d-glass-fill-strong);backdrop-filter:blur(var(--m3d-glass-blur-strong));-webkit-backdrop-filter:blur(var(--m3d-glass-blur-strong))}
body.has-bg #drawer-btn,
body.has-bg #p-chat .chat-header-profile,
body.has-bg #p-chat .chat-call-btn,
body.has-bg #attach-menu,
body.has-bg #p-chat .composer-picker-menu,
body.has-bg #p-chat .chat-jump-latest{background:var(--m3d-glass-fill-strong)}
#drawer-btn,
#p-chat .chat-header-profile,
#p-chat .chat-call-btn,
#p-chat .send-btn{transition:transform 120ms cubic-bezier(.2,.8,.2,1)}
#p-chat .chat-jump-latest{transition:opacity .2s ease,transform 120ms cubic-bezier(.2,.8,.2,1)}
#drawer-btn:active,
#p-chat .chat-header-profile:active,
#p-chat .chat-call-btn:active,
#p-chat .chat-jump-latest:active,
#p-chat .send-btn:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){
  #drawer-btn,
  #p-chat .chat-header-profile,
  #p-chat .chat-call-btn,
  #p-chat .chat-jump-latest,
  #p-chat .send-btn{transition:none}
  #drawer-btn:active,
  #p-chat .chat-header-profile:active,
  #p-chat .chat-call-btn:active,
  #p-chat .chat-jump-latest:active,
  #p-chat .send-btn:active{transform:none}
}

/* --- return-to-latest: clear the revised composer + safe areas --- */
#chat-list{padding-bottom:188px}
.chat-jump-latest{bottom:calc(env(safe-area-inset-bottom,0px) + 128px)}
body:not(.tabs-mode) .chat-jump-latest{bottom:calc(env(safe-area-inset-bottom,0px) + 112px)}

/* Keyboard shell hotfix: keep the chat chrome inside the actual iOS visual
   viewport. Only #chat-list scrolls; focusing the textarea must never pan the
   whole document or strand a shrunken page after the keyboard closes. */
body.chat-viewport-lock{height:var(--chat-vvh,100dvh);min-height:0;overflow:hidden;padding-bottom:0}
body.chat-viewport-lock #p-chat.active{
  position:fixed;top:var(--chat-vv-top,0px);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;width:min(100%,430px);height:var(--chat-vvh,100dvh);
  box-sizing:border-box;overflow:hidden;padding:0 20px
}
body.chat-viewport-lock #p-chat .chat-header{position:relative;top:auto;flex:0 0 auto;width:100%}
body.chat-viewport-lock #p-chat #chat-list{
  flex:1 1 auto;min-height:0;max-height:none!important;width:100%;overflow-y:auto;
  overflow-x:hidden;padding-bottom:12px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch
}
body.chat-viewport-lock #p-chat .chat-input-area{
  position:relative;left:auto;bottom:auto!important;transform:none;flex:0 0 auto;
  width:100%;max-width:none;padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px))
}
body.chat-viewport-lock.chat-keyboard-open #p-chat .chat-input-area{padding-bottom:8px}
body.chat-viewport-lock #p-chat .chat-jump-latest{
  position:absolute;right:16px;bottom:calc(var(--chat-composer-height,96px) + 14px)
}
/* Resting composer: one light pill. It unfolds only while the keyboard is up. */
body.chat-viewport-lock:not(.chat-keyboard-open) #p-chat .chat-input-row:not(.user-voice-mode){
  flex-direction:row;align-items:center;gap:4px;min-height:54px;
  border-radius:999px;padding:5px 6px 5px 15px
}
body.chat-viewport-lock:not(.chat-keyboard-open) #p-chat .chat-input-row:not(.user-voice-mode) #chat-input{
  min-width:0;min-height:40px!important;height:40px!important;max-height:40px!important;
  padding:9px 2px 7px;line-height:24px;overflow:hidden
}
body.chat-viewport-lock:not(.chat-keyboard-open) #p-chat .chat-input-row:not(.user-voice-mode) .composer-toolbar{
  flex:0 0 auto;gap:2px;min-height:40px
}
body.chat-viewport-lock:not(.chat-keyboard-open) #p-chat .chat-input-row:not(.user-voice-mode) .composer-modelrow,
body.chat-viewport-lock:not(.chat-keyboard-open) #p-chat .chat-input-row:not(.user-voice-mode) .composer-spacer{
  display:none
}
/* Keep an opened model/effort menu reachable when iOS dismisses the keyboard
   after its summary is tapped. The row folds away again after selection. */
body.chat-viewport-lock:not(.chat-keyboard-open) #p-chat .chat-input-row:not(.user-voice-mode) .composer-modelrow:has(.composer-picker[open]){
  display:flex
}
body.chat-viewport-lock:not(.chat-keyboard-open) #p-chat .chat-input-row:not(.user-voice-mode) .img-btn,
body.chat-viewport-lock:not(.chat-keyboard-open) #p-chat .chat-input-row:not(.user-voice-mode) .send-btn,
body.chat-viewport-lock:not(.chat-keyboard-open) #p-chat .chat-input-row:not(.user-voice-mode) .composer-voice-btn,
body.chat-viewport-lock:not(.chat-keyboard-open) #p-chat .chat-input-row:not(.user-voice-mode) .sticker-compose-btn{
  width:36px;height:36px
}
/* ============================================================================
   2026-09-12 tabs-mode composer fix (layout only, no restyling).
   In bottom-nav mode the chat composer sat on top of the nav bar and messages
   could not be sent. `.chat-input-area` has a base `bottom:72px` written for
   exactly this, but a later rule overrode it to `safe-area + 11px` for BOTH
   nav modes, so the clearance was lost. The bar is 8 + 48 + safe-area tall,
   so both layouts below reserve `safe-area + 62px` / `+ 60px`, using the
   bar's own 20px env() fallback so desktop and notched devices agree.
   Two layouts need covering:
     1. the fixed composer;
     2. the `chat-viewport-lock` flex column (always on while the chat page is
        open), where the composer is in normal flow and `bottom` is forced to
        auto -- there the column itself reserves the bar's height as padding.
        Skipped while the keyboard is open, because the bar is then below the
        visual viewport and reserving space would leave a gap.
   Drawer mode is untouched: it keeps its own `:not(.tabs-mode)` rule above.
   ========================================================================= */
body.tabs-mode .chat-input-area{bottom:calc(env(safe-area-inset-bottom,20px) + 62px)}
body.tabs-mode.chat-viewport-lock:not(.chat-keyboard-open) #p-chat.active{
  padding-bottom:calc(env(safe-area-inset-bottom,20px) + 60px);
}
/* 2026-09-12 keyboard occlusion fix: iOS re-anchors position:fixed elements to
   the visual viewport, so the bottom bar rode up with the keyboard and covered
   the chat composer. While the keyboard is open the bar is not reachable
   anyway, so it is taken out of flow entirely. `chat-keyboard-open` is only set
   on the chat page (syncChatViewport returns early elsewhere) and is cleared by
   setChatViewportLocked on leaving, so no other page is affected. The chat
   page's own visuals are untouched. */
body.chat-keyboard-open nav{display:none}
/* ============================================================================
   2026-09-12 visual language pass -- Moment / Us / drawer / Settings only.
   Additive: everything lives at the end of the sheet, nothing above is
   deleted, and every selector is scoped to one of those four surfaces.
   #p-chat is deliberately untouched (it holds no .card, verified).

   Direction taken from Evie's reference screenshots: a warm oat paper ground,
   soft borderless blocks that sit on it by value alone, a large serif paired
   with a very small letterspaced caps label, muted natural tints, and real
   whitespace. Blocks vary in size and tint on purpose -- no uniform grid of
   identical entries. No new markup, no new copy, no animation.
   ========================================================================= */

/* --- scoped tokens: warm the theme's own colours rather than replacing them,
       so sakura / vintage / fjord all stay themselves --- */
:root,body,.us-page,#p-me,#p-memory,#drawer{
  --paper:var(--bg);
  --sheet:var(--card);
  --edge:color-mix(in srgb,var(--text) 6%,transparent);
  --lift:0 1px 2px color-mix(in srgb,var(--text) 4%,transparent),
         0 10px 26px color-mix(in srgb,var(--text) 5%,transparent);
  --serif:'Cormorant Garamond',var(--cjk-serif),serif;
  --sage:#8FAE96;--mist:#93A9C6;--clay:#C9A079;--butter:#E3CE97;
}
/* the tiny caps label that pairs with the serif -- the core of the look */
.us-page .page-kicker,#p-me .page-kicker,#p-memory .page-kicker,
.us-group-title,#p-me .settings-overview-label,
#drawer .drawer-section{
  font:400 9px/1.4 var(--ui-font)!important;letter-spacing:.2em;text-transform:uppercase;
  color:var(--textL);opacity:.62;
}
.us-page .page-heading,#p-me .page-heading,#p-memory .page-heading{
  margin:11px 0 7px;font-family:var(--serif);font-size:36px;font-weight:400;letter-spacing:.005em;
}
.us-page .page-subtitle,#p-me .page-subtitle,#p-memory .page-subtitle{
  max-width:25ch;font-size:11.5px;line-height:1.75;opacity:.76;
}
.us-page .shell-page-head,#p-me .shell-page-head{padding-top:56px;margin-bottom:25px}

/* ---------------------------------------------------------------- US ------ */
.us-page{
  padding:0 20px calc(env(safe-area-inset-bottom,0px) + 58px);
}
/* hero: no shell around it; the cover is a soft band and the avatars cross it */
.us-hero{margin:0 0 34px;border:0;background:none;border-radius:0;overflow:visible}
.us-cover{
  height:138px;border-radius:24px;box-shadow:var(--lift);
  background:linear-gradient(146deg,
    color-mix(in srgb,var(--clay) 34%,var(--sheet)),
    color-mix(in srgb,var(--butter) 26%,var(--sheet)) 54%,
    color-mix(in srgb,var(--sage) 22%,var(--sheet)));
  background-size:cover;background-position:center;
}
.us-cover:after{
  content:'change cover';left:16px;right:auto;top:auto;bottom:12px;
  padding:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  font:400 9px/1 var(--ui-font);letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,#fff 78%,transparent);text-shadow:0 1px 6px rgba(40,32,24,.4);
}
.us-identity{padding:0 4px;margin-top:-23px;gap:14px;align-items:flex-end}
.us-avatars{padding-left:3px}
.us-avatars img{width:54px;height:54px;border-width:3px;box-shadow:0 6px 18px color-mix(in srgb,var(--text) 12%,transparent)}
.us-name{font-family:var(--serif);font-size:25px;font-weight:600}
.us-note{font-size:11px;margin-top:5px;opacity:.74}

.us-group{margin:0 0 30px}
.us-group:last-child{margin-bottom:0}
.us-group-title{display:block;margin:0 0 12px 3px}
/* entries become soft blocks, laid out differently per group */
.us-page .us-directory{background:none;border:0;border-radius:0;overflow:visible}
.us-page .us-entry{
  flex-direction:column;align-items:flex-start;justify-content:flex-end;
  gap:7px;min-height:116px;padding:15px 16px 17px;
  border:0;border-bottom:0;border-radius:21px;
  background:var(--sheet);box-shadow:var(--lift);
}
.us-page .us-entry:active{background:var(--sheet);opacity:.72}
.us-page .us-entry-arrow{display:none}          /* the whole block is the target */
.us-page .us-entry-icon{
  width:auto;height:auto;flex:none;padding:0;background:none;border-radius:0;
  margin-bottom:auto;font-size:14px;opacity:.5;
}
.us-page .us-entry-name{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.15}
.us-page .us-entry-note{margin-top:0;font-size:10.5px;line-height:1.55;opacity:.68}

/* Closer to Ian -- a pair of tall blocks */
[data-us-group="ian"] .us-directory{display:grid;grid-template-columns:1fr 1fr;gap:12px}
[data-us-group="ian"] .us-entry:nth-child(1){background:color-mix(in srgb,var(--sage) 13%,var(--sheet))}
[data-us-group="ian"] .us-entry:nth-child(2){background:color-mix(in srgb,var(--mist) 13%,var(--sheet));border-radius:18px 22px 18px 22px}
/* only Inner World left (2026-10-04): one full-width block, same rhythm as Keepsakes */
[data-us-group="ian"] .us-entry:only-child{grid-column:1/-1;min-height:0;padding:19px 20px 21px;border-radius:23px}
[data-us-group="ian"] .us-entry:only-child .us-entry-name{font-size:27px;font-weight:400}
[data-us-group="ian"] .us-entry:only-child .us-entry-icon{margin-bottom:9px}

/* Keepsakes -- one wide block, warmer, the page's anchor */
[data-us-group="keep"] .us-entry{
  min-height:0;padding:19px 20px 21px;border-radius:23px;
  background:color-mix(in srgb,var(--clay) 15%,var(--sheet));
}
[data-us-group="keep"] .us-entry-icon{margin-bottom:9px;font-size:16px}
[data-us-group="keep"] .us-entry-name{font-size:27px;font-weight:400}
[data-us-group="keep"] .us-entry-note{max-width:30ch;font-size:11px}

/* Life together -- a pair again, but shorter and differently tinted */
[data-us-group="life"] .us-directory{display:grid;grid-template-columns:1fr 1fr;gap:12px}
[data-us-group="life"] .us-entry{min-height:98px}
[data-us-group="life"] .us-entry:nth-child(1){background:color-mix(in srgb,var(--butter) 15%,var(--sheet));border-radius:22px 18px 22px 18px}
[data-us-group="life"] .us-entry:nth-child(2){background:color-mix(in srgb,var(--sage) 11%,var(--sheet))}
[data-us-group="life"] .us-entry-name{font-size:20px}

/* nested directory page: first item leads full width, the rest pair up */
#p-us-directory{padding:0 20px calc(env(safe-area-inset-bottom,0px) + 58px)}
.us-directory-head{padding-top:54px;margin-bottom:27px;gap:12px;align-items:flex-start}
.us-directory-head button{
  width:auto;height:auto;padding:3px 0 0;border:0;border-radius:0;background:none;
  font-size:25px;line-height:1;color:var(--textL);opacity:.6;
}
.us-directory-title{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.1}
.us-directory-subtitle{margin-top:6px;max-width:28ch;font-size:11px;line-height:1.6;opacity:.74}
#us-directory-list{display:flex;flex-direction:column;gap:12px}
#us-directory-list .us-entry{min-height:0;padding:19px 20px 21px;border-radius:22px}
#us-directory-list .us-entry .us-entry-name{font-size:25px;font-weight:400}
#us-directory-list .us-entry .us-entry-note{max-width:34ch}
#us-directory-list .us-entry:first-child{background:color-mix(in srgb,var(--clay) 14%,var(--sheet))}
#us-directory-list .us-entry:nth-child(2){background:color-mix(in srgb,var(--butter) 13%,var(--sheet))}
#us-directory-list .us-entry:nth-child(3){background:color-mix(in srgb,var(--sage) 12%,var(--sheet));border-radius:18px 22px 18px 22px}
#us-directory-list .us-entry:nth-child(4){background:color-mix(in srgb,var(--mist) 12%,var(--sheet))}

/* ------------------------------------------------------------ MOMENT ------ */
.moment-hero{height:250px;margin-bottom:54px;border-radius:0 0 28px 28px}
.moment-cover-btn,.moment-compose-btn{
  width:37px;height:37px;border:0;border-radius:13px;font-size:17px;
  background:rgba(28,24,20,.2);
}
.moment-profile img{width:72px;height:72px;border-radius:24px}
.moment-profile-name{font-family:var(--serif);font-size:19px}
/* posts: soft sheets that sit slightly off-axis, like notes dropped on paper */
.moment-route .moment-feed-item{
  grid-template-columns:38px 1fr;gap:12px;
  padding:15px 16px 16px;margin-bottom:14px;
  border-bottom:0;border-radius:21px;
  background:var(--sheet);box-shadow:var(--lift);
}
.moment-route .moment-feed-item:nth-child(even){margin-left:15px}
.moment-route .moment-feed-item:nth-child(odd){margin-right:11px}
.moment-route .moment-feed-item:nth-child(3n){border-radius:18px 23px 19px 22px}
.moment-route .moment-feed-avatar{width:38px;height:38px;border-radius:50%}
.moment-route .moment-feed-name{font-family:var(--serif);font-size:17px;font-weight:600}
.moment-route .moment-feed-time{
  margin-top:9px;font:400 9px var(--ui-font);letter-spacing:.16em;text-transform:uppercase;opacity:.6;
}
.moment-route .moment-feed-item .moment-text{font-size:13.5px;line-height:1.8;margin-top:5px}
.moment-route .moment-feed-item .moment-img{border-radius:15px;margin-top:11px}
.moment-route .moment-feed-item .moment-footer{gap:16px;margin-top:11px}
.moment-route .moment-feed-item .moment-footer button{
  font:400 9px var(--ui-font);letter-spacing:.13em;text-transform:uppercase;opacity:.72;
}
.moment-route .comment-list{margin-top:10px;padding-top:9px;border-top:1px solid var(--edge)}
.moment-route .comment-item{font-size:12px;line-height:1.7;opacity:.85}
.moment-route .moment-composer{
  border:0;border-radius:22px;background:var(--sheet);box-shadow:var(--lift);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.moment-route .moment-compose-menu{border-radius:18px;background:var(--sheet)}

/* ------------------------------------------------------------ DRAWER ------ */
#drawer{
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  border-right:0;border-radius:0 28px 28px 0;
}
.drawer-head{border-bottom:0;padding-bottom:14px}
.drawer-profile-avatar{border-radius:20px}
.drawer-profile-name{font-family:var(--serif);font-size:19px;font-weight:600}
.drawer-settings{border-top:0;padding-top:8px}
#drawer .drawer-section{margin:0 auto 7px;padding:14px 0 4px 20px}
/* rows read as a written list, not a menu: serif, no pill, a quiet mark */
#drawer .drawer-item{
  position:relative;background:none;border-radius:14px;
  font-family:var(--serif);font-size:20px;font-weight:500;
  min-height:54px;padding:12px 18px 12px 20px;
}
#drawer .drawer-item.active{background:none;font-weight:600;color:var(--text)}
#drawer .drawer-item.active::before{
  content:'';position:absolute;left:6px;top:50%;margin-top:-3px;
  width:6px;height:6px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 70%,transparent);
}
#drawer .drawer-item svg{opacity:.4}
/* 2026-10-04: More opens a quieter second level in place (smaller, lighter, indented) */
#drawer .drawer-more-caret{margin-left:auto;font:400 18px var(--ui-font);opacity:.35;transition:transform .25s}
#drawer .drawer-more[aria-expanded="true"] .drawer-more-caret{transform:rotate(90deg)}
#drawer .drawer-more-list{display:flex;flex-direction:column;margin:-4px 0 6px 50px}
#drawer .drawer-more-list[hidden]{display:none}
#drawer .drawer-subitem{position:relative;text-align:left;border:0;background:none;padding:8px 10px;font:400 16px var(--serif);color:color-mix(in srgb,var(--text) 58%,transparent);cursor:pointer}
#drawer .drawer-subitem.active{color:var(--text);font-weight:500}
#drawer .drawer-subitem.active::before{content:'';position:absolute;left:-6px;top:50%;margin-top:-2.5px;width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--accent) 70%,transparent)}
.rb-head{padding-top:64px}
#drawer-btn{border:0;border-radius:14px;background:color-mix(in srgb,var(--bg) 80%,transparent)}
/* drawer home: the pair, the day count, the to-do rail */
#drawer .drawer-home{display:block;position:relative;padding:8px 2px 6px}
.drawer-pair{display:flex;align-items:flex-end;justify-content:space-between}
.drawer-pair .us-avatars img{width:48px;height:48px}
.drawer-days{text-align:right}
.drawer-days b{display:block;font:400 54px/.95 var(--serif);color:var(--text);letter-spacing:-.01em}
.drawer-days span,.drawer-todo-label{display:block;margin-top:4px;font:400 9px/1.4 var(--ui-font);letter-spacing:.2em;text-transform:uppercase;color:var(--textL);opacity:.62}
.drawer-todo-head{display:flex;justify-content:space-between;align-items:center;margin:22px 1px 10px}
.drawer-todo-label{margin:0}
.drawer-todo-meta{display:flex;align-items:center;gap:10px;font:10.5px var(--ui-font);color:var(--textL)}
.drawer-todo-donelink{border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.drawer-todo-plus{width:26px;height:26px;border:0;border-radius:9px;background:var(--sheet);box-shadow:var(--lift);font:300 18px/1 var(--serif);color:var(--text);cursor:pointer}
.drawer-todo-rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;margin:0 -24px;padding:2px 24px 10px;scrollbar-width:none}
.drawer-todo-rail::-webkit-scrollbar{display:none}
.drawer-todo-card{flex:0 0 46%;scroll-snap-align:start;min-height:84px;padding:12px 13px 13px;border-radius:19px;background:var(--sheet);box-shadow:var(--lift);display:flex;flex-direction:column;gap:7px;transition:opacity .3s,transform .3s}
.drawer-todo-card:nth-child(3n+1){background:color-mix(in srgb,var(--sage) 12%,var(--sheet))}
.drawer-todo-card:nth-child(3n+2){background:color-mix(in srgb,var(--butter) 15%,var(--sheet));border-radius:18px 21px 18px 21px}
.drawer-todo-card:nth-child(3n){background:color-mix(in srgb,var(--mist) 12%,var(--sheet))}
.drawer-todo-chk{width:15px;height:15px;padding:0;border-radius:5px;border:1.3px solid color-mix(in srgb,var(--text) 35%,transparent);background:transparent;cursor:pointer}
.drawer-todo-text{font:500 14.5px/1.35 var(--ui-font);color:var(--text);word-break:break-word}
.drawer-todo-card.done{opacity:.55}.drawer-todo-card.done .drawer-todo-chk{background:var(--sage);border-color:var(--sage)}.drawer-todo-card.done .drawer-todo-text{text-decoration:line-through}
.drawer-todo-card.leaving{opacity:0;transform:scale(.92)}
.drawer-todo-empty{padding:14px 2px;font:14px var(--ui-font);color:var(--textL)}
.drawer-todo-undo{position:absolute;left:50%;bottom:-38px;z-index:2;display:flex;align-items:center;gap:14px;padding:9px 15px;border-radius:15px;background:color-mix(in srgb,var(--text) 88%,transparent);color:#fff;font:12.5px var(--ui-font);white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:.25s}
.drawer-todo-undo.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.drawer-todo-undo button{border:0;background:none;color:var(--butter);font:600 12.5px var(--ui-font);cursor:pointer}
.todo-sheet-form{display:flex;gap:8px;padding-bottom:22px}
.todo-sheet-form input{flex:1;min-width:0;padding:12px 14px;border:0;border-radius:14px;background:var(--card);font:15px var(--ui-font);color:var(--text)}
.todo-done-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 8%,transparent)}
.todo-done-row span{font:500 15px var(--ui-font);text-decoration:line-through;color:var(--textL);white-space:normal}
.todo-done-row button{flex:none;border:0;border-radius:10px;padding:5px 10px;background:color-mix(in srgb,var(--sage) 18%,transparent);color:var(--text);font:12px var(--ui-font);cursor:pointer}
#todo-done-list{padding-bottom:22px;white-space:normal}
.drawer-note{margin:20px 0 0;padding:15px 17px 16px;border-radius:21px;background:color-mix(in srgb,var(--clay) 15%,var(--sheet));box-shadow:var(--lift)}
.drawer-note[hidden]{display:none}
.drawer-note-kicker{font:400 9px/1.4 var(--ui-font);letter-spacing:.2em;text-transform:uppercase;color:var(--textL);opacity:.62}
.drawer-note p{margin:8px 0 0;font:500 16px/1.5 var(--ui-font);color:var(--text);white-space:normal}
.drawer-note-sig{margin-top:6px;text-align:right;font:italic 13px var(--ui-font);color:var(--textL)}
.drawer-todo-text{cursor:pointer}
.drawer-todo-when{margin-top:auto;font:10px var(--ui-font);color:var(--textL);opacity:.85;cursor:pointer}
.todo-remind-box{margin:-8px 0 22px;padding:2px 14px;border-radius:14px;background:var(--card)}
.todo-remind-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 0;font:14px var(--ui-font);color:var(--text)}
.todo-remind-row[hidden]{display:none}
#todo-remind-on,#todo-early{width:20px;height:20px;accent-color:var(--accent)}
#todo-repeat{border:0;border-radius:10px;padding:6px 9px;background:var(--bg);font:13px var(--ui-font);color:var(--text)}
.todo-sheet-delete{display:block;margin:-10px auto 4px;padding:6px 12px;border:0;background:none;font:13px var(--ui-font);color:var(--textL);cursor:pointer}
.todo-sheet-delete[hidden]{display:none}
.todo-remind-row+.todo-remind-row{border-top:1px solid color-mix(in srgb,var(--accent) 8%,transparent)}
.todo-remind-row input[type=date],.todo-remind-row input[type=time]{flex:1;min-width:0;padding:7px 9px;border:0;border-radius:10px;background:var(--bg);font:13px var(--ui-font);color:var(--text)}
.music-room{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;background:var(--bg)}
.music-room[hidden]{display:none}
.music-room-bar{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 8px) 14px 8px;font:400 9px/1.4 var(--ui-font);letter-spacing:.2em;text-transform:uppercase;color:var(--textL)}
.music-room-bar button{width:36px;height:36px;border:0;border-radius:13px;background:color-mix(in srgb,var(--card) 80%,transparent);color:var(--text);font-size:17px;cursor:pointer}
.music-room iframe{flex:1;width:100%;border:0;background:var(--bg)}
.music-ball{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 92px);z-index:8999;width:48px;height:48px;border:0;border-radius:50%;color:#fff;font-size:19px;cursor:pointer;
  background:linear-gradient(145deg,rgba(94,84,84,.92),rgba(128,116,113,.86));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px rgba(40,32,28,.2)}
.music-ball[hidden]{display:none}
.music-ball{touch-action:none;transition:left .22s ease,top .22s ease,transform .15s}
.music-ball.dragging{transition:none;transform:scale(1.08)}
#drawer{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#drawer>*{flex-shrink:0}
[data-us-group="ian"] .us-entry:nth-child(3){grid-column:1/-1;min-height:92px;background:color-mix(in srgb,var(--butter) 14%,var(--sheet));border-radius:22px 18px 22px 18px}
#p-mail{padding:0 20px calc(env(safe-area-inset-bottom,0px) + 58px)}
.mail-tabs{margin-bottom:12px}
.mail-list{display:grid;gap:10px}
.mail-item{display:flex;flex-direction:column;gap:5px;width:100%;padding:13px 15px;border:0;text-align:left;color:var(--text);cursor:pointer}
.mail-item-top{display:flex;justify-content:space-between;gap:10px;font:11px var(--ui-font);color:var(--textL)}
.mail-item-top b{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-item-subject{font:500 15px/1.35 var(--ui-font)}
.mail-item-snippet{font:12px/1.5 var(--ui-font);color:var(--textL);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mail-item.unread .mail-item-subject::before{content:'';display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;vertical-align:2px;background:var(--accent)}
.mail-more{display:block;margin:14px auto 0}
.mail-more[hidden]{display:none}
.mail-sheet{max-height:82vh}
.mail-read-meta{white-space:pre-line;font:11px/1.6 var(--ui-font);color:var(--textL);margin:-4px 0 10px}
/* === 摇铃铛 (2026-10-06): Evie's friend's bell; GPT line art masked in theme colours === */
.bell-ico{--bell-src:url(/images/bell/bell.png);display:inline-block;width:18px;height:18px;flex:none;-webkit-mask:var(--bell-src) center/contain no-repeat;mask:var(--bell-src) center/contain no-repeat;background:currentColor}
.bell-ico.ring{--bell-src:url(/images/bell/bell-ring.png)}
.bell-ico.bow{--bell-src:url(/images/bell/bell-bow.png)}
.chat-bell-bar{display:flex;align-items:center;gap:8px;margin:0 12px 6px;padding:6px 8px 6px 12px;border-radius:14px;background:color-mix(in srgb,var(--card) 80%,transparent);color:var(--text)}
.chat-bell-bar[hidden]{display:none}
.chat-bell-bar .bell-ico{width:20px;height:20px;color:color-mix(in srgb,var(--accent) 85%,var(--text))}
.chat-bell-step{display:flex;align-items:center;gap:2px;flex:none}
.chat-bell-step button{width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--textL);font:16px/1 var(--ui-font);cursor:pointer}
.chat-bell-step b{min-width:34px;text-align:center;font:500 12.5px var(--ui-font);color:var(--text)}
.chat-bell-bar input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:13.5px var(--ui-font);color:var(--text);padding:4px 2px}
.chat-bell-bar .chat-bell-x{flex:none;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--textL);cursor:pointer}
#chat-list .chat-row-event .bell-line{display:flex;align-items:center;justify-content:center;gap:6px;margin:2px auto;max-width:86%;font:12px/1.5 var(--ui-font);letter-spacing:.04em;color:color-mix(in srgb,var(--textL) 82%,transparent);text-align:center}
#chat-list .chat-row-event .bell-line .bell-ico{width:17px;height:17px;color:color-mix(in srgb,var(--accent) 80%,var(--textL));transform-origin:50% 12%}
#chat-list .chat-row-event .bell-line q{quotes:'“' '”';color:var(--text)}
#chat-list .chat-row-event .bell-line .bell-tone{font-size:10.5px;opacity:.75}
#chat-list .chat-row-event .bell-line .bell-tone::before{content:'· '}
@keyframes bellSoft{0%,100%{transform:rotate(0)}25%{transform:rotate(9deg)}75%{transform:rotate(-9deg)}}
@keyframes bellBrisk{0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}60%{transform:rotate(-16deg)}}
@keyframes bellFierce{0%,100%{transform:rotate(0) translateX(0)}15%{transform:rotate(24deg) translateX(1px)}45%{transform:rotate(-24deg) translateX(-1px)}75%{transform:rotate(14deg)}}
#chat-list .bell-line.fresh .bell-ico{animation:bellSoft .9s ease-in-out var(--bell-n,2)}
#chat-list .bell-line.fresh.brisk .bell-ico{animation:bellBrisk .5s ease-in-out var(--bell-n,2)}
#chat-list .bell-line.fresh.fierce .bell-ico{animation:bellFierce .28s linear calc(var(--bell-n,2) * 2)}
@media (prefers-reduced-motion:reduce){#chat-list .bell-line .bell-ico{animation:none!important}}
.chat-applock-bar{display:flex;align-items:center;gap:8px;width:fit-content;max-width:calc(100% - 24px);margin:0 12px 6px;padding:4px 12px;cursor:pointer;border-radius:14px;background:color-mix(in srgb,var(--card) 80%,transparent);color:var(--text);font:12.5px/1.4 var(--ui-font)}
.chat-applock-bar .applock-copy{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:color-mix(in srgb,var(--text) 86%,transparent)}
.chat-applock-bar .applock-copy b{font-weight:600;margin-right:4px}
.chat-applock-bar button{flex:none;border:0;border-radius:999px;padding:4px 10px;font:12px var(--ui-font);cursor:pointer;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text)}
.chat-applock-bar[hidden]{display:none}
.chat-applock-bar:not(.open) button{display:none}
.chat-applock-bar.open{padding:4px 6px 4px 12px}
.chat-applock-bar button.applock-sos{background:transparent;color:var(--textL)}
.chat-quote-bar{display:flex;align-items:center;gap:10px;margin:0 12px 6px;padding:7px 10px 7px 12px;border-left:3px solid color-mix(in srgb,var(--accent) 70%,transparent);border-radius:10px;background:color-mix(in srgb,var(--card) 80%,transparent)}
.chat-quote-bar[hidden]{display:none}
.chat-quote-bar-copy{flex:1;min-width:0;font:12px/1.45 var(--ui-font);color:var(--textL)}
.chat-quote-bar-copy b{display:block;color:var(--text);font-weight:600}
.chat-quote-bar-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-quote-bar button{flex:none;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--textL);cursor:pointer}
#chat-list .chat-quote{margin:0 0 5px;padding:4px 8px;border-left:2px solid color-mix(in srgb,var(--accent) 65%,transparent);border-radius:6px;background:color-mix(in srgb,var(--text) 5%,transparent);font:11.5px/1.45 var(--ui-font);color:var(--textL);max-width:240px;cursor:pointer}
#chat-list .chat-quote b{display:block;color:var(--text);font-weight:600}
#chat-list .chat-quote span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-row-flash .bubble{animation:chatRowFlash 1.2s ease}
@keyframes chatRowFlash{0%,100%{filter:none}30%{filter:brightness(.9)}}
.chat-msg-menu{position:fixed;z-index:9100;display:flex;gap:2px;padding:4px;border-radius:14px;background:color-mix(in srgb,var(--text) 90%,transparent);box-shadow:0 10px 26px rgba(40,32,28,.25)}
.chat-msg-menu[hidden]{display:none}
.chat-msg-menu button{border:0;background:transparent;color:#fff;font:13px var(--ui-font);padding:8px 14px;border-radius:10px;cursor:pointer}
.chat-msg-menu button:active{background:rgba(255,255,255,.14)}
.cc-inbox-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 8%,transparent);font:12px var(--ui-font);color:var(--text)}
.cc-inbox-row:last-child{border-bottom:0}
.cc-inbox-row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-inbox-row span:last-child{flex:none;color:var(--textL)}
.diary-paper-view{position:fixed;inset:0;z-index:9050;overflow-y:auto;-webkit-overflow-scrolling:touch;background:rgba(36,30,27,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:calc(env(safe-area-inset-top,0px) + 54px) 12px calc(env(safe-area-inset-bottom,0px) + 30px)}
.diary-paper-view[hidden]{display:none}
.diary-paper-close{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);right:14px;z-index:2;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:15px;cursor:pointer}
.diary-paper-wrap{max-width:480px;margin:0 auto;container-type:inline-size}
.diary-paper{position:relative;min-height:177.7cqw;padding:47cqw 13cqw 30cqw;background-repeat:no-repeat,no-repeat,repeat-y;background-size:100% auto;background-position:top center,bottom center,center top;border-radius:4px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.28);font-family:var(--diary-font,'Songti SC'),'Songti SC','Noto Serif SC',serif}
.diary-paper>*:not(.diary-paper-seal){transition:opacity .35s ease;opacity:0}
.diary-paper.font-ready>*{opacity:1}
.diary-paper-seal{position:absolute;left:49.6%;top:20.8cqw;width:27cqw;height:27cqw;transform:translateX(-50%);filter:drop-shadow(0 2px 2px rgba(60,40,30,.28)) drop-shadow(0 6px 10px rgba(60,40,30,.18))}
.diary-paper-title{font-family:inherit;font-size:26px;line-height:1.3;text-align:center;color:#2f2a27}
.diary-paper-date{margin:6px 0 20px;text-align:center;font-size:12px;font-family:inherit;color:#9a918a;letter-spacing:.04em}
.diary-paper-body p{font-family:inherit;font-size:17px;line-height:2.05;color:#342e2b;margin:0 0 .5em;word-break:break-all;white-space:normal}
.diary-paper-sign{margin-top:18px;text-align:right;font-family:inherit;font-size:22px;color:#2f2a27;min-height:1em}
.diary-paper-actions{display:flex;justify-content:center;margin-top:18px}
.diary-paper-actions .btn-ghost{color:#f3ece6;border-color:rgba(255,255,255,.3)}
/* letter envelope view (2026-09-25): tear the strip, the letter unfolds, pages slide */
.lt-stage{position:fixed;inset:0;z-index:9060;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .35s ease;touch-action:none;
  background:#e9dfd2 url(/images/letter/desk.webp) center/cover no-repeat;--lt-paper:url(/images/letter/paper.webp);--lt-ink:#342e2b}
.lt-stage[hidden]{display:none}
.lt-stage:before{content:'';position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 45%,rgba(255,250,244,.18),rgba(60,45,35,.28))}
.lt-stage.show{opacity:1;pointer-events:auto}
.lt-stage,.lt-stage *{font-family:var(--lt-font,'Songti SC'),'Songti SC','Noto Serif SC',serif}
.lt-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:14px;z-index:9;width:36px;height:36px;border:0;border-radius:50%;background:rgba(60,45,35,.28);color:#fff;font:15px var(--ui-font)!important;cursor:pointer}
.lt-tools{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:14px;z-index:9;display:flex;gap:8px;opacity:0;pointer-events:none;transition:opacity .3s}
.lt-stage.reading .lt-tools{opacity:1;pointer-events:auto}
.lt-tools button,.lt-sound{border:0;background:rgba(60,45,35,.22);color:#fff;font:11px var(--ui-font)!important;letter-spacing:.06em;padding:7px 12px;border-radius:12px;cursor:pointer}
.lt-sound{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);left:50%;transform:translateX(-50%);z-index:9}
.lt-hint{position:absolute;left:0;right:0;top:calc(100% + 24px);text-align:center;font-size:15px;color:#5a4a40;letter-spacing:.04em;transition:opacity .3s;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.lt-scene{position:relative;width:min(84vw,380px);container-type:inline-size}
.lt-env{position:relative;width:100%;height:68.5cqw;transform:rotate(-1.8deg);transition:transform .8s cubic-bezier(.4,0,.2,1);opacity:0}
.lt-env.ready{opacity:1}
.lt-env.enter{animation:ltEnvIn .7s cubic-bezier(.2,.8,.3,1) both}
@keyframes ltEnvIn{from{transform:translateY(46px) rotate(-7deg);opacity:0}to{transform:rotate(-1.8deg);opacity:1}}
.lt-env-back{position:absolute;inset:0;border-radius:3px;background:linear-gradient(#b9aa98,#d6cabb 22%,#e2d8cb);box-shadow:0 20px 34px rgba(50,35,25,.3),0 3px 6px rgba(50,35,25,.16)}
.lt-env-front{position:absolute;inset:0;z-index:3;border-radius:3px;overflow:hidden;background:linear-gradient(rgba(255,252,247,.42),rgba(255,252,247,.3)),var(--lt-paper) center/cover}
.lt-env-front:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 18px rgba(120,95,70,.14),inset 0 0 0 1px rgba(120,95,70,.1)}
.lt-art{position:absolute;left:0;top:0;width:100cqw;height:68.5cqw}
.lt-perf{position:absolute;left:3cqw;right:3cqw;top:14cqw;border-top:1px dashed rgba(110,90,70,.3)}
.lt-to{position:absolute;left:9cqw;bottom:14cqw;font-size:10cqw;line-height:1;color:var(--lt-ink);transform:rotate(-3deg)}
.lt-when{position:absolute;left:11cqw;bottom:8cqw;font-size:4.2cqw;line-height:1;color:#7d7168;transform:rotate(-3deg)}
.lt-stamps{position:absolute;right:6cqw;top:19cqw;width:34cqw;height:24cqw}
.lt-stamps svg{position:absolute}
.lt-seal{position:absolute;left:50%;top:7.5cqw;width:15cqw;height:15cqw;margin-left:-7.5cqw;margin-top:-7.5cqw;filter:drop-shadow(0 1.5px 1.5px rgba(60,40,30,.3)) drop-shadow(0 4px 6px rgba(60,40,30,.16))}
.lt-tab{position:absolute;right:0;top:3cqw;height:8cqw;width:8.5cqw;display:grid;place-items:center;border-radius:2px 0 0 2px;background:#b29a9a;color:#fff;font-size:3.4cqw;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.lt-env:not(.torn) .lt-env-front .lt-tab{animation:ltNudge 2.4s ease-in-out 1s infinite}
@keyframes ltNudge{0%,70%,100%{transform:none}78%{transform:translateX(-4px) rotate(-3deg)}86%{transform:translateX(0)}92%{transform:translateX(-2px)}}
.lt-peel{position:absolute;left:0;top:0;z-index:4;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(50,35,25,.22))}
.lt-link{position:absolute;top:0;height:14cqw;transform-origin:0 100%}
.lt-link>.lt-cut{position:absolute;left:0;top:0;width:100%;height:100%;clip-path:inset(-60% 0 0 0)}
.lt-link>.lt-cut>.lt-art{background:linear-gradient(rgba(255,252,247,.42),rgba(255,252,247,.3)),var(--lt-paper) center/cover}
.lt-link>.lt-cut>.lt-art:after{content:'';position:absolute;left:0;right:0;top:0;height:14cqw;background:linear-gradient(rgba(255,255,255,0),rgba(90,70,55,.07))}
.lt-peel.gone{transition:transform .6s cubic-bezier(.3,0,.6,1),opacity .6s;opacity:0}
.lt-fibre{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:visible;width:100%;height:100%}
.lt-grab{position:absolute;left:0;right:0;top:-5cqw;height:24cqw;z-index:6;cursor:grab;touch-action:none}
.lt-env.torn .lt-grab{display:none}
.lt-sheet{position:absolute;left:5%;width:90%;top:3cqw;z-index:2;perspective:1400px}
.lt-folded{position:relative;width:100%;transform-style:preserve-3d}
.lt-panel{position:relative;width:100%;transform-style:preserve-3d;transform-origin:50% 0;transition:transform .6s cubic-bezier(.45,0,.25,1)}
.lt-panel>.lt-face,.lt-panel>.lt-back{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--lt-paper) center top/cover}
.lt-panel>.lt-back{transform:rotateX(180deg);filter:brightness(.94)}
.lt-panel>.lt-face:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(80,60,40,.07),transparent 9%,transparent 91%,rgba(80,60,40,.07))}
.lt-panel .lt-child{position:absolute;left:0;right:0;top:100%}
.lt-reader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0}
.lt-stage.reading .lt-reader{pointer-events:auto;opacity:1}
.lt-pages{position:relative;container-type:inline-size}
.lt-page{position:absolute;left:0;top:0;width:100%;height:141.4cqw;box-sizing:border-box;border-radius:2px;overflow:hidden;background:var(--lt-paper) center top/cover;
  box-shadow:0 18px 36px rgba(50,35,25,.28),0 2px 5px rgba(50,35,25,.12);padding:13cqw 10cqw 12cqw 11cqw;color:var(--lt-ink);transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s}
.lt-pages .lt-spacer{width:100%;height:141.4cqw}
.lt-page .lt-branch{float:right;width:19cqw;height:81cqw;margin:-4cqw -4cqw 1cqw 2cqw;background:url(/images/letter/camellia.webp) right top/contain no-repeat;opacity:.9}
.lt-page h2{margin:0 0 4.5cqw;font-size:7.4cqw;font-weight:400;line-height:1.3;color:#2f2a27}
.lt-page p{margin:0 0 .45em;font-size:4.6cqw;line-height:2.05;word-break:break-all;white-space:normal}
.lt-page .lt-num{position:absolute;bottom:5cqw;left:0;right:0;text-align:center;font-size:3.2cqw;color:#9a8d80}
.lt-page mark{background:linear-gradient(transparent 55%,rgba(190,130,135,.34) 55%,rgba(190,130,135,.34) 92%,transparent 92%);color:inherit;padding:0 .08em}
.lt-page.out-l{transform:translateX(-115%) rotate(-7deg);opacity:0}
.lt-page.out-r{transform:translateX(115%) rotate(7deg);opacity:0}
.lt-nav{display:flex;gap:18px;margin-top:16px;position:relative}
.lt-nav button{width:36px;height:36px;border-radius:50%;border:1px solid rgba(70,55,45,.35);background:rgba(255,250,244,.35);color:#4e4038;font:16px var(--ui-font)!important;cursor:pointer}
.lt-nav button:disabled{opacity:.3}
.lt-measure{position:absolute;visibility:hidden;left:-9999px;top:0;pointer-events:none}
/* letters list as envelopes (2026-09-25) */
#letter-list{display:grid;gap:14px}
.lenv-card{position:relative;padding:15px 18px 14px;border-radius:4px;cursor:pointer;overflow:hidden;
  background:linear-gradient(rgba(255,252,247,.5),rgba(255,252,247,.38)),url(/images/letter/paper.webp) center/cover;
  box-shadow:0 10px 22px rgba(80,60,45,.1),0 1px 3px rgba(80,60,45,.1),inset 0 0 14px rgba(120,95,70,.1)}
.lenv-card:before{content:'';position:absolute;left:10px;right:10px;top:34px;border-top:1px dashed rgba(110,90,70,.22)}
.lenv-top{display:flex;justify-content:space-between;align-items:center;height:14px}
.lenv-kind{font:600 9px var(--ui-font);letter-spacing:.16em;color:#8B8278}
.lenv-date{font:10px var(--ui-font);color:#8B8278}
.lenv-title,.lenv-pre,.lenv-to,.lenv-lockline{font-family:var(--lenv-font,'Songti SC'),'Songti SC','Noto Serif SC',serif}
.lenv-title{margin:22px 92px 0 0;font-size:24px;line-height:1.3;color:#342e2b;word-break:break-all}
.lenv-pre{margin:6px 92px 0 0;font-size:14px;line-height:1.6;color:#8a7d72;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.lenv-lockline{margin:6px 92px 0 0;font-size:14px;color:#9c7f82}
.lenv-to{margin-top:14px;font-size:15px;color:#6d5f55}
.lenv-stamp{position:absolute;right:16px;top:46px;width:58px;height:74px}
.lenv-lock{position:absolute;right:20px;top:50px;width:62px;height:62px;filter:drop-shadow(0 2px 2px rgba(60,40,30,.28))}
.tag.lenv-write{margin-left:auto;border-style:dashed}
.chat-letter-card{width:280px;max-width:100%}
.chat-letter-card .lenv-title{font-size:19px;margin-right:78px}
/* 2026-10-04 偏航: his travelogue is a real letter; the stamp is a photo from the place */
.travel-card .lenv-kind{color:#7d6f64}
.travel-stamp{position:absolute;right:16px;top:44px;width:62px;height:76px;padding:5px;transform:rotate(3deg);filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.2));
  background:radial-gradient(circle at 3.5px 3.5px,transparent 2.3px,#fbf8f3 2.7px) -3.5px -3.5px/7px 7px}
.travel-stamp img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.gift-card .lenv-kind{color:#9c7f82}
.gift-ribbon{position:absolute;right:30px;top:0;bottom:0;width:14px;background:linear-gradient(90deg,#c99aa0,#dcb3b8 50%,#c99aa0);opacity:.85}
.gift-bow{position:absolute;right:13px;top:40px;width:48px;height:34px;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.18))}
.gifts-list{display:grid;gap:14px;padding-bottom:30px}
.gifts-list .chat-letter-card{width:auto}
.gift-date{margin:6px 84px 0 0;font:11px var(--ui-font);letter-spacing:.06em;color:#9a8d84}
.gift-hint{margin:12px 84px 0 0;font:12px/1.5 var(--ui-font);color:#8a7d72}
/* unwrapping: a closed box first, the page only after she opens it */
.gift-stage{position:fixed;inset:0;z-index:9070;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 40%,#fffaf4,#ece0d6);opacity:0;transition:opacity .35s ease}
.gift-stage.show{opacity:1}
.gift-stage[hidden]{display:none}
.gift-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.6);color:#5a4d45;font-size:22px;line-height:1;cursor:pointer;z-index:3}
.gift-box{position:relative;width:170px;height:150px;cursor:pointer;transition:transform .6s cubic-bezier(.3,1.4,.5,1),opacity .5s}
.gift-box .gb-body{position:absolute;left:12px;right:12px;bottom:0;height:104px;border-radius:6px;background:linear-gradient(#efe2d8,#e3d0c3);box-shadow:0 18px 34px rgba(90,60,45,.18),inset 0 -8px 16px rgba(120,90,70,.12)}
.gift-box .gb-lid{position:absolute;left:0;right:0;top:20px;height:34px;border-radius:6px;background:linear-gradient(#f5ebe3,#e8d7cb);box-shadow:0 6px 12px rgba(90,60,45,.14);transform-origin:20% 100%;transition:transform .75s cubic-bezier(.5,-.3,.6,1.3),opacity .6s .25s}
.gift-box .gb-band{position:absolute;left:50%;width:22px;margin-left:-11px;top:0;bottom:0;background:linear-gradient(90deg,#c99aa0,#dcb3b8 50%,#c99aa0)}
.gift-box .gb-bow{position:absolute;left:50%;top:-6px;width:84px;height:44px;margin-left:-42px;transition:transform .75s cubic-bezier(.5,-.3,.6,1.3),opacity .6s .25s}
.gift-box.wiggle{animation:giftWiggle 2.4s ease-in-out infinite}
@keyframes giftWiggle{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-4deg)}88%{transform:rotate(4deg)}92%{transform:rotate(-2deg)}}
.gift-box.open{animation:none}
.gift-box.open .gb-lid,.gift-box.open .gb-bow{transform:translate(40px,-120px) rotate(28deg);opacity:0}
.gift-box.gone{transform:scale(.6) translateY(30px);opacity:0}
.gift-tap{margin-top:26px;font:13px var(--ui-font);letter-spacing:.12em;color:#8a7d72;transition:opacity .3s}
.gift-occasion{margin-bottom:22px;font:600 10px var(--ui-font);letter-spacing:.22em;color:#9c7f82}
.gift-spark{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;animation:giftSpark .9s ease-out forwards}
@keyframes giftSpark{to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
.gift-frame-wrap{position:absolute;inset:calc(env(safe-area-inset-top,0px) + 62px) 10px calc(env(safe-area-inset-bottom,0px) + 10px);border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 20px 50px rgba(80,55,40,.2);transform:scale(.92) translateY(18px);opacity:0;transition:transform .55s cubic-bezier(.3,1.3,.5,1),opacity .4s}
.gift-frame-wrap{pointer-events:none}
.gift-frame-wrap.show{transform:none;opacity:1;pointer-events:auto}
.gift-frame-wrap iframe{display:block;width:100%;height:100%;border:0}
.gift-title{position:absolute;top:calc(env(safe-area-inset-top,0px) + 22px);left:18px;right:64px;font:19px var(--postcard-font,var(--serif)),var(--serif);color:#4a3f38;opacity:0;transition:opacity .4s .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gift-stage.opened .gift-title{opacity:1}
.travel-souvenir{margin:10px 84px 0 0;font:12px/1.5 var(--ui-font);color:#8a7d72}
.travel-souvenir b{font-weight:500;color:#6d5f55}
.travel-card .lenv-title,.travel-card .lenv-to,.travel-souvenir{font-family:var(--postcard-font,var(--lenv-font,'Songti SC')),'Songti SC',serif}
/* Roadbook: a travel journal page in the Us style (soft cards, serif figures, tiny caps) */
.rb-stats{display:flex;gap:26px;margin:-6px 2px 16px}
.rb-stat b{display:block;font:400 34px/1 var(--serif);color:var(--text)}
.rb-stat span{display:block;margin-top:6px;font:600 9px var(--ui-font);letter-spacing:.18em;text-transform:uppercase;color:var(--textL)}
.rb-map-card{position:relative;border-radius:20px;background:var(--sheet);box-shadow:var(--lift);overflow:hidden;margin-bottom:22px}
#rb-map{display:block;width:100%;height:230px}
.rb-map-credit{position:absolute;left:12px;bottom:8px;font:8px var(--ui-font);letter-spacing:.14em;text-transform:uppercase;color:var(--textL);opacity:.5}
.rb-map-stamp{position:absolute;width:40px;height:48px;padding:4px;transform:translate(14px,-115%) rotate(-4deg);filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.22));
  background:radial-gradient(circle at 3px 3px,transparent 2px,#fbf8f3 2.4px) -3px -3px/6px 6px;pointer-events:none}
.rb-map-stamp img{display:block;width:100%;height:100%;object-fit:cover}
.rb-map-card #rb-map{touch-action:none;cursor:grab}
.rb-map-hint{position:absolute;right:12px;bottom:8px;font:8px var(--ui-font);letter-spacing:.14em;color:var(--textL);opacity:.6;pointer-events:none}
/* Roadbook globe (2026-10-04, after a friend's 3D globe): tap the flat map to open it */
.rb-globe{position:fixed;inset:0;z-index:9050;display:flex;flex-direction:column;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .3s ease}
.rb-globe.show{opacity:1;pointer-events:auto}
.rb-globe[hidden]{display:none}
.rb-globe-head{display:flex;align-items:flex-start;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 18px) 22px 0}
.rb-globe-kick{font:600 10px var(--ui-font);letter-spacing:.24em;color:var(--text)}
.rb-globe-sub{margin-top:5px;font:12px var(--ui-font);letter-spacing:.08em;color:var(--textL)}
.rb-globe-close{border:0;background:none;padding:0 2px;font-size:26px;line-height:1;color:var(--textL);cursor:pointer}
#rb-globe-cv{flex:1;min-height:0;width:100%;touch-action:none;cursor:grab}
.rb-globe-foot{padding:0 18px calc(env(safe-area-inset-bottom,0px) + 16px);min-height:24px}
.rb-globe-foot .rb-entry{margin:0 0 10px}
.rb-globe-hint{text-align:center;font:10px var(--ui-font);letter-spacing:.14em;color:var(--textL);opacity:.7}
.rb-month{display:flex;align-items:center;gap:10px;margin:18px 2px 10px;font:600 9.5px var(--ui-font);letter-spacing:.2em;color:var(--textL)}
.rb-month:after{content:'';flex:1;border-top:1px solid color-mix(in srgb,var(--accent) 14%,transparent)}
.rb-entry{display:flex;gap:14px;align-items:flex-start;padding:14px 15px;margin-bottom:10px;border-radius:18px;background:var(--sheet);cursor:pointer}
.rb-entry{position:relative;isolation:isolate;box-shadow:var(--lift)}
.rb-entry:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url(/assets/roadbook-card.webp) center/cover no-repeat;opacity:.92;pointer-events:none} /* Evie's GPT-drawn roadbook paper */
body[data-theme="fjord"] .rb-entry:before{opacity:.1}
.rb-entry.active{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent)}
.rb-entry .travel-stamp{position:static;flex:none;width:48px;height:58px;padding:4px;transform:rotate(-2deg);background:radial-gradient(circle at 3px 3px,transparent 2px,#fbf8f3 2.4px) -3px -3px/6px 6px}
.rb-entry-copy{min-width:0;flex:1}
.rb-entry-kick{font:600 9px var(--ui-font);letter-spacing:.14em;color:var(--textL);text-transform:uppercase}
.rb-entry-title{margin-top:4px;font:19px/1.35 var(--postcard-font,var(--serif)),var(--serif);color:var(--text)}
.rb-entry-souvenir{margin-top:4px;font:12.5px/1.5 var(--postcard-font,var(--ui-font)),var(--ui-font);color:var(--textL)}
.rb-empty{padding:30px 0;text-align:center;font:13px var(--ui-font);color:var(--textL)}
.memory-back{display:block;margin:0 0 10px;padding:0;border:0;background:none;font-size:25px;line-height:1;color:var(--textL);opacity:.6;cursor:pointer}
.memory-back[hidden]{display:none}

/* ---------------------------------------------------------- SETTINGS ------ */
/* the reference's card pattern: tiny caps label over a serif value */
#p-me .settings-overview{gap:12px;margin-bottom:18px}
#p-me .settings-overview-chip{
  border:0;border-radius:20px;padding:14px 15px 16px;
  background:var(--sheet);box-shadow:var(--lift);
}
#p-me .settings-overview-chip:nth-child(1){background:color-mix(in srgb,var(--sage) 12%,var(--sheet))}
#p-me .settings-overview-chip:nth-child(2){background:color-mix(in srgb,var(--mist) 12%,var(--sheet));border-radius:18px 22px 18px 22px}
#p-me .settings-overview-value{
  margin-top:7px;font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.2;
}
/* Settings stays orderly, but the rows are separate soft blocks */
#p-me .settings-menu{
  background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:0;margin-bottom:16px;display:flex;flex-direction:column;gap:10px;overflow:visible;
}
#p-me .settings-menu-row{
  min-height:62px;padding:13px 15px;border:0;border-bottom:0;border-radius:18px;
  background:var(--sheet);box-shadow:var(--lift);
}
#p-me .settings-menu-row:active{background:var(--sheet);opacity:.74}
#p-me .settings-menu-icon{
  width:32px;height:32px;flex:0 0 32px;border-radius:11px;
  background:color-mix(in srgb,var(--clay) 17%,transparent);
}
#p-me .settings-menu-icon svg{opacity:.75}
#p-me .settings-menu-title{font-family:var(--serif);font-size:18px;font-weight:500}
#p-me .settings-menu-summary{margin-top:2px;font-size:10px;opacity:.7}
#p-me .settings-menu-arrow{opacity:.4}
#p-me .settings-detail-head{padding-top:54px;margin-bottom:20px;align-items:flex-start;gap:12px}
#p-me .settings-back{
  width:auto;height:auto;flex:none;padding:3px 0 0;
  border:0;border-radius:0;background:none;font-size:25px;line-height:1;color:var(--textL);opacity:.6;
}
#p-me .settings-detail-heading{font-family:var(--serif);font-size:30px;font-weight:400}
#p-me .settings-detail-subtitle{margin-top:6px;font-size:11px;line-height:1.6;opacity:.74}
#p-me .settings-detail .card{
  border:0;border-radius:19px;background:var(--sheet);box-shadow:var(--lift);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
/* --- 2026-09-12 corrections after rendering the pass on a real engine ------ */

/* fjord is the only dark theme; a 26% warm mix would lift its near-black
   ground to mid grey, so it gets a whisper instead. */
/* A: .us-cover is position:relative (base rule), so it painted over the
   statically-positioned identity row and swallowed "Evie & Ian". */
.us-identity{position:relative;z-index:1}
/* B: the cover hint sat bottom-left, exactly where the avatars overlap it. */
.us-cover:after{left:auto;right:15px;top:13px;bottom:auto}
/* J: the entry glyphs were nearly invisible at .5 */
.us-page .us-entry-icon{opacity:.62}
/* I: the generated sub-directory entries carry a bare "·" glyph, which only
      added an empty first line; the name is the whole point there. */
#us-directory-list .us-entry-icon{display:none}
#us-directory-list .us-entry{padding-top:17px}
#us-directory-list .us-entry:first-child{padding-top:19px}

/* E: `.moment-route{padding-left:0}` has been losing to the later
      `.page{padding:0 18px 28px}` rule, so the full-bleed Moment cover has
      been inset by 18px. ID+class settles it; #moment-list keeps its own. */
#p-memory.moment-route{padding-left:0;padding-right:0}
/* F: the profile name and the two cover buttons are white by design, for a
      photo cover. With no photo set the fallback gradient was light enough to
      make them unreadable, so the fallback is deepened. A real cover is applied
      inline by JS and still overrides this image layer. */
.moment-hero{
  background-image:linear-gradient(152deg,
    color-mix(in srgb,var(--text) 52%,var(--clay)),
    color-mix(in srgb,var(--text) 62%,var(--sage)) 58%,
    color-mix(in srgb,var(--text) 74%,var(--mist)));
}

/* G: these two are spans with no display set, so the title and the summary
      have been rendering on one run-together line. */
#p-me .settings-menu-title,#p-me .settings-menu-summary{display:block}
/* H: the overview value is nowrap+ellipsis, and at serif 20px "Codex · GPT-5.6
      Sol" was clipped mid-word. Let it wrap instead. */
#p-me .settings-overview-value{
  font-size:17px;white-space:normal;overflow:visible;text-overflow:clip;
}
/* --- 2026-09-12 polish round 2 -------------------------------------------- */

/* The seam under short pages: body::before carries the app's coloured blobs at
   z-index:-1, which paints OVER the body background but UNDER the page box. So
   the page's paper covered the blobs and the strip below it did not. Fill the
   viewport with the page, and drop the blob layer on these four routes only --
   the reference ground is flat warm paper. Chat keeps its blobs untouched. */
.us-page,#p-us-directory,#p-me,#p-memory{min-height:100dvh}

/* Us cover: a little more presence, and a hint that reads on a pale wash.
   Dark ink with a light halo stays legible over a photo cover too. */
.us-cover{
  background-image:linear-gradient(146deg,
    color-mix(in srgb,var(--clay) 46%,var(--sheet)),
    color-mix(in srgb,var(--butter) 38%,var(--sheet)) 54%,
    color-mix(in srgb,var(--sage) 32%,var(--sheet)));
}
.us-cover:after{
  color:color-mix(in srgb,var(--text) 68%,transparent);
  text-shadow:0 1px 3px color-mix(in srgb,#fff 70%,transparent);
}
.us-page .page-subtitle,#p-me .page-subtitle,#p-memory .page-subtitle{max-width:30ch}

/* Moment cover fallback. Mixing with --text (a desaturated mauve) dragged this
   to mud, so the no-photo state uses muted clay / sage / mist mid-tones
   directly: warm and soft, still dark enough for the white name and the two
   cover buttons. A real cover is applied inline by JS and replaces this. */
.moment-hero{background-image:linear-gradient(152deg,#9C7E62,#7F8C7A 56%,#78869A)}
/* --- 2026-09-12 unification round ----------------------------------------- */

/* 2. Moment's two cover controls were solid dark chips and pulled the eye
      straight off the page. Same hit area and behaviour, far less presence. */
.moment-cover-btn,.moment-compose-btn{
  width:34px;height:34px;border:0;border-radius:50%;
  background:color-mix(in srgb,#fff 16%,transparent);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  color:color-mix(in srgb,#fff 90%,transparent);
  font-size:15px;box-shadow:none;
  text-shadow:0 1px 4px rgba(30,24,18,.4);
}
.moment-cover-btn{right:62px}
.moment-compose-btn{right:18px}

/* 3. "Evie & Ian" sits across the cover's lower edge, so on a photo it had
      nothing to read against. A scrim inside the cover fades the bottom into
      the page ground -- the structure and the crop are unchanged. */
.us-cover:before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:40%;
  border-radius:0 0 24px 24px;pointer-events:none;
  background:linear-gradient(to top,
    var(--bg) 3%,
    color-mix(in srgb,var(--bg) 62%,transparent) 34%,
    transparent);
}
.us-name{text-shadow:0 1px 3px color-mix(in srgb,var(--bg) 80%,transparent)}
.us-note{text-shadow:0 1px 3px color-mix(in srgb,var(--bg) 70%,transparent)}

/* 6. the focal-point control, stacked under the change-cover hint so neither
      collides with the avatars crossing the cover's bottom-left. */
.us-cover-adjust{
  position:absolute;right:15px;top:32px;z-index:2;
  padding:4px 0 4px 10px;border:0;background:none;cursor:pointer;
  font:400 9px/1 var(--ui-font);letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,var(--text) 62%,transparent);
  text-shadow:0 1px 3px color-mix(in srgb,#fff 70%,transparent);
}
.us-cover-adjust[hidden]{display:none}
body.us-cover-adjusting .us-cover-adjust{color:var(--text);font-weight:600}
/* touch-action is scoped to the adjusting state, so ordinary vertical
   scrolling over a cover is never affected. */
body.us-cover-adjusting .us-cover{cursor:grab;touch-action:none}
body.us-cover-adjusting .us-cover:after{opacity:.3}

/* the Moment hero gets the same focal-point control, tucked under its two
   round buttons and in the same white ink they use. */
.moment-cover-adjust{
  position:absolute;z-index:6;right:18px;top:calc(env(safe-area-inset-top,0px) + 58px);
  padding:4px 0 4px 10px;border:0;background:none;cursor:pointer;
  font:400 9px/1 var(--ui-font);letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,#fff 82%,transparent);
  text-shadow:0 1px 4px rgba(30,24,18,.45);
}
.moment-cover-adjust[hidden]{display:none}
body.moment-cover-adjusting .moment-cover-adjust{color:#fff;font-weight:600}
body.moment-cover-adjusting .moment-hero{cursor:grab;touch-action:none}
/* --- 2026-09-12 chat surface pass: texture only ---------------------------
   No colours, no font sizes, no layout, no markup. Bubble colours stay under
   the Settings pickers (--ian-bubble / --evie-bubble / --bubop), and the
   avatar/name visibility toggles keep working exactly as before.
   ------------------------------------------------------------------------ */

/* Rounder, and lit along the top edge instead of reading as a flat swatch.
   The sheen is a gradient layered OVER the background-colour the picker sets,
   so whatever Evie chooses still shows through. Deliberately no
   backdrop-filter: a note earlier in this sheet records that per-bubble blur
   collapses on long iOS lists, and the bubbles opt out of it on purpose. */
#chat-list .bubble.ian,#chat-list .bubble.evie{border-radius:21px}
#chat-list .chat-row.group-end .bubble.ian{border-bottom-left-radius:21px}
#chat-list .bubble.ian,#chat-list .bubble.evie{
  background-image:linear-gradient(to bottom,
    color-mix(in srgb,#fff 26%,transparent),
    color-mix(in srgb,#fff 8%,transparent) 38%,
    transparent 72%);
  border-color:color-mix(in srgb,#fff 28%,transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 58%,transparent),
    0 1px 2px color-mix(in srgb,var(--text) 5%,transparent),
    0 7px 18px color-mix(in srgb,var(--text) 6%,transparent);
}

/* round avatars (the identity row overrode the base 50% with a 9px square) */
#chat-list .chat-identity .chat-avatar{border-radius:50%}

/* The name plate read as a stuck-on chip. Same tap target and action, but it
   sits in the page as type rather than as a control. A wallpaper still gets
   the glass plate back, because plain type over a photo is unreadable. */
#p-chat .chat-header-profile{
  padding:7px 12px;border:0;background:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
#p-chat .chat-header h2{
  font-family:'Cormorant Garamond',var(--cjk-serif),serif;
  font-size:22px;font-weight:500;letter-spacing:.02em;
}
body.has-bg #p-chat .chat-header-profile{
  padding:9px 20px;background:var(--m3d-glass-fill-strong);
  box-shadow:inset 0 1px 0 var(--m3d-glass-highlight),var(--m3d-glass-shadow);
  backdrop-filter:blur(var(--m3d-glass-blur));-webkit-backdrop-filter:blur(var(--m3d-glass-blur));
}
/* --- 2026-09-13 chat top bar: three matching round glass buttons ----------
   Before: menu 40px/14px-radius flat, search 40px/15px flat at safe+9,
   call 40px/15px bordered glass at safe+13 -- two shapes, two surfaces and a
   4px spread of vertical centres (30 / 29 / 33 against the name's 32).
   Now all three are the same circle, share the existing m3d glass surface,
   and centre on the name's line (40px button, top = safe + 12).
   #drawer-btn is one global control, so it is round on every page it shows. */
#drawer-btn,#p-chat .chat-search-btn,#p-chat .chat-call-btn{
  width:40px;height:40px;border-radius:50%;
  background:var(--m3d-glass-fill);
  border:1px solid var(--m3d-glass-line);
  box-shadow:inset 0 1px 0 var(--m3d-glass-highlight),var(--m3d-glass-shadow);
  backdrop-filter:blur(var(--m3d-glass-blur));-webkit-backdrop-filter:blur(var(--m3d-glass-blur));
}
#drawer-btn{top:calc(env(safe-area-inset-top,0px) + 12px)}
#p-chat .chat-search-btn,#p-chat .chat-call-btn{top:calc(env(safe-area-inset-top,0px) + 12px)}
#p-chat .chat-search-btn{right:51px}     /* an even 8px gap to the call button */
body.has-bg #drawer-btn,body.has-bg #p-chat .chat-search-btn,body.has-bg #p-chat .chat-call-btn{
  background:var(--m3d-glass-fill-strong);
}
/* the vintage theme makes these controls more solid; keep all three matching */
body[data-theme="vintage"] #drawer-btn,
body[data-theme="vintage"] #p-chat .chat-search-btn,
body[data-theme="vintage"] #p-chat .chat-call-btn{
  background:color-mix(in srgb,var(--card) 96%,var(--bg));
  backdrop-filter:blur(calc(var(--glass)*7px));-webkit-backdrop-filter:blur(calc(var(--glass)*7px));
}
#p-chat .chat-search-btn:active{transform:scale(.97)}
/* --- 2026-09-13 music card -------------------------------------------------
   Reference: a free-standing smoky glass card -- small kicker, bold serif
   title, muted artist, round cover, round play control. It used to sit inside
   a chat bubble, so it wore two frames (and the bubble sheen on top); the
   bubble that carries a card now steps back entirely. Fixed warm-taupe glass
   rather than theme tokens, so white type stays readable in every theme. */
body #chat-list .bubble.ian:has(> .msg > .music-card),
body #chat-list .bubble.evie:has(> .msg > .music-card){
  padding:0;border:0;border-radius:0;box-shadow:none;
  background:none;background-image:none;
}
.music-card{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:11px;
  width:min(260px,72vw);min-width:0;max-width:none;
  padding:11px 11px 11px 16px;border-radius:20px;
  border:1px solid rgba(255,255,255,.14);color:#fff;
  background:linear-gradient(145deg,rgba(94,84,84,.92),rgba(128,116,113,.86));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
             0 2px 4px rgba(40,32,28,.08),0 14px 30px rgba(40,32,28,.16);
}
.music-card-copy{gap:1px}
.music-card-copy .music-card-kicker{
  margin-bottom:3px;font:400 9.5px/1.3 var(--ui-font);letter-spacing:.08em;
  color:rgba(255,255,255,.55);
}
.music-card-copy strong{
  font-family:'Cormorant Garamond',var(--cjk-serif),serif;
  font-size:20px;font-weight:600;line-height:1.12;color:#fff;
}
.music-card-copy .music-card-artist{
  font-family:'Cormorant Garamond',var(--cjk-serif),serif;
  font-size:13.5px;line-height:1.3;color:rgba(255,255,255,.62);
}
.music-card .music-card-disc{
  width:50px;height:50px;border-radius:50%;object-fit:cover;background:#3d3634;
  box-shadow:0 0 0 2px rgba(255,255,255,.08),0 6px 14px rgba(0,0,0,.25);
}
.music-card-play{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:#fff;text-decoration:none;
  background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.music-card-play svg{width:13px;height:13px;margin-left:2px}
.music-card-copy .music-card-queue{margin-top:3px;font:400 10.5px/1.35 var(--ui-font);letter-spacing:.02em;color:rgba(255,255,255,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.music-card-play:active{transform:scale(.94)}
/* --- 2026-09-13 Ian cards (frontend for ian-cards-frontend-backend-contract) -
   Nothing here is visible until the backend returns real cards. */

/* compact card under Ian's name in the chat: glass, like the bubbles */
#chat-list .ian-card-chips{display:flex;flex-direction:column;gap:8px;width:min(100%,21rem);margin:2px 0 6px}
.ian-card-chip{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;
  width:100%;padding:12px 14px 13px;border-radius:18px;text-align:left;cursor:pointer;
  font:inherit;color:var(--text);
  border:1px solid color-mix(in srgb,#fff 30%,transparent);
  background-color:color-mix(in srgb,var(--card) 86%,transparent);
  background-image:linear-gradient(to bottom,color-mix(in srgb,#fff 22%,transparent),transparent 60%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent),
             0 1px 2px color-mix(in srgb,var(--text) 5%,transparent),
             0 8px 20px color-mix(in srgb,var(--text) 6%,transparent);
}
.ian-card-chip:active{transform:scale(.985)}
.ian-card-chip-icon{width:26px;height:26px;display:grid;place-items:center;margin-top:1px;
  color:color-mix(in srgb,var(--accent) 85%,var(--text))}
.ian-card-chip-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.ian-card-chip-head{display:flex;align-items:baseline;gap:10px;min-width:0}
.ian-card-chip-head strong{flex:1;min-width:0;font:600 13px/1.45 var(--ui-font);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ian-card-chip-time{flex:none;font:10px/1 var(--ui-font);color:var(--textL);letter-spacing:.02em}
.ian-card-chip-body{font:12px/1.55 var(--ui-font);color:var(--textL);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ian-card-chip.ian-card-note{align-items:center}
.ian-card-chip.ian-card-note .ian-card-chip-icon{margin-top:0}
.ian-card-chip.ian-card-note .ian-card-chip-head{align-items:center}
.ian-card-chip.ian-card-note .ian-card-chip-head strong{font-weight:500;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* sheet */
.ian-card-overlay{position:fixed;inset:0;z-index:260;display:flex;align-items:center;justify-content:center;
  padding:64px 18px calc(env(safe-area-inset-bottom,0px) + 24px);overflow-y:auto;
  background:color-mix(in srgb,var(--text) 32%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ian-card-overlay[hidden]{display:none}
.ian-card-stage{position:relative;width:min(100%,380px);display:flex;flex-direction:column;gap:16px}
.ian-card-close{position:absolute;right:0;top:-48px;width:36px;height:36px;border-radius:50%;border:0;
  background:color-mix(in srgb,#fff 24%,transparent);color:#fff;font-size:15px;cursor:pointer}
.ian-card-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.ian-card-tools button{border:0;padding:9px 16px;border-radius:999px;cursor:pointer;
  font:12px var(--ui-font);color:var(--text);background:color-mix(in srgb,var(--card) 90%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 50%,transparent),0 4px 12px rgba(30,24,20,.12)}
.ian-card-tools button[hidden]{display:none}
.ian-card-tools .danger{color:#a8545b}

/* full card */
.ian-card-full-card{position:relative;isolation:isolate;border-radius:26px;color:var(--text);
  background-color:color-mix(in srgb,var(--card) 94%,var(--bg));background-size:cover;background-position:center;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 50%,transparent),0 18px 44px rgba(30,24,20,.2)}
.ian-card-full-card.has-bg::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:color-mix(in srgb,var(--card) 60%,transparent)}
.ian-card-full-card.tone-light{color:#fff}
.ian-card-full-card.tone-light:not(.has-bg){background-color:#5f5552}
.ian-card-full-card.tone-light.has-bg::before{background:rgba(26,21,19,.42)}
.ian-card-avatar{border-radius:50%;object-fit:cover;background:var(--card);
  border:3px solid color-mix(in srgb,var(--card) 92%,transparent);box-shadow:0 6px 16px rgba(0,0,0,.14)}
.ian-card-text{font:15px/1.85 var(--ui-font);white-space:pre-wrap;overflow-wrap:anywhere}
.ian-card-time{font:11px var(--ui-font);opacity:.62;letter-spacing:.04em}
/* murmur: avatar hangs centred over the top edge, title, long body */
.ian-card-full-card.ian-card-murmur{margin-top:38px;padding:50px 24px 22px}
.ian-card-murmur .ian-card-avatar{position:absolute;left:50%;top:-36px;width:72px;height:72px;margin-left:-36px}
.ian-card-title{margin:0 0 14px;text-align:center;font:600 17px/1.4 var(--ui-font)}
.ian-card-murmur .ian-card-time{margin-top:16px;text-align:center}
/* note: avatar left, short line, time right */
.ian-card-full-card.ian-card-note{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px}
.ian-card-note .ian-card-avatar{width:48px;height:48px;border-width:2px}
.ian-card-note .ian-card-text{font-size:14px;line-height:1.6}
.ian-card-note .ian-card-time{align-self:end}

/* wall */
.ian-card-wall{display:flex;flex-direction:column;gap:16px;padding-bottom:12px}
.ian-card-full-card.in-wall{cursor:pointer}
.ian-card-full-card.in-wall.ian-card-murmur .ian-card-text{
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
/* --- 2026-09-13 composer, call slip, call screen -----------------------------
   CSS only. No markup, no JS, no behaviour, no call/voice logic touched. */

/* Composer: the same lit-glass language as the bubbles. The composer is one
   element, so its existing backdrop-filter stays (the no-blur rule is for the
   many bubbles in the list). Colours still come from --composer-surface. */
#p-chat .chat-input-row{
  background-color:var(--composer-surface);
  background-image:linear-gradient(to bottom,
    color-mix(in srgb,#fff 32%,transparent),
    color-mix(in srgb,#fff 7%,transparent) 45%,
    transparent 80%);
  border:1px solid color-mix(in srgb,#fff 44%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 72%,transparent),
             0 1px 2px color-mix(in srgb,var(--text) 5%,transparent),
             0 10px 26px color-mix(in srgb,var(--text) 9%,transparent);
}
body.has-bg #p-chat .chat-input-row{
  background-image:linear-gradient(to bottom,
    color-mix(in srgb,#fff 32%,transparent),
    color-mix(in srgb,#fff 7%,transparent) 45%,
    transparent 80%);
}
#p-chat .img-btn,#p-chat .sticker-compose-btn,#p-chat .composer-voice-btn{
  background-color:color-mix(in srgb,var(--card) 58%,transparent);
  background-image:linear-gradient(to bottom,color-mix(in srgb,#fff 42%,transparent),transparent 72%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 62%,transparent),
             0 1px 3px color-mix(in srgb,var(--text) 7%,transparent);
}
#p-chat .chat-input-row.user-voice-mode .composer-voice-btn{
  background-color:color-mix(in srgb,var(--accent) 18%,var(--card));color:var(--accent);
}
#p-chat .send-btn{
  background-color:var(--accent);
  background-image:linear-gradient(to bottom,rgba(255,255,255,.36),rgba(255,255,255,.08) 50%,rgba(0,0,0,.05));
  border:1px solid color-mix(in srgb,#fff 32%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
             0 6px 16px color-mix(in srgb,var(--accent) 32%,transparent);
}

/* Call slip in the chat: a real scrap of paper -- warm stock, faint ruling, a
   strip of washi tape, a slight tilt. Replaces the polygon clip and the
   diagonal shine, which read as a broken image rather than paper. */
#chat-list .chat-row-event .call-slip{
  overflow:visible;clip-path:none;
  min-width:min(70vw,262px);max-width:min(84%,310px);min-height:46px;
  padding:13px 16px 11px;border:0;border-radius:2px 3px 5px 3px;color:#6b5a3e;
  background-color:#FAF3E2;
  background-image:
    repeating-linear-gradient(to bottom,transparent 0 21px,rgba(170,140,90,.11) 21px 22px),
    linear-gradient(172deg,rgba(255,255,255,.6),rgba(255,255,255,0) 42%,rgba(150,115,60,.05));
  background-position:0 12px,0 0;
  box-shadow:inset 0 0 0 1px rgba(170,140,90,.14),
             0 1px 1px rgba(110,85,45,.08),0 7px 16px rgba(110,85,45,.13);
  transform:rotate(-.8deg);
}
#chat-list .chat-row-event .call-slip::before{
  content:'';position:absolute;left:50%;right:auto;top:-8px;
  width:58px;height:16px;margin-left:-29px;border-radius:1px;
  background:linear-gradient(to bottom,rgba(218,200,170,.78),rgba(206,186,152,.66));
  box-shadow:0 1px 2px rgba(110,85,45,.12);
  transform:rotate(3deg);
}
#chat-list .chat-row-event .call-slip::after{display:none}
#chat-list .chat-row-event .call-slip:not(.call-slip-plain):active{transform:rotate(-.8deg) scale(.985)}
#chat-list .chat-row-event .call-slip .call-slip-icon{background:rgba(170,140,90,.15);color:#8a7046}
#chat-list .chat-row-event .call-slip .call-slip-text{color:#6b5a3e;font-weight:600}
#chat-list .chat-row-event .call-slip .call-slip-chevron{color:rgba(107,90,62,.55)}

/* The note it opens: the same ruled paper. */
#call-note-overlay .call-note-sheet{
  color:#5e4f37;border:0;
  background-color:#FAF3E2;
  background-image:linear-gradient(170deg,rgba(255,255,255,.62),rgba(255,255,255,0) 45%,rgba(150,115,60,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 -8px 32px rgba(80,60,30,.16);
}
#call-note-overlay .think-sheet-title{
  font-family:'Cormorant Garamond',var(--cjk-serif),serif;font-size:21px;font-weight:600;color:#5e4f37;
}
#call-note-overlay .think-sheet-close{color:#8a7046}
/* the shared sheet body is pre-wrap (built for free text), so the markup's own
   newlines between rows rendered as tall blank gaps; values keep pre-wrap */
#call-note-overlay .think-sheet-body{white-space:normal}
#call-note-overlay .call-note-row{border-bottom:1px dashed rgba(170,140,90,.3)}
#call-note-overlay .call-note-key{color:#9a8563}
#call-note-overlay .call-note-val{color:#4f4230}

/* Call screen: cream ground with a soft warm wash; glass everywhere a control
   or text sits. Every colour derives from the theme except the fixed tints. */
.ian-call-overlay{
  background:
    radial-gradient(ellipse 72% 44% at 16% 10%,color-mix(in srgb,#C9A079 22%,transparent),transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 32%,color-mix(in srgb,#8FAE96 17%,transparent),transparent 72%),
    radial-gradient(ellipse 75% 45% at 50% 104%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),
    linear-gradient(172deg,var(--bg),color-mix(in srgb,var(--card) 72%,var(--bg)));
}
.ian-call-top{font:500 12px/1 var(--ui-font);letter-spacing:.08em;color:var(--textL)}
#ian-call-timer{
  padding:7px 12px;border-radius:999px;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--text);
  background:color-mix(in srgb,var(--card) 62%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 60%,transparent),0 2px 8px color-mix(in srgb,var(--text) 6%,transparent);
}
.ian-call-top button{
  border:1px solid color-mix(in srgb,#fff 44%,transparent);font-size:20px;
  background-color:color-mix(in srgb,var(--card) 62%,transparent);
  background-image:linear-gradient(to bottom,color-mix(in srgb,#fff 40%,transparent),transparent 72%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 64%,transparent),0 4px 12px color-mix(in srgb,var(--text) 8%,transparent);
}
.ian-call-avatar-wrap{width:146px;height:146px;margin-bottom:26px}
.ian-call-avatar{
  border:4px solid color-mix(in srgb,var(--card) 92%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,#fff 60%,transparent),
             0 20px 54px color-mix(in srgb,var(--text) 18%,transparent);
}
.ian-call-ripple{inset:-13px;border:1.5px solid color-mix(in srgb,var(--accent) 52%,transparent)}
.ian-call-name{font-size:40px;font-weight:500;letter-spacing:.01em}
.ian-call-status{margin-top:10px;font:12px var(--ui-font);letter-spacing:.08em;color:var(--textL)}
.ian-call-caption{
  border-radius:26px;border:1px solid color-mix(in srgb,#fff 44%,transparent);
  font:16px/1.7 var(--ui-font);color:var(--text);
  background-color:color-mix(in srgb,var(--card) 64%,transparent);
  background-image:linear-gradient(to bottom,color-mix(in srgb,#fff 30%,transparent),transparent 60%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 68%,transparent),
             0 1px 2px color-mix(in srgb,var(--text) 5%,transparent),
             0 12px 30px color-mix(in srgb,var(--text) 8%,transparent);
}
.ian-call-caption:empty:before{font:13px var(--ui-font);letter-spacing:.04em}
.ian-call-text-entry{gap:9px}
.ian-call-text-entry input{
  height:44px;padding:0 17px;border-radius:999px;font:14px var(--ui-font);
  border:1px solid color-mix(in srgb,#fff 44%,transparent);
  background-color:color-mix(in srgb,var(--card) 66%,transparent);
  background-image:linear-gradient(to bottom,color-mix(in srgb,#fff 28%,transparent),transparent 70%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 64%,transparent),0 3px 10px color-mix(in srgb,var(--text) 6%,transparent);
}
.ian-call-text-entry input:focus{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.ian-call-text-entry button{
  height:44px;padding:0 19px;border-radius:999px;font:600 13px var(--ui-font);
  border:1px solid color-mix(in srgb,#fff 32%,transparent);
  background-color:var(--accent);
  background-image:linear-gradient(to bottom,rgba(255,255,255,.34),rgba(255,255,255,.06) 55%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent);
}
.ian-call-level{width:96px;height:3px;margin-top:20px;background:color-mix(in srgb,var(--textL) 13%,transparent)}
.ian-call-controls{gap:38px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 36px)}
.ian-call-control{width:68px;height:68px}
.ian-call-control.mute{
  color:var(--text);border:1px solid color-mix(in srgb,#fff 48%,transparent);
  background-color:color-mix(in srgb,var(--card) 76%,transparent);
  background-image:linear-gradient(to bottom,color-mix(in srgb,#fff 44%,transparent),transparent 72%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 70%,transparent),0 10px 26px color-mix(in srgb,var(--text) 12%,transparent);
}
/* the hangup button is rotated 135deg for its glyph, so its sheen is radial
   (rotation-proof) rather than a top-down gradient that would end up sideways */
.ian-call-control.hangup{
  border:1px solid rgba(255,255,255,.3);
  background-color:#D8707A;
  background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.22),rgba(255,255,255,0) 68%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 12px 28px rgba(216,112,122,.34);
}
/* --- 2026-09-13 voice bars + unframed call captions -------------------------- */

/* Voice message: a row of bars instead of a line. The player JS still sets the
   progress element's width; that now reveals an accent copy of the same bars.
   Only the message that is playing moves, and not at all with reduced motion. */
.chat-voice{min-width:204px}
.chat-voice-track{position:relative;height:24px;border-radius:0;background:none;overflow:visible;container-type:inline-size}
.chat-voice-bars{position:absolute;left:0;top:0;bottom:0;width:100cqw;display:flex;align-items:center;justify-content:space-between}
.chat-voice-bars i{display:block;width:3px;height:var(--h);border-radius:999px;
  background:color-mix(in srgb,var(--textL) 24%,transparent);transform-origin:center}
.chat-voice-progress{position:absolute;left:0;top:0;bottom:0;width:0;height:auto;border-radius:0;background:none;overflow:hidden}
.chat-voice-progress .chat-voice-bars i{background:color-mix(in srgb,var(--accent) 72%,var(--text))}
.chat-voice.playing .chat-voice-bars i{animation:chatVoiceBar 1.05s ease-in-out infinite;animation-delay:calc(var(--d) * -.15s)}
@keyframes chatVoiceBar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.5)}}
/* 2026-10-10 (Evie: the pending bar looked broken) — a breathing dot where the play button
   will be, bars moving, no typing caret. */
.chat-voice-pending .chat-voice-duration{font-size:12px;letter-spacing:.04em;color:color-mix(in srgb,var(--textL) 85%,transparent)}
.chat-voice-pending .chat-voice-bars i{opacity:.55}
.cv-pending-dot{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;position:relative}
.cv-pending-dot i{width:10px;height:10px;border-radius:50%;background:var(--accent);opacity:.75;animation:cvDot 1.6s ease-in-out infinite}
.cv-pending-dot::after{content:'';position:absolute;inset:8px;border-radius:50%;border:1.5px solid var(--accent);opacity:0;animation:cvRing 1.6s ease-out infinite}
@keyframes cvDot{0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.1);opacity:.9}}
@keyframes cvRing{0%{transform:scale(.45);opacity:.5}100%{transform:scale(1);opacity:0}}
.cc-streaming .bubble:has(.chat-voice-pending) .msg::after{content:none;animation:none}
@media(prefers-reduced-motion:reduce){.cv-pending-dot i,.cv-pending-dot::after{animation:none}}
@media(prefers-reduced-motion:reduce){.chat-voice.playing .chat-voice-bars i{animation:none}}

/* Call screen, following Evie's reference: captions are plain type in the lower
   part of the screen, the level meter is a row of bars under the name. Visual
   order only (flex order); DOM, ids and JS are unchanged. */
.ian-call-stage{justify-content:flex-start;padding-top:7vh}
.ian-call-avatar-wrap{order:1}
.ian-call-name{order:2}
.ian-call-status{order:3}
.ian-call-level{order:4}
.ian-call-caption{order:5}
.ian-call-text-entry{order:6}
.ian-call-text-error{order:7}
.ian-call-caption{
  margin-top:auto;min-height:0;padding:10px 4px 6px;border:0;border-radius:0;
  background:none;background-image:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  font-family:'Cormorant Garamond',var(--cjk-serif),serif;
  font-size:17px;line-height:1.75;font-weight:500;color:var(--text);
}
.ian-call-caption:empty:before{font:13px var(--ui-font);letter-spacing:.04em;color:var(--textL)}
.ian-call-text-entry{margin-top:18px}
.ian-call-level{
  width:118px;height:14px;margin-top:22px;border-radius:0;overflow:hidden;
  background:color-mix(in srgb,var(--text) 20%,transparent);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 7px);
          mask:repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 7px);
}
.ian-call-level i{border-radius:0;background:var(--text)}
/* The meter reads the microphone only (ianCallVadLoop), so it sat still while
   Ian talked. While he is speaking, an animation stands in -- deliberately not a
   Web Audio analyser on his playback: routing that element through an
   AudioContext can silence it on iOS if the context is suspended. A CSS
   animation outranks the inline width the loop keeps writing. */
.ian-call-overlay.speaking .ian-call-level i{animation:ianCallSpeak 1.4s ease-in-out infinite}
@keyframes ianCallSpeak{0%{width:24%}18%{width:70%}36%{width:40%}58%{width:86%}78%{width:48%}100%{width:24%}}
@media(prefers-reduced-motion:reduce){.ian-call-overlay.speaking .ian-call-level i{animation:none}}
/* --- 2026-09-13 fonts --------------------------------------------------------
   --font-ui is the existing interface stack (unchanged by default).
   --font-hand is the letter handwriting stack. The global switch only redefines
   --ui-font, so everything already using it follows; literal font stacks
   elsewhere are left as they are. */
:root{
  --font-ui:var(--ui-font);
  --font-hand:'Ian Hand Jason2','Ian UI Jason1',var(--ui-font);
}
body[data-app-font="wenkai"]{--cjk-serif:'Ian UI WenKai',"Songti SC";--ui-font:'Ian UI WenKai',-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif}
body[data-app-font="jason1"]{--cjk-serif:'Ian UI Jason1',"Songti SC";--ui-font:'Ian UI Jason1',-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif}

/* letters: body text in the letter form, list previews, reading and editing */
#letter-input,
.letter-card .keepsake-preview,
#keepsake-detail-content.letter-hand,
#keepsake-detail-content.letter-hand textarea{font-family:var(--font-hand)}

/* settings: each option is set in its own face (tiny label-only subsets) */
@font-face{font-family:'Ian Label WenKai';font-display:swap;src:url('/fonts/ian/preview/wenkai-label.woff2') format('woff2')}
@font-face{font-family:'Ian Label Jason1';font-display:swap;src:url('/fonts/ian/preview/jason1-label.woff2') format('woff2')}
#app-font-card .app-font-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
#app-font-card .app-font-opt{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;color:var(--text);
  font:16px/1.3 -apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans CJK SC",sans-serif;
  border:1px solid color-mix(in srgb,var(--text) 8%,transparent);
  background:color-mix(in srgb,var(--card) 70%,transparent);
}
#app-font-card .app-font-opt[data-app-font="wenkai"]{font-family:'Ian Label WenKai',-apple-system,"PingFang SC",sans-serif;font-size:18px}
#app-font-card .app-font-opt[data-app-font="jason1"]{font-family:'Ian Label Jason1',-apple-system,"PingFang SC",sans-serif;font-size:18px}
#app-font-card .app-font-opt::after{content:'';width:18px;height:18px;border-radius:50%;flex:none;
  border:1.5px solid color-mix(in srgb,var(--textL) 45%,transparent)}
#app-font-card .app-font-opt.active{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,var(--card))}
#app-font-card .app-font-opt.active::after{border-color:var(--accent);
  background:radial-gradient(circle,var(--accent) 0 4.5px,transparent 5px)}
#app-font-card .app-font-hint{margin-top:10px;font:11px/1.5 var(--ui-font);color:var(--textL)}
/* --- 2026-09-14 splash clock spiral on the login gate --------------------- */
#login-overlay{overflow:hidden;transition:opacity .6s ease}
#login-overlay.splash-leaving{opacity:0;pointer-events:none}
/* failsafe: if scripts never run, the password gate still appears */
@keyframes ianSplashFailsafe{to{opacity:1;transform:none;pointer-events:auto}}
#splash-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#splash-gate{position:relative;z-index:1;transition:opacity .9s ease,transform .9s ease}
#login-overlay.splash-playing #splash-gate{opacity:0;transform:translateY(8px);pointer-events:none;animation:ianSplashFailsafe .6s 10s forwards}
#splash-skip{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);text-align:center;
  font:10px/1 var(--ui-font);letter-spacing:.24em;color:var(--textL);opacity:0;transition:opacity .5s;pointer-events:none}
#login-overlay.splash-anim #splash-skip{opacity:.7}
/* --- 2026-09-14 unified file cards + live HTML preview ------------------- */
.ian-file-card{display:flex;flex-direction:column;margin:7px 0;border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);border-radius:16px;background:color-mix(in srgb,var(--card) 70%,transparent);overflow:hidden;width:min(300px,72vw);max-width:100%}
.ian-file-row{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:11px;cursor:pointer;width:100%;-webkit-tap-highlight-color:transparent}
.ian-file-row:active{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.ian-file-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ian-file-card .work-file-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.ian-file-card .work-file-name{display:block;font-size:12.5px}
.ian-file-card .work-file-kind{display:block}
.ian-file-card .work-file-kind{font-size:9px}
.ian-file-live{position:relative;display:block;height:200px;background:#fff;border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,transparent)}
.ian-file-live-frame{border:0;width:100%;height:100%;display:block;background:#fff}
.ian-file-expand{position:absolute;right:9px;top:9px;width:32px;height:32px;border:0;border-radius:10px;background:rgba(60,54,50,.5);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* --- 2026-09-14 homecoming: chat hand-over card ------------------------- */
.bubble.hc-bubble{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.hc-when{font:10px var(--ui-font);letter-spacing:.08em;color:var(--textL);margin:0 0 5px 4px}
.hc-card{position:relative;width:min(300px,72vw);border-radius:18px;overflow:hidden;background:var(--card);border:1px solid color-mix(in srgb,var(--accent) 12%,transparent)}
.hc-pv{position:relative;height:150px;overflow:hidden;background:color-mix(in srgb,var(--card) 70%,var(--bg))}
.hc-pv-quote{display:flex;align-items:center;padding:18px 20px;background-image:repeating-linear-gradient(transparent 0 25px,color-mix(in srgb,var(--accent) 14%,transparent) 25px 26px)}
.hc-pv-quote q{font:16px/1.6 var(--serif,Georgia,serif);color:var(--text);quotes:"「" "」";display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hc-pv-note{padding:18px 20px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.hc-note-tx{font:600 15px/1.5 var(--ui-font);color:var(--text)}.hc-note-sub{font:12px/1.5 var(--ui-font);color:var(--textL)}
.hc-pv-post{padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.hc-post-who{display:flex;align-items:center;gap:8px;font:12px var(--ui-font);color:var(--textL)}.hc-post-who i{width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--accent) 30%,var(--bg))}
.hc-post-tx{font:14px/1.55 var(--ui-font);color:var(--text);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hc-pv-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hc-pv-build{background:radial-gradient(ellipse at 50% 112%,#9CB7AE 0%,#C5D8CF 45%,color-mix(in srgb,var(--card) 70%,var(--bg)) 46%)}
.hc-pv-build b{position:absolute;left:18px;right:50px;top:15px;font:600 12px/1.45 var(--ui-font);color:var(--text)}
.hc-pv-build span{position:absolute;width:9px;height:6px;border-radius:50%;background:#E3A57D;animation:hcSwim 7s ease-in-out infinite}
.hc-pv-build span:nth-of-type(1){left:38%;top:72%}.hc-pv-build span:nth-of-type(2){left:58%;top:80%;animation-delay:-2.3s;background:#D98E6A}.hc-pv-build span:nth-of-type(3){left:47%;top:88%;animation-delay:-4.1s}
@keyframes hcSwim{0%,100%{transform:translateX(0)}50%{transform:translateX(26px)}}
@media (prefers-reduced-motion:reduce){.hc-pv-build span{animation:none}}
.hc-expand{position:absolute;right:10px;top:10px;width:30px;height:30px;border:0;border-radius:9px;background:rgba(63,57,52,.45);color:#fff;display:grid;place-items:center;cursor:pointer}
.hc-info{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid color-mix(in srgb,var(--accent) 12%,transparent);cursor:pointer}
.hc-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text)}
.hc-copy{min-width:0;display:flex;flex-direction:column}.hc-tt{font:600 13.5px/1.3 var(--ui-font);color:var(--text)}
.hc-mt{font:11px var(--ui-font);color:var(--textL);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-sheet{position:fixed;inset:0;z-index:8100;background:rgba(40,36,32,.42);display:none;align-items:flex-end;justify-content:center;padding:16px}
.hc-sheet.show{display:flex}
.hc-panel{width:100%;max-width:440px;background:var(--card);border-radius:22px;padding:16px 16px 20px;display:flex;flex-direction:column;gap:10px;max-height:82vh;overflow:auto}
.hc-panel-pv .hc-pv{height:auto;min-height:180px;border-radius:14px}.hc-panel-pv .hc-pv q,.hc-panel-pv .hc-post-tx{-webkit-line-clamp:unset}
.hc-panel h3{margin:0;font:600 18px/1.4 var(--serif,Georgia,serif);color:var(--text)}
.hc-panel p{margin:0;font:13px/1.6 var(--ui-font);color:var(--textL)}
.hc-acts{display:flex;gap:8px}.hc-acts button{flex:1;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);background:transparent;border-radius:12px;padding:10px;font:500 13px var(--ui-font);color:var(--text);cursor:pointer}
.hc-acts button.primary{background:var(--text);border-color:var(--text);color:var(--card)}
/* --- Us「Brought Home」 tickets & postcards ------------------------------ */
.hc-filters{display:flex;gap:6px;flex-wrap:wrap;margin:-8px 0 14px}
.hc-filters button{border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);background:transparent;border-radius:999px;padding:4px 12px;font:12px var(--ui-font);color:var(--textL)}
.hc-filters button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--card)}
.hc-wall{display:flex;flex-direction:column;gap:14px;padding-bottom:10px}
.hc-empty,.hc-foot-note{font:12px var(--ui-font);color:var(--textL);text-align:center;margin:18px 0}
.hc-ticket{position:relative;display:grid;grid-template-columns:44px 1fr;background:var(--card);border-radius:16px;
  -webkit-mask:radial-gradient(circle 9px at 44px 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 9px at 44px 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 9px at 44px 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 9px at 44px 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.hc-stub{border-right:1.5px dashed color-mix(in srgb,var(--accent) 28%,transparent);display:grid;place-items:center}
.hc-stub span{writing-mode:vertical-rl;transform:rotate(180deg);font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.18em;color:var(--textL)}
.hc-tbody{padding:13px 15px 12px;display:flex;flex-direction:column;gap:5px;min-width:0}
.hc-tags{font:600 10px var(--ui-font);letter-spacing:.16em;color:#C79A6B}
.hc-ttl{font:600 15.5px/1.45 var(--ui-font);color:var(--text);overflow-wrap:anywhere}
.hc-why{font:12.5px/1.5 var(--ui-font);color:var(--textL)}
.hc-tfoot{margin-top:6px;padding-top:9px;border-top:1.5px dashed color-mix(in srgb,var(--accent) 28%,transparent);display:flex;align-items:center;justify-content:space-between;gap:10px}
.hc-when-mono{font:11px ui-monospace,Menlo,monospace;color:var(--textL)}
.hc-stampbtn{border:1.5px solid var(--text);background:transparent;color:var(--text);border-radius:9px;padding:5px 14px;font:600 12px var(--ui-font);white-space:nowrap;cursor:pointer}
.hc-ticket.kept .hc-stampbtn{border-color:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--textL)}
.hc-punch{position:absolute;left:10px;top:12px;width:25px;height:25px;opacity:0;transform:scale(1.5);transition:transform .28s cubic-bezier(.2,1.5,.4,1),opacity .2s;pointer-events:none;overflow:visible}
.hc-ticket.kept .hc-punch{opacity:1;transform:scale(1)}
.hc-punch .lip{fill:none;stroke:color-mix(in srgb,var(--text) 16%,transparent);stroke-width:1.1;stroke-dasharray:1.4 1}
.hc-punch .hole{fill:var(--bg);stroke:color-mix(in srgb,var(--text) 34%,transparent);stroke-width:.9}
.hc-postcard{position:relative;background:var(--card);border-radius:6px;padding:12px;display:grid;grid-template-columns:1.1fr 1fr;gap:12px}
.hc-pc-img{width:100%;height:100%;min-height:140px;object-fit:cover;border-radius:3px;display:block}
.hc-pc-back{display:flex;flex-direction:column;gap:6px;border-left:1px solid color-mix(in srgb,var(--accent) 20%,transparent);padding-left:12px}
.hc-pc-stamp{align-self:flex-end;width:40px;height:48px;border:2px dotted #C79A6B;display:grid;place-items:center;font:600 9px ui-monospace,Menlo,monospace;color:#C79A6B}
.hc-pc-msg{font:14px/1.6 var(--serif,Georgia,serif);color:var(--text)}
.hc-pc-lines{flex:1;min-height:30px;background:repeating-linear-gradient(transparent 0 18px,color-mix(in srgb,var(--accent) 18%,transparent) 18px 19px)}
.hc-pc-pm{font:10px ui-monospace,Menlo,monospace;color:var(--textL)}
.hc-postcard .hc-stampbtn{align-self:flex-start}
.hc-sign{position:absolute;left:calc(52% - 48px);bottom:14px;width:74px;height:48px;transform:rotate(-8deg);opacity:0;transition:opacity .25s;pointer-events:none}
.hc-postcard.kept .hc-sign{opacity:1}
.hc-sign ellipse{fill:none;stroke:#B0604F;stroke-width:1.6;opacity:.85}
.hc-sign text{fill:#B0604F;font-family:"Snell Roundhand","Bradley Hand","Segoe Script","Kaiti SC",cursive}
.hc-sign .hc-sign-date{font-family:ui-monospace,Menlo,monospace}


/* ---- 工作台 Workbench ---- */
.wb-sec{font:600 10px var(--ui-font);letter-spacing:.2em;text-transform:uppercase;color:var(--textL);margin:22px 2px 9px}
.wb-sec:first-of-type{margin-top:4px}
.wb-rings{display:flex;justify-content:space-around;align-items:center;padding:4px 0}
.wb-ring{text-align:center}
.wb-ring svg{display:block;margin:0 auto 6px}
.wb-ring .cap{font:10px var(--ui-font);color:var(--textL);letter-spacing:.05em}
.wb-ring .rst{font:9px var(--ui-font);color:var(--textL);opacity:.7;margin-top:2px}
.wb-sw-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.wb-sw-row:first-child{border-top:none}
.wb-sw-row.sub{padding-left:14px}
.wb-name{font-size:14px;color:var(--text)}
.wb-sw-row.sub .wb-name{font-size:13px}
.wb-note{font:11px var(--ui-font);color:var(--textL);margin-top:2px}
.wb-sw{position:relative;width:44px;height:26px;border-radius:999px;background:color-mix(in srgb,var(--text) 14%,transparent);
  border:none;flex:0 0 auto;transition:background .18s;cursor:pointer;padding:0}
.wb-sw:after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .18s}
.wb-sw[aria-checked="true"]{background:#8aa98f}
.wb-sw[aria-checked="true"]:after{transform:translateX(18px)}
.wb-sw[disabled]{opacity:.45;pointer-events:none}
.wb-master{border-bottom:1px solid color-mix(in srgb,var(--text) 14%,transparent);padding-bottom:12px;margin-bottom:2px}
.wb-subs.off{opacity:.4}
.wb-subs.off .wb-sw{pointer-events:none}
.wb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wb-hc{position:relative;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;margin:0}
.wb-htop{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.wb-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.wb-lbl{font:600 9px var(--ui-font);letter-spacing:.16em;text-transform:uppercase;color:var(--textL)}
.wb-val{font-family:'Cormorant Garamond',var(--cjk-serif),serif;font-size:29px;font-weight:500;line-height:1;color:var(--text)}
.wb-val small{font-size:14px;font-weight:400;margin-left:2px}
.wb-sub{font:11px var(--ui-font);color:var(--textL);margin-top:5px}
.wb-bar{display:flex;gap:2px;height:7px;margin-top:9px}
.wb-bar i{flex:1;border-radius:2px}
.wb-works{display:flex;align-items:center;justify-content:space-between;gap:10px}

.wb-sheet-mask{position:fixed;inset:0;z-index:8100;background:rgba(0,0,0,.3);display:none;align-items:flex-end;justify-content:center}
.wb-sheet-mask.show{display:flex}
.wb-sheet{width:100%;max-width:560px;max-height:86vh;background:var(--bg);border-radius:20px 20px 0 0;
  display:flex;flex-direction:column;overflow:hidden}
.wb-sheet-head{display:flex;align-items:center;gap:6px;padding:14px 14px 10px;flex:0 0 auto}
.wb-sheet-back{border:none;background:none;font-size:26px;line-height:1;color:var(--text);padding:0 6px 3px;cursor:pointer}
.wb-sheet-title{font:600 11px var(--ui-font);letter-spacing:.2em;color:var(--textL)}
.wb-sheet-body{overflow-y:auto;padding:0 16px calc(24px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.wb-wk{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent);cursor:pointer}
.wb-wk:first-child{border-top:none}
.wb-wk-ico{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--accent) 14%,transparent);
  display:grid;place-items:center;font-size:12px;flex:0 0 auto;color:var(--text)}
.wb-wk-name{font-size:14px;color:var(--text);word-break:break-all}
.wb-wk-meta{font:11px var(--ui-font);color:var(--textL);margin-top:2px}

/* 2026-09-29 memory page redesign (#mem-archive + #mem-add-overlay only) */
#mem-archive .mx-hero{display:flex;align-items:flex-end;justify-content:space-between;margin:4px 2px 26px}
#mem-archive .mx-big{font:400 54px/0.9 var(--serif);letter-spacing:-.01em;color:var(--text)}
#mem-archive .mx-cap{font:400 9px/1.4 var(--ui-font);letter-spacing:.2em;text-transform:uppercase;color:var(--textL);opacity:.7;margin-top:8px}
#mem-archive .mx-week{font:11px var(--ui-font);color:var(--textL);margin-top:4px}
#mem-archive .mx-week b{font:500 15px var(--serif);color:var(--text)}
#mem-archive .mx-hero-side{text-align:right}
#mem-archive .mx-ring{--pct:0%;width:52px;height:52px;border-radius:50%;margin-left:auto;display:grid;place-items:center;background:conic-gradient(color-mix(in srgb,var(--sage) 70%,transparent) 0 var(--pct),color-mix(in srgb,var(--text) 7%,transparent) var(--pct) 100%)}
#mem-archive .mx-ring span{width:40px;height:40px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font:500 14px var(--serif);color:var(--text)}
#mem-archive .mx-sec{margin:0 0 26px}
#mem-archive .mx-sec-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 3px 12px}
#mem-archive .mx-sec-title{font:500 20px/1.2 var(--serif);color:var(--text)}
#mem-archive .mx-sec-more{font:10.5px var(--ui-font);color:var(--textL);opacity:.8}
#mem-archive .mx-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;margin:0 -20px;padding:2px 20px 8px;scrollbar-width:none}
#mem-archive .mx-strip::-webkit-scrollbar{display:none}
#mem-archive .mx-rc{flex:0 0 76%;scroll-snap-align:start;border-radius:21px;padding:15px 16px 13px;background:var(--sheet);box-shadow:var(--lift)}
#mem-archive .mx-when{font:400 9px/1.5 var(--ui-font);letter-spacing:.14em;color:var(--textL);opacity:.75}
#mem-archive .mx-said{margin-top:8px;font:11.5px/1.6 var(--ui-font);color:var(--textL);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#mem-archive .mx-said:before{content:'你说 ';opacity:.7}
#mem-archive .mx-mem{margin-top:8px;font-size:13.5px;line-height:1.75;color:var(--text);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
#mem-archive .mx-vote{display:flex;gap:6px;margin-top:12px}
#mem-archive .mx-rc.voted .mx-vote{opacity:.6}
#mem-archive .mx-chip,#mem-add-overlay .mx-chip{border:0;border-radius:999px;padding:6px 12px;font:11px var(--ui-font);color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
#mem-archive .mx-chip.good{background:color-mix(in srgb,var(--sage) 20%,var(--sheet))}
#mem-archive .mx-chip.off{background:color-mix(in srgb,var(--clay) 16%,var(--sheet))}
#mem-archive .mx-chip.del{margin-left:auto;color:#B07A74}
#mem-archive .mx-tools{display:flex;gap:10px;align-items:center;margin:0 0 16px}
#mem-archive .mx-search{flex:1;display:flex;align-items:center;gap:8px;padding:0 15px;border-radius:999px;background:var(--sheet);box-shadow:var(--lift);color:var(--textL);font-size:13px}
#mem-archive .mx-search input{flex:1;border:0;background:transparent;padding:11px 0;font-size:13px;color:var(--text);outline:none}
#mem-archive .mx-add{width:42px;height:42px;flex:none;border-radius:50%;border:0;background:color-mix(in srgb,var(--accent) 22%,var(--sheet));box-shadow:var(--lift);font:300 24px/1 var(--ui-font);color:var(--text)}
#mem-archive .mx-drawers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
#mem-archive .mx-dw{text-align:left;border:0;border-radius:20px;padding:14px 15px 13px;background:var(--sheet);box-shadow:var(--lift);min-height:86px;display:flex;flex-direction:column;justify-content:space-between;color:var(--text);font-family:var(--ui-font)}
#mem-archive .mx-dw.wide{grid-column:1/-1;flex-direction:row-reverse;align-items:flex-end;min-height:0}
#mem-archive .mx-dw.wide .mx-n{margin-left:auto}
#mem-archive .mx-dw.on{outline:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent)}
#mem-archive .mx-n{font:400 28px/1 var(--serif)}
#mem-archive .mx-dw-text{display:flex;flex-direction:column}
#mem-archive .mx-name{font-size:12px;margin-top:10px}
#mem-archive .mx-dw.wide .mx-name{margin-top:0}
#mem-archive .mx-last{font-size:10px;color:var(--textL);opacity:.8;margin-top:2px}
#mem-archive .t-clay{background:color-mix(in srgb,var(--clay) 14%,var(--sheet))}
#mem-archive .t-rose{background:color-mix(in srgb,var(--accent) 14%,var(--sheet))}
#mem-archive .t-blush{background:color-mix(in srgb,#C98F8F 13%,var(--sheet))}
#mem-archive .t-butter{background:color-mix(in srgb,var(--butter) 20%,var(--sheet))}
#mem-archive .t-sage{background:color-mix(in srgb,var(--sage) 14%,var(--sheet))}
#mem-archive .t-mist{background:color-mix(in srgb,var(--mist) 15%,var(--sheet))}
#mem-archive .mx-month{display:flex;align-items:center;justify-content:space-between;margin:24px 4px 10px}
#mem-archive .mx-mw{font:400 25px/1 'Great Vibes',cursive;transform:rotate(-6deg);color:var(--text)}
#mem-archive .mx-mc{font:10.5px/1.5 var(--ui-font);color:var(--textL);text-align:right}
#mem-archive .mx-art{width:64px;height:40px;background:var(--text);opacity:.8;-webkit-mask:var(--mx-img) center/contain no-repeat;mask:var(--mx-img) center/contain no-repeat}
#mem-archive .mx-row{border-radius:18px;padding:13px 15px 11px;background:var(--sheet);margin-bottom:8px;box-shadow:0 1px 2px color-mix(in srgb,var(--text) 3%,transparent)}
#mem-archive .mx-row.open{box-shadow:var(--lift)}
#mem-archive .mx-txt{font-size:13.5px;line-height:1.78;color:var(--text);white-space:pre-wrap}
#mem-archive .mx-meta{display:flex;align-items:center;gap:8px;margin-top:7px;font:10px var(--ui-font);color:var(--textL)}
#mem-archive .mx-tag{padding:2px 8px;border-radius:999px;font-size:9.5px;letter-spacing:.04em;background:color-mix(in srgb,var(--text) 6%,transparent)}
#mem-archive .mx-dot{width:6px;height:6px;border-radius:50%;flex:none}
#mem-archive .mx-dot.p1{background:color-mix(in srgb,var(--clay) 85%,transparent)}
#mem-archive .mx-dot.p2{background:color-mix(in srgb,var(--clay) 45%,transparent)}
#mem-archive .mx-dot.p3{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--textL) 50%,transparent)}
#mem-archive .mx-used{margin-left:auto;font-size:9.5px;color:color-mix(in srgb,var(--sage) 80%,var(--text))}
#mem-archive .mx-note{margin-left:auto;font-size:9.5px}
#mem-archive .mx-row.past{opacity:.55}
#mem-archive .mx-acts{display:flex;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--text) 6%,transparent)}
#mem-archive .mx-more{display:block;width:100%;margin:6px 0 20px;border:0;border-radius:999px;padding:11px;background:color-mix(in srgb,var(--text) 5%,transparent);font:12px var(--ui-font);color:var(--textL)}
#mem-add-overlay .mx-add-input{width:100%;min-height:80px;border:0;border-radius:14px;background:var(--bg);padding:12px 14px;font-size:13px;color:var(--text);box-sizing:border-box}
#mem-add-overlay .mx-add-types{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px}
#mem-add-overlay .mx-chip.sel{background:color-mix(in srgb,var(--accent) 24%,var(--sheet))}
#mem-add-overlay .mx-save{width:100%;border-radius:999px;padding:12px}

/* 2026-10-02: proactive action labels (Evie picked style A) */
#chat-list .ian-acts{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0 0 6px;padding-left:4px}
#chat-list .ian-act{display:flex;align-items:center;gap:6px;font:12px/1.6 var(--ui-font);letter-spacing:.05em;color:color-mix(in srgb,var(--textL) 80%,transparent)}
#chat-list .ian-act::before{content:'✦';font-size:9px;line-height:1;color:var(--accent);opacity:.85}
/* 2026-10-02: wake reason (Ian's own alarm), tap to expand */
#chat-list .ian-act.wake{cursor:pointer;color:color-mix(in srgb,var(--text) 72%,transparent)}
#chat-list .ian-act.wake::after{content:'›';font-size:12px;margin-left:2px;opacity:.55;transition:transform .2s}
#chat-list .ian-acts.open .ian-act.wake::after{transform:rotate(90deg)}
#chat-list .ian-wake-detail{display:none;margin:2px 0 2px 15px;padding:7px 11px;border-radius:12px;max-width:min(78vw,300px);font:11.5px/1.6 var(--ui-font);color:var(--textL);background:color-mix(in srgb,var(--accent) 10%,var(--card))}
#chat-list .ian-acts.open .ian-wake-detail{display:block}
/* 2026-10-06: thinking as an act label above the bubbles; tap opens the sheet */
#chat-list .ian-think-row{margin:0 0 4px}
#chat-list .ian-act.think{cursor:pointer;gap:5px;font-style:italic;letter-spacing:.06em;color:color-mix(in srgb,var(--textL) 90%,transparent)}
#chat-list .ian-act.think::before{content:'›';font-size:13px;font-style:normal;color:var(--textL);opacity:.75}
#think-overlay .think-sheet{max-height:78vh}
#think-overlay .think-sheet-body{font-size:15.5px;line-height:1.9;letter-spacing:.02em;padding-bottom:28px}
#chat-list .ian-wake-detail b{font-weight:600;color:color-mix(in srgb,var(--text) 80%,transparent)}

/* 2026-10-02: 世界之窗 postcards (Evie chose the no-postmark version) */
#chat-list .pc{width:min(76vw,300px);background:var(--card);border-radius:20px;padding:12px 12px 14px;box-shadow:0 1px 2px color-mix(in srgb,var(--text) 8%,transparent);cursor:pointer;text-align:left}
#chat-list .pc-kick{font:600 9px/1.4 var(--ui-font);letter-spacing:.2em;text-transform:uppercase;color:var(--textL);margin:0 2px 9px}
#chat-list .pc-photo{border:6px solid #fff;border-radius:12px;background:#fff;box-shadow:0 1px 6px color-mix(in srgb,var(--text) 10%,transparent)}
#chat-list .pc-photo img{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:6px}
#chat-list .pc-title{font:21px/1.3 var(--cjk-serif,serif);color:var(--text);margin:14px 3px 6px}
#chat-list .pc-msg{font:14.5px/1.75 var(--ui-font);color:color-mix(in srgb,var(--text) 88%,transparent);margin:0 3px;white-space:pre-wrap}
#chat-list .pc-credit{font:500 8.5px/1.5 var(--ui-font);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--textL) 80%,transparent);margin:12px 3px 0}
#chat-list .pc-paper{border-radius:12px;padding:18px 16px 16px;background:color-mix(in srgb,var(--accent) 9%,var(--card));border:6px solid #fff;box-shadow:0 1px 6px color-mix(in srgb,var(--text) 10%,transparent)}
#chat-list .pc-paper q{display:block;font:italic 17px/1.45 var(--cjk-serif,Georgia,serif);color:var(--text)}
#chat-list .pc-paper span{display:block;margin-top:10px;font:600 8.5px/1.4 var(--ui-font);letter-spacing:.2em;text-transform:uppercase;color:var(--textL)}
.ian-card-full-card .pcf-photo{display:flex;justify-content:center;margin:0 auto 16px;width:fit-content;max-width:100%;border:6px solid #fff;border-radius:12px;background:#fff;box-shadow:0 1px 6px color-mix(in srgb,var(--text) 10%,transparent)}
.ian-card-full-card .pcf-photo img{display:block;max-width:100%;max-height:min(40vh,340px);width:auto;height:auto;object-fit:contain;border-radius:6px}
/* the postcard sheet never pushes its top (and the close button) off screen */
#window-pc-overlay{align-items:flex-start}
#window-pc-overlay .ian-card-stage{margin:auto 0}
.ian-card-full-card .pcf-paper{margin:0 -6px 16px;padding:18px 16px;border-radius:12px;border:6px solid #fff;background:color-mix(in srgb,var(--accent) 9%,var(--card))}
.ian-card-full-card .pcf-paper q{display:block;font:italic 17px/1.45 var(--cjk-serif,Georgia,serif)}
/* 2026-10-03 (Evie): 世界之窗 postcards are written in the diary/letter hand (蝴蝶兰写就的情书, a shared subset from /api/postcard-font), in chat, full screen and Us. */
#chat-list .pc,#chat-list .pc *:not(svg):not(svg *),.ian-card-full-card.pcf-hand,.ian-card-full-card.pcf-hand *:not(svg):not(svg *),.hc-postcard.hc-window,.hc-postcard.hc-window *:not(svg):not(svg *){font-family:var(--postcard-font,var(--ui-font)),var(--ui-font)!important}
.ian-card-full-card .pcf-flip{display:grid;margin:0 auto 16px;width:fit-content;max-width:100%;perspective:900px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ian-card-full-card .pcf-flip>*{grid-area:1/1;margin:0;transition:transform .6s cubic-bezier(.2,.7,.2,1);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ian-card-full-card .pcf-flip .pcf-photo,.ian-card-full-card .pcf-flip .pcf-paper{position:relative}
.ian-card-full-card .pcf-flip .pcf-paper{min-width:min(260px,70vw)}
.ian-card-full-card .pcf-back{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 20px;text-align:center;border:6px solid #fff;border-radius:12px;background:color-mix(in srgb,var(--accent) 9%,var(--card));box-shadow:0 1px 6px color-mix(in srgb,var(--text) 10%,transparent)}
.ian-card-full-card .pcf-back small{font:500 9px/1.4 var(--ui-font);letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.ian-card-full-card .pcf-back span{font:16px/1.75 var(--cjk-serif,Georgia,serif)}
.ian-card-full-card .pcf-flip.flipped>:first-child{transform:rotateY(-180deg)}
.ian-card-full-card .pcf-flip.flipped .pcf-back{transform:rotateY(0)}
.ian-card-full-card .pcf-turn{position:absolute;right:8px;bottom:8px;padding:1px 8px;border-radius:10px;background:color-mix(in srgb,#fff 82%,transparent);font:11px/1.6 var(--ui-font);color:var(--textL)}
.ian-card-full-card .pcf-credit{margin-top:12px;text-align:center;font:500 8.5px/1.5 var(--ui-font);letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.ian-card-tools .pcf-keep{background:var(--text);color:var(--card)}

/* ---- Composer bloom (2026-10-04, after a friend's goo menu): ＋ | input | send ---- */
.composer-dock{display:flex;align-items:flex-end;gap:8px}
.composer-dock>.chat-input-row{flex:1;min-width:0}
#p-chat .composer-toolbar .attach-btn,#p-chat .composer-toolbar .sticker-compose-btn{display:none}
/* no second row while typing: the toolbar dissolves, only the bare mic stays (absolutely placed) */
#p-chat .chat-input-row:not(.user-voice-mode) .composer-toolbar{display:contents}
#p-chat .chat-input-row:not(.user-voice-mode) .composer-spacer{display:none}
#p-chat .chat-input-row .composer-modelrow{display:none}
#p-chat .composer-dock>.chat-input-row:not(.user-voice-mode){flex-direction:row;align-items:flex-end;border-radius:22px;padding:2px 6px 2px 14px;min-height:44px}
#p-chat .composer-dock #chat-input{max-height:none;min-height:40px;padding:9px 2px 9px;line-height:22px}
/* Grows with the text whether or not the keyboard is detected (that detection does not fire on every device).
   Empty → one line again. Beats the older one-line lock by specificity and order. */
body #p-chat.page .composer-dock>.chat-input-row:not(.user-voice-mode) #chat-input{height:var(--grow-h,40px)!important;max-height:none!important;min-height:40px!important;overflow-y:var(--grow-ov,hidden)!important}
body #p-chat.page .composer-dock>.chat-input-row:not(.user-voice-mode) #chat-input:placeholder-shown{height:40px!important;overflow-y:hidden!important}
body.chat-viewport-lock #p-chat.page .composer-dock>.chat-input-row:not(.user-voice-mode){border-radius:22px}
.dock-send{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.send-model-pop{position:absolute;right:0;bottom:54px;z-index:30;padding:6px;border-radius:999px;
  background:var(--composer-surface,var(--card));border:1px solid color-mix(in srgb,#fff 44%,transparent);
  box-shadow:0 10px 28px color-mix(in srgb,var(--text) 14%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.send-model-pop[hidden]{display:none}
.send-model-pop.from-bloom{left:0;right:auto}
.send-model-pop.from-bloom .composer-picker-menu{left:0!important;right:auto!important}
.send-model-pop .composer-modelrow{display:flex!important}
.send-model-pop .composer-picker-menu{left:auto!important;right:0!important;bottom:calc(100% + 10px)!important;top:auto!important}
.composer-dock{position:relative}
#p-chat .chat-input-row:not(.user-voice-mode){position:relative}
#p-chat .chat-input-row:not(.user-voice-mode):focus-within textarea{padding-right:38px}
#p-chat .chat-input-row:not(.user-voice-mode) .composer-voice-btn{position:absolute;right:8px;bottom:5px;top:auto;z-index:2;width:34px;height:34px;
  background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--textL)}
#p-chat .chat-input-row:not(.user-voice-mode) .composer-voice-btn svg{width:19px;height:19px}
#p-chat .dock-send{width:44px;height:44px;flex:0 0 44px;margin-bottom:1px}
/* 2026-10-06 (Evie): the send button only exists when there is something to
   send; it peels out of the input's right edge and sinks back when emptied.
   v2 (smoother on iPhone): the button is out of the flex flow and animates only
   transform/opacity (GPU); the input gives way with one short padding change;
   no blur filter. Same pattern as the voice-mode button. */
#p-chat .composer-dock>.dock-send{position:absolute;right:0;bottom:1px;margin:0;transform-origin:left center;transition:opacity .16s ease,transform .24s cubic-bezier(.34,1.35,.64,1);will-change:transform,opacity}
#p-chat .composer-dock{transition:padding-right .22s cubic-bezier(.4,0,.2,1)}
#p-chat .composer-dock.has-draft{padding-right:52px}
#p-chat .composer-dock:not(.has-draft)>.dock-send{opacity:0;transform:translateX(-32px) scale(.3);pointer-events:none}
#p-chat .composer-dock.has-draft>.dock-send.peel{animation:dock-send-peel .5s cubic-bezier(.3,1.2,.5,1) both}
@keyframes dock-send-peel{
  0%{transform:translateX(-32px) scale(.3);opacity:.35}
  40%{transform:translateX(-5px) scale(1.18,.84);opacity:1}
  65%{transform:translateX(2px) scale(.94,1.06)}
  85%{transform:scale(1.02,.99)}
  100%{transform:none}
}
@media (prefers-reduced-motion:reduce){#p-chat .composer-dock,#p-chat .composer-dock>.dock-send{transition:opacity .15s}#p-chat .composer-dock.has-draft>.dock-send.peel{animation:none}}
.composer-dock:has(.chat-input-row.user-voice-mode)>.dock-send{display:none}
/* the mic waits inside the input until she is typing (or already in voice mode) */
#p-chat .composer-voice-btn{transition:width .2s ease,opacity .2s ease}
#p-chat .chat-input-row:not(:focus-within):not(.user-voice-mode) .composer-voice-btn{width:0!important;min-width:0;padding:0;margin:0;border:0;opacity:0;overflow:hidden;pointer-events:none}
.bloom{position:relative;flex:0 0 44px;width:44px;height:44px;margin-bottom:1px;z-index:3}
.bloom-main{position:relative;z-index:2;width:44px;height:44px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--text);background:var(--composer-surface,var(--card));border:1px solid color-mix(in srgb,#fff 44%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 72%,transparent),0 6px 16px color-mix(in srgb,var(--text) 10%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .25s,color .25s,box-shadow .25s}
.bloom-main svg{width:20px;height:20px}
.bloom-plus{transition:transform .45s cubic-bezier(.28,1.55,.55,1),opacity .2s}
.bloom-last{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.bloom-last svg{width:19px;height:19px}
.bloom.has-last:not(.open) .bloom-plus{opacity:0}
.bloom.has-last:not(.open) .bloom-last{opacity:1}
.bloom.open .bloom-main,.bloom.active .bloom-main{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff}
.bloom.open .bloom-plus{transform:rotate(135deg)}
/* goo layer: plain accent circles, blurred then hardened so near ones melt together */
.bloom-goo{position:absolute;left:-60px;bottom:-60px;width:270px;height:270px;filter:url(#bloom-goo);pointer-events:none}
.bloom-core,.bloom-item{position:absolute;left:60px;bottom:60px;width:44px;height:44px;border-radius:50%;background:var(--accent)}
.bloom-core{transform:scale(.2);opacity:0;transition:transform .35s cubic-bezier(.28,1.55,.55,1),opacity .2s}
.bloom-item{left:62px;bottom:62px;width:40px;height:40px;transform:translate(0,0) scale(.3);opacity:0;transition:transform .32s ease,opacity .25s}
.bloom.open .bloom-core,.bloom.active .bloom-core{transform:scale(1);opacity:1}
.bloom.open .bloom-item{opacity:1;transform:translate(var(--x),var(--y)) scale(1);transition:transform .56s cubic-bezier(.28,1.55,.55,1) var(--d),opacity .15s var(--d)}
.bloom.active .bloom-item{opacity:1;transform:translate(0,0) scale(.1);transition:transform .3s ease}
.bloom.active .bloom-item.picked{transform:translate(0,0) scale(1);transition:transform .5s cubic-bezier(.65,0,.35,1)}
/* icon layer: same spots, outside the filter so icons stay sharp */
.bloom-btn{position:absolute;left:2px;top:2px;z-index:3;width:40px;height:40px;border:0;border-radius:50%;padding:0;background:transparent;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translate(0,0) scale(.3);transition:transform .32s ease,opacity .2s}
.bloom-btn svg{width:19px;height:19px}
.bloom.open .bloom-btn{opacity:1;pointer-events:auto;transform:translate(var(--x),var(--y)) scale(1);transition:transform .56s cubic-bezier(.28,1.55,.55,1) var(--d),opacity .2s var(--d)}
.bloom.active .bloom-btn{opacity:0;transform:translate(0,0) scale(.3);transition:transform .45s cubic-bezier(.65,0,.35,1),opacity .3s}
@media (prefers-reduced-motion:reduce){.bloom *{transition-duration:.01s!important}}
/* voice mode: one slim 「按住说话」 bar; the keyboard toggle takes the send button's spot */
#p-chat .composer-dock:has(.chat-input-row.user-voice-mode){padding-right:52px}
#p-chat .composer-dock>.chat-input-row.user-voice-mode{position:relative;flex-direction:row;align-items:center;gap:0;border-radius:22px;padding:2px;min-height:44px}
#p-chat .composer-dock>.chat-input-row.user-voice-mode .composer-toolbar{display:contents}
#p-chat .composer-dock>.chat-input-row.user-voice-mode .composer-spacer{display:none}
#p-chat .composer-dock>.chat-input-row.user-voice-mode .user-voice-hold{flex:1;min-height:40px;height:40px;border-radius:20px}
#p-chat .composer-dock>.chat-input-row.user-voice-mode .composer-voice-btn{position:absolute;right:-53px;bottom:-1px;width:44px!important;height:44px!important;border-radius:50%;
  background-color:var(--accent)!important;color:#fff!important;border:1px solid color-mix(in srgb,#fff 32%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px color-mix(in srgb,var(--accent) 32%,transparent)}
#p-chat .composer-dock>.chat-input-row.user-voice-mode .composer-voice-btn svg{width:19px;height:19px}