.settings-backdrop, .search-backdrop, .recent-backdrop {
  position: fixed; inset: 0; z-index: 8;
  background: rgba(15, 23, 42, 0.26);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.settings-backdrop.open, .search-backdrop.open, .recent-backdrop.open { opacity: 1; pointer-events: auto; }
.search-panel, .recent-panel {
  position: fixed; top: max(72px, calc(env(safe-area-inset-top) + 48px)); left: 50%; z-index: 9;
  width: min(720px, calc(100vw - 28px)); max-height: min(680px, calc(var(--app-height, 100dvh) - 96px));
  display: grid; grid-template-rows: auto auto auto auto auto minmax(0, 1fr); gap: 10px;
  padding: 16px; border: 1px solid var(--border); border-radius: 24px;
  background: var(--panel-solid); box-shadow: var(--shadow);
  transform: translate(-50%, -10px) scale(.98); opacity: 0; pointer-events: none; transition: transform .16s ease, opacity .16s ease;
  overflow: hidden;
}
.search-panel.open { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
.recent-panel { grid-template-rows: auto auto auto minmax(0, 1fr) auto; width: min(660px, calc(100vw - 28px)); }
.recent-panel.open { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
.search-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.search-header strong { display: block; font-size: 16px; }
.search-header small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.recent-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.recent-header strong { display: block; font-size: 16px; }
.recent-header small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.search-input { width: 100%; border: 1px solid var(--border); border-radius: 16px; padding: 13px 15px; background: var(--panel); color: var(--text); outline: none; font: inherit; font-size: 16px; }
.search-input:focus { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
.search-scope-toggle { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: var(--muted); font-size: 12px; font-weight: 750; user-select: none; }
.search-scope-toggle input { width: 15px; height: 15px; accent-color: var(--accent); }
.search-scope-toggle input:disabled + span { opacity: .55; }
.search-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.search-filters button { border: 1px solid var(--border); border-radius: 999px; padding: 7px 10px; background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 800; }
.search-filters button.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid)); }
.search-status { min-height: 16px; color: var(--muted); font-size: 12px; }
.search-results { min-height: 0; overflow: auto; display: grid; gap: 6px; padding-right: 2px; }
.recent-controls { display: grid; gap: 8px; }
.recent-type-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.recent-type-tabs button, .recent-more-btn { border: 1px solid var(--border); border-radius: 999px; padding: 7px 10px; background: color-mix(in srgb, var(--panel) 74%, transparent); color: var(--muted); font-size: 12px; font-weight: 850; white-space: nowrap; }
.recent-type-tabs button.active, .recent-type-tabs button:hover, .recent-type-tabs button:focus-visible, .recent-more-btn[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid)); outline: none; }
.recent-more-btn { justify-self: start; }
.recent-advanced { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--muted); font-size: 12px; }
.recent-advanced.hidden { display: none; }
.recent-advanced label { display: inline-flex; align-items: center; gap: 6px; }
.recent-advanced select { border: 1px solid var(--border); border-radius: 10px; padding: 4px 7px; background: var(--panel-solid); color: var(--text); }
.recent-status { min-height: 16px; color: var(--muted); font-size: 12px; }
.recent-list { min-height: 0; overflow: auto; display: grid; gap: 8px; padding-right: 2px; }
.recent-empty { border: 1px dashed var(--border); border-radius: 17px; padding: 16px; color: var(--muted); font-size: 13px; text-align: center; }
.recent-item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 17px; padding: 11px 12px; background: color-mix(in srgb, var(--panel) 74%, transparent); color: var(--text); text-align: left; }
.recent-item:hover, .recent-item:focus-visible { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--panel-solid)); outline: none; }
.recent-item-main { min-width: 0; display: grid; gap: 5px; }
.recent-title-row { min-width: 0; display: flex; align-items: center; gap: 8px; }
.recent-title-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.recent-meta-row { min-width: 0; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.recent-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.recent-space-badge { max-width: 150px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 7px; background: color-mix(in srgb, var(--recent-space-color, var(--accent)) 12%, var(--panel-solid)); color: color-mix(in srgb, var(--recent-space-color, var(--accent)) 72%, var(--text)); font-size: 11px; font-weight: 850; }
.recent-space-badge::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--recent-space-color, var(--accent)); flex: 0 0 auto; }
.recent-space-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-run-label, .recent-type-label { flex: 0 0 auto; border-radius: 999px; padding: 3px 7px; background: color-mix(in srgb, var(--accent) 12%, var(--panel-solid)); color: var(--accent); font-size: 11px; font-weight: 850; white-space: nowrap; }
.recent-type-label { background: color-mix(in srgb, var(--muted) 10%, var(--panel-solid)); color: var(--muted); }
.recent-time { color: var(--muted); font-size: 11px; font-weight: 800; white-space: nowrap; }
.recent-assistant-hint { border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 15px; padding: 10px 12px; color: var(--muted); background: color-mix(in srgb, var(--accent) 6%, var(--panel-solid)); font-size: 12px; line-height: 1.35; }
.search-result { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; border: 1px solid var(--border); border-radius: 14px; padding: 9px 10px; background: color-mix(in srgb, var(--panel) 74%, transparent); color: var(--text); text-align: left; }
.search-result:hover, .search-result:focus-visible { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--panel-solid)); outline: none; }
.search-result-icon { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--accent) 11%, var(--panel-solid)); color: var(--accent); font-size: 13px; }
.search-result-main { min-width: 0; display: grid; gap: 4px; }
.search-result-title-line { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.search-result-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.search-result-time { color: var(--muted); font-size: 11px; font-weight: 750; white-space: nowrap; }
.search-result-match { flex: 0 0 auto; border-radius: 999px; padding: 2px 6px; background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid)); color: var(--accent); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.search-result-snippet { min-width: 0; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; white-space: normal; font-size: 12px; line-height: 1.38; }
.search-result-hit { background: transparent; color: var(--text); font-weight: 900; padding: 0; }
.search-result-type { display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px; flex-wrap: wrap; color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .03em; }
.search-result-kind-label, .search-result-score-label { border-radius: 999px; padding: 3px 7px; background: color-mix(in srgb, var(--muted) 10%, var(--panel-solid)); color: var(--muted); }
.search-result-space-badge { max-width: 150px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 7px; background: color-mix(in srgb, var(--search-result-space-color, var(--accent)) 12%, var(--panel-solid)); color: color-mix(in srgb, var(--search-result-space-color, var(--accent)) 72%, var(--text)); text-transform: none; letter-spacing: 0; }
.search-result-space-badge::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--search-result-space-color, var(--accent)); flex: 0 0 auto; }
.settings-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 9;
  width: min(420px, 100vw); padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: var(--panel-solid); border-left: 1px solid var(--border); box-shadow: var(--shadow);
  transform: translateX(105%); transition: transform .2s ease;
  box-sizing: border-box; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.settings-panel, .settings-panel * { box-sizing: border-box; min-width: 0; }
.settings-panel.open { transform: translateX(0); }
.settings-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; margin-bottom: 18px; }
#settingsSignOutBtn { margin-right: 8px; }
.settings-debug-warning { display: grid; gap: 4px; margin: -4px 0 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 50%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--danger, #ef4444) 10%, var(--panel-solid)); color: var(--text); box-shadow: inset 3px 0 0 var(--danger, #ef4444); }
.settings-debug-warning strong { color: var(--danger, #ef4444); font-size: 13px; }
.settings-debug-warning span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.settings-title { font-weight: 750; letter-spacing: -0.02em; }
.settings-email { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-accordion { display: grid; gap: 0; margin-inline: -18px; border-top: 1px solid var(--border); }
.settings-accordion-btn {
  width: 100%; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 13px 18px;
  background: color-mix(in srgb, var(--bg) 72%, var(--panel-solid));
  color: var(--text); text-align: left; font-weight: 750;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.settings-accordion-btn strong { display: block; font-size: 14px; }
.settings-accordion-btn small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; margin-top: 2px; }
.settings-chevron { color: var(--muted); font-size: 20px; line-height: 1; }
.settings-accordion-btn:hover { background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.settings-accordion-btn[aria-expanded="true"] {
  border-left: 4px solid var(--accent); padding-left: 14px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid));
}
.settings-accordion-btn[aria-expanded="true"] .settings-chevron { color: var(--accent); }
.settings-accordion-panel { display: grid; gap: 16px; padding: 14px 18px 18px; border-bottom: 1px solid var(--border); }
.settings-form { display: grid; gap: 10px; }
.settings-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 650; }
.settings-form input { width: 100%; border: 1px solid var(--border); border-radius: 13px; padding: 10px 12px; color: var(--text); background: var(--panel); outline: none; }
.settings-toggle, .settings-field { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--text); max-width: 100%; }
.settings-toggle > span, .settings-field > span { min-width: 0; overflow-wrap: anywhere; }
.settings-toggle strong, .settings-field strong { display: block; font-size: 14px; }
.settings-toggle small, .settings-field small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; margin-top: 2px; }
.settings-toggle input { width: 22px; height: 22px; accent-color: var(--accent); flex: 0 0 auto; }
.settings-field select { min-width: 0; width: min(180px, 48%); max-width: 100%; flex: 0 1 180px; border: 1px solid var(--border); border-radius: 13px; padding: 10px 12px; color: var(--text); background: var(--panel); outline: none; }
.settings-help { margin: 0; color: var(--muted); font-size: 12px; }
.settings-status { min-height: 18px; color: var(--muted); font-size: 13px; }
.global-material-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.global-material-section { display: grid; gap: 8px; }
.global-material-section h3 { margin: 0; color: var(--text); font-size: 13px; letter-spacing: -0.01em; }
.global-material-list { display: grid; gap: 8px; }
.global-material-card { border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; background: color-mix(in srgb, var(--panel) 82%, var(--bg)); }
.global-material-card strong { display: block; color: var(--text); font-size: 13px; }
.global-material-card span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.global-material-card .material-pill { display: inline-flex; width: fit-content; margin-top: 6px; border-radius: 999px; padding: 2px 7px; background: color-mix(in srgb, var(--accent) 14%, var(--panel-solid)); color: color-mix(in srgb, var(--accent) 78%, var(--text)); font-size: 11px; font-weight: 800; }
.global-material-empty { color: var(--muted); font-size: 12px; border: 1px dashed var(--border); border-radius: 14px; padding: 10px 12px; }