/* ==========================================================================
   Brain-PWA · Design: KI-HAUS Master v7 (JetBrains Mono · plaster/midnight · orange)
   ========================================================================== */
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;
  src:url('/static/fonts/jetbrains-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;
  src:url('/static/fonts/jetbrains-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-display:swap;
  src:url('/static/fonts/jetbrains-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212}

:root{
  --plaster:#F4F4ED; --plaster-2:#E9E8DF; --midnight:#16151E; --black:#020203;
  --sand:#B5A77F; --dusk:#B7B1A1; --gray-d:#424247; --gray-l:#D3D3CE;
  --accent:#FF4C24; --gold:#B8901A;
  --line:rgba(22,21,30,.16); --line-2:rgba(22,21,30,.28);
  --bg:var(--plaster); --card:#fff; --ink:var(--midnight); --muted:var(--gray-d);
  --font:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px);
  --tabbar-h:66px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); font-weight:400; background:var(--bg); color:var(--ink);
  line-height:1.6; font-size:14px; -webkit-font-smoothing:antialiased;
  padding:calc(var(--safe-top) + 10px) 14px calc(var(--safe-bot) + var(--tabbar-h) + 16px);
  max-width:640px; margin:0 auto;
}
h1,h2{margin:0; font-weight:500; letter-spacing:-.01em}

/* Topbar */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:4px 2px 16px}
.brand{font-weight:700; font-size:15px; letter-spacing:.06em; text-transform:uppercase}
.logout{color:var(--gray-d); font-size:11px; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; padding:8px; border-bottom:1px solid var(--line-2)}
.logout:hover{color:var(--accent); border-color:var(--accent)}

/* Views */
.view.hidden{display:none}
.daytitle{font-size:17px; margin:2px 2px 16px; text-transform:capitalize; letter-spacing:-.01em}

/* Cards — scharfe Kanten, 1px Linie */
.card{background:var(--card); border:1px solid var(--line); border-radius:0; padding:16px; margin-bottom:14px}
.card.warn{border-color:var(--accent); background:#fff}
.hint{display:block; font-size:12px; color:var(--gray-d); line-height:1.6; margin-bottom:12px}
.fineprint{font-size:10.5px; color:var(--dusk); margin:12px 0 0; line-height:1.6}

/* Eyebrow-Header: [ TEXT ] */
.card h2,.sub h2{font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.12em;
  color:var(--accent); margin-bottom:12px; display:inline-flex; gap:.5em}
.card h2::before,.sub h2::before{content:'['; color:var(--accent)}
.card h2::after,.sub h2::after{content:']'; color:var(--accent)}

textarea{width:100%; min-height:118px; resize:vertical; border:1px solid var(--line); border-radius:0;
  padding:13px; font-size:15px; font-family:inherit; color:var(--ink); background:#fff; outline:none}
textarea:focus{border-color:var(--accent)}

.row{display:flex; gap:10px; margin-top:12px}
.bigbtn{flex:1; padding:16px; font-size:13px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  color:var(--plaster); background:var(--midnight); border:1px solid var(--midnight); border-radius:0;
  cursor:pointer; font-family:inherit; transition:background .2s,color .2s,border-color .2s; min-height:54px}
.bigbtn:active{background:var(--accent); border-color:var(--accent); color:#fff}
.bigbtn:disabled{opacity:.5}
.bigbtn.compact{flex:none; width:54px; font-size:18px; min-height:50px; padding:0}
.micbtn{flex:none; padding:0 16px; min-height:54px; border-radius:0; cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--midnight);
  background:transparent; border:1px solid var(--line-2); display:flex; align-items:center; gap:8px}
.micbtn .dot{width:9px; height:9px; border-radius:50%; background:var(--midnight); display:inline-block}
.micbtn.recording{background:var(--accent); color:#fff; border-color:var(--accent)}
.micbtn.recording .dot{background:#fff; animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.status{min-height:18px; margin-top:12px; font-size:12px; text-align:center; letter-spacing:.02em}
.status .badge{display:inline-block; border:1px solid var(--accent); color:var(--accent); border-radius:0;
  padding:2px 9px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin-right:6px}
.status.ok{color:var(--midnight)} .status.err{color:var(--accent)}

/* Listen */
.sub h2{margin:8px 2px 12px}
.list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.list li{background:var(--card); border:1px solid var(--line); border-radius:0; padding:12px 14px; font-size:13px; line-height:1.55}
.list li.empty{color:var(--dusk); text-align:center; border-style:dashed; text-transform:uppercase; letter-spacing:.08em; font-size:11px}
.list .meta{display:flex; align-items:center; gap:8px; font-size:10.5px; color:var(--dusk); margin-bottom:4px; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.06em}
.list .cat{border:1px solid var(--accent); color:var(--accent); border-radius:0; padding:1px 8px; font-weight:500}
.list .sec{color:var(--gold)}
.task{display:flex; gap:10px; align-items:flex-start}
.task .chk{margin-top:2px; flex:none; accent-color:var(--accent)}
.task .chk::before{content:'→'; color:var(--accent)}
.dorem{margin-left:auto; background:none; border:none; color:var(--accent); font-weight:700; cursor:pointer; font-size:16px; font-family:inherit}

/* Chat */
.chatwrap{display:flex; flex-direction:column; height:calc(100vh - var(--safe-top) - var(--safe-bot) - var(--tabbar-h) - 66px)}
.chat-log{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px}
.msg{max-width:86%; padding:11px 13px; border-radius:0; font-size:13.5px; line-height:1.55; white-space:pre-wrap; word-wrap:break-word; border:1px solid var(--line)}
.msg.bot{background:var(--card); align-self:flex-start; border-left:2px solid var(--accent)}
.msg.user{background:var(--midnight); color:var(--plaster); align-self:flex-end; border-color:var(--midnight)}
.msg .src{display:block; margin-top:7px; font-size:10px; color:var(--dusk); text-transform:uppercase; letter-spacing:.05em}
.msg.user .src{color:var(--sand)}
.msg.typing{color:var(--dusk); font-style:normal; letter-spacing:.06em; text-transform:uppercase; font-size:11px}
.chat-input{display:flex; gap:8px; padding-top:10px}
.chat-input input{flex:1; padding:13px; font-size:15px; font-family:inherit; border:1px solid var(--line); border-radius:0; outline:none; background:#fff; color:var(--ink)}
.chat-input input:focus{border-color:var(--accent)}

/* Foto */
.preview{width:100%; border-radius:0; margin-top:12px; max-height:300px; object-fit:cover; border:1px solid var(--line)}
#view-foto textarea{margin-top:12px}
#view-foto .bigbtn{margin-top:12px; width:100%}

/* Suche */
.searchbar{margin-bottom:12px}
.searchbar input{width:100%; padding:13px; font-size:15px; font-family:inherit; border:1px solid var(--line); border-radius:0; outline:none; background:#fff; color:var(--ink)}
.searchbar input:focus{border-color:var(--accent)}

/* Tabbar */
.tabbar{position:fixed; left:0; right:0; bottom:0; height:calc(var(--tabbar-h) + var(--safe-bot));
  padding-bottom:var(--safe-bot); background:rgba(244,244,237,.94); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line); display:flex; z-index:50;
  max-width:640px; margin:0 auto}
.tab{flex:1; border:none; background:none; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; font-size:9px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray-d); cursor:pointer; font-family:inherit; padding:6px 0; border-top:2px solid transparent; margin-top:-1px}
.tab span{font-size:17px; line-height:1; filter:grayscale(1) opacity(.7)}
.tab.active{color:var(--accent); border-top-color:var(--accent)}
.tab.active span{filter:none}

/* Detail-Overlay (Volltext + Zusammenfassung) */
.detail{position:fixed; inset:0; z-index:90; background:rgba(22,21,30,.55); backdrop-filter:blur(3px);
  display:flex; align-items:flex-end; justify-content:center}
.detail.hidden{display:none}
.detail-box{background:var(--card); border:1px solid var(--line); border-bottom:none; width:100%;
  max-width:640px; max-height:82vh; overflow-y:auto; padding:18px 16px calc(var(--safe-bot) + 24px)}
.detail-head{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.detail-head .cat{border:1px solid var(--accent); color:var(--accent); padding:1px 8px; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.06em; font-weight:500}
.detail-meta{font-size:10.5px; color:var(--dusk); text-transform:uppercase; letter-spacing:.05em}
.detail-close{margin-left:auto; background:none; border:1px solid var(--line-2); color:var(--ink);
  width:34px; height:34px; font-size:20px; cursor:pointer; font-family:inherit; line-height:1}
.detail-close:active{border-color:var(--accent); color:var(--accent)}
#detail-title{font-size:16px; margin-bottom:12px; line-height:1.35}
.detail-summary{border-left:2px solid var(--accent); background:var(--plaster-2); padding:10px 12px;
  font-size:13px; line-height:1.6; margin-bottom:14px; color:var(--gray-d)}
.detail-text{font-size:14px; line-height:1.7; white-space:pre-wrap; word-wrap:break-word}
.list li.clickable{cursor:pointer}
.list li.clickable:active{border-color:var(--accent)}
.preview-sum{font-size:11.5px; color:var(--dusk); margin-top:4px; line-height:1.5}

/* Impulse (naechtlicher Mitdenker) */
.card.impulse{border-left:2px solid var(--gold)}
.card.impulse h2{color:var(--gold)}
.card.impulse h2::before,.card.impulse h2::after{color:var(--gold)}
.impulse-body{font-size:13.5px; line-height:1.7}
.impulse-body strong{font-weight:700}

/* Login */
body.login{display:flex; align-items:center; justify-content:center; min-height:100vh; max-width:none; padding:14px}
.loginbox{background:var(--card); border:1px solid var(--line); border-radius:0; padding:34px 26px; width:min(340px,90vw); text-align:center}
.loginbox h1{margin:0 0 20px; font-size:22px; letter-spacing:.04em; text-transform:uppercase}
.loginbox input{width:100%; padding:13px; font-size:15px; font-family:inherit; border:1px solid var(--line); border-radius:0; margin-bottom:12px; outline:none; background:#fff; color:var(--ink)}
.loginbox input:focus{border-color:var(--accent)}
.loginbox button{width:100%; padding:14px; font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--plaster); background:var(--midnight); border:1px solid var(--midnight); border-radius:0; cursor:pointer; font-family:inherit}
.loginbox button:active{background:var(--accent); border-color:var(--accent)}
.loginbox .err{color:var(--accent); font-size:12px; margin:0 0 12px; text-transform:uppercase; letter-spacing:.04em}

/* Dark mode — midnight sections */
@media (prefers-color-scheme:dark){
  :root{--bg:#16151E; --card:#1e1d27; --ink:#F4F4ED; --muted:#B7B1A1; --line:rgba(244,244,237,.16); --line-2:rgba(244,244,237,.3)}
  textarea,.loginbox input,.chat-input input,.searchbar input{background:#131219; color:var(--ink)}
  .card.warn{background:#1e1d27}
  .micbtn{color:var(--plaster)} .micbtn .dot{background:var(--plaster)}
  .bigbtn{background:var(--plaster); color:var(--midnight); border-color:var(--plaster)}
  .bigbtn:active{background:var(--accent); color:#fff; border-color:var(--accent)}
  .msg.user{background:var(--plaster); color:var(--midnight)}
  .tabbar{background:rgba(22,21,30,.94)}
  .list .cat,.status .badge{background:transparent}
  .detail-summary{background:#131219; color:var(--muted)}
  .detail-close{color:var(--ink)}
}