@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); }

.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; }
.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 var(--line-strong);
              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:hover { border-color: var(--accent); color: var(--text); }
.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); }
.numpad-picker { display: none; position: absolute; top: 100%; left: -4px; z-index: 40; background: var(--menu); border-radius: var(--r-2);
                  padding: var(--sp-1); flex-direction: column; gap: var(--sp-1); box-shadow: 0 4px 14px var(--shadow), 0 0 0 1px var(--menu-edge); overflow: visible; }
.pin-area:hover .numpad-picker { display: flex; }
.np-row { display: flex; gap: var(--sp-1); white-space: nowrap; }
.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; padding: var(--sp-2); background: var(--menu);
               border-radius: var(--r-2); box-shadow: 0 8px 20px var(--shadow), 0 0 0 1px var(--menu-edge); }
.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); }
.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; }
/* 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); }
.bc-reconcile { display: flex; flex-direction: column; height: 100%; width: 100%; background: var(--bg); color: var(--text); min-height: 0; }
.bc-reconcile-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--line); }
.bc-reconcile-side, .bc-reconcile-merge { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.bc-reconcile-merge { border-right: 0; padding: var(--sp-4); gap: var(--sp-4); }
.bc-reconcile-head { flex-shrink: 0; padding: var(--sp-3) var(--sp-4); color: var(--text-dim); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .04em; background: var(--surface); border-bottom: 1px solid var(--line); }
.bc-reconcile-title { flex-shrink: 0; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--line); }
.bc-reconcile pre, .bc-hunk { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: var(--fs-3); line-height: 1.45; }
.bc-reconcile-side pre { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-4); }
.bc-reconcile-merge .bc-editor-area { border: 1px solid var(--line-strong); border-radius: var(--r-2); }
.bc-hunks { flex-shrink: 0; max-height: 140px; overflow: auto; background: var(--surface); border-bottom: 1px solid var(--line); }
.bc-hunk { padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line-soft); }
.bc-hunk.add { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.bc-hunk.remove { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red); }
.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-body { grid-template-columns: 1fr; overflow: auto; }
  .bc-reconcile-side, .bc-reconcile-merge { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }
  .bc-reconcile-actions { flex-wrap: wrap; }
}