/*
 * Edit overlays: layout and sizing for every screen.
 *
 * The overlays are positioned and sized from inline styles in JS, so these
 * rules use !important — the only way to beat a style attribute without
 * rewriting the generators.
 *
 * Sizes come from clamp() rather than fixed pixels: a phone reports ~400 CSS
 * px regardless of its physical size, so hardcoded values look tiny on one
 * device and huge on another. clamp keeps them proportional with sane limits,
 * and the same numbers read well on a desktop window.
 */

#line-edit-overlay,
#symbol-edit-overlay,
#furniture-edit-overlay,
#area-height-overlay,
#dimension-edit-overlay {
  width: min(84vw, 374px) !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding: clamp(9px, 2.2vw, 13px) !important;
  font-size: clamp(12px, 3.3vw, 14px) !important;
}

#line-edit-overlay input[type="text"],
#symbol-edit-overlay input[type="text"],
#furniture-edit-overlay input[type="text"],
#area-height-overlay input[type="text"],
#dimension-edit-overlay input[type="text"],
#line-edit-overlay select,
#symbol-edit-overlay select,
#furniture-edit-overlay select {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: clamp(6px, 1.6vw, 8px) clamp(7px, 2.2vw, 10px) !important;
  font-size: clamp(13px, 3.3vw, 15px) !important;
}

@media (pointer: coarse) {
  /* 16px is what stops iOS Safari zooming the page when a field is focused;
     only touch devices need it. */
  #line-edit-overlay input[type="text"],
  #symbol-edit-overlay input[type="text"],
  #furniture-edit-overlay input[type="text"],
  #area-height-overlay input[type="text"],
  #dimension-edit-overlay input[type="text"],
  #line-edit-overlay select,
  #symbol-edit-overlay select,
  #furniture-edit-overlay select {
    font-size: 16px !important;
  }
}

/* Label and field on one row, name column narrow. */
#line-edit-overlay label,
#area-height-overlay label {
  display: flex !important;
  align-items: center !important;
  gap: clamp(5px, 1.7vw, 9px) !important;
  width: 100% !important;
}

#line-edit-overlay label > span {
  flex: 0 0 auto !important;
  min-width: clamp(57px, 17.6vw, 79px) !important;
}

/* The line overlay's single flex row becomes a stack. */
#line-edit-overlay > div {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: clamp(6px, 1.8vw, 9px) !important;
}

#line-edit-overlay button,
#symbol-edit-overlay button,
#furniture-edit-overlay button,
#area-height-overlay button,
#dimension-edit-overlay button {
  min-height: clamp(33px, 8.8vw, 42px) !important;
  padding: clamp(6px, 1.8vw, 9px) clamp(9px, 3.3vw, 13px) !important;
  font-size: clamp(12px, 3.3vw, 14px) !important;
}

/* ---------------------------------------------------------------- rulers --
 * The rulers eat 20–24px along the right and bottom edges. On a phone that
 * strip is a noticeable slice of an already small drawing area, and the
 * markings are too fine to read at that size anyway, so drop them on touch
 * screens. --ruler-size drives the canvas width, margins and the ruler
 * canvases themselves, so zeroing it removes the gap as well as the rulers.
 */
:root {
  --ruler-size: 0px !important;
}

#ruler-right,
#ruler-bottom,
#ruler-corner {
  display: none !important;
}
/* ------------------------------------------------------------- landscape --
 * styles.css only has a portrait rule for phones (max-width: 640px), so a
 * rotated phone falls into the 900px tablet layout: the toolbar keeps its
 * portrait paddings, runs out of vertical room and gets clipped.
 *
 * Keyed on height rather than orientation so it also covers a short desktop
 * window, and on coarse pointers so a normal desktop is left alone.
 */
@media (pointer: coarse) and (max-height: 560px) {
  :root {
    /* Every pixel of height counts when there are only ~400 of them. */
    --topbar-height: 40px;
    /* styles.css collapses the drawer to 0px under max-width:900px, which a
       rotated phone matches — so the tool buttons were clipped by an
       zero-width rail. The portrait rule uses 54px; keep that here. */
    --drawer-collapsed-width: 54px;
  }

  /* The heading is dead weight when the icons are self-explanatory. */

  .top-menu-bar {
    min-height: 40px !important;
  }
}

/* ------------------------------------------------- landscape = portrait --
 * styles.css puts the phone tool sizing and the materials handle inside
 * `@media (orientation: portrait) and (max-width: 640px)`. Rotating the phone
 * leaves that block, so the buttons fall back to the 900px tablet sizing and
 * the right-hand handle disappears entirely.
 *
 * These are the same declarations, re-applied for short touch screens.
 */
@media (pointer: coarse) and (max-height: 560px) {

  body.menu-open #side-menu {
    padding: 16px 12px 22px !important;
  }

  /* The right-side handle that opens the materials panel. */
  .materials-ruler-toggle {
    display: flex !important;
    right: 0 !important;
    width: 16px !important;
    height: 42px !important;
  }

  .element-library.open .element-library-content {
    max-height: min(46vh, 220px) !important;
  }

  .element-library-submenu,
  .element-library-list {
    gap: 8px !important;
  }

  .element-lib-item {
    min-width: 76px !important;
  }
}

/* --------------------------------------------- landscape big panels --
 * The panel slides in and out with transform: translateX(), so scaling it
 * with transform overrode that and left it permanently open. Shrink the
 * content instead: a narrower panel and smaller type, with the transform
 * untouched so open/close keeps working.
 */
@media (pointer: coarse) and (max-height: 560px) {
  #materials-panel {
    --materials-panel-width: 340px !important;
    /* Full height of the drawing area, below the top bar. */
    top: var(--topbar-height) !important;
    bottom: 0 !important;
    height: auto !important;
    font-size: 13px !important;
  }

  #materials-panel .settings-title {
    font-size: 16px !important;
  }

  #materials-panel .settings-header {
    padding: 8px 12px !important;
  }

  #materials-panel .settings-close {
    width: 30px !important;
    height: 30px !important;
  }

  /* The section cards carry generous portrait padding. */
  #materials-panel section,
  #materials-panel .materials-group,
  #materials-panel .tool-row {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #settings-panel,
  #open-drawings-panel,
  #custom-symbol-editor,
  #share-panel {
    max-height: calc(var(--app-height) - 8px) !important;
    font-size: 13px !important;
  }
}

/* ------------------------------------------------ narrow desktop window --
 * styles.css changes the rail at 900px — turning it into a hidden drawer
 * and resizing the buttons. The buttons should instead keep one fixed
 * size at every window width, so the compact rail is pinned here for all
 * mouse-driven windows, along with the materials handle that the 900px
 * block hides.
 *
 * Mouse only — touch devices are covered by the coarse-pointer blocks above.
 */
@media (pointer: fine) {
  :root {
    --drawer-collapsed-width: 54px !important;
  }

  .materials-ruler-toggle {
    display: flex !important;
    right: 0 !important;
  }
}


/* ============================================================ TOOL RAIL ==
 * Left to right, on every device, orientation and window size:
 *
 *   [12px scrollbar — only while scrolling] 6px | 34px button | 6px | handle
 *
 * content-box is the point: the declared width is the button itself, so
 * padding and the scrollbar are added outside it and can never squeeze the
 * button. direction:rtl puts the scrollbar on the left of the buttons; the
 * children flip back to ltr.
 *
 * The 12px strip is reserved only when the list actually overflows —
 * wg-rail.js measures that and toggles .wg-rail-scrolling, because
 * scrollbar-gutter would hold the space permanently.
 */
body:not(.menu-open) #side-menu {
  box-sizing: content-box !important;
  width: 34px !important;
  padding: 10px 6px 14px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  overscroll-behavior: contain !important;
  direction: rtl !important;
  transform: none !important;
}

body:not(.menu-open) #side-menu.wg-rail-scrolling {
  /* 12px for the bar itself plus a 3px gap before the buttons. The rail is
     content-box, so this widens it instead of shrinking the buttons. */
  padding-left: 15px !important;
}

body:not(.menu-open) #side-menu > * {
  direction: ltr !important;
}

body:not(.menu-open) #side-menu .tool-button {
  box-sizing: border-box !important;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}

body:not(.menu-open) #side-menu .tool-button .tool-button-text {
  display: none !important;
}

body:not(.menu-open) #side-menu .tool-button .tool-button-icon,
body:not(.menu-open) #side-menu .tool-button .tool-button-icon svg {
  width: 16px !important;
  height: 16px !important;
  flex-basis: 16px !important;
  margin: 0 !important;
}

body:not(.menu-open) #side-menu .menu-title,
body:not(.menu-open) #side-menu .menu-subtitle {
  display: none !important;
}

/* Handle sits immediately past the rail: 6 + 34 + 6, plus the scrollbar when
   it is there. Scoped to the closed state so styles.css keeps control while
   the drawer is open. */
body:not(.menu-open) #menu-toggle {
  left: 46px !important;
}

body.wg-rail-scrolled:not(.menu-open) #menu-toggle {
  left: 55px !important;
}


/* ========================================================= FIXED PANELS ==
 * styles.css redefines every panel dimension at each breakpoint — the top bar
 * is 44/52/48px depending on width, the tool rail 80/0/54px, the materials
 * panel follows the viewport. So the layout shifted whenever the window was
 * resized or the phone rotated.
 *
 * These pin one size for all of them, at every width, on every device.
 */
:root {
  /* Top bar */
  --topbar-height: 44px !important;

  /* Left rail: 6 + 34 + 6, matching the TOOL RAIL block above. */
  --drawer-collapsed-width: 46px !important;

  /* Right panel: fixed instead of min(475px, 100vw - 28px). */
  --materials-panel-width: 380px !important;

  /* Expanded drawer */
  --drawer-width: 280px !important;
}

/* Right panel: one width everywhere, capped so it cannot exceed a narrow
   screen. */
#materials-panel {
  width: var(--materials-panel-width) !important;
  max-width: calc(100vw - 46px) !important;
}

/* Bottom handle for the element library. */
.element-library-toggle {
  width: 48px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
}

/* The library sheet itself: a fixed slice of the screen rather than a
   viewport-relative one, so it does not jump between orientations. */
.element-library.open .element-library-content {
  max-height: 240px !important;
}

/* Top bar height must match the variable, or the canvas offset drifts. */
#top-bar {
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
}


/* ======================================================== STATIC PANELS ==
 * Everything else in styles.css is sized against the viewport — min(420px,
 * 100vw - 32px), max-height: 40vh, min(86vw, 320px) and so on — so every
 * panel resizes as the window changes or the phone rotates.
 *
 * Fixed values here, with max-width/max-height caps only as an overflow
 * guard on genuinely narrow screens.
 */

/* Share */
#share-panel {
  max-height: calc(var(--app-height) - var(--topbar-height) - 16px) !important;
  width: 420px !important;
  max-width: calc(100vw - 16px) !important;
}

/* Measurements */
#measure-panel {
  width: 380px !important;
  max-width: calc(100vw - 16px) !important;
}

/* Custom symbol editor */
#custom-symbol-editor {
  max-height: calc(var(--app-height) - var(--topbar-height) - 16px) !important;
  width: 920px !important;
  max-width: calc(100vw - 16px) !important;
}

/* Settings */
#settings-panel {
  width: 760px !important;
  max-width: calc(100vw - 16px) !important;
  height: min(640px, calc(var(--app-height) - var(--topbar-height) - 16px)) !important;
  max-height: calc(var(--app-height) - var(--topbar-height) - 16px) !important;
}

/* Saved drawings */
#open-drawings-panel {
  max-height: calc(var(--app-height) - var(--topbar-height) - 16px) !important;
  width: 420px !important;
  max-width: calc(100vw - 16px) !important;
}

#drawings-list {
  max-height: 360px !important;
}

/* Drawing title in the top bar */
.current-drawing-title {
  max-width: 320px !important;
}

.current-drawing-title.is-editing {
  max-width: 420px !important;
}

/* Expanded tool drawer. transition:none is the important part: styles.css
   animates width over 0.34s, and animating between competing !important
   widths pinned the main thread. */
body.menu-open #side-menu {
  width: 280px !important;
  transition: none !important;
}

body:not(.menu-open) #side-menu {
  transition: none !important;
}

body.menu-open #menu-toggle {
  left: 280px !important;
}


/* ====================================================== STATIC TOP BAR ==
 * The top bar was the last moving part: styles.css gives .top-menu-bar
 * max-width: calc(100vw - 156px) under 900px and calc(100vw - 112px) under
 * 640px, plus flex: 1 1 auto — so it stretched with the window. The "Файл"
 * trigger itself had three sizes (36px, then padding-inline 8px/font 14px,
 * then height 30px/padding-inline 6px).
 *
 * One size for all of it, at every width.
 */
.top-menu-bar {
  flex: 0 0 auto !important;
  max-width: none !important;
  gap: 2px !important;
  overflow: visible !important;
}

.top-menu-trigger {
  height: 36px !important;
  padding: 6px 12px !important;
  padding-inline: 12px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  flex: 0 0 auto !important;
}

/* Dropdown under the trigger. */
.top-menu-dropdown {
  min-width: 220px !important;
}

/* Zoom controls: 34px base, 36px under 900px, 32px under 640px. */
.top-zoom-controls {
  height: 28px !important;
  padding: 0 4px !important;
  gap: 2px !important;
  flex: 0 0 auto !important;
}

#top-bar {
  padding: 0 12px !important;
}


/* ===================================================== STATIC CONTROLS ==
 * The last three moving pieces.
 */

/* "Файл" dropdown: one width, but never wider than the screen. */
.top-menu-dropdown {
  min-width: 220px !important;
  width: 220px !important;
  max-width: calc(100vw - 16px) !important;
  box-sizing: border-box !important;
}

/* Zoom readout: 54px base, 44px with a smaller font under 900px. */
.top-zoom-level {
  min-width: 44px !important;
  width: 44px !important;
  height: 24px !important;
  font-size: 13px !important;
  flex: 0 0 auto !important;
}

/* Preview button: 44px base, 52px under 640px. */
.preview-toggle {
  width: 44px !important;
  height: 44px !important;
  right: 12px !important;
  bottom: 12px !important;
  flex: 0 0 auto !important;
}

/* The +/- buttons: 28px base, 30px under 900px. */
.top-zoom-btn,
.top-zoom-controls button {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}


/* ======================================================= DRAWING TITLE ==
 * styles.css hides the project name entirely below 900px (display:none), so
 * it vanished on a narrow window and on the phone. Show it everywhere at one
 * size, capped so it cannot collide with the menu or the zoom controls.
 */
.current-drawing-title {
  display: block !important;
  max-width: 260px !important;
  padding: 5px 10px !important;
  font-size: 15px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.current-drawing-title.is-editing {
  max-width: 320px !important;
}


/* ==================================================== FILE MENU ITEMS ==
 * Dropdown entries were 14px (and 15px in the grid variant); one step below
 * the trigger keeps the menu subordinate to it.
 */
.top-menu-item,
.top-menu-check,
.top-menu-check span,
.top-menu-status,
.top-menu-grid,
.top-menu-grid button {
  font-size: 12px !important;
}

.top-menu-item {
  padding: 6px 12px !important;
}


/* =================================================== OPEN DRAWER TEXT ==
 * Expanded tool drawer: heading 24px and buttons 15px by default, which is
 * out of step with the rest of the chrome.
 */
body.menu-open #side-menu .menu-title {
  font-size: 14px !important;
}

body.menu-open #side-menu .menu-subtitle {
  font-size: 13px !important;
}

body.menu-open #side-menu .tool-button,
body.menu-open #side-menu .tool-button .tool-button-text {
  font-size: 12px !important;
}


/* ================================================ MATERIALS PANEL TEXT ==
 * The panel title was 22px while its sections were already 14px and the rows
 * 12px. Bring the title in line; the list sizes are pinned so they cannot
 * drift with the breakpoints.
 */
#materials-panel .settings-title {
  font-size: 14px !important;
}

#materials-panel .materials-section-summary,
#materials-panel .tool-label {
  font-size: 13px !important;
}

#materials-panel .materials-count-item,
#materials-panel .materials-count-name,
#materials-panel .materials-estimate-meta,
#materials-panel .materials-estimate-total,
#materials-panel .tool-hint {
  font-size: 12px !important;
}


/* Notes textarea in the materials panel. */
.materials-notes {
  font-size: 11px !important;
}


/* ================================================= OPEN DRAWINGS PANEL ==
 * Same hierarchy as the materials panel: 14px title, 13px subheadings,
 * 12px list and buttons.
 */
#open-drawings-panel .settings-title {
  font-size: 14px !important;
}

#open-drawings-panel .settings-subtitle,
#open-drawings-panel .tool-label {
  font-size: 13px !important;
}

#open-drawings-panel .tool-hint,
#open-drawings-panel .custom-symbol-list,
#open-drawings-panel .custom-symbol-list * ,
#open-drawings-panel button {
  font-size: 12px !important;
}


/* ================================================== SHARE AND SETTINGS ==
 * Same hierarchy as the other panels: 14px title, 13px subheadings, 12px for
 * lists, controls and buttons.
 */
#share-panel .settings-title,
#settings-panel .settings-title {
  font-size: 14px !important;
}

#share-panel .settings-subtitle,
#share-panel .tool-label,
#settings-panel .settings-subtitle,
#settings-panel .tool-label,
#settings-panel .settings-tab-button,
#settings-panel .materials-section-summary {
  font-size: 13px !important;
}

#share-panel .tool-hint,
#share-panel .tool-option,
#share-panel .share-select,
#share-panel .share-filename-input,
#share-panel button,
#settings-panel .tool-hint,
#settings-panel .tool-option,
#settings-panel input,
#settings-panel select,
#settings-panel button,
#settings-panel .pricing-table,
#settings-panel .pricing-table th,
#settings-panel .pricing-table td,
#settings-panel .cable-install-label,
#settings-panel .settings-checkbox-grid,
#settings-panel .settings-checkbox-grid label {
  font-size: 12px !important;
}


/* ================================================= PANEL CONTENT HEIGHT ==
 * .settings-content caps itself with calc(100vh - 140px) — measured against
 * the window, not its own panel. With the panel pinned to 640px the content
 * still believed it had the full viewport and overflowed past the frame.
 *
 * Making the panel a flex column and letting the content take the remaining
 * space keeps the scroll area inside the panel whatever its height is.
 */
#settings-panel,
#share-panel,
#open-drawings-panel,
#custom-symbol-editor {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#settings-panel .settings-content,
#share-panel .settings-content,
#open-drawings-panel .settings-content,
#custom-symbol-editor .settings-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

#settings-panel .settings-header,
#share-panel .settings-header,
#open-drawings-panel .settings-header,
#custom-symbol-editor .settings-header {
  flex: 0 0 auto !important;
}


/* ======================================================= PANEL CENTRING ==
 * The panels centre with top: 50%, which measures the whole viewport — so a
 * tall panel on a short screen pushed its header up behind the top bar.
 * Centre within the area below the bar instead.
 */
#settings-panel,
#share-panel,
#open-drawings-panel,
#custom-symbol-editor {
  top: calc(var(--topbar-height) + (var(--app-height) - var(--topbar-height)) / 2) !important;
}


/* ========================================================= DRAWING ROWS ==
 * The row is the open button, with a bin on its right edge. Styled as one
 * card rather than two separate controls: the bin only separates visually on
 * hover, so the row reads as a single item.
 */
#open-drawings-panel .custom-symbol-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#open-drawings-panel .open-drawing-item {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  overflow: hidden !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

#open-drawings-panel .open-drawing-item:hover {
  border-color: #0f766e !important;
  box-shadow: 0 2px 10px rgba(15, 118, 110, 0.12) !important;
}

#open-drawings-panel .open-drawing-open {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
  padding: 10px 12px !important;
  border: 0 !important;
  background-color: transparent !important;
  cursor: pointer !important;
  font: inherit !important;
  min-width: 0 !important;
}

/* Small sheet glyph so a row reads as a document at a glance. */
#open-drawings-panel .open-drawing-open::before {
  content:  !important;
  flex: 0 0 auto !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  background: rgba(15, 118, 110, 0.10) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
}

#open-drawings-panel .open-drawing-open span {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
}

#open-drawings-panel .open-drawing-open strong {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#open-drawings-panel .open-drawing-open small {
  font-size: 10px !important;
  color: #94a3b8 !important;
}

#open-drawings-panel .open-drawing-delete {
  flex: 0 0 auto !important;
  width: 40px !important;
  border: 0 !important;
  border-left: 1px solid #f1f5f9 !important;
  background-color: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
}

#open-drawings-panel .open-drawing-delete:hover {
  background-color: #fff1f2 !important;
  border-left-color: #fecaca !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23be123c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") !important;
}

/* ============================================== DRAWINGS PANEL SPACING ==
 * The panel had a full-height gap where the removed hint used to sit.
 */
#open-drawings-panel .settings-content {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

#open-drawings-panel .tool-group {
  margin: 0 !important;
  padding: 0 !important;
}

#open-drawings-panel .custom-symbol-actions {
  margin-top: 12px !important;
}


/* ======================================================= CONFIRM DIALOG ==
 * Replaces window.confirm(): styled to match the panels, and it cannot be
 * suppressed by the browser the way native dialogs can.
 */
#wg-confirm {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

#wg-confirm[hidden] {
  display: none;
}

#wg-confirm .wg-confirm-box {
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
  text-align: center;
}

#wg-confirm .wg-confirm-text {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.45;
  color: #0f172a;
}

#wg-confirm .wg-confirm-actions {
  display: flex;
  gap: 8px;
}

#wg-confirm .wg-confirm-actions button {
  flex: 1 1 0;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

#wg-confirm .wg-confirm-yes {
  border-color: #0f766e;
  background: #0f766e;
  color: #fff;
}

#wg-confirm .wg-confirm-yes:hover {
  background: #0d6b64;
}

#wg-confirm .wg-confirm-no:hover {
  background: #f1f5f9;
}


/* Export button on each row, between the name and the bin. */
#open-drawings-panel .open-drawing-export {
  flex: 0 0 auto !important;
  width: 40px !important;
  border: 0 !important;
  border-left: 1px solid #f1f5f9 !important;
  background-color: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
}

#open-drawings-panel .open-drawing-export:hover {
  background-color: rgba(15, 118, 110, 0.08) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") !important;
}