/*!
 * A1onaut – UI Styles v4 (Dark Mode)
 * Copyright (c) 2026 Marc Blum
 * All rights reserved.
 * License: Proprietary
 */

@font-face{
  font-family:"Ubuntu Mono";
  src:url("/static/fonts/ubuntu-mono-v19-latin-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Ubuntu Mono";
  src:url("/static/fonts/ubuntu-mono-v19-latin-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ===== Light Mode Defaults ===== */
:root{
  --chat-font-size: 13px;
  --neon: #FF002C; /* wird per JS auf Slot-Farbe gesetzt */
  --bg-tint: 3%;
  --bg: color-mix(in srgb, var(--neon) var(--bg-tint), var(--mix-base));
  --fg:#111111;
  --muted:#6b7280;
  --line:rgba(0,0,0,1);

  --logo-nudge: -2px;
  --logo-nudge-x: 0px;
  --slots-nudge-y: -3px;

  --mono: "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          "Liberation Mono", "DejaVu Sans Mono", monospace;

  --t1: 30px;
  --t2: 14px;
  --st: 12px;
  --lh: 1.05;

  --blockCaretX: 0px;
  --blockCaretY: 0px;

  /* iOS keyboard offset (wird per JS gesetzt) */
  --kb: 0px;

  /* v3 */
  --tint: 10%;
  --panel-gap: 12px;

  /* Corner-Winkel */
  --corner-l: 16px;
  --corner-w: 2px;

  /* „Rahmen" als innerer Ring */
  --ring: 1px;

  /* wie stark der Ring an den Ecken optisch „unterbrochen" wird */
  --corner-mask-pad: 6px;

  /* Native UI (scrollbars, form controls) folgt dem Theme */
  color-scheme: light dark;

  /* Theme tokens – Light defaults */
  --mix-base: white;
  --chat-bg: #ffffff;
  --ink: #000000;
  --slot-fill: rgba(255,255,255,0.84);
  --slot-clear-bg: #ffffff;
  --slot-clear-border: #000000;
  --slot-active-outline: #000000;
  --slot-dot-bg: #111;
  --rotate-lock-bg: rgba(255,255,255,.92);
  --rotate-lock-color: #111;
  --rotate-lock-box-bg: #fff;
  --rotate-lock-box-border: #000;
  --caret-bg: #111;
}

/* ===== Theme Transition ===== */
body,
.titleBar, .titleEdit, .modeBar, .chatFrame, .composer, textarea, .userq,
.slot, .slot.clear, .rotateLock, .rotateLock .box{
  transition:
    background-color 0.2s ease,
    color            0.2s ease,
    box-shadow       0.2s ease;
}

/* Keine Animation bei reduzierter Bewegung */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition: none !important;
    animation:  none !important;
  }
}

/* ===== Dark Mode via System Preference ===== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --mix-base: #111111;
    --bg-tint: 8%;
    --tint: 25%;
    --chat-bg: #111111;
    --fg: #e0e0e0;
    --muted: #9ca3af;
    --ink: #e0e0e0;
    --slot-fill: rgba(0,0,0,0.80);
    --slot-clear-bg: #111111;
    --slot-clear-border: #e0e0e0;
    --slot-active-outline: #e0e0e0;
    --slot-dot-bg: #e0e0e0;
    --rotate-lock-bg: rgba(0,0,0,.88);
    --rotate-lock-color: #e0e0e0;
    --rotate-lock-box-bg: #1a1a1a;
    --rotate-lock-box-border: #e0e0e0;
    --caret-bg: #e0e0e0;
  }
}

/* ===== Dark Mode via explicit toggle ===== */
[data-theme="dark"]{
  color-scheme: dark;
  --mix-base: #111111;
  --bg-tint: 8%;
  --tint: 25%;
  --chat-bg: #111111;
  --fg: #e0e0e0;
  --muted: #9ca3af;
  --ink: #e0e0e0;
  --slot-fill: rgba(0,0,0,0.80);
  --slot-clear-bg: #111111;
  --slot-clear-border: #e0e0e0;
  --slot-active-outline: #e0e0e0;
  --slot-dot-bg: #e0e0e0;
  --rotate-lock-bg: rgba(0,0,0,.88);
  --rotate-lock-color: #e0e0e0;
  --rotate-lock-box-bg: #1a1a1a;
  --rotate-lock-box-border: #e0e0e0;
  --caret-bg: #e0e0e0;
}

/* ===== Light Mode via explicit toggle (overrides system dark) ===== */
[data-theme="light"]{
  color-scheme: light;
  --mix-base: white;
  --bg-tint: 3%;
  --tint: 10%;
  --chat-bg: #ffffff;
  --fg: #111111;
  --muted: #6b7280;
  --ink: #000000;
  --slot-fill: rgba(255,255,255,0.84);
  --slot-clear-bg: #ffffff;
  --slot-clear-border: #000000;
  --slot-active-outline: #000000;
  --slot-dot-bg: #111;
  --rotate-lock-bg: rgba(255,255,255,.92);
  --rotate-lock-color: #111;
  --rotate-lock-box-bg: #fff;
  --rotate-lock-box-border: #000;
  --caret-bg: #111;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  overflow:hidden; /* Seite selbst scrollt nicht */
  -webkit-text-size-adjust: 100%;
}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:.01px;
}

.wrap{
  max-width:980px;
  height:100vh;   /* Fallback */
  height:100svh;  /* stabiler Viewport auf Mobile */
  height:100dvh;  /* dynamischer Viewport (modern) */
  margin:0 auto;
  padding:24px 14px 18px;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

.topbar{
  display:grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items:start;
  margin-bottom: 10px;
  flex:0 0 auto;
}

.logo{
  grid-column: 1;
  grid-row: 1 / span 3;
  width:auto;
  height: calc((var(--t1) * var(--lh)) + (var(--t2) * var(--lh)) + (var(--st) * var(--lh)) + 12px);
  object-fit: contain;
  align-self: start;
  margin-top: var(--logo-nudge);
  margin-left: var(--logo-nudge-x);
  border: 0;
  padding: 1px;
  background: transparent;
  display: block;
  cursor: pointer;
}
.logo:focus{ outline: none; }
.logo:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.t1{
  grid-column: 2;
  grid-row: 1;
  font-size: var(--t1);
  font-weight: 700;
  line-height: var(--lh);
  margin: 0;
  padding: 0;
}

.t2{
  grid-column: 2;
  grid-row: 2;
  font-size: var(--t2);
  font-weight: 700;
  line-height: var(--lh);
  margin: 0;
  padding: 0;
}

.tagline{
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  font-size: 12px;
  font-weight: 700;
  line-height: var(--lh);
  color: var(--fg);
  margin: 0;
  margin-right: 5px;
  padding: 0;
}

.statusline{
  grid-column: 2;
  grid-row: 3;
  display:flex;
  gap:8px;
  align-items:center;
  white-space:nowrap;
  font-size: var(--st);
  color: var(--muted);
  line-height: var(--lh);
  margin: 0;
  padding: 0;
  transform: translateY(5px);
}

.slots{
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
  align-self: center;
  display:flex;
  gap:6px;
  align-items:center;
  margin-right:6px;
  transform: translateY(var(--slots-nudge-y));
}

.dot{
  width:8px; height:8px; border-radius:999px;
  background:#f59e0b;
}
.dot.ok{ background:#16a34a; }
.dot.bad{ background:#ef4444; }

/* ===== Panel: v3 (3 Blöcke) ===== */
.panel{
  border:0;
  background:transparent;
  overflow:visible;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap: var(--panel-gap);
  padding-bottom: var(--kb);
  position: relative;
}

.modeRow{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--panel-gap);
  align-items:stretch;
}

.titleBox{
  position:relative;
  min-width:0;
}

.titleBox,
.modeBar{
  height: 100%;         /* beide Zellen füllen die Zeilenhöhe */
}

.titleBar{
  height: 100%;
  display:flex;
  align-items:center;     /* vertikal */
  justify-content:center; /* horizontal */
  text-align:center;
}

.titleEdit{
  height: 100%;
  text-align:center;      /* horizontal */
}

.titleBar,
.titleEdit{
  background: color-mix(in srgb, var(--neon) var(--tint), var(--mix-base));
  color: var(--fg);
  text-align:center;
  padding:18px 10px;
  font-size:14px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.2px;
  border:0;
  box-shadow: inset 0 0 0 var(--ring) var(--neon);
  position:relative;
  width:100%;
  box-sizing:border-box;
}

.titleBar{
  user-select:none;
  cursor:text;

  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.titleBar.isEmpty{
  cursor:default;
  opacity:.55;
}

.titleEdit{
  display:none;
  outline:none;
}

/* ===== Block 1: Modus ===== */
.modeBar{
  flex:0 0 auto;
  background: color-mix(in srgb, var(--neon) var(--tint), var(--mix-base));
  color: var(--fg);
  text-align:center;
  padding:18px 10px;
  font-size:14px;
  font-weight: 700;
  line-height:1.15;
  letter-spacing:.2px;
  user-select:none;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  border:0;
  box-shadow: inset 0 0 0 var(--ring) var(--neon);
  position:relative;
}

/* ===== Block 2: Chat (Frame fix, Innen scrollt) ===== */
.chatFrame{
  flex:1 1 auto;
  min-height:0;
  position:relative;

  background: var(--chat-bg);

  border:0;
  box-shadow: inset 0 0 0 var(--ring) var(--neon);

  overflow:hidden;
}

.chatScroll{
  height:100%;
  overflow:auto;
  padding:13px;
  background:transparent;
  position:relative;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* v1-Overlay aus */
.chatScroll::before{ content:none !important; }
.chat::before{ content:none !important; }

/* ===== Block 3: Composer ===== */
.composer{
  border:0;
  box-shadow: inset 0 0 0 var(--ring) var(--neon);
  padding:10px 12px;
  background: color-mix(in srgb, var(--neon) var(--tint), var(--mix-base));
  position: relative;

  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  flex:0 0 auto;

  transform: translateY(calc(-1 * var(--kb)));
  will-change: transform;
}

textarea{
  width:100%;
  min-height:60px;
  max-height:160px;
  resize:none;
  border:0;
  border-radius:0;
  background: color-mix(in srgb, var(--neon) var(--tint), var(--mix-base));
  color:var(--fg);
  padding:10px 10px;
  padding-right: 96px;
  font-family:var(--mono);
  font-size:14px;
  font-weight: 600;
  line-height:1.5;
  outline:none;
  caret-color: transparent;
}

textarea:focus{
  box-shadow:0 0 0 0 rgba(0,0,0,0);
}

/* Block-Caret bleibt composer::after */
.composer::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width: 0.62em;
  height: 1.15em;
  background: var(--caret-bg);
  pointer-events:none;
  z-index:10;
  opacity:0;
  transform: translate(var(--blockCaretX, 0px), var(--blockCaretY, 0px));
}
body.caret-on  .composer::after{ opacity: 1; }
body.caret-off .composer::after{ opacity: 0; }

/* ===== Messages ===== */
.msg{ width:100%; display:flex; margin:10px 0; }
.msg:last-child{ margin-bottom:32px; }
.msg.assistant{ justify-content:flex-start; text-align:left; }
.msg.user{ justify-content:flex-end; text-align:right; margin-top:22px; }

.bubble{
  border:0;
  background:transparent;
  padding:0;
  width:90%;
  max-width:min(90ch, 90%);
  position:relative;
  z-index:1;
}

.msg.user .bubble{
  width:80%;
  max-width:min(80ch, 80%);
}

.content{
  font-size:var(--chat-font-size);
  line-height:1.6;
  white-space:normal;
  color:var(--fg);
  margin:0;
  padding:0;
  text-indent:0;
}
.content p{ margin:0 0 10px 0; }
.content p:last-child{ margin-bottom:0; }

/* Thinking dots (loading indicator) */
.thinkingDots{
  display:inline-flex;
  gap:5px;
  align-items:center;
  padding:4px 0;
}
.thinkingDots span{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--muted);
  animation:dotPulse 1.2s infinite ease-in-out both;
}
.thinkingDots span:nth-child(2){ animation-delay:.2s; }
.thinkingDots span:nth-child(3){ animation-delay:.4s; }

@keyframes dotPulse{
  0%,80%,100%{ opacity:.25; transform:scale(.75); }
  40%        { opacity:1;   transform:scale(1);   }
}

.intro h3{
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 10px 0;
}
.intro p{ margin:0 0 10px 0; }
.intro p:last-child{ margin-bottom:0; }

.userq{
  font-size:var(--chat-font-size);
  font-weight:700;
  line-height:inherit;

  display:inline-block;
  position:relative;

  margin-top:6px;
  padding:10px 10px;

  background: color-mix(in srgb, var(--neon) var(--tint), var(--mix-base));
  box-shadow: inset 0 0 0 var(--ring) var(--neon);
  border:0;
}

/* ===== Slots ===== */
.slot{
  width:24px;
  height:24px;
  padding:0;
  border-radius:0;
  border:2px solid currentColor;
  cursor:pointer;
  position:relative;
  opacity:1;

  background: var(--slot-clear-bg);
  box-shadow: inset 0 0 0 9999px var(--slot-fill);
}

.slot:hover{ filter: brightness(0.98); }

.slot.active{
  outline:3px solid var(--slot-active-outline);
  outline-offset:-2px;
}

.slot.has::after{
  content:"";
  position:absolute;
  right:2px;
  bottom:2px;
  width:4px;
  height:4px;
  background: var(--slot-dot-bg);
}

.slot.clear{
  background: var(--slot-clear-bg) !important;
  box-shadow:none !important;
  border-color: var(--slot-clear-border) !important;
}
.slot.clear svg{ width:100%; height:100%; display:block; }
.slot.clear line{
  stroke: var(--slot-clear-border);
  stroke-width:1.4;
  stroke-linecap:round;
}

@media (max-width: 520px){
    textarea,
    .titleEdit{
      font-size: 16px;
    }
  .slots{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 6px;
    margin-right: 0;
    margin-top: 0;
  }
  .slot{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .tagline{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .slot.clear{
    aspect-ratio: 1 / 1;
    height: auto;
    display: grid;
    place-items: center;
  }

  .slot.clear svg{
    width: 100%;
    height: 100%;
    display: block;
  }

  .slot.clear line{
    stroke: var(--slot-clear-border);
    stroke-width:1.2;
    stroke-linecap:round;
  }
}

/* ===== QNav ===== */
.qnav{
  position:absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  display:flex;
  flex-direction:row;
  gap:0px;
  z-index:20;
}

.qnavCol{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.qnavIcon{
  width:18px;
  height:18px;
  display:block;
  pointer-events:none;
}

.qnavBtn{
  width:30px;
  height:26px;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.qnavBtn:hover{ opacity: .9; }
.qnavBtn:active{ opacity: .75; }
.qnavBtn:focus{ outline:none; }
.qnavBtn:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:2px;
}

.send{ display:none; }

.footer{
  margin-top:10px;
  color:rgba(107,114,128,.85);
  font-size:11px;
  text-align:center;
  user-select:none;
  flex:0 0 auto;
}

.assistant-tools{
  margin-top:10px;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  line-height:1;
  gap:10px;
}

.copyIcon, .repeatIcon, .shareIcon{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  line-height:1;
}

.copyIcon img, .repeatIcon img, .shareIcon img{
  width:18px;
  height:18px;
  display:block;
}

.copyIcon:focus, .repeatIcon:focus, .shareIcon:focus{ outline:none; }
.copyIcon:focus-visible, .repeatIcon:focus-visible, .shareIcon:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:2px;
}

.albl{
  font-weight:700;
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  letter-spacing:.01em;
}
.albl .arrow{
  display:inline-block;
  width:14px;
  text-align:center;
  font-size:18px;
  line-height:1;
}

@media (max-width: 560px){
  .topbar{
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto;
    row-gap: 2px;
  }
  .slots{
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: start;
    margin-right: 0;
    margin-top: 10px;
    transform: none;
  }
}

@media (max-width: 360px){
  .slots{ flex-wrap: wrap; row-gap: 6px; }
}

/* ==========================================================
   CORNERS (FINAL v3)
   - Ecken sind NICHT transparent: Ink-Layer liegt OBEN
   - Chat bekommt Ecken sicher (auch bei overflow:auto),
     weil wir NICHT nach außen gehen müssen:
     der „Rahmen" ist ein innerer Ring (inset shadow),
     und die Ecken überdecken diesen Ring innerhalb der Box.
   ========================================================== */

.modeBar, .chatFrame, .composer, .titleBox{ position:relative; }

/* composer::after ist Caret -> Ecken auf composer::before */
.titleBox::after,
.modeBar::after,
.chatFrame::after,
.composer::before,
.userq::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:999;
  background-repeat:no-repeat;

  background-image:
    /* INK */
    linear-gradient(var(--ink),var(--ink)), linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)), linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)), linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)), linear-gradient(var(--ink),var(--ink)),

    /* MASK */
    linear-gradient(var(--corner-mask), var(--corner-mask)),
    linear-gradient(var(--corner-mask), var(--corner-mask)),
    linear-gradient(var(--corner-mask), var(--corner-mask)),
    linear-gradient(var(--corner-mask), var(--corner-mask)),
    linear-gradient(var(--corner-mask), var(--corner-mask)),
    linear-gradient(var(--corner-mask), var(--corner-mask)),
    linear-gradient(var(--corner-mask), var(--corner-mask)),
    linear-gradient(var(--corner-mask), var(--corner-mask));
}

/* Mask-Farbe pro Box */
.titleBox{ --corner-mask: color-mix(in srgb, var(--neon) var(--tint), var(--mix-base)); }
.modeBar{ --corner-mask: color-mix(in srgb, var(--neon) var(--tint), var(--mix-base)); }
.composer{ --corner-mask: color-mix(in srgb, var(--neon) var(--tint), var(--mix-base)); }
.chatFrame{ --corner-mask: var(--chat-bg); }
.userq{
  --corner-mask: color-mix(in srgb, var(--neon) var(--tint), var(--mix-base));
  --corner-l: 10px;
  --corner-w: 2px;
  --corner-mask-pad: 4px;
}

.titleBox::after,
.modeBar::after,
.chatFrame::after,
.composer::before,
.userq::after{
  background-size:
    /* INK */
    var(--corner-l) var(--corner-w),
    var(--corner-w) var(--corner-l),
    var(--corner-l) var(--corner-w),
    var(--corner-w) var(--corner-l),
    var(--corner-l) var(--corner-w),
    var(--corner-w) var(--corner-l),
    var(--corner-l) var(--corner-w),
    var(--corner-w) var(--corner-l),

    /* MASK (größer -> unterbricht den Ring) */
    calc(var(--corner-l) + var(--corner-mask-pad)) calc(var(--corner-w) + var(--corner-mask-pad)),
    calc(var(--corner-w) + var(--corner-mask-pad)) calc(var(--corner-l) + var(--corner-mask-pad)),
    calc(var(--corner-l) + var(--corner-mask-pad)) calc(var(--corner-w) + var(--corner-mask-pad)),
    calc(var(--corner-w) + var(--corner-mask-pad)) calc(var(--corner-l) + var(--corner-mask-pad)),
    calc(var(--corner-l) + var(--corner-mask-pad)) calc(var(--corner-w) + var(--corner-mask-pad)),
    calc(var(--corner-w) + var(--corner-mask-pad)) calc(var(--corner-l) + var(--corner-mask-pad)),
    calc(var(--corner-l) + var(--corner-mask-pad)) calc(var(--corner-w) + var(--corner-mask-pad)),
    calc(var(--corner-w) + var(--corner-mask-pad)) calc(var(--corner-l) + var(--corner-mask-pad));

  background-position:
    /* INK */
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom,

    /* MASK */
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

/* ===== Force portrait UX on small screens: show overlay in landscape ===== */
.rotateLock{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background: var(--rotate-lock-bg);
  color: var(--rotate-lock-color);
  font-family: var(--mono);
  text-align: center;
  padding: 18px;
}

.rotateLock .box{
  max-width: 520px;
  margin: 0 auto;
  margin-top: 18vh;
  padding: 14px 14px;
  background: var(--rotate-lock-box-bg);
  box-shadow: inset 0 0 0 1px var(--rotate-lock-box-border);
}

@media (orientation: landscape) and (max-height: 480px){
  .rotateLock{ display:block; }
  body > .wrap{ display:none; } /* Haupt-UI ausblenden */
}