/* ============================================================
   Xiaomi MiMO Studio 主题 — 对照 mimo.studio 当前界面
   浅灰侧栏 / 白画布 / 深色点缀 / 极简圆角
   ============================================================ */
body.theme-mimo {
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: inherit;

  --provider-sidebar-width: 268px;
  --provider-content-width: 820px;
  --sidebar-w: var(--provider-sidebar-width);
  --chat-w: var(--provider-content-width);

  --bg-main: #ffffff;
  --bg-sidebar: #f5f5f7;
  --bg-panel: #ffffff;
  --bg-menu: #ffffff;
  --fg: #1a1a1a;
  --fg-dim: #6e6e73;
  --border: #e5e5e7;
  --border-strong: #d1d1d6;
  --accent: #1a1a1a;

  --item-hover: rgba(0, 0, 0, .04);
  --item-active: rgba(0, 0, 0, .06);
  --radius-btn: 10px;
  --radius-item: 10px;

  --newchat-fg: #1a1a1a;
  --newchat-bg: transparent;
  --newchat-bg-hover: rgba(0, 0, 0, .04);
  --newchat-border: none;

  --avatar-bg: #e5e5e7;
  --avatar-fg: #1a1a1a;
  --avatar-radius: 10px;

  --user-bubble: #f2f2f7;
  --user-bubble-fg: #1a1a1a;
  --user-bubble-radius: 14px;
  --user-bubble-pad: 10px 14px;

  --composer-bg: #ffffff;
  --composer-border: 1px solid #e5e5e7;
  --composer-radius: 18px;
  --composer-shadow: none;
  --composer-focus: #1a1a1a;

  --send-bg: #1a1a1a;
  --send-fg: #ffffff;
  --send-radius: 50%;

  --search-bg: rgba(0, 0, 0, .04);

  --code-bg: #f7f7f8;
  --code-bar-bg: #efeff0;
  --code-inline-bg: rgba(0, 0, 0, .05);
  --scrollbar: rgba(0, 0, 0, .18);
}

html[data-theme="dark"] body.theme-mimo {
  --bg-main: #16161a;
  --bg-sidebar: #1f1f23;
  --bg-panel: #1f1f23;
  --bg-menu: #2a2a2f;
  --fg: #e8e8ea;
  --fg-dim: #9a9aa0;
  --border: #2e2e33;
  --border-strong: #38383f;
  --accent: #e8e8ea;

  --item-hover: rgba(255, 255, 255, .05);
  --item-active: rgba(255, 255, 255, .08);

  --user-bubble: #2c2c31;
  --user-bubble-fg: #e8e8ea;

  --composer-bg: #1f1f23;
  --composer-border: 1px solid #34343a;
  --composer-focus: #5b7cfa;

  --send-bg: #e8e8ea;
  --send-fg: #16161a;

  --search-bg: rgba(255, 255, 255, .05);
  --code-bg: #1b1b1f;
  --code-bar-bg: #25252a;
  --code-inline-bg: rgba(255, 255, 255, .08);
  --scrollbar: rgba(255, 255, 255, .16);
}

body.theme-mimo { font-family: var(--font-body); background: var(--bg-main); color: var(--fg); -webkit-font-smoothing: antialiased; }

/* ---- 侧栏 ---- */
body.theme-mimo .sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border); }
body.theme-mimo .sidebar-header { padding: 14px 16px; }
body.theme-mimo .brand { gap: 8px; }
body.theme-mimo .brand-icon { color: var(--fg); }
body.theme-mimo .brand-icon svg { width: 18px; height: 18px; }
body.theme-mimo .brand-name { font-size: 14.5px; font-weight: 600; letter-spacing: .2px; color: var(--fg); }

/* MiMO 侧栏顶部没有大大的「新对话」按钮 */
body.theme-mimo .new-chat-btn { display: none; }

/* 侧栏导航: MiMo Chat */
body.theme-mimo .sidebar-nav { padding: 0 12px; }
body.theme-mimo .snav-list { display: flex; flex-direction: column; gap: 2px; }
body.theme-mimo .snav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 999px;
  background: #ffffff; border: 1px solid var(--border);
  color: var(--fg); font-size: 13.5px;
  position: relative;
}
body.theme-mimo .snav-item:hover { background: var(--item-hover); }
body.theme-mimo .snav-item .si-icon { color: var(--fg-dim); }
/* 右侧 + */
body.theme-mimo .snav-item::after {
  content: '+'; margin-left: auto;
  width: 20px; height: 20px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-dim); font-size: 16px; font-weight: 300;
}
body.theme-mimo .snav-item:hover::after { background: var(--item-active); color: var(--fg); }

body.theme-mimo .sidebar-search {
  background: var(--search-bg); margin: 8px 12px 10px; border-radius: 10px;
}
body.theme-mimo .sidebar-search:hover, body.theme-mimo .sidebar-search:focus-within { background: var(--item-hover); }
body.theme-mimo .session-list-title { padding: 8px 16px 4px; font-size: 11px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .5px; }
body.theme-mimo .session-item { border-radius: 10px; margin: 0 8px; padding: 8px 10px; color: var(--fg); }
body.theme-mimo .session-item:hover { background: var(--item-hover); }
body.theme-mimo .session-item.active { background: var(--item-active); }

/* ---- 顶栏:模型选择器 ---- */
body.theme-mimo .topbar {
  padding: 10px 20px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: none;
}
/* 空聊时把模型选择器置顶,避免被 .main::before 的占位空间推下来 */
body.empty-chat.theme-mimo .topbar { order: -1; }
body.theme-mimo .expand-btn { color: var(--fg-dim); }
body.theme-mimo .expand-btn:hover { background: var(--item-hover); color: var(--fg); }
/* MiMO 侧栏收起时复用 base.css 的 margin-left 负值,让主内容区同步向左填满 */
body.sidebar-collapsed.theme-mimo .sidebar { margin-left: calc(var(--sidebar-w, 264px) * -1); }
body.theme-mimo .topbar-wordmark { display: none; }
body.theme-mimo .session-title-bar { display: none; }
body.theme-mimo .composer-picker { display: none; }

body.theme-mimo .model-picker { position: relative; }
body.theme-mimo .model-picker-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: transparent; border: 1px solid transparent;
  color: var(--fg); font-size: 14px; font-weight: 500;
}
body.theme-mimo .model-picker-btn:hover { background: var(--item-hover); }
body.theme-mimo .model-picker-btn svg { color: var(--fg-dim); }

/* ---- MiMO 模型选择菜单(截图样式) ---- */
body.theme-mimo .model-menu {
  top: calc(100% + 8px); left: 0;
  min-width: 300px; padding: 8px;
  border-radius: 16px;
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
body.theme-mimo .model-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 12px; gap: 10px;
}
body.theme-mimo .model-item:hover { background: #f5f5f7; }
body.theme-mimo .model-item .mi-icon { display: none; }
body.theme-mimo .model-item .mi-body { gap: 4px; }
body.theme-mimo .model-item .mi-label { font-size: 15px; font-weight: 500; }
body.theme-mimo .model-item .mi-sub { font-size: 12.5px; color: var(--fg-dim); }
body.theme-mimo .model-item .mi-tag {
  margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  background: #e9e6ff; color: #5b4dff;
  font-size: 11px; font-weight: 500;
}
body.theme-mimo .model-item .mi-check {
  width: 22px; height: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #1a1a1a; color: #fff; border-radius: 50%;
  font-size: 13px; line-height: 1;
}
html[data-theme="dark"] body.theme-mimo .model-menu { background: var(--bg-menu); }
html[data-theme="dark"] body.theme-mimo .model-item:hover { background: var(--item-hover); }

body.theme-mimo .announcement { display: none; }

/* ---- 空态:居中细标题 + 横向建议 chips ---- */
body.empty-chat.theme-mimo .main::before { content: ''; flex: 1 1 0; }
body.empty-chat.theme-mimo .main::after  { content: ''; flex: 1.2 1 0; }
body.empty-chat.theme-mimo .chat-scroll { flex: 0 0 auto; overflow: visible; }
body.empty-chat.theme-mimo .welcome {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 24px 20px;
}
body.theme-mimo .welcome-icon { display: none; }
body.theme-mimo .welcome-title {
  font-size: 15.5px; font-weight: 400; color: var(--fg-dim);
  text-align: center; line-height: 1.6;
}
body.theme-mimo .welcome-sub { display: none; }

body.theme-mimo .welcome-suggest {
  max-width: var(--chat-w); width: 100%; margin: 18px auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
body.theme-mimo .suggest-item {
  padding: 9px 14px; border-radius: 999px;
  background: #f2f2f7; color: var(--fg);
  font-size: 13.5px; border: 1px solid transparent;
}
html[data-theme="dark"] body.theme-mimo .suggest-item { background: #2a2a2f; }
body.theme-mimo .suggest-item:hover { background: #e5e5ea; color: var(--fg); }
html[data-theme="dark"] body.theme-mimo .suggest-item:hover { background: #34343a; }
body.theme-mimo .suggest-item svg { display: none; }

/* ---- 消息 ---- */
body.theme-mimo .msg-assistant .msg-avatar { display: none; }
body.theme-mimo .msg-user .msg-avatar { display: none; }
body.theme-mimo .msg-user { flex-direction: row-reverse; }
body.theme-mimo .msg-user .msg-body { display: flex; flex-direction: column; align-items: flex-end; }
body.theme-mimo .msg-user .msg-content { max-width: 76%; background: var(--user-bubble); color: var(--user-bubble-fg); border-radius: var(--user-bubble-radius); padding: var(--user-bubble-pad); }
body.theme-mimo .msg-assistant .msg-content { font-size: 15.5px; line-height: 1.75; color: var(--fg); max-width: 100%; }
body.theme-mimo .msg-content pre { background: var(--code-bg); border: 1px solid var(--border); }
body.theme-mimo .msg-content code { background: var(--code-inline-bg); }

/* ---- 输入框 ---- */
body.theme-mimo .composer-wrap { padding-bottom: 24px; }
body.theme-mimo .composer {
  max-width: var(--chat-w); padding: 10px 14px;
  border: var(--composer-border); border-radius: var(--composer-radius);
  background: var(--composer-bg); box-shadow: var(--composer-shadow);
}
body.theme-mimo .composer:focus-within { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
body.theme-mimo .composer-grid {
  display: flex; align-items: flex-end; gap: 10px;
}
body.theme-mimo .composer-grid .attach-btn {
  color: var(--fg-dim); width: 32px; height: 32px; border-radius: 50%;
  flex-shrink: 0;
}
body.theme-mimo .composer-grid .attach-btn:hover { background: var(--item-hover); color: var(--fg); }
body.theme-mimo .composer-grid .composer-tools { display: none; }
body.theme-mimo .composer-grid textarea {
  flex: 1 1 auto; padding: 7px 4px; font-size: 15px;
  max-height: 200px; resize: none;
}
body.theme-mimo .composer-grid textarea::placeholder { color: #b0b0b5; }
body.theme-mimo .composer-grid .mic-area { display: none; }
body.theme-mimo .send-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--send-bg); color: var(--send-fg);
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
}
body.theme-mimo .send-btn:hover { opacity: .85; }
body.theme-mimo .send-btn svg { width: 15px; height: 15px; }

body.theme-mimo .composer-hint {
  color: var(--fg-dim); font-size: 11.5px; text-align: center; margin-top: 10px;
}

/* ---- 能力边界 ---- */
body.theme-mimo [data-capability-state="external"] {
  border-color: var(--border-strong);
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}
body.theme-mimo [data-capability-state="external"]::after {
  content: ' ↗';
}

body.theme-mimo :focus-visible {
  outline: 2px solid var(--composer-focus);
  outline-offset: 3px;
}

/* ---- 弹层 ---- */
body.theme-mimo .primary-btn, body.theme-mimo .login-card button:not(.auth-tab) { background: var(--accent); color: #fff; }
body.theme-mimo .modal, body.theme-mimo .login-card { border: 1px solid var(--border-strong); }
body.theme-mimo .user-menu, body.theme-mimo .model-menu { border-radius: 14px; }

/* ---- 响应式 ---- */
@media (max-width: 768px) {
  body.theme-mimo .welcome-title { font-size: 14px; }
  body.theme-mimo .welcome-suggest { gap: 8px; }
  body.theme-mimo .suggest-item { font-size: 12.5px; padding: 8px 12px; }
}

@media (max-width: 680px) {
  body.theme-mimo .sidebar {
    width: min(88vw, var(--provider-sidebar-width));
    padding-left: env(safe-area-inset-left, 0px);
  }

  body.theme-mimo .composer-wrap {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-mimo *,
  body.theme-mimo *::before,
  body.theme-mimo *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  body.theme-mimo :focus-visible {
    outline-color: Highlight;
  }

  body.theme-mimo [data-capability] {
    border: 1px solid ButtonText;
  }

  body.theme-mimo [data-capability-state="external"] {
    border-color: CanvasText;
  }
}

/* Official MiMo wait: two pills that trade height. */
body.theme-mimo .waiting-mimo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 14px;
}
body.theme-mimo .waiting-elapsed {
  font-size: 12px;
  color: var(--fg-dim, #777);
}
body.theme-mimo .waiting-mimo i {
  display: block;
  width: 4px;
  height: 10px;
  border-radius: 999px;
  background: var(--fg);
  animation: mimo-waiting-swap 800ms infinite ease-in-out;
}
body.theme-mimo .waiting-mimo i:nth-child(2) { animation-delay: .4s; }
@keyframes mimo-waiting-swap {
  0%, 100% { height: 6px; opacity: .4; }
  50% { height: 14px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-mimo .waiting-mimo i { animation: none; height: 10px; opacity: 1; }
}