/* Nexus Messenger App – Schwarz-Gold-Design (identisch zur Website) */
:root{
  --bg:#0a0a0a;--bg2:#101012;--card:#161618;--card2:#1c1c1f;
  --gold:#d9b45a;--gold2:#e8ca7d;--gold-dark:#b8933d;
  --text:#f5f2ec;--muted:#a8a49c;--line:#242428;
  --green:#34c759;--red:#e0453a;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',Roboto,system-ui,sans-serif;line-height:1.5;overflow:hidden;user-select:none}
#app{height:100%;display:flex;flex-direction:column}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit}
.gold{color:var(--gold)}

/* ---------- Bausteine ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border-radius:12px;font-weight:700;font-size:15.5px}
.btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold) 55%,var(--gold-dark));color:#1a1405}
.btn-ghost{background:transparent;color:var(--gold);border:1px solid #3d3524}
.btn:active{filter:brightness(.92)}

.avatar{border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;flex:none;position:relative}
.av-0{background:linear-gradient(135deg,#b06ab3,#7b4397)}
.av-1{background:linear-gradient(135deg,#4b79cf,#283e6b)}
.av-2{background:linear-gradient(135deg,#cf6a87,#8e3b55)}
.av-3{background:linear-gradient(135deg,#5f8f6a,#2f4f39)}
.av-4{background:linear-gradient(135deg,#c98a3d,#7a4a1e)}
.av-5{background:linear-gradient(135deg,#7a7a85,#3a3a44)}
.online-dot{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid var(--bg)}

.badge{background:var(--gold);color:#1a1405;font-size:11.5px;font-weight:700;border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 6px}

.icon{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Screens & Header ---------- */
.screen{flex:1;display:flex;flex-direction:column;min-height:0}
.appbar{display:flex;align-items:center;gap:14px;padding:calc(var(--sat) + 12px) 18px 12px;background:var(--bg)}
.appbar h1{font-size:24px;font-weight:800;flex:1}
.appbar .sub{font-size:12px;color:var(--muted);font-weight:400;display:block;margin-top:-2px}
.appbar-btn{width:38px;height:38px;border-radius:50%;background:var(--card);display:grid;place-items:center;color:var(--text)}
.appbar-btn.gold{color:var(--gold)}
.back-btn{width:34px;height:34px;display:grid;place-items:center;color:var(--gold);font-size:26px;line-height:1}
.content{flex:1;overflow-y:auto;min-height:0;padding-bottom:12px}

/* ---------- Onboarding ---------- */
.ob{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--sat) + 40px) 32px calc(var(--sab) + 28px);gap:0}
.ob-icon{width:110px;height:110px;border-radius:32px;border:1px solid #3d3524;background:radial-gradient(circle at 30% 20%,#1c1913,#0d0c09);display:grid;place-items:center;margin-bottom:34px;box-shadow:0 0 60px rgba(217,180,90,.15)}
.ob-icon svg{width:52px;height:52px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ob h1{font-size:30px;font-weight:800;line-height:1.2}
.ob p{color:var(--muted);margin:16px 0 0;font-size:15px;max-width:300px}
.ob-actions{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:12px;padding-top:36px}
.ob-dots{display:flex;gap:7px;justify-content:center;margin-top:26px}
.ob-dots i{width:7px;height:7px;border-radius:50%;background:#333}
.ob-dots i.on{background:var(--gold);width:20px;border-radius:4px}
.brand-word{font-size:22px;font-weight:700;letter-spacing:6px;margin-top:18px}
.brand-sub{font-size:10px;letter-spacing:5px;color:var(--muted)}

/* ---------- Login ---------- */
.login{flex:1;display:flex;flex-direction:column;padding:calc(var(--sat) + 46px) 28px calc(var(--sab) + 24px);overflow-y:auto}
.login h1{font-size:27px;font-weight:800;margin-bottom:6px}
.login .hint{color:var(--muted);font-size:13.5px;margin-bottom:26px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:#cfcbc3;margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;background:var(--card);border:1px solid #2c2c30;border-radius:12px;color:var(--text);padding:13px 14px;font-size:15px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold-dark)}
.notice{background:#141210;border:1px solid #3d3524;border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--muted);margin:14px 0}
.error-box{background:#2a1210;border:1px solid #5c2620;border-radius:12px;padding:12px 14px;font-size:13px;color:#f0a9a0;margin-bottom:14px}
.field-hint{font-size:12px;margin-top:6px;color:var(--muted);min-height:15px}
.field-hint.ok{color:var(--green)}
.field-hint.err{color:#f0857a}
.legal-note{font-size:11.5px;color:#6b6862;text-align:center;margin-top:14px;line-height:1.4}
.link-btn{display:block;width:100%;text-align:center;color:var(--gold);font-size:14px;font-weight:600;padding:14px 4px;background:none}
.link-btn:active{opacity:.7}
.seg{display:flex;background:var(--card);border:1px solid #2c2c30;border-radius:12px;padding:4px;margin-bottom:22px}
.seg-btn{flex:1;padding:10px;border-radius:9px;font-weight:700;font-size:14.5px;color:var(--muted)}
.seg-btn.active{background:linear-gradient(135deg,var(--gold2),var(--gold-dark));color:#1a1405}

/* ---------- Tab-Bar ---------- */
.tabbar{display:flex;justify-content:space-around;border-top:1px solid var(--line);background:#0c0c0e;padding:8px 4px calc(var(--sab) + 8px)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--muted);flex:1;position:relative;padding-top:2px}
.tab.active{color:var(--gold)}
.tab .tab-badge{position:absolute;top:-2px;right:calc(50% - 22px);background:var(--gold);color:#1a1405;font-size:9.5px;font-weight:700;border-radius:999px;min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px}

/* ---------- Suche & Stories ---------- */
.search-wrap{padding:4px 18px 10px}
.search{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:12px;padding:10px 13px;color:var(--muted)}
.search input{flex:1;background:none;border:0;color:var(--text);outline:none;font-size:14.5px}
.stories{display:flex;gap:16px;padding:6px 18px 14px;overflow-x:auto;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10.5px;color:#c7c7cc;flex:none;background:none}
.story .avatar{width:56px;height:56px;font-size:19px;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold)}
.story.own .avatar{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #3a3a3c;background:var(--card2);color:var(--muted);font-size:26px}

/* ---------- Listen ---------- */
.list-row{display:flex;align-items:center;gap:13px;padding:12px 18px;width:100%;text-align:left;border-bottom:1px solid #141416}
.list-row:active{background:var(--card)}
.list-row .avatar{width:50px;height:50px;font-size:18px}
.lr-main{flex:1;min-width:0}
.lr-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lr-name{font-weight:700;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-time{font-size:11.5px;color:var(--muted);flex:none}
.lr-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px}
.lr-preview{color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty{padding:48px 32px;text-align:center;color:var(--muted);font-size:14px}
.empty svg{width:56px;height:56px;stroke:#3a3a3e;fill:none;stroke-width:1.4;margin-bottom:14px}
.section-label{font-size:12px;letter-spacing:2px;color:var(--gold);font-weight:700;padding:18px 18px 8px;text-transform:uppercase}

/* ---------- Menü-Listen (Einstellungen/Mehr) ---------- */
.menu-row{display:flex;align-items:center;gap:14px;padding:14px 18px;width:100%;text-align:left;border-bottom:1px solid #141416;font-size:15px}
.menu-row:active{background:var(--card)}
.menu-icon{width:36px;height:36px;border-radius:10px;background:var(--card);display:grid;place-items:center;color:var(--gold);flex:none}
.menu-icon .icon{width:19px;height:19px}
.menu-label{flex:1}
.menu-label .menu-sub{display:block;font-size:12px;color:var(--muted)}
.chevron{color:#4a4a4e;font-size:18px}
.menu-row.danger{color:#f0857a}
.menu-row.danger .menu-icon{color:#f0857a}
.profile-card{display:flex;align-items:center;gap:15px;padding:20px 18px;border-bottom:8px solid #0d0d0f}
.profile-card .avatar{width:64px;height:64px;font-size:24px}
.profile-card .p-name{font-size:18px;font-weight:800}
.profile-card .p-state{font-size:12.5px;color:var(--green)}

/* ---------- Toggles & Radios ---------- */
.toggle{width:46px;height:27px;border-radius:999px;background:#333;position:relative;transition:background .2s;flex:none}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:left .2s}
.toggle.on{background:var(--gold)}
.toggle.on::after{left:22px}
.radio{width:22px;height:22px;border-radius:50%;border:2px solid #4a4a4e;flex:none;display:grid;place-items:center}
.radio.on{border-color:var(--gold)}
.radio.on::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--gold)}

/* ---------- Chat ---------- */
.chat-head{display:flex;align-items:center;gap:11px;padding:calc(var(--sat) + 10px) 14px 10px;border-bottom:1px solid var(--line);background:var(--bg)}
.chat-head .avatar{width:40px;height:40px;font-size:15px}
.chat-head .c-name{font-weight:700;font-size:15.5px}
.chat-head .c-state{font-size:11.5px;color:var(--muted)}
.chat-head .grow{flex:1;min-width:0}
.messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:5px;background:radial-gradient(ellipse 80% 40% at 50% 0%,#12100c,var(--bg) 70%)}
.msg{max-width:78%;padding:9px 13px;border-radius:16px;font-size:14.5px;word-wrap:break-word;white-space:pre-wrap;user-select:text}
.msg.mine{align-self:flex-end;background:linear-gradient(135deg,var(--gold2),var(--gold) 60%,var(--gold-dark));color:#1a1405;border-bottom-right-radius:5px}
.msg.theirs{align-self:flex-start;background:var(--card2);border:1px solid #232326;border-bottom-left-radius:5px}
.msg .m-time{display:block;font-size:10px;opacity:.6;text-align:right;margin-top:2px}
.day-sep{align-self:center;font-size:11px;color:var(--muted);background:var(--card);border-radius:999px;padding:3px 12px;margin:8px 0}
.composer{display:flex;align-items:flex-end;gap:9px;padding:10px 12px calc(var(--sab) + 10px);border-top:1px solid var(--line);background:#0c0c0e}
.composer textarea{flex:1;background:var(--card);border:1px solid #2c2c30;border-radius:20px;color:var(--text);padding:11px 15px;font-size:14.5px;resize:none;max-height:110px;outline:none}
.comp-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--muted);flex:none}
.comp-btn.send{background:linear-gradient(135deg,var(--gold2),var(--gold-dark));color:#1a1405}

/* ---------- Anrufe ---------- */
.call-dir{font-size:12.5px;display:flex;align-items:center;gap:5px}
.call-dir.in{color:var(--green)}
.call-dir.out{color:var(--muted)}
.call-dir.missed{color:#f0857a}

/* ---------- Verifizierungscode ---------- */
.verify-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:260px;margin:26px auto}
.verify-grid span{background:var(--card);border:1px solid #2c2c30;border-radius:12px;padding:18px 0;text-align:center;font-size:22px;font-weight:800;color:var(--gold)}
.verify-lock{width:88px;height:88px;border-radius:50%;border:1px solid #3d3524;display:grid;place-items:center;margin:30px auto 0;background:#12100a}
.verify-lock svg{width:38px;height:38px;stroke:var(--gold);fill:none;stroke-width:1.6}

/* ---------- Toast & FAB ---------- */
.toast{position:fixed;bottom:calc(var(--sab) + 90px);left:50%;transform:translateX(-50%);background:#26221a;border:1px solid #3d3524;color:var(--text);padding:11px 20px;border-radius:12px;font-size:13.5px;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.5);max-width:86%;text-align:center}
.fab{position:fixed;right:18px;bottom:calc(var(--sab) + 86px);width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,var(--gold2),var(--gold-dark));color:#1a1405;display:grid;place-items:center;box-shadow:0 10px 26px rgba(217,180,90,.35);z-index:5}
.spinner{width:26px;height:26px;border:3px solid #2c2c30;border-top-color:var(--gold);border-radius:50%;margin:40px auto;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Große Screens (Web/Desktop/Tablet): zentrierte App-Karte ----------
   Auf schmalen Geräten (native App auf dem Handy) bleibt alles Vollbild.
   Ab 720px wird die App eine mittig platzierte Karte – nicht mehr über die
   volle Breite gestreckt, horizontal UND vertikal zentriert, und die untere
   Leiste sitzt sicher innerhalb der Karte (verschwindet nicht unter der
   Browser-/Taskleiste). */
@media (min-width:720px){
  html,body{height:auto}
  body{
    min-height:100vh;
    overflow:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:
      radial-gradient(70% 55% at 50% 0%, rgba(217,180,90,.10), transparent 72%),
      radial-gradient(60% 60% at 50% 120%, rgba(217,180,90,.06), transparent 70%),
      #060606;
  }
  #app{
    position:relative;
    width:min(460px,100%);
    height:min(880px,calc(100vh - 48px));
    border:1px solid #2a2a2e;
    border-radius:28px;
    overflow:hidden;
    background:var(--bg);
    box-shadow:0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(217,180,90,.05), inset 0 0 0 1px rgba(255,255,255,.02);
  }
  /* Login/Registrieren mittig in der Karte statt oben klebend */
  .login{justify-content:center;padding-top:26px;padding-bottom:26px}
  /* Onboarding: Block als Ganzes zentrieren (Button nicht mehr an den Boden
     kleben lassen), damit keine große Leere in der Mitte entsteht. */
  .ob{justify-content:center}
  .ob-actions{margin-top:0}
  /* FAB an die Karte binden, nicht an den Bildschirmrand */
  .fab{position:absolute;right:18px;bottom:84px}
  .toast{position:absolute;left:50%;bottom:90px}
}

/* Sehr breite Fenster: Karte etwas großzügiger, wirkt weniger „schmal". */
@media (min-width:1100px){
  #app{width:min(480px,100%)}
}