:root{--cyan:#14d9ff;--cyan2:#67eeff;--orange:#ff5415;--orange2:#ff8a2b;--bg:#020812;--panel:rgba(3,13,22,.88);--panel2:rgba(3,16,28,.96);--line:rgba(67,211,255,.28);--text:#f5fbff;--muted:#91a9b9;--green:#30e88d;--pink:#e25cff;--shadow:0 16px 50px rgba(0,0,0,.48)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#000;color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}body{overflow:hidden}.hidden{display:none!important}button,input{font:inherit}.screen{position:fixed;inset:0;background-image:linear-gradient(rgba(0,7,14,.18),rgba(0,6,12,.30)),url('moonfire-bg.png');background-position:center;background-repeat:no-repeat;background-size:cover}.glass{background:linear-gradient(180deg,rgba(4,17,29,.94),rgba(2,11,19,.91));border:1px solid rgba(68,210,255,.25);box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.035);backdrop-filter:blur(12px)}
.ice{color:var(--cyan)}.fire{color:var(--orange)}
.brand-mini{position:absolute;top:30px;left:48px;font-size:28px;font-weight:900;letter-spacing:.5px;text-shadow:0 0 20px rgba(20,217,255,.25)}.brand-mini small{display:block;color:white;font-size:11px;letter-spacing:8px;text-align:center;margin-top:2px}
.login-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,88vw);padding:30px 34px 28px;border-radius:22px;border-color:rgba(255,255,255,.15);box-shadow:0 0 0 1px rgba(20,217,255,.08),-18px 0 50px rgba(0,185,255,.13),18px 0 50px rgba(255,76,20,.12),0 30px 80px rgba(0,0,0,.58)}.login-card:before{content:"";position:absolute;inset:-1px;border-radius:22px;padding:1px;background:linear-gradient(100deg,var(--cyan),rgba(255,255,255,.1) 48%,var(--orange));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.login-mark{text-align:center;font-size:31px;font-weight:900}.login-mark .moon{color:#fff;margin-right:8px;text-shadow:-5px 0 18px var(--cyan),7px 0 20px var(--orange)}.login-card h1{text-align:center;margin:18px 0 4px;font-size:28px}.subtitle{text-align:center;color:#c2d5df;margin:0 0 22px;font-size:14px}#loginForm{display:flex;flex-direction:column;gap:10px}#loginForm>label{font-size:12px;color:#a9bec9;margin-top:2px}#loginForm input[type=text],#loginForm input[type=password],#loginForm>input{width:100%;height:49px;border:1px solid rgba(133,177,199,.28);border-radius:10px;background:rgba(1,10,18,.82);color:#fff;outline:none;padding:0 15px}#loginForm input:focus{border-color:var(--cyan);box-shadow:-5px 0 22px rgba(20,217,255,.10),5px 0 22px rgba(255,84,21,.07)}.password-wrap{position:relative}.password-wrap input{padding-right:48px!important}.password-wrap button{position:absolute;right:5px;top:4px;width:40px;height:40px;border:0;background:transparent;color:#d9e9f2;cursor:pointer}.login-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px}.check{display:flex!important;align-items:center;gap:6px;margin:0!important}.check input{accent-color:var(--cyan)}.text-link,.register-link{border:0;background:transparent;color:var(--cyan);cursor:pointer}.login-primary,.login-guest{height:50px;border-radius:12px;font-weight:900;cursor:pointer;letter-spacing:.4px}.login-primary{border:0;background:linear-gradient(90deg,#09bff3,#28ddff 48%,#ff6a1d);color:white;box-shadow:-12px 0 26px rgba(0,195,255,.18),12px 0 26px rgba(255,84,21,.14)}.login-guest{border:1px solid rgba(39,214,255,.65);background:rgba(2,15,25,.72);color:white}.or{height:22px;display:flex;align-items:center;gap:12px;color:#9cb2be;font-size:12px}.or:before,.or:after{content:"";height:1px;flex:1;background:rgba(150,190,208,.22)}.register-link{color:#dce8ee}.register-link strong{color:var(--cyan)}.notice{margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:9px;text-align:center;color:var(--cyan2);font-size:12px;background:#06141e}
.chat-screen{padding:18px}.topbar{height:112px;border-radius:22px;display:grid;grid-template-columns:260px 1fr 340px;align-items:center;padding:0 26px;gap:22px}.brand{font-size:31px;font-weight:900;white-space:nowrap}.brand small{display:block;color:white;font-size:10px;letter-spacing:9px;margin-left:20px}.topbar nav{display:flex;align-items:center;justify-content:center;gap:18px}.topbar nav button{border:0;background:transparent;color:#d9e5eb;font-size:12px;font-weight:800;padding:14px 5px;cursor:pointer}.topbar nav .nav-active{color:var(--cyan);border-bottom:2px solid var(--cyan)}.onair{height:68px;border:1px solid rgba(60,219,255,.65);border-radius:13px;display:flex;align-items:center;gap:12px;padding:9px 14px;background:linear-gradient(90deg,rgba(4,20,31,.92),rgba(10,13,18,.93));box-shadow:-8px 0 22px rgba(0,205,255,.13),8px 0 22px rgba(255,84,21,.08)}.onair .dot{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange)}.onair b{color:var(--cyan);font-size:14px}.onair small{display:block;margin-top:3px;color:white;font-size:11px}.bars{margin-left:auto;color:var(--orange);letter-spacing:2px}.layout{height:calc(100vh - 148px);margin-top:18px;display:grid;grid-template-columns:270px minmax(520px,1fr) 300px;gap:14px}.left-panel,.chat-panel,.right-panel section{border-radius:16px;overflow:hidden}.left-panel{padding:16px 14px}.panel-title{font-size:13px;font-weight:900;letter-spacing:.2px;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.panel-title button{border:1px solid var(--cyan);background:transparent;color:var(--cyan);border-radius:50%;width:28px;height:28px;cursor:pointer}.rooms{display:flex;flex-direction:column;gap:5px}.rooms button{height:38px;border:1px solid transparent;background:transparent;color:#e0e9ed;border-radius:9px;text-align:left;padding:0 12px;cursor:pointer}.rooms button:hover,.rooms button.active{border-color:rgba(20,217,255,.7);background:linear-gradient(90deg,rgba(20,217,255,.14),rgba(255,84,21,.04));color:var(--cyan);box-shadow:0 0 18px rgba(0,201,255,.08)}.divider{height:1px;background:rgba(160,196,210,.16);margin:14px 0}.profile-block{display:flex;align-items:center;gap:12px;margin-bottom:10px}.profile-block>div:last-child{display:flex;flex-direction:column;gap:5px}.online{font-size:12px;color:var(--green)}.side-action{display:block;width:100%;border:0;background:transparent;color:#dce7ec;text-align:left;padding:9px 8px;border-radius:8px;cursor:pointer}.side-action:hover{background:rgba(255,255,255,.04)}.side-action.danger:hover{color:#ff7d62}.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,#d8f5ff,#149bcc 35%,#05111a 60%,#ff631e 95%);border:1px solid rgba(74,222,255,.65);font-size:11px;font-weight:900;box-shadow:-4px 0 12px rgba(20,217,255,.13),4px 0 12px rgba(255,84,21,.10)}.avatar.large{width:58px;height:58px;font-size:14px}.chat-panel{display:flex;flex-direction:column;min-width:0}.chat-head{height:72px;flex:0 0 72px;padding:12px 18px;border-bottom:1px solid rgba(90,155,180,.18);display:flex;align-items:center;justify-content:space-between}.chat-head h1{margin:0;font-size:19px}.chat-head p{margin:4px 0 0;color:#c2d2da;font-size:12px}.chat-head>span{font-size:12px;color:#abc0ca}.chat-head i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:5px}.messages{flex:1;overflow:auto;padding:4px 18px}.message{display:grid;grid-template-columns:50px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid rgba(91,125,142,.14)}.message-head{display:flex;align-items:center;gap:8px;min-width:0}.message-head strong{color:var(--cyan);font-size:14px}.message:nth-child(2n) .message-head strong{color:#e05cff}.message:nth-child(4n) .message-head strong{color:#63b6ff}.badge{font-size:10px;border:1px solid var(--cyan);color:var(--cyan);border-radius:5px;padding:2px 6px}.time{font-size:11px;color:#728a97}.message p{font-size:14px;line-height:1.45;margin:5px 0 0}.composer{height:64px;flex:0 0 64px;margin:8px 10px 10px;display:grid;grid-template-columns:40px 1fr 40px 46px 52px;align-items:center;gap:6px;padding:5px;border:1px solid rgba(82,145,170,.32);background:rgba(3,16,26,.94);border-radius:12px}.composer input{min-width:0;background:transparent;border:0;outline:0;color:white;padding:0 7px}.composer button{height:42px;border:0;border-radius:9px;background:transparent;color:#dbe8ee;cursor:pointer;font-size:19px}.composer .gif{font-size:11px;border:1px solid #405761}.composer .send{background:linear-gradient(135deg,var(--cyan),#05aef0 58%,var(--orange));color:white}.emoji-tray{position:absolute;left:300px;bottom:92px;max-width:390px;padding:10px;background:rgba(2,17,27,.98);border:1px solid var(--line);border-radius:12px;box-shadow:0 0 24px rgba(0,204,255,.16);z-index:20}.emoji-tray button{border:0;background:transparent;font-size:23px;cursor:pointer;padding:5px}.right-panel{display:flex;flex-direction:column;gap:14px;min-width:0}.right-panel section{padding:15px}.online-panel{flex:1}.online-list{display:flex;flex-direction:column;gap:7px;margin-bottom:8px}.online-user{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;font-size:12px}.mini-avatar{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#79eeff,#0f648d 46%,#06101a);border:1px solid rgba(66,220,255,.45)}.status{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px rgba(48,232,141,.45)}.role{font-size:9px;color:var(--cyan);border:1px solid rgba(20,217,255,.55);border-radius:5px;padding:2px 5px}.online-panel>small{color:#91a7b2}.events-panel{flex:0 0 250px}.event{display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid rgba(130,170,188,.13);font-size:11px}.event b{font-size:12px}.event span{color:#9fb3be}.family{text-align:center;margin-top:18px;font-family:cursive;color:var(--cyan);font-size:20px;transform:rotate(-4deg);text-shadow:0 0 14px rgba(20,217,255,.3)}.family em{color:var(--orange);font-style:normal}.mobile-actions{display:none}
@media(max-width:1100px){body{overflow:auto}.screen{position:absolute;min-height:100vh}.chat-screen{padding:8px}.topbar{height:82px;grid-template-columns:1fr auto;padding:0 16px}.topbar nav{display:none}.onair{height:56px;width:300px}.layout{height:calc(100vh - 106px);grid-template-columns:220px 1fr}.right-panel{display:none}.left-panel{padding:11px}.emoji-tray{left:236px}.brand{font-size:24px}}
@media(max-width:760px){.brand-mini{left:20px;top:20px;font-size:22px}.login-card{padding:24px 20px}.login-row{font-size:11px}.topbar{display:none}.layout{height:100vh;margin:0;display:block}.left-panel{display:none}.chat-panel{height:calc(100vh - 58px);border-radius:0}.chat-head{height:64px;flex-basis:64px}.chat-head>span{display:none}.messages{padding:2px 10px}.message{grid-template-columns:38px 1fr;gap:8px}.avatar{width:34px;height:34px}.message p,.message-head strong{font-size:12px}.composer{grid-template-columns:37px 1fr 48px}.composer .attach,.composer .gif{display:none}.emoji-tray{left:10px;bottom:72px;max-width:calc(100vw - 20px)}.mobile-actions{position:fixed;display:flex;bottom:7px;left:50%;transform:translateX(-50%);z-index:30;padding:6px;border-radius:12px;gap:6px}.mobile-actions button{border:1px solid rgba(20,217,255,.35);background:#061621;color:white;border-radius:8px;padding:7px 11px}}

/* Original MoonFire logo supplied by the user */
.brand-mini{
  width:330px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.brand-mini img{
  display:block;
  width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 0 16px rgba(20,217,255,.18)) drop-shadow(0 0 14px rgba(255,84,21,.14));
}
.login-mark{
  height:105px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.login-mark img{
  display:block;
  width:min(390px,90%);
  max-height:105px;
  object-fit:contain;
  filter:drop-shadow(-7px 0 16px rgba(20,217,255,.14)) drop-shadow(7px 0 16px rgba(255,84,21,.12));
}
.brand{
  height:78px;
  display:flex;
  align-items:center;
}
.brand img{
  display:block;
  width:235px;
  max-height:72px;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(-4px 0 12px rgba(20,217,255,.12)) drop-shadow(4px 0 12px rgba(255,84,21,.10));
}
@media(max-width:1100px){
  .brand img{width:195px;max-height:58px}
}
@media(max-width:760px){
  .brand-mini{width:250px;height:76px}
  .login-mark{height:84px}
  .login-mark img{max-height:84px}
}


/* =========================================================
   Toolbar / Composer visibility fix
   Keeps the message toolbar visible for guest and user login.
   ========================================================= */
.chat-screen{
  display:flex;
  flex-direction:column;
  height:100dvh;
  min-height:0;
  overflow:hidden;
}

.chat-screen > .topbar{
  flex:0 0 112px;
}

.chat-screen > .layout{
  flex:1 1 auto;
  height:auto;
  min-height:0;
  margin-top:18px;
}

.chat-panel{
  position:relative;
  min-height:0;
  overflow:hidden;
}

.messages{
  min-height:0;
}

.composer{
  position:relative;
  z-index:15;
  flex-shrink:0;
  visibility:visible;
  opacity:1;
}

@media(max-width:1100px){
  .chat-screen{
    min-height:100dvh;
    height:100dvh;
    overflow:hidden;
  }
  .chat-screen > .topbar{
    flex-basis:82px;
  }
  .chat-screen > .layout{
    height:auto;
    min-height:0;
    margin-top:8px;
  }
}

@media(max-width:760px){
  .chat-screen{
    padding:0;
    height:100dvh;
    min-height:100dvh;
  }
  .chat-screen > .layout{
    flex:1 1 auto;
    height:auto;
    min-height:0;
    margin:0;
  }
  .chat-panel{
    height:calc(100dvh - 58px);
    min-height:0;
  }
  .composer{
    margin-bottom:64px;
  }
  .emoji-tray{
    bottom:126px;
  }
}


/* =========================================================
   Toolbar visibility fix v2
   Explicit 3-row chat layout: header / messages / composer.
   ========================================================= */
.chat-panel{
  display:grid !important;
  grid-template-rows:72px minmax(0,1fr) 84px !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
  position:relative !important;
}

.chat-head{
  grid-row:1;
  height:auto !important;
  min-height:0 !important;
}

.messages{
  grid-row:2;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-bottom:8px !important;
}

.composer{
  grid-row:3;
  align-self:center;
  width:calc(100% - 20px);
  height:64px !important;
  min-height:64px !important;
  margin:10px !important;
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  pointer-events:auto !important;
  z-index:50 !important;
}

.composer input,
.composer button{
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

.emoji-tray{
  left:10px !important;
  bottom:92px !important;
  z-index:60 !important;
}

@media(max-width:760px){
  .chat-panel{
    grid-template-rows:64px minmax(0,1fr) 82px !important;
    height:100dvh !important;
  }
  .composer{
    width:calc(100% - 16px);
    margin:8px !important;
    height:62px !important;
    min-height:62px !important;
  }
  .emoji-tray{
    bottom:94px !important;
  }
}


/* =========================================================
   Header + Toolbar visibility fix v3
   - Original logo is fully visible
   - Top navigation buttons stay inside the header
   - Every composer/toolbar button remains visible
   ========================================================= */

/* Header */
.topbar{
  grid-template-columns:230px minmax(0,1fr) 300px !important;
  gap:14px !important;
  padding:0 20px !important;
  overflow:visible !important;
}

.brand{
  width:220px !important;
  height:92px !important;
  min-width:0 !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
}

.brand img{
  width:220px !important;
  height:auto !important;
  max-width:100% !important;
  max-height:88px !important;
  object-fit:contain !important;
  object-position:left center !important;
  display:block !important;
}

.topbar nav{
  min-width:0 !important;
  gap:8px !important;
  overflow:visible !important;
}

.topbar nav button{
  flex:0 1 auto !important;
  min-width:0 !important;
  padding:13px 8px !important;
  white-space:nowrap !important;
  font-size:11px !important;
}

/* ON AIR panel slightly narrower so navigation never gets clipped */
.onair{
  width:100% !important;
  min-width:0 !important;
}

/* Message toolbar */
.composer{
  box-sizing:border-box !important;
  grid-template-columns:42px minmax(120px,1fr) 42px 46px 54px !important;
  column-gap:6px !important;
  padding:5px 7px !important;
  overflow:visible !important;
}

.composer input{
  width:100% !important;
  min-width:0 !important;
}

.composer button{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}

.composer .attach,
.composer .gif,
.composer .send{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* 1366–1600 px: keep all header controls readable */
@media(max-width:1600px) and (min-width:1101px){
  .topbar{
    grid-template-columns:190px minmax(0,1fr) 260px !important;
    padding:0 14px !important;
    gap:8px !important;
  }
  .brand{
    width:180px !important;
  }
  .brand img{
    width:180px !important;
    max-height:72px !important;
  }
  .topbar nav{
    gap:4px !important;
  }
  .topbar nav button{
    font-size:10px !important;
    padding:12px 5px !important;
  }
  .onair{
    padding:8px 10px !important;
  }
}

/* Existing tablet layout: preserve complete logo */
@media(max-width:1100px){
  .brand{
    width:190px !important;
    height:70px !important;
  }
  .brand img{
    width:190px !important;
    max-height:66px !important;
  }
}

/* Mobile composer: show emoji, input and send cleanly */
@media(max-width:760px){
  .composer{
    grid-template-columns:40px minmax(80px,1fr) 52px !important;
    width:calc(100% - 16px) !important;
    overflow:visible !important;
  }
  .composer .attach,
  .composer .gif{
    display:none !important;
  }
  .composer .send{
    display:flex !important;
  }
}


/* =========================================================
   v4 – komplette Chatseite etwas kleiner
   Ziel: Logo + komplette Navigation + Toolbar vollständig sichtbar
   ========================================================= */

html, body{
  overflow:hidden !important;
}

/* Desktop: gesamte Chat-Oberfläche auf 90 % verkleinern */
@media(min-width:1101px){
  #chatApp.chat-screen:not(.hidden){
    position:fixed !important;
    top:0 !important;
    left:50% !important;
    width:100vw !important;
    height:100dvh !important;
    transform:translateX(-50%) scale(.90) !important;
    transform-origin:top center !important;
    overflow:hidden !important;
  }

  /* Etwas mehr nutzbare Breite im Header */
  #chatApp .topbar{
    grid-template-columns:250px minmax(0,1fr) 300px !important;
    height:104px !important;
    padding:0 18px !important;
    gap:10px !important;
  }

  #chatApp .brand{
    width:240px !important;
    height:92px !important;
  }

  #chatApp .brand img{
    width:235px !important;
    max-width:235px !important;
    max-height:86px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  #chatApp .topbar nav{
    gap:5px !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
  }

  #chatApp .topbar nav button{
    font-size:10.5px !important;
    padding:11px 5px !important;
    white-space:nowrap !important;
  }

  #chatApp .onair{
    height:62px !important;
    padding:7px 10px !important;
  }

  #chatApp > .layout{
    margin-top:12px !important;
    height:calc(100dvh - 128px) !important;
    grid-template-columns:250px minmax(460px,1fr) 280px !important;
    gap:11px !important;
  }

  /* Toolbar kompakter, aber vollständig sichtbar */
  #chatApp .chat-panel{
    grid-template-rows:68px minmax(0,1fr) 78px !important;
  }

  #chatApp .composer{
    width:calc(100% - 16px) !important;
    height:58px !important;
    min-height:58px !important;
    margin:8px !important;
    grid-template-columns:38px minmax(100px,1fr) 38px 42px 50px !important;
    gap:5px !important;
    padding:4px 6px !important;
  }

  #chatApp .composer button{
    height:40px !important;
  }
}

/* Kleinere Laptop-/Browserfenster: noch etwas stärker verkleinern */
@media(max-width:1600px) and (min-width:1101px){
  #chatApp.chat-screen:not(.hidden){
    transform:translateX(-50%) scale(.84) !important;
  }

  #chatApp .topbar{
    grid-template-columns:225px minmax(0,1fr) 270px !important;
  }

  #chatApp .brand{
    width:215px !important;
  }

  #chatApp .brand img{
    width:210px !important;
    max-width:210px !important;
  }

  #chatApp .topbar nav button{
    font-size:9.8px !important;
    padding:10px 4px !important;
  }
}


/* =========================================================
   v5 – nochmals etwas kleiner
   Desktop 82 %, kleinere Desktop-/Laptopfenster 76 %
   ========================================================= */
@media(min-width:1601px){
  #chatApp.chat-screen:not(.hidden){
    transform:translateX(-50%) scale(.82) !important;
  }
}

@media(max-width:1600px) and (min-width:1101px){
  #chatApp.chat-screen:not(.hidden){
    transform:translateX(-50%) scale(.76) !important;
  }
}


/* =========================================================
   v6 – Nachrichten-Toolbar garantiert sichtbar
   Die verkleinerte Gesamtansicht bleibt erhalten.
   ========================================================= */

@media(min-width:1101px){
  #chatApp.chat-screen:not(.hidden){
    overflow:visible !important;
  }

  #chatApp > .layout{
    /* Mehr Luft am unteren Rand trotz Skalierung */
    height:calc(100dvh - 190px) !important;
    min-height:520px !important;
    overflow:hidden !important;
  }

  #chatApp .chat-panel{
    display:grid !important;
    grid-template-rows:64px minmax(0,1fr) 74px !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
    padding-bottom:0 !important;
  }

  #chatApp .messages{
    grid-row:2 !important;
    min-height:0 !important;
    overflow-y:auto !important;
    padding-bottom:12px !important;
  }

  #chatApp .composer{
    grid-row:3 !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    top:auto !important;
    transform:none !important;
    align-self:center !important;
    justify-self:center !important;
    width:calc(100% - 16px) !important;
    height:58px !important;
    min-height:58px !important;
    margin:8px !important;
    display:grid !important;
    grid-template-columns:40px minmax(100px,1fr) 40px 44px 52px !important;
    gap:5px !important;
    visibility:visible !important;
    opacity:1 !important;
    overflow:visible !important;
    z-index:999 !important;
  }

  #chatApp .composer input,
  #chatApp .composer button,
  #chatApp .composer .attach,
  #chatApp .composer .gif,
  #chatApp .composer .send{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  #chatApp .composer input{
    min-width:0 !important;
    width:100% !important;
  }

  #chatApp .emoji-tray{
    bottom:78px !important;
    z-index:1000 !important;
  }
}

/* Auf niedrigeren Laptop-Displays noch etwas mehr Platz unten reservieren */
@media(max-height:900px) and (min-width:1101px){
  #chatApp > .layout{
    height:calc(100dvh - 220px) !important;
  }
}

/* Mobile/Tablet: Toolbar ebenfalls als feste letzte Chat-Zeile */
@media(max-width:1100px){
  #chatApp .chat-panel{
    display:grid !important;
    grid-template-rows:60px minmax(0,1fr) 76px !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  #chatApp .composer{
    grid-row:3 !important;
    position:relative !important;
    bottom:auto !important;
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:999 !important;
  }
}


/* =========================================================
   v7 – Vollbild
   100 % Browserbreite/-höhe, Toolbar bleibt sichtbar.
   ========================================================= */
html, body{
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

#chatApp.chat-screen:not(.hidden){
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100dvh !important;
  transform:none !important;
  transform-origin:initial !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

/* Full-width header */
#chatApp > .topbar{
  flex:0 0 104px !important;
  width:100% !important;
  box-sizing:border-box !important;
  grid-template-columns:245px minmax(0,1fr) 290px !important;
  gap:10px !important;
  padding:0 16px !important;
}

#chatApp .brand{
  width:235px !important;
  height:94px !important;
}
#chatApp .brand img{
  width:230px !important;
  max-width:230px !important;
  max-height:88px !important;
  object-fit:contain !important;
  object-position:left center !important;
}

#chatApp .topbar nav{
  min-width:0 !important;
  display:flex !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap:5px !important;
}
#chatApp .topbar nav button{
  flex:0 1 auto !important;
  min-width:0 !important;
  padding:11px 5px !important;
  font-size:10px !important;
  white-space:nowrap !important;
}

/* Main area consumes exactly the remaining viewport height */
#chatApp > .layout{
  flex:1 1 auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:10px 0 0 !important;
  padding:0 10px 10px !important;
  box-sizing:border-box !important;
  grid-template-columns:250px minmax(0,1fr) 280px !important;
  gap:10px !important;
  overflow:hidden !important;
}

/* Chat has a guaranteed bottom toolbar row */
#chatApp .chat-panel{
  display:grid !important;
  grid-template-rows:64px minmax(0,1fr) 76px !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
}

#chatApp .messages{
  grid-row:2 !important;
  min-height:0 !important;
  overflow-y:auto !important;
  padding-bottom:10px !important;
}

#chatApp .composer{
  grid-row:3 !important;
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  align-self:center !important;
  justify-self:center !important;
  width:calc(100% - 16px) !important;
  height:58px !important;
  min-height:58px !important;
  margin:8px !important;
  padding:4px 6px !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:40px minmax(100px,1fr) 40px 44px 52px !important;
  gap:5px !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:visible !important;
  z-index:999 !important;
}

#chatApp .composer input,
#chatApp .composer button,
#chatApp .composer .attach,
#chatApp .composer .gif,
#chatApp .composer .send{
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

#chatApp .emoji-tray{
  bottom:78px !important;
  z-index:1000 !important;
}

/* Keep fullscreen usable on narrower desktop windows */
@media(max-width:1450px) and (min-width:1101px){
  #chatApp > .topbar{
    grid-template-columns:205px minmax(0,1fr) 245px !important;
    padding:0 10px !important;
    gap:6px !important;
  }
  #chatApp .brand{
    width:198px !important;
  }
  #chatApp .brand img{
    width:195px !important;
    max-width:195px !important;
  }
  #chatApp .topbar nav{
    gap:2px !important;
  }
  #chatApp .topbar nav button{
    font-size:9px !important;
    padding:10px 3px !important;
  }
  #chatApp > .layout{
    grid-template-columns:220px minmax(0,1fr) 245px !important;
  }
}