/* Gesprächsnotiz mit Herrn Mauz, AGI-Dialog, Abspann */
dialog { width: min(460px, calc(100% - 32px)); max-width: none; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
dialog::backdrop { background: rgba(20, 18, 15, .5); }
dialog[open] { animation: drop .2s ease-out; }
@keyframes drop { from { opacity: 0; transform: translateY(12px); } }
.sheet { position: relative; padding: 0 18px 18px; background: var(--paper); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 8px 8px 0 var(--shadow); }
.memo-head {
  display: flex; justify-content: space-between; align-items: center; margin: 0 -18px 14px; padding: 9px 18px;
  border-bottom: 1.5px solid var(--ink); font: 600 .72rem var(--mono); text-transform: uppercase; letter-spacing: .08em;
}
.x { width: 30px; height: 30px; margin: -6px -8px -6px 0; font: 600 1rem var(--mono); color: var(--ink); background: none; border: 0; cursor: pointer; }
.boss { display: flex; align-items: center; gap: 12px; }
.cat { flex: none; width: 58px; height: 58px; color: var(--ink); background: var(--paper-2); border: 2px solid var(--ink); border-radius: 3px; }
.cat svg { display: block; width: 100%; height: 100%; }
.cat.angry { animation: shake .35s ease 2; }
@keyframes shake { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.boss-name { font-weight: 800; font-size: 1.05rem; }
.boss-role { font-size: .8rem; color: var(--ink-2); }
.quote { margin: 14px 0 16px; padding: 6px 0 6px 14px; border-left: 4px solid var(--accent); font-size: 1.02rem; min-height: 3.2em; }
.quote .who { display: block; margin-bottom: 2px; font: 700 .7rem var(--mono); letter-spacing: .1em; color: var(--muted); }
.thinking::after { content: ""; animation: ellipsis 1.2s steps(1) infinite; }
@keyframes ellipsis { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.demand-row { display: flex; justify-content: space-between; align-items: baseline; }
.demand-row label { font-weight: 700; }
.demand-row output { font: 800 1.8rem var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 4px 0 10px; background: transparent; cursor: pointer; }
input[type=range]:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border: 1.5px solid var(--ink);
  background: linear-gradient(var(--accent), var(--accent)) 0 0 / var(--p, 10%) 100% no-repeat, var(--paper-2);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 26px; margin-top: -11.5px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; box-shadow: 2px 2px 0 var(--shadow);
}
input[type=range]::-moz-range-track { height: 6px; background: var(--paper-2); border: 1.5px solid var(--ink); }
input[type=range]::-moz-range-progress { height: 6px; background: var(--accent); }
input[type=range]::-moz-range-thumb { width: 14px; height: 22px; background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; box-shadow: 2px 2px 0 var(--shadow); }
.odds-meter { letter-spacing: 2px; }
.risk { min-height: 1.3em; margin-top: 8px; font: 600 .8rem var(--sans); color: var(--red); }
.result { margin: 0 0 4px; font: 700 1rem var(--mono); text-align: center; }

.stamp {
  position: absolute; right: 16px; top: 52px; z-index: 2; pointer-events: none;
  padding: 4px 10px; border: 4px double currentColor; border-radius: 3px;
  font: 800 1.25rem var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); mix-blend-mode: var(--stamp-blend); opacity: .9;
  transform: rotate(-9deg); animation: stamp .3s cubic-bezier(.3, 1.5, .5, 1) both;
}
.stamp.ok { color: var(--blue); }
.stamp.neutral { color: var(--ink-2); }
@keyframes stamp { from { opacity: 0; transform: rotate(-9deg) scale(2.2); } }

.term-sheet { background: #0d0c0a; color: #e9e2d2; border-color: #0d0c0a; font-family: var(--mono); box-shadow: 8px 8px 0 rgba(0, 0, 0, .5); }
.term-sheet .memo-head { border-color: #3a3630; color: #ff8a4c; }
.term-sheet p { margin: 0 0 14px; font-size: .92rem; line-height: 1.55; }
.term-sheet p::before { content: "AGI> "; color: #ff8a4c; }
.term-sheet .btn, .ending .btn { font-family: var(--mono); font-size: .92rem; background: transparent; color: #e9e2d2; border-color: #e9e2d2; box-shadow: none; }
.term-sheet .btn:hover, .ending .btn:hover { background: rgba(255, 255, 255, .06); }
.term-sheet .btn.danger { background: #ff6b6b; border-color: #ff6b6b; color: #0d0c0a; }
.ending .btn.primary { background: #ff8a4c; border-color: #ff8a4c; color: #0d0c0a; }

.ending {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; overflow-y: auto; background: #0d0c0a; color: #e9e2d2; font-family: var(--mono);
  opacity: 0; pointer-events: none; transition: opacity .8s ease;
}
.ending.show { opacity: 1; pointer-events: auto; }
.ending .inner { width: 100%; max-width: 520px; }
.ending h2 { display: block; margin: 0 0 18px; font: 700 .78rem var(--mono); letter-spacing: .14em; color: #ff8a4c; }
.ending p { margin: 0 0 12px; font-size: .95rem; line-height: 1.55; min-height: 1.55em; }
.ending .ts { color: #6f685d; margin-right: 10px; }
.ending .caret::after { content: "▍"; color: #ff8a4c; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ending .btns { display: grid; gap: 8px; margin-top: 24px; opacity: 0; transition: opacity .6s ease; }
.ending .btns.in { opacity: 1; }