/* ============================================================================
   v2.css — Product UI/UX redesign layer (served at /v2)

   Loaded AFTER main.css. Everything here is scoped under html[data-v2] so it
   only affects the redesign and never the original app. It reuses main.css's
   design tokens (colours, fonts) so light/dark themes keep working, and only
   restyles the *chrome* + onboarding to make the product obvious to use.
   ========================================================================== */

/* ─────────────────────────────────────────────────
   Shared file-type icon (sprite <use>)
───────────────────────────────────────────────── */
html[data-v2] .fileicon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────
   Titlebar — brand + always-visible format switcher
───────────────────────────────────────────────── */
html[data-v2] .titlebar {
  gap: 12px;
  padding: 0 12px;
}

html[data-v2] .v2-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding-right: 4px;
  user-select: none;
}
html[data-v2] .v2-brand-mark {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--accent);
}
html[data-v2] .v2-brand-name {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-0);
}
@media (max-width: 720px) {
  html[data-v2] .v2-brand-name { display: none; }
}

/* The format switcher moves out of the titlebar in this revision: documents are
   now represented by the vertical tab rail, and the titlebar hosts brand + AI +
   theme only. The nav stays in the DOM (the engine still drives it) but hidden. */
html[data-v2] .titlebar-tabs { display: none !important; }
html[data-v2] .titlebar-spacer { flex: 1; }

/* ─────────────────────────────────────────────────
   Onboarding / empty state
───────────────────────────────────────────────── */
html[data-v2] .main-empty {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 28px 20px 40px;
}

html[data-v2] .v2-onboard {
  margin: auto;
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

html[data-v2] .v2-hero { text-align: center; }
html[data-v2] .v2-hero-title {
  font-family: var(--ff-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-0);
  margin-bottom: 8px;
}
html[data-v2] .v2-hero-sub {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-1);
  max-width: 520px;
  margin: 0 auto;
}

/* Primary drop target — overrides main.css .dropzone-main */
html[data-v2] .dropzone.v2-drop {
  max-width: 100%;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 34px 24px;
  border: 1.5px dashed var(--border-2);
  border-radius: 12px;
  background: var(--bg-1);
  color: var(--text-1);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
html[data-v2] .dropzone.v2-drop:hover,
html[data-v2] .dropzone.v2-drop.drag-over {
  border-color: var(--accent);
  background: var(--accent-lo);
  color: var(--accent);
}
html[data-v2] .v2-drop-icon svg { width: 34px; height: 34px; opacity: 0.85; }
html[data-v2] .v2-drop-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-0);
  margin: 2px 0 0;
}
html[data-v2] .dropzone.v2-drop:hover .v2-drop-title,
html[data-v2] .dropzone.v2-drop.drag-over .v2-drop-title { color: var(--accent); }
html[data-v2] .v2-drop-sub { font-size: 11px; color: var(--text-2); }
html[data-v2] .dropzone.v2-drop:hover .v2-drop-sub { color: inherit; }

/* Three ways to load */
html[data-v2] .v2-ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
html[data-v2] .v2-way {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 14px 10px;
  border: 1px solid var(--border-1);
  border-radius: 9px;
  background: var(--bg-1);
}
html[data-v2] button.v2-way-btn {
  font-family: var(--ff-mono);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
html[data-v2] button.v2-way-btn:hover {
  border-color: var(--accent);
  background: var(--accent-lo);
}
html[data-v2] .v2-way-ic svg { width: 20px; height: 20px; color: var(--accent); }
html[data-v2] .v2-way-title { font-size: 12px; font-weight: 700; color: var(--text-0); }
html[data-v2] .v2-way-sub { font-size: 10px; color: var(--text-2); line-height: 1.5; }
html[data-v2] .v2-way kbd {
  font-family: var(--ff-mono);
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--border-2);
  background: var(--bg-3);
  color: var(--text-1);
}

/* Format directory */
html[data-v2] .v2-formats-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: center;
  margin-bottom: 12px;
}
html[data-v2] .v2-format-grid {
  display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
html[data-v2] .v2-format {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid var(--border-1);
  border-radius: 9px;
  background: var(--bg-1);
  color: var(--text-0);
  font-family: var(--ff-mono);
  user-select: none;
}
html[data-v2] .v2-format-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--bg-3);
  flex-shrink: 0;
}
html[data-v2] .v2-format-ic .fileicon { width: 19px; height: 19px; }
html[data-v2] .v2-format-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
html[data-v2] .v2-format-name { font-size: 12px; font-weight: 700; color: var(--text-0); }
html[data-v2] .v2-format-desc {
  font-size: 10px;
  color: var(--text-2);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  html[data-v2] .v2-hero-title { font-size: 19px; }
  html[data-v2] .v2-ways { grid-template-columns: 1fr; }
  html[data-v2] .v2-format-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────
   Sidebar — visible text labels on icon-only actions
   (main.css makes .action-btn a centred column, so an ::after label sits
    neatly under each icon — no markup change, no risk to app.js bindings)
───────────────────────────────────────────────── */
html[data-v2] .sidebar-label { color: var(--text-1); }

html[data-v2] .action-btn { font-size: 10px; }
html[data-v2] .action-btn::after {
  font-size: 8.5px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: inherit;
}
html[data-v2] #btn-expand-all::after            { content: "Expand"; }
html[data-v2] #btn-collapse-all::after          { content: "Collapse"; }
html[data-v2] #btn-copy-fmt::after              { content: "Copy"; }
html[data-v2] #btn-copy-min::after              { content: "Minify"; }
html[data-v2] #btn-download::after              { content: "Save"; }
html[data-v2] #btn-clear::after                 { content: "Clear"; }
html[data-v2] #btn-copy-other::after            { content: "Copy"; }
html[data-v2] #btn-download-other::after        { content: "Save"; }
html[data-v2] #btn-clear-other::after           { content: "Clear"; }
html[data-v2] #btn-copy-toon-source::after      { content: "Copy"; }
html[data-v2] #btn-download-toon-source::after  { content: "Save"; }
html[data-v2] #btn-clear-toon-viewer::after     { content: "Clear"; }
html[data-v2] #btn-pdf-zoom-in::after           { content: "Zoom in"; }
html[data-v2] #btn-pdf-zoom-out::after          { content: "Zoom out"; }
html[data-v2] #btn-pdf-copy::after              { content: "Copy"; }
html[data-v2] #btn-pdf-download::after          { content: "Save"; }
html[data-v2] #btn-pdf-clear::after             { content: "Clear"; }
html[data-v2] #btn-image-copy::after            { content: "Copy"; }
html[data-v2] #btn-image-download::after        { content: "Save"; }
html[data-v2] #btn-image-clear::after           { content: "Clear"; }
html[data-v2] #btn-image-reset::after           { content: "Reset"; }
html[data-v2] #btn-image-crop::after            { content: "Crop"; }
html[data-v2] #btn-image-rotate::after          { content: "Rotate"; }
html[data-v2] #btn-image-fliph::after           { content: "Flip H"; }
html[data-v2] #btn-image-flipv::after           { content: "Flip V"; }

/* The TOON / ZOD / INTERFACE / format text buttons already read clearly */

/* ─────────────────────────────────────────────────
   Small polish
───────────────────────────────────────────────── */
html[data-v2] .ai-open-btn {
  border-radius: 6px;
  font-weight: 700;
}
html[data-v2] .sb-shortcuts-btn { border-radius: 5px; }

/* ============================================================================
   v2 revision 2 — top action bar, vertical tab rail, floating view toggle
   ========================================================================== */

/* ── Win-dots hidden ────────────────────────────────────────────────── */
html[data-v2] .win-dots { display: none !important; }

/* ── Sidebar always visible (remove hidden state) ──────────────────── */
html[data-v2] .app.sidebar-hidden .sidebar { display: flex !important; }
html[data-v2] .app.v2-sidebar-compact.sidebar-hidden { grid-template-columns: 56px 1fr; }
html[data-v2] .app.sidebar-hidden:not(.v2-sidebar-compact) { grid-template-columns: 220px 1fr; }
html[data-v2] .app.sidebar-hidden .main { grid-column: auto; }

/* ── Titlebar — elements inline (view overlay, search, actions) ─────── */
html[data-v2] .titlebar { gap: 8px; padding: 0 8px; }

/* View-mode toggle inline in titlebar */
html[data-v2] #v2-view-overlay {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
html[data-v2] #v2-view-overlay .sidebar-view-panel { margin: 0; }
html[data-v2] #v2-view-overlay .seg-toggle {
  background: var(--bg-1);
  border-color: var(--border-2);
  border-radius: 6px;
}
html[data-v2] #v2-view-overlay .seg-btn {
  min-height: 26px;
  padding: 4px 8px;
}
html[data-v2] .app.no-content #v2-view-overlay { display: none !important; }
html[data-v2] .app.no-content #search-wrap-row { display: none !important; }

/* Search in titlebar */
html[data-v2] .titlebar #search-wrap-row {
  flex: 0 1 260px;
  min-width: 100px;
  display: flex;
  align-items: center;
  padding: 0;
  border: none;
}
html[data-v2] .titlebar #search-wrap-row .sidebar-label { display: none; }
html[data-v2] .titlebar .search-wrap { width: 100%; }
html[data-v2] .titlebar .search-wrap input { height: 28px; font-size: 11px; border-radius: 999px; }
html[data-v2] .titlebar .search-info { font-size: 9px; }

/* Actions container in titlebar */
html[data-v2] #v2-titlebar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 1;
  min-width: 0;
  /* Adapt to the number of buttons: never push into the AI / theme controls.
     When the actions don't fit, the row scrolls horizontally instead of
     overflowing the titlebar. (The Convert/Export menu is re-positioned as
     `fixed` on open in v2.js so it isn't clipped by this scroll container.) */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scroll-padding: 0 4px;
}
html[data-v2] #v2-titlebar-actions::-webkit-scrollbar { height: 5px; }
html[data-v2] #v2-titlebar-actions::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 999px;
}
html[data-v2] #v2-titlebar-actions::-webkit-scrollbar-track { background: transparent; }
html[data-v2] #v2-titlebar-actions:empty { display: none; }
html[data-v2] .app.no-content #v2-titlebar-actions { display: none !important; }
html[data-v2] #v2-titlebar-actions .sidebar-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
}
html[data-v2] #v2-titlebar-actions .sidebar-label { display: none; }
html[data-v2] #v2-titlebar-actions .action-btns {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  grid-template-columns: none;
}
html[data-v2] #v2-titlebar-actions .action-btn {
  flex-direction: row;
  gap: 4px;
  padding: 4px 11px;
  white-space: nowrap;
  font-size: 10px;
  border-radius: 5px;
  min-height: 26px;
  flex-shrink: 0;
}
html[data-v2] #v2-titlebar-actions .action-btn .action-icon .icon { width: 13px; height: 13px; }
html[data-v2] #v2-titlebar-actions .action-btn::after { font-size: 10px; }

/* Colored action icons (the icon keeps its hue on hover; label stays neutral) */
html[data-v2] #btn-expand-all   .action-icon { color: var(--c-csv); }
html[data-v2] #btn-collapse-all .action-icon { color: var(--c-num); }
html[data-v2] #btn-copy-fmt     .action-icon,
html[data-v2] #btn-copy-other   .action-icon,
html[data-v2] #btn-copy-toon-source .action-icon,
html[data-v2] #btn-pdf-copy     .action-icon,
html[data-v2] #btn-image-copy   .action-icon,
html[data-v2] #btn-media-copy   .action-icon { color: var(--c-key); }
html[data-v2] #btn-copy-min     .action-icon { color: var(--c-bool); }
html[data-v2] #btn-download     .action-icon,
html[data-v2] #btn-download-other .action-icon,
html[data-v2] #btn-download-toon-source .action-icon,
html[data-v2] #btn-pdf-download .action-icon,
html[data-v2] #btn-image-download .action-icon { color: var(--accent); }
html[data-v2] #btn-toon, html[data-v2] #btn-zod, html[data-v2] #btn-interface { color: var(--accent); }
html[data-v2] #btn-toon .action-icon { color: var(--c-str); }
html[data-v2] #btn-zod .action-icon { color: var(--c-bool); }
html[data-v2] #btn-interface .action-icon { color: var(--c-key); }
html[data-v2] #btn-convert-other .convert-dropdown-menu #btn-md-to-pdf .action-icon { color: var(--error); }
html[data-v2] #btn-convert-json .action-icon,
html[data-v2] #btn-convert-toon .action-icon,
html[data-v2] #btn-convert-other .action-icon,
html[data-v2] #btn-convert-pdf .action-icon { color: var(--c-num); }

/* Image action icon colors */
html[data-v2] #btn-image-crop    .action-icon { color: var(--accent); }
html[data-v2] #btn-image-rotate  .action-icon { color: var(--c-num); }
html[data-v2] #btn-image-fliph   .action-icon,
html[data-v2] #btn-image-flipv   .action-icon { color: var(--c-key); }
html[data-v2] #btn-image-removebg .action-icon { color: var(--c-bool); }
html[data-v2] #btn-image-reset   .action-icon { color: var(--error); }
html[data-v2] #btn-image-copy    .action-icon { color: var(--c-key); }

/* Convert dropdown format icon colors */
html[data-v2] #btn-image-png  .action-icon { color: var(--c-csv); }
html[data-v2] #btn-image-jpg  .action-icon { color: var(--c-key); }
html[data-v2] #btn-image-webp .action-icon { color: var(--c-num); }
html[data-v2] #btn-image-avif .action-icon { color: var(--c-bool); }
html[data-v2] #btn-image-bmp  .action-icon { color: var(--error); }
html[data-v2] #btn-image-pdf  .action-icon { color: var(--c-str); }
html[data-v2] #btn-zip-image  .action-icon,
html[data-v2] #btn-zip-json   .action-icon,
html[data-v2] #btn-zip-toon   .action-icon,
html[data-v2] #btn-zip-other  .action-icon,
html[data-v2] #btn-zip-pdf    .action-icon { color: var(--c-num); }
html[data-v2] #btn-image-compress .action-icon { color: var(--c-num); }

/* hide clear buttons — clearing happens by closing tabs */
html[data-v2] #btn-clear,
html[data-v2] #btn-clear-other,
html[data-v2] #btn-clear-toon-viewer,
html[data-v2] #btn-pdf-clear,
html[data-v2] #btn-image-clear,
html[data-v2] #btn-media-clear { display: none !important; }

/* ── Convert dropdown (image convert buttons collapsed) ─────────────── */
html[data-v2] .convert-dropdown {
  position: relative;
  display: inline-flex;
}
html[data-v2] #btn-image-convert {
  display: flex;
  align-items: center;
  gap: 4px;
}
html[data-v2] #btn-image-convert .icon-chevron-down {
  width: 12px;
  height: 12px;
}
html[data-v2] .convert-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  min-width: 90px;
  margin-top: 5px;
}
html[data-v2] .convert-dropdown-menu .action-btn {
  justify-content: flex-start;
  padding: 6px 12px;
  font-size: 11px;
  border-radius: 5px;
  border: 1px solid transparent;
}
html[data-v2] .convert-dropdown-menu .action-btn:hover {
  background: var(--bg-3);
  border-color: var(--border-1);
}
html[data-v2] .convert-dropdown-menu .action-btn::after { display: none; }
html[data-v2] .convert-dropdown-menu .action-btn { padding: 6px 12px; gap: 6px; }
html[data-v2] #v2-titlebar-actions #toolbar-actions-image { gap: 8px; }

/* ── Vertical tab rail (replaces Recent) ─────────────────────────────────── */
html[data-v2] .v2-tabrail {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
html[data-v2] .v2-tabrail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 9px 9px 6px;
}
html[data-v2] .v2-tabrail-title {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
html[data-v2] .v2-tabrail-head-btns { display: flex; align-items: center; gap: 2px; }
html[data-v2] .v2-rail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  border-radius: 5px;
  color: var(--text-2);
}
html[data-v2] .v2-rail-btn .icon { width: 15px; height: 15px; }
html[data-v2] .v2-rail-btn:hover { background: var(--bg-3); color: var(--text-0); }
html[data-v2] .v2-rail-btn-new:hover { color: var(--accent); background: var(--accent-lo); }

html[data-v2] .v2-tablist {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
html[data-v2] .v2-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  color: var(--text-1);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
html[data-v2] .v2-tab:hover { background: var(--bg-2); color: var(--text-0); }
html[data-v2] .v2-tab.active { background: var(--bg-3); color: var(--text-0); border-color: var(--border-2); }
html[data-v2] .v2-tab-ic { display: flex; align-items: center; flex-shrink: 0; opacity: 0.9; }
html[data-v2] .v2-tab-ic .fileicon { width: 15px; height: 15px; }
html[data-v2] .v2-tab-ic-home svg { width: 15px; height: 15px; color: var(--text-2); }
html[data-v2] .v2-tab-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}
html[data-v2] .v2-tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  color: var(--text-2);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
html[data-v2] .v2-tab-close svg {   width: 12px;
  height: 12px;
}

/* Inline editable fields for CRON / REGEX */
html[data-v2] .cron-inline-editor,
html[data-v2] .regex-inline-editor {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--text-0);
  background: var(--bg-3);
  border: 1px solid var(--border-1);
  border-radius: 0;
  outline: none;
  resize: vertical;
  min-height: 34px;
  box-sizing: border-box;
}
html[data-v2] .cron-inline-editor:focus,
html[data-v2] .regex-inline-editor:focus {
  border-color: var(--accent);
}
html[data-v2] .cron-code--hero[contenteditable],
html[data-v2] .regex-pattern-display[contenteditable] {
  display: inline-block;
  min-width: 80px;
  outline: none;
  border-bottom: 1px dashed var(--border-2);
  transition: border-color 0.15s;
}
html[data-v2] .cron-code--hero[contenteditable]:focus,
html[data-v2] .regex-pattern-display[contenteditable]:focus {
  border-bottom-color: var(--accent);
}
html[data-v2] .v2-tab:hover .v2-tab-close,
html[data-v2] .v2-tab.active .v2-tab-close { opacity: 1; }
html[data-v2] .v2-tab-close:hover { background: var(--error-lo); color: var(--error); }

html[data-v2] .v2-tabrail-foot { padding: 8px; border-top: 1px solid var(--border-0); }
html[data-v2] .v2-tab-clear-all {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  color: var(--text-1);
  font-size: 10px;
  letter-spacing: 0.04em;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
html[data-v2] .v2-tab-clear-all .icon { width: 13px; height: 13px; }
html[data-v2] .v2-tab-clear-all:hover { color: var(--error); border-color: var(--error); background: var(--error-lo); }

/* Hide the original sidebar sections while they still live in the sidebar.
   js/v2.js relocates the ones it needs out of .sidebar, after which these
   ancestor selectors stop matching and the elements appear in their new home. */
html[data-v2] .sidebar .sidebar-section-view,
html[data-v2] .sidebar #search-wrap-row,
html[data-v2] .sidebar #sidebar-url-fetch,
html[data-v2] .sidebar [id^="toolbar-actions-"],
html[data-v2] .sidebar .sidebar-recent-panel { display: none !important; }

/* ── Compact / expanded density ──────────────────────────────────────────── */
@media (min-width: 961px) {
  html[data-v2] .app.v2-sidebar-compact:not(.sidebar-hidden) { grid-template-columns: 56px 1fr; }
}
html[data-v2] .v2-sidebar-compact .v2-tabrail-title,
html[data-v2] .v2-sidebar-compact .v2-tab-label,
html[data-v2] .v2-sidebar-compact .v2-tab-clear-all span { display: none; }
html[data-v2] .v2-sidebar-compact .v2-tabrail-head {
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
html[data-v2] .v2-sidebar-compact .v2-tabrail-head-btns { flex-direction: column; }
html[data-v2] .v2-sidebar-compact .v2-tab { justify-content: center; padding: 8px 4px; }
html[data-v2] .v2-sidebar-compact .v2-tab-close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 15px;
  height: 15px;
  background: var(--bg-1);
}
/* in compact mode, close button only on hover (not active) */
html[data-v2] .v2-sidebar-compact .v2-tab.active .v2-tab-close { opacity: 0; }
html[data-v2] .v2-sidebar-compact .v2-tab:hover .v2-tab-close { opacity: 1; }
html[data-v2] .v2-sidebar-compact .v2-tab-clear-all { padding: 7px 0; }

/* Tabs are never hidden by the engine's "no content yet" rule */
html[data-v2] .app.no-content .sidebar .v2-tabrail { display: flex !important; }

/* ── Fully rounded elements ─────────────────────────────────────────── */
html[data-v2] .action-btn,
html[data-v2] .v2-format,
html[data-v2] .v2-way,
html[data-v2] .v2-tab,
html[data-v2] .v2-way-btn,
html[data-v2] .v2-rail-btn,
html[data-v2] .v2-tab-clear-all,
html[data-v2] .sb-shortcuts-btn,
html[data-v2] .ai-open-btn,
html[data-v2] .tab-btn,
html[data-v2] .seg-btn,
html[data-v2] .seg-toggle,
html[data-v2] .toolbar-btn,
html[data-v2] .sidebar-toggle-btn,
html[data-v2] .v2-tab-close,
html[data-v2] .v2-format-ic,
html[data-v2] .dropzone.v2-drop { border-radius: 999px !important; }

/* ── Image adjust/info panel width ─────────────────────────────────── */
html[data-v2] #image-panels.image-split #image-edit-panel { flex: 0 0 280px; }
html[data-v2] #image-edit-panel .url-analysis,
html[data-v2] #media-details-panel .url-analysis { max-width: none; padding: 14px; }

/* ── Image edit panel rounded controls ─────────────────────────────── */
html[data-v2] #image-edit-panel .media-sub-add-btn,
html[data-v2] #image-edit-panel .image-crop-cancel,
html[data-v2] #image-edit-panel .image-panel-close,
html[data-v2] #image-edit-panel .image-slider,
html[data-v2] #image-edit-panel .image-num,
html[data-v2] #image-edit-panel .media-select,
html[data-v2] #image-edit-panel .url-info-item { border-radius: 999px !important; }

/* ── Media details panel width & rounded controls ──────────────────── */
html[data-v2] #media-panels.media-split #media-details-panel { flex: 0 0 280px; }
html[data-v2] #media-details-panel .media-select,
html[data-v2] #media-details-panel .media-sub-input,
html[data-v2] #media-details-panel .media-sub-add-btn,
html[data-v2] #media-details-panel .url-copy,
html[data-v2] #media-details-panel .url-info-item,
html[data-v2] #media-details-panel .image-panel-close { border-radius: 999px !important; }

/* ── Remaining rounded controls (crop bar, URL fetch, TOON, AI, modal, etc.) ── */
html[data-v2] .btn-go-url,
html[data-v2] .toon-dl-btn,
html[data-v2] .ai-close-btn,
html[data-v2] .ai-send-btn,
html[data-v2] .ai-msg-copy-btn,
html[data-v2] .ai-code-copy-btn,
html[data-v2] .ai-input,
html[data-v2] .shortcuts-modal-close,
html[data-v2] .sidebar-clear-history-btn,
html[data-v2] .regex-ai-explain-btn,
html[data-v2] .pdf-nav-btn,
html[data-v2] .url-copy,
html[data-v2] .url-info-item,
html[data-v2] #url-input,
html[data-v2] #image-crop-bar .media-sub-add-btn,
html[data-v2] #image-crop-bar .image-crop-cancel { border-radius: 999px !important; }

/* ── Archive action icon colors ────────────────────────────────────── */
html[data-v2] #btn-archive-extract .action-icon { color: var(--accent); }
html[data-v2] #btn-archive-extract-all .action-icon { color: var(--c-num); }
html[data-v2] #btn-archive-clear .action-icon { color: var(--error); }
html[data-v2] [data-archive-act="open"]   .action-icon { color: var(--c-str); }
html[data-v2] [data-archive-act="extract"] .action-icon { color: var(--accent); }

/* ── Archive toolbar button padding ─────────────────────────────────── */
html[data-v2] #toolbar-actions-archive .action-btn {
  padding: 4px 14px !important;
  gap: 4px;
}
html[data-v2] #toolbar-actions-archive .convert-dropdown-menu .action-btn {
  padding: 6px 12px !important;
}
html[data-v2] #toolbar-actions-archive { gap: 6px; }
html[data-v2] #toolbar-actions-archive .action-btns { gap: 4px; }

/* ── Archive preview action buttons ────────────────────────────────── */
html[data-v2] .archive-preview-acts .action-btn {
  padding: 4px 14px !important;
  flex-direction: row;
  gap: 4px;
  font-size: 10px;
  min-height: 26px;
}
html[data-v2] #btn-archive-convert {
  display: flex;
  align-items: center;
  gap: 4px;
}
html[data-v2] #btn-archive-convert .icon-chevron-down {
  width: 12px;
  height: 12px;
}
html[data-v2] #btn-convert-json,
html[data-v2] #btn-convert-toon,
html[data-v2] #btn-convert-other,
html[data-v2] #btn-convert-pdf {
  display: flex;
  align-items: center;
  gap: 4px;
}
html[data-v2] #btn-convert-json .icon-chevron-down,
html[data-v2] #btn-convert-toon .icon-chevron-down,
html[data-v2] #btn-convert-other .icon-chevron-down,
html[data-v2] #btn-convert-pdf .icon-chevron-down {
  width: 12px;
  height: 12px;
}