@font-face {
      font-family: "Newsreader";
      font-style: normal;
      font-weight: 400 500;
      font-display: swap;
      src: url("/static/fonts/newsreader-latin.woff2") format("woff2");
    }

    :root {
      color-scheme: light;
      --bg: #f6f5f3;
      --bg-rgb: 246, 245, 243;
      --paper: #fffefa;
      --soft: #eeece9;
      --soft-2: #e7e5e1;
      --ink: #242326;
      --muted: #656267;
      --line: #ddd9d4;
      --accent: #8f4a59;
      --blue: #525054;
      --user-bubble: #eeece9;
      --thinking-bg: #efedea;
      --thinking-ink: #5c5a5e;
      --user-avatar-bg: #e9e6e2;
      --assistant-avatar-bg: #f0eeec;
      --xs-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
      --xs-dark: #262428;
      --xs-dark-text: #ffffff;
      --xs-rose-soft: #ead4d8;
      --xs-cinnabar: #8f4a59;
      --shadow: 0 18px 48px rgba(22, 24, 30, 0.14);
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --keyboard-offset: 0px;
      --visual-offset-top: 0px;
      --composer-space: 92px;
      --topbar-space: 124px;
      --app-width: min(100%, 480px);
      font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "HarmonyOS Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    /* 键盘弹出时 home indicator 被键盘覆盖，safe-area 底垫只会让输入框悬空
       （iOS PWA 上表现为输入框与输入法之间一条约 46px 的缝）。归零后输入框
       贴到键盘（iOS 表单辅助条）上沿——网页所能达到的极限贴合。
       注意必须挂在 keyboard-visible（键盘几何高度>0，见 updateKeyboardOffset）
       而非 keyboard-active（touchstart 聚焦瞬间即打上）：聚焦瞬间就抽掉垫层会让
       输入框在 iOS 正要呈现键盘时脚下位移 34px，键盘弹出即收回（秒退回归）。 */
    body.keyboard-visible {
      --safe-bottom: 0px;
    }

    html {
      width: 100%;
      min-width: 100%;
      overflow: hidden;
      touch-action: manipulation;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
      background: var(--bg);
      color: var(--ink);
    }

    body {
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      position: fixed;
      inset: 0;
      overscroll-behavior: none;
    }

    html.theme-blue body,
    body.theme-blue {
      --bg: #e7eff3;
      --bg-rgb: 231, 239, 243;
      --paper: #f8fbfc;
      --soft: #dce7ed;
      --soft-2: #d2e0e7;
      --line: #c9d8e0;
      --accent: #875262;
      --blue: #54636d;
      --xs-dark: #53636d;
      --xs-dark-text: #f7fbfd;
      --xs-rose-soft: #dec5ca;
      --xs-cinnabar: #875262;
    }

    html.theme-rose body,
    body.theme-rose {
      --bg: #f4e5e3;
      --bg-rgb: 244, 229, 227;
      --paper: #fcf8f7;
      --soft: #f1dcd9;
      --soft-2: #ead3d0;
      --line: #e3cdc9;
      --accent: #a8435a;
      --blue: #635456;
      --xs-dark: #655557;
      --xs-dark-text: #fff8f6;
      --xs-rose-soft: #efc8d0;
      --xs-cinnabar: #a8435a;
    }

    html.theme-purple body,
    body.theme-purple {
      --bg: #eee9f0;
      --bg-rgb: 238, 233, 240;
      --paper: #fbf8fc;
      --soft: #e6dfe9;
      --soft-2: #ddd4e1;
      --line: #d5cbd9;
      --accent: #924f69;
      --blue: #66566b;
      --xs-dark: #5d5261;
      --xs-dark-text: #fbf8fc;
      --xs-rose-soft: #e5c4d1;
      --xs-cinnabar: #924f69;
    }

    html.theme-kelivo body,
    body.theme-kelivo {
      --bg: #fbfbfc;
      --bg-rgb: 251, 251, 252;
      --paper: #ffffff;
      --soft: #f3f4f6;
      --soft-2: #eceef3;
      --line: #dfe1e7;
      --accent: #5a6fa8;
      --blue: #52679d;
    }

    html.theme-life body,
    body.theme-life {
      --bg: #e8efe9;
      --bg-rgb: 232, 239, 233;
      --paper: #f8fbf8;
      --soft: #dfe8e1;
      --soft-2: #d5e0d8;
      --line: #ccd9d0;
      --accent: #8d4e5b;
      --blue: #58635b;
      --ink: #27302b;
      --muted: #56625b;
      --xs-dark: #526058;
      --xs-dark-text: #f7faf7;
      --xs-rose-soft: #dfc1c5;
      --xs-cinnabar: #8d4e5b;
    }

    :is(html, body).tone-clean {
      --user-bubble: #e0e4ee;
      --thinking-bg: #e4e8f6;
      --thinking-ink: #53607e;
      --user-avatar-bg: #dfe4f2;
      --assistant-avatar-bg: #e9edf0;
    }

    :is(html, body).tone-warm {
      --user-bubble: #eaded1;
      --thinking-bg: #efe2d6;
      --thinking-ink: #705f50;
      --user-avatar-bg: #e6d8c8;
      --assistant-avatar-bg: #eee5da;
    }

    :is(html, body).tone-blue {
      --user-bubble: #dce6f6;
      --thinking-bg: #e2e9f8;
      --thinking-ink: #53627e;
      --user-avatar-bg: #d5e1f3;
      --assistant-avatar-bg: #e6edf7;
    }

    :is(html, body).tone-rose {
      --user-bubble: #efdde5;
      --thinking-bg: #f2e2ea;
      --thinking-ink: #775a67;
      --user-avatar-bg: #ead6df;
      --assistant-avatar-bg: #f0e3e8;
    }

    :is(html, body).tone-purple {
      --user-bubble: #e8def4;
      --thinking-bg: #eee6f8;
      --thinking-ink: #665982;
      --user-avatar-bg: #e1d6ef;
      --assistant-avatar-bg: #eee7f5;
    }

    :is(html, body).tone-kelivo {
      --user-bubble: #e8ebf2;
      --thinking-bg: #eef1f9;
      --thinking-ink: #5e6478;
      --user-avatar-bg: #edf0f4;
      --assistant-avatar-bg: #f1f2f4;
    }

    :is(html, body).theme-life .phone-home {
      background: var(--bg);
    }

    :is(html, body).theme-blue .phone-home {
      --home-icon-ink: var(--accent);
    }

    :is(html, body).theme-rose .phone-home {
      --home-icon-ink: var(--accent);
    }

    :is(html, body).theme-purple .phone-home {
      --home-icon-ink: var(--accent);
    }

    :is(html, body).theme-kelivo .phone-home {
      --home-icon-ink: var(--accent);
    }

    button,
    textarea,
    input,
    select {
      font: inherit;
      font-size: 16px;
    }

    button {
      border: 0;
      padding: 0;
      color: inherit;
      background: transparent;
      cursor: pointer;
    }

    .phone-home {
      --home-panel-bg: var(--paper);
      --home-panel-border: rgba(255, 255, 255, 0.55);
      --home-panel-shadow: 0 12px 30px rgba(48, 44, 47, 0.08);
      --home-icon-bg: var(--paper);
      --home-icon-border: var(--line);
      --home-icon-shadow: 0 8px 20px rgba(48, 44, 47, 0.06);
      --home-dock-bg: color-mix(in srgb, var(--paper) 88%, transparent);
      --home-dock-border: var(--line);
      --home-dock-shadow: none;
      --home-icon-ink: var(--accent);
      --home-title-ink: var(--ink);
      --home-sub-ink: var(--muted);
      width: var(--app-width);
      height: 100vh;
      height: 100dvh;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      background: var(--bg);
      color: var(--home-title-ink);
      display: grid;
      grid-template-rows: auto auto 1fr auto;
    }

    .phone-home.hidden,
    .app.hidden {
      display: none;
    }

    .home-status {
      min-height: calc(var(--safe-top) + 34px);
      padding: calc(var(--safe-top) + 9px) 22px 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 760;
    }

    .home-status-right {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(43, 39, 35, 0.78);
    }

    .home-status-right svg {
      width: 18px;
      height: 18px;
      stroke-width: 2.4;
    }

    .home-battery {
      width: 27px;
      height: 14px;
      border: 2px solid currentColor;
      border-radius: 5px;
      position: relative;
    }

    .home-battery::before {
      content: "";
      position: absolute;
      left: 3px;
      top: 3px;
      width: 14px;
      height: 4px;
      border-radius: 99px;
      background: currentColor;
    }

    .home-battery::after {
      content: "";
      position: absolute;
      right: -5px;
      top: 3px;
      width: 2px;
      height: 6px;
      border-radius: 99px;
      background: currentColor;
    }

    .home-hero {
      padding: 20px 26px 8px;
    }

    .home-date {
      margin: 0;
      color: var(--home-sub-ink);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.04em;
    }

    .home-date-time {
      font-style: normal;
      font-weight: 400;
      opacity: 0.75;
    }

    .home-greet {
      margin: 10px 0 0;
      font-size: 32px;
      line-height: 1.3;
      font-weight: 700;
      color: var(--home-title-ink);
    }

    .home-greet-en {
      display: block;
      font-family: var(--xs-serif);
      font-weight: 600;
      font-size: 38px;
      line-height: 1.15;
    }

    .home-grid {
      min-height: 0;
      overflow: auto;
      padding: 10px 18px 14px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-rows: min-content;
      gap: 12px;
      align-content: start;
      scrollbar-width: none;
    }

    .home-grid::-webkit-scrollbar {
      display: none;
    }

    .home-whisper {
      grid-column: 1 / -1;
      padding: 20px 20px 14px;
      border-radius: 26px;
      color: var(--xs-dark-text);
      background: var(--xs-dark);
      box-shadow: 0 18px 40px rgba(38, 36, 40, 0.18);
      text-align: left;
      display: grid;
      gap: 12px;
    }

    .home-whisper-body {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 13px;
      align-items: start;
    }

    .home-whisper-avatar {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 15px 15px 15px 5px;
      color: #fff;
      background: var(--xs-cinnabar);
      font-size: 19px;
    }

    .home-whisper-text {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .home-whisper-text > span:first-child {
      font-size: 14.5px;
      line-height: 1.75;
      font-weight: 500;
    }

    .home-whisper .home-presence-note {
      font-size: 11.5px;
      color: color-mix(in srgb, var(--xs-dark-text) 62%, transparent);
      font-style: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .home-whisper-foot {
      margin-left: 55px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: color-mix(in srgb, var(--xs-dark-text) 58%, transparent);
      font-family: var(--xs-serif);
      font-size: 12.5px;
      letter-spacing: 0.06em;
    }

    .home-whisper-foot i {
      font-style: normal;
    }

    .home-days {
      grid-column: 1 / -1;
      padding: 18px 24px;
      border-radius: 26px;
      border: 1px solid var(--home-panel-border);
      background: var(--home-panel-bg);
      box-shadow: var(--home-panel-shadow);
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: left;
    }

    .home-days-eyebrow {
      color: var(--home-sub-ink);
      font-size: 11px;
      letter-spacing: 0.08em;
    }

    .home-days-count {
      display: block;
      margin: 5px 0 6px;
      font-family: var(--xs-serif);
      font-size: 44px;
      font-weight: 600;
      line-height: 1;
      color: var(--home-title-ink);
    }

    .home-days-sub {
      color: var(--home-sub-ink);
      font-size: 11px;
    }

    .home-days-heart {
      width: 34px;
      height: 34px;
      fill: color-mix(in srgb, var(--xs-cinnabar) 22%, transparent);
      stroke: var(--xs-cinnabar);
      stroke-width: 1.4;
    }

    .home-stats {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: color-mix(in srgb, var(--paper) 55%, transparent);
      overflow: hidden;
    }

    .home-stats button {
      padding: 13px 18px 12px;
      display: grid;
      gap: 5px;
      text-align: left;
    }

    .home-stats button + button {
      border-left: 1px solid var(--line);
    }

    .home-stats-label {
      color: var(--home-title-ink);
      font-size: 13px;
      font-weight: 650;
    }

    .home-stats-text {
      color: var(--home-sub-ink);
      font-size: 11px;
      line-height: 1.5;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .home-hero-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .home-apps-entry {
      flex: 0 0 auto;
      margin-top: 2px;
      width: 36px;
      height: 36px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      place-items: center;
      padding: 8px;
      border-radius: 12px;
      background: var(--home-panel-bg);
      border: 1px solid var(--home-panel-border);
      box-shadow: var(--home-panel-shadow);
    }

    .home-apps-entry span {
      width: 4px;
      height: 4px;
      border-radius: 1.5px;
      background: var(--home-icon-ink);
      opacity: 0.82;
    }

    .apps-page {
      width: var(--app-width);
      height: 100vh;
      height: 100dvh;
      margin: 0 auto;
      position: relative;
      overflow-y: auto;
      background: var(--bg);
      color: var(--ink);
      -webkit-overflow-scrolling: touch;
    }

    .apps-page.hidden {
      display: none;
    }

    .apps-page-head {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 4px 22px 18px;
    }

    .apps-back {
      flex: 0 0 auto;
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--paper);
      border: 1px solid var(--line);
      color: var(--ink);
      font-size: 26px;
      line-height: 1;
    }

    .apps-back span {
      font-style: normal;
      margin-top: -3px;
    }

    .apps-page-eyebrow {
      margin: 0;
      color: var(--muted);
      font-family: var(--xs-serif);
      font-size: 12px;
      letter-spacing: 0.08em;
    }

    .apps-page-title {
      margin: 2px 0 0;
      font-size: 25px;
      font-weight: 700;
    }

    .apps-page-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 22px 12px;
      padding: 8px 20px calc(var(--safe-bottom) + 30px);
    }

    @media (prefers-reduced-motion: no-preference) {
      .home-whisper,
      .home-days,
      .home-stats button,
      .home-app,
      .home-note,
      .home-textnav-item,
      .home-apps-entry,
      .apps-back {
        transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 180ms ease, color 180ms ease, box-shadow 220ms ease;
      }

      .home-whisper:active,
      .home-days:active,
      .home-stats button:active,
      .home-app:active,
      .home-note:active {
        transform: scale(0.97);
      }

      .home-apps-entry:active,
      .apps-back:active {
        transform: scale(0.9);
      }

      .apps-page:not(.hidden) {
        animation: appsPageReveal 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
      }

      @keyframes appsPageReveal {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }

    .home-presence-note[hidden],
    .home-note[hidden] {
      display: none;
    }

    .home-note {
      grid-column: 1 / -1;
      display: flex;
      align-items: baseline;
      gap: 8px;
      padding: 13px 16px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--paper);
      box-shadow: 0 8px 20px rgba(48, 44, 47, 0.05);
      text-align: left;
      font-size: 12.5px;
      line-height: 1.65;
      color: var(--ink);
    }

    .home-note .home-note-text {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .home-note .home-note-more {
      flex-shrink: 0;
      font-size: 10.5px;
      opacity: 0.55;
    }

    .home-widget strong {
      font-size: 17px;
      line-height: 1.2;
    }

    .home-widget span {
      color: var(--home-sub-ink);
      font-size: 12px;
      line-height: 1.4;
    }

    .home-app {
      min-width: 0;
      display: grid;
      justify-items: center;
      gap: 7px;
      text-align: center;
      color: var(--home-title-ink);
    }

    .home-app-icon {
      position: relative;
      width: 56px;
      height: 56px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      color: var(--home-icon-ink);
      background: var(--home-icon-bg);
      border: 1px solid var(--home-icon-border);
      box-shadow: var(--home-icon-shadow);
      backdrop-filter: blur(10px);
    }

    .home-app-icon svg,
    .home-dock-icon svg,
    .home-return svg {
      position: relative;
      z-index: 1;
      width: 25px;
      height: 25px;
      stroke-width: 2.25;
    }

    .home-app-icon .wolf-head-icon {
      width: 28px;
      height: 28px;
      stroke: none;
      fill: currentColor;
    }

    .home-app span {
      max-width: 72px;
      color: var(--home-title-ink);
      font-size: 12px;
      font-weight: 680;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .home-dock {
      padding: 0 24px calc(var(--safe-bottom) + 10px);
      border-top: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg) 92%, transparent);
      backdrop-filter: blur(18px);
    }

    .home-textnav {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding-top: 6px;
    }

    .home-textnav-item {
      position: relative;
      min-height: 48px;
      color: var(--home-sub-ink);
      font-family: var(--xs-serif);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.04em;
    }

    .home-textnav-item.active {
      color: var(--home-title-ink);
    }

    .home-textnav-item.active::after {
      content: "";
      position: absolute;
      bottom: 5px;
      left: 50%;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--xs-cinnabar);
      transform: translateX(-50%);
    }

    .site-filing {
      min-height: 15px;
      margin-top: 7px;
      text-align: center;
      font-size: 10px;
      line-height: 1.5;
    }

    .site-filing a {
      color: var(--home-sub-ink);
      text-decoration: none;
      opacity: 0.72;
    }

    .site-filing a:hover,
    .site-filing a:focus-visible {
      opacity: 1;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .home-dock-inner {
      height: 86px;
      border-radius: 30px;
      background: var(--home-dock-bg);
      border: 1px solid var(--home-dock-border);
      box-shadow: var(--home-dock-shadow);
      backdrop-filter: blur(18px);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
      justify-items: center;
    }

    .home-dock-app {
      display: grid;
      justify-items: center;
      gap: 5px;
      color: var(--home-title-ink);
      font-size: 11px;
      font-weight: 700;
    }

    .home-dock-icon {
      width: 48px;
      height: 48px;
      border-radius: 0;
      display: grid;
      place-items: center;
      background: transparent;
      color: var(--home-icon-ink);
      border: 0;
      box-shadow: none;
    }

    .home-return {
      position: fixed;
      right: max(58px, calc((100vw - min(100vw, 480px)) / 2 + 58px));
      top: calc(var(--visual-offset-top) + var(--safe-top) + 10px);
      z-index: 16;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: none;
      place-items: center;
      background: rgba(255, 255, 255, 0.82);
      box-shadow: 0 8px 24px rgba(22, 24, 30, 0.12);
      color: #4d5360;
    }

    .app:not(.hidden) .home-return {
      display: grid;
    }

    .app {
      width: var(--app-width);
      height: 100vh;
      height: 100dvh;
      margin: 0 auto;
      display: grid;
      grid-template-rows: 1fr auto;
      background: var(--bg);
      overflow: hidden;
      position: relative;
    }

    .topbar {
      position: fixed;
      top: var(--visual-offset-top);
      left: 50%;
      width: var(--app-width);
      transform: translateX(-50%);
      padding: calc(var(--safe-top) + 12px) 18px 9px;
      display: grid;
      grid-template-columns: 34px 34px minmax(0, 1fr) 34px 34px;
      align-items: center;
      gap: 8px;
      background: rgba(var(--bg-rgb), 0.94);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
      z-index: 15;
    }

    .topbar .icon-button {
      width: 34px;
      height: 34px;
      color: var(--muted);
    }

    .chat-map-button {
      justify-self: end;
      background: color-mix(in srgb, var(--paper) 58%, transparent);
    }

    .context-preview-button {
      justify-self: end;
      background: color-mix(in srgb, var(--soft) 58%, transparent);
    }

    .voice-call-button {
      color: var(--accent);
      background: color-mix(in srgb, var(--soft) 72%, transparent);
      box-shadow: inset 0 0 0 1px var(--line);
    }

    .title h1 {
      margin: 0;
      font-size: 15px;
      line-height: 1.16;
      font-weight: 760;
      text-align: center;
    }

    .title p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 11px;
      font-weight: 620;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .connection-strip {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .connection-strip::-webkit-scrollbar {
      display: none;
    }

    .status-chip {
      flex: 0 0 auto;
      min-height: 18px;
      padding: 0 7px;
      border: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--soft);
      color: var(--muted);
      font-size: 10px;
      font-weight: 720;
      white-space: nowrap;
      cursor: default;
    }

    .status-chip::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.7;
    }

    .status-chip.online {
      background: rgba(90, 184, 112, 0.12);
      color: #3f8f57;
    }

    .status-chip.warning {
      background: rgba(184, 135, 77, 0.14);
      color: #8a6539;
    }

    .status-chip.offline {
      background: rgba(224, 112, 112, 0.12);
      color: #a45252;
    }

    .status-chip.action {
      background: var(--soft-2);
      color: var(--accent);
      box-shadow: inset 0 0 0 1px var(--line);
    }

    .status-chip.action::before {
      display: none;
    }

    .status-chip:disabled {
      opacity: 0.46;
      cursor: not-allowed;
    }

    button.status-chip {
      cursor: pointer;
    }

    .icon-button {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: grid;
      place-items: center;
    }

    .icon-button svg,
    .tool-button svg,
    .msg-action svg,
    .drawer-icon svg,
    .send-button svg {
      width: 22px;
      height: 22px;
      stroke-width: 2.35;
    }

    .icon-button:active,
    .tool-button:active,
    .send-button:active,
    .conversation-item:active,
    .settings-menu-row:active,
    .drawer-row:active {
      transform: scale(0.97);
    }

    .chat-scroll {
      position: fixed;
      top: calc(var(--visual-offset-top) + var(--topbar-space));
      bottom: calc(var(--composer-space) + var(--keyboard-offset));
      left: 50%;
      width: var(--app-width);
      transform: translateX(-50%);
      overflow: auto;
      padding: 14px 20px 22px;
      scrollbar-width: none;
      scroll-padding-bottom: 22px;
      overscroll-behavior: contain;
      /* Preserve the reader's viewport when lazy images/cards above it finish laying out. */
      overflow-anchor: auto;
      -webkit-overflow-scrolling: touch;
      z-index: 2;
    }

    .chat-scroll::-webkit-scrollbar,
    .drawer-body::-webkit-scrollbar,
    .sheet::-webkit-scrollbar {
      display: none;
    }

    .chat-fast-scroll {
      position: fixed;
      top: calc(var(--visual-offset-top) + var(--topbar-space) + 16px);
      bottom: calc(var(--composer-space) + var(--keyboard-offset) + 18px);
      left: calc(50% + var(--app-width) / 2 - 15px);
      width: 13px;
      z-index: 8;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease;
      touch-action: none;
    }

    #chatApp:not(.hidden) .chat-fast-scroll.visible {
      opacity: 0.86;
      pointer-events: auto;
    }

    @media (pointer: coarse) {
      /* Keep the blank track inert and the horizontal hit strip identical to
         the visible 11px thumb. Widening it steals ordinary chat swipes. */
      #chatApp .chat-fast-scroll {
        pointer-events: none !important;
      }

      #chatApp:not(.hidden) .chat-fast-scroll.visible .chat-fast-scroll-thumb {
        pointer-events: auto !important;
      }
    }

    .chat-fast-scroll.dragging,
    .chat-fast-scroll:hover {
      opacity: 1;
    }

    .chat-fast-scroll::before {
      content: "";
      position: absolute;
      top: 6px;
      bottom: 6px;
      left: 5px;
      width: 3px;
      border-radius: 999px;
      background: var(--theme-border, rgba(151, 132, 107, 0.24));
    }

    .chat-fast-scroll-thumb {
      position: absolute;
      left: 1px;
      top: 6px;
      width: 11px;
      min-height: 44px;
      border: 1px solid var(--theme-border-strong, rgba(124, 98, 74, 0.32));
      border-radius: 999px;
      background: var(--paper);
      background: color-mix(in srgb, var(--paper) 78%, var(--accent) 22%);
      box-shadow: 0 8px 18px rgba(69, 52, 35, 0.16);
      cursor: grab;
      touch-action: none;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    .chat-fast-scroll.dragging .chat-fast-scroll-thumb {
      cursor: grabbing;
      background: color-mix(in srgb, var(--paper) 62%, var(--accent) 38%);
      box-shadow: 0 10px 24px rgba(69, 52, 35, 0.22);
    }

    .date-divider {
      margin: 5px 0 20px;
      color: #c4b39f;
      text-align: center;
      font-size: 11px;
      font-weight: 600;
    }

    .history-pager {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 34px;
      margin: 0 0 14px;
      color: #9c8068;
      font-size: 12px;
    }

    .history-pager[hidden] {
      display: none;
    }

    .history-pager button {
      border: 1px solid rgba(155, 126, 99, 0.24);
      background: rgba(201, 173, 144, 0.24);
      color: #7d614c;
      border-radius: 999px;
      padding: 7px 13px;
      font: inherit;
      font-weight: 700;
      box-shadow: 0 8px 18px rgba(106, 81, 58, 0.08);
    }

    .history-pager button:disabled {
      opacity: 0.55;
    }

    .messages {
      min-height: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .history-virtual-note {
      align-self: center;
      max-width: min(92%, 360px);
      border: 1px solid rgba(155, 126, 99, 0.18);
      border-radius: 999px;
      background: rgba(238, 228, 214, 0.62);
      color: #8b725d;
      padding: 8px 13px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
      text-align: center;
    }

    .empty-note {
      margin-top: 28vh;
      display: grid;
      place-items: center;
      gap: 12px;
      color: var(--muted);
      font-size: 14px;
    }

    .conversation-retry {
      min-width: 112px;
      min-height: 44px;
      padding: 0 18px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--paper);
      color: var(--accent);
      font: inherit;
      font-weight: 720;
      cursor: pointer;
      touch-action: manipulation;
    }

    .mark {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      font-size: 14px;
      font-weight: 780;
    }

    .mark.assistant {
      background: var(--xs-cinnabar);
      color: #fff;
      border-radius: 12px 12px 12px 4px;
    }

    .mark.user {
      background: var(--user-avatar-bg);
      color: var(--ink);
    }

    .msg {
      display: grid;
      gap: 7px;
      max-width: 100%;
      min-width: 0;
    }

    .msg.user {
      justify-items: end;
    }

    .msg.assistant {
      justify-items: start;
      position: relative;
      margin-left: 18px;
      padding-left: 20px;
      border-left: 1px solid var(--line);
    }

    .msg.system {
      justify-items: center;
    }

    .msg-head {
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 650;
      max-width: 100%;
      min-width: 0;
    }

    .msg-head span:last-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .home-whisper-reply {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.13);
      color: rgba(255, 255, 255, 0.88);
      font-family: var(--xs-ui);
      font-size: 10px;
      line-height: 1.5;
      text-align: left;
    }

    .home-whisper-reply > span:first-child {
      color: rgba(255, 255, 255, 0.56);
      white-space: nowrap;
    }

    .home-whisper-reply > span:last-child {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .home-whisper-reply[hidden] {
      display: none;
    }

    .msg.user .msg-head {
      flex-direction: row-reverse;
    }

    .msg.assistant .msg-head .mark {
      position: absolute;
      left: -17px;
      top: 0;
      width: 32px;
      height: 32px;
      box-shadow: 0 0 0 4px var(--bg);
    }

    .bubble {
      max-width: min(84%, 350px);
      min-width: 0;
      font-size: 15px;
      line-height: 1.78;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      color: var(--ink);
    }

    .msg.user .bubble {
      max-width: min(82%, 330px);
      padding: 12px 15px;
      border-radius: 18px 18px 5px 18px;
      background: var(--theme-user-bubble);
      color: var(--theme-user-bubble-ink);
      box-shadow: 0 8px 20px rgba(48, 44, 47, 0.06), inset 0 0 0 1px var(--line);
    }

    .msg.assistant .bubble {
      max-width: 100%;
      width: 100%;
      font-size: 15px;
      padding-top: 2px;
    }

    .msg.system .bubble {
      max-width: 92%;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--soft);
      color: var(--muted);
      text-align: center;
      font-size: 11px;
      line-height: 1.42;
    }

    .voice-reply-bubble {
      width: min(100%, 350px);
      padding: 14px 16px 13px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--paper) 78%, transparent);
      box-shadow: 0 10px 24px rgba(48, 44, 47, 0.06);
      white-space: normal;
    }

    .voice-reply-en {
      color: var(--ink);
      font-family: var(--xs-serif);
      font-size: 17px;
      font-style: italic;
      line-height: 1.62;
      letter-spacing: 0;
    }

    .voice-reply-zh {
      margin-top: 9px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.62;
    }

    .voice-reply-player {
      margin-top: 12px;
      min-height: 34px;
      padding: 0 13px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--accent);
      background: color-mix(in srgb, var(--paper) 66%, transparent);
      border: 1px solid var(--line);
      font-size: 13px;
      font-weight: 720;
    }

    .voice-reply-player svg {
      width: 16px;
      height: 16px;
    }

    .voice-reply-player.loading,
    .voice-reply-player.playing {
      background: rgba(190, 132, 82, 0.16);
      border-color: rgba(172, 119, 75, 0.32);
      color: #9b6843;
    }

    .voice-reply-player:disabled {
      opacity: 0.76;
    }

    .thinking {
      width: 100%;
      border-radius: 15px;
      background: var(--thinking-bg);
      color: var(--thinking-ink);
      border: 1px solid rgba(121, 93, 70, 0.18);
      display: grid;
      gap: 10px;
      padding: 0;
      font-size: 12px;
      font-weight: 720;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(92, 70, 49, 0.07), inset 0 0 0 1px rgba(255, 250, 243, 0.24);
    }

    .thinking-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      min-height: 42px;
      padding: 0 13px;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
    }

    .thinking-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .thinking svg {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
    }

    .thinking-label {
      min-width: 0;
      font-size: 13px;
      letter-spacing: 0;
    }

    .thinking-chevron {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #8a725e;
      transition: transform 160ms ease;
    }

    .thinking-body {
      display: none;
      white-space: pre-wrap;
      line-height: 1.62;
      color: #5d4e42;
      font-size: 13px;
      font-weight: 520;
      padding: 0 14px 14px 42px;
    }

    .thinking.open .thinking-body {
      display: block;
    }

    .thinking.open .thinking-chevron {
      transform: rotate(180deg);
    }

    .msg.pending .thinking {
      background: color-mix(in srgb, var(--thinking-bg) 82%, var(--paper));
    }

    .msg.pending .thinking-body {
      display: none !important;
    }

    .msg.pending .thinking-chevron {
      display: none;
    }

    .msg.tool-event {
      justify-items: stretch;
      width: 100%;
    }

    .msg.tool-event .bubble {
      max-width: 100%;
      width: 100%;
      padding: 0;
      border-radius: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      font-size: 13px;
    }

    .message-text {
      max-width: 100%;
      min-width: 0;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .streaming-plain-text {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .markdown-body {
      max-width: 100%;
      min-width: 0;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      color: inherit;
      font-size: inherit;
      line-height: inherit;
    }

    .markdown-body > :first-child {
      margin-top: 0;
    }

    .markdown-body > :last-child {
      margin-bottom: 0;
    }

    .markdown-body p,
    .markdown-body ul,
    .markdown-body ol,
    .markdown-body blockquote,
    .markdown-body pre,
    .markdown-body table,
    .markdown-body hr,
    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3 {
      margin: 0 0 14px;
    }

    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3 {
      color: var(--ink);
      font-weight: 820;
      line-height: 1.35;
    }

    .markdown-body h1 { font-size: 20px; }
    .markdown-body h2 { font-size: 18px; }
    .markdown-body h3 { font-size: 16px; }

    .markdown-body strong {
      color: var(--ink);
      font-weight: 820;
    }

    .markdown-body em {
      color: var(--theme-primary-ink, var(--blue));
    }

    .markdown-body s {
      color: var(--muted);
    }

    .markdown-body ul,
    .markdown-body ol {
      padding-left: 1.25em;
    }

    .markdown-body li + li {
      margin-top: 5px;
    }

    .markdown-body blockquote {
      border-left: 3px solid var(--theme-border-strong, var(--line));
      padding: 8px 0 8px 12px;
      color: var(--muted);
      background: var(--theme-panel-soft, var(--soft));
      border-radius: 0 12px 12px 0;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .markdown-body code {
      border-radius: 7px;
      background: var(--theme-icon-bg, var(--soft));
      color: var(--theme-primary-ink, var(--blue));
      padding: 0.1em 0.35em;
      font: 0.92em/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .markdown-body pre {
      max-width: 100%;
      border: 1px solid var(--theme-border-strong, var(--line));
      border-radius: 15px;
      background: var(--theme-panel-soft, var(--soft));
      padding: 12px;
      overflow-x: auto;
      overflow-y: hidden;
    }

    .markdown-code-wrap {
      position: relative;
      max-width: 100%;
      min-width: 0;
      margin: 0 0 14px;
      border: 1px solid var(--theme-border-strong, var(--line));
      border-radius: 15px;
      background: var(--theme-panel-soft, var(--soft));
      overflow: hidden;
    }

    .markdown-code-wrap pre {
      margin: 0;
      border: 0;
      border-radius: 0;
      padding: 38px 12px 12px;
      background: transparent;
    }

    .code-toolbar {
      position: absolute;
      inset: 0 0 auto 0;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 9px 0 12px;
      color: var(--theme-primary-ink, var(--blue));
      font-size: 11px;
      font-weight: 520;
      background: var(--theme-active-bg, var(--soft-2));
      border-bottom: 1px solid var(--theme-border, var(--line));
    }

    .code-toolbar-actions {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .code-copy-button {
      width: 26px;
      height: 26px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      color: var(--theme-primary-ink, var(--blue));
    }

    .code-copy-button:active {
      background: var(--theme-border, rgba(122, 96, 72, 0.1));
    }

    .code-copy-button svg {
      width: 16px;
      height: 16px;
    }

    .markdown-body pre code {
      display: block;
      max-width: 100%;
      padding: 0;
      background: transparent;
      color: var(--ink);
      font-size: 12px;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .markdown-body table {
      width: 100%;
      max-width: 100%;
      display: block;
      border-collapse: collapse;
      overflow-x: auto;
      border-radius: 12px;
      font-size: 13px;
    }

    .markdown-body th,
    .markdown-body td {
      border: 1px solid var(--theme-border-strong, var(--line));
      padding: 7px 8px;
      text-align: left;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .markdown-body th {
      background: var(--theme-active-bg, var(--soft-2));
      color: var(--theme-primary-ink, var(--blue));
      font-weight: 780;
    }

    .markdown-body a {
      color: var(--theme-primary-ink, var(--blue));
      text-decoration: underline;
      text-decoration-color: var(--theme-border-strong, currentColor);
      text-underline-offset: 3px;
    }

    .markdown-body img {
      max-width: 100%;
      height: auto;
      border-radius: 12px;
    }

    .markdown-body img.deferred-image-pending {
      display: block;
      object-fit: contain;
      background: color-mix(in srgb, var(--soft) 72%, var(--paper));
    }

    .markdown-body img.deferred-image-failed {
      display: inline-block;
      width: auto;
      height: auto;
      max-height: 2.5em;
      background: transparent;
    }

    .markdown-body hr {
      border: 0;
      border-top: 1px solid var(--theme-border-strong, var(--line));
    }

    body.theme-dark .markdown-body {
      color: #eee2d4;
    }

    body.theme-dark .markdown-body h1,
    body.theme-dark .markdown-body h2,
    body.theme-dark .markdown-body h3,
    body.theme-dark .markdown-body strong {
      color: #fff2e4;
    }

    body.theme-dark .markdown-body blockquote,
    body.theme-dark .markdown-body pre,
    body.theme-dark .tool-detail-pre {
      background: rgba(68, 53, 42, 0.72);
      border-color: rgba(222, 196, 166, 0.2);
      color: #f3e8da;
    }

    body.theme-dark .markdown-body code {
      background: rgba(222, 196, 166, 0.16);
      color: #f1d9bd;
    }

    .tool-stack {
      width: min(100%, 360px);
      display: grid;
      gap: 7px;
      margin-top: 9px;
    }

    .tool-trace-flow {
      width: 100%;
      display: grid;
      gap: 12px;
    }

    .tool-trace-flow .message-text {
      width: 100%;
    }

    .tool-trace-flow .tool-stack {
      width: min(100%, 420px);
      margin: 2px 0;
    }

    .msg.tool-event .tool-stack {
      width: 100%;
      margin: 0;
    }

    .tool-card {
      width: 100%;
      min-height: 44px;
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      border: 0;
      border-radius: 17px;
      background: #e9ddcf;
      color: #675444;
      padding: 9px 12px;
      text-align: left;
      box-shadow: 0 8px 20px rgba(92, 74, 58, 0.08), inset 0 0 0 1px rgba(122, 96, 72, 0.06);
    }

    .tool-card.running {
      background: #e8e3f2;
      color: #62627d;
    }

    .tool-card.failed {
      background: #f1ded8;
      color: #8f5648;
    }

    .tool-card-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #8a684f;
    }

    .tool-card-icon svg {
      width: 19px;
      height: 19px;
    }

    .tool-card.running .tool-card-icon svg {
      animation: toolSpin 1.1s linear infinite;
    }

    @keyframes toolSpin {
      to { transform: rotate(360deg); }
    }

    .tool-card-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .tool-card-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 780;
    }

    .tool-card-meta {
      color: #9d8977;
      font-size: 10.5px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .tool-card-chevron svg {
      width: 18px;
      height: 18px;
      color: #9d8977;
    }

    #chatApp .tool-card {
      border-radius: 14px;
      background: rgba(238, 230, 220, 0.72);
      color: #67584b;
      box-shadow: none;
    }

    #chatApp .tool-card.running {
      background: rgba(230, 228, 238, 0.72);
      color: #666173;
    }

    #chatApp .tool-card.failed {
      background: rgba(242, 224, 218, 0.78);
      color: #8a554a;
    }

    #chatApp .tool-card-label {
      font-weight: 660;
    }

    .world-engine-panel {
      width: min(100%, 680px);
      margin: 12px 0 6px;
      padding: 13px 14px;
      border-radius: 16px;
      background: #efe2d4;
      color: #5f4c3d;
      box-shadow: 0 10px 24px rgba(92, 74, 58, 0.08), inset 0 0 0 1px rgba(126, 101, 78, 0.08);
      white-space: normal;
    }

    .world-engine-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      color: #76583f;
      font-size: 13px;
      font-weight: 820;
    }

    .world-engine-head span {
      min-width: 0;
    }

    .world-engine-head small {
      color: #9b8069;
      font-size: 10.5px;
      font-weight: 760;
      white-space: nowrap;
    }

    .world-engine-body {
      display: grid;
      gap: 10px;
    }

    .world-engine-section {
      display: grid;
      gap: 4px;
    }

    .world-engine-section strong {
      color: #8a684f;
      font-size: 11px;
      letter-spacing: 0;
    }

    .world-engine-section p,
    .world-engine-section ul {
      margin: 0;
      color: #514337;
      font-size: 13px;
      line-height: 1.62;
    }

    .world-engine-section ul {
      padding-left: 1.2em;
    }

    .world-engine-section li {
      margin: 2px 0;
    }

    .world-engine-choices {
      display: grid;
      gap: 7px;
    }

    .world-engine-choice {
      width: 100%;
      border: 1px solid rgba(138, 104, 79, 0.14);
      border-radius: 12px;
      background: rgba(255, 250, 242, 0.58);
      color: #624f40;
      padding: 8px 10px;
      text-align: left;
      font: inherit;
      font-size: 12.5px;
      line-height: 1.48;
      box-shadow: 0 6px 14px rgba(92, 74, 58, 0.05);
    }

    .world-engine-choice.active {
      border-color: rgba(139, 95, 61, 0.42);
      background: #dfc6ad;
      color: #4f3828;
      box-shadow: 0 8px 18px rgba(92, 74, 58, 0.12);
    }

    .world-engine-custom {
      display: grid;
      gap: 6px;
      margin-top: 2px;
    }

    .world-engine-custom-input {
      width: 100%;
      min-height: 42px;
      border: 1px solid rgba(138, 104, 79, 0.14);
      border-radius: 12px;
      outline: 0;
      resize: vertical;
      background: rgba(255, 250, 242, 0.72);
      color: #4f3828;
      padding: 9px 10px;
      font: inherit;
      font-size: 12.5px;
      line-height: 1.48;
    }

    .world-engine-custom-input::placeholder {
      color: #a58d77;
    }

    .world-engine-state {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .world-engine-chip {
      max-width: 100%;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(255, 250, 242, 0.62);
      color: #7a604b;
      font-size: 11px;
      font-weight: 720;
      overflow-wrap: anywhere;
    }

    .world-engine-raw {
      max-height: 260px;
      overflow: auto;
      margin: 0;
      padding: 10px;
      border-radius: 12px;
      background: rgba(255, 250, 242, 0.62);
      color: #5f4c3d;
      font-size: 11px;
      line-height: 1.55;
      white-space: pre-wrap;
    }

    .tool-detail-sheet {
      max-height: 82vh;
      max-height: 82dvh;
      background: var(--bg);
    }

    .tool-detail-meta {
      margin: -6px 0 14px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .tool-detail-section {
      display: grid;
      gap: 7px;
      margin-top: 14px;
    }

    .tool-detail-section strong {
      color: var(--theme-primary-ink, #8f7a66);
      font-size: 13px;
    }

    .tool-detail-pre {
      margin: 0;
      border: 1px solid var(--theme-border-strong, rgba(173, 146, 120, 0.2));
      border-radius: 14px;
      background: var(--theme-panel-soft, #f4ede4);
      padding: 12px;
      color: var(--ink);
      font: 12px/1.58 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      white-space: pre-wrap;
      word-break: break-word;
      max-height: 34vh;
      overflow: auto;
    }

    .chat-search-sheet {
      max-height: 74vh;
      max-height: 74dvh;
      background: var(--bg);
    }

    .chat-search-head {
      display: grid;
      grid-template-columns: auto auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

    .chat-search-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #4c4036;
      font-size: 17px;
      font-weight: 820;
      white-space: nowrap;
    }

    .chat-search-title svg {
      width: 21px;
      height: 21px;
      color: #8a684f;
    }

    .chat-search-input-wrap {
      height: 44px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 8px;
      padding: 0 10px 0 15px;
      border-radius: 17px;
      border: 1px solid rgba(126, 101, 80, 0.22);
      background: rgba(255, 253, 249, 0.9);
    }

    .chat-search-input-wrap input {
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: #4b4036;
      font-size: 16px;
      line-height: 1.3;
    }

    .chat-search-input-wrap input::placeholder {
      color: #b8aa9b;
    }

    .chat-search-count {
      min-height: 19px;
      color: #a38f7d;
      font-size: 12px;
      font-weight: 680;
      margin: 0 4px 10px;
    }

    .chat-search-results {
      display: grid;
      gap: 8px;
      padding-bottom: 8px;
    }

    .chat-search-result,
    .chat-search-empty {
      border-radius: 18px;
      background: #f3eee8;
      border: 1px solid rgba(173, 146, 120, 0.13);
      color: #4c4036;
    }

    .chat-search-result {
      min-height: 70px;
      padding: 11px 12px;
      text-align: left;
      display: grid;
      gap: 7px;
    }

    .chat-search-result:active {
      transform: scale(0.99);
      background: #ece2d8;
    }

    .chat-search-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #9b846f;
      font-size: 11px;
      font-weight: 760;
    }

    .chat-search-snippet {
      color: #4a4038;
      font-size: 14px;
      line-height: 1.45;
      word-break: break-word;
    }

    .chat-search-snippet mark {
      border-radius: 6px;
      padding: 0 3px;
      background: #dcc9b4;
      color: #3f3128;
    }

    .chat-search-empty {
      padding: 18px 14px;
      color: #9a8a7b;
      font-size: 13px;
      line-height: 1.5;
      text-align: center;
    }

    .msg-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 9px;
      color: var(--muted);
      font-size: 11px;
    }

    .msg.user .msg-actions {
      justify-content: flex-end;
    }

    .msg-action {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 50%;
    }

    .msg-action svg {
      width: 16px;
      height: 16px;
    }

    .msg-action:active {
      background: rgba(32, 33, 36, 0.06);
    }

    .msg-action.active {
      background: rgba(89, 105, 159, 0.12);
      color: var(--blue);
    }

    .token-count {
      margin-left: auto;
      color: #c2ae98;
      font-size: 11px;
      align-self: center;
    }

    .msg.search-focused .bubble {
      outline: 2px solid rgba(151, 119, 88, 0.34);
      box-shadow: 0 0 0 7px rgba(221, 204, 184, 0.38), 0 12px 26px rgba(92, 74, 58, 0.08);
    }

    .version-chip {
      height: 22px;
      padding: 0 8px;
      border-radius: 999px;
      background: var(--soft);
      color: #9a7b5e;
      font-size: 11px;
      font-weight: 720;
      display: inline-flex;
      align-items: center;
    }

    .version-switcher {
      height: 24px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 0 4px;
      border-radius: 999px;
      background: var(--soft);
      border: 1px solid var(--line);
      color: #8f6f53;
      font-size: 11px;
      font-weight: 760;
      white-space: nowrap;
    }

    .version-switcher button {
      width: 20px;
      height: 20px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: inherit;
    }

    .version-switcher button:disabled {
      opacity: 0.35;
    }

    .version-switcher svg {
      width: 13px;
      height: 13px;
    }

    .version-switcher-label {
      min-width: 28px;
      text-align: center;
    }

    .msg.selected .bubble {
      outline: 2px solid rgba(89, 105, 159, 0.2);
      outline-offset: 4px;
      border-radius: 18px;
    }

    .msg.assistant.pending {
      opacity: 0.72;
    }

    .msg.assistant.pending .bubble {
      color: var(--muted);
    }

    .typing-dots {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-height: 24px;
    }

    .typing-dots span {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.45;
      animation: typingPulse 1.1s ease-in-out infinite;
    }

    .typing-dots span:nth-child(2) {
      animation-delay: 0.15s;
    }

    .typing-dots span:nth-child(3) {
      animation-delay: 0.3s;
    }

    @keyframes typingPulse {
      0%, 100% {
        transform: translateY(0);
        opacity: 0.35;
      }
      50% {
        transform: translateY(-3px);
        opacity: 0.85;
      }
    }

    .composer-shell {
      position: fixed;
      left: 50%;
      bottom: 0;
      width: var(--app-width);
      padding: 9px 18px calc(var(--safe-bottom) + 12px);
      background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.08), rgba(var(--bg-rgb), 0.98) 24%);
      border-top: 1px solid rgba(117, 95, 75, 0.08);
      z-index: 10;
      transform: translate(-50%, calc(-1 * var(--keyboard-offset)));
      transition: none;
      will-change: transform;
    }

    .composer {
      min-height: 0;
      padding: 13px 14px 11px;
      border: 1px solid var(--line);
      border-radius: 26px;
      background: color-mix(in srgb, var(--paper) 94%, transparent);
      display: grid;
      grid-template-columns: minmax(0, 1fr) 31px 31px 39px;
      grid-template-areas:
        "input input input input"
        "tools sticker attach send";
      grid-template-rows: auto 34px;
      align-items: center;
      column-gap: 8px;
      row-gap: 12px;
      box-shadow: 0 10px 24px rgba(48, 44, 47, 0.06);
    }

    .attachment-tray {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 0 4px 7px;
      scrollbar-width: none;
    }

    .attachment-tray[hidden] {
      display: none;
    }

    .attachment-tray::-webkit-scrollbar {
      display: none;
    }

    .attachment-chip {
      position: relative;
      flex: 0 0 auto;
      width: 72px;
      min-height: 78px;
      border-radius: 14px;
      padding: 5px;
      display: grid;
      grid-template-rows: 52px auto;
      gap: 4px;
      background: rgba(255, 253, 249, 0.9);
      border: 1px solid rgba(146, 116, 91, 0.18);
      box-shadow: 0 8px 18px rgba(90, 72, 52, 0.07);
      color: #6d5a49;
      font-size: 11px;
      font-weight: 650;
    }

    .attachment-chip img {
      width: 100%;
      height: 52px;
      object-fit: cover;
      border-radius: 10px;
      background: #f2eadf;
    }

    .attachment-chip span {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .attachment-chip .attachment-badge {
      position: absolute;
      left: 6px;
      top: 6px;
      max-width: calc(100% - 12px);
      min-height: 18px;
      padding: 2px 6px;
      border-radius: 999px;
      background: rgba(168, 120, 85, 0.86);
      color: #fff8ee;
      font-size: 10px;
      line-height: 1.35;
      font-weight: 760;
      box-shadow: 0 4px 10px rgba(86, 62, 42, 0.14);
    }

    .attachment-chip button {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #a87855;
      color: #fff8ee;
      box-shadow: 0 5px 12px rgba(126, 86, 54, 0.16);
    }

    .composer textarea {
      grid-area: input;
      width: 100%;
      min-height: 46px;
      max-height: 92px;
      border: 0;
      outline: 0;
      resize: none;
      padding: 2px 2px 0;
      background: transparent;
      color: var(--ink);
      font-size: 16px;
      line-height: 1.45;
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .composer textarea::-webkit-scrollbar,
    .composer textarea::-webkit-resizer {
      width: 0;
      height: 0;
      display: none;
    }

    .composer textarea::placeholder {
      color: color-mix(in srgb, var(--muted) 72%, transparent);
    }

    .composer-tools {
      grid-area: tools;
      min-width: 0;
      display: block;
      align-items: center;
      gap: 8px;
      padding: 0;
    }

    .composer-quick {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: clamp(8px, 3.6vw, 22px);
      overflow-x: auto;
      scrollbar-width: none;
    }

    .composer-quick::-webkit-scrollbar {
      display: none;
    }

    .composer-send {
      display: contents;
    }

    .tool-button {
      flex: 0 0 auto;
      width: 29px;
      height: 29px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: var(--muted);
      background: transparent;
      font-size: 11px;
      font-weight: 760;
    }

    .tool-button.primary {
      color: var(--accent);
    }

    .tool-button.active {
      color: var(--accent);
      background: var(--soft-2);
      box-shadow: inset 0 0 0 1px var(--line);
    }

    .tool-button.voice-reply {
      color: var(--accent);
    }

    .tool-button.voice-reply.active {
      color: #fff;
      background: var(--accent);
      box-shadow: 0 5px 12px rgba(48, 44, 47, 0.13);
    }

    .tool-button .tool-label {
      display: none;
    }

    .tool-spacer {
      flex: 1;
    }

    .attach-button,
    .sticker-button {
      width: 31px;
      height: 31px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--muted);
    }

    .attach-button {
      grid-area: attach;
    }

    .sticker-button {
      grid-area: sticker;
    }

    .sticker-button.active {
      background: var(--soft-2);
      color: var(--accent);
    }

    .send-button {
      grid-area: send;
      width: 39px;
      height: 39px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--soft);
      color: var(--muted);
    }

    .send-button.ready {
      background: var(--accent);
      color: #fff;
    }

    .send-button:disabled {
      opacity: 0.55;
    }

    .composer .attach-button svg,
    .composer .sticker-button svg,
    .composer .tool-button svg {
      width: 17px;
      height: 17px;
      stroke-width: 2.2;
    }

    .composer .send-button svg {
      width: 19px;
      height: 19px;
      stroke-width: 2.35;
    }

    .sticker-message {
      display: inline-grid;
      gap: 7px;
      justify-items: start;
      max-width: 190px;
      white-space: normal;
    }

    .msg.user .sticker-message {
      justify-items: end;
    }

    .sticker-message img {
      width: min(150px, 40vw);
      height: min(150px, 40vw);
      aspect-ratio: 1;
      border-radius: 12px;
      object-fit: contain;
      background: rgba(255, 253, 249, 0.72);
      border: 1px solid rgba(146, 116, 91, 0.18);
      box-shadow: 0 8px 20px rgba(90, 72, 52, 0.08);
    }

    .sticker-fallback {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 6px 10px;
      border-radius: 12px;
      background: rgba(238, 228, 214, 0.7);
      color: #786554;
      font-size: 13px;
      font-weight: 680;
    }

    .message-attachments {
      display: grid;
      gap: 8px;
      max-width: min(240px, 68vw);
      margin-bottom: 8px;
    }

    .msg.user .message-attachments {
      justify-items: end;
      margin-left: auto;
    }

    .message-attachment {
      display: grid;
      gap: 5px;
      justify-items: start;
    }

    .msg.user .message-attachment {
      justify-items: end;
    }

    .message-attachment img {
      width: min(220px, 62vw);
      height: auto;
      max-height: 260px;
      border-radius: 14px;
      object-fit: contain;
      background: rgba(255, 253, 249, 0.72);
      border: 1px solid rgba(146, 116, 91, 0.18);
      box-shadow: 0 8px 20px rgba(90, 72, 52, 0.08);
    }

    .message-attachment-fallback {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 6px 10px;
      border-radius: 12px;
      background: rgba(238, 228, 214, 0.74);
      color: #786554;
      font-size: 13px;
      font-weight: 680;
    }

    .sticker-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      padding: 4px 0 2px;
    }

    .sticker-tile {
      min-width: 0;
      min-height: 108px;
      border-radius: 16px;
      padding: 8px;
      display: grid;
      grid-template-rows: 1fr auto;
      gap: 7px;
      justify-items: center;
      background: rgba(255, 253, 249, 0.72);
      border: 1px solid rgba(146, 116, 91, 0.16);
      color: #6f5b48;
      box-shadow: 0 8px 18px rgba(90, 72, 52, 0.06);
    }

    .sticker-tile img {
      width: 72px;
      height: 72px;
      object-fit: contain;
      border-radius: 11px;
    }

    .sticker-tile span {
      max-width: 100%;
      font-size: 12px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sticker-empty {
      padding: 18px 4px;
      color: #a9957f;
      text-align: center;
      font-size: 13px;
      line-height: 1.5;
    }

    .voice-call-overlay {
      position: fixed;
      inset: 0;
      z-index: 42;
      display: none;
      width: 100%;
      min-height: 100vh;
      min-height: 100dvh;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 16%, rgba(255, 253, 249, 0.96), transparent 28%),
        radial-gradient(circle at 84% 28%, rgba(228, 207, 184, 0.52), transparent 34%),
        linear-gradient(160deg, #f8f1e8 0%, #eee3d6 48%, #f9f5ee 100%);
      color: #43382f;
    }

    .voice-call-overlay.open {
      display: block;
    }

    .voice-call-bg {
      position: absolute;
      inset: 0;
      opacity: 0.5;
      background:
        linear-gradient(115deg, transparent 0 22%, rgba(255, 255, 255, 0.55) 24%, transparent 31%),
        linear-gradient(70deg, transparent 0 58%, rgba(197, 169, 139, 0.2) 60%, transparent 66%);
      filter: blur(0.2px);
      pointer-events: none;
    }

    .voice-call-close,
    .voice-call-collapse {
      position: absolute;
      top: calc(var(--safe-top) + 14px);
      z-index: 3;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: rgba(84, 70, 58, 0.72);
      background: rgba(255, 253, 249, 0.42);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
    }

    .voice-call-close {
      left: 22px;
    }

    .voice-call-collapse {
      right: 22px;
    }

    .voice-call-incoming,
    .voice-call-active {
      position: relative;
      z-index: 2;
      width: min(100% - 32px, 448px);
      margin: 0 auto;
    }

    .voice-call-incoming {
      margin-top: calc(var(--safe-top) + 118px);
      min-height: 340px;
      padding: 30px 22px 28px;
      border-radius: 32px;
      display: grid;
      justify-items: center;
      text-align: center;
      background: rgba(255, 253, 249, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.72);
      box-shadow: 0 24px 70px rgba(88, 69, 50, 0.16);
      backdrop-filter: blur(18px);
    }

    .voice-call-kicker {
      color: #aa9684;
      font: 700 12px/1.2 ui-serif, Georgia, "Times New Roman", serif;
      letter-spacing: 0.24em;
      text-transform: lowercase;
    }

    .voice-call-incoming h2,
    .voice-call-active h2 {
      margin: 18px 0 9px;
      color: #3f332b;
      font-family: ui-serif, Georgia, "Times New Roman", serif;
      font-size: 31px;
      line-height: 1.12;
      font-weight: 760;
      letter-spacing: 0;
    }

    .voice-call-incoming p,
    .voice-call-active p {
      margin: 0;
      color: #79695b;
      font-size: 15px;
      line-height: 1.55;
    }

    .voice-call-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 34px;
      margin-top: 34px;
    }

    .voice-call-round {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      box-shadow: 0 16px 34px rgba(82, 61, 43, 0.18);
    }

    .voice-call-round svg {
      width: 30px;
      height: 30px;
    }

    .voice-call-round.decline,
    .voice-call-end {
      background: #cf8788;
    }

    .voice-call-round.answer {
      background: #78a775;
    }

    .voice-call-active {
      min-height: 100vh;
      min-height: 100dvh;
      padding: calc(var(--safe-top) + 76px) 22px calc(var(--safe-bottom) + 28px);
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      justify-items: center;
      text-align: center;
    }

    .voice-call-avatar-wrap {
      position: relative;
      width: min(58vw, 220px);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      margin-top: 28px;
    }

    .voice-wave {
      position: absolute;
      left: 50%;
      width: min(84vw, 380px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      transform: translateX(-50%);
      color: rgba(138, 115, 95, 0.38);
      pointer-events: none;
    }

    .voice-wave span {
      width: 4px;
      height: 18px;
      border-radius: 999px;
      background: currentColor;
      animation: voiceWave 1.2s ease-in-out infinite;
    }

    .voice-wave span:nth-child(2n) {
      height: 32px;
      animation-delay: 0.12s;
    }

    .voice-wave span:nth-child(3n) {
      height: 48px;
      animation-delay: 0.24s;
    }

    .voice-avatar {
      position: relative;
      z-index: 2;
      width: min(48vw, 178px);
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #8d633d;
      background: rgba(255, 253, 249, 0.94);
      border: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 20px 54px rgba(94, 74, 54, 0.18);
      font-family: ui-serif, Georgia, "Times New Roman", serif;
      font-size: 58px;
      font-weight: 800;
    }

    .voice-call-active h2 {
      margin-top: 24px;
      font-size: 34px;
    }

    .voice-call-state {
      margin-top: 8px;
      color: #9c8978;
      font: 700 13px/1.2 ui-serif, Georgia, "Times New Roman", serif;
      letter-spacing: 0.22em;
      text-transform: lowercase;
    }

    .voice-call-timer {
      margin-top: 13px;
      color: #7d6d60;
      font: 760 20px/1.2 ui-serif, Georgia, "Times New Roman", serif;
      letter-spacing: 0.14em;
    }

    .voice-call-quote {
      margin-top: 34px;
      color: rgba(128, 113, 101, 0.42);
      font-family: ui-serif, Georgia, "Times New Roman", serif;
      font-size: 42px;
      line-height: 1;
    }

    .voice-live-caption {
      width: 100%;
      display: grid;
      gap: 12px;
      justify-items: center;
      align-self: end;
      margin-bottom: 30px;
    }

    .voice-live-caption small {
      color: #a79787;
      font: 700 13px/1.2 ui-serif, Georgia, "Times New Roman", serif;
      letter-spacing: 0.08em;
    }

    .voice-caption-box {
      width: 100%;
      min-height: 58px;
      border-radius: 22px;
      display: grid;
      place-items: center;
      padding: 12px 18px;
      background: rgba(255, 253, 249, 0.62);
      border: 1px solid rgba(255, 255, 255, 0.72);
      color: #4f433a;
      font-size: 18px;
      box-shadow: 0 14px 38px rgba(89, 69, 49, 0.1);
    }

    .voice-call-record {
      position: relative;
      isolation: isolate;
      width: min(54vw, 188px);
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      grid-template-rows: 1fr auto;
      place-items: center;
      gap: 7px;
      padding: 28px 18px 24px;
      color: #fffaf4;
      background: linear-gradient(160deg, #b49374 0%, #8f6f52 100%);
      border: 1px solid rgba(255, 255, 255, 0.66);
      box-shadow: 0 22px 56px rgba(111, 82, 55, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.34);
      transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
      animation: voiceRecordIdle 3.2s ease-in-out infinite;
    }

    .voice-call-record::before,
    .voice-call-record::after {
      content: "";
      position: absolute;
      inset: -10px;
      z-index: -1;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
    }

    .voice-call-record::before {
      background: radial-gradient(circle, rgba(180, 147, 116, 0.28), rgba(180, 147, 116, 0.04) 62%, transparent 70%);
      animation: voiceRecordHalo 3.2s ease-in-out infinite;
    }

    .voice-call-record::after {
      border: 1px solid rgba(143, 111, 82, 0.24);
      transform: scale(0.94);
    }

    .voice-call-record:active {
      transform: scale(0.965);
    }

    .voice-call-record svg {
      position: relative;
      z-index: 1;
      width: 42px;
      height: 42px;
      filter: drop-shadow(0 4px 10px rgba(84, 62, 42, 0.16));
    }

    .voice-call-record span {
      position: relative;
      z-index: 1;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    .voice-call-record.recording,
    .voice-call-record.listening {
      filter: saturate(1.08);
      transform: scale(1.025);
      animation: voiceRecordPulse 1.4s ease-in-out infinite;
    }

    .voice-call-record.recording::before,
    .voice-call-record.listening::before {
      opacity: 1;
      animation: voiceRecordWave 1.45s ease-in-out infinite;
    }

    .voice-call-record.recording::after,
    .voice-call-record.listening::after {
      opacity: 1;
      animation: voiceRecordRing 1.45s ease-in-out infinite;
    }

    .voice-call-record.loading {
      animation: voiceRecordLoadingGlow 1.8s ease-in-out infinite;
    }

    .voice-call-record.loading svg {
      animation: voiceRecordSpin 1s linear infinite;
    }

    .voice-call-record.loading::before {
      opacity: 0.85;
      background:
        conic-gradient(from 0deg, rgba(255, 253, 249, 0), rgba(255, 253, 249, 0.5), rgba(255, 253, 249, 0)),
        radial-gradient(circle, rgba(180, 147, 116, 0.22), transparent 68%);
      animation: voiceRecordSpin 1.3s linear infinite;
    }

    .voice-call-record:disabled {
      opacity: 0.58;
      transform: none;
      animation: none;
    }

    .voice-call-record.loading:disabled {
      opacity: 0.86;
      animation: voiceRecordLoadingGlow 1.8s ease-in-out infinite;
    }

    .voice-call-controls {
      display: grid;
      gap: 18px;
      justify-items: center;
      width: 100%;
    }

    .voice-control-row {
      display: flex;
      justify-content: center;
      gap: min(8vw, 34px);
    }

    .voice-control {
      display: grid;
      justify-items: center;
      gap: 10px;
      color: #928170;
      font-size: 12px;
      font-weight: 720;
    }

    .voice-control button {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #6f6156;
      background: rgba(255, 253, 249, 0.56);
      border: 1px solid rgba(255, 255, 255, 0.78);
      box-shadow: 0 12px 26px rgba(91, 72, 52, 0.1);
    }

    .voice-control button.active {
      color: #fff;
      background: #a98565;
    }

    .voice-call-end {
      width: 86px;
      height: 86px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      box-shadow: 0 16px 34px rgba(143, 75, 75, 0.24);
    }

    .voice-call-end svg {
      width: 34px;
      height: 34px;
    }

    .voice-call-overlay[data-mode="incoming"] .voice-call-active,
    .voice-call-overlay[data-mode="active"] .voice-call-incoming {
      display: none;
    }

    @keyframes voiceWave {
      0%, 100% {
        transform: scaleY(0.42);
        opacity: 0.28;
      }
      50% {
        transform: scaleY(1);
        opacity: 0.7;
      }
    }

    @keyframes voiceRecordIdle {
      0%, 100% {
        transform: translateY(0);
        filter: saturate(1);
      }
      50% {
        transform: translateY(-3px);
        filter: saturate(1.04);
      }
    }

    @keyframes voiceRecordHalo {
      0%, 100% {
        opacity: 0.28;
        transform: scale(0.96);
      }
      50% {
        opacity: 0.52;
        transform: scale(1.04);
      }
    }

    @keyframes voiceRecordPulse {
      0%, 100% {
        box-shadow: 0 22px 56px rgba(111, 82, 55, 0.22), 0 0 0 0 rgba(143, 111, 82, 0.24);
      }
      50% {
        box-shadow: 0 24px 60px rgba(111, 82, 55, 0.26), 0 0 0 14px rgba(143, 111, 82, 0);
      }
    }

    @keyframes voiceRecordWave {
      0% {
        opacity: 0.72;
        transform: scale(0.96);
      }
      70% {
        opacity: 0;
        transform: scale(1.28);
      }
      100% {
        opacity: 0;
        transform: scale(1.28);
      }
    }

    @keyframes voiceRecordRing {
      0% {
        opacity: 0.62;
        transform: scale(0.96);
      }
      100% {
        opacity: 0;
        transform: scale(1.34);
      }
    }

    @keyframes voiceRecordLoadingGlow {
      0%, 100% {
        box-shadow: 0 22px 56px rgba(111, 82, 55, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.34);
      }
      50% {
        box-shadow: 0 24px 64px rgba(111, 82, 55, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.42);
      }
    }

    @keyframes voiceRecordSpin {
      to {
        transform: rotate(360deg);
      }
    }

    .shade {
      position: fixed;
      inset: 0;
      background: rgba(23, 24, 28, 0.34);
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
      z-index: 20;
    }

    .shade.open {
      opacity: 1;
      pointer-events: auto;
    }

    .drawer,
    .settings {
      position: fixed;
      top: 0;
      bottom: 0;
      z-index: 24;
      display: grid;
      grid-template-rows: auto 1fr auto;
      background: var(--bg);
      box-shadow: var(--shadow);
      transition: transform 220ms ease;
    }

    .drawer {
      left: 0;
      width: min(82vw, 344px);
      transform: translateX(-104%);
    }

    .settings {
      right: 0;
      width: min(100vw, 480px);
      transform: translateX(104%);
    }

    .drawer.open,
    .settings.open {
      transform: translateX(0);
    }

    .drawer-head,
    .settings-head {
      padding: calc(var(--safe-top) + 16px) 18px 12px;
    }

    .search-bar {
      height: 44px;
      display: grid;
      grid-template-columns: 30px 1fr;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      border-radius: 20px;
      background: #f0f0f2;
      color: var(--muted);
    }

    .search-bar input {
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font-size: 16px;
    }

    .assistant-row {
      margin-top: 20px;
      display: grid;
      grid-template-columns: 44px 1fr;
      align-items: center;
      gap: 12px;
    }

    .assistant-row strong {
      font-size: 18px;
    }

    .drawer-body {
      overflow: auto;
      padding: 0 14px 16px;
    }

    .settings .drawer-body {
      padding: 0 16px calc(var(--safe-bottom) + 18px);
    }

    .section-title {
      margin: 22px 12px 9px;
      color: var(--blue);
      font-size: 15px;
      font-weight: 760;
    }

    .conversation-list {
      display: grid;
      gap: 5px;
    }

    .conversation-item {
      min-height: 42px;
      border-radius: 18px;
      padding: 7px 8px 7px 16px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      justify-content: center;
      text-align: left;
      font-size: 15px;
    }

    .conversation-main {
      min-width: 0;
      border: 0;
      background: transparent;
      padding: 2px 0;
      display: flex;
      flex-direction: column;
      text-align: left;
      color: inherit;
      font: inherit;
    }

    .conversation-main strong,
    .conversation-main span {
      width: 100%;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .conversation-main strong {
      font-size: 14px;
      font-weight: 720;
    }

    .conversation-main span {
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
    }

    .conversation-actions {
      display: flex;
      align-items: center;
      gap: 3px;
      margin-left: 6px;
      opacity: 0.72;
    }

    .conversation-action {
      width: 28px;
      height: 28px;
      border: 0;
      border-radius: 999px;
      background: color-mix(in srgb, var(--paper) 65%, transparent);
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .conversation-action svg {
      width: 14px;
      height: 14px;
    }

    .conversation-action:active {
      transform: scale(0.94);
      background: rgba(196, 147, 104, 0.18);
      color: var(--brown);
    }

    .conversation-item.active {
      background: #e7e9f1;
    }

    .drawer-foot {
      padding: 13px 18px calc(var(--safe-bottom) + 16px);
      display: grid;
      grid-template-columns: 42px 1fr 42px 42px;
      align-items: center;
      gap: 10px;
      background: rgba(var(--bg-rgb), 0.94);
      backdrop-filter: blur(18px);
    }

    .drawer-foot strong {
      font-size: 17px;
    }

    .settings-head {
      display: grid;
      grid-template-columns: 38px 1fr;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid rgba(222, 223, 228, 0.7);
      background: rgba(var(--bg-rgb), 0.94);
      backdrop-filter: blur(18px);
    }

    .settings-head h2 {
      margin: 0;
      font-size: 19px;
      line-height: 1.15;
      text-align: center;
      transform: translateX(-19px);
    }

    .settings-page {
      display: none;
      min-height: 100%;
      padding-bottom: 18px;
    }

    .settings-page.active {
      display: block;
    }

    .settings-menu {
      margin: 8px 0 0;
      border: 0;
      border-radius: 22px;
      background: var(--paper);
      overflow: hidden;
    }

    .settings-menu + .settings-section-title {
      margin-top: 20px;
    }

    .settings-section-title {
      margin: 18px 12px 7px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 760;
    }

    .settings-menu-row {
      width: 100%;
      min-height: 64px;
      display: grid;
      grid-template-columns: 42px 1fr 24px;
      align-items: center;
      gap: 12px;
      padding: 0 13px;
      text-align: left;
      position: relative;
    }

    .settings-menu-row + .settings-menu-row::before {
      content: "";
      position: absolute;
      left: 67px;
      right: 13px;
      top: 0;
      height: 1px;
      background: var(--line);
    }

    .settings-menu-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--icon-bg, #1677ff);
      box-shadow: 0 7px 14px rgba(20, 22, 28, 0.07);
    }

    .settings-menu-icon svg {
      width: 20px;
      height: 20px;
      stroke-width: 2.35;
    }

    .settings-menu-icon.api {
      --icon-bg: #1677ff;
    }

    .settings-menu-icon.identity {
      --icon-bg: #7b61ff;
    }

    .settings-menu-icon.theme {
      --icon-bg: #b65ade;
    }

    .settings-menu-icon.wallpaper {
      --icon-bg: #32c766;
    }

    .settings-menu-icon.tone {
      --icon-bg: #ff7a59;
    }

    .settings-menu-icon.future {
      --icon-bg: #6f65d6;
    }

    .settings-menu-icon.memory {
      --icon-bg: #18a999;
    }

    .settings-menu-icon.model {
      --icon-bg: #5569d9;
    }

    .settings-menu-icon.voice {
      --icon-bg: #ed8b27;
    }

    .settings-menu-icon.data {
      --icon-bg: #4e8d60;
    }

    .settings-menu-icon.about {
      --icon-bg: #60646c;
    }

    .settings-menu-icon.translate {
      --icon-bg: #4f6aad;
    }

    .settings-menu-row strong {
      display: block;
      font-size: 15.5px;
      line-height: 1.15;
      font-weight: 720;
    }

    .settings-menu-row > span:not(.settings-menu-icon) {
      display: block;
      min-width: 0;
    }

    .settings-menu-row > span:not(.settings-menu-icon) > span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.25;
    }

    .settings-page-note {
      display: none;
      margin: 14px 26px 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .settings .drawer-body > [data-settings-group],
    .settings .settings-actions[data-settings-group] {
      display: none;
    }

    .settings[data-page="home"] .settings-menu,
    .settings[data-page="home"] .settings-page-note {
      display: block;
    }

    .settings:not([data-page="home"]) .settings-menu,
    .settings:not([data-page="home"]) .settings-section-title,
    .settings:not([data-page="home"]) .settings-page-note {
      display: none;
    }

    .settings[data-page="persona"] [data-settings-group="persona"],
    .settings[data-page="identity"] [data-settings-group="identity"],
    .settings[data-page="theme"] [data-settings-group="theme"],
    .settings[data-page="tone"] [data-settings-group="tone"],
    .settings[data-page="defaultModel"] [data-settings-group="defaultModel"],
    .settings[data-page="providers"] [data-settings-group="providers"],
    .settings[data-page="search"] [data-settings-group="search"],
    .settings[data-page="translator"] [data-settings-group="translator"],
    .settings[data-page="voice"] [data-settings-group="voice"],
    .settings[data-page="voiceInteraction"] [data-settings-group="voiceInteraction"],
    .settings[data-page="diaryApp"] [data-settings-group="diaryApp"],
    .settings[data-page="gameApp"] [data-settings-group="gameApp"],
    .settings[data-page="outfitCare"] [data-settings-group="outfitCare"],
    .settings[data-page="musicApp"] [data-settings-group="musicApp"],
    .settings[data-page="periodCare"] [data-settings-group="periodCare"],
    .settings[data-page="anniversary"] [data-settings-group="anniversary"],
    .settings[data-page="drawingApp"] [data-settings-group="drawingApp"],
    .settings[data-page="mcp"] [data-settings-group="mcp"],
    .settings[data-page="memory"] [data-settings-group="memory"],
    .settings[data-page="stickers"] [data-settings-group="stickers"],
    .settings[data-page="characterCards"] [data-settings-group="characterCards"],
    .settings[data-page="worldBook"] [data-settings-group="worldBook"],
    .settings[data-page="quickPhrases"] [data-settings-group="quickPhrases"],
    .settings[data-page="injection"] [data-settings-group="injection"],
    .settings[data-page="proxy"] [data-settings-group="proxy"],
    .settings[data-page="backup"] [data-settings-group="backup"],
    .settings[data-page="storage"] [data-settings-group="storage"],
    .settings[data-page="about"] [data-settings-group="about"],
    .settings[data-page="stats"] [data-settings-group="stats"],
    .settings[data-page="diagnostics"] [data-settings-group="diagnostics"],
    .settings[data-page="logs"] [data-settings-group="logs"],
    .settings[data-page="future"] [data-settings-group="future"] {
      display: block;
    }

    .settings[data-page="persona"] .settings-actions[data-settings-group="persona"] {
      display: grid;
    }

    .settings-card {
      margin: 0;
      border: 0;
      border-radius: 22px;
      background: var(--paper);
      overflow: hidden;
      animation: settingsDetailIn 180ms ease both;
    }

    .settings .section-title[data-settings-group] {
      display: none !important;
    }

    .settings:not([data-page="home"]) .settings-card {
      margin-top: 18px;
    }

    @keyframes settingsDetailIn {
      from {
        opacity: 0;
        transform: translateX(12px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .drawer-row {
      width: 100%;
      min-height: 58px;
      display: grid;
      grid-template-columns: 42px 1fr auto;
      align-items: center;
      gap: 8px;
      padding: 0 13px;
      text-align: left;
      position: relative;
    }

    .drawer-row + .drawer-row::before,
    .future-row + .future-row::before {
      content: "";
      position: absolute;
      left: 58px;
      right: 13px;
      top: 0;
      height: 1px;
      background: var(--line);
    }

    .drawer-icon {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      color: #44464b;
    }

    .drawer-label {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .drawer-label strong {
      font-size: 15px;
      font-weight: 720;
    }

    .drawer-label span,
    .row-value {
      color: var(--muted);
      font-size: 12px;
    }

    .token-box {
      padding: 14px 14px 16px;
      display: grid;
      gap: 9px;
    }

    .token-box label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .token-box input,
    .profile-field input,
    .profile-field select,
    .profile-field textarea {
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 14px;
      outline: 0;
      padding: 0 12px;
      background: #fafafa;
      color: var(--ink);
    }

    .background-options {
      padding: 14px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .profile-grid {
      padding: 14px;
      display: grid;
      gap: 10px;
    }

    .profile-field {
      display: grid;
      gap: 6px;
    }

    .profile-field label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .profile-field textarea {
      min-height: 82px;
      resize: vertical;
      padding-top: 10px;
      line-height: 1.45;
    }

    .compact-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .theme-choice,
    .tone-choice {
      min-height: 50px;
      padding: 10px;
      border: 1px solid #ececf0;
      border-radius: 16px;
      background: #fafafa;
      display: grid;
      grid-template-columns: 26px 1fr;
      align-items: center;
      gap: 9px;
      text-align: left;
      color: var(--ink);
    }

    .theme-choice.active,
    .tone-choice.active {
      border-color: #cfd4e8;
      background: #f0f2fa;
    }

    .theme-dot {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.08);
      background: #f7f7f8;
    }

    .theme-choice[data-theme="clean"] .theme-dot {
      background: #f8f4ef;
    }

    .theme-choice[data-theme="blue"] .theme-dot {
      background: #eef3fb;
    }

    .theme-choice[data-theme="rose"] .theme-dot {
      background: #faf0f3;
    }

    .theme-choice[data-theme="purple"] .theme-dot {
      background: #f1eafa;
    }

    .theme-choice[data-theme="kelivo"] .theme-dot {
      background: #f7f8fb;
    }

    .theme-choice[data-theme="life"] .theme-dot {
      background: linear-gradient(135deg, #faf6ef 40%, #d98a5f);
    }

    .tone-choice[data-tone="clean"] .theme-dot {
      background: #e0e4ee;
    }

    .tone-choice[data-tone="warm"] .theme-dot {
      background: #eaded1;
    }

    .tone-choice[data-tone="blue"] .theme-dot {
      background: #dce6f6;
    }

    .tone-choice[data-tone="rose"] .theme-dot {
      background: #efdde5;
    }

    .tone-choice[data-tone="purple"] .theme-dot {
      background: #e8def4;
    }

    .tone-choice[data-tone="kelivo"] .theme-dot {
      background: #e8ebf2;
    }

    .theme-choice strong,
    .tone-choice strong {
      display: block;
      font-size: 14px;
      line-height: 1.15;
    }

    .theme-choice > span:not(.theme-dot),
    .tone-choice > span:not(.theme-dot) {
      display: block;
      min-width: 0;
    }

    .theme-choice > span:not(.theme-dot) > span,
    .tone-choice > span:not(.theme-dot) > span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.2;
    }

    .future-row {
      min-height: 52px;
      display: grid;
      grid-template-columns: 42px 1fr auto;
      align-items: center;
      gap: 8px;
      padding: 0 13px;
      position: relative;
      opacity: 0.62;
    }

    .future-row.live {
      opacity: 1;
    }

    .future-tag {
      padding: 4px 8px;
      border-radius: 999px;
      background: #f0f0f3;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .future-tag.live {
      background: #e8f6ee;
      color: #287347;
    }

    .future-tag.waiting {
      background: #f6efe4;
      color: #856034;
    }

    .memory-note {
      padding: 14px;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.55;
    }

    .world-book-list {
      padding: 0 12px 12px;
      display: grid;
      gap: 10px;
    }

    .world-book-card {
      border: 1px solid rgba(188, 145, 103, 0.22);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(247, 239, 229, 0.9));
      padding: 13px;
      display: grid;
      gap: 10px;
    }

    .world-book-card.active {
      border-color: rgba(158, 111, 72, 0.38);
      box-shadow: 0 10px 26px rgba(132, 91, 58, 0.11);
    }

    .world-book-head {
      display: grid;
      grid-template-columns: 34px 1fr auto;
      gap: 10px;
      align-items: center;
    }

    .world-book-icon {
      width: 34px;
      height: 34px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      color: #7b5737;
      background: rgba(222, 199, 174, 0.45);
    }

    .world-book-icon svg {
      width: 18px;
      height: 18px;
    }

    .world-book-title {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .world-book-title strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 15px;
      line-height: 1.2;
    }

    .world-book-title span,
    .world-book-desc,
    .world-book-policy {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .world-book-desc {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .world-book-policy {
      border-radius: 14px;
      padding: 9px 10px;
      background: rgba(228, 213, 195, 0.42);
      color: #71563d;
    }

    .world-book-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .world-book-actions button {
      min-height: 34px;
      border: 0;
      border-radius: 999px;
      padding: 0 12px;
      background: rgba(123, 87, 55, 0.12);
      color: #6f4f33;
      font-size: 12px;
      font-weight: 760;
    }

    .world-book-actions button.primary {
      background: #8d6747;
      color: #fffaf3;
    }

    .world-book-actions button:disabled {
      opacity: 0.55;
    }

    .memory-metrics {
      padding: 14px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .memory-metric {
      min-height: 76px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: #fafafa;
      padding: 11px;
      display: grid;
      align-content: space-between;
      gap: 8px;
    }

    .memory-metric strong {
      font-size: 13px;
      line-height: 1.25;
    }

    .memory-metric span {
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.35;
    }

    .memory-flow {
      padding: 3px 14px 14px;
      display: grid;
      gap: 8px;
    }

    .memory-flow-step {
      display: grid;
      grid-template-columns: 28px 1fr auto;
      align-items: center;
      gap: 9px;
      min-height: 42px;
      border-radius: 15px;
      background: #f7f7f8;
      padding: 7px 10px;
    }

    .memory-flow-step b {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #e8eaf2;
      color: #505a78;
      font-size: 12px;
    }

    .memory-flow-step strong {
      display: block;
      font-size: 13px;
      line-height: 1.2;
    }

    .memory-flow-step span {
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.25;
    }

    .memory-quote-card {
      margin: 0 14px 14px;
      border-radius: 17px;
      background: #f7f2ee;
      padding: 12px;
      color: #6c5b50;
      font-size: 12.5px;
      line-height: 1.5;
    }

    .memory-quote-card strong {
      display: block;
      margin-bottom: 5px;
      color: #443d38;
      font-size: 13px;
    }

    .settings-segment {
      margin: 14px;
      padding: 4px;
      border-radius: 18px;
      background: #f2f2f4;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
    }

    .settings-segment span {
      min-height: 38px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      color: #555961;
      font-size: 13px;
      font-weight: 720;
    }

    .settings-segment span.active {
      background: #e3e6f0;
      color: #53639a;
    }

    .provider-head {
      padding: 14px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 42px;
      gap: 10px;
      align-items: center;
    }

    .provider-search,
    .quick-search {
      height: 46px;
      border-radius: 17px;
      background: var(--theme-panel-soft, var(--soft));
      display: grid;
      grid-template-columns: 34px 1fr;
      align-items: center;
      padding: 0 12px;
      color: var(--muted);
    }

    .provider-search input,
    .quick-search input {
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font-size: 14px;
    }

    .provider-add-button {
      color: #4d4138;
    }

    .provider-list {
      padding: 0 14px 14px;
      display: grid;
    }

    .provider-row {
      min-height: 64px;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto 24px;
      align-items: center;
      gap: 12px;
      border-top: 1px solid var(--line);
      text-align: left;
      color: var(--ink);
    }

    .provider-row:first-child {
      border-top: 0;
    }

    .provider-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #eef0f5;
      color: #53639a;
      border: 1px solid rgba(91, 102, 142, 0.08);
      font-size: 13px;
      font-weight: 760;
    }

    .provider-avatar.large {
      width: 42px;
      height: 42px;
      font-size: 16px;
    }

    .provider-row-label {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .provider-row-label strong {
      font-size: 16px;
      font-weight: 780;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .provider-row-label span {
      color: var(--muted);
      font-size: 11.5px;
    }

    .provider-status {
      padding: 5px 9px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 760;
      white-space: nowrap;
      background: #f8ead8;
      color: #b06a23;
    }

    .provider-status.enabled {
      background: #e8f6ee;
      color: #2d8a50;
    }

    .provider-sheet {
      background: var(--bg);
      max-height: 86vh;
      max-height: 86dvh;
    }

    .provider-type-tabs,
    .provider-detail-tabs {
      margin: 10px 14px 14px;
      padding: 4px;
      border-radius: 18px;
      background: #f2f0ec;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
    }

    .provider-type-tabs button,
    .provider-detail-tabs button {
      min-height: 40px;
      border-radius: 14px;
      color: #55514c;
      font-size: 14px;
      font-weight: 760;
    }

    .provider-detail-tabs button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
    }

    .provider-type-tabs button.active,
    .provider-detail-tabs button.active {
      background: #e5e2dc;
      color: #6d604f;
    }

    .provider-toggle-card {
      margin: 0 14px 14px;
      border-radius: 18px;
      background: var(--paper);
      overflow: hidden;
    }

    .provider-switch-row {
      width: 100%;
      min-height: 54px;
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-top: 1px solid var(--line);
      color: var(--ink);
      font-size: 15px;
      font-weight: 740;
      text-align: left;
    }

    .provider-switch-row:first-child {
      border-top: 0;
    }

    .provider-switch-row.readonly {
      pointer-events: none;
    }

    .provider-switch-row.active .switch {
      background: #6270a7;
    }

    .provider-switch-row.active .switch::before {
      transform: translateX(19px);
    }

    /* ------- 渠道面板(运行引擎 -> 渠道 -> 模型) ------- */
    .channel-status-card {
      margin: 4px 14px 14px;
      padding: 14px 16px;
      border-radius: 8px;
      background: #f4eee5;
      border: 1px solid var(--line);
    }

    .channel-status-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }

    .channel-status-title {
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.08em;
    }

    .channel-status-main {
      font-size: 17px;
      font-weight: 700;
      color: var(--ink);
    }

    .channel-status-sub {
      margin-top: 4px;
      font-size: 12.5px;
      color: var(--muted);
    }

    .channel-status-meta {
      margin-top: 8px;
      font-size: 12.5px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .channel-badge {
      display: inline-block;
      padding: 2px 9px;
      border-radius: 999px;
      font-size: 11.5px;
      font-weight: 600;
      line-height: 1.6;
      white-space: nowrap;
    }

    .channel-badge.quota {
      background: #e4efe2;
      color: #4c7a4f;
    }

    .channel-badge.token {
      background: #f7e6dc;
      color: #b96f50;
    }

    .channel-badge.other {
      background: var(--soft-2);
      color: var(--muted);
    }

    .channel-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbc4b8;
      display: inline-block;
      flex: none;
    }

    .channel-dot.online {
      background: #64a45f;
      box-shadow: 0 0 0 3px rgba(100, 164, 95, 0.18);
    }

    .channel-dot.offline {
      background: #c96a52;
      box-shadow: 0 0 0 3px rgba(201, 106, 82, 0.16);
    }

    .channel-section-title {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin: 4px 18px 8px;
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
    }

    .channel-section-hint {
      font-size: 11.5px;
      font-weight: 400;
      color: var(--muted);
      text-align: right;
    }

    .channel-section-hint svg {
      width: 12px;
      height: 12px;
      vertical-align: -2px;
    }

    .channel-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin: 0 14px 16px;
    }

    .channel-engine-section {
      min-width: 0;
    }

    .channel-engine-head {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 34px;
      padding: 0 3px 9px;
    }

    .channel-engine-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      flex: none;
      border-radius: 7px;
      background: #ece8f4;
      color: #59659b;
    }

    .engine-openclaw .channel-engine-icon {
      background: #e5efe7;
      color: #4d7957;
    }

    .engine-direct .channel-engine-icon {
      background: #f3ece2;
      color: #8d7153;
    }

    .channel-engine-icon svg {
      width: 17px;
      height: 17px;
    }

    .channel-engine-copy {
      display: flex;
      align-items: baseline;
      gap: 8px;
      min-width: 0;
    }

    .channel-engine-copy strong {
      font-size: 16px;
      color: var(--ink);
    }

    .channel-engine-copy span {
      font-size: 11.5px;
      color: var(--muted);
      white-space: nowrap;
    }

    .channel-engine-channels {
      display: grid;
      gap: 10px;
    }

    .channel-card {
      border-radius: 8px;
      background: var(--paper);
      border: 1px solid var(--line);
      overflow: hidden;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .channel-card.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px var(--accent);
    }

    .channel-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 48px;
      padding: 9px 12px;
    }

    .channel-card-name {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .channel-card-name strong {
      font-size: 15px;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .channel-model-count {
      font-size: 11.5px;
      color: var(--muted);
      white-space: nowrap;
    }

    .channel-card-side {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: none;
    }

    .channel-check {
      color: var(--accent);
      width: 18px;
      height: 18px;
    }

    .channel-pin {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--soft);
      color: var(--muted);
      cursor: pointer;
    }

    .channel-pin svg {
      width: 14px;
      height: 14px;
    }

    .channel-pin.pinned {
      background: #f2e2d5;
      border-color: #dcb99f;
      color: var(--accent);
    }

    .channel-model-list {
      display: flex;
      flex-direction: column;
      border-top: 1px dashed var(--line);
    }

    .channel-model-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 42px;
      padding: 9px 12px;
      font-size: 13.5px;
      color: var(--ink);
      background: none;
      border: none;
      text-align: left;
      cursor: pointer;
    }

    .channel-model-row + .channel-model-row {
      border-top: 1px solid var(--line);
    }

    .channel-model-row span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .channel-model-row.active {
      color: var(--accent);
      font-weight: 700;
      background: #f9f1e9;
    }

    .channel-model-row .channel-check {
      flex: none;
    }

    .channel-source-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      padding: 11px 14px;
      border-radius: 14px;
      background: var(--paper);
      border: 1px solid var(--line);
      text-align: left;
      cursor: pointer;
    }

    .channel-source-row.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px var(--accent);
    }

    .channel-source-row.active .channel-check {
      opacity: 1;
    }

    .channel-source-row .channel-check {
      opacity: 0;
    }

    .channel-source-row.busy {
      opacity: 0.55;
      pointer-events: none;
    }

    .channel-source-name {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .channel-source-name strong {
      font-size: 14px;
      color: var(--ink);
    }

    .channel-source-url {
      font-size: 11.5px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 260px;
    }

    .channel-note {
      padding: 12px 14px;
      border-radius: 14px;
      background: var(--soft);
      font-size: 12.5px;
      color: var(--muted);
    }

    .provider-form-grid {
      padding-top: 0;
    }

    .provider-submit {
      width: calc(100% - 28px);
      min-height: 48px;
      margin: 10px 14px calc(14px + env(safe-area-inset-bottom));
      border-radius: 16px;
      background: #e3e6f0;
      color: #53639a;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 780;
    }

    .model-default-action {
      position: sticky;
      bottom: 0;
      width: calc(100% - 28px);
      min-height: 46px;
      margin: 10px 14px calc(10px + env(safe-area-inset-bottom));
      border-radius: 16px;
      background: var(--theme-active-bg, var(--soft-2));
      color: var(--theme-primary-ink, var(--blue));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 560;
      box-shadow: 0 -10px 22px rgba(var(--bg-rgb), 0.72);
    }

    .provider-detail-top {
      margin: 6px 14px 10px;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
    }

    .provider-detail-top div {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .provider-detail-top strong {
      font-size: 18px;
      font-weight: 820;
    }

    .provider-detail-top span {
      color: var(--muted);
      font-size: 12px;
    }

    .provider-detail-panel {
      display: none;
    }

    .provider-detail-panel.active {
      display: block;
    }

    .provider-model-empty {
      min-height: 180px;
      display: grid;
      place-content: center;
      gap: 7px;
      text-align: center;
      color: var(--muted);
    }

    .provider-model-empty strong {
      color: var(--ink);
      font-size: 18px;
    }

    .provider-model-list,
    .provider-fetch-list {
      padding: 0 14px 14px;
      display: grid;
      gap: 8px;
    }

    .provider-manual-add {
      margin: 4px 14px 10px;
      display: flex;
      gap: 8px;
    }

    .provider-manual-add input {
      flex: 1;
      min-width: 0;
      height: 44px;
      padding: 0 14px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--ink);
      font-size: 14px;
    }

    .provider-manual-add input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 1px var(--accent);
    }

    .provider-manual-add button {
      flex: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 0 16px;
      height: 44px;
      border-radius: 14px;
      border: none;
      background: var(--accent);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }

    .provider-manual-add button svg {
      width: 15px;
      height: 15px;
    }

    .provider-model-row,
    .provider-fetch-row {
      min-height: 58px;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      align-items: center;
      gap: 11px;
      border-radius: 17px;
      background: rgba(255, 255, 255, 0.68);
      padding: 9px 10px;
      color: var(--ink);
      text-align: left;
    }

    .provider-model-row strong,
    .provider-fetch-row strong {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 780;
    }

    .provider-model-row span,
    .provider-fetch-row span {
      color: var(--muted);
      font-size: 11px;
    }

    .provider-model-actions {
      position: sticky;
      bottom: 0;
      padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
      display: grid;
      grid-template-columns: 0.86fr 1.14fr;
      gap: 10px;
      background: linear-gradient(to top, var(--bg) 78%, rgba(var(--bg-rgb), 0));
    }

    .provider-model-actions button {
      min-height: 46px;
      border-radius: 17px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #53639a;
      background: #e3e6f0;
      font-weight: 780;
    }

    .provider-model-actions button:first-child {
      background: transparent;
      box-shadow: inset 0 0 0 1px #b9c0dd;
    }

    .provider-model-row .provider-model-edit {
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: var(--ink);
      display: grid;
      place-items: center;
      flex: 0 0 auto;
    }

    .provider-model-row .provider-model-edit svg {
      width: 18px;
      height: 18px;
    }

    .model-param-intro {
      margin: 14px 0 18px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }

    .model-param-section {
      margin-top: 18px;
    }

    .model-param-section h3 {
      margin: 0 0 12px;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0;
      color: var(--ink);
    }

    .model-param-list {
      display: grid;
      gap: 10px;
    }

    .model-param-row {
      display: grid;
      grid-template-columns: 1fr 38px;
      gap: 9px;
      align-items: start;
    }

    .model-param-row.header {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) 38px;
    }

    .model-param-row input,
    .model-param-row textarea {
      width: 100%;
      min-width: 0;
      border: 1px solid var(--theme-border-strong, rgba(135, 124, 106, 0.3));
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.72);
      color: var(--ink);
      padding: 12px 14px;
      font: inherit;
      font-size: 14px;
      outline: none;
    }

    .model-param-row textarea {
      grid-column: 1 / -1;
      min-height: 90px;
      resize: vertical;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      line-height: 1.5;
    }

    .model-param-row button,
    .model-param-add {
      border: 1px solid var(--theme-border-strong, rgba(87, 105, 158, 0.34));
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.58);
      color: #526aa3;
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font: inherit;
      font-weight: 500;
    }

    .model-param-add {
      justify-self: center;
      margin-top: 12px;
      padding: 0 18px;
      min-height: 44px;
      border-radius: 16px;
    }

    .model-param-actions {
      position: sticky;
      bottom: 0;
      margin-top: 22px;
      padding: 14px 0 0;
      background: linear-gradient(to bottom, rgba(255,255,255,0), var(--paper) 35%);
    }

    .model-param-confirm {
      width: 100%;
      min-height: 52px;
      border: 1px solid rgba(82, 106, 163, 0.34);
      border-radius: 16px;
      background: rgba(226, 231, 244, 0.84);
      color: #526aa3;
      font: inherit;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    @media (max-width: 420px) {
      .model-param-row.header {
        grid-template-columns: 1fr 38px;
      }

      .model-param-row.header input[data-param-field="value"] {
        grid-column: 1 / -1;
      }
    }

    .provider-detail-actions {
      position: sticky;
      bottom: 0;
      padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 10px;
      background: linear-gradient(to top, var(--bg) 78%, rgba(var(--bg-rgb), 0));
    }

    .provider-detail-actions button {
      min-height: 46px;
      border-radius: 17px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 780;
    }

    .provider-detail-actions .primary {
      background: #e9ddcf;
      color: #6e5846;
    }

    .provider-detail-actions .danger {
      background: #f5e7df;
      color: #a35238;
    }

    .provider-detail-actions button:disabled,
    .provider-model-actions button:disabled,
    .provider-row:disabled {
      opacity: 0.52;
      cursor: not-allowed;
    }

    .mock-textarea {
      min-height: 132px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: #fafafa;
      padding: 12px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    .memory-list {
      padding: 0 14px 14px;
      display: grid;
      gap: 9px;
    }

    .memory-item {
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #fafafa;
      padding: 10px 11px;
      display: grid;
      gap: 5px;
    }

    .memory-item strong {
      font-size: 12px;
      color: #555960;
      text-transform: uppercase;
    }

    .memory-item p {
      margin: 0;
      font-size: 13px;
      line-height: 1.45;
    }

    .hub-log-actions {
      padding: 0 12px 12px;
      display: flex;
      gap: 8px;
    }

    .hub-log-list {
      padding: 0 12px 14px;
      display: grid;
      gap: 9px;
    }

    .hub-log-item {
      border: 1px solid rgba(150, 123, 96, 0.14);
      border-radius: 14px;
      background: rgba(255, 252, 247, 0.72);
      padding: 10px 11px;
      display: grid;
      gap: 6px;
    }

    .hub-log-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #a58d77;
      font-size: 11px;
      font-weight: 720;
    }

    .hub-log-role {
      color: #8b6749;
    }

    .hub-log-text {
      color: var(--ink);
      font-size: 13px;
      line-height: 1.5;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .hub-log-meta {
      color: #aa9784;
      font-size: 11px;
    }

    .hub-log-empty {
      padding: 8px 2px 2px;
      color: #a8927f;
      font-size: 12.5px;
      line-height: 1.5;
    }

    .settings-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 0 12px 18px;
    }

    .pill-button {
      height: 44px;
      border-radius: 15px;
      background: #ededf0;
      font-weight: 720;
    }

    .pill-button.dark {
      background: #202124;
      color: #fff;
    }

    .sheet {
      position: fixed;
      left: 50%;
      bottom: 0;
      z-index: 26;
      width: min(100%, 480px);
      max-height: 72vh;
      max-height: 72dvh;
      padding: 10px 16px calc(var(--safe-bottom) + 16px);
      border-radius: 25px 25px 0 0;
      background: var(--paper);
      box-shadow: var(--shadow);
      overflow: auto;
      transform: translate(-50%, 104%);
      transition: transform 220ms ease;
    }

    .sheet.open {
      transform: translate(-50%, 0);
    }

    .sheet[aria-hidden="false"] {
      transform: translate(-50%, 0) !important;
    }

    .chat-search-sheet.open,
    .chat-search-sheet[aria-hidden="false"] {
      transform: translate3d(-50%, 0, 0) !important;
    }

    .sheet-handle {
      width: 42px;
      height: 5px;
      margin: 0 auto 15px;
      border-radius: 999px;
      background: #d5d6db;
    }

    .sheet-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .sheet-title h2 {
      margin: 0;
      font-size: 18px;
    }

    .sheet-title-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .memory-console-page {
      top: var(--visual-offset-top);
      bottom: 0;
      max-height: none;
      height: calc(100dvh - var(--visual-offset-top));
      border-radius: 0;
      padding: calc(var(--safe-top) + 12px) 16px calc(var(--safe-bottom) + 18px);
      transform: translate(-50%, 104%);
    }

    .memory-console-page .sheet-handle {
      display: none;
    }

    .memory-console-page .sheet-title {
      position: sticky;
      top: calc(-1 * (var(--safe-top) + 12px));
      z-index: 2;
      margin: calc(-1 * (var(--safe-top) + 12px)) -16px 12px;
      padding: calc(var(--safe-top) + 12px) 16px 10px;
      background: color-mix(in srgb, var(--paper) 94%, transparent);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(139, 105, 78, 0.1);
    }

    .capability-list {
      display: grid;
      gap: 10px;
    }

    .capability-card,
    .reserved-card {
      min-height: 68px;
      border-radius: 17px;
      background: #f5f5f7;
      border: 1px solid #ececf0;
      padding: 13px;
      display: grid;
      grid-template-columns: 36px 1fr auto;
      align-items: center;
      gap: 10px;
      text-align: left;
    }

    .reserved-card {
      opacity: 0.62;
      cursor: default;
    }

    .capability-card strong,
    .reserved-card strong {
      display: block;
      font-size: 15px;
      line-height: 1.15;
    }

    .capability-card span,
    .reserved-card span {
      color: var(--muted);
      font-size: 12px;
    }

    .message-sheet {
      max-height: 78vh;
      max-height: 78dvh;
    }

    .message-sheet-meta {
      margin: -6px 0 12px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .version-strip {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 1px 0 12px;
      scrollbar-width: none;
    }

    .version-strip::-webkit-scrollbar {
      display: none;
    }

    .version-pill {
      flex: 0 0 auto;
      min-height: 38px;
      padding: 7px 11px;
      border-radius: 14px;
      background: #f5eee6;
      border: 1px solid rgba(139, 105, 78, 0.14);
      color: #735c46;
      font-size: 12px;
      font-weight: 720;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .version-pill.active {
      background: #8d6b50;
      border-color: rgba(110, 78, 54, 0.18);
      color: #fffaf3;
      box-shadow: 0 8px 18px rgba(117, 84, 58, 0.16);
    }

    .version-pill-main {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .version-pill-tags {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .version-pill-tag {
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(139, 105, 78, 0.11);
      color: #7b634e;
      font-size: 10px;
      font-weight: 850;
      line-height: 1;
    }

    .version-pill.active .version-pill-tag {
      background: rgba(255, 250, 243, 0.2);
      color: #fffaf3;
    }

    .message-action-list {
      display: grid;
      gap: 10px;
    }

    .message-action-row {
      min-height: 54px;
      border-radius: 16px;
      background: #f5f5f7;
      border: 1px solid #ececf0;
      padding: 10px 12px;
      display: grid;
      grid-template-columns: 32px 1fr auto;
      align-items: center;
      gap: 10px;
      text-align: left;
    }

    .message-action-row svg {
      width: 20px;
      height: 20px;
      stroke-width: 2.25;
    }

    .message-action-row strong {
      display: block;
      font-size: 14px;
      line-height: 1.15;
    }

    .message-action-row span span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.25;
    }

    .message-action-row.danger {
      color: #b13d3d;
    }

    .message-action-row:disabled {
      opacity: 0.45;
      cursor: default;
    }

    .message-action-summary {
      margin-top: 12px;
      padding: 11px 12px;
      border-radius: 15px;
      background: #f7f7f8;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .message-edit-sheet {
      width: min(100%, 520px);
      max-height: 84vh;
      max-height: 84dvh;
      padding: 10px 18px calc(var(--safe-bottom) + 16px);
      background: #fbfaf7;
    }

    .message-edit-head {
      display: grid;
      grid-template-columns: minmax(96px, 1fr) auto minmax(96px, 1fr);
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }

    .message-edit-head h2 {
      margin: 0;
      color: #222327;
      font-size: 20px;
      line-height: 1.1;
      text-align: center;
    }

    .message-edit-action {
      min-height: 38px;
      padding: 0 2px;
      color: #6675a5;
      font-size: 15px;
      font-weight: 800;
      text-align: left;
      background: transparent;
    }

    .message-edit-action.save-only {
      text-align: right;
    }

    .message-edit-meta {
      margin: -5px 2px 12px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
      text-align: center;
    }

    .message-edit-textarea {
      width: 100%;
      min-height: 46vh;
      max-height: 58vh;
      max-height: 58dvh;
      resize: none;
      border: 0;
      outline: 0;
      border-radius: 24px;
      background: #f3f4f6;
      padding: 22px 20px;
      color: #2d2f36;
      font: 17px/1.72 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow: auto;
      white-space: pre-wrap;
      box-shadow: inset 0 0 0 1px rgba(170, 160, 148, 0.08);
    }

    .message-edit-textarea::placeholder {
      color: #a5a8b0;
    }

    .context-preview-sheet {
      max-height: 82vh;
      max-height: 82dvh;
      background: var(--theme-panel-strong, #fbfaf7);
      color: var(--ink);
    }

    .context-preview-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: -4px 0 12px;
    }

    .context-preview-toolbar button {
      min-height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      background: var(--theme-panel-soft, rgba(244, 245, 248, 0.86));
      color: var(--ink);
      font-size: 12px;
      font-weight: 560;
    }

    .context-preview-summary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }

    .context-preview-stat,
    .context-warning,
    .context-message-row {
      border-radius: 14px;
      background: var(--theme-panel-bg, rgba(244, 245, 248, 0.84));
      border: 1px solid var(--theme-border, rgba(166, 133, 101, 0.12));
    }

    .context-preview-stat {
      padding: 10px 11px;
    }

    .context-preview-stat strong {
      display: block;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.15;
      font-weight: 620;
    }

    .context-preview-stat span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.2;
    }

    .context-warning-list {
      display: grid;
      gap: 7px;
      margin-bottom: 12px;
    }

    .context-warning {
      padding: 9px 11px;
      color: var(--theme-warning-ink, #815c36);
      font-size: 12px;
      line-height: 1.45;
    }

    .context-message-list {
      display: grid;
      gap: 9px;
    }

    .context-message-row {
      padding: 10px 11px;
    }

    .context-message-head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 560;
    }

    .context-message-flags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin: 7px 0;
    }

    .context-message-flags span {
      padding: 2px 7px;
      border-radius: 999px;
      background: var(--theme-panel-soft, rgba(116, 91, 66, 0.09));
      color: var(--muted);
      font-size: 10px;
      font-weight: 560;
    }

    .context-message-body {
      max-height: 160px;
      overflow: auto;
      white-space: pre-wrap;
      word-break: break-word;
      color: var(--ink);
      font: 12px/1.55 "SFMono-Regular", Consolas, monospace;
    }

    .context-app .mcp-page-topbar {
      grid-template-columns: 38px minmax(0, 1fr) 38px;
    }

    .context-app .mcp-page-scroll {
      gap: 12px;
      background: transparent;
    }

    .context-app .context-preview-summary {
      margin-bottom: 0;
    }

    .context-section {
      display: grid;
      gap: 9px;
    }

    .context-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 560;
    }

    .context-component-list,
    .context-attachment-list {
      display: grid;
      gap: 9px;
    }

    .context-component-row,
    .context-attachment-row {
      border-radius: 14px;
      border: 1px solid var(--theme-border);
      background: var(--theme-panel-bg);
      padding: 11px;
      display: grid;
      gap: 8px;
    }

    .context-component-row.disabled {
      opacity: 0.58;
    }

    .context-component-head,
    .context-attachment-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 560;
    }

    .context-component-meta,
    .context-attachment-meta {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

    .context-component-preview {
      max-height: 112px;
      overflow: auto;
      white-space: pre-wrap;
      word-break: break-word;
      color: var(--ink);
      font: 11px/1.55 "SFMono-Regular", Consolas, monospace;
      scrollbar-width: thin;
    }

    .context-empty {
      border: 1px dashed var(--theme-border-strong, var(--theme-border));
      border-radius: 14px;
      padding: 12px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .context-preset-editor {
      display: grid;
      gap: 8px;
      padding: 11px;
      border-radius: 14px;
      border: 1px solid var(--theme-border);
      background: var(--theme-panel-bg);
    }

    .context-preset-editor input,
    .context-preset-editor textarea {
      width: 100%;
      border: 1px solid var(--theme-border);
      border-radius: 12px;
      background: var(--input-bg, rgba(255, 255, 255, 0.72));
      color: var(--ink);
      font: inherit;
      outline: none;
      padding: 10px 11px;
    }

    .context-preset-editor textarea {
      min-height: 96px;
      resize: vertical;
      line-height: 1.48;
    }

    .context-preset-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
    }

    .context-preset-actions button,
    .context-preset-icon {
      border: 1px solid var(--theme-border);
      background: var(--theme-chip-bg);
      color: var(--ink);
      border-radius: 12px;
      min-height: 34px;
      padding: 0 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      font-size: 12px;
    }

    .context-preset-actions button.primary {
      border-color: var(--theme-accent);
      background: var(--theme-accent-soft);
    }

    .context-preset-list {
      display: grid;
      gap: 9px;
    }

    .context-preset-row {
      border-radius: 14px;
      border: 1px solid var(--theme-border);
      background: var(--theme-panel-bg);
      padding: 11px;
      display: grid;
      gap: 8px;
    }

    .context-preset-row.active {
      border-color: var(--theme-accent);
      background: var(--theme-accent-soft);
    }

    .context-preset-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .context-preset-check {
      display: inline-grid;
      grid-template-columns: 18px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      min-width: 0;
      color: var(--ink);
      font-size: 13px;
    }

    .context-preset-check input {
      width: 16px;
      height: 16px;
      accent-color: var(--theme-accent);
    }

    .context-preset-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .context-preset-row-actions {
      display: inline-flex;
      gap: 6px;
      flex: 0 0 auto;
    }

    .context-preset-icon {
      width: 34px;
      min-width: 34px;
      padding: 0;
    }

    .context-preset-preview {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      white-space: pre-wrap;
      word-break: break-word;
      max-height: 96px;
      overflow: auto;
      scrollbar-width: thin;
    }

    .quick-sheet-note {
      margin: -3px 0 12px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .quick-search {
      height: 46px;
      margin-bottom: 14px;
      display: grid;
      grid-template-columns: 30px 1fr;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      border: 1.5px solid var(--theme-border-strong, #cfcfd4);
      border-radius: 18px;
      color: var(--muted);
    }

    .quick-search input {
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font-size: 15px;
    }

    .quick-list {
      display: grid;
      gap: 10px;
    }

    .quick-row {
      width: 100%;
      min-height: 60px;
      border-radius: 17px;
      background: var(--theme-panel-bg, #f5f5f7);
      border: 1px solid var(--theme-border, #ececf0);
      padding: 11px 12px;
      display: grid;
      grid-template-columns: 34px 1fr auto;
      align-items: center;
      gap: 10px;
      text-align: left;
    }

    .quick-row strong {
      display: block;
      font-size: 15px;
      line-height: 1.18;
    }

    .quick-row span span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.25;
    }

    .quick-row.active {
      background: var(--theme-active-bg, #edf0f8);
      border-color: var(--theme-border-strong, #d7ddef);
      color: var(--theme-primary-ink, var(--blue));
    }

    .memory-job-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }

    .memory-job-stat {
      min-width: 0;
      padding: 10px 8px;
      border-radius: 15px;
      background: #f6efe7;
      color: #7a6250;
      text-align: center;
      border: 1px solid rgba(139, 105, 78, 0.12);
    }

    .memory-job-stat strong {
      display: block;
      font-size: 17px;
      line-height: 1.1;
    }

    .memory-job-stat span {
      display: block;
      margin-top: 4px;
      font-size: 11px;
      color: #9b8470;
    }

    .memory-job-row {
      width: 100%;
      min-height: 66px;
      border-radius: 17px;
      background: #f8f4ef;
      border: 1px solid rgba(139, 105, 78, 0.12);
      padding: 11px 12px;
      display: grid;
      grid-template-columns: 34px 1fr auto;
      align-items: center;
      gap: 10px;
      text-align: left;
    }

    .memory-job-row .job-icon {
      width: 34px;
      height: 34px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      background: rgba(201, 173, 144, 0.28);
      color: #8a6a50;
    }

    .memory-job-row .job-icon svg {
      width: 18px;
      height: 18px;
    }

    .memory-job-row strong {
      display: block;
      font-size: 14px;
      line-height: 1.18;
      color: #43382f;
    }

    .memory-job-row span span {
      display: block;
      margin-top: 4px;
      color: #8f7b68;
      font-size: 12px;
      line-height: 1.35;
    }

    .memory-job-badge {
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(139, 105, 78, 0.12);
      color: #80634b;
      font-size: 11px;
      font-weight: 760;
      white-space: nowrap;
    }

    .memory-job-badge.running,
    .memory-job-badge.queued {
      background: rgba(184, 135, 77, 0.16);
      color: #8a6539;
    }

    .memory-job-badge.succeeded {
      background: rgba(90, 184, 112, 0.13);
      color: #3f8f57;
    }

    .memory-job-badge.failed {
      background: rgba(224, 112, 112, 0.12);
      color: #a45252;
    }

    .memory-job-badge.completed_with_errors {
      background: rgba(184, 135, 77, 0.16);
      color: #8a6539;
    }

    .memory-job-actions {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
    }

    .memory-job-retry,
    .memory-job-toolbar button {
      border: 0;
      border-radius: 999px;
      background: #e4d2bf;
      color: #745b45;
      font-size: 11px;
      font-weight: 780;
      min-height: 28px;
      padding: 0 10px;
      white-space: nowrap;
    }

    .memory-job-retry:disabled,
    .memory-job-toolbar button:disabled {
      opacity: 0.55;
    }

    .memory-job-toolbar {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin: 0 0 12px;
    }

    .memory-job-empty {
      padding: 18px 12px;
      border-radius: 17px;
      background: #f8f4ef;
      color: #8f7b68;
      text-align: center;
      font-size: 13px;
      line-height: 1.45;
    }

    .memory-console-grid {
      display: grid;
      gap: 10px;
      margin-bottom: 12px;
    }

    .memory-console-tabs {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
      margin: 0 0 12px;
    }

    .memory-console-tabs button {
      min-height: 34px;
      border: 1px solid rgba(139, 105, 78, 0.14);
      border-radius: 999px;
      background: #f8f4ef;
      color: #7b614c;
      font-size: 12px;
      font-weight: 780;
    }

    .memory-console-tabs button.active {
      background: #d6bda4;
      color: #4c382a;
      border-color: rgba(139, 105, 78, 0.24);
    }

    .memory-console-card {
      border-radius: 17px;
      background: #f8f4ef;
      border: 1px solid rgba(139, 105, 78, 0.12);
      padding: 12px;
      color: #5f4c3e;
    }

    .memory-console-card h3 {
      margin: 0 0 8px;
      font-size: 13px;
      line-height: 1.2;
      color: #43382f;
    }

    .memory-rule-list,
    .memory-recall-list {
      display: grid;
      gap: 7px;
    }

    .memory-rule-row,
    .memory-recall-row {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 8px;
      align-items: start;
      font-size: 12px;
      line-height: 1.35;
    }

    .memory-rule-row b,
    .memory-recall-row b {
      color: #87664c;
      font-size: 11px;
      line-height: 1.35;
    }

    .memory-rule-row span,
    .memory-recall-row span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .memory-console-search {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
      margin-bottom: 10px;
    }

    .memory-console-search input {
      width: 100%;
      min-height: 36px;
      border: 1px solid rgba(139, 105, 78, 0.14);
      border-radius: 999px;
      background: #fffaf4;
      color: #43382f;
      padding: 0 13px;
      outline: none;
      font-size: 13px;
    }

    .memory-console-search button {
      border: 0;
      border-radius: 999px;
      background: #d6bda4;
      color: #5f4634;
      font-size: 12px;
      font-weight: 780;
      min-height: 36px;
      padding: 0 14px;
      white-space: nowrap;
    }

    .memory-profile-form {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
      gap: 8px;
      margin-bottom: 10px;
    }

    .memory-profile-form input,
    .memory-profile-form select {
      width: 100%;
      min-height: 36px;
      border: 1px solid rgba(139, 105, 78, 0.14);
      border-radius: 12px;
      background: #fffaf4;
      color: #43382f;
      padding: 0 10px;
      outline: none;
      font-size: 12px;
    }

    .memory-profile-form .wide {
      grid-column: 1 / -1;
    }

    .memory-profile-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-bottom: 10px;
    }

    .memory-profile-actions button,
    .memory-profile-card button {
      border: 0;
      border-radius: 999px;
      background: #e4d2bf;
      color: #745b45;
      font-size: 11px;
      font-weight: 780;
      min-height: 28px;
      padding: 0 10px;
      white-space: nowrap;
    }

    .memory-profile-list {
      display: grid;
      gap: 8px;
    }

    .memory-profile-card {
      border-radius: 15px;
      background: #fffaf4;
      border: 1px solid rgba(139, 105, 78, 0.1);
      padding: 10px;
      display: grid;
      gap: 7px;
    }

    .memory-profile-card.off {
      opacity: 0.62;
    }

    .memory-candidate-toolbar {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 0 0 10px;
      scrollbar-width: none;
    }

    .memory-candidate-toolbar::-webkit-scrollbar {
      display: none;
    }

    .memory-candidate-toolbar button {
      flex: 0 0 auto;
      border: 1px solid rgba(139, 105, 78, 0.14);
      border-radius: 999px;
      background: #fffaf4;
      color: #745b45;
      font-size: 11px;
      font-weight: 780;
      min-height: 30px;
      padding: 0 11px;
      white-space: nowrap;
    }

    .memory-candidate-toolbar button.active {
      background: #d6bda4;
      color: #4c382a;
      border-color: rgba(139, 105, 78, 0.24);
    }

    .memory-candidate-toolbar button:disabled {
      opacity: 0.52;
    }

    .memory-candidate-preview {
      border-radius: 12px;
      background: #f6efe7;
      border: 1px dashed rgba(139, 105, 78, 0.18);
      color: #6d5644;
      font-size: 11px;
      line-height: 1.42;
      padding: 8px;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .memory-candidate-preview b {
      color: #87664c;
      font-weight: 820;
    }

    .memory-profile-head {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: start;
    }

    .memory-profile-head strong {
      display: block;
      color: #43382f;
      font-size: 13px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .memory-profile-head span {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 0 8px;
      border-radius: 999px;
      background: rgba(139, 105, 78, 0.12);
      color: #80634b;
      font-size: 11px;
      font-weight: 760;
      white-space: nowrap;
    }

    .memory-profile-value {
      color: #5f4c3e;
      font-size: 12px;
      line-height: 1.42;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .memory-profile-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      color: #9b8470;
      font-size: 11px;
      line-height: 1.35;
    }

    .memory-conflict-pair {
      display: grid;
      gap: 7px;
    }

    .memory-conflict-side {
      border-radius: 12px;
      background: #f6efe7;
      border: 1px solid rgba(139, 105, 78, 0.1);
      padding: 8px;
    }

    .memory-conflict-side b {
      display: block;
      margin-bottom: 5px;
      color: #87664c;
      font-size: 11px;
      line-height: 1.25;
    }

    .memory-conflict-side span {
      display: block;
      color: #5f4c3e;
      font-size: 12px;
      line-height: 1.42;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .memory-recall-row {
      grid-template-columns: 74px 1fr;
      padding: 9px 0;
      border-top: 1px solid rgba(139, 105, 78, 0.1);
    }

    .memory-recall-row:first-child {
      border-top: 0;
      padding-top: 0;
    }

    .mcp-workbench {
      display: grid;
      gap: 12px;
    }

    .mcp-workbench-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .mcp-workbench-actions button {
      min-height: 34px;
      border: 0;
      border-radius: 999px;
      background: #e4d2bf;
      color: #745b45;
      font-size: 12px;
      font-weight: 800;
    }

    .mcp-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .mcp-stat {
      min-width: 0;
      padding: 10px 8px;
      border-radius: 15px;
      background: #f6efe7;
      color: #7a6250;
      text-align: center;
      border: 1px solid rgba(139, 105, 78, 0.12);
    }

    .mcp-stat strong {
      display: block;
      font-size: 17px;
      line-height: 1.1;
    }

    .mcp-stat span {
      display: block;
      margin-top: 4px;
      font-size: 11px;
      color: #9b8470;
    }

    .mcp-section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #6f5946;
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .mcp-mini-list {
      display: grid;
      gap: 8px;
    }

    .mcp-row {
      width: 100%;
      min-height: 60px;
      border-radius: 17px;
      background: #f8f4ef;
      border: 1px solid rgba(139, 105, 78, 0.12);
      padding: 11px 12px;
      display: grid;
      grid-template-columns: 34px 1fr auto;
      align-items: center;
      gap: 10px;
      text-align: left;
    }

    .mcp-row-icon {
      width: 34px;
      height: 34px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      background: rgba(201, 173, 144, 0.28);
      color: #8a6a50;
    }

    .mcp-row-icon svg {
      width: 18px;
      height: 18px;
    }

    .mcp-row strong {
      display: block;
      color: #43382f;
      font-size: 14px;
      line-height: 1.18;
      overflow-wrap: anywhere;
    }

    .mcp-row span span {
      display: block;
      margin-top: 4px;
      color: #8f7b68;
      font-size: 12px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .mcp-badge {
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(139, 105, 78, 0.12);
      color: #80634b;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .mcp-badge.online {
      background: rgba(90, 184, 112, 0.13);
      color: #3f8f57;
    }

    .mcp-badge.offline,
    .mcp-badge.failed {
      background: rgba(224, 112, 112, 0.12);
      color: #a45252;
    }

    .mcp-badge.write {
      background: rgba(184, 135, 77, 0.16);
      color: #8a6539;
    }

    .mcp-result-box {
      margin: 0;
      max-height: 28vh;
      overflow: auto;
      border: 1px solid rgba(173, 146, 120, 0.2);
      border-radius: 15px;
      background: #f4ede4;
      color: #514235;
      padding: 11px;
      font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .mcp-app {
      background:
        radial-gradient(circle at top left, rgba(202, 178, 150, 0.18), transparent 31%),
        linear-gradient(180deg, #fbf7f0 0%, #f4eadf 100%);
      color: #2f2d2a;
    }

    .mcp-page-topbar {
      position: fixed;
      top: var(--visual-offset-top);
      left: 50%;
      z-index: 15;
      width: var(--app-width);
      min-height: calc(var(--safe-top) + 76px);
      transform: translateX(-50%);
      padding: calc(var(--safe-top) + 16px) 18px 12px;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) 38px 38px 38px;
      align-items: center;
      gap: 10px;
      background: rgba(251, 247, 240, 0.92);
      backdrop-filter: blur(18px);
    }

    .mcp-page-topbar .title h1 {
      margin: 0;
      text-align: left;
      font-size: 24px;
      line-height: 1.1;
      font-weight: 620;
      color: #242321;
    }

    .mcp-top-icon,
    .mcp-sheet-icon {
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 13px;
      display: grid;
      place-items: center;
      color: #3b332c;
      background: transparent;
    }

    .mcp-top-icon svg,
    .mcp-sheet-icon svg {
      width: 25px;
      height: 25px;
      stroke-width: 2.25;
    }

    .mcp-page-scroll {
      position: fixed;
      top: calc(var(--visual-offset-top) + var(--safe-top) + 84px);
      bottom: 0;
      left: 50%;
      width: var(--app-width);
      transform: translateX(-50%);
      overflow: auto;
      padding: 14px 18px calc(var(--safe-bottom) + 22px);
      display: grid;
      align-content: start;
      gap: 14px;
      scrollbar-width: none;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .mcp-page-scroll::-webkit-scrollbar {
      display: none;
    }

    .mcp-server-list {
      display: grid;
      gap: 13px;
    }

    .mcp-server-card {
      width: 100%;
      min-height: 88px;
      border: 1px solid rgba(139, 105, 78, 0.12);
      border-radius: 20px;
      background: rgba(255, 253, 250, 0.78);
      box-shadow: 0 10px 26px rgba(101, 79, 58, 0.07);
      padding: 13px 14px;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) 24px;
      align-items: center;
      gap: 13px;
      text-align: left;
    }

    .mcp-server-icon {
      position: relative;
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: #f1f2f4;
      color: #53669b;
    }

    .mcp-server-icon svg {
      width: 26px;
      height: 26px;
      stroke-width: 2.4;
    }

    .mcp-server-dot {
      position: absolute;
      right: -1px;
      bottom: 5px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #d6d8dc;
      box-shadow: 0 0 0 2px rgba(255, 253, 250, 0.9);
    }

    .mcp-server-dot.online {
      background: #4db95d;
    }

    .mcp-server-main {
      min-width: 0;
      display: grid;
      gap: 9px;
    }

    .mcp-server-main strong {
      min-width: 0;
      color: #33312e;
      font-size: 17px;
      line-height: 1.16;
      font-weight: 560;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mcp-server-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .mcp-server-chevron {
      color: #37332f;
    }

    .mcp-chip {
      min-height: 25px;
      padding: 2px 9px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      border: 1px solid rgba(84, 103, 156, 0.34);
      background: rgba(238, 241, 249, 0.74);
      color: #53669b;
      font-size: 12px;
      line-height: 1;
      font-weight: 500;
      white-space: nowrap;
    }

    .mcp-chip.online {
      border-color: rgba(75, 185, 93, 0.36);
      background: rgba(236, 250, 238, 0.78);
      color: #43a653;
    }

    .mcp-chip.offline {
      border-color: rgba(255, 112, 112, 0.34);
      background: rgba(255, 241, 241, 0.82);
      color: #ff6767;
    }

    .mcp-chip.disabled {
      border-color: rgba(94, 94, 94, 0.36);
      background: rgba(239, 239, 239, 0.78);
      color: #73706d;
    }

    .mcp-chip.draft {
      border-color: rgba(184, 135, 77, 0.28);
      background: rgba(251, 244, 235, 0.84);
      color: #9a7658;
    }

    .mcp-app .mcp-workbench {
      border: 1px solid rgba(139, 105, 78, 0.12);
      border-radius: 20px;
      background: rgba(255, 253, 250, 0.68);
      box-shadow: 0 14px 34px rgba(101, 79, 58, 0.08);
      backdrop-filter: blur(14px);
      padding: 13px;
    }

    .mcp-app .mcp-result-box {
      max-height: 34vh;
    }

    .creation-app {
      background: var(--theme-app-bg);
      color: var(--ink);
    }

    .creation-page-topbar {
      grid-template-columns: 38px minmax(0, 1fr) 38px 38px;
    }

    .creation-page-scroll {
      gap: 0;
      padding: 12px 18px calc(var(--safe-bottom) + 18px);
    }

    .creation-layout {
      min-height: 100%;
      display: block;
    }

    .creation-list,
    .creation-reader {
      min-width: 0;
      border: 1px solid var(--theme-border, rgba(139, 105, 78, 0.12));
      border-radius: 22px;
      background: var(--theme-panel-bg, rgba(255, 253, 250, 0.74));
      box-shadow: var(--theme-shadow-soft, 0 12px 30px rgba(101, 79, 58, 0.07));
      padding: 13px;
      display: grid;
      gap: 10px;
      backdrop-filter: blur(14px);
    }

    .creation-reader {
      min-height: calc(100vh - var(--visual-offset-top) - var(--safe-top) - 118px);
      min-height: calc(100dvh - var(--visual-offset-top) - var(--safe-top) - 118px);
      align-content: start;
    }

    .creation-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 560;
    }

    .creation-count {
      color: var(--theme-primary-ink, var(--blue));
      font-weight: 520;
    }

    .creation-drawer-backdrop {
      position: fixed;
      inset: var(--visual-offset-top) 0 0;
      left: 50%;
      z-index: 18;
      width: var(--app-width);
      transform: translateX(-50%);
      background: transparent;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease;
    }

    .creation-drawer-backdrop.open {
      opacity: 0;
      pointer-events: none;
    }

    .creation-drawer {
      position: fixed;
      top: calc(var(--visual-offset-top) + var(--safe-top) + 84px);
      bottom: 0;
      left: calc(50% - var(--app-width) / 2 + 18px);
      z-index: 80;
      width: min(340px, calc(var(--app-width) - 36px));
      max-height: calc(100vh - var(--visual-offset-top) - var(--safe-top) - 84px);
      max-height: calc(100dvh - var(--visual-offset-top) - var(--safe-top) - 84px);
      overflow: auto;
      align-content: start;
      pointer-events: auto;
      transform: translateX(-120%);
      transition: transform 0.22s ease;
      scrollbar-width: none;
    }

    .creation-drawer.open {
      transform: translateX(0);
    }

    .creation-drawer::-webkit-scrollbar {
      display: none;
    }

    .creation-drawer-close {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: var(--theme-primary-ink, var(--blue));
      background: var(--theme-icon-bg, rgba(238, 224, 208, 0.72));
    }

    .creation-drawer-close svg {
      width: 19px;
      height: 19px;
      stroke-width: 2.4;
    }

    .creation-items {
      display: grid;
      gap: 9px;
    }

    .creation-item {
      width: 100%;
      border: 1px solid var(--theme-border, rgba(139, 105, 78, 0.10));
      border-radius: 17px;
      background: var(--theme-panel-bg, rgba(250, 244, 236, 0.76));
      padding: 11px 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px 12px;
      text-align: left;
      color: var(--ink);
      cursor: pointer;
      pointer-events: auto;
    }

    .creation-item.active {
      border-color: var(--theme-border-strong, rgba(139, 105, 78, 0.26));
      background: var(--theme-active-bg, rgba(238, 224, 208, 0.82));
      color: var(--theme-primary-ink, var(--blue));
    }

    .creation-item strong {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 15px;
      line-height: 1.2;
      font-weight: 620;
    }

    .creation-item span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.25;
      white-space: nowrap;
    }

    .creation-item small {
      grid-column: 1 / -1;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .creation-reader-title {
      min-width: 0;
      overflow-wrap: anywhere;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.25;
      font-weight: 680;
    }

    .creation-reader-meta {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .creation-content {
      min-height: calc(100vh - var(--visual-offset-top) - var(--safe-top) - 260px);
      min-height: calc(100dvh - var(--visual-offset-top) - var(--safe-top) - 260px);
      max-height: none;
      overflow: auto;
      border-radius: 18px;
      background: var(--theme-panel-soft, rgba(250, 244, 236, 0.86));
      border: 1px solid var(--theme-border, rgba(139, 105, 78, 0.10));
      padding: 14px;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.8;
      white-space: pre-wrap;
      word-break: break-word;
      scrollbar-width: none;
    }

    .creation-content::-webkit-scrollbar {
      display: none;
    }

    /* Cloude-style shell: closer to Claude's quiet reading surface. */
    #chatApp {
      --topbar-space: 112px;
      background: #f5f3ee;
      color: #1f1c18;
    }

    #chatApp .topbar {
      padding: calc(var(--safe-top) + 14px) 16px 9px;
      background: linear-gradient(180deg, rgba(245, 243, 238, 0.98) 70%, rgba(245, 243, 238, 0));
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #chatApp .topbar .icon-button,
    #chatApp .chat-map-button,
    #chatApp .context-preview-button,
    #chatApp .voice-call-button {
      width: 38px;
      height: 38px;
      color: var(--ink);
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid var(--line);
      box-shadow: 0 1px 3px rgba(43, 38, 30, 0.04);
    }

    #chatApp .topbar .icon-button svg {
      width: 17px;
      height: 17px;
      stroke-width: 1.75;
    }

    #chatApp .title h1 {
      font-size: 14px;
      font-weight: 660;
      color: #1a1815;
    }

    #chatApp .title p {
      color: var(--muted);
      font-size: 11px;
      font-weight: 520;
    }

    #chatApp .connection-strip {
      padding-top: 2px;
      gap: 9px;
      opacity: 0.82;
    }

    #chatApp .status-chip {
      min-height: 16px;
      padding: 0 2px;
      background: transparent !important;
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 560;
      box-shadow: none !important;
    }

    #chatApp .status-chip::before {
      width: 5px;
      height: 5px;
      opacity: 0.45;
    }

    #chatApp .status-chip.action {
      padding: 0 8px;
      border-radius: 999px;
      background: rgba(232, 226, 217, 0.68) !important;
      color: #8a7b6b;
    }

    #chatApp .chat-scroll {
      padding: 22px 20px 30px;
      background:
        linear-gradient(#f5f3ee, rgba(245, 243, 238, 0) 28px) top / 100% 42px no-repeat,
        linear-gradient(rgba(245, 243, 238, 0), #f5f3ee 72%) bottom / 100% 34px no-repeat;
    }

    #chatApp .messages {
      gap: 34px;
    }

    #chatApp .date-divider {
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 520;
    }

    #chatApp .msg {
      gap: 8px;
      animation: fadeUp 0.28s ease both;
    }

    #chatApp .msg-head {
      display: none;
    }

    #chatApp .msg.assistant {
      max-width: 100%;
      justify-items: stretch;
    }

    #chatApp .msg.assistant .bubble {
      width: min(100%, 680px);
      max-width: min(100%, 680px);
      padding: 0 2px;
      color: #1f1c18;
      font-size: 16px;
      line-height: 1.78;
      font-weight: 400;
    }

    #chatApp .msg.user .bubble {
      max-width: min(72%, 520px);
      padding: 12px 18px;
      border-radius: 22px;
      background: #eceae4;
      color: #2b2620;
      line-height: 1.62;
      box-shadow: none;
    }

    #chatApp .msg.user .msg-actions {
      margin-top: -2px;
      opacity: 0.42;
    }

    #chatApp .msg-actions {
      gap: 13px;
      color: var(--muted);
      opacity: 0.64;
    }

    #chatApp .msg-action {
      width: 25px;
      height: 25px;
      background: transparent;
    }

    #chatApp .msg-action svg {
      width: 15px;
      height: 15px;
      stroke-width: 1.65;
    }

    #chatApp .version-switcher {
      height: 24px;
      background: transparent;
      border: 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 620;
    }

    #chatApp .version-switcher button {
      color: var(--muted);
    }

    #chatApp .thinking {
      width: min(100%, 680px);
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      box-shadow: none;
      font-size: 13px;
      font-weight: 520;
    }

    #chatApp .thinking-head {
      min-height: 28px;
      justify-content: flex-start;
      padding: 0;
      gap: 10px;
    }

    #chatApp .thinking-left {
      gap: 8px;
    }

    #chatApp .thinking svg {
      width: 15px;
      height: 15px;
      stroke-width: 1.5;
      opacity: 0.62;
    }

    #chatApp .thinking-label {
      font-size: 13.5px;
      font-weight: 520;
      color: var(--muted);
    }

    #chatApp .thinking-chevron {
      margin-left: auto;
      opacity: 0.5;
    }

    #chatApp .thinking-body {
      margin-top: 8px;
      padding: 12px 14px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--paper) 70%, transparent);
      border: 1px solid var(--line);
      color: var(--ink);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.72;
    }

    #chatApp .tool-trace-flow {
      gap: 12px;
    }

    #chatApp .tool-trace-flow .tool-stack {
      width: min(100%, 520px);
    }

    #chatApp .tool-card {
      min-height: 38px;
      grid-template-columns: 24px minmax(0, 1fr) 18px;
      border-radius: 13px;
      padding: 8px 10px;
      background: color-mix(in srgb, var(--paper) 65%, transparent);
      color: var(--muted);
      border: 1px solid var(--line);
    }

    #chatApp .tool-card-icon {
      width: 24px;
      height: 24px;
    }

    #chatApp .tool-card-icon svg,
    #chatApp .tool-card-chevron svg {
      width: 15px;
      height: 15px;
      stroke-width: 1.7;
    }

    #chatApp .tool-card-label {
      font-size: 12.5px;
      font-weight: 620;
    }

    #chatApp .tool-card-meta {
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 520;
    }

    #chatApp .voice-reply-bubble,
    #chatApp .world-engine-panel {
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.58);
      border: 1px solid rgba(43, 38, 30, 0.06);
      box-shadow: none;
    }

    #chatApp .composer-shell {
      padding: 8px 14px calc(var(--safe-bottom) + 8px);
      background: linear-gradient(180deg, rgba(245, 243, 238, 0), #f5f3ee 30%);
    }

    #chatApp .composer {
      padding: 17px 17px 12px;
      border: 1px solid #e7e3da;
      border-radius: 26px;
      background: rgba(251, 250, 247, 0.96);
      box-shadow: 0 1px 3px rgba(43, 38, 30, 0.04);
      grid-template-columns: minmax(0, 1fr) 32px 32px 40px;
      grid-template-areas:
        "input input input input"
        "tools sticker attach send";
      grid-template-rows: auto 40px;
      row-gap: 12px;
      column-gap: 9px;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #chatApp .composer textarea {
      min-height: 32px;
      max-height: 104px;
      padding: 0 4px 12px;
      color: #2b2620;
      font-size: 16px;
      line-height: 1.55;
      font-weight: 350;
    }

    #chatApp .composer textarea::placeholder {
      color: var(--muted);
    }

    #chatApp .composer-quick {
      gap: 9px;
    }

    #chatApp .tool-button,
    #chatApp .attach-button,
    #chatApp .sticker-button {
      width: 32px;
      height: 32px;
      color: var(--muted);
      background: #f2efe8;
      border-radius: 50%;
    }

    #chatApp .tool-button.primary {
      color: #8a6a52;
    }

    #chatApp .tool-button.active,
    #chatApp .sticker-button.active {
      background: #e8e1d7;
      color: #7a5b45;
    }

    #chatApp .tool-button.voice-reply.active {
      background: #1a1815;
      color: #f5f3ee;
    }

    #chatApp .composer .attach-button svg,
    #chatApp .composer .sticker-button svg,
    #chatApp .composer .tool-button svg {
      width: 16px;
      height: 16px;
      stroke-width: 1.8;
    }

    #chatApp .send-button {
      width: 40px;
      height: 40px;
      background: #e8e3dc;
      color: #8a8178;
    }

    #chatApp .send-button.ready {
      background: #1a1815;
      color: #f5f3ee;
    }

    /* Final Cloude shell overrides: keep this last so older polish blocks cannot win. */
    #chatApp {
      --topbar-space: 112px;
      background: #f5f3ee;
      color: #1a1815;
    }

    #chatApp .topbar {
      padding: calc(var(--safe-top) + 14px) 16px 9px;
      background: linear-gradient(180deg, rgba(245, 243, 238, 0.98) 70%, rgba(245, 243, 238, 0));
      box-shadow: none;
      border-bottom: 0;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #chatApp .topbar .icon-button,
    #chatApp .chat-map-button,
    #chatApp .context-preview-button,
    #chatApp .voice-call-button {
      width: 38px;
      height: 38px;
      color: var(--ink);
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid var(--line);
      box-shadow: 0 1px 3px rgba(43, 38, 30, 0.04);
    }

    #chatApp .topbar .icon-button svg {
      width: 17px;
      height: 17px;
      stroke-width: 1.75;
    }

    #chatApp .title h1 {
      color: #1a1815;
      font-size: 14px;
      font-weight: 660;
    }

    #chatApp .title p {
      color: var(--muted);
      font-size: 11px;
      font-weight: 520;
    }

    #chatApp .connection-strip {
      padding-top: 2px;
      gap: 9px;
      opacity: 0.82;
    }

    #chatApp .status-chip {
      min-height: 16px;
      padding: 0 2px;
      background: transparent !important;
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 560;
      box-shadow: none !important;
    }

    #chatApp .status-chip::before {
      width: 5px;
      height: 5px;
      opacity: 0.45;
    }

    #chatApp .status-chip.action {
      padding: 0 8px;
      border-radius: 999px;
      background: rgba(232, 226, 217, 0.68) !important;
      color: #8a7b6b;
    }

    #chatApp .chat-scroll {
      padding: 22px 20px 30px;
      background:
        linear-gradient(#f5f3ee, rgba(245, 243, 238, 0) 28px) top / 100% 42px no-repeat,
        linear-gradient(rgba(245, 243, 238, 0), #f5f3ee 72%) bottom / 100% 34px no-repeat;
    }

    #chatApp .messages {
      gap: 34px;
    }

    #chatApp .date-divider {
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 520;
    }

    #chatApp .msg {
      gap: 8px;
      animation: fadeUp 0.28s ease both;
    }

    #chatApp .msg-head {
      display: flex;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 540;
    }

    #chatApp .msg.user .msg-head {
      display: none;
    }

    #chatApp .msg.assistant {
      max-width: 100%;
      justify-items: stretch;
    }

    #chatApp .msg.assistant .bubble {
      width: min(100%, 680px);
      max-width: min(100%, 680px);
      padding: 0 2px;
      color: var(--ink);
      font-size: 16px;
      line-height: 1.82;
      font-weight: 400;
    }

    #chatApp .msg.user .bubble {
      max-width: min(72%, 520px);
      padding: 12px 18px;
      border-radius: 20px 20px 6px 20px;
      background: var(--theme-user-bubble);
      color: var(--theme-user-bubble-ink);
      line-height: 1.62;
      box-shadow: none;
    }

    #chatApp .msg-actions {
      gap: 13px;
      color: var(--muted);
      opacity: 0.64;
    }

    #chatApp .msg.user .msg-actions {
      margin-top: -2px;
      opacity: 0.42;
    }

    #chatApp .msg-action {
      width: 25px;
      height: 25px;
      background: transparent;
    }

    #chatApp .msg-action svg {
      width: 15px;
      height: 15px;
      stroke-width: 1.65;
    }

    #chatApp .version-switcher {
      height: 24px;
      background: transparent;
      border: 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 620;
    }

    #chatApp .thinking {
      width: min(100%, 680px);
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      box-shadow: none;
      font-size: 13px;
      font-weight: 520;
    }

    #chatApp .thinking-head {
      min-height: 28px;
      justify-content: flex-start;
      padding: 0;
      gap: 10px;
    }

    #chatApp .thinking-left {
      gap: 8px;
    }

    #chatApp .thinking svg {
      width: 15px;
      height: 15px;
      stroke-width: 1.5;
      opacity: 0.62;
    }

    #chatApp .thinking-label {
      font-size: 13.5px;
      font-weight: 520;
      color: var(--muted);
    }

    #chatApp .thinking-chevron {
      margin-left: auto;
      opacity: 0.5;
    }

    #chatApp .thinking-body {
      margin-top: 8px;
      padding: 12px 14px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--paper) 70%, transparent);
      border: 1px solid var(--line);
      color: var(--ink);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.72;
    }

    #chatApp .tool-trace-flow {
      gap: 12px;
    }

    #chatApp .tool-trace-flow .tool-stack {
      width: min(100%, 520px);
    }

    #chatApp .tool-card {
      min-height: 38px;
      grid-template-columns: 24px minmax(0, 1fr) 18px;
      border-radius: 13px;
      padding: 8px 10px;
      background: color-mix(in srgb, var(--paper) 65%, transparent);
      color: var(--muted);
      border: 1px solid var(--line);
    }

    #chatApp .tool-card-icon {
      width: 24px;
      height: 24px;
    }

    #chatApp .tool-card-icon svg,
    #chatApp .tool-card-chevron svg {
      width: 15px;
      height: 15px;
      stroke-width: 1.7;
    }

    #chatApp .tool-card-label {
      font-size: 12.5px;
      font-weight: 620;
    }

    #chatApp .tool-card-meta {
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 520;
    }

    #chatApp .voice-reply-bubble,
    #chatApp .world-engine-panel {
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.58);
      border: 1px solid rgba(43, 38, 30, 0.06);
      box-shadow: none;
    }

    #chatApp .composer-shell {
      padding: 8px 14px calc(var(--safe-bottom) + 8px);
      background: linear-gradient(180deg, rgba(245, 243, 238, 0), #f5f3ee 30%);
      border-top: 0;
    }

    #chatApp .composer {
      padding: 17px 17px 12px;
      border: 1px solid #e7e3da;
      border-radius: 26px;
      background: rgba(251, 250, 247, 0.96);
      box-shadow: 0 1px 3px rgba(43, 38, 30, 0.04);
      grid-template-columns: minmax(0, 1fr) 32px 32px 40px;
      grid-template-areas:
        "input input input input"
        "tools sticker attach send";
      grid-template-rows: auto 40px;
      row-gap: 12px;
      column-gap: 9px;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #chatApp .composer textarea {
      min-height: 32px;
      max-height: 104px;
      padding: 0 4px 12px;
      color: #2b2620;
      font-size: 16px;
      line-height: 1.55;
      font-weight: 350;
    }

    #chatApp .composer textarea::placeholder {
      color: var(--muted);
    }

    #chatApp .composer-quick {
      gap: 9px;
    }

    #chatApp .tool-button,
    #chatApp .attach-button,
    #chatApp .sticker-button {
      width: 32px;
      height: 32px;
      color: var(--muted);
      background: #f2efe8;
      border-radius: 50%;
    }

    #chatApp .tool-button.primary {
      color: #8a6a52;
    }

    #chatApp .tool-button.active,
    #chatApp .sticker-button.active {
      background: #e8e1d7;
      color: #7a5b45;
    }

    #chatApp .tool-button.voice-reply.active {
      background: #1a1815;
      color: #f5f3ee;
    }

    #chatApp .composer .attach-button svg,
    #chatApp .composer .sticker-button svg,
    #chatApp .composer .tool-button svg {
      width: 16px;
      height: 16px;
      stroke-width: 1.8;
    }

    #chatApp .send-button {
      width: 40px;
      height: 40px;
      background: #e8e3dc;
      color: #8a8178;
    }

    #chatApp .send-button.ready {
      background: #1a1815;
      color: #f5f3ee;
    }

    @media (min-width: 760px) {
      :root {
        --app-width: min(calc(100vw - 72px), 840px);
      }

      body {
        background: #eeecea;
      }

      #chatApp {
        border-left: 1px solid rgba(43, 38, 30, 0.06);
        border-right: 1px solid rgba(43, 38, 30, 0.06);
      }

      #chatApp .chat-scroll {
        padding-left: clamp(28px, 7vw, 86px);
        padding-right: clamp(28px, 7vw, 86px);
      }

      #chatApp .composer-shell {
        padding-left: clamp(22px, 5vw, 64px);
        padding-right: clamp(22px, 5vw, 64px);
      }

      #chatApp .msg.user .bubble {
        max-width: min(62%, 520px);
      }
    }

    @media (min-width: 760px) {
      :root {
        --app-width: min(calc(100vw - 72px), 840px);
      }

      #chatApp .chat-scroll {
        padding-left: clamp(28px, 7vw, 86px);
        padding-right: clamp(28px, 7vw, 86px);
      }

      #chatApp .composer-shell {
        padding-left: clamp(22px, 5vw, 64px);
        padding-right: clamp(22px, 5vw, 64px);
      }

      #chatApp .msg.user .bubble {
        max-width: min(62%, 520px);
      }
    }

    @media (min-width: 760px) {
      .creation-content {
        min-height: calc(100vh - var(--visual-offset-top) - var(--safe-top) - 244px);
      }
    }

    .cedareco-home-icon svg {
      width: 34px;
      height: 34px;
    }

    .cedareco-bottle,
    .cedareco-ripple {
      fill: none;
      stroke: currentColor;
      stroke-width: 2.35;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .cedareco-water {
      fill: var(--theme-active-bg, rgba(178, 151, 122, 0.2));
      stroke: none;
    }

    .cedareco-fish,
    .cedareco-tail,
    .cedareco-eye {
      fill: currentColor;
      stroke: none;
    }

    .cedareco-app {
      background: var(--theme-app-bg);
      color: var(--ink);
    }

    .cedareco-page-topbar {
      grid-template-columns: 38px minmax(0, 1fr) 38px;
    }

    .cedareco-page-scroll {
      gap: 12px;
      padding: 14px 18px calc(var(--safe-bottom) + 20px);
    }

    .cedareco-pond {
      min-height: 162px;
      border: 1px solid var(--theme-border, rgba(139, 105, 78, 0.12));
      border-radius: 22px;
      background: var(--theme-panel-bg, rgba(255, 253, 250, 0.72));
      box-shadow: var(--theme-shadow-soft, 0 14px 34px rgba(101, 79, 58, 0.08));
      padding: 16px;
      display: grid;
      grid-template-columns: 106px minmax(0, 1fr);
      align-items: center;
      gap: 16px;
      backdrop-filter: blur(14px);
    }

    .cedareco-pond-visual {
      width: 106px;
      height: 142px;
      display: grid;
      place-items: center;
      color: var(--theme-primary-ink, var(--blue));
    }

    .cedareco-pond-visual svg {
      width: 104px;
      height: 138px;
    }

    .pond-bottle,
    .pond-ripple,
    .pond-weed {
      fill: none;
      stroke: currentColor;
      stroke-width: 3.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .pond-water {
      fill: var(--theme-active-bg, rgba(180, 151, 119, 0.2));
    }

    .pond-fish,
    .pond-tail,
    .pond-eye {
      fill: currentColor;
    }

    .cedareco-pond-copy {
      min-width: 0;
      display: grid;
      gap: 9px;
      align-content: center;
    }

    .cedareco-pond-copy span {
      width: fit-content;
      max-width: 100%;
      min-height: 25px;
      padding: 4px 10px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      background: var(--theme-panel-soft, rgba(139, 105, 78, 0.11));
      color: var(--theme-primary-ink, var(--blue));
      font-size: 12px;
      font-weight: 560;
    }

    .cedareco-pond-copy strong {
      color: var(--ink);
      font-size: 19px;
      line-height: 1.34;
      font-weight: 680;
      letter-spacing: 0;
    }

    .cedareco-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 560;
    }

    .cedareco-section-head span:last-child {
      color: var(--theme-primary-ink, var(--blue));
      font-weight: 520;
    }

    .cedareco-output-wrap,
    .cedareco-log-wrap {
      display: grid;
      gap: 9px;
    }

    .cedareco-dashboard {
      display: grid;
      gap: 10px;
      border: 1px solid var(--theme-border, rgba(139, 105, 78, 0.12));
      border-radius: 20px;
      background: var(--theme-panel-bg, rgba(255, 253, 250, 0.68));
      box-shadow: var(--theme-shadow-soft, 0 12px 28px rgba(101, 79, 58, 0.06));
      padding: 12px;
    }

    .cedareco-dashboard-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .cedareco-metric {
      min-width: 0;
      border-radius: 15px;
      background: var(--theme-active-bg, rgba(227, 210, 191, 0.62));
      padding: 9px 8px;
      display: grid;
      gap: 3px;
    }

    .cedareco-metric span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 560;
      line-height: 1.2;
    }

    .cedareco-metric strong {
      color: var(--ink);
      font-size: 16px;
      line-height: 1.15;
      font-weight: 720;
      overflow-wrap: anywhere;
    }

    .cedareco-pop-list,
    .cedareco-event-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .cedareco-chip {
      max-width: 100%;
      border-radius: 999px;
      background: var(--theme-panel-soft, rgba(139, 105, 78, 0.1));
      color: var(--theme-primary-ink, var(--blue));
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 520;
      overflow-wrap: anywhere;
    }

    .cedareco-output {
      min-height: 168px;
      max-height: 38vh;
      margin: 0;
      overflow: auto;
      border: 1px solid var(--theme-border, rgba(139, 105, 78, 0.12));
      border-radius: 20px;
      background: var(--theme-panel-bg, rgba(255, 253, 250, 0.72));
      box-shadow: var(--theme-shadow-soft, 0 12px 30px rgba(101, 79, 58, 0.06));
      padding: 14px;
      color: var(--ink);
      font: 14px/1.68 inherit;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      scrollbar-width: none;
    }

    .cedareco-output::-webkit-scrollbar {
      display: none;
    }

    .cedareco-actions {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .cedareco-actions button,
    .cedareco-command-form button {
      min-height: 38px;
      border-radius: 14px;
      background: var(--theme-active-bg, #e3d2bf);
      color: var(--theme-primary-ink, var(--blue));
      font-size: 12px;
      font-weight: 560;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
    }

    .cedareco-actions button:disabled,
    .cedareco-command-form button:disabled {
      opacity: 0.62;
      cursor: default;
    }

    .cedareco-command-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 70px;
      gap: 8px;
    }

    .cedareco-command-form input {
      min-width: 0;
      height: 42px;
      border: 1px solid var(--theme-border-strong, rgba(139, 105, 78, 0.14));
      border-radius: 16px;
      outline: none;
      background: var(--theme-panel-strong, rgba(255, 253, 250, 0.78));
      color: var(--ink);
      padding: 0 13px;
      font-size: 14px;
    }

    .cedareco-log {
      display: grid;
      gap: 8px;
    }

    .cedareco-log-row {
      border: 1px solid var(--theme-border, rgba(139, 105, 78, 0.10));
      border-radius: 16px;
      background: var(--theme-panel-bg, rgba(250, 244, 236, 0.78));
      padding: 10px 11px;
      display: grid;
      gap: 5px;
    }

    .cedareco-log-row strong {
      color: var(--theme-primary-ink, var(--blue));
      font-size: 12px;
      line-height: 1.25;
      font-weight: 560;
    }

    .cedareco-log-row span {
      color: var(--ink);
      font-size: 12px;
      line-height: 1.5;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .mcp-admin-sheet {
      width: min(100%, 480px);
      height: min(84vh, 680px);
      height: min(84dvh, 680px);
      max-height: 84vh;
      max-height: 84dvh;
      padding: 12px 18px calc(var(--safe-bottom) + 18px);
      border-radius: 23px 23px 0 0;
      background:
        radial-gradient(circle at top left, rgba(214, 190, 164, 0.26), transparent 34%),
        linear-gradient(180deg, #fbf4ea 0%, #f2e5d6 100%);
      color: #43372e;
      border: 1px solid rgba(139, 105, 78, 0.12);
    }

    #mcpEditSheet.mcp-admin-sheet {
      display: grid;
      grid-template-rows: auto auto auto minmax(0, 1fr) auto;
      overflow: hidden;
    }

    .mcp-edit-body {
      min-height: 0;
      overflow-y: auto;
      padding-right: 2px;
      scrollbar-width: none;
    }

    .mcp-edit-body::-webkit-scrollbar {
      display: none;
    }

    .mcp-admin-sheet.open,
    .mcp-admin-sheet[aria-hidden="false"],
    .mcp-timeout-sheet.open,
    .mcp-timeout-sheet[aria-hidden="false"] {
      transform: translate(-50%, 0) !important;
      pointer-events: auto;
    }

    .mcp-admin-sheet[aria-hidden="true"],
    .mcp-timeout-sheet[aria-hidden="true"] {
      transform: translate(-50%, 104%) !important;
      pointer-events: none;
    }

    .mcp-tools-sheet {
      max-height: 88vh;
      max-height: 88dvh;
    }

    .mcp-timeout-sheet {
      width: min(100%, 480px);
      max-height: 48vh;
      max-height: 48dvh;
      padding: 13px 18px calc(var(--safe-bottom) + 18px);
      border-radius: 23px 23px 0 0;
      background:
        radial-gradient(circle at top left, rgba(214, 190, 164, 0.24), transparent 34%),
        linear-gradient(180deg, #fbf4ea 0%, #f2e5d6 100%);
      color: #43372e;
      border: 1px solid rgba(139, 105, 78, 0.12);
    }

    .mcp-sheet-head {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 44px;
      align-items: center;
      gap: 10px;
      margin: 4px 0 16px;
    }

    .mcp-sheet-head h2,
    .sheet-title.centered h2 {
      margin: 0;
      text-align: center;
      color: #4a3b30;
      font-size: 22px;
      line-height: 1.2;
      font-weight: 880;
    }

    .mcp-sheet-spacer {
      width: 44px;
      height: 44px;
    }

    .mcp-segmented {
      min-height: 48px;
      padding: 5px;
      border-radius: 24px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 5px;
      background: rgba(255, 250, 243, 0.72);
      margin-bottom: 14px;
    }

    .mcp-segmented.compact {
      min-height: 50px;
      margin: 0;
    }

    .mcp-segmented button {
      border-radius: 18px;
      color: #6f5946;
      font-size: 16px;
      font-weight: 820;
    }

    .mcp-segmented button.active {
      background: #ead8c5;
      color: #7a5d45;
    }

    .mcp-edit-panel {
      display: grid;
      gap: 12px;
    }

    .mcp-edit-panel[hidden] {
      display: none !important;
    }

    .mcp-switch-card {
      min-height: 64px;
      border-radius: 17px;
      background: rgba(255, 250, 243, 0.76);
      border: 1px solid rgba(139, 105, 78, 0.1);
      padding: 0 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: left;
    }

    .mcp-switch-card strong {
      font-size: 16px;
      color: #4a3b30;
      font-weight: 850;
    }

    .mcp-switch-card .switch {
      width: 52px;
      height: 30px;
      border-radius: 999px;
      background: #dedfe3;
      position: relative;
      transition: background 160ms ease;
    }

    .mcp-switch-card .switch::before {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #fff;
      transition: transform 160ms ease;
      box-shadow: 0 2px 8px rgba(35, 35, 35, 0.14);
    }

    .mcp-switch-card.active .switch {
      background: #9a7658;
    }

    .mcp-switch-card.active .switch::before {
      transform: translateX(22px);
    }

    .mcp-form-field {
      display: grid;
      gap: 8px;
      color: #5e5a55;
      font-size: 14px;
      font-weight: 760;
    }

    .mcp-form-field input {
      width: 100%;
      min-height: 54px;
      border-radius: 15px;
      border: 1px solid rgba(139, 105, 78, 0.34);
      background: rgba(255, 253, 249, 0.78);
      color: #3f332a;
      padding: 0 16px;
      font-size: 18px;
      outline: none;
    }

    .mcp-outline-button {
      justify-self: start;
      min-height: 42px;
      border-radius: 15px;
      border: 1px solid rgba(154, 118, 88, 0.34);
      background: #efe0cf;
      color: #80634b;
      padding: 0 15px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 820;
    }

    .mcp-header-list {
      display: grid;
      gap: 8px;
    }

    .mcp-header-row {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) 38px;
      gap: 8px;
      align-items: center;
    }

    .mcp-header-row input {
      min-height: 44px;
      border-radius: 13px;
      border: 1px solid rgba(139, 105, 78, 0.24);
      background: rgba(255, 253, 249, 0.76);
      color: #3f332a;
      padding: 0 11px;
      font-size: 14px;
    }

    .mcp-header-row button {
      width: 38px;
      height: 38px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      color: #9a5f52;
      background: rgba(154, 95, 82, 0.1);
    }

    .mcp-header-row svg {
      width: 18px;
      height: 18px;
    }

    .mcp-save-button {
      width: 100%;
      min-height: 54px;
      margin-top: 20px;
      border-radius: 15px;
      border: 1px solid rgba(154, 118, 88, 0.38);
      background: #ead8c5;
      color: #765a43;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-size: 17px;
      font-weight: 860;
    }

    .mcp-save-button svg,
    .mcp-outline-button svg {
      width: 20px;
      height: 20px;
    }

    .mcp-tool-list {
      display: grid;
      gap: 12px;
    }

    .mcp-tool-card {
      border: 1px solid rgba(51, 48, 45, 0.16);
      border-radius: 17px;
      background: rgba(255, 250, 243, 0.72);
      padding: 14px;
      display: grid;
      gap: 10px;
    }

    .mcp-tool-card-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
    }

    .mcp-tool-card strong {
      display: block;
      color: #242321;
      font-size: 16px;
      line-height: 1.2;
      font-weight: 860;
      overflow-wrap: anywhere;
    }

    .mcp-tool-card p {
      margin: 6px 0 0;
      color: #74716d;
      font-size: 13px;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .mcp-tool-card .mcp-switch-card {
      min-height: 0;
      width: 52px;
      padding: 0;
      border: 0;
      background: transparent;
      align-self: start;
    }

    .mcp-tool-params {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .mcp-param-chip {
      min-height: 24px;
      border: 1px solid rgba(80, 80, 80, 0.32);
      border-radius: 999px;
      padding: 2px 9px;
      color: #77736f;
      font-size: 12px;
      font-weight: 760;
    }

    .mcp-approval-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: #8c8883;
      font-size: 13px;
      font-weight: 760;
    }

    .mcp-timeout-input {
      position: relative;
    }

    .mcp-timeout-input input {
      padding-right: 46px;
    }

    .mcp-timeout-input b {
      position: absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      color: #77736f;
      font-size: 18px;
    }

    .mcp-timeout-actions {
      display: grid;
      grid-template-columns: 1fr 1.7fr;
      gap: 14px;
      margin-top: 24px;
    }

    .mcp-timeout-actions button {
      min-height: 54px;
      border-radius: 15px;
      color: #292724;
      font-size: 18px;
      font-weight: 800;
    }

    .mcp-timeout-actions .primary {
      background: #9a7658;
      color: #fff;
    }

    .werewolf-page {
      --werewolf-topbar-space: calc(var(--safe-top) + 142px);
      background:
        radial-gradient(circle at top left, rgba(202, 178, 150, 0.28), transparent 34%),
        linear-gradient(180deg, #f7efe5 0%, #efe0cf 100%);
      color: #4c3d31;
    }

    .werewolf-page .topbar {
      grid-template-columns: minmax(128px, 0.43fr) minmax(0, 1fr);
      align-items: start;
      gap: 4px 14px;
      min-height: var(--werewolf-topbar-space);
      padding: calc(var(--safe-top) + 13px) 96px 10px 40px;
    }

    .werewolf-page .topbar .title {
      min-width: 0;
    }

    .werewolf-page .topbar .title h1,
    .werewolf-page .topbar .title p {
      text-align: left;
    }

    .werewolf-page .topbar .title h1 {
      white-space: nowrap;
      font-size: 19px;
      line-height: 1.08;
    }

    .werewolf-page .connection-strip {
      grid-column: 1 / 2;
      grid-row: 2;
      justify-content: flex-start;
    }

    .werewolf-top-actions {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 7px;
      padding-right: 22px;
    }

    .werewolf-top-status {
      grid-column: 2 / 3;
      grid-row: 1 / 3;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 8px 12px;
      align-self: center;
      margin-top: 2px;
      padding-right: 18px;
    }

    .werewolf-top-status strong {
      color: #423326;
      font-size: 15px;
      line-height: 1.1;
      white-space: nowrap;
    }

    .werewolf-top-status span {
      min-width: 0;
      color: #8f7761;
      font-size: 11px;
      line-height: 1.25;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .werewolf-autopilot-inline {
      grid-column: 1 / -1;
      min-width: 0;
      color: #7d6753;
      padding: 0;
      font-size: 10px;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .werewolf-top-actions button {
      min-width: 0;
      min-height: 36px;
      border: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: rgba(226, 209, 190, 0.86);
      color: #6c523d;
      font-size: 12px;
      font-weight: 850;
      box-shadow: inset 0 0 0 1px rgba(132, 101, 75, 0.08);
    }

    .werewolf-top-actions button.primary {
      background: #7b604a;
      color: #fff8ef;
    }

    .werewolf-top-actions svg {
      width: 15px;
      height: 15px;
    }

    .werewolf-scroll {
      min-height: 0;
      overflow: auto;
      padding: calc(var(--werewolf-topbar-space) + 8px) 16px calc(var(--safe-bottom) + 24px);
      display: grid;
      gap: 12px;
      align-content: start;
      scrollbar-width: none;
    }

    .werewolf-scroll::-webkit-scrollbar {
      display: none;
    }

    .werewolf-panel {
      border-radius: 20px;
      border: 1px solid rgba(132, 101, 75, 0.14);
      background: rgba(255, 250, 243, 0.62);
      box-shadow: 0 16px 34px rgba(94, 70, 48, 0.1);
      backdrop-filter: blur(14px);
      padding: 13px;
    }

    .werewolf-actions,
    .werewolf-model-tools {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .werewolf-actions button,
    .werewolf-model-tools button,
    .werewolf-select {
      min-width: 0;
      min-height: 34px;
      border: 0;
      border-radius: 999px;
      background: #e4d2bf;
      color: #6c523d;
      font-size: 11px;
      font-weight: 820;
      padding: 0 8px;
    }

    .werewolf-actions button.primary {
      background: #7b604a;
      color: #fff8ef;
    }

    .werewolf-select {
      width: 100%;
      appearance: none;
      text-align: center;
    }

    .werewolf-main-log-panel {
      min-height: min(56vh, 520px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
    }

    .werewolf-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .werewolf-player {
      min-width: 0;
      min-height: 96px;
      border-radius: 17px;
      border: 1px solid rgba(132, 101, 75, 0.14);
      background: rgba(255, 253, 249, 0.56);
      padding: 10px 8px;
      display: grid;
      gap: 5px;
      align-content: start;
    }

    .werewolf-player.dead {
      opacity: 0.52;
      filter: grayscale(0.35);
    }

    .werewolf-seat {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5px;
      color: #927762;
      font-size: 10px;
      font-weight: 850;
    }

    .werewolf-name {
      color: #3f3329;
      font-size: 13px;
      font-weight: 850;
      line-height: 1.15;
      overflow-wrap: anywhere;
    }

    .werewolf-role {
      color: #7f634d;
      font-size: 11px;
      font-weight: 780;
      line-height: 1.25;
    }

    .werewolf-model {
      color: #a18b78;
      font-size: 10px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .werewolf-log {
      display: grid;
      gap: 8px;
      max-height: none;
      overflow: auto;
      padding-right: 2px;
      align-content: start;
    }

    .werewolf-log-row {
      border-radius: 14px;
      background: rgba(244, 237, 228, 0.84);
      color: #59483a;
      padding: 9px 10px;
      font-size: 12px;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .werewolf-log-row.system {
      border: 1px solid rgba(132, 101, 75, 0.16);
      background: rgba(226, 209, 190, 0.72);
      color: #5e4734;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
    }

    .werewolf-system-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin: 0 0 5px;
      padding: 3px 8px;
      border-radius: 999px;
      background: #7b604a;
      color: #fff8ef;
      font-size: 10px;
      font-weight: 850;
    }

    .werewolf-system-tag::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.72;
    }

    .werewolf-log-text {
      white-space: pre-wrap;
    }

    .werewolf-model-list {
      display: grid;
      gap: 6px;
      max-height: 190px;
      overflow: auto;
      color: #6d5541;
      font-size: 12px;
      line-height: 1.4;
    }

    .werewolf-model-pill {
      border-radius: 999px;
      background: rgba(132, 101, 75, 0.1);
      padding: 7px 10px;
      overflow-wrap: anywhere;
    }

    .werewolf-config-status {
      border-radius: 15px;
      background: rgba(244, 237, 228, 0.88);
      color: #6c523d;
      padding: 10px 11px;
      font-size: 12px;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .werewolf-config-section {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    .werewolf-config-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #6d5541;
      font-size: 12px;
      font-weight: 850;
    }

    .werewolf-provider-row,
    .werewolf-slot-row,
    .werewolf-test-row {
      display: grid;
      gap: 8px;
      border: 1px solid rgba(132, 101, 75, 0.13);
      border-radius: 17px;
      background: rgba(255, 250, 243, 0.72);
      padding: 10px;
    }

    .werewolf-provider-row {
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
    }

    .werewolf-provider-row label,
    .werewolf-slot-row label {
      display: grid;
      gap: 5px;
      min-width: 0;
      color: #8f7761;
      font-size: 10px;
      font-weight: 760;
    }

    .werewolf-provider-row input,
    .werewolf-provider-row select,
    .werewolf-slot-row input,
    .werewolf-slot-row select,
    .werewolf-test-row input {
      width: 100%;
      min-width: 0;
      min-height: 35px;
      border: 1px solid rgba(132, 101, 75, 0.14);
      border-radius: 12px;
      background: rgba(255, 253, 249, 0.84);
      color: #4f3e30;
      padding: 0 10px;
      font: inherit;
      font-size: 12px;
    }

    .werewolf-provider-meta {
      min-width: 0;
      display: grid;
      gap: 9px;
    }

    .werewolf-provider-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .werewolf-provider-heading {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .werewolf-provider-heading .ww-provider-enabled {
      width: 22px;
      height: 22px;
      min-height: 22px;
      padding: 0;
      flex: 0 0 auto;
      accent-color: #7b604a;
    }

    .werewolf-provider-title {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      color: #443529;
      font-size: 13px;
      font-weight: 850;
    }

    .werewolf-provider-title span:last-child {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .werewolf-provider-fields {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
      gap: 7px;
    }

    .werewolf-provider-fields label:nth-child(3),
    .werewolf-provider-fields label:nth-child(4) {
      grid-column: 1 / -1;
    }

    .werewolf-provider-status {
      grid-column: 1 / -1;
      color: #9a8069;
      font-size: 11px;
      line-height: 1.35;
    }

    .werewolf-provider-models {
      grid-column: 1 / -1;
      display: flex;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .werewolf-provider-models::-webkit-scrollbar {
      display: none;
    }

    .werewolf-provider-models span {
      flex: 0 0 auto;
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border-radius: 999px;
      background: rgba(132, 101, 75, 0.1);
      color: #6c523d;
      padding: 6px 9px;
      font-size: 11px;
      font-weight: 740;
    }

    .werewolf-slot-row {
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: start;
    }

    .werewolf-slot-index {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #7b604a;
      color: #fff8ef;
      font-size: 12px;
      font-weight: 900;
    }

    .werewolf-slot-fields {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 8px;
    }

    .werewolf-model-picker-field {
      gap: 7px;
    }

    .werewolf-model-picker-field input {
      min-height: 31px;
      font-size: 11px;
    }

    .werewolf-slot-fields label:last-child {
      grid-column: 1 / -1;
    }

    .werewolf-config-actions,
    .werewolf-test-actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
      gap: 8px;
    }

    .werewolf-provider-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: nowrap;
      white-space: nowrap;
    }

    .werewolf-config-actions button,
    .werewolf-test-actions button,
    .werewolf-provider-row button {
      min-height: 35px;
      border: 0;
      border-radius: 999px;
      background: #e4d2bf;
      color: #6c523d;
      font-size: 12px;
      font-weight: 850;
      padding: 0 10px;
    }

    .werewolf-provider-actions button {
      min-width: 62px;
      min-height: 34px;
      padding: 0 12px;
    }

    .werewolf-config-actions button.primary,
    .werewolf-test-actions button.primary,
    .werewolf-provider-actions button.primary {
      background: #7b604a;
      color: #fff8ef;
    }

    .werewolf-test-results {
      display: grid;
      gap: 8px;
    }

    .werewolf-test-item {
      border-radius: 14px;
      background: rgba(244, 237, 228, 0.88);
      color: #59483a;
      padding: 9px 10px;
      font-size: 12px;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .werewolf-test-item.fail {
      background: rgba(241, 221, 214, 0.9);
      color: #7b3f35;
    }

    .werewolf-top-sheet {
      top: var(--visual-offset-top);
      bottom: auto;
      max-height: min(78vh, 680px);
      max-height: min(78dvh, 680px);
      border-radius: 0 0 25px 25px;
      padding-top: calc(var(--safe-top) + 10px);
      transform: translate(-50%, -104%);
    }

    .werewolf-top-sheet.open,
    .werewolf-top-sheet[aria-hidden="false"] {
      transform: translate(-50%, 0) !important;
    }

    .werewolf-top-sheet .sheet-handle {
      margin-top: 0;
    }

    .quick-row .checkmark {
      color: var(--theme-primary-ink, var(--blue));
      opacity: 0;
    }

    .quick-row.active .checkmark {
      opacity: 1;
    }

    .quick-pill-row {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 2px 0 12px;
      scrollbar-width: none;
    }

    .quick-pill-row::-webkit-scrollbar {
      display: none;
    }

    .quick-pill {
      flex: 0 0 auto;
      min-height: 36px;
      padding: 0 13px;
      border-radius: 999px;
      border: 1px solid var(--theme-border, #d9dce8);
      background: var(--theme-panel-bg, #f5f5f7);
      color: var(--ink);
      font-size: 13px;
      font-weight: 560;
    }

    .quick-pill.active {
      background: var(--theme-active-bg, #202124);
      color: var(--theme-primary-ink, #fff);
      border-color: var(--theme-border-strong, #202124);
    }

    .switch {
      width: 52px;
      height: 31px;
      border-radius: 999px;
      background: #d6d8df;
      padding: 3px;
      display: flex;
      justify-content: flex-start;
      transition: background 160ms ease;
    }

    .switch::before {
      content: "";
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
      transition: transform 160ms ease;
    }

    .quick-row.active .switch {
      background: #5163a0;
    }

    .quick-row.active .switch::before {
      transform: translateX(21px);
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: calc(var(--safe-bottom) + 128px);
      z-index: 40;
      width: max-content;
      max-width: calc(100vw - 36px);
      transform: translateX(-50%) translateY(12px);
      padding: 10px 13px;
      border-radius: 14px;
      background: rgba(28, 29, 32, 0.9);
      color: #fff;
      opacity: 0;
      pointer-events: none;
      transition: opacity 160ms ease, transform 160ms ease;
      font-size: 13px;
      line-height: 1.38;
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    @media (min-width: 760px) {
      :root {
        --app-width: min(calc(100vw - 96px), 720px);
      }

      body {
        display: block;
        background: #ececef;
      }

      .app,
      .phone-home {
        height: 100vh;
        height: 100dvh;
        margin: 0 auto;
        border-left: 1px solid #dddde1;
        border-right: 1px solid #dddde1;
      }

      .home-return {
        right: max(58px, calc((100vw - var(--app-width)) / 2 + 58px));
      }

      .bubble {
        max-width: min(88%, 620px);
      }

      .msg.user .bubble {
        max-width: min(74%, 520px);
      }

      .voice-reply-bubble {
        width: min(100%, 560px);
      }
    }

    /* Claude-clean chat polish: quieter chrome, roomier reading, content first. */
    #chatApp {
      background: #fbfaf7;
      color: #2f2a25;
    }

    #chatApp .topbar {
      padding: calc(var(--safe-top) + 10px) 16px 8px;
      background: rgba(251, 250, 247, 0.9);
      border-bottom: 0;
      box-shadow: none;
    }

    #chatApp .topbar .icon-button,
    #chatApp .chat-map-button,
    #chatApp .context-preview-button,
    #chatApp .voice-call-button {
      width: 32px;
      height: 32px;
      color: #847568;
      background: rgba(255, 255, 255, 0.54);
      box-shadow: inset 0 0 0 1px rgba(106, 91, 78, 0.08);
    }

    #chatApp .topbar .icon-button svg {
      width: 18px;
      height: 18px;
      stroke-width: 2.15;
    }

    #chatApp .title h1 {
      color: #2f2a25;
      font-size: 15px;
      font-weight: 650;
      letter-spacing: 0;
    }

    #chatApp .title p {
      margin-top: 2px;
      color: #9a8f84;
      font-size: 11px;
      font-weight: 520;
    }

    #chatApp .connection-strip {
      padding-top: 1px;
      gap: 5px;
    }

    #chatApp .status-chip {
      min-height: 17px;
      padding: 0 7px;
      background: transparent;
      color: #a59686;
      font-size: 10px;
      font-weight: 620;
    }

    #chatApp .status-chip.action {
      background: rgba(226, 214, 199, 0.5);
      color: #7d6755;
    }

    #chatApp .chat-scroll {
      padding: 18px 18px 24px;
    }

    #chatApp .messages {
      gap: 24px;
    }

    #chatApp .date-divider {
      color: #b9aea4;
      font-size: 11px;
      font-weight: 520;
    }

    #chatApp .msg {
      gap: 6px;
    }

    #chatApp .msg.assistant {
      margin-left: 0;
      padding-left: 0;
      border-left: 0;
    }

    #chatApp .msg-head {
      gap: 8px;
      color: #a89c91;
      font-size: 11px;
      font-weight: 540;
    }

    #chatApp .mark {
      width: 27px;
      height: 27px;
      font-size: 12px;
      font-weight: 680;
    }

    #chatApp .mark.assistant {
      background: var(--xs-cinnabar);
      color: #fff;
      border-radius: 10px 10px 10px 4px;
    }

    #chatApp .mark.user {
      background: var(--user-avatar-bg);
      color: var(--ink);
    }

    #chatApp .msg.assistant .msg-head .mark {
      position: static;
      width: 27px;
      height: 27px;
      box-shadow: none;
    }

    #chatApp .bubble {
      color: var(--ink);
      font-size: 15px;
      line-height: 1.78;
      letter-spacing: 0;
    }

    #chatApp .msg.assistant .bubble {
      width: min(100%, 640px);
      max-width: min(100%, 640px);
      padding-top: 1px;
    }

    #chatApp .msg.user .bubble {
      max-width: min(82%, 520px);
      padding: 10px 14px;
      border-radius: 18px 18px 5px 18px;
      background: var(--theme-user-bubble);
      color: var(--theme-user-bubble-ink);
      box-shadow: none;
    }

    #chatApp .msg.system .bubble,
    #chatApp .history-virtual-note,
    #chatApp .history-pager button {
      background: var(--soft);
      border-color: var(--line);
      color: var(--muted);
      box-shadow: none;
    }

    #chatApp .composer-shell {
      padding: 10px 16px calc(var(--safe-bottom) + 12px);
      background: linear-gradient(180deg, rgba(var(--bg-rgb), 0), rgba(var(--bg-rgb), 0.96) 32%);
      border-top: 0;
    }

    #chatApp .composer {
      padding: 12px 12px 10px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: color-mix(in srgb, var(--paper) 94%, transparent);
      box-shadow: 0 14px 40px rgba(48, 44, 47, 0.07);
      backdrop-filter: blur(18px);
      grid-template-columns: minmax(0, 1fr) 30px 30px 37px;
      gap: 8px;
    }

    #chatApp .composer textarea {
      min-height: 42px;
      padding: 1px 2px 0;
      color: var(--ink);
      font-size: 16px;
      line-height: 1.48;
    }

    #chatApp .composer textarea::placeholder {
      color: color-mix(in srgb, var(--muted) 72%, transparent);
    }

    #chatApp .composer-quick {
      gap: 7px;
    }

    #chatApp .tool-button,
    #chatApp .attach-button,
    #chatApp .sticker-button {
      width: 28px;
      height: 28px;
      color: var(--muted);
      background: transparent;
      box-shadow: none;
    }

    #chatApp .tool-button.primary {
      color: var(--accent);
    }

    #chatApp .tool-button.active {
      color: var(--accent);
      background: var(--soft-2);
      box-shadow: none;
    }

    #chatApp .tool-button.voice-reply.active {
      color: #fff;
      background: var(--accent);
      box-shadow: none;
    }

    #chatApp .composer .attach-button svg,
    #chatApp .composer .sticker-button svg,
    #chatApp .composer .tool-button svg {
      width: 16px;
      height: 16px;
      stroke-width: 2.1;
    }

    #chatApp .send-button {
      width: 37px;
      height: 37px;
      background: var(--soft);
      color: var(--muted);
      box-shadow: none;
    }

    #chatApp .send-button.ready {
      background: var(--accent);
      color: #fff;
    }

    #chatApp .composer .send-button svg {
      width: 18px;
      height: 18px;
      stroke-width: 2.25;
    }

    @media (min-width: 760px) {
      body {
        background: var(--soft);
      }

      #chatApp {
        border-left: 1px solid var(--line);
        border-right: 1px solid var(--line);
      }

      #chatApp .chat-scroll {
        padding-left: 26px;
        padding-right: 26px;
      }

      #chatApp .composer-shell {
        padding-left: 26px;
        padding-right: 26px;
      }
    }

    /* Final Cloude shell overrides: keep this block at the end of the main style tag. */
    #chatApp {
      --topbar-space: 112px;
      background: var(--bg);
      color: var(--ink);
    }

    #chatApp .topbar {
      padding: calc(var(--safe-top) + 14px) 16px 9px;
      background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.98) 70%, rgba(var(--bg-rgb), 0));
      box-shadow: none;
      border-bottom: 0;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #chatApp .topbar .icon-button,
    #chatApp .chat-map-button,
    #chatApp .context-preview-button,
    #chatApp .voice-call-button {
      width: 38px;
      height: 38px;
      color: var(--ink);
      background: color-mix(in srgb, var(--paper) 72%, transparent);
      border: 1px solid var(--line);
      box-shadow: 0 1px 3px rgba(48, 44, 47, 0.04);
    }

    #chatApp .topbar .icon-button svg {
      width: 17px;
      height: 17px;
      stroke-width: 1.75;
    }

    #chatApp .title h1 {
      color: var(--ink);
      font-size: 14px;
      font-weight: 660;
    }

    #chatApp .title p {
      color: var(--muted);
      font-size: 11px;
      font-weight: 520;
    }

    #chatApp .connection-strip {
      padding-top: 2px;
      gap: 9px;
      opacity: 0.82;
    }

    #chatApp .status-chip {
      min-height: 16px;
      padding: 0 2px;
      background: transparent !important;
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 560;
      box-shadow: none !important;
    }

    #chatApp .status-chip::before {
      width: 5px;
      height: 5px;
      opacity: 0.45;
    }

    #chatApp .status-chip.action {
      padding: 0 8px;
      border-radius: 999px;
      background: var(--soft) !important;
      color: var(--accent);
    }

    #chatApp .chat-scroll {
      padding: 22px 20px 30px;
      background:
        linear-gradient(var(--bg), rgba(var(--bg-rgb), 0) 28px) top / 100% 42px no-repeat,
        linear-gradient(rgba(var(--bg-rgb), 0), var(--bg) 72%) bottom / 100% 34px no-repeat;
    }

    #chatApp .messages {
      gap: 34px;
    }

    #chatApp .date-divider {
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 520;
    }

    #chatApp .msg {
      gap: 8px;
      animation: fadeUp 0.28s ease both;
    }

    #chatApp .msg-head {
      display: flex;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 540;
    }

    #chatApp .msg.user .msg-head {
      display: none;
    }

    #chatApp .msg.assistant {
      max-width: 100%;
      justify-items: stretch;
    }

    #chatApp .msg.assistant .bubble {
      width: min(100%, 680px);
      max-width: min(100%, 680px);
      padding: 0 2px;
      color: var(--ink);
      font-size: 16px;
      line-height: 1.82;
      font-weight: 400;
    }

    #chatApp .msg.user .bubble {
      max-width: min(72%, 520px);
      padding: 12px 18px;
      border-radius: 20px 20px 6px 20px;
      background: var(--theme-user-bubble);
      color: var(--theme-user-bubble-ink);
      line-height: 1.62;
      box-shadow: none;
    }

    #chatApp .msg-actions {
      gap: 13px;
      color: var(--muted);
      opacity: 0.64;
    }

    #chatApp .msg.user .msg-actions {
      margin-top: -2px;
      opacity: 0.42;
    }

    #chatApp .msg-action {
      width: 25px;
      height: 25px;
      background: transparent;
    }

    #chatApp .msg-action svg {
      width: 15px;
      height: 15px;
      stroke-width: 1.65;
    }

    #chatApp .version-switcher {
      height: 24px;
      background: transparent;
      border: 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 620;
    }

    #chatApp .thinking {
      width: min(100%, 680px);
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      box-shadow: none;
      font-size: 13px;
      font-weight: 520;
    }

    #chatApp .thinking-head {
      min-height: 28px;
      justify-content: flex-start;
      padding: 0;
      gap: 10px;
    }

    #chatApp .thinking-left {
      gap: 8px;
    }

    #chatApp .thinking svg {
      width: 15px;
      height: 15px;
      stroke-width: 1.5;
      opacity: 0.62;
    }

    #chatApp .thinking-label {
      font-size: 13.5px;
      font-weight: 520;
      color: var(--muted);
    }

    #chatApp .thinking-chevron {
      margin-left: auto;
      opacity: 0.5;
    }

    #chatApp .thinking-body {
      margin-top: 8px;
      padding: 12px 14px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--paper) 70%, transparent);
      border: 1px solid var(--line);
      color: var(--ink);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.72;
    }

    #chatApp .tool-trace-flow {
      gap: 12px;
    }

    #chatApp .tool-trace-flow .tool-stack {
      width: min(100%, 520px);
    }

    #chatApp .tool-card {
      min-height: 38px;
      grid-template-columns: 24px minmax(0, 1fr) 18px;
      border-radius: 13px;
      padding: 8px 10px;
      background: color-mix(in srgb, var(--paper) 65%, transparent);
      color: var(--muted);
      border: 1px solid var(--line);
    }

    #chatApp .tool-card-icon {
      width: 24px;
      height: 24px;
    }

    #chatApp .tool-card-icon svg,
    #chatApp .tool-card-chevron svg {
      width: 15px;
      height: 15px;
      stroke-width: 1.7;
    }

    #chatApp .tool-card-label {
      font-size: 12.5px;
      font-weight: 620;
    }

    #chatApp .tool-card-meta {
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 520;
    }

    #chatApp .voice-reply-bubble,
    #chatApp .world-engine-panel {
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.58);
      border: 1px solid rgba(43, 38, 30, 0.06);
      box-shadow: none;
    }

    #chatApp .composer-shell {
      padding: 8px 14px calc(var(--safe-bottom) + 8px);
      background: linear-gradient(180deg, rgba(245, 243, 238, 0), #f5f3ee 30%);
      border-top: 0;
    }

    #chatApp .composer {
      padding: 17px 17px 12px;
      border: 1px solid #e7e3da;
      border-radius: 26px;
      background: rgba(251, 250, 247, 0.96);
      box-shadow: 0 1px 3px rgba(43, 38, 30, 0.04);
      grid-template-columns: minmax(0, 1fr) 32px 32px 40px;
      grid-template-areas:
        "input input input input"
        "tools sticker attach send";
      grid-template-rows: auto 40px;
      row-gap: 12px;
      column-gap: 9px;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #chatApp .composer textarea {
      min-height: 32px;
      max-height: 104px;
      padding: 0 4px 12px;
      color: #2b2620;
      font-size: 16px;
      line-height: 1.55;
      font-weight: 350;
    }

    #chatApp .composer textarea::placeholder {
      color: var(--muted);
    }

    #chatApp .composer-quick {
      gap: 9px;
    }

    #chatApp .tool-button,
    #chatApp .attach-button,
    #chatApp .sticker-button {
      width: 32px;
      height: 32px;
      color: var(--muted);
      background: #f2efe8;
      border-radius: 50%;
    }

    #chatApp .tool-button.primary {
      color: #8a6a52;
    }

    #chatApp .tool-button.active,
    #chatApp .sticker-button.active {
      background: #e8e1d7;
      color: #7a5b45;
    }

    #chatApp .tool-button.voice-reply.active {
      background: #1a1815;
      color: #f5f3ee;
    }

    #chatApp .composer .attach-button svg,
    #chatApp .composer .sticker-button svg,
    #chatApp .composer .tool-button svg {
      width: 16px;
      height: 16px;
      stroke-width: 1.8;
    }

    #chatApp .send-button {
      width: 40px;
      height: 40px;
      background: #e8e3dc;
      color: #8a8178;
    }

    #chatApp .send-button.ready {
      background: #1a1815;
      color: #f5f3ee;
    }

    @media (min-width: 760px) {
      :root {
        --app-width: min(calc(100vw - 72px), 840px);
      }

      body {
        background: #eeecea;
      }

      #chatApp {
        border-left: 1px solid rgba(43, 38, 30, 0.06);
        border-right: 1px solid rgba(43, 38, 30, 0.06);
      }

      #chatApp .chat-scroll {
        padding-left: clamp(28px, 7vw, 86px);
        padding-right: clamp(28px, 7vw, 86px);
      }

      #chatApp .composer-shell {
        padding-left: clamp(22px, 5vw, 64px);
        padding-right: clamp(22px, 5vw, 64px);
      }

      #chatApp .msg.user .bubble {
        max-width: min(62%, 520px);
      }
    }

    /* Lightweight tool trace rows, visually aligned with the thinking row. */
    #chatApp .tool-trace-flow {
      gap: 10px;
    }

    #chatApp .tool-trace-flow .tool-stack,
    #chatApp .tool-stack {
      width: min(100%, 680px);
      gap: 4px;
      margin: 0;
    }

    #chatApp .tool-card {
      min-height: 29px;
      grid-template-columns: 18px minmax(0, 1fr) 16px;
      gap: 8px;
      padding: 2px 0;
      border: 0;
      border-radius: 0;
      background: transparent !important;
      color: var(--muted);
      box-shadow: none;
    }

    #chatApp .tool-card:hover {
      color: #70685f;
    }

    #chatApp .tool-card.failed {
      color: #9b5d52;
    }

    #chatApp .tool-card-icon {
      width: 18px;
      height: 18px;
      color: currentColor;
      opacity: 0.68;
    }

    #chatApp .tool-card-icon svg,
    #chatApp .tool-card-chevron svg {
      width: 14px;
      height: 14px;
      stroke-width: 1.55;
      color: currentColor;
    }

    #chatApp .tool-card-copy {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    #chatApp .tool-card-label {
      min-width: 0;
      color: currentColor;
      font-size: 13.5px;
      font-weight: 520;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #chatApp .tool-card-meta {
      display: none;
    }

    #chatApp .tool-card-chevron {
      display: inline-flex;
      justify-content: flex-end;
      opacity: 0.42;
    }

    body {
      --theme-app-bg: var(--bg);
      --theme-panel-bg: color-mix(in srgb, var(--paper) 86%, transparent);
      --theme-panel-strong: var(--paper);
      --theme-panel-soft: var(--soft);
      --theme-border: var(--line);
      --theme-border-strong: color-mix(in srgb, var(--line) 60%, var(--ink) 12%);
      --theme-shadow-soft: 0 12px 30px rgba(48, 44, 47, 0.06);
      --theme-icon-bg: var(--soft);
      --theme-active-bg: var(--soft-2);
      --theme-topbar-bg: linear-gradient(180deg, rgba(var(--bg-rgb), 0.97), rgba(var(--bg-rgb), 0));
      --theme-composer-bg: linear-gradient(180deg, rgba(var(--bg-rgb), 0), var(--bg) 34%);
      --theme-chat-wash: var(--bg);
      --theme-user-bubble: var(--user-bubble);
      --theme-user-bubble-ink: var(--ink);
      --theme-primary: var(--accent);
      --theme-primary-ink: var(--blue);
      background: var(--bg) !important;
    }

    /* 各主题的 --theme-* 值全部由上方 body 块从语义变量（--bg/--paper/--soft/--line）
       自动派生，无需逐主题覆盖。 */

    .app,
    #chatApp,
    .mcp-app,
    .creation-app,
    .werewolf-page,
    .memory-console-page {
      background: var(--theme-app-bg) !important;
      color: var(--ink);
    }

    .drawer,
    .settings,
    .sheet,
    .provider-sheet,
    .tool-detail-sheet,
    .chat-search-sheet,
    .message-sheet,
    .message-edit-sheet,
    .context-preview-sheet,
    .mcp-admin-sheet,
    .mcp-timeout-sheet,
    .mcp-tools-sheet,
    .werewolf-top-sheet {
      background: var(--theme-panel-strong) !important;
      border-color: var(--theme-border) !important;
      color: var(--ink);
      box-shadow: var(--theme-shadow-soft);
    }

    .topbar,
    .mcp-page-topbar,
    .creation-page-topbar,
    .werewolf-page .topbar {
      background: var(--theme-topbar-bg) !important;
      color: var(--ink);
    }

    #chatApp .messages {
      background: transparent !important;
    }

    #chatApp .topbar {
      grid-template-columns: 38px 38px 38px minmax(0, 1fr) 38px 38px !important;
    }

    #chatApp .chat-scroll {
      top: calc(var(--visual-offset-top) + var(--topbar-space) - 22px);
      padding-top: 8px;
      background:
        linear-gradient(var(--theme-chat-wash), rgba(var(--bg-rgb), 0) 28px) top / 100% 42px no-repeat,
        linear-gradient(rgba(var(--bg-rgb), 0), var(--theme-chat-wash) 72%) bottom / 100% 34px no-repeat !important;
    }

    #chatApp .msg.user .bubble {
      background: var(--theme-user-bubble) !important;
      color: var(--theme-user-bubble-ink) !important;
    }

    #chatApp .msg.assistant .msg-head .mark {
      box-shadow: 0 0 0 4px var(--theme-chat-wash) !important;
    }

    .tool-detail-pre {
      background: var(--theme-panel-soft) !important;
      border-color: var(--theme-border-strong) !important;
      color: var(--ink) !important;
    }

    .tool-detail-section strong {
      color: var(--theme-primary-ink) !important;
    }

    #chatApp .thinking,
    #chatApp .voice-reply-bubble,
    #chatApp .world-engine-panel,
    .world-engine-panel,
    .settings-card,
    .settings-menu,
    .drawer-row,
    .memory-item,
    .memory-console-card,
    .memory-profile-card,
    .memory-conflict-side,
    .memory-job-row,
    .memory-job-stat,
    .memory-rule-row,
    .memory-recall-row,
    .mcp-server-card,
    .mcp-app .mcp-workbench,
    .mcp-result-box,
    .mcp-edit-panel,
    .mcp-switch-card,
    .mcp-tool-card,
    .creation-list,
    .creation-reader,
    .creation-drawer,
    .creation-item,
    .werewolf-panel,
    .werewolf-player,
    .werewolf-log-row,
    .werewolf-config-section,
    .world-book-card,
    .message-action-row,
    .context-message-row,
    .theme-choice,
    .tone-choice {
      background: var(--theme-panel-bg) !important;
      border-color: var(--theme-border) !important;
      box-shadow: var(--theme-shadow-soft);
      color: var(--ink);
    }

    .theme-choice.active,
    .tone-choice.active,
    .creation-item.active,
    .world-book-card.active,
    .memory-console-tabs button.active,
    .memory-candidate-toolbar button.active,
    .settings-segment span.active,
    .mcp-segmented button.active,
    .world-engine-choice.active {
      background: var(--theme-active-bg) !important;
      border-color: var(--theme-border-strong) !important;
      color: var(--theme-primary-ink) !important;
    }

    .drawer-icon,
    .settings-menu-icon,
    .mcp-server-icon,
    .mcp-top-icon,
    .mcp-sheet-icon,
    .world-book-icon,
    .memory-job-row .job-icon {
      background: var(--theme-icon-bg) !important;
      color: var(--theme-primary-ink) !important;
    }

    #chatApp .composer-shell {
      background: var(--theme-composer-bg) !important;
    }

    #chatApp .composer,
    .composer,
    input,
    textarea,
    select,
    .mcp-form-field input,
    .mcp-header-row input,
    .memory-console-search input,
    .memory-profile-form input,
    .memory-profile-form select,
    .world-engine-custom-input,
    .message-edit-textarea {
      background: var(--theme-panel-strong) !important;
      border-color: var(--theme-border-strong) !important;
      color: var(--ink) !important;
    }

    #chatApp .tool-button,
    #chatApp .attach-button,
    #chatApp .sticker-button,
    .icon-button,
    .mcp-outline-button,
    .mcp-save-button,
    .mcp-workbench-actions button,
    .werewolf-top-actions button,
    .werewolf-actions button,
    .werewolf-model-tools button,
    .werewolf-provider-row button,
    .memory-job-retry,
    .memory-job-toolbar button,
    .memory-profile-actions button,
    .memory-profile-card button,
    .world-book-actions button,
    .creation-drawer-close {
      background: var(--theme-icon-bg) !important;
      border-color: var(--theme-border) !important;
      color: var(--theme-primary-ink) !important;
    }

    #chatApp .composer-quick .tool-button,
    #chatApp .attach-button,
    #chatApp .sticker-button {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }

    #chatApp .send-button,
    #chatApp .tool-button.active,
    #chatApp .sticker-button.active,
    .primary,
    button.primary,
    .mcp-save-button,
    .mcp-timeout-actions .primary,
    .werewolf-top-actions button.primary,
    .werewolf-actions button.primary,
    .werewolf-test-actions button.primary,
    .werewolf-provider-actions button.primary,
    .world-book-actions button.primary {
      background: var(--theme-active-bg) !important;
      color: var(--theme-primary-ink) !important;
    }

    #chatApp .composer-quick .tool-button.active,
    #chatApp .sticker-button.active {
      background: transparent !important;
      box-shadow: none !important;
    }

    #chatApp .send-button.ready,
    #chatApp .tool-button.voice-reply.active {
      background: var(--theme-primary-ink) !important;
      color: var(--paper) !important;
    }

    #chatApp .send-button.stop-mode {
      background: #58679e !important;
      color: #ffffff !important;
      box-shadow: 0 8px 20px rgba(71, 85, 134, 0.22) !important;
    }

    #chatApp .send-button.stop-mode svg {
      width: 14px !important;
      height: 14px !important;
      fill: currentColor;
      stroke-width: 0;
    }

    #chatApp .send-button.stop-mode:disabled {
      opacity: 0.72;
    }

    .mcp-chip,
    .world-engine-chip,
    .memory-job-badge,
    .memory-profile-head span,
    .werewolf-model-pill,
    .werewolf-system-tag,
    .status-chip,
    .future-tag {
      background: var(--theme-panel-soft) !important;
      border-color: var(--theme-border-strong) !important;
      color: var(--theme-primary-ink) !important;
    }

    .memory-console-page .sheet-title {
      background: color-mix(in srgb, var(--theme-panel-strong) 94%, transparent) !important;
      border-bottom-color: var(--theme-border) !important;
    }

    .memory-console-tabs button,
    .memory-candidate-toolbar button,
    .memory-console-search button,
    .memory-profile-actions button,
    .memory-profile-card button,
    .memory-job-retry,
    .memory-job-toolbar button {
      background: var(--theme-panel-soft) !important;
      border-color: var(--theme-border) !important;
      color: var(--theme-primary-ink) !important;
      font-weight: 560 !important;
    }

    .memory-candidate-preview,
    .memory-conflict-side,
    .memory-job-empty {
      background: var(--theme-panel-soft) !important;
      border-color: var(--theme-border-strong) !important;
      color: var(--muted) !important;
      box-shadow: none !important;
    }

    .memory-candidate-preview b,
    .memory-rule-row b,
    .memory-recall-row b,
    .memory-conflict-side b,
    .memory-console-card h3 {
      color: var(--theme-primary-ink) !important;
      font-weight: 560 !important;
    }

    .memory-profile-head span,
    .memory-job-badge {
      font-weight: 560 !important;
    }

    .settings-menu-row + .settings-menu-row::before,
    .drawer-row + .drawer-row::before,
    .sheet-handle,
    .mcp-server-dot {
      background: var(--theme-border-strong) !important;
    }

    #chatApp .tool-card {
      color: var(--muted) !important;
    }

    #chatApp .tool-card-icon {
      background: transparent !important;
      color: currentColor !important;
    }

    #chatApp .tool-card:hover,
    .mcp-server-main strong,
    .creation-reader-title,
    .world-engine-head span,
    .werewolf-name,
    .memory-profile-head strong {
      color: var(--ink) !important;
    }

    .mcp-row span span,
    .mcp-server-main span,
    .creation-reader-meta,
    .creation-item span,
    .creation-item small,
    .world-engine-head small,
    .world-engine-section p,
    .world-engine-section li,
    .werewolf-model,
    .memory-profile-meta,
    .memory-profile-value,
    .settings-menu-row > span:not(.settings-menu-icon) > span,
    .drawer-label span {
      color: var(--muted) !important;
    }

    #chatApp .voice-reply-bubble {
      width: min(100%, 350px) !important;
      padding: 14px 16px 13px !important;
      border-radius: 18px !important;
      background: rgba(255, 251, 246, 0.78) !important;
      border: 1px solid rgba(146, 116, 91, 0.26) !important;
      border-color: rgba(146, 116, 91, 0.26) !important;
      box-shadow: 0 10px 24px rgba(88, 68, 48, 0.07) !important;
      color: #41362d !important;
      white-space: normal !important;
    }

    #chatApp .voice-reply-en {
      color: #41362d !important;
      font-family: ui-serif, Georgia, "Times New Roman", serif !important;
      font-size: 17px !important;
      font-style: italic !important;
      line-height: 1.62 !important;
      letter-spacing: 0 !important;
    }

    #chatApp .voice-reply-zh {
      margin-top: 9px !important;
      color: #76675b !important;
      font-size: 14px !important;
      line-height: 1.62 !important;
    }

    #chatApp .voice-reply-player {
      margin-top: 12px !important;
      min-height: 34px !important;
      padding: 0 13px !important;
      border-radius: 12px !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 7px !important;
      background: rgba(255, 251, 246, 0.72) !important;
      border-color: rgba(146, 116, 91, 0.22) !important;
      color: #8b735f !important;
      box-shadow: none !important;
      font-size: 13px !important;
      font-weight: 720 !important;
    }

    #chatApp .voice-reply-player.loading,
    #chatApp .voice-reply-player.playing {
      background: rgba(190, 132, 82, 0.16) !important;
      border-color: rgba(172, 119, 75, 0.32) !important;
      color: #9b6843 !important;
    }

    #chatApp .markdown-body em.action-beat {
      color: #a8763f !important;
      font-style: italic !important;
      font-synthesis: style !important;
    }

    #chatApp .markdown-body p.action-beat-paragraph {
      color: #a8763f !important;
      font-style: italic !important;
      font-synthesis: style !important;
      transform: skewX(-5deg);
      transform-origin: left center;
      width: calc(100% - 0.45em);
      margin-left: 0.45em;
    }
    /* Chat trace rows should sit on the page, not in a white card. */
    #chatApp .thinking,
    #chatApp .msg.pending .thinking {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      overflow: visible !important;
    }

    #chatApp .thinking-head {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      min-height: 34px !important;
    }

    #chatApp .thinking-body {
      background: transparent !important;
      padding-left: 28px !important;
      padding-right: 0 !important;
    }

    /* Kelivo-style streaming reasoning preview: grow to a compact ceiling,
       then keep new reasoning inside this scroll window instead of stretching
       the entire chat timeline. */
    #chatApp .thinking.streaming-preview .thinking-body {
      display: block !important;
      width: 100%;
      max-height: 96px;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      scroll-behavior: auto;
      overflow-anchor: none;
    }

    #chatApp .thinking.streaming-preview .thinking-body::-webkit-scrollbar {
      display: none;
    }

    #chatApp .thinking.streaming-preview.has-overflow:not(.user-expanded) .thinking-body {
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 12px,
        #000 calc(100% - 28px),
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 12px,
        #000 calc(100% - 28px),
        transparent 100%
      );
    }

    #chatApp .thinking.streaming-preview.user-expanded .thinking-body {
      max-height: none;
      overflow: visible !important;
      -webkit-mask-image: none;
      mask-image: none;
    }

    #chatApp .thinking.streaming-preview:not(.user-expanded) .thinking-chevron {
      transform: none;
    }

    #chatApp .thinking.streaming-preview.user-expanded .thinking-chevron {
      transform: rotate(180deg);
    }

    #chatApp .tool-trace-flow,
    #chatApp .tool-trace-flow .tool-stack,
    #chatApp .tool-stack,
    #chatApp .msg.tool-event .bubble {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }

    #chatApp .tool-card,
    #chatApp .tool-card.running,
    #chatApp .tool-card.failed {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }

    #chatApp .topbar .icon-button {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }

    #chatApp .topbar .icon-button:active {
      background: rgba(var(--bg-rgb), 0.18) !important;
    }

    .mcp-app .mcp-page-topbar .title h1,
    .mcp-app .mcp-server-main strong,
    .mcp-app .mcp-chip {
      font-weight: 500 !important;
    }

    .mcp-app .mcp-page-topbar .title h1 {
      font-weight: 600 !important;
    }

    .mcp-app .mcp-chip {
      border-color: rgba(84, 103, 156, 0.34) !important;
      background: rgba(238, 241, 249, 0.74) !important;
      color: #53669b !important;
    }

    .mcp-app .mcp-chip.online {
      border-color: rgba(71, 190, 88, 0.38) !important;
      background: rgba(236, 251, 239, 0.9) !important;
      color: #36ad4b !important;
    }

    .mcp-app .mcp-chip.offline {
      border-color: rgba(255, 112, 112, 0.42) !important;
      background: rgba(255, 241, 241, 0.92) !important;
      color: #ff5f63 !important;
    }

    .mcp-app .mcp-chip.disabled {
      border-color: rgba(124, 124, 124, 0.38) !important;
      background: rgba(241, 241, 241, 0.9) !important;
      color: #747474 !important;
    }

    .mcp-app .mcp-server-dot {
      background: #d7dbe1 !important;
    }

    .mcp-app .mcp-server-dot.online {
      background: #42bd58 !important;
    }

    /* Persona Hub pearl makeover — approved mobile home, 2026-08-03. */
    :root {
      --bg: #f6f5f3;
      --bg-rgb: 246, 245, 243;
      --paper: #fffefa;
      --soft: #eeece9;
      --soft-2: #e7e5e1;
      --ink: #242326;
      --muted: #656267;
      --line: #ddd9d4;
      --accent: #8f4a59;
      --blue: #525054;
      --user-bubble: #eeece9;
      --thinking-bg: #efedea;
      --thinking-ink: #5c5a5e;
      --xs-dark: #262428;
      --xs-dark-text: #ffffff;
      --xs-rose-soft: #ead4d8;
      --xs-cinnabar: #8f4a59;
      --xs-ui: "Noto Sans SC", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
      --xs-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
      font-synthesis: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .phone-home {
      --home-panel-bg: var(--paper);
      --home-panel-border: rgba(36, 35, 38, 0.055);
      --home-panel-shadow: 0 12px 28px rgba(36, 35, 38, 0.055);
      --home-title-ink: var(--ink);
      --home-sub-ink: var(--muted);
      grid-template-rows: auto minmax(0, 1fr) auto;
      background: var(--bg);
    }

    .home-status {
      min-height: calc(var(--safe-top) + 30px);
      padding: calc(var(--safe-top) + 8px) 25px 3px;
      font-family: var(--xs-ui);
      font-size: 12px;
      font-weight: 650;
    }

    .home-status-right {
      gap: 7px;
      color: var(--ink);
    }

    .home-status-right svg {
      width: 16px;
      height: 16px;
      stroke-width: 2;
    }

    .home-battery {
      width: 23px;
      height: 11px;
      border-width: 1.5px;
      border-radius: 3px;
    }

    .home-battery::before {
      left: 2px;
      top: 2px;
      width: 13px;
      height: 4px;
    }

    .home-battery::after {
      right: -4px;
      top: 2px;
      height: 4px;
    }

    .home-hero {
      padding: calc(var(--safe-top) + 14px) 26px 4px;
    }

    .home-greet {
      min-height: 42px;
      margin: 0;
      color: var(--ink);
      font-family: var(--xs-serif);
      font-size: clamp(30px, 8.7vw, 36px);
      font-weight: 400;
      line-height: 1.08;
      letter-spacing: -0.025em;
      text-wrap: balance;
    }

    .home-greet-subtitle {
      max-width: 306px;
      margin: 12px 0 0;
      color: var(--muted);
      font-family: var(--xs-ui);
      font-size: 13px;
      font-weight: 400;
      line-height: 1.75;
    }

    .home-apps-entry {
      width: 44px;
      height: 44px;
      margin-top: -4px;
      padding: 11px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--paper);
      box-shadow: none;
    }

    .home-apps-entry span {
      width: 4px;
      height: 4px;
      background: var(--accent);
    }

    .home-grid {
      padding: 10px 18px 12px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .home-whisper {
      grid-column: 1 / -1;
      min-height: 130px;
      padding: 17px 18px 15px;
      gap: 13px;
      border-radius: 19px;
      color: var(--xs-dark-text);
      background: var(--xs-dark);
      box-shadow: 0 12px 24px rgba(36, 35, 38, 0.14);
    }

    .home-whisper-head {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) 10px;
      gap: 12px;
      align-items: center;
    }

    .home-whisper-avatar {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: var(--accent);
      font-family: var(--xs-ui);
      font-size: 20px;
      font-weight: 600;
    }

    .home-whisper-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .home-whisper-kicker {
      color: rgba(255, 255, 255, 0.62);
      font-family: var(--xs-ui);
      font-size: 10px;
      font-weight: 500;
    }

    .home-whisper-copy strong {
      overflow: hidden;
      color: #fff;
      font-family: var(--xs-ui);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.55;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .home-whisper-status {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #4e9d76;
      box-shadow: 0 0 0 4px rgba(78, 157, 118, 0.13);
    }

    .home-whisper-memory {
      display: grid;
      gap: 5px;
      padding-top: 11px;
      border-top: 1px solid rgba(255, 255, 255, 0.13);
      font-family: var(--xs-ui);
      text-align: left;
    }

    .home-whisper-memory > span:first-child {
      color: rgba(255, 255, 255, 0.56);
      font-size: 9px;
      font-weight: 600;
    }

    .home-whisper .home-presence-note {
      color: rgba(255, 255, 255, 0.88);
      font-size: 11px;
      font-style: normal;
      line-height: 1.55;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .home-days {
      grid-column: 1 / -1;
      min-height: 88px;
      padding: 16px 20px;
      border: 1px solid var(--home-panel-border);
      border-radius: 19px;
      background: var(--paper);
      box-shadow: var(--home-panel-shadow);
    }

    .home-days-eyebrow {
      color: var(--muted);
      font-family: var(--xs-ui);
      font-size: 10px;
      letter-spacing: 0.02em;
    }

    .home-days-count {
      margin: 2px 0 3px;
      color: var(--ink);
      font-family: var(--xs-serif);
      font-size: 34px;
      font-weight: 500;
      letter-spacing: -0.02em;
    }

    .home-days-sub {
      color: var(--muted);
      font-family: var(--xs-ui);
      font-size: 9px;
    }

    .home-days-heart {
      width: 36px;
      height: 36px;
      fill: transparent;
      stroke: var(--accent);
      stroke-width: 1.5;
    }

    .home-stats {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .home-stats button {
      min-height: 86px;
      padding: 13px 14px 11px;
      display: grid;
      align-content: start;
      gap: 3px;
      border: 0;
      border-radius: 16px;
      background: var(--soft);
    }

    .home-stats button + button {
      border-left: 0;
    }

    .home-stats-label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--muted);
      font-family: var(--xs-ui);
      font-size: 10px;
      font-weight: 500;
    }

    .home-stats-label svg {
      width: 13px;
      height: 13px;
      stroke-width: 1.6;
    }

    .home-stats-value {
      color: var(--ink);
      font-family: var(--xs-serif);
      font-size: 28px;
      font-weight: 500;
      line-height: 1;
    }

    .home-stats-text {
      color: var(--muted);
      font-family: var(--xs-ui);
      font-size: 9px;
      line-height: 1.35;
      -webkit-line-clamp: 1;
    }

    .home-user-note {
      grid-column: 1 / -1;
      width: 100%;
      min-height: 130px;
      padding: 17px 18px 15px;
      border: 0;
      border-radius: 19px;
      background: #91325f;
      color: #fff;
      text-align: left;
      box-shadow: 0 12px 24px rgba(91, 38, 63, 0.14);
      transition: transform 160ms ease, filter 160ms ease;
    }

    .home-user-note:active {
      transform: scale(0.99);
      filter: brightness(0.98);
    }

    .home-user-note-head {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }

    .home-user-note-avatar {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: #fff;
      color: #9d4c60;
      font-family: var(--xs-ui);
      font-size: 20px;
      font-weight: 600;
    }

    .home-user-note-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .home-user-note-kicker {
      color: rgba(255, 255, 255, 0.68);
      font-family: var(--xs-ui);
      font-size: 10px;
      font-weight: 500;
    }

    .home-user-note-copy strong {
      overflow: hidden;
      color: #fff;
      font-family: var(--xs-ui);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.55;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

    .home-user-note.is-empty .home-user-note-copy strong {
      color: rgba(255, 255, 255, 0.78);
      font-weight: 500;
    }

    .home-user-note.is-pending::after {
      content: "";
      width: 7px;
      height: 7px;
      position: absolute;
      top: 18px;
      right: 18px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.78);
      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.13);
    }

    .home-user-note {
      position: relative;
    }

    .home-user-note-reply {
      display: block;
      margin-top: 11px;
      padding-top: 11px;
      border-top: 1px solid rgba(255, 255, 255, 0.22);
      color: rgba(255, 255, 255, 0.84);
      font-family: var(--xs-ui);
      font-size: 11px;
      line-height: 1.6;
    }

    .home-user-note-reply[hidden] {
      display: none;
    }

    .home-note-dialog {
      width: min(calc(100% - 24px), 456px);
      max-width: 456px;
      margin: auto auto max(12px, env(safe-area-inset-bottom));
      padding: 0;
      border: 0;
      border-radius: 22px;
      background: var(--paper);
      color: var(--ink);
      box-shadow: 0 24px 60px rgba(36, 35, 38, 0.24);
    }

    .home-note-dialog::backdrop {
      background: rgba(24, 22, 25, 0.34);
      backdrop-filter: blur(4px);
    }

    .home-note-composer {
      padding: 20px 18px 18px;
      display: grid;
      gap: 14px;
    }

    .home-note-composer-head,
    .home-note-composer-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .home-note-composer-head h2 {
      margin: 0;
      font-family: var(--xs-serif);
      font-size: 23px;
      font-weight: 500;
      letter-spacing: 0;
    }

    .home-note-close {
      width: 36px;
      height: 36px;
      padding: 8px;
      border: 0;
      border-radius: 50%;
      background: var(--soft);
      color: var(--muted);
    }

    .home-note-close svg {
      width: 20px;
      height: 20px;
    }

    .home-note-composer textarea {
      width: 100%;
      min-height: 116px;
      resize: none;
      padding: 14px 15px;
      border: 1px solid var(--line);
      border-radius: 14px;
      outline: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--xs-ui);
      /* iOS Safari zooms focused form fields whose computed size is below 16px. */
      font-size: 16px;
      line-height: 1.55;
    }

    .home-note-composer textarea:focus {
      border-color: #9d4c60;
      box-shadow: 0 0 0 3px rgba(157, 76, 96, 0.1);
    }

    .home-note-composer-foot > span {
      color: var(--muted);
      font-family: var(--xs-ui);
      font-size: 10px;
    }

    .home-note-submit {
      min-width: 88px;
      min-height: 40px;
      padding: 0 18px;
      border: 0;
      border-radius: 12px;
      background: #91325f;
      color: #fff;
      font-family: var(--xs-ui);
      font-size: 13px;
      font-weight: 600;
    }

    .home-note-submit:disabled {
      opacity: 0.56;
    }

    .home-dock {
      padding: 0 18px calc(var(--safe-bottom) + 8px);
      border-top: 0;
      background: transparent;
      backdrop-filter: none;
    }

    .home-textnav {
      min-height: 66px;
      padding: 7px 8px;
      align-items: center;
      border: 1px solid rgba(36, 35, 38, 0.06);
      border-radius: 22px;
      background: var(--paper);
      box-shadow: 0 12px 26px rgba(36, 35, 38, 0.09);
    }

    .home-textnav-item {
      min-width: 44px;
      min-height: 44px;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 3px;
      color: var(--muted);
      font-family: var(--xs-ui);
      font-size: 10px;
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: 0.01em;
    }

    .home-textnav-item svg {
      width: 18px;
      height: 18px;
      stroke-width: 1.8;
    }

    .home-textnav-item.active {
      color: var(--accent);
    }

    .home-textnav-item.active::after {
      display: none;
    }

    .site-filing {
      min-height: 13px;
      padding-top: 3px;
      font-family: var(--xs-ui);
      font-size: 8px;
      line-height: 1;
      opacity: 0.58;
    }

    .apps-page {
      background: var(--bg);
    }

    .apps-page-eyebrow,
    .apps-page-title {
      font-family: var(--xs-serif);
    }

    .apps-page-title {
      font-weight: 500;
    }

    .apps-back {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
    }

    @supports (content-visibility: auto) {
      #chatApp .msg:not(.pending):not(.selected):not(.search-focused) {
        content-visibility: auto;
        contain-intrinsic-size: auto 320px;
      }

      @media (pointer: coarse), (max-width: 759px) {
        #chatApp .msg:not(.pending):not(.selected):not(.search-focused) {
          content-visibility: visible;
          contain-intrinsic-size: none;
        }
      }
    }

    button:focus-visible,
    a:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    #chatApp .composer {
      grid-template-columns: minmax(0, 1fr) 44px 44px 44px;
      grid-template-rows: auto 44px;
    }

    #chatApp .tool-button,
    #chatApp .attach-button,
    #chatApp .sticker-button,
    #chatApp .send-button {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      touch-action: manipulation;
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    @media (max-width: 350px) {
      .home-hero {
        padding-top: calc(var(--safe-top) + 10px);
      }

      .home-grid {
        gap: 9px;
      }

      .home-whisper {
        min-height: 122px;
      }

      .home-user-note {
        min-height: 122px;
      }

      .home-textnav-item {
        font-size: 9px;
      }
    }