/* Rechner-Fenster (public/js/ui/calculator.js): schwebt über der Notiz, frei verschiebbar und in der Größe änderbar.
   Tasten und Schrift wachsen mit dem Fenster (--cw-key und --cw-w setzt das Skript). */
.tb.calc-tb {
  margin-left: 2px;
}
.tb.calc-tb.active {
  background: var(--accent-weak);
  color: var(--accent-text);
}

.calc-widget {
  --cw-key: 56px;
  --cw-w: 320px;
  --cw-h: 504px;
  position: fixed;
  z-index: 36;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.calc-widget[hidden] {
  display: none !important;
}

/* Kopfzeile: hier wird gezogen */
.cw-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 8px 0 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  cursor: grab;
  touch-action: none;
}
.cw-head:active {
  cursor: grabbing;
}
.cw-ico {
  display: inline-flex;
  color: var(--claude, #7c3aed);
}
.cw-title {
  flex: 1;
  font-size: 14px;
  font-weight: 650;
}
.cw-hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: 600 13px/1 system-ui, sans-serif;
  cursor: pointer;
}
.cw-hbtn:hover {
  background: var(--hover);
  color: var(--text);
}
.cw-hbtn.on {
  background: var(--accent-weak);
  color: var(--accent-text);
}

.cw-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
}

/* Verlauf: frühere Rechnungen, ein Klick setzt das Ergebnis ein */
.cw-hist {
  position: relative;
  flex: 0 1 auto;
  max-height: 15%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  padding: 2px 26px 2px 2px;
  scrollbar-width: thin;
}
.cw-hist[hidden] {
  display: none;
}
.cw-h {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 8px;
  padding: 3px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: 500 clamp(11px, calc(var(--cw-w) * 0.04), 15px) / 1.3 system-ui, sans-serif;
  text-align: right;
  cursor: pointer;
}
.cw-h:hover {
  background: var(--hover);
  color: var(--text);
}
.cw-h-e {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cw-h-r {
  flex: none;
  font-weight: 650;
  color: var(--text);
}
.cw-hclear {
  position: sticky;
  top: 0;
  align-self: flex-end;
  margin: 0 -24px -22px 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  z-index: 1;
}
.cw-hclear svg {
  width: 14px;
  height: 14px;
}
.cw-hclear:hover {
  background: var(--hover);
  color: var(--danger);
}

/* Anzeige: Rechnung, darunter das Ergebnis */
.cw-disp {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.cw-expr {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 2px 0;
  background: transparent;
  color: var(--text);
  font: 500 clamp(15px, min(calc(var(--cw-w) * 0.065), calc(var(--cw-h) * 0.05)), 30px) / 1.25 ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace;
  text-align: right;
  user-select: text;
  -webkit-user-select: text;
  caret-color: var(--accent);
}
.cw-expr::placeholder {
  color: var(--muted);
  opacity: 0.6;
}
.cw-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 1.4em;
}
.cw-tag {
  flex: none;
  font: 700 10px/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 3px 5px;
  border-radius: 5px;
  background: var(--hover);
}
.cw-res {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
  font: 600 clamp(22px, min(calc(var(--cw-w) * 0.12), calc(var(--cw-h) * 0.085)), 58px) / 1.15 system-ui, sans-serif;
  color: var(--muted);
  user-select: text;
  -webkit-user-select: text;
}
.cw-res[data-kind='final'] {
  color: var(--text);
}
.cw-res[data-kind='error'] {
  color: var(--danger);
  font-size: clamp(13px, calc(var(--cw-w) * 0.045), 18px) !important;
  white-space: normal;
}
.cw-acts {
  flex: none;
  display: flex;
  gap: 2px;
}
.cw-acts[hidden] {
  display: none;
}
.cw-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.cw-act svg {
  width: 17px;
  height: 17px;
}
.cw-act:hover {
  background: var(--hover);
  color: var(--accent-text);
}

/* Tastenfeld: füllt den Rest des Fensters */
.cw-pad {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 10px;
}
.cw-basic,
.cw-sci {
  display: grid;
  gap: calc(var(--cw-key) * 0.1);
  grid-template-rows: repeat(6, minmax(0, 1fr));
  min-width: 0;
}
.cw-basic {
  flex: 4 1 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cw-sci {
  flex: 3 1 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: none;
}
.calc-widget.sci .cw-sci {
  display: grid;
}
.cw-key {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: calc(var(--cw-key) * 0.26);
  background: var(--panel-2);
  color: var(--text);
  font: 600 calc(var(--cw-key) * 0.44) / 1 system-ui, sans-serif;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 0.06s, background 0.12s, filter 0.12s;
}
.cw-key:hover {
  background: var(--hover);
}
.cw-key:active {
  transform: scale(0.95);
}
.cw-key:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.cw-key[data-c='op'] {
  background: var(--accent-weak);
  color: var(--accent-text);
  box-shadow: none;
}
.cw-key[data-c='fn'] {
  color: var(--danger);
}
.cw-key[data-c='sci'] {
  font-size: calc(var(--cw-key) * 0.38);
  font-weight: 560;
  background: color-mix(in srgb, var(--claude, #7c3aed) 10%, var(--panel-2));
  color: var(--text);
}
.cw-key[data-c='eq'] {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: #fff;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35);
  font-size: calc(var(--cw-key) * 0.52);
}
.cw-key[data-c='eq']:hover {
  filter: brightness(1.08);
  background: linear-gradient(135deg, #7c3aed, #ec4899);
}
.cw-key.cw-deg {
  grid-column: 1 / -1;
  font-size: calc(var(--cw-key) * 0.32);
  letter-spacing: 0.02em;
}

/* Griffe zum Größe-Ändern: alle vier Kanten und Ecken */
.cw-grip {
  position: absolute;
  z-index: 2;
  touch-action: none;
}
.cw-grip-n,
.cw-grip-s {
  left: 14px;
  right: 14px;
  height: 10px;
  cursor: ns-resize;
}
.cw-grip-e,
.cw-grip-w {
  top: 14px;
  bottom: 14px;
  width: 10px;
  cursor: ew-resize;
}
.cw-grip-n { top: -3px; }
.cw-grip-s { bottom: -3px; }
.cw-grip-e { right: -3px; }
.cw-grip-w { left: -3px; }
.cw-grip-ne, .cw-grip-nw, .cw-grip-se, .cw-grip-sw {
  width: 20px;
  height: 20px;
}
.cw-grip-ne { top: -4px; right: -4px; cursor: nesw-resize; }
.cw-grip-sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
.cw-grip-nw { top: -4px; left: -4px; cursor: nwse-resize; }
.cw-grip-se { bottom: -4px; right: -4px; cursor: nwse-resize; }
/* sichtbarer Hinweis unten rechts */
.cw-grip-se::after {
  content: '';
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  border-radius: 0 0 4px 0;
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .cw-key {
    transition: none;
  }
}