/* ============================================================
   Grok 主题（浅色默认 + 深色，对照 grok.com 截图）
   结构规则对两种模式通用；颜色走 CSS 变量，
   深色通过 html[data-theme="dark"] 覆盖变量实现。
   ============================================================ */
body.theme-grok {
  --provider-sidebar-width: 262px;
  --provider-content-width: 820px;
  --font-body: "Inter", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: inherit;

  --sidebar-w: var(--provider-sidebar-width);
  --chat-w: var(--provider-content-width);
  --avatar-radius: 50%;
  --radius-btn: 12px;
  --radius-item: 10px;

  /* ---- 浅色（默认）调色板 ---- */
  --bg-main: #ffffff;
  --bg-sidebar: #f7f7f5;
  --bg-panel: #ffffff;
  --bg-menu: #ffffff;
  --fg: #0a0a0a;
  --fg-dim: #6b6b6b;
  --border: #e6e6e6;
  --accent: #0a0a0a;

  --item-hover: rgba(0, 0, 0, .05);
  --item-active: rgba(0, 0, 0, .09);

  --newchat-fg: #0a0a0a;
  --newchat-bg: rgba(0, 0, 0, .04);
  --newchat-bg-hover: rgba(0, 0, 0, .08);
  --newchat-border: 1px solid #e6e6e6;

  --user-bubble: #f0f0f0;
  --user-bubble-fg: #0a0a0a;
  --user-bubble-radius: 20px;
  --user-bubble-pad: 9px 16px;

  --composer-bg: #ffffff;
  --composer-border: 1px solid #e2e2e2;
  --composer-radius: 24px;
  --composer-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  --composer-focus: #b0b0b0;

  --send-bg: #0a0a0a;
  --send-fg: #ffffff;
  --send-radius: 50%;

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

  --code-bg: #f5f5f5;
  --code-bar-bg: #ededed;
  --code-inline-bg: rgba(0, 0, 0, .06);
  --scrollbar: rgba(0, 0, 0, .18);
}

/* ---- 深色（纯黑画布）调色板 ---- */
html[data-theme="dark"] body.theme-grok {
  --bg-main: #000000;
  --bg-sidebar: #0a0a0a;
  --bg-panel: #1a1a1a;
  --bg-menu: #1e1e1e;
  --fg: #f5f5f5;
  --fg-dim: #7d7d7d;
  --border: #262626;
  --accent: #f5f5f5;

  --item-hover: rgba(255, 255, 255, .07);
  --item-active: rgba(255, 255, 255, .12);

  --newchat-fg: #f5f5f5;
  --newchat-bg: rgba(255, 255, 255, .05);
  --newchat-bg-hover: rgba(255, 255, 255, .1);
  --newchat-border: 1px solid #262626;

  --user-bubble: #1e1e1e;
  --user-bubble-fg: #f5f5f5;

  --composer-bg: #161616;
  --composer-border: 1px solid #2a2a2a;
  --composer-radius: 24px;
  --composer-shadow: none;
  --composer-focus: #454545;

  --send-bg: #ffffff;
  --send-fg: #0a0a0a;

  --search-bg: rgba(255, 255, 255, .06);

  --code-bg: #0f0f0f;
  --code-bar-bg: #191919;
  --code-inline-bg: rgba(255, 255, 255, .1);
  --scrollbar: rgba(255, 255, 255, .18);
}

/* ---- 顶栏：极简；模型选择在输入框内 ---- */
body.theme-grok .topbar .model-picker { display: none; }
body.theme-grok .composer-picker { display: block; }

/* ---- 侧边栏 ---- */
body.theme-grok .sidebar { border-right: 1px solid var(--border); }
body.theme-grok .session-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.theme-grok .grok-history-all-btn {
  border: 0;
  padding: 3px 5px;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-dim);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
body.theme-grok .grok-history-all-btn:hover { background: var(--item-hover); color: var(--fg); }

/* ---- 空对话：大字标 + 胶囊输入框，重心偏上 ---- */
body.empty-chat.theme-grok .main::before { content: ''; flex: .55 1 0; }
body.empty-chat.theme-grok .main::after  { content: ''; flex: 1.6 1 0; }
body.empty-chat.theme-grok .chat-scroll  { flex: 0 0 auto; overflow: visible; }
body.empty-chat.theme-grok .welcome { padding: 0 24px 30px; }
body.theme-grok .welcome-icon { display: none; }
body.theme-grok .welcome-title { font-size: 42px; font-weight: 600; letter-spacing: .5px; color: var(--fg); }
body.theme-grok .welcome-sub { display: none; }

/* ---- 消息：双方无头像；用户深灰气泡右对齐 ---- */
body.theme-grok .msg-avatar { display: none; }
body.theme-grok .msg-user { flex-direction: row-reverse; }
body.theme-grok .msg-user .msg-body { display: flex; flex-direction: column; align-items: flex-end; }
body.theme-grok .msg-user .msg-content { max-width: 72%; }

/* ---- 输入框：单行全胶囊 ---- */
body.theme-grok .composer { padding: 14px 12px 14px 18px; }
body.theme-grok .composer-grid textarea { padding: 8px 6px; font-size: 15.5px; }
body.theme-grok .send-btn { width: 38px; height: 38px; }
body.theme-grok .send-btn:hover { opacity: .85; }
body.theme-grok .send-btn svg { stroke: var(--send-fg); }
/* 官方首页的输入区把附件放在左侧、听写与语音模式放在右侧；这些
   控件由共享运行时动态装配，样式只作用于 Grok，避免影响其它 provider。 */
body.theme-grok .composer-grid .attach-btn {
  width: 32px; height: 32px; flex: 0 0 32px; align-self: center;
  border-radius: 50%; background: var(--item-hover); color: var(--fg);
  touch-action: manipulation;
}
body.theme-grok .composer-grid .attach-btn:hover,
body.theme-grok .composer-grid .attach-btn[aria-expanded="true"] {
  background: var(--item-active); color: var(--fg);
}
body.theme-grok .composer-grid .mic-area { gap: 4px; }
body.theme-grok .composer-grid .mic-area .mic-btn {
  width: 32px; height: 32px; border-radius: 50%; color: var(--fg-dim);
  touch-action: manipulation;
}
body.theme-grok .composer-grid .mic-area .mic-btn:hover { color: var(--fg); }
body.theme-grok .composer-grid .mic-area .voice-mode-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--send-bg); color: var(--send-fg);
}
body.theme-grok .composer-grid .mic-area .voice-mode-btn:hover {
  background: var(--send-bg); color: var(--send-fg); opacity: .86;
}
body.theme-grok .composer-model-btn { color: var(--fg-dim); font-size: 13.5px; }
body.theme-grok .composer-model-btn:hover { background: var(--item-hover); color: var(--fg); }
body.theme-grok .model-menu-divider { height: 1px; margin: 6px 2px; background: var(--border); }
body.theme-grok .grok-automation-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--fg-dim); font-size: 12px; }
body.theme-grok .grok-automation-links a { color: var(--accent); font-weight: 600; text-decoration: underline; }
body.theme-grok .grok-automation-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
body.theme-grok .grok-automation-suggestions button { border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; font: inherit; font-size: 12px; padding: 5px 9px; }
body.theme-grok .grok-automation-suggestions button:hover { background: var(--item-hover); }
body.theme-grok .grok-voice-mode-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(820px, calc(100% - 32px)); margin: 0 auto 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel); color: var(--fg); font-size: 12px; }
body.theme-grok .grok-voice-mode-controls > div { display: flex; gap: 6px; }
body.theme-grok .grok-voice-mode-controls button { border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--fg); cursor: pointer; font: inherit; padding: 5px 8px; }
body.theme-grok .grok-voice-mode-controls button:hover { background: var(--item-hover); }
body.theme-grok .grok-voice-mode-controls button:disabled { cursor: not-allowed; opacity: .5; }

/* ---- Imagine 本地工作台 ---- */
body.theme-grok .grok-imagine-modal {
  width: min(680px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 28px)); overflow: auto;
}
body.theme-grok .grok-imagine-subtitle { margin: 2px 0 0; color: var(--fg-dim); font-size: 11px; }
body.theme-grok .grok-imagine-tabs { display: flex; gap: 5px; margin: 0 0 15px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-main); }
body.theme-grok .grok-imagine-tabs button { flex: 1; border: 0; border-radius: 7px; padding: 8px 10px; background: transparent; color: var(--fg-dim); cursor: pointer; font: inherit; font-size: 13px; }
body.theme-grok .grok-imagine-tabs button:hover,
body.theme-grok .grok-imagine-tabs button.active,
body.theme-grok .grok-imagine-tabs button[aria-selected="true"] { background: var(--item-active); color: var(--fg); }
body.theme-grok .grok-imagine-notice { margin: 0 0 14px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; color: var(--fg-dim); font-size: 12px; line-height: 1.5; }
body.theme-grok .grok-imagine-notice.warning { border-color: #d99a3d; color: #9a6419; }
html[data-theme="dark"] body.theme-grok .grok-imagine-notice.warning { color: #f3c16c; }
body.theme-grok .grok-imagine-template-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 7px; color: var(--fg); font-size: 12px; }
body.theme-grok .grok-imagine-template-head span { color: var(--fg-dim); font-size: 11px; }
body.theme-grok .grok-imagine-templates { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
body.theme-grok .grok-imagine-template { border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; background: transparent; color: var(--fg-dim); cursor: pointer; font: inherit; font-size: 12px; }
body.theme-grok .grok-imagine-template:hover,
body.theme-grok .grok-imagine-template.active,
body.theme-grok .grok-imagine-template[aria-selected="true"] { border-color: var(--fg-dim); background: var(--item-hover); color: var(--fg); }
body.theme-grok .grok-imagine-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 10px 0 16px; }
body.theme-grok .grok-imagine-options label { display: flex; flex-direction: column; gap: 5px; color: var(--fg-dim); font-size: 11px; }
body.theme-grok .grok-imagine-options select { min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 8px 9px; background: var(--bg-main); color: var(--fg); font: inherit; font-size: 12px; }
body.theme-grok .grok-imagine-materials { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
body.theme-grok .grok-imagine-materials > .btn-secondary { margin: 2px 0 9px; }
body.theme-grok .grok-imagine-material-list { display: flex; flex-wrap: wrap; gap: 7px; min-height: 30px; }
body.theme-grok .grok-imagine-material { display: flex; align-items: center; gap: 6px; max-width: 220px; padding: 4px 6px 4px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-main); color: var(--fg); font-size: 11px; }
body.theme-grok .grok-imagine-material img { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; }
body.theme-grok .grok-imagine-material span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.theme-grok .grok-imagine-material button { width: 20px; height: 20px; border: 0; border-radius: 5px; background: transparent; color: var(--fg-dim); cursor: pointer; font-size: 16px; line-height: 1; }
body.theme-grok .grok-imagine-material button:hover { background: var(--item-hover); color: var(--fg); }
body.theme-grok .grok-imagine-material-empty { color: var(--fg-dim); font-size: 11px; }
body.theme-grok .grok-imagine-disclaimer { margin: 12px 0 0; color: var(--fg-dim); font-size: 11px; line-height: 1.5; }
body.theme-grok .grok-imagine-agent { padding: 15px; border: 1px solid var(--border); border-radius: 11px; color: var(--fg); }
body.theme-grok .grok-imagine-agent p { margin: 7px 0 15px; color: var(--fg-dim); font-size: 12px; line-height: 1.6; }
body.theme-grok .grok-imagine-agent .primary-btn { display: inline-flex; text-decoration: none; }
body.theme-grok .grok-model-menu-heading { padding: 7px 11px 4px; color: var(--fg-dim); font-size: 11px; }
body.theme-grok .grok-model-menu-empty { padding: 8px 11px 10px; color: var(--fg-dim); font-size: 11px; line-height: 1.5; }
body.theme-grok .grok-configured-model .mi-sub { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 项目、技能与连接器：本地工作区状态 ----
   这些 DOM 由共享运行时复用，样式必须限制在 Grok，且保留“本地”说明的
   可见性；不能用主题色把未授权的官方连接器渲染成已连接状态。 */
body.theme-grok .modal-project-form {
  width: min(560px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  overflow-y: auto;
}
body.theme-grok .modal-project-form .project-form-files {
  margin-top: 14px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-main);
}
body.theme-grok .modal-project-form .project-form-files-head,
body.theme-grok .modal-project-form .project-form-file-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
body.theme-grok .modal-project-form .project-form-files-head strong { font-size: 13px; }
body.theme-grok .modal-project-form .project-form-file-list { display: grid; gap: 6px; margin-top: 8px; }
body.theme-grok .modal-project-form .project-form-file-row {
  min-width: 0; padding: 6px 0; border-top: 1px solid var(--border); color: var(--fg-dim); font-size: 12px;
}
body.theme-grok .modal-project-form .project-form-file-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.theme-grok .modal-project-form .project-form-file-row .btn-secondary { padding: 4px 8px; font-size: 11px; }
body.theme-grok .modal-project-form .project-form-files-empty { color: var(--fg-dim); font-size: 12px; }
body.theme-grok .modal-project-form .settings-field-desc { display: block; margin-top: 8px; color: var(--fg-dim); font-size: 11px; line-height: 1.5; }
body.theme-grok .grok-settings-layer .settings-action-stack { display: grid; gap: 8px; margin: 14px 0 4px; }
body.theme-grok .modal-layer .settings-action-row {
  min-height: 48px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px;
  background: transparent; color: var(--fg); font: inherit;
}
body.theme-grok .modal-layer .settings-action-row:hover,
body.theme-grok .modal-layer .settings-action-row:focus-visible { background: var(--item-hover); }
body.theme-grok .modal-layer .settings-action-row > span:first-child { min-width: 0; }
body.theme-grok .modal-layer .settings-action-row small { color: var(--fg-dim); }
body.theme-grok .modal-layer .settings-action-row > span:last-child { color: var(--fg-dim); font-size: 18px; }
body.theme-grok .dir-item-btn { border-color: var(--border); background: transparent; color: var(--fg); }
body.theme-grok .dir-item-btn:hover,
body.theme-grok .dir-item-btn:focus-visible { border-color: var(--fg-dim); background: var(--item-hover); color: var(--fg); }
body.theme-grok .dir-item-btn.on { border-color: var(--fg-dim); background: var(--item-active); color: var(--fg); }
body.theme-grok .grok-settings-status {
  min-height: 1.35em; margin: 8px 0 0; color: var(--fg-dim); font-size: 12px; line-height: 1.45;
}
body.theme-grok .grok-settings-status:not(:empty) { color: var(--fg); }

/* 自动化表单使用共享的 gemini-schedule-* DOM，但在 Grok 中明确这是本地提醒。 */
body.theme-grok .gemini-schedule-list { max-height: min(260px, 34vh); margin-top: 14px; scrollbar-width: thin; }
body.theme-grok .gemini-schedule-row { background: var(--bg-main); }
body.theme-grok .gemini-schedule-row > span { min-width: 0; overflow: hidden; }
body.theme-grok .gemini-schedule-row > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.theme-grok .gemini-schedule-row button { min-width: 42px; color: #c0392b; cursor: pointer; }
body.theme-grok .grok-automation-fields select:focus-visible,
body.theme-grok .grok-automation-fields textarea:focus-visible,
body.theme-grok .gemini-schedule-row button:focus-visible {
  outline: 2px solid var(--fg) !important; outline-offset: 2px;
}

/* 本地能力的失败/等待状态必须和可提交按钮有明显差别。 */
body.theme-grok .grok-imagine-modal button:disabled,
body.theme-grok .grok-settings-modal button:disabled,
body.theme-grok .grok-report-layer button:disabled,
body.theme-grok .grok-automation-fields select:disabled {
  cursor: not-allowed; opacity: .52;
}
body.theme-grok .grok-imagine-modal .dialog-status,
body.theme-grok .grok-report-layer .dialog-status { min-width: 0; color: var(--fg-dim); line-height: 1.45; }
body.theme-grok .grok-imagine-modal .dialog-status:not(:empty),
body.theme-grok .grok-report-layer .dialog-status:not(:empty) { max-width: 60%; }

@media (max-width: 520px) {
  body.theme-grok .grok-imagine-options { grid-template-columns: 1fr; }
}

/* ---- 弹层 / 弹窗（深色） ---- */
html[data-theme="dark"] body.theme-grok .login-card,
html[data-theme="dark"] body.theme-grok .modal { border: 1px solid #262626; }
html[data-theme="dark"] body.theme-grok .login-card button:not(.auth-tab),
html[data-theme="dark"] body.theme-grok .primary-btn { background: #f5f5f5; color: #000; }
html[data-theme="dark"] body.theme-grok .modal-tabs .tab.active { color: #fff; border-bottom-color: #fff; }
html[data-theme="dark"] body.theme-grok #settings-status { color: #9be49b; }
html[data-theme="dark"] body.theme-grok .cursor { background: #f5f5f5; }
html[data-theme="dark"] body.theme-grok .msg-content blockquote { border-left-color: #454545; }
html[data-theme="dark"] body.theme-grok .user-menu,
html[data-theme="dark"] body.theme-grok .model-menu { box-shadow: 0 10px 36px rgba(0, 0, 0, .55); }

/* ---- 弹层 / 弹窗（浅色） ---- */
html[data-theme="light"] body.theme-grok .login-card,
html[data-theme="light"] body.theme-grok .modal { border: 1px solid #e6e6e6; }
html[data-theme="light"] body.theme-grok .login-card button:not(.auth-tab),
html[data-theme="light"] body.theme-grok .primary-btn { background: #0a0a0a; color: #fff; }
html[data-theme="light"] body.theme-grok .modal-tabs .tab.active { color: #0a0a0a; border-bottom-color: #0a0a0a; }
html[data-theme="light"] body.theme-grok #settings-status { color: #1a8a1a; }
html[data-theme="light"] body.theme-grok .cursor { background: #0a0a0a; }
html[data-theme="light"] body.theme-grok .msg-content blockquote { border-left-color: #d0d0d0; }
html[data-theme="light"] body.theme-grok .user-menu,
html[data-theme="light"] body.theme-grok .model-menu { box-shadow: 0 10px 36px rgba(0, 0, 0, .12); }

/* ---- Grok 会话操作、搜索与菜单 ---- */
body.theme-grok .session-title-bar {
  display: inline-flex; max-width: min(340px, 36vw); overflow: hidden; padding: 6px 9px;
  border: 0; border-radius: 8px; background: transparent; color: var(--fg-dim);
  font-size: 13px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
body.theme-grok .session-title-bar:hover,
body.theme-grok .grok-header-action:hover { background: var(--item-hover); color: var(--fg); }
body.theme-grok .grok-header-action {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px;
  border: 0; border-radius: 8px; background: transparent; color: var(--fg-dim);
  padding: 7px 9px; font: inherit; font-size: 13px; cursor: pointer;
}
body.theme-grok .grok-header-action { margin-right: 2px; }

body.theme-grok .grok-search-layer {
  align-items: flex-start; padding-top: min(96px, 12vh); overflow-y: auto; overscroll-behavior: contain;
  background: rgba(0, 0, 0, .24);
}
body.theme-grok .grok-search-layer .claude-search-dialog {
  position: relative; box-sizing: border-box; width: min(580px, calc(100vw - 32px)); max-height: min(640px, 76vh); overflow: visible;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-panel); color: var(--fg);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .2);
}
body.theme-grok .grok-search-layer .claude-search-heading { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px 8px; font-size: 15px; font-weight: 600; }
body.theme-grok .grok-search-layer .claude-search-mode { color: var(--fg-dim); font-size: 11px; font-weight: 400; }
body.theme-grok .grok-search-layer .claude-search-input-wrap { display: flex; align-items: center; gap: 9px; margin: 0 12px 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; color: var(--fg-dim); }
body.theme-grok .grok-search-layer .claude-search-input-wrap:focus-within { border-color: var(--fg-dim); }
body.theme-grok .grok-search-layer .claude-search-input-wrap svg { width: 16px; height: 16px; flex: 0 0 auto; }
body.theme-grok .grok-search-layer .claude-search-input-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; font-size: 13px; }
body.theme-grok .grok-search-layer .claude-search-close { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--fg-dim); font-size: 19px; line-height: 1; cursor: pointer; }
body.theme-grok .grok-search-layer .claude-search-close:hover { background: var(--item-hover); color: var(--fg); }
body.theme-grok .grok-search-layer .claude-search-results { max-height: min(470px, 54vh); overflow-y: auto; padding: 0 8px 8px; }
body.theme-grok .grok-search-layer .claude-search-result { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--fg); text-align: left; cursor: pointer; }
body.theme-grok .grok-search-layer .claude-search-result:hover,
body.theme-grok .grok-search-layer .claude-search-result.selected { background: var(--item-hover); }
body.theme-grok .grok-search-layer .claude-search-result-icon { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 7px; background: var(--item-hover); color: var(--fg); font-size: 14px; flex: 0 0 auto; }
body.theme-grok .grok-search-layer .claude-search-result-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
body.theme-grok .grok-search-layer .claude-search-result-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 550; }
body.theme-grok .grok-search-layer .claude-search-result-copy small,
body.theme-grok .grok-search-layer .claude-search-result-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-dim); font-size: 11px; }
body.theme-grok .grok-search-layer .claude-search-result-type { max-width: 120px; flex: 0 0 auto; }
body.theme-grok .grok-search-layer .claude-search-empty { padding: 28px 16px; color: var(--fg-dim); font-size: 13px; text-align: center; }
body.theme-grok .grok-search-layer .claude-search-hints { display: flex; align-items: center; gap: 6px; padding: 9px 16px 12px; border-top: 1px solid var(--border); color: var(--fg-dim); font-size: 11px; }
body.theme-grok .grok-search-layer .claude-search-hints span:not(:first-child) { margin-left: 8px; }
body.theme-grok .grok-search-layer .claude-search-hints kbd,
body.theme-grok .grok-shortcuts-list kbd { min-width: 21px; padding: 2px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--item-hover); color: var(--fg); text-align: center; font: inherit; }
body.theme-grok .grok-search-layer .claude-search-actions-menu {
  box-sizing: border-box; max-width: min(260px, calc(100vw - 20px)); max-height: min(360px, calc(100vh - 32px));
  overflow-y: auto; overscroll-behavior: contain; background: var(--bg-menu); color: var(--fg);
  border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}

body.theme-grok .session-context-menu,
body.theme-grok .message-context-menu {
  position: fixed; z-index: 180; box-sizing: border-box; min-width: min(158px, calc(100vw - 16px));
  max-width: min(300px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; padding: 5px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg-menu); color: var(--fg); box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}
body.theme-grok .session-context-menu button,
body.theme-grok .message-context-menu button {
  display: block; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; outline: none; border-radius: 7px;
  background: transparent; color: inherit; text-align: left; font: inherit; font-size: 12px; line-height: 1.35; cursor: pointer;
}
body.theme-grok .session-context-menu button:hover,
body.theme-grok .session-context-menu button:focus,
body.theme-grok .message-context-menu button:hover,
body.theme-grok .message-context-menu button:focus { background: var(--item-hover); outline: none; }
body.theme-grok .session-context-menu button.danger { color: #c0392b; }
body.theme-grok .session-menu-separator { height: 1px; margin: 5px 2px; background: var(--border); }

/* ---- Grok 设置与报告弹窗 ---- */
body.theme-grok .modal { box-sizing: border-box; max-width: 100%; }
body.theme-grok .grok-settings-modal { box-sizing: border-box; width: min(500px, 94vw); }
body.theme-grok .grok-settings-section { padding: 12px 0; border-bottom: 1px solid var(--border); }
body.theme-grok .grok-settings-section:last-of-type { border-bottom: 0; }
body.theme-grok .grok-settings-section h3 { margin: 0 0 10px; font-size: 14px; }
body.theme-grok .grok-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; }
body.theme-grok .grok-settings-row > span { display: flex; flex-direction: column; gap: 3px; }
body.theme-grok .grok-settings-row small,
body.theme-grok .grok-settings-note { color: var(--fg-dim); font-size: 12px; line-height: 1.5; }
body.theme-grok .grok-settings-row select { min-width: 94px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-panel); color: var(--fg); }
body.theme-grok .grok-settings-row input.grok-settings-readonly { width: 94px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-main); color: var(--fg-dim); text-align: center; }
body.theme-grok .grok-settings-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--fg); }
body.theme-grok .grok-settings-action { display: inline-flex; margin: 8px 8px 0 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--fg); font: inherit; font-size: 12px; cursor: pointer; }
body.theme-grok .grok-settings-action:hover { background: var(--item-hover); }
body.theme-grok .grok-settings-action.danger { color: #c0392b; border-color: color-mix(in srgb, #c0392b 45%, var(--border)); }
body.theme-grok .grok-settings-action.danger:hover { background: rgba(192, 57, 43, .1); }
body.theme-grok .grok-settings-modal { max-height: min(760px, calc(100vh - 24px)); overflow-y: auto; }
body.theme-grok .grok-settings-section h3 { letter-spacing: .01em; }
body.theme-grok .grok-shortcuts-list { display: grid; gap: 2px; }
body.theme-grok .grok-shortcuts-list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; color: var(--fg-dim); font-size: 12px; }
body.theme-grok .grok-shortcuts-list kbd { color: var(--fg); }
body.theme-grok .grok-report-reasons { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
body.theme-grok .grok-report-reasons button { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--fg-dim); font: inherit; font-size: 12px; cursor: pointer; }
body.theme-grok .grok-report-reasons button:hover,
body.theme-grok .grok-report-reasons button.active { border-color: var(--fg); background: var(--item-hover); color: var(--fg); }
body.theme-grok .grok-report-detail { display: block; width: 100%; min-height: 78px; padding: 8px 10px; resize: vertical; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--fg); font: inherit; font-size: 12px; }

/* ---- Grok 状态可见性（不改变其它 provider 的交互） ---- */
body.theme-grok .private-top-btn[aria-pressed="true"] {
  background: var(--item-active);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--border);
}
body.theme-grok #incognito-banner {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 6px 12px 0;
  background: var(--bg-panel);
  color: var(--fg);
}
body.theme-grok .mic-area .voice-mode-btn.recording,
body.theme-grok .mic-area .mic-btn.recording {
  background: var(--item-active);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--fg-dim), 0 0 0 3px var(--item-hover);
}
body.theme-grok .grok-voice-mode-controls[role="status"] {
  box-shadow: 0 0 0 2px var(--item-hover);
}
body.theme-grok .grok-voice-mode-controls [data-grok-voice-state] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.theme-grok .grok-mode-item[aria-checked="true"] {
  background: var(--item-active);
  color: var(--fg);
}
body.theme-grok .model-menu .model-item:disabled,
body.theme-grok .grok-add-menu .add-menu-item:disabled,
body.theme-grok .grok-voice-mode-controls button:disabled {
  cursor: not-allowed;
  opacity: .5;
}
body.theme-grok .model-menu .model-item:disabled:hover,
body.theme-grok .grok-add-menu .add-menu-item:disabled:hover {
  background: transparent;
}
/* renderGrokModeMenu 同时维护 active class 与 aria-checked；两者都覆盖，
   让键盘、鼠标和重新渲染后的当前模式始终有清晰的选择反馈。 */
body.theme-grok .model-menu .grok-mode-item.active,
body.theme-grok .model-menu .grok-configured-model.active,
body.theme-grok .model-menu .grok-mode-item[aria-checked="true"],
body.theme-grok .model-menu .grok-configured-model[aria-checked="true"] {
  background: var(--item-active);
  color: var(--fg);
}
body.theme-grok .grok-mode-item[aria-checked="true"] .mi-check {
  margin-left: auto;
  color: var(--fg);
  font-weight: 700;
}
body.theme-grok .model-menu .grok-mode-item.active .mi-check,
body.theme-grok .model-menu .grok-configured-model.active .mi-check {
  color: var(--fg);
  font-weight: 700;
}
/* Grok 的复制、赞踩、朗读、重试和更多动作是可操作按钮，不使用
   其它 provider 的强调色；done 状态保留为本地复制成功反馈。 */
body.theme-grok .msg-actions .msg-action-btn {
  border-radius: 7px;
  color: var(--fg-dim);
}
body.theme-grok .msg-actions .msg-action-btn:hover,
body.theme-grok .msg-actions .msg-action-btn:focus-visible {
  background: var(--item-hover);
  color: var(--fg);
}
body.theme-grok .msg-actions .msg-action-btn.done {
  background: var(--item-active);
  color: var(--fg);
}
body.theme-grok #stop-btn {
  background: var(--send-bg);
  color: var(--send-fg);
  box-shadow: 0 0 0 2px var(--item-hover);
}
body.theme-grok #stop-btn:hover { opacity: .86; }
body.theme-grok .grok-add-menu .add-menu-item:focus-visible,
body.theme-grok .grok-mode-item:focus-visible,
body.theme-grok .grok-automation-suggestions button:focus-visible,
body.theme-grok .grok-settings-action:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
body.theme-grok .grok-history-all-btn:focus-visible,
body.theme-grok .session-title-bar:focus-visible,
body.theme-grok .grok-header-action:focus-visible,
body.theme-grok .composer-model-btn:focus-visible,
body.theme-grok .grok-search-layer .claude-search-close:focus-visible,
body.theme-grok .grok-search-layer .claude-search-actions-btn:focus-visible,
body.theme-grok .grok-search-layer .claude-search-result:focus-visible,
body.theme-grok .session-context-menu button:focus-visible,
body.theme-grok .message-context-menu button:focus-visible,
body.theme-grok .grok-imagine-tabs button:focus-visible,
body.theme-grok .grok-imagine-template:focus-visible,
body.theme-grok .grok-imagine-material button:focus-visible,
body.theme-grok .grok-voice-mode-controls button:focus-visible {
  background: var(--item-hover);
  color: var(--fg);
  outline: 2px solid var(--fg) !important;
  outline-offset: 2px;
}
body.theme-grok .grok-settings-row select:focus-visible,
body.theme-grok .grok-report-layer textarea:focus-visible,
body.theme-grok .grok-imagine-modal select:focus-visible,
body.theme-grok .grok-imagine-modal textarea:focus-visible {
  outline: 2px solid var(--fg) !important;
  outline-offset: 2px;
}

body.theme-grok [role="radio"],
body.theme-grok [role="menuitemradio"] {
  border: 1px solid transparent;
}
body.theme-grok [role="radio"]:focus-visible,
body.theme-grok [role="menuitemradio"]:focus-visible {
  border-color: var(--fg);
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
body.theme-grok [role="radio"][aria-checked="true"],
body.theme-grok [role="menuitemradio"][aria-checked="true"] {
  border-color: var(--fg-dim);
  background: var(--item-active);
  color: var(--fg);
}

/* ---- Grok 交互壳：附件子菜单、弹层和触控尺寸 ----
   Grok 的菜单由共享运行时动态创建，这里只收紧 Grok 作用域，避免
   Claude 的橙色/浅色规则把“上传、技能、连接器”渲染成看似不可用。 */
body.theme-grok .grok-add-menu,
body.theme-grok .grok-add-menu + .add-submenu,
body.theme-grok .add-submenu {
  border-color: var(--border);
  background: var(--bg-menu);
  color: var(--fg);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
}
body.theme-grok .grok-automation-fields {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 10px;
  margin: 0 0 12px; padding: 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-main);
}
body.theme-grok .grok-automation-fields .dialog-input-label { margin: 0; }
body.theme-grok .grok-automation-fields select { min-width: 0; }
body.theme-grok .grok-add-menu {
  box-sizing: border-box;
  min-width: min(226px, calc(100vw - 16px));
  max-width: min(300px, calc(100vw - 16px));
  max-height: min(470px, calc(100vh - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.theme-grok .grok-add-menu .add-menu-item,
body.theme-grok .add-submenu .add-submenu-item {
  min-height: 38px;
  color: var(--fg);
}
body.theme-grok .grok-add-menu .add-menu-item:hover,
body.theme-grok .grok-add-menu .add-menu-item:focus-visible,
body.theme-grok .add-submenu .add-submenu-item:hover,
body.theme-grok .add-submenu .add-submenu-item:focus-visible {
  background: var(--item-hover);
  color: var(--fg);
}
body.theme-grok .grok-add-menu .add-menu-icon,
body.theme-grok .grok-add-menu .add-menu-right,
body.theme-grok .add-submenu .add-menu-right {
  color: var(--fg-dim);
}
body.theme-grok .grok-add-menu .add-menu-divider,
body.theme-grok .add-submenu .add-menu-divider {
  background: var(--border);
}
body.theme-grok .grok-add-menu + .add-submenu,
body.theme-grok .add-submenu {
  box-sizing: border-box;
  max-width: min(300px, calc(100vw - 16px));
  max-height: min(430px, calc(100vh - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.theme-grok .model-menu {
  box-sizing: border-box;
  min-width: min(310px, calc(100vw - 20px));
  width: min(330px, calc(100vw - 20px));
  max-width: calc(100vw - 20px);
  max-height: min(440px, calc(100vh - 120px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-color: var(--border);
  background: var(--bg-menu);
  color: var(--fg);
}
/* 输入框模型选择菜单：已有对话时向上弹出，新对话时向下弹出 */
body.theme-grok #model-menu-2,
body.theme-grok .composer-picker .model-menu {
  top: auto;
  bottom: calc(100% + 8px);
  left: auto;
  right: 0;
  z-index: 100;
  max-height: min(420px, calc(100vh - 180px));
}

body.empty-chat.theme-grok #model-menu-2,
body.empty-chat.theme-grok .composer-picker .model-menu {
  top: calc(100% + 8px);
  bottom: auto;
  left: auto;
  right: 0;
  max-height: min(440px, calc(100vh - 120px));
}
body.theme-grok .model-menu .grok-configured-model {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 8px 12px;
  min-height: 38px;
  border-radius: 9px;
  width: 100%;
  box-sizing: border-box;
}
body.theme-grok .model-menu .grok-configured-model .mi-body {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  flex: 1;
  min-width: 0;
}
body.theme-grok .model-menu .grok-configured-model .mi-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  margin-right: auto;
}
body.theme-grok .model-menu .grok-configured-model .mi-check {
  margin-left: auto;
  flex-shrink: 0;
}
body.theme-grok .model-menu::-webkit-scrollbar {
  width: 5px;
}
body.theme-grok .model-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}
html[data-theme="light"] body.theme-grok .model-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
}
body.theme-grok .grok-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 2px 2px 6px;
}
body.theme-grok .grok-mode-grid .grok-mode-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  min-height: 52px;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
body.theme-grok .grok-mode-grid .grok-mode-item:hover,
body.theme-grok .grok-mode-grid .grok-mode-item:focus-visible {
  background: var(--item-hover);
  border-color: var(--border-strong, #888);
}
body.theme-grok .grok-mode-grid .grok-mode-item.active,
body.theme-grok .grok-mode-grid .grok-mode-item[aria-checked="true"] {
  background: var(--item-active);
  border-color: var(--fg);
}
body.theme-grok .grok-mode-grid .grok-mode-item .mi-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
body.theme-grok .grok-mode-grid .grok-mode-item .mi-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg);
}
body.theme-grok .grok-mode-grid .grok-mode-item .mi-sub {
  font-size: 11px;
  line-height: 1.35;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 118px;
}
body.theme-grok .grok-mode-grid .grok-mode-item .mi-check {
  position: absolute;
  top: 7px;
  right: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg);
  margin-left: 0;
}
body.theme-grok .model-menu .model-item {
  min-height: 42px;
  color: var(--fg);
  text-align: left;
}
body.theme-grok .model-menu .model-item:hover,
body.theme-grok .model-menu .model-item:focus-visible {
  background: var(--item-hover);
  color: var(--fg);
}
body.theme-grok .model-menu .model-item[aria-checked="true"]:focus-visible,
body.theme-grok .model-menu .model-item.active:focus-visible {
  background: var(--item-active);
}
body.theme-grok .model-menu .mi-sub,
body.theme-grok .model-menu .grok-model-menu-heading,
body.theme-grok .model-menu .grok-model-menu-empty {
  color: var(--fg-dim);
}

body.theme-grok .grok-report-layer .modal,
body.theme-grok .grok-settings-layer .modal,
body.theme-grok .grok-shortcuts-layer .modal {
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--fg);
}
body.theme-grok .grok-report-layer .tip,
body.theme-grok .grok-settings-layer .tip {
  color: var(--fg-dim);
}
body.theme-grok .grok-report-layer textarea {
  border-color: var(--border);
  background: var(--bg-main);
  color: var(--fg);
}
body.theme-grok .grok-report-layer textarea:focus {
  border-color: var(--fg-dim);
}
body.theme-grok .grok-imagine-modal button:focus-visible,
body.theme-grok .grok-imagine-modal select:focus-visible,
body.theme-grok .grok-report-layer button:focus-visible,
body.theme-grok .grok-report-layer textarea:focus-visible {
  outline: 2px solid var(--fg) !important;
  outline-offset: 2px;
}

@media (hover: none), (pointer: coarse) {
  body.theme-grok .grok-add-menu .add-menu-item,
  body.theme-grok .add-submenu .add-submenu-item,
  body.theme-grok .model-menu .model-item,
  body.theme-grok .session-context-menu button,
  body.theme-grok .message-context-menu button,
  body.theme-grok .grok-report-reasons button,
  body.theme-grok .grok-settings-action,
  body.theme-grok .grok-voice-mode-controls button {
    min-height: 44px;
  }
  body.theme-grok .grok-search-layer .claude-search-close,
  body.theme-grok .grok-search-layer .claude-search-actions-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  body.theme-grok .modal-layer {
    align-items: flex-start;
    overflow-y: auto;
    padding: 12px;
  }
  body.theme-grok .modal-layer > .modal { margin: 0 auto; }
  body.theme-grok .grok-search-layer { padding: 12px; }
  body.theme-grok .grok-search-layer .claude-search-dialog {
    width: 100%; max-height: calc(100dvh - 24px);
  }
  body.theme-grok .grok-voice-mode-controls {
    align-items: stretch;
    flex-direction: column;
    width: calc(100% - 20px);
  }
  body.theme-grok .grok-voice-mode-controls > div {
    justify-content: flex-end;
  }
  body.theme-grok .grok-search-layer .claude-search-hints {
    flex-wrap: wrap;
  }
  body.theme-grok .grok-automation-fields { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  body.theme-grok .composer-wrap {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  /* 移动端对齐官方图3：双层卡片流式布局 */
  body.theme-grok .composer {
    border-radius: 26px;
    padding: 12px 14px 10px;
  }
  body.theme-grok .composer-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
  }
  body.theme-grok .composer-grid textarea {
    order: 1;
    width: 100%;
    flex: 1 1 100%;
    min-height: 38px;
    padding: 4px 2px 8px;
    font-size: 16px;
  }
  body.theme-grok .composer-grid .attach-btn {
    order: 2;
    margin: 0;
  }
  body.theme-grok .composer-picker {
    order: 3;
    margin-left: auto;
    max-width: 120px;
  }
  body.theme-grok .composer-model-btn {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--fg);
    white-space: nowrap;
  }
  body.theme-grok .composer-model-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.theme-grok .composer-grid .mic-area {
    order: 4;
  }
  body.theme-grok .composer-grid #send-btn,
  body.theme-grok .composer-grid #stop-btn {
    order: 5;
  }
}

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

@media (forced-colors: active) {
  body.theme-grok [role="radio"],
  body.theme-grok [role="menuitemradio"] {
    border: 1px solid ButtonText;
  }
  body.theme-grok [role="radio"][aria-checked="true"],
  body.theme-grok [role="menuitemradio"][aria-checked="true"] {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }
  body.theme-grok .grok-search-layer {
    background: Canvas;
    color: CanvasText;
  }
  body.theme-grok .grok-add-menu,
  body.theme-grok .add-submenu,
  body.theme-grok .model-menu,
  body.theme-grok .session-context-menu,
  body.theme-grok .message-context-menu,
  body.theme-grok .grok-search-layer .claude-search-dialog,
  body.theme-grok .grok-search-layer .claude-search-actions-menu,
  body.theme-grok .grok-imagine-modal,
  body.theme-grok .grok-report-layer .modal,
  body.theme-grok .grok-settings-layer .modal,
  body.theme-grok .grok-shortcuts-layer .modal,
  body.theme-grok .grok-voice-mode-controls,
  body.theme-grok .modal-project-form,
  body.theme-grok .modal-project-form .project-form-files,
  body.theme-grok .modal-layer .settings-action-row,
  body.theme-grok .gemini-schedule-row {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
  }
  body.theme-grok .grok-add-menu .add-menu-item,
  body.theme-grok .add-submenu .add-submenu-item,
  body.theme-grok .model-menu .model-item,
  body.theme-grok .session-context-menu button,
  body.theme-grok .message-context-menu button,
  body.theme-grok .grok-search-layer .claude-search-result,
  body.theme-grok .grok-search-layer .claude-search-close,
  body.theme-grok .grok-search-layer .claude-search-actions-btn,
  body.theme-grok .grok-imagine-tabs button,
  body.theme-grok .grok-imagine-template,
  body.theme-grok .grok-imagine-material button,
  body.theme-grok .grok-settings-action,
  body.theme-grok .grok-voice-mode-controls button,
  body.theme-grok .modal-project-form .project-form-file-row .btn-secondary,
  body.theme-grok .modal-layer .settings-action-row,
  body.theme-grok .gemini-schedule-row button {
    background: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }
  body.theme-grok .grok-search-layer .claude-search-input-wrap,
  body.theme-grok .grok-imagine-options select,
  body.theme-grok .grok-imagine-modal textarea,
  body.theme-grok .grok-imagine-material,
  body.theme-grok .grok-settings-row select,
  body.theme-grok .grok-settings-row input.grok-settings-readonly,
  body.theme-grok .grok-report-layer textarea,
  body.theme-grok .modal-project-form input,
  body.theme-grok .modal-project-form textarea {
    background: Field;
    color: FieldText;
    border-color: CanvasText;
  }
  body.theme-grok .grok-imagine-tabs { background: Canvas; border-color: CanvasText; }
  body.theme-grok .grok-model-menu-heading,
  body.theme-grok .grok-model-menu-empty,
  body.theme-grok .grok-imagine-material-empty { color: CanvasText; }
  body.theme-grok .grok-add-menu .add-menu-item:hover,
  body.theme-grok .grok-add-menu .add-menu-item:focus-visible,
  body.theme-grok .add-submenu .add-submenu-item:hover,
  body.theme-grok .add-submenu .add-submenu-item:focus-visible,
  body.theme-grok .model-menu .model-item:hover,
  body.theme-grok .model-menu .model-item:focus-visible,
  body.theme-grok .model-menu .model-item[aria-checked="true"],
  body.theme-grok .session-context-menu button:hover,
  body.theme-grok .session-context-menu button:focus-visible,
  body.theme-grok .message-context-menu button:hover,
  body.theme-grok .message-context-menu button:focus-visible,
  body.theme-grok .grok-search-layer .claude-search-result:hover,
  body.theme-grok .grok-search-layer .claude-search-result:focus-visible,
  body.theme-grok .grok-imagine-tabs button:focus-visible,
  body.theme-grok .grok-imagine-template:focus-visible,
  body.theme-grok .grok-imagine-material button:focus-visible,
  body.theme-grok .grok-settings-action:focus-visible,
  body.theme-grok .grok-voice-mode-controls button:focus-visible,
  body.theme-grok .modal-layer .settings-action-row:focus-visible,
  body.theme-grok .gemini-schedule-row button:focus-visible,
  body.theme-grok .modal-project-form .project-form-file-row .btn-secondary:focus-visible {
    background: Highlight;
    color: HighlightText;
  }
  body.theme-grok .grok-report-layer textarea {
    background: Field;
    color: FieldText;
    border-color: CanvasText;
  }
  body.theme-grok .grok-add-menu .add-menu-item:focus-visible,
  body.theme-grok .add-submenu .add-submenu-item:focus-visible,
  body.theme-grok .model-menu .model-item:focus-visible,
  body.theme-grok .session-context-menu button:focus-visible,
  body.theme-grok .message-context-menu button:focus-visible,
  body.theme-grok .grok-search-layer .claude-search-result:focus-visible,
  body.theme-grok .grok-search-layer .claude-search-close:focus-visible,
  body.theme-grok .grok-search-layer .claude-search-actions-btn:focus-visible,
  body.theme-grok .grok-imagine-tabs button:focus-visible,
  body.theme-grok .grok-imagine-template:focus-visible,
  body.theme-grok .grok-imagine-material button:focus-visible,
  body.theme-grok .grok-settings-action:focus-visible,
  body.theme-grok .grok-voice-mode-controls button:focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
    box-shadow: none !important;
  }
  body.theme-grok .grok-search-layer .claude-search-input-wrap:focus-within,
  body.theme-grok .grok-imagine-modal textarea:focus-visible,
  body.theme-grok .grok-imagine-modal select:focus-visible,
  body.theme-grok .grok-settings-row select:focus-visible,
  body.theme-grok .grok-report-layer textarea:focus-visible,
  body.theme-grok .modal-project-form input:focus-visible,
  body.theme-grok .modal-project-form textarea:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: Highlight !important;
  }
}

/* Official Grok wait: a high-contrast mono pulse. */
body.theme-grok .waiting-grok {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg);
  animation: grok-waiting-pulse 900ms infinite cubic-bezier(.4, 0, .2, 1);
}
body.theme-grok .waiting-elapsed {
  font-size: 12px;
  color: var(--fg);
  opacity: .72;
}
html[data-theme="dark"] body.theme-grok .waiting-grok { background: #f5f5f5; }
html[data-theme="light"] body.theme-grok .waiting-grok { background: #0a0a0a; }
@keyframes grok-waiting-pulse {
  0%, 100% { opacity: .22; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-grok .waiting-grok { animation: none; opacity: 1; transform: none; }
}