@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=DM+Serif+Display:ital@0;1&display=swap');

/* ── Toggle bar (shared across all widgets) ── */
html.embedded .toggle-bar { display: none; }
.toggle-bar {
  position: fixed; top: 1rem; right: 1rem;
  display: flex; gap: 0.4rem; z-index: 200;
}
.toggle-bar button, .bar-btn {
  background: none; border: 1px solid #2a2a2e; border-radius: 8px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #555; transition: border-color 0.2s, color 0.2s; padding: 0;
  text-decoration: none;
}
.toggle-bar button:hover, .bar-btn:hover { border-color: #888; color: #c9d1d9; }
[data-theme="light"] .toggle-bar button, [data-theme="light"] .bar-btn { border-color: #d4c4b0; color: #8a7060; }
[data-theme="light"] .toggle-bar button:hover, [data-theme="light"] .bar-btn:hover { border-color: #8a7060; color: #3d2b22; }

/* ── Context menu ── */
.ctx-menu {
  position: fixed;
  background: #1e1e22; border: 1px solid #2a2a2e; border-radius: 8px;
  padding: 4px; z-index: 500; min-width: 140px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.ctx-menu[hidden] { display: none; }
.ctx-menu button {
  display: block; width: 100%; padding: 7px 10px;
  background: none; border: none; border-radius: 5px;
  font-family: inherit; font-size: 0.72rem; color: #c8c6c1;
  cursor: pointer; text-align: left;
}
.ctx-menu button:hover { background: #2a2a2e; color: #e8e6e1; }
.ctx-menu button.active { color: #6b9ebb; }
.ctx-bg { padding: 4px 10px 6px; }
.ctx-bg[hidden] { display: none; }
.ctx-bg-row {
  display: flex; align-items: center; gap: 4px;
}
.ctx-bg-row input {
  width: 100%; padding: 4px 6px;
  background: #121215; border: 1px solid #2a2a2e; border-radius: 4px;
  font-family: inherit; font-size: 0.68rem; color: #c8c6c1;
  outline: none;
}
.ctx-bg-row input::placeholder { color: #555; }
.ctx-bg-row input:focus { border-color: #6b9ebb; }
.ctx-bg-clear {
  background: none; border: none; color: #555;
  font-size: 0.85rem; cursor: pointer; padding: 0 2px; line-height: 1;
}
.ctx-bg-clear:hover { color: #c8c6c1; }
.ctx-bg-swatches { display: flex; gap: 4px; margin-top: 4px; }
.ctx-bg-swatch {
  width: 18px; height: 18px; border-radius: 4px; border: 1px solid #2a2a2e;
  cursor: pointer; transition: border-color 0.15s, transform 0.15s; padding: 0;
}
.ctx-bg-swatch:hover { border-color: #888; transform: scale(1.15); }
.ctx-bg-swatch.active { border-color: #6b9ebb; }
[data-theme="light"] .ctx-bg-swatch { border-color: #d4c4b0; }
[data-theme="light"] .ctx-bg-swatch:hover { border-color: #8a7060; }
[data-theme="light"] .ctx-bg-swatch.active { border-color: #4a7a9a; }
[data-theme="light"] .ctx-bg-row input { background: #f4e9da; border-color: #d4c4b0; color: #3d2b22; }
[data-theme="light"] .ctx-bg-row input::placeholder { color: #a89080; }
[data-theme="light"] .ctx-bg-row input:focus { border-color: #4a7a9a; }
[data-theme="light"] .ctx-bg-clear { color: #a89080; }
[data-theme="light"] .ctx-bg-clear:hover { color: #3d2b22; }
[data-theme="light"] .ctx-menu { background: #ede3d6; border-color: #d4c4b0; }
[data-theme="light"] .ctx-menu button { color: #3d2b22; }
[data-theme="light"] .ctx-menu button:hover { background: #d4c4b0; }
[data-theme="light"] .ctx-menu button.active { color: #4a7a9a; }

/* ── Share button feedback ── */
#btn-share { position: relative; }
#btn-share.share-copied { border-color: #4ade80; color: #4ade80; }
#btn-share.share-copied::after {
  content: 'Copiado';
  position: absolute; top: calc(100% + 6px); right: 0;
  background: #1e1e22; border: 1px solid #2a2a2e; border-radius: 5px;
  padding: 3px 8px; font-family: 'DM Mono', monospace; font-size: 10px;
  color: #4ade80; white-space: nowrap; pointer-events: none;
  animation: share-fade 1.5s ease-out forwards;
}
[data-theme="light"] #btn-share.share-copied { border-color: #3a9a5a; color: #3a9a5a; }
[data-theme="light"] #btn-share.share-copied::after {
  background: #ede3d6; border-color: #d4c4b0; color: #3a9a5a;
}
@keyframes share-fade {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Capture download block ── */
.ctx-capture-dl { padding: 4px 10px 6px; }
.ctx-capture-dl[hidden] { display: none; }
.ctx-label {
  font-size: 0.65rem; color: #555; margin-bottom: 4px;
  font-family: inherit; letter-spacing: 0.03em;
}
.ctx-scale-row { display: flex; gap: 3px; margin-bottom: 6px; }
.ctx-scale {
  flex: 1; padding: 4px 0;
  background: #121215; border: 1px solid #2a2a2e; border-radius: 4px;
  font-family: inherit; font-size: 0.65rem; color: #888;
  cursor: pointer; text-align: center; transition: all 0.15s;
}
.ctx-scale:hover { border-color: #555; color: #c8c6c1; }
.ctx-scale.active { border-color: #6b9ebb; color: #6b9ebb; background: rgba(107,158,187,0.08); }
.ctx-dl-btn {
  width: 100%; padding: 6px 0;
  background: rgba(107,158,187,0.1); border: 1px solid #2a2a2e; border-radius: 5px;
  font-family: inherit; font-size: 0.7rem; color: #6b9ebb;
  cursor: pointer; transition: all 0.15s;
}
.ctx-dl-btn:hover { background: rgba(107,158,187,0.18); border-color: #6b9ebb; }
.ctx-dl-btn:disabled { opacity: 0.5; cursor: wait; }

[data-theme="light"] .ctx-label { color: #a89080; }
[data-theme="light"] .ctx-scale { background: #f4e9da; border-color: #d4c4b0; color: #8a7060; }
[data-theme="light"] .ctx-scale:hover { border-color: #8a7060; color: #3d2b22; }
[data-theme="light"] .ctx-scale.active { border-color: #4a7a9a; color: #4a7a9a; background: rgba(74,122,154,0.08); }
[data-theme="light"] .ctx-dl-btn { background: rgba(74,122,154,0.08); border-color: #d4c4b0; color: #4a7a9a; }
[data-theme="light"] .ctx-dl-btn:hover { background: rgba(74,122,154,0.15); border-color: #4a7a9a; }

/* ── Record button ── */
.ctx-record-btn {
  width: 100%; padding: 6px 0; margin-top: 4px;
  background: rgba(239,68,68,0.08); border: 1px solid #2a2a2e; border-radius: 5px;
  font-family: inherit; font-size: 0.7rem; color: #ef4444;
  cursor: pointer; transition: all 0.15s;
}
.ctx-record-btn:hover { background: rgba(239,68,68,0.18); border-color: #ef4444; }
.ctx-record-btn.active { background: rgba(239,68,68,0.2); border-color: #ef4444; animation: rec-pulse 1.2s ease-in-out infinite; }
@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
[data-theme="light"] .ctx-record-btn { background: rgba(220,50,50,0.06); border-color: #d4c4b0; color: #c53030; }
[data-theme="light"] .ctx-record-btn:hover { background: rgba(220,50,50,0.12); border-color: #c53030; }
[data-theme="light"] .ctx-record-btn.active { border-color: #c53030; }

/* ── Capture mode ── */
html.capture .toggle-bar { display: none; }

/* Floating capture button — only visible in capture mode */
.capture-fab { display: none; }
html.capture .capture-fab {
  display: flex; align-items: center; justify-content: center;
  position: fixed; bottom: 1rem; right: 1rem; z-index: 200;
  width: 32px; height: 32px;
  background: #1e1e22; border: 1px solid #2a2a2e; border-radius: 8px;
  color: #6b9ebb; cursor: pointer; transition: border-color 0.2s, color 0.2s;
  padding: 0;
}
html.capture .capture-fab:hover { border-color: #6b9ebb; color: #c9d1d9; }
[data-theme="light"] html.capture .capture-fab { background: #ede3d6; border-color: #d4c4b0; color: #4a7a9a; }
[data-theme="light"] html.capture .capture-fab:hover { border-color: #4a7a9a; color: #3d2b22; }