/* Jarvis OS – styles ported from the Claude Design export (Industry, dark steel ramp) */
html, body { margin:0; padding:0; background:#0d1620; }
body { -webkit-font-smoothing:antialiased; color:#e7e7ea; font-family:Barlow, system-ui, sans-serif; font-weight:300; }
a { color:#b5d9fd; text-decoration:none; } a:hover { color:#eef6ff; }
::selection { background:rgba(89,128,166,.45); }
input, button, textarea { font:inherit; color:inherit; }
input:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline:2px solid #5980a6; outline-offset:2px; }
* { box-sizing:border-box; }

@keyframes jvPulse { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.05);opacity:1} }
@keyframes jvSpin { to { transform:rotate(360deg) } }
@keyframes jvSpinR { to { transform:rotate(-360deg) } }
@keyframes jvSweep { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@keyframes jvBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes jvFade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
@keyframes jvFlash { 0%{box-shadow:0 0 60px rgba(148,188,227,.6)} 30%{box-shadow:0 0 120px rgba(238,246,255,.95)} 100%{box-shadow:0 0 60px rgba(148,188,227,.6)} }

.jv-root { min-height:100vh; position:relative; overflow:hidden; color:#e7e7ea;
  background:radial-gradient(90% 70% at 50% -5%, #23405a 0%, transparent 60%), radial-gradient(70% 60% at 100% 100%, rgba(65,97,128,.35) 0%, transparent 65%), #0d1620; padding-bottom:20px; }
.jv-grid { position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(148,188,227,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(148,188,227,.055) 1px, transparent 1px); background-size:40.8px 40.8px; }
.jv-scan { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(148,188,227,.06) 0px, rgba(148,188,227,.06) 1px, transparent 1px, transparent 3px); }

.cond { font-family:'Barlow Condensed', sans-serif; }
.jv-brand { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:22px; letter-spacing:.22em; text-transform:uppercase; line-height:1; }
.jv-build { font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:.24em; color:#94bce3; }
.jv-kicker { font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:.28em; color:#7e9cb8; }
.jv-kicker-accent { font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:.18em; color:#b5d9fd; }
.jv-label { font-family:'Barlow Condensed',sans-serif; font-size:10px; letter-spacing:.24em; color:#7e9cb8; }
.jv-value { font-family:'Barlow Condensed',sans-serif; font-size:16px; letter-spacing:.08em; }

.jv-header { position:relative; z-index:1; display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:10px 20px; border-bottom:1px solid #2c455d; background:rgba(13,22,32,.85); backdrop-filter:blur(12px); }
.jv-dots span { width:10px; height:10px; display:inline-block; }
.jv-status { display:flex; align-items:center; gap:8px; padding:4px 10px; border:1px solid #416180; background:rgba(89,128,166,.12); }
.jv-status .dot { width:7px; height:7px; background:#b5d9fd; animation:jvPulse 1.8s ease-in-out infinite; }
.jv-status .txt { font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#dbeafd; }

.jv-main { position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:13.6px; padding:13.6px 20px 0; align-items:start; }
.jv-bottom { position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:13.6px; padding:13.6px 20px 0; align-items:start; }
.jv-col { display:flex; flex-direction:column; gap:13.6px; min-width:0; }
.jv-span2 { grid-column:span 2; }

.jv-card { position:relative; border:1px solid #2c455d; background:rgba(29,45,61,.45); padding:16px; min-width:0; }
.jv-card-dark { background:rgba(15,26,36,.72); }
.jv-card-strong { border-color:#416180; background:linear-gradient(170deg, rgba(44,69,93,.7), rgba(13,22,32,.55)); box-shadow:0 12px 32px rgba(6,12,18,.55); overflow:hidden; }
.jv-card > i.c { position:absolute; width:11px; height:11px; font-style:normal; font-size:13px; line-height:11px; text-align:center; color:#5980a6; }
.jv-card-strong > i.c { color:#94bce3; }
i.c.tl { top:-6px; left:-6px; } i.c.tr { top:-6px; right:-6px; } i.c.bl { bottom:-6px; left:-6px; } i.c.br { bottom:-6px; right:-6px; }
.jv-sweep { position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, #b5d9fd, transparent); animation:jvSweep 3.6s linear infinite; }
.jv-card-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:13.6px; }

.jv-bar { height:6px; background:rgba(148,188,227,.14); position:relative; overflow:hidden; }
.jv-bar > div { position:absolute; left:0; top:0; bottom:0; background:#5980a6; transition:width .6s ease; }
.jv-bar.thin { height:4px; }

.jv-row { display:flex; align-items:center; gap:10px; padding:7px 10px; border:1px solid #2c455d; background:rgba(29,45,61,.35); min-width:0; }
.jv-row.click { cursor:pointer; } .jv-row.click:hover { border-color:#749dc4; }
.jv-row .name { font-family:'Barlow Condensed',sans-serif; font-size:15px; letter-spacing:.1em; text-transform:uppercase; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jv-row .state { font-family:'Barlow Condensed',sans-serif; font-size:13px; letter-spacing:.14em; color:#7e9cb8; }
.jv-dot { width:9px; height:9px; flex:0 0 auto; background:#5f7a94; }
.jv-dot.ok { background:#b5d9fd; } .jv-dot.run { background:#749dc4; animation:jvPulse 1.4s ease-in-out infinite; } .jv-dot.err { background:#e07a7a; }

.jv-task { border:1px solid #2c455d; background:rgba(29,45,61,.35); padding:10px; cursor:pointer; min-width:0; }
.jv-task:hover { border-color:#749dc4; }
.jv-task.open { border-color:#749dc4; background:rgba(89,128,166,.16); }
.jv-task .detail { margin-top:8px; font-size:14px; line-height:1.5; color:#bcd3e8; }
.jv-task .actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.jv-chip { border:1px solid #2c455d; padding:4px 10px; font-family:'Barlow Condensed',sans-serif; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#94bce3; cursor:pointer; background:transparent; }
.jv-chip:hover { border-color:#749dc4; color:#dbeafd; }
.jv-chip.on { border-color:#749dc4; color:#dbeafd; background:rgba(89,128,166,.16); }

.jv-orb { position:relative; height:250px; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; }
.jv-orb .r1 { position:absolute; width:230px; height:230px; border:1px solid rgba(148,188,227,.28); border-top:1px solid #b5d9fd; border-radius:50%; animation:jvSpin 11s linear infinite; }
.jv-orb .r2 { position:absolute; width:188px; height:188px; border:1px dashed rgba(148,188,227,.3); border-radius:50%; animation:jvSpinR 17s linear infinite; }
.jv-orb .r3 { position:absolute; width:146px; height:146px; border:1px solid rgba(181,217,253,.5); border-left:1px solid #eef6ff; border-radius:50%; animation:jvSpin 6s linear infinite; }
.jv-orb .glow { position:absolute; width:118px; height:118px; border-radius:50%; background:radial-gradient(circle at 36% 30%, rgba(238,246,255,.75), rgba(89,128,166,.5) 55%, transparent 74%); filter:blur(3px); animation:jvPulse 2.8s ease-in-out infinite; }
.jv-orb .core { position:absolute; width:74px; height:74px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #eef6ff, #5980a6 80%); box-shadow:0 0 60px rgba(148,188,227,.6); }
.jv-orb .core.flash { animation:jvFlash 1.2s ease-out 1; }
.jv-orb .num { position:relative; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:15px; letter-spacing:.1em; color:#12212e; }
.jv-orb.active .r1 { animation-duration:4s; } .jv-orb.active .r3 { animation-duration:2.2s; } .jv-orb.active .glow { animation-duration:1.1s; }
.jv-orb.calm .r1 { animation-duration:22s; } .jv-orb.calm .r3 { animation-duration:12s; } .jv-orb.calm .glow { animation-duration:5.4s; }
.jv-orb.error .core { background:radial-gradient(circle at 40% 35%, #ffd9d9, #a65959 80%); box-shadow:0 0 60px rgba(227,148,148,.6); }
.jv-core-body { display:flex; flex-direction:column; }
.jv-core-side { display:flex; flex-direction:column; justify-content:flex-end; min-width:0; }
.jv-core-status { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid rgba(148,188,227,.18); }
.jv-wave { display:flex; align-items:flex-end; gap:2px; height:64px; padding:0 2px; }
.jv-wave > div { flex:1 1 0; min-width:2px; background:linear-gradient(180deg, #b5d9fd, rgba(89,128,166,.35)); transition:height .4s ease; }

.jv-chat { display:flex; flex-direction:column; gap:6.8px; max-height:340px; overflow-y:auto; padding-right:3.4px; scroll-behavior:smooth; }
.jv-msg { display:flex; gap:10px; align-items:flex-start; animation:jvFade .3s ease both; }
.jv-msg .tag { font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:.18em; flex:0 0 62px; padding-top:3px; color:#7e9cb8; }
.jv-msg.jarvis .tag { color:#b5d9fd; }
.jv-msg .text { font-size:15px; line-height:1.45; color:#bcd3e8; min-width:0; text-wrap:pretty; overflow-wrap:anywhere; }
.jv-msg.jarvis .text { color:#e7e7ea; }
.jv-msg .text p { margin:0 0 6px; } .jv-msg .text ul, .jv-msg .text ol { margin:4px 0 6px 18px; padding:0; } .jv-msg .text code { font-family:ui-monospace, Menlo, monospace; font-size:13px; background:rgba(148,188,227,.12); padding:1px 4px; }
.jv-msg .text pre { background:rgba(15,26,36,.9); border:1px solid #2c455d; padding:8px; overflow-x:auto; font-size:13px; }
.jv-msg .text h1, .jv-msg .text h2, .jv-msg .text h3 { font-family:'Barlow Condensed',sans-serif; font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:#dbeafd; margin:8px 0 4px; }
.jv-tool { font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:.14em; color:#7e9cb8; border-left:2px solid #2c455d; padding:2px 8px; margin:2px 0 4px 72px; cursor:pointer; text-transform:uppercase; }
.jv-tool:hover { color:#b5d9fd; }
.jv-tool .more { display:block; text-transform:none; letter-spacing:0; font-family:Barlow, sans-serif; font-size:13px; color:#bcd3e8; margin-top:3px; white-space:pre-wrap; }
.jv-input-wrap { flex:1 1 auto; display:flex; align-items:center; gap:8px; border:1px solid #416180; background:rgba(89,128,166,.1); padding:0 10px; min-width:0; }
.jv-input-wrap input { flex:1 1 auto; min-width:0; background:transparent; border:0; outline:none; padding:10px 0; font-size:15px; color:#e7e7ea; }
.jv-prompt { font-family:'Barlow Condensed',sans-serif; font-size:16px; color:#b5d9fd; }
.jv-caret { width:8px; height:16px; background:#b5d9fd; animation:jvBlink 1.1s step-end infinite; }
.jv-btn { display:flex; align-items:center; padding:0 20px; background:#5980a6; color:#f2f2f3; font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:600; letter-spacing:.18em; cursor:pointer; border:0; min-height:40px; }
.jv-btn:hover { background:#416180; } .jv-btn:disabled { opacity:.45; cursor:default; }
.jv-btn.ghost { background:transparent; border:1px solid #416180; color:#b5d9fd; } .jv-btn.ghost:hover { background:rgba(89,128,166,.16); }

.jv-log { display:flex; flex-direction:column; gap:3.4px; max-height:180px; overflow-y:auto; }
.jv-log > div { display:flex; gap:13.6px; align-items:baseline; padding:3px 0; border-bottom:1px solid rgba(148,188,227,.08); animation:jvFade .25s ease both; min-width:0; }
.jv-log .t { font-family:'Barlow Condensed',sans-serif; font-size:13px; letter-spacing:.1em; color:#7e9cb8; flex:0 0 62px; }
.jv-log .lvl { font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:.16em; flex:0 0 66px; }
.jv-log .msg { font-size:14px; color:#c6d8e9; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.jv-empty { border:1px dashed #2c455d; padding:14px; text-align:center; color:#7e9cb8; font-size:14px; line-height:1.5; }
.jv-err { border:1px solid #7a4a4a; background:rgba(120,60,60,.18); padding:10px 12px; font-size:14px; line-height:1.45; color:#f0d0d0; }
.jv-footer { position:relative; z-index:1; display:flex; justify-content:space-between; gap:13.6px; flex-wrap:wrap; padding:13.6px 20px 0; font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:.2em; color:#7e9cb8; }

.jv-panel-backdrop { position:fixed; inset:0; z-index:50; background:rgba(6,12,18,.7); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:20px; }
.jv-panel { position:relative; width:min(760px, 100%); max-height:86vh; overflow:auto; border:1px solid #416180; background:#0f1a24; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.jv-panel .body { font-size:15px; line-height:1.5; color:#dbe6f0; }
.jv-panel .body h1, .jv-panel .body h2, .jv-panel .body h3 { font-family:'Barlow Condensed',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#dbeafd; font-size:15px; margin:14px 0 6px; }
.jv-panel .body ul { margin:4px 0 8px 18px; padding:0; }
.jv-panel .body code { font-family:ui-monospace, Menlo, monospace; font-size:13px; color:#b5d9fd; }

.jv-tabs { display:none; }
/* Arbeitsplatz-Layout: alles auf einen Bildschirm, gescrollt wird nur in den Spalten. */
@media (min-width: 1100px) {
  html, body { height:100%; overflow:hidden; }
  .jv-root { height:100vh; display:flex; flex-direction:column; padding-bottom:0; overflow:hidden; }
  .jv-header { flex:0 0 auto; }
  .jv-main { flex:1 1 auto; min-height:0; grid-template-columns:300px minmax(420px, 1fr) 340px; padding:12px 16px 12px; align-items:stretch; }
  .jv-col { min-height:0; overflow-y:auto; overflow-x:hidden; padding-right:4px; scrollbar-width:thin; scrollbar-color:#2c455d transparent; }
  .jv-col::-webkit-scrollbar { width:8px; }
  .jv-col::-webkit-scrollbar-thumb { background:#2c455d; border-radius:4px; }
  .jv-col::-webkit-scrollbar-track { background:transparent; }
  .jv-col-center { overflow:hidden; }                 /* Mitte scrollt nicht, der Chat regelt das */
  .jv-span2 { grid-column:auto; }
  .jv-bottom, .jv-footer { display:none; }            /* Inhalte sind in die Spalten gewandert */
  .jv-card { padding:13px 14px; }
  .jv-card-head { margin-bottom:10px; }
  /* Orb links, Wellenform rechts daneben: spart Höhe für den Chat */
  .jv-core-body { flex-direction:row; align-items:center; gap:18px; }
  .jv-core-side { flex:1 1 auto; }
  .jv-orb { height:150px; width:150px; flex:0 0 auto; }
  .jv-orb .r1 { width:140px; height:140px; } .jv-orb .r2 { width:114px; height:114px; }
  .jv-orb .r3 { width:88px; height:88px; } .jv-orb .glow { width:72px; height:72px; } .jv-orb .core { width:46px; height:46px; }
  .jv-orb .num { font-size:13px; }
  .jv-wave { height:56px; }
  .jv-core-status { margin-top:8px; padding-top:8px; }
  .jv-chat { max-height:none; flex:1 1 auto; min-height:120px; }
  .jv-card-chat { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
  .jv-col-center > .jv-card:first-child { flex:0 0 auto; }   /* Orb-Karte behält ihre Höhe */
  /* Panels in der Seitenspalte dürfen nicht endlos wachsen */
  .jv-col .jv-log { max-height:150px; }
  .jv-col .jv-empty { padding:10px; font-size:13px; }
}
@media (min-width: 1600px) {
  .jv-main { grid-template-columns:340px minmax(560px, 1fr) 380px; }
  .jv-orb { height:180px; width:180px; }
  .jv-orb .r1 { width:168px; height:168px; } .jv-orb .r2 { width:138px; height:138px; }
  .jv-orb .r3 { width:106px; height:106px; } .jv-orb .glow { width:86px; height:86px; } .jv-orb .core { width:56px; height:56px; }
  .jv-wave { height:70px; }
}

@media (max-width: 720px) {
  .jv-main, .jv-bottom { grid-template-columns:1fr; padding:12px 12px 0; }
  .jv-span2 { grid-column:auto; }
  .jv-header { padding:8px 12px; gap:10px; }
  .jv-header .jv-meta { display:none !important; }
  .jv-header .jv-status { margin-left:auto; }
  .jv-root { padding-bottom:76px; }
  .jv-col.hide, .jv-bottom.hide { display:none; }
  .jv-tabs { position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; border-top:1px solid #2c455d; background:rgba(13,22,32,.96); backdrop-filter:blur(12px); }
  .jv-tabs button { flex:1 1 0; background:transparent; border:0; padding:12px 4px 14px; font-family:'Barlow Condensed',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#7e9cb8; cursor:pointer; }
  .jv-tabs button.on { color:#dbeafd; box-shadow:inset 0 2px 0 #b5d9fd; }
  .jv-orb { height:190px; } .jv-orb .r1 { width:170px; height:170px; } .jv-orb .r2 { width:140px; height:140px; } .jv-orb .r3 { width:110px; height:110px; }
  .jv-chat { max-height:44vh; }
}

/* ---------- Sprache: Mikrofon, Vorlesen ---------- */
/* Steht bewusst am Dateiende, damit nichts von den Basisregeln überschrieben wird. */
.jv-mic { position:relative; display:flex; align-items:center; justify-content:center; width:44px; min-height:40px; flex:0 0 44px;
  background:transparent; border:1px solid #416180; color:#b5d9fd; cursor:pointer; font-size:17px; line-height:1; transition:background .18s ease, border-color .18s ease; }
.jv-mic:hover:not(:disabled) { background:rgba(89,128,166,.18); border-color:#5980a6; }
.jv-mic:disabled { opacity:.4; cursor:default; }
.jv-mic .ico { position:relative; z-index:1; }
.jv-mic .ring { position:absolute; inset:-1px; border:1px solid #b5d9fd; background:rgba(181,217,253,.14); opacity:0; transition:transform .08s linear, opacity .12s linear; pointer-events:none; }
.jv-mic.on { background:#b5d9fd; border-color:#eef6ff; color:#12212e; }
.jv-mic.on .ring { border-color:#eef6ff; }

.jv-speak { background:transparent; border:1px solid rgba(65,97,128,.7); color:#7e9cb8; cursor:pointer;
  font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase; padding:2px 9px; transition:color .18s ease, border-color .18s ease; }
.jv-speak:hover { color:#dbeafd; border-color:#5980a6; }

.jv-listen-hint { margin-top:8px; font-family:'Barlow Condensed',sans-serif; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:#94bce3; display:flex; align-items:center; gap:8px; animation:jvFade .25s ease both; }
.jv-listen-hint::before { content:''; width:7px; height:7px; border-radius:50%; background:#b5d9fd; animation:jvPulse 1.1s ease-in-out infinite; }

/* Der Orb bekommt beim Zuhören einen eigenen, ruhigen Takt. */
.jv-orb.listen .r1 { animation-duration:7s; }
.jv-orb.listen .r3 { animation-duration:3.4s; }
.jv-orb.listen .glow { animation-duration:1.4s; background:radial-gradient(circle at 36% 30%, rgba(238,246,255,.9), rgba(148,188,227,.6) 55%, transparent 74%); }
.jv-orb.listen .core { background:radial-gradient(circle at 40% 35%, #ffffff, #94bce3 80%); box-shadow:0 0 70px rgba(181,217,253,.8); }