/* ═══════════════════════════════════════════════════
   RIGHT PANEL
═══════════════════════════════════════════════════ */
#_sd_right {
  width: 0;
  opacity: 0;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  transition: width .32s cubic-bezier(.4,0,.2,1),
              opacity .25s ease;
}
body.style-mode #_sd_right {
  width: var(--ui-panel-width);
  opacity: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
#_sd_right::-webkit-scrollbar { width: 5px; }
#_sd_right::-webkit-scrollbar-track { background: transparent; }
#_sd_right::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

#_sd_right-header {
  display: flex;
  align-items: center;
  min-height: var(--ui-toolbar-height);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.sdocs-sheet-close { display: none; }

/* ── Theme tabs ── */
#_sd_theme-tabs {
  margin-bottom: 10px;
}
#_sd_theme-tabs .toggle-group {
  display: flex;
  width: 100%;
  gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
#_sd_theme-tabs .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 0;
  border: none;
  background: none;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  transition: background .12s, color .12s;
}
#_sd_theme-tabs .btn:hover {
  background: var(--bg-hover);
  color: var(--text-2);
}
#_sd_theme-tabs .btn.active {
  background: var(--bg-panel);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
#_sd_theme-tabs .btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ── Panel sections ── */
.panel-section { border-bottom: 1px solid var(--border-subtle); }

.panel-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  transition: background .1s;
}
.panel-header:hover { background: var(--bg-hover); }
.panel-header .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--text-3);
  transition: transform .18s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}
.panel-header.open .arrow { transform: rotate(90deg); }
.panel-header .section-icon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 9px;
}

.panel-body { display: none; padding: 10px 12px 12px; }
.panel-body.open { display: block; }

/* Sub-sections */
.sub-section { margin-top: 6px; }
.sub-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  user-select: none;
  transition: background .1s, border-color .1s;
}
.sub-header:hover { background: var(--bg-hover); border-color: var(--border); }
.sub-header .arrow {
  font-size: 9px;
  color: var(--text-3);
  transition: transform .18s cubic-bezier(.4,0,.2,1);
}
.sub-header.open .arrow { transform: rotate(90deg); }
.sub-header .tag {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--bg-panel-deep);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: 'JetBrains Mono', monospace;
}
.sub-body { display: none; padding: 8px 2px 2px; }
.sub-body.open { display: block; }

/* ── Controls ── */
.control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  gap: 6px;
  min-height: 26px;
}
.control-row label {
  font-size: 11.5px;
  color: var(--text-2);
  flex-shrink: 0;
  min-width: 80px;
  font-weight: 400;
}
.control-row input[type=range] {
  flex: 1;
  height: 4px;
  accent-color: var(--accent);
  cursor: pointer;
}
.control-row input[type=number] {
  width: 48px;
  flex-shrink: 0;
  padding: 3px 5px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 11.5px;
  font-family: var(--font-ui);
  text-align: right;
  transition: border-color .12s;
}
.control-row input[type=number]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37,99,235,.12);
}
.control-row input[type=color] {
  width: 28px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  cursor: pointer;
  padding: 1px;
  box-shadow: var(--shadow-sm);
}
.control-row select {
  flex: 1;
  padding: 4px 7px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 11.5px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color .12s;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A8A29E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}
.control-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37,99,235,.12);
}
.unit {
  font-size: 10.5px;
  color: var(--text-3);
  flex-shrink: 0;
  min-width: 14px;
}

.reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1;
  transition: color .12s, background .12s;
  padding: 0;
}
.reset-btn:hover {
  color: var(--text-2);
  background: var(--bg-hover);
}
.reset-btn title { display: none; }

.color-pair {
  display: flex;
  align-items: center;
  gap: 4px;
}

.factory-reset-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 5px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-3);
  font-size: 11px;
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.factory-reset-btn:hover {
  color: var(--text-1);
  background: var(--bg-hover);
  border-color: var(--text-3);
}

/* Color row: swatch + label combo */
.color-preview {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   EXPORT PANEL
═══════════════════════════════════════════════════ */
#_sd_export-panel {
  width: 0;
  opacity: 0;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  transition: width .32s cubic-bezier(.4,0,.2,1),
              opacity .25s ease;
}
body.export-mode #_sd_export-panel {
  width: var(--ui-panel-width);
  opacity: 1;
  overflow-y: auto;
}

#_sd_export-panel-header {
  display: flex;
  align-items: center;
  min-height: var(--ui-toolbar-height);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  flex-shrink: 0;
}

.export-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-ui);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.export-option:hover { background: var(--bg-hover); }
.export-option:active { background: var(--bg-active); }
.export-option svg {
  flex-shrink: 0;
  color: var(--text-2);
}
.export-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.export-option-title {
  font-size: 13px;
  font-weight: 500;
}
.export-option-desc {
  font-size: 11px;
  color: var(--text-3);
}

/* ═══════════════════════════════════════════════════
   INFO PANEL
═══════════════════════════════════════════════════ */
#_sd_info-panel {
  width: 0;
  opacity: 0;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  transition: width .32s cubic-bezier(.4,0,.2,1),
              opacity .25s ease;
}
body.info-mode #_sd_info-panel {
  width: var(--ui-panel-width);
  opacity: 1;
  overflow-y: auto;
}

#_sd_info-panel-header {
  display: flex;
  align-items: center;
  min-height: var(--ui-toolbar-height);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  flex-shrink: 0;
}

#_sd_info-panel-body {
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Top-of-panel settings */
.info-settings {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.info-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.info-settings-label {
  font-size: 12.5px;
  color: var(--text);
}
.info-settings-toggle {
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.info-settings-toggle .btn {
  padding: 4px 12px;
  font-size: 11px;
}
.info-settings-help {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
  margin: 6px 0 0;
}

.info-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-bottom: 8px;
}

.info-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.info-feature-item {
  position: relative;
  padding: 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.info-feature-item.is-new {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-subtle));
}
.info-feature-new {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
}
.info-feature-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.info-feature-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text-3);
}
.info-feature-date {
  color: var(--text-3);
}
.info-feature-link {
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 500;
}
.info-feature-link:hover { text-decoration: underline; }
.info-feature-body {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 6px;
  line-height: 1.5;
}
.info-feature-empty {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}

textarea#_sd_info-feedback {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
  min-height: 90px;
}
textarea#_sd_info-feedback:focus {
  outline: none;
  border-color: var(--accent);
}

.info-feedback-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.info-feedback-actions .btn {
  padding: 6px 14px;
}
.info-feedback-status {
  font-size: 11px;
  color: var(--text-3);
}
.info-feedback-ok { color: var(--accent-text); }
.info-feedback-warn { color: #c2410c; }

.info-feedback-note {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
  margin: 10px 0 0;
}
.info-feedback-note a {
  color: var(--text-2);
  text-decoration: underline;
}

.info-feedback-warning {
  font-size: 11px;
  line-height: 1.5;
  margin: 6px 0 0;
  padding: 6px 9px;
  color: #9a3412;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: var(--radius);
}
@media (prefers-color-scheme: dark) {
  .info-feedback-warning {
    color: #fdba74;
    background: #2a1b0f;
    border-color: #7c2d12;
  }
}

/* Links section at bottom of info panel */
.info-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.info-links li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 0;
}
.info-links li + li {
  border-top: 1px solid var(--border-subtle);
}
.info-links a {
  font-size: 12.5px;
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 500;
}
.info-links a:hover { text-decoration: underline; }
.info-links-desc {
  font-size: 11px;
  color: var(--text-3);
}
.info-section-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
}
.info-section-text a { color: var(--accent); }

/* Toolbar-button corner dot (info "new features", comment "doc has comments").
   Per-button color comes from --btn-dot-color (set inline by JS); the default
   --accent keeps the info-button's existing blue. Faint ring is insurance
   against pale custom colors (e.g. user-picked white) on a light chrome. */
.btn-with-dot { position: relative; }
.btn-with-dot .info-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--btn-dot-color, var(--accent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-panel) 65%, transparent);
  display: none;
  pointer-events: none;
}
.btn-with-dot.has-unseen .info-dot { display: block; }

/* ═══════════════════════════════════════════════════
   FOOTER / STATUS
═══════════════════════════════════════════════════ */
#_sd_statusbar {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: var(--bg);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
#_sd_statusbar span {
  font-size: 12px;
  color: var(--text-2);
}
#_sd_statusbar .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22C55E;
  flex-shrink: 0;
}
/* Footer link cluster. Single line, never wraps - the fixed 24px bar
   has no room for a second line, so as the window narrows we drop whole
   items (see the breakpoints in mobile.css) rather than letting them
   wrap and overflow the bar. Each item carries its own leading "·" via
   ::before, so hiding an item takes its separator with it (no orphan
   dots). #sb-private is always the first visible item, so it never
   shows a leading dot. */
#_sd_sb-links .sb-item {
  /* inline-block, not inline-flex: a flex item collapses the whitespace
     text node between an item's label and its link ("You agree to our"
     + "Terms"). Only #sb-cli, with its chips, needs flex. */
  display: inline-block;
  white-space: nowrap;
  /* Keep natural width: the cluster fits by dropping whole items
     (fitFooter), never by squashing them. */
  flex-shrink: 0;
}
#_sd_sb-links .sb-item:not(:first-child)::before {
  content: "\00B7";
  margin-right: 6px;
  color: var(--text-2);
}
#_sd_sb-links #sb-cli { display: inline-flex; align-items: center; gap: 6px; }
/* Install-command chip. display lives here (not inline) so fitFooter's
   reset (clearing the inline display) restores the chip to inline-flex
   rather than a plain inline span. */
#_sd_sb-links #_sd_cli-install-wrap { display: inline-flex; }
/* Separator between the prompt chip and the install command inside the
   CLI item; hidden with the install command at the first breakpoint. */
#_sd_sb-links #_sd_cli-install-wrap::before {
  content: "\00B7";
  margin-right: 6px;
  color: var(--text-2);
}