@import url("clipboard-tokens.css");

.mi {
  font-family: "Material Symbols Rounded";
  font-size: var(--icon-md);
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}
.mi.filled { font-variation-settings: "FILL" 1; }
.mi.sm { font-size: var(--icon-sm); }
.mi.lg { font-size: var(--icon-lg); }
.mi.mid { vertical-align: middle; }

.main-view { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; }
.main-view.hidden { display: none; }
.sticky { flex-shrink: 0; background: var(--surface); padding-bottom: var(--sp-2); z-index: 10; position: relative; }
.sticky header { display: flex; align-items: center; padding: var(--sp-4) var(--sp-4) 0 var(--sp-7); gap: var(--sp-3); -webkit-app-region: drag; }
.sticky header button { -webkit-app-region: no-drag; }
.count { font-size: var(--fs-2); color: var(--text-dim); flex: 1; }
.close-btn { font-size: var(--fs-6); font-weight: bold; font-family: system-ui; line-height: 1; }
.icon-btn { background: none; border: none; border-radius: var(--r-1); color: var(--text-dim); cursor: pointer;
            width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: all var(--dur) var(--ease); padding: 0; }
.icon-btn:hover { color: var(--text); background: var(--hover); }
.icon-btn.accent:hover { color: var(--accent); }
.icon-btn.danger:hover { color: var(--red); }
.icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.icon-btn:disabled:hover { color: var(--text-dim); background: none; }
.icon-btn .mi { font-size: var(--icon-md); }
.search-row { display: flex; align-items: stretch; margin: var(--sp-4) var(--sp-7) var(--sp-2); background: var(--input); border: 1px solid var(--line); border-radius: var(--r-1); transition: border-color var(--dur) var(--ease); }
.search-row:focus-within { border-color: var(--accent); }
.search { flex: 1; background: transparent; border: none; padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-5); color: var(--text); font-size: var(--fs-4); outline: none; font-family: inherit; min-width: 0; }
.search::placeholder { color: var(--text-dim); }
.search-btns { display: flex; align-items: center; gap: 1px; padding-right: var(--sp-2); }
.search-clear { display: none; }
.search-clear.show { display: flex; }
.rx-btn { font-family: var(--font-mono); font-size: var(--fs-3); }
.rx-btn.active { color: var(--accent); background: var(--accent-bg); }
.rx-btn.active:hover { color: var(--accent); background: var(--accent-bg-strong); }
.ai-btn.active { color: var(--accent); background: var(--accent-bg); }
.ai-btn.active:hover { color: var(--accent); background: var(--accent-bg-strong); }
/* Best⇄Recent override: only shown while a query is present (default = Best). */
.sort-btn { display: none; }
.sort-btn.show { display: flex; }
.sort-btn.active { color: var(--accent); background: var(--accent-bg); }
/* AI mode: syntax buttons make no sense for a natural-language question. */
.search-row.ai .rx-btn, .search-row.ai .sort-btn { display: none; }
/* AI status line under the search row: offline-ranking hint / agent progress /
   result summary. Shimmers while the agent is running. */
.ai-status { margin: 0 var(--sp-7); padding: var(--sp-1) var(--sp-5) 0; font-size: var(--fs-2); color: var(--text-dim); }
.ai-status.hidden { display: none; }
.ai-status.running { background: linear-gradient(90deg, var(--text-dim) 30%, var(--text) 50%, var(--text-dim) 70%);
                     background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
                     -webkit-text-fill-color: transparent; animation: ai-shimmer 1.4s linear infinite; }
@keyframes ai-shimmer { from { background-position: 200% 0; } to { background-position: 0% 0; } }

/* Live query-syntax highlight: a colored backdrop mirror UNDER a transparent input. The
   two must share identical text metrics (font/size/padding/line-height) so glyphs align. */
.search-hl { position: absolute; inset: 0; padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-5);
             font-size: var(--fs-4); font-family: inherit; line-height: normal; color: var(--text);
             white-space: pre; overflow: hidden; pointer-events: none; z-index: 0; border: none;
             display: flex; align-items: center; }
.search-live { position: relative; z-index: 1; background: transparent; -webkit-text-fill-color: transparent; caret-color: var(--text); }
.qh-prefix { color: var(--accent); font-weight: 600; }
.qh-neg { color: var(--red, #e5534b); font-weight: 700; }
.qh-value { color: var(--text); }
.qh-regex { color: var(--green); }
.qh-quote { color: var(--text-dim); }
.qh-unknown { color: var(--red, #e5534b); text-decoration: underline dotted; text-underline-offset: 2px; }
.qh-ws { color: transparent; }

/* Autocomplete dropdown for the token being typed. */
/* .search-suggest shares the floating-surface bg/shadow/radius rule above; only its
   positioning + scroll live here. */
.search-suggest { position: absolute; top: calc(100% + 4px); left: var(--sp-5); right: var(--sp-2); z-index: 40;
                  overflow: hidden; max-height: 240px; overflow-y: auto; }
.search-suggest.hidden { display: none; }
.search-suggest-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
                       padding: var(--sp-2) var(--sp-3); border-radius: var(--r-1); cursor: pointer; font-size: var(--fs-3); }
.search-suggest-item .ss-text { color: var(--text); font-family: var(--font-mono); }
.search-suggest-item .ss-hint { color: var(--text-dim); font-size: var(--fs-2); }
.search-suggest-item.active, .search-suggest-item:hover { background: var(--menu-hover); }

.group-filters { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-7) var(--sp-1); flex-wrap: wrap; overflow: visible; position: relative; z-index: 30; }
/* Tags are FLAT by default — no outline/background until hover (subtle fill) or active
   (accent fill). Group tags read accent-tinted in BOTH the header bar and on clips so a
   group looks identical everywhere (the .group-tag class is shared by both). */
.filter-tag { min-height: 20px; max-width: 170px; box-sizing: border-box; font-size: var(--fs-3); padding: 0 var(--sp-3); border-radius: var(--r-4); border: 1px solid transparent;
              background: transparent; color: var(--text-dim); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); line-height: 1; position: relative;
              display: inline-flex; align-items: center; gap: var(--sp-1); vertical-align: top; }
.filter-tag.icon-filter { min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
                          padding: 0 var(--sp-2); border-color: transparent; border-style: solid; border-radius: var(--r-1); font-size: var(--fs-5); font-weight: 800; }
.filter-tag.icon-filter .mi { font-size: var(--icon-lg); font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 20; }
.filter-tag.group-tag { color: var(--accent); }
.filter-tag:hover { background: var(--hover); color: var(--text); border-color: transparent; }
.filter-tag.active { background: var(--accent); color: var(--active-fg); border-color: var(--accent); }
.filter-tag.excluded { color: var(--text-dim); text-decoration: line-through; text-decoration-thickness: 1px; opacity: .7; }
.filter-tag.icon-filter:hover { background: var(--hover); border-color: transparent; color: var(--text); }
.filter-tag.icon-filter.active { background: transparent; border-color: transparent; color: var(--accent); }
.filter-tag.icon-filter.excluded { background: transparent; border-color: transparent; color: var(--text-dim); opacity: .55; }
.filter-tag.clear-filter { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; color: var(--text-dim); background: transparent; }
.filter-tag.clear-filter:hover { color: var(--text); background: var(--hover); }
.filter-tag .gtag-x { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 14px; margin-left: 0; margin-right: -2px; color: var(--text-dim); font-size: var(--fs-3);
                      width: 14px; height: 14px; line-height: 14px; text-align: center; border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.filter-tag:hover .gtag-x, .tag-menu-node:hover > .filter-tag .gtag-x { opacity: 1; }
.filter-tag .gtag-x:hover { color: var(--text); background: var(--hover); }
.filter-tag.active .gtag-x { color: color-mix(in srgb, var(--active-fg) 55%, transparent); }
.filter-tag.active .gtag-x:hover { color: var(--active-fg); background: color-mix(in srgb, var(--active-fg) 22%, transparent); }
/* Borders OFF: group tags become FILLED chips (light solid bg, no outline)
   rather than outlined chips. Icon builtins + submenu items keep their look. */
:root[data-borders="borderless"] .filter-tag:not(.icon-filter),
.bc-popup[data-borders="borderless"] .filter-tag:not(.icon-filter) {
  border-color: transparent;
  background: color-mix(in srgb, var(--text) 11%, transparent);
}
:root[data-borders="borderless"] .tag-submenu .filter-tag,
.bc-popup[data-borders="borderless"] .tag-submenu .filter-tag { background: transparent; }
:root[data-borders="borderless"] .filter-tag.active,
.bc-popup[data-borders="borderless"] .filter-tag.active { background: var(--accent); }

.list { flex: 1; overflow-y: auto; padding: 0 0 var(--sp-4); min-height: 0; scrollbar-width: var(--list-scrollbar-width, none); scrollbar-color: var(--list-scrollbar-thumb, transparent) transparent; }
.list::-webkit-scrollbar { width: var(--list-scrollbar-size, 0); }
.list::-webkit-scrollbar-track { background: transparent; }
.list::-webkit-scrollbar-thumb { background: var(--list-scrollbar-thumb, transparent); border-radius: var(--r-3); border: var(--list-scrollbar-border, 0); }
.list::-webkit-scrollbar-thumb:hover { background: var(--list-scrollbar-thumb-hover, var(--list-scrollbar-thumb, transparent)); }
.item { padding: var(--sp-4) var(--sp-7); cursor: pointer; transition: background var(--dur) var(--ease); position: relative; border-bottom: 1px solid var(--line-soft); color: inherit; }
.item:hover, .item.selected { background: var(--surface2); }
.item.has-pin { border-left: 2px solid var(--pin); }
.item-row { display: flex; align-items: flex-start; gap: var(--sp-4); }
.pin-area { position: relative; flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-1); padding-top: var(--sp-1); }
.star { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: var(--icon-sm); padding: var(--sp-1); transition: color var(--dur) var(--ease); line-height: 1; }
.star .mi { font-size: var(--icon-lg); }
.star.active, .star:hover { color: var(--pin); }
/* ONE floating-surface definition for every popup panel — the in-row picker,
   hover submenus, and the "..."/bulk menus (dialogs already match) — so all
   menus read as a single system instead of three near-alike variants. */
.search-suggest, .numpad-picker, .tag-submenu, .bc-menu { background: var(--menu); border-radius: var(--r-2); padding: var(--sp-2);
                                         box-shadow: 0 8px 24px var(--shadow), 0 0 0 1px var(--menu-edge); }
.numpad-picker { display: none; position: absolute; top: 100%; left: -4px; z-index: 40; flex-direction: column; gap: var(--sp-1); overflow: visible; }
.pin-area:hover .numpad-picker { display: flex; }
/* Real numpad formation: 7 8 9 / 4 5 6 / 1 2 3 (renderNumpadButtons emits that
   order; the 3-column grid lays it out like the physical keypad). */
.np-row { display: grid; grid-template-columns: repeat(3, 22px); gap: var(--sp-1); justify-content: start; }
.np-btn { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-1); font-size: var(--fs-2);
          font-family: var(--font-mono); cursor: pointer; transition: all var(--dur) var(--ease); }
.np-btn.free { color: var(--accent); background: transparent; }
.np-btn.taken { color: var(--text); background: var(--line-strong); }
.np-btn.current { color: var(--green); background: var(--green-bg); font-weight: bold; }
.np-btn:hover { background: var(--menu-hover); color: var(--text); }
.gp-row { display: block; min-width: 150px; max-width: 220px; border-top: 1px solid var(--line); padding-top: var(--sp-1); }
.gp-btn { width: 100%; min-height: 22px; box-sizing: border-box; padding: 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); border-radius: var(--r-1); font-size: var(--fs-3);
          cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); white-space: nowrap; }
.gp-btn.virtual, .filter-tag.virtual { opacity: .82; font-style: italic; }
.tag-caret { flex: 0 0 auto; font-size: var(--icon-md); line-height: 1; opacity: .72; margin-left: auto; }
.filter-tag .tag-caret { margin-left: 1px; margin-right: -2px; }
.tag-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.tag-menu-node { position: relative; display: block; }
.group-filters > .tag-menu-node { display: inline-flex; }
.tag-submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 150px; max-width: 240px; z-index: 70; }
.tag-menu-node:hover > .tag-submenu, .tag-menu-node:focus-within > .tag-submenu { display: block; }
.tag-submenu .tag-submenu { top: -5px; left: calc(100% - 1px); }
.tag-submenu .tag-menu-node + .tag-menu-node, .gp-row > .tag-menu-node + .tag-menu-node { margin-top: var(--sp-1); }
.tag-submenu .filter-tag, .tag-submenu .gp-btn { width: 100%; justify-content: flex-start; }
.tag-submenu .filter-tag { max-width: none; border-color: transparent; border-radius: var(--r-1); }
.tag-submenu .filter-tag:hover { background: var(--menu-hover); border-color: transparent; }
.gp-row > .tag-menu-node > .tag-submenu { top: -4px; left: calc(100% - 1px); }
.gp-btn.assigned { color: var(--green); background: var(--green-bg); }
.gp-btn.available { color: var(--text-dim); background: transparent; }
.gp-btn:hover { background: var(--menu-hover); color: var(--text); }
.gp-btn.add-group { color: var(--accent); font-size: var(--fs-4); font-weight: bold; justify-content: center; }
.content { flex: 1; min-width: 0; }
.clip-title { font-size: var(--fs-3); line-height: 1.35; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: var(--sp-1); }
.clip-title + .preview { color: var(--text-dim); }
.preview { font-size: var(--fs-3); line-height: 1.5; color: var(--text); font-family: var(--font-mono); }
.preview.collapsed { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview.expanded { white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; background: var(--bg); border-radius: var(--r-2); padding: var(--sp-4); margin: var(--sp-1) 0; }
.preview img { max-width: 100%; max-height: 60px; border-radius: var(--r-1); object-fit: cover; }
.meta { margin-top: var(--sp-1); font-size: var(--fs-1); color: var(--text-dim); display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
.numpad-tag { color: var(--green); }
.group-tag { color: var(--accent); }
.actions { display: flex; align-items: center; gap: 1px; flex-shrink: 0; opacity: 0; transition: opacity var(--dur) var(--ease); }
.item:hover .actions { opacity: 1; }
.empty { text-align: center; color: var(--text-dim); padding: 60px 0; font-size: var(--fs-4); }

.settings-view { display: none; flex-direction: column; height: 100%; color: var(--text); background: var(--surface); }
.settings-view.show { display: flex; }
.settings-hdr { display: flex; align-items: center; padding: var(--sp-4); gap: var(--sp-3); border-bottom: 1px solid var(--line); }
.settings-hdr h2 { font-size: var(--fs-5); font-weight: 500; flex: 1; margin: 0; color: var(--text); }
.settings-note { color: var(--text-dim); font-size: var(--fs-1); letter-spacing: .08em; text-transform: uppercase; }
.settings-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-6) var(--sp-7); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-4) 0; color: var(--text); font-size: var(--fs-3); }
.setting-row label { font-size: var(--fs-3); color: var(--text); }
.setting-row input { width: 80px; background: var(--input); border: 1px solid var(--line); border-radius: var(--r-1); padding: var(--sp-3) var(--sp-4); color: var(--text); font-size: var(--fs-3); text-align: right; outline: none; }
.setting-row input:focus { border-color: var(--accent); }
.switch-row { cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { width: 30px; height: 17px; position: relative; flex-shrink: 0; border-radius: var(--r-pill); background: var(--hover-strong); border: 1px solid var(--line-strong); transition: all var(--dur) var(--ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--text-dim); transition: all var(--dur) var(--ease); }
.switch-row input:checked + .switch { background: color-mix(in srgb, var(--accent) 26%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.switch-row input:checked + .switch::after { left: 16px; background: var(--accent); }
.switch-row:hover .switch { border-color: var(--accent); }
.switch-row:focus-within .switch { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
.seg { display: inline-flex; padding: var(--sp-1); gap: var(--sp-1); background: var(--input); border: 1px solid var(--line); border-radius: var(--r-2); }
.seg-btn { border: none; background: transparent; color: var(--text-dim); font-size: var(--fs-2); font-family: inherit; padding: 3px 9px; border-radius: var(--r-1); cursor: pointer; transition: all var(--dur) var(--ease); }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--accent); color: var(--active-fg); }
.settings-section { margin-top: var(--sp-8); }
.settings-section h3 { font-size: var(--fs-3); color: var(--text-dim); margin: 0 0 var(--sp-4); text-transform: uppercase; letter-spacing: .5px; }
.settings-usage { font-size: var(--fs-2); color: var(--text-dim); margin-top: var(--sp-6); }
.np-slot, .group-slot { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft); }
.np-slot .np-num { color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-4); font-weight: 600; min-width: 18px; }
.np-slot .np-text { flex: 1; font-size: var(--fs-2); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); }
.np-slot .np-text.empty { font-style: italic; }
.np-slot.has-content { cursor: pointer; }
.np-slot.has-content:hover { background: var(--surface2); }
.np-slot .np-remove .mi, .group-slot .gp-del .mi { font-size: var(--icon-sm); }
.group-slot .gp-name { flex: 1; font-size: var(--fs-3); color: var(--accent); }
.group-slot .gp-count { font-size: var(--fs-1); color: var(--text-dim); }
.sync-list, .settings-action-list { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.sync-account, .settings-action-card { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; overflow: hidden; padding: var(--sp-3) var(--sp-4); background: var(--input); border: 1px solid var(--line); border-radius: var(--r-1); }
.sync-account input, .settings-action-card input { width: auto; accent-color: var(--accent); flex-shrink: 0; }
.sync-account-main, .settings-action-main { flex: 1; min-width: 0; }
.sync-provider, .settings-action-title { display: block; max-width: 100%; font-size: var(--fs-2); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sync-account-path, .settings-action-detail { display: block; max-width: 100%; font-size: 9px; color: var(--text-dim); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setting-row code { padding: var(--sp-1) var(--sp-3); color: var(--text); background: var(--input); border: 1px solid var(--line); border-radius: var(--r-1); font-size: var(--fs-2); }

@media (max-width: 760px) {
  .item { padding-inline: var(--sp-5); }
  .preview img { max-width: 78px; max-height: 50px; }
}

/* Popup theme variables + design tokens live in clipboard-tokens.css
   (imported at the top of this file), so the app and demo render from
   one palette and cannot drift. Only component rules live here. */

/* The popup root carries the base text color so popup content never inherits a
   host page's color (the website embeds the popup inside the marketing
   page; the desktop app sets this on <body>). Without it, unstyled text like
   the dialog title rendered dark-on-dark. */
.bc-popup { color: var(--text); }
.hidden { display: none; }
mark { background: var(--mark-bg); color: var(--mark-fg); border-radius: 2px; padding: 0 var(--sp-1); }
.dialog h3 { color: var(--text); }

/* Toast */
.toast { position: fixed; bottom: var(--sp-8); left: 50%; transform: translateX(-50%) translateY(16px); background: var(--green); color: var(--active-fg);
         padding: var(--sp-3) var(--sp-8); border-radius: var(--r-pill); font-size: var(--fs-3); font-weight: 500; opacity: 0; transition: all var(--dur) var(--ease); pointer-events: none; z-index: 50; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Confirm / prompt dialog */
.overlay { display: none; pointer-events: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 30; align-items: center; justify-content: center; }
.overlay.show { display: flex; pointer-events: auto; }
.dialog { background: var(--menu); border-radius: var(--r-4); padding: var(--sp-8) var(--sp-10); max-width: 320px; width: 90%; box-shadow: 0 8px 24px var(--shadow), 0 0 0 1px var(--menu-edge); }
.dialog h3 { font-size: var(--fs-4); font-weight: 500; margin-bottom: var(--sp-3); }
.dialog p { font-size: var(--fs-2); color: var(--text-dim); margin-bottom: var(--sp-6); font-family: var(--font-mono); word-break: break-word; }
.dialog-btns { display: flex; gap: var(--sp-4); justify-content: flex-end; }
.dialog-btns button { border: none; border-radius: var(--r-2); padding: var(--sp-3) var(--sp-8); cursor: pointer; font-size: var(--fs-3); transition: all var(--dur) var(--ease); }
.btn-confirm { background: var(--green); color: var(--active-fg); }
.btn-confirm:hover { filter: brightness(1.1); }
.btn-cancel { background: var(--line); color: var(--text-dim); }
.btn-cancel:hover { background: var(--line-strong); color: var(--text); }
.prompt-input { width: 100%; background: var(--input); border: 1px solid var(--line); border-radius: var(--r-1); padding: var(--sp-3) var(--sp-5); color: var(--text); font-size: var(--fs-4); outline: none; margin-bottom: var(--sp-6); font-family: inherit; }
.prompt-input:focus { border-color: var(--accent); }

/* Settings: shortcuts, footer, sync, AI, build info — shared app + demo */
.settings-hdr { -webkit-app-region: drag; }
.settings-hdr button { -webkit-app-region: no-drag; }
.shortcut-row { align-items: flex-start; gap: var(--sp-5); }
.shortcut-row > label { padding-top: var(--sp-3); flex-shrink: 0; }
.shortcut-control { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); min-width: 0; }
.shortcut-btn { min-width: 130px; max-width: 190px; background: var(--input); border: 1px solid var(--line); border-radius: var(--r-1); color: var(--text);
                padding: var(--sp-3) var(--sp-4); font-size: var(--fs-2); font-family: var(--font-mono); white-space: nowrap; overflow: hidden;
                text-overflow: ellipsis; cursor: pointer; text-align: left; }
.shortcut-btn:hover { border-color: var(--accent); }
.shortcut-btn.recording { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.shortcut-reset .mi { font-size: var(--icon-sm); }
.shortcut-status { min-height: 14px; font-size: var(--fs-1); color: var(--text-dim); margin-top: -4px; }
.shortcut-status.error { color: var(--red); }
.settings-footer { margin-top: var(--sp-12); padding: var(--sp-6) 0 var(--sp-4); border-top: 1px solid var(--line); }
.settings-footer-actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.settings-clear { border: 1px solid var(--red); background: transparent; color: var(--red); padding: var(--sp-3) var(--sp-7); border-radius: var(--r-2); cursor: pointer; font-size: var(--fs-2); font-weight: 500; }
.settings-clear:hover { background: var(--red); color: var(--active-fg); }
.settings-secondary { border: 1px solid var(--line-strong); background: transparent; color: var(--text-dim); padding: var(--sp-3) var(--sp-6); border-radius: var(--r-2); cursor: pointer; font-size: var(--fs-2); font-weight: 500; }
.settings-secondary:hover { border-color: var(--accent); color: var(--accent); }
.sync-add-folder { width: 100%; margin-top: var(--sp-3); }
.add-group-btn { background: none; border: 1px dashed var(--line-strong); border-radius: var(--r-1); color: var(--text-dim); cursor: pointer; font-size: var(--fs-2);
                 padding: var(--sp-3); width: 100%; margin-top: var(--sp-2); transition: all var(--dur) var(--ease); }
.add-group-btn:hover { border-color: var(--accent); color: var(--accent); }
.sync-row, .settings-action-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; min-width: 0; }
.sync-btn, .settings-icon-btn { background: none; border: 1px solid var(--line-strong); border-radius: var(--r-1); color: var(--text-dim); cursor: pointer;
            font-size: var(--fs-2); padding: var(--sp-2) var(--sp-4); transition: all var(--dur) var(--ease); white-space: nowrap; flex-shrink: 0; }
.sync-btn:hover, .settings-icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.sync-btn:disabled, .settings-icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.sync-btn:disabled:hover, .settings-icon-btn:disabled:hover { border-color: var(--line-strong); color: var(--text-dim); }
/* Live sync feedback: the icon itself spins while a merge is in flight. */
@keyframes bc-sync-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.sync-btn.syncing .mi { display: inline-block; animation: bc-sync-spin 1.1s linear infinite; }
.sync-status, .settings-status { font-size: var(--fs-1); color: var(--text-dim); margin-top: var(--sp-1); }
.sync-status.active, .settings-status.active { color: var(--green); }
.sync-status.error, .settings-status.error { color: var(--red); }
.build-info { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; max-width: 100%; overflow: hidden; font-size: var(--fs-1); color: var(--text-dim); margin-top: var(--sp-6); font-family: var(--font-mono); }
.build-info-line { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-hint { font-size: var(--fs-2); color: var(--text-dim); line-height: 1.5; margin: var(--sp-1) 0 var(--sp-4); }
.ai-hint b { color: var(--accent); font-weight: 600; }
.ai-subhead { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin: var(--sp-6) 0 var(--sp-3); font-weight: 600; }
.ai-client-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; font-size: var(--fs-3); }
.ai-client-row input { width: auto; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.ai-client-row .ai-client-name { flex: 1; color: var(--text); }
.ai-client-row.undetected .ai-client-name { color: var(--text-dim); }
.ai-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }
.ai-dot.on { background: var(--green); }
.ai-grant-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; font-size: var(--fs-3); border-top: 1px solid var(--line-soft); }
.ai-grant-row .ai-grant-name { flex: 1; font-family: var(--font-mono); font-size: var(--fs-2); color: var(--text); }
.gp-share { color: var(--text-dim); }
.gp-share.on { color: var(--accent); }
.gp-del.locked { visibility: hidden; }

/* --- Shared plain-text editor (Core.createEditor): app window + demo overlay --- */
.bc-editor { display: flex; flex-direction: column; height: 100%; width: 100%; background: var(--bg); color: var(--text); min-height: 0; }
.bc-editor-bar { -webkit-app-region: drag; display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-3) 0 var(--sp-6); height: 30px; flex-shrink: 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.bc-editor-title { -webkit-app-region: drag; flex: 1; font-size: var(--fs-2); color: var(--text-dim); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-editor-bar-actions { -webkit-app-region: no-drag; display: flex; align-items: center; gap: var(--sp-1); }
.bc-title-row { flex-shrink: 0; padding: var(--sp-4) var(--sp-5); background: var(--surface); }
.bc-note-title { width: 100%; background: var(--input); border: 1px solid var(--line); border-radius: var(--r-2); color: var(--text); font: inherit; font-size: var(--fs-4); padding: var(--sp-3) var(--sp-4); outline: none; }
.bc-note-title:focus { border-color: var(--accent); }
.bc-find { -webkit-app-region: no-drag; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); flex-shrink: 0; background: var(--surface); }
.bc-find[hidden] { display: none; }
.bc-find-input { flex: 1; min-width: 0; background: var(--input); border: 1px solid var(--line); border-radius: var(--r-2); color: var(--text); font: inherit; font-size: var(--fs-3); padding: var(--sp-2) var(--sp-4); outline: none; }
.bc-find-input:focus { border-color: var(--accent); }
.bc-find-count { font-size: var(--fs-1); color: var(--text-dim); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.bc-editor-area { flex: 1; min-height: 0; width: 100%; resize: none; border: 0; outline: none; background: var(--bg); color: var(--text); }
.bc-editor-area, .bc-editor-hl {
  font-family: var(--font-mono); font-size: var(--fs-4); line-height: 1.5; padding: var(--sp-6) var(--sp-7); tab-size: 4; white-space: pre-wrap; word-break: break-word; }
.bc-editor-area::placeholder { color: var(--text-dim); }
/* Find-match highlight backdrop: mirrors the textarea's text (transparent) so
   <mark> backgrounds line up under the real text. Textarea goes transparent so
   the marks show through; the wrap supplies the editor background. */
.bc-editor-area-wrap { position: relative; flex: 1; min-height: 0; display: flex; background: var(--bg); }
.bc-editor-area-wrap .bc-editor-area { background: transparent; position: relative; z-index: 1; overflow-y: scroll; }
.bc-editor-area-wrap .bc-editor-area::-webkit-scrollbar { width: 10px; }
.bc-editor-area-wrap .bc-editor-area::-webkit-scrollbar-track { background: transparent; }
.bc-editor-area-wrap .bc-editor-area::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-1); }
.bc-editor-hl { position: absolute; inset: 0 10px 0 0; overflow: hidden; pointer-events: none; color: transparent; margin: 0; box-sizing: border-box; }
.bc-editor-hl mark { color: transparent; background: color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 2px; }
.bc-editor-hl mark.cur { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.bc-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-1) var(--sp-6); height: 24px; flex-shrink: 0; border-top: 1px solid var(--line); background: var(--surface); font-size: var(--fs-1); color: var(--text-dim); }
.bc-editor-hint { white-space: nowrap; }
/* Glass: the editor canvas goes transparent so the OS acrylic + tint scrim show
   through; the chrome bars keep their translucent --surface. */
:root[data-surface="glass"] .bc-editor,
:root[data-surface="glass"] .bc-editor-area-wrap,
:root[data-surface="glass"] .bc-reconcile,
.bc-popup[data-surface="glass"] .bc-editor,
.bc-popup[data-surface="glass"] .bc-editor-area-wrap,
.bc-popup[data-surface="glass"] .bc-reconcile { background: transparent; }
/* In-app image viewer: same window chrome as the editor (bc-editor-bar + foot);
   the stage centers the image and hosts zoom/pan (transform-positioned <img>). */
.bc-viewer { display: flex; flex-direction: column; height: 100%; width: 100%; background: var(--bg); color: var(--text); min-height: 0; outline: none; }
.bc-viewer-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--bg); }
.bc-viewer-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; image-rendering: auto; }
:root[data-surface="glass"] .bc-viewer, :root[data-surface="glass"] .bc-viewer-stage { background: transparent; }
/* Demo overlay host: the editor floats over the demo popup window. It needs an
   opaque background: in glass mode .bc-editor is transparent (so the app's OS
   acrylic shows through in the editor *window*), but the demo mounts the editor
   as an overlay on top of the clip list — without a solid host, the list bleeds
   through. --bg stays fully opaque in every surface mode. */
.bc-editor-overlay { position: absolute; inset: 0; z-index: 40; display: none; background: var(--bg); }
.bc-editor-overlay.show { display: block; }
.bc-editor-overlay .bc-editor { box-shadow: 0 8px 30px var(--shadow); }
/* IntelliJ-style merge (CodeMirror 5 merge addon, skinned with our tokens):
   Current (read-only) | Result (editable) | Incoming (read-only). */
.bc-reconcile { display: flex; flex-direction: column; height: 100%; width: 100%; background: var(--bg); color: var(--text); min-height: 0; }
.bc-merge-title { flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); }
.bc-merge-title .bc-note-title { flex: 0 1 320px; }
.bc-title-opts { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; overflow: hidden; }
.bc-title-use { font-size: var(--fs-1); color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.bc-chip { border: none; background: var(--surface2); color: var(--text-dim); font-size: var(--fs-2); font-family: inherit; padding: 2px var(--sp-4); border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.bc-chip:hover { background: var(--menu-hover); color: var(--text); }
/* Pane headers aligned to the addon's pane widths (2-pane 47%/6%, 3-pane 31%/3.5%). */
.bc-merge-heads { flex-shrink: 0; display: flex; background: var(--surface); border-bottom: 1px solid var(--line); }
.bc-merge-heads > span { padding: var(--sp-2) var(--sp-4); color: var(--text-dim); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-merge-heads.bc-heads-2 > span { width: 47%; }
.bc-merge-heads.bc-heads-2 > .bc-merge-heads-gap { width: 6%; padding: 0; }
.bc-merge-heads.bc-heads-3 > span { width: 31%; }
.bc-merge-heads.bc-heads-3 > .bc-merge-heads-gap { width: 3.5%; padding: 0; }
.bc-chg-count { align-self: center; display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); color: var(--text-dim); margin-right: var(--sp-2); white-space: nowrap; }
.bc-conflict-chip { border: none; background: var(--red-bg); color: var(--red); font-size: var(--fs-1); font-family: inherit; font-weight: 600; padding: 1px var(--sp-3); border-radius: var(--r-pill); cursor: pointer; }
.bc-pending-chip { border: none; background: var(--accent-bg); color: var(--accent); font-size: var(--fs-1); font-family: inherit; font-weight: 600; padding: 1px var(--sp-3); border-radius: var(--r-pill); cursor: pointer; }
.bc-editor-bar-actions .icon-btn.active { color: var(--accent); background: var(--accent-bg); }
/* --- CodeMirror skin: tokens only, no stock palette. --- */
.bc-merge-host { flex: 1; min-height: 0; position: relative; }
/* Full-height chain: the addon's default is a fixed 350px and its panes have
   AUTO height (so CodeMirror height:100% would resolve against auto and grow to
   content — no internal scroll, the user's "can't scroll" bug). Pin every level
   to 100% so each pane scrolls internally. */
.bc-merge-host .CodeMirror-merge,
.bc-merge-host .CodeMirror-merge-pane,
.bc-merge-host .CodeMirror-merge .CodeMirror { height: 100%; }
.bc-merge-host .CodeMirror-merge { border: 0; }
.bc-merge-host .CodeMirror { background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: var(--fs-3); line-height: 1.5; }
/* Only the READ-ONLY panes are slightly muted; the editable Result never is
   (in 2-pane mode the first pane IS the Result). */
.bc-merge-host .CodeMirror-merge-pane-rightmost,
.bc-merge-host .CodeMirror-merge-3pane .CodeMirror-merge-pane:first-child { opacity: .92; }
.bc-merge-host .CodeMirror-cursor { border-left: 1.5px solid var(--text); }
.bc-merge-host .CodeMirror-selected { background: var(--accent-bg); }
.bc-merge-host .CodeMirror-merge-gap { background: var(--surface); border-color: var(--line); }
/* Chunks: green like every other "incoming content" affordance; intra-line word
   changes a touch stronger; conflicting Result lines red. */
.bc-merge-host .CodeMirror-merge-l-chunk, .bc-merge-host .CodeMirror-merge-r-chunk { background: var(--green-bg); }
.bc-merge-host .CodeMirror-merge-l-chunk-start, .bc-merge-host .CodeMirror-merge-r-chunk-start { border-top: 1px solid color-mix(in srgb, var(--green) 45%, transparent); }
.bc-merge-host .CodeMirror-merge-l-chunk-end, .bc-merge-host .CodeMirror-merge-r-chunk-end { border-bottom: 1px solid color-mix(in srgb, var(--green) 45%, transparent); }
.bc-merge-host .CodeMirror-merge-l-inserted, .bc-merge-host .CodeMirror-merge-r-inserted,
.bc-merge-host .CodeMirror-merge-l-deleted, .bc-merge-host .CodeMirror-merge-r-deleted { background: color-mix(in srgb, var(--green) 30%, transparent); text-decoration: none; }
.bc-merge-host .CodeMirror-merge-l-connect { fill: var(--green-bg); stroke: color-mix(in srgb, var(--green) 40%, transparent); stroke-width: 1px; }
.bc-merge-host .CodeMirror-merge-r-connect { fill: var(--green-bg); stroke: color-mix(in srgb, var(--green) 40%, transparent); stroke-width: 1px; }
.bc-merge-host .bc-conflict { background: var(--red-bg); }
/* Chunk-state paint from the wrapper: 'quiet' (whitespace-only) chunks lose the
   green wash + edges entirely; declined chunks dim their read-only text and get
   a dashed hollow connector. */
.bc-merge-host .bc-quiet.CodeMirror-merge-l-chunk, .bc-merge-host .bc-quiet.CodeMirror-merge-r-chunk { background: transparent; }
.bc-merge-host .bc-quiet.CodeMirror-merge-l-chunk-start, .bc-merge-host .bc-quiet.CodeMirror-merge-r-chunk-start { border-top: 0; }
.bc-merge-host .bc-quiet.CodeMirror-merge-l-chunk-end, .bc-merge-host .bc-quiet.CodeMirror-merge-r-chunk-end { border-bottom: 0; }
.bc-merge-host .bc-dim-line { opacity: .45; }
.bc-merge-host .CodeMirror-merge-l-connect.bc-declined,
.bc-merge-host .CodeMirror-merge-r-connect.bc-declined { fill: transparent; stroke: var(--line-strong); stroke-dasharray: 3 3; }
/* The addon's gutter arrows (pull a chunk into the Result) + our decline (x):
   apply hugs the Result side of the gap, decline the source side. */
.bc-merge-host .CodeMirror-merge-copy, .bc-merge-host .CodeMirror-merge-copy-reverse { color: var(--accent); font-size: var(--fs-4); }
.bc-merge-host .CodeMirror-merge-copy:hover { color: var(--accent-hover); }
.bc-merge-host .bc-decline { color: var(--text-dim); font-size: var(--fs-4); }
.bc-merge-host .bc-decline:hover { color: var(--red); }
.bc-merge-host .CodeMirror-merge-copybuttons-right .bc-decline { right: auto; left: 2px; }
.bc-merge-host .CodeMirror-merge-copybuttons-left .bc-decline { left: auto; right: 2px; }
.bc-merge-host .CodeMirror-merge-collapsed-widget { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-1); color: var(--text-dim); font-size: var(--fs-2); padding: 0 var(--sp-3); cursor: pointer; }
.bc-merge-host .CodeMirror-merge-collapsed-widget:before { content: "\22EF "; }
.bc-merge-host .CodeMirror-merge-scrolllock { color: var(--text-dim); }
/* Glass: CM canvases go transparent like the editor's, scrim provides the tint. */
:root[data-surface="glass"] .bc-merge-host .CodeMirror,
.bc-popup[data-surface="glass"] .bc-merge-host .CodeMirror { background: transparent; }
.bc-reconcile-actions { flex-shrink: 0; display: flex; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface); }
.bc-reconcile-actions button { border: none; border-radius: var(--r-2); background: var(--surface2); color: var(--text); font-size: var(--fs-2); padding: var(--sp-3) var(--sp-4); cursor: pointer; transition: var(--dur) var(--ease); }
.bc-reconcile-actions button:hover { background: var(--menu-hover); }
.bc-reconcile-actions button.primary { background: var(--accent); color: var(--active-fg); }
.bc-reconcile-actions button.primary:hover { background: var(--accent-hover); }
@media (max-width: 760px) {
  .bc-reconcile-actions { flex-wrap: wrap; }
}

/* --- Multi-select: checked-row tint + slim contextual toolbar --- */
/* `.selected` is the keyboard cursor (var(--surface2), defined above); a checked
   row (Ctrl/Shift-click) gets an accent tint + a left accent bar so it reads as
   part of the bulk set even when it isn't the cursor. */
.item.multi-selected { background: var(--accent-bg); }
.item.multi-selected::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.item.multi-selected:hover { background: var(--accent-bg-strong); }
.selection-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-5); background: var(--accent-bg); border-top: 1px solid var(--line-soft); }
.selection-bar.hidden { display: none; }
.selection-count { flex: 1; font-size: var(--fs-2); font-weight: 600; color: var(--text); }
.selection-actions { display: flex; align-items: center; gap: 1px; }

/* Rows are click-to-act (click pastes, shift/ctrl-click selects) — native text
   selection inside them is never meaningful and shift-click was smearing a text
   highlight across rows. The editor is the copy-a-fragment surface. */
.list .item { user-select: none; -webkit-user-select: none; }

/* Submenu auto-flip (set by installSubmenuAutoflip when a submenu would leave
   the window): side-opening submenus open leftward; the filter bar's drop-down
   right-aligns to its node. */
.tag-menu-node > .tag-submenu.flip-x { left: auto; right: calc(100% - 1px); }
.group-filters > .tag-menu-node > .tag-submenu.flip-x { left: auto; right: 0; }

/* --- Shared popover menu (per-clip "..." + multi-select bulk menu) --- */
.bc-menu { position: absolute; z-index: 200; min-width: 176px; max-width: 260px; } /* surface look comes from the shared floating-surface rule */
.bc-menu-list { display: flex; flex-direction: column; }
.bc-menu-item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; box-sizing: border-box; padding: var(--sp-2) var(--sp-3);
                background: none; border: none; border-radius: var(--r-1); color: var(--text); font-family: inherit; font-size: var(--fs-3);
                text-align: left; cursor: pointer; position: relative; }
.bc-menu-item:hover { background: var(--menu-hover); }
.bc-menu-item > .mi { font-size: var(--icon-md); color: var(--text-dim); flex-shrink: 0; }
.bc-menu-item.danger:hover, .bc-menu-item.danger:hover > .mi { color: var(--red); }
.bc-menu-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-menu-item > .tag-caret { margin-left: auto; font-size: var(--icon-sm); color: var(--text-dim); }
/* Group/numpad submenus inside the menu open beside their row (reusing the shared
   hover-submenu mechanics); they carry .tag-submenu so hover reveals them. */
.bc-menu .tag-submenu { top: -4px; left: calc(100% - 1px); min-width: 150px; }
.bc-menu-item.tag-menu-node:hover > .tag-submenu, .bc-menu-item.tag-menu-node:focus-within > .tag-submenu { display: block; }
.numpad-picker.static { display: flex; position: static; box-shadow: none; padding: var(--sp-1); background: none; }
/* Bulk-group tri-state: 'some' selected reads as a partial (accent) state,
   distinct from 'all' (green, .assigned) and 'none' (.available). */
.gp-btn.partial { color: var(--accent); background: var(--accent-bg); }

/* --- Undo toast action button --- */
.toast-action { margin-left: var(--sp-5); background: none; border: none; color: var(--active-fg); font: inherit; font-weight: 700;
                text-decoration: underline; cursor: pointer; padding: 0; }