:root{
  --bg:#0b0f14;
  --card:#111824;
  --muted:#7e8aa3;
  --text:#e8eefc;
  --line:#1b2536;
  --accent:#4da3ff;
  --danger:#ff5d5d;
  --ok:#4dffb5;
  --shadow: 0 10px 35px rgba(0,0,0,.35);
  --r:16px;
  --pad:14px;
  --max:980px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background: radial-gradient(1200px 700px at 20% 0%, #132033 0%, var(--bg) 55%);
  color:var(--text);
}

a{color:inherit; text-decoration:none}
small{color:var(--muted)}
hr{border:none; border-top:1px solid var(--line); margin:16px 0}

.wrap{max-width:var(--max); margin:0 auto; padding:22px 14px 48px}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background: rgba(17,24,36,.85);
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  position: sticky; top: 12px; z-index: 5;
  backdrop-filter: blur(10px);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.pill{
  padding:6px 10px; border-radius:999px;
  background: rgba(77,163,255,.12);
  border:1px solid rgba(77,163,255,.25);
  color:#bfe0ff;
  font-size:12px;
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  margin-top:14px;
}
@media(min-width:860px){
  .grid.two{grid-template-columns: 1fr 1fr}
}

.card{
  background: rgba(17,24,36,.85);
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--pad);
}
.h1{font-size:22px; margin:0 0 8px}
.h2{font-size:16px; margin:0 0 8px; color:#cfe0ff}
.p{margin:0; color:var(--muted); line-height:1.45}

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row.spread{justify-content:space-between}

.btn{
  appearance:none;
  border:none;
  background: rgba(77,163,255,.18);
  border:1px solid rgba(77,163,255,.35);
  color:#d7ebff;
  padding:10px 12px;
  border-radius: 12px;
  cursor:pointer;
  font-weight:650;
}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn.secondary{
  background: rgba(126,138,163,.14);
  border:1px solid rgba(126,138,163,.25);
}
.btn.danger{
  background: rgba(255,93,93,.14);
  border:1px solid rgba(255,93,93,.28);
}
.btn.link{
  background: transparent;
  border: 1px solid rgba(126,138,163,.25);
}

.input, .textarea{
  width:100%;
  background: rgba(10,14,20,.65);
  border:1px solid rgba(126,138,163,.18);
  color: var(--text);
  padding:10px 12px;
  border-radius: 12px;
  outline:none;
}
.textarea{min-height:110px; resize:vertical}
body.chatpage .textarea{min-height:78px;}

.label{font-size:12px; color:var(--muted); margin:8px 0 6px}
.note{font-size:12px; color:var(--muted); margin-top:8px}

.list{display:flex; flex-direction:column; gap:10px}
.item{
  padding:12px;
  border-radius: 14px;
  border:1px solid rgba(126,138,163,.18);
  background: rgba(10,14,20,.45);
}
.item .top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.item .title{font-weight:750}
.item .meta{font-size:12px; color:var(--muted)}
.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  background: rgba(126,138,163,.12);
  border:1px solid rgba(126,138,163,.25);
  padding:3px 7px;
  border-radius: 999px;
}

.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  background: rgba(17,24,36,.95);
  border: 1px solid rgba(126,138,163,.25);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: var(--shadow);
  color: #e8eefc;
  font-weight:650;
  display:none;
  z-index: 20;
}
.toast.show{display:block}

.chat{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex: 1;
  min-height: 0;          /* KRITIKUS: flex-gyerek gördülése */
  overflow-y:auto;        /* JAVÍTVA: csak Y irányban görgessen, és biztosan */
  padding-right: 2px;
  height: 100%;
  -webkit-overflow-scrolling: touch; /* iOS/telefonon simább görgetés */
}

.msg{
  border:1px solid rgba(126,138,163,.18);
  background: rgba(10,14,20,.45);
  border-radius: 16px;
  padding:10px 12px;
  max-width: 92%;
}
.msg.me{margin-left:auto; border-color: rgba(77,163,255,.28); background: rgba(77,163,255,.10)}
.msg .time{font-size:11px; color:var(--muted); margin-top:6px}
.msg img{max-width:100%; border-radius: 12px; display:block; margin-top:8px}

.qrbox{
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  border:1px dashed rgba(126,138,163,.25);
  border-radius: 16px;
  background: rgba(10,14,20,.35);
}

/* ===== Chat oldal: egyetlen scroll (csak a chat lista) ===== */
body.chatpage{
  height: 100dvh;
  overflow: hidden; /* megszünteti a page scrollt -> nincs dupla görgetés */
}

body.chatpage .wrap{
  height: 100vh;     /* fallback */
  height: 100dvh;    /* modern mobil viewport */
  display: flex;
  flex-direction: column;
  padding-bottom: 14px;
}

body.chatpage .grid{
  flex: 1 1 auto;
  min-height: 0;     /* KRITIKUS: a belső scroll működéséhez */
  height: auto;      /* ne számolgassunk, a flex intézi */
  /* JAVÍTÁS: A grid sor ne legyen 'auto', mert az kinyúlik a tartalommal.
     1fr-re állítva kényszerítjük, hogy maradjon a flex container méretében. */
  grid-template-rows: minmax(0, 1fr);
}

body.chatpage .card.chatcard{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Biztonsági tartalék */
}

/* Chat kártya belső felosztás */
body.chatpage .chathead{
  flex: 0 0 auto;
}

body.chatpage .chatmain{
  flex: 1 1 auto;
  min-height: 0;         /* KRITIKUS */
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;      /* ne a kártya “folyjon”, csak a chat lista */
}

body.chatpage .chatcomposer{
  flex: 0 0 auto;
  margin-top: 12px;
}

body.chatpage .textarea{
  resize: none; /* mobilon a resize gyakran borítja a layoutot */
}

/* Képek ne nyomják szét a chatet */
body.chatpage .msg img{
  max-height: 46vh;
  object-fit: contain;
}

/* ... a korábbi CSS kódod változatlan marad, csak ezt írd a fájl legvégére ... */

/* MOBIL OPTIMALIZÁLÁS */
@media (max-width: 700px) {
  /* Mobilon a chat oldalon elrejtjük a nagy navigációt */
  body.chatpage .nav {
    display: none;
  }

  /* Nullázzuk a kereteket, hogy teljes képernyős legyen */
  body.chatpage .wrap {
    padding: 0;
    height: 100dvh;
  }

  body.chatpage .grid {
    margin: 0;
    height: 100%;
    gap: 0;
  }

  /* A kártya ne legyen "kártya" kinézetű, hanem töltse ki a teret */
  body.chatpage .card.chatcard {
    border-radius: 0;
    border: none;
    background: transparent; /* Vagy a háttérszín */
    padding: 10px;
  }
  
  /* A szövegdoboz kicsit kisebb legyen mobilon */
  body.chatpage .textarea {
    min-height: 50px;
    padding: 8px;
  }
}

/* Új elem: Vissza gomb, ami csak mobilon látszik majd */
.mobile-back {
  display: none;
  margin-right: 10px;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
}
@media (max-width: 700px) {
  .mobile-back { display: block; }
}

/* ===== Chat bubble fix: a dátum mindig a szöveg/kép ALÁ kerüljön ===== */
.msgRow{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:8px;              /* ez hozza közel az avatart a tartalomhoz */
  min-width:0;
}
.msgRow.me{ justify-content:flex-end; }

.bubble{
  display:flex;
  flex-direction:column; /* fontos: a tartalom + dátum egymás alatt */
  gap:6px;
  min-width:0;
  max-width:100%;
}

.bubble .time{
  align-self:flex-end;   /* dátum jobbra, de a bubble ALJÁN */
  white-space:nowrap;
  margin-top:4px;
}

/* Képes üzenet: soha ne lógjon ki mobilon se */
.chat-img{
  max-width:100%;
  width:100%;
  height:auto;
  border-radius:12px;
  display:block;
  object-fit:contain;
}

.chat-video{
  width: 100%;
  max-width: 420px;     /* <<< DESKTOP: ne legyen óriási */
  height: auto;
  max-height: 46vh;     /* <<< ne nőjön túl magasra */
  border-radius: 12px;
  display: block;
  margin: 6px auto 0;   /* <<< középre igazítás a bubble-ben */
  object-fit: contain;
}

/* ===== PWA / Standalone safe-area fix (Android nav bar + iOS home indicator) ===== */
:root{
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Chat oldal: hagyjunk “biztos” helyet alul, hogy a rendszer gombok ne takarjanak */
body.chatpage .wrap{
  padding-bottom: calc(14px + var(--safe-b));
}

/* Mobilon a chat kártya alja is kapjon extra helyet */
@media (max-width: 700px) {
  body.chatpage .card.chatcard{
    padding-bottom: calc(10px + var(--safe-b));
  }

  .chat-video{
    max-width: 320px;   /* <<< MOBIL: még kisebb kártya */
    max-height: 34vh;
    margin: 6px auto 0;
  }

  /* Composer kapja a legfontosabb extra helyet */
  body.chatpage .chatcomposer{
    padding-bottom: calc(10px + var(--safe-b));
  }
}

/* Extra: a toast se csússzon a nav bar alá */
.toast{
  bottom: calc(18px + var(--safe-b));
}

/* Viewport magasság hardening: standalone/toolbar esetek */
body.chatpage,
body.chatpage .wrap{
  height: 100svh;  /* small viewport height */
  height: 100dvh;  /* dynamic viewport height */
}

/* ===== ANDROID PWA (standalone) NAV BAR FIX =====
   Sok Androidon a safe-area inset 0, de a rendszer navigáció ráül.
   Standalone módban adunk fix alsó puffert.
*/
@media (display-mode: standalone), (display-mode: fullscreen) {
  :root{
    --pwa-navpad: 56px; /* tipikus Android nav bar + kis puffer */
  }

  /* A legfontosabb: a composer alá kerüljön puffer */
  body.chatpage .chatcomposer{
    padding-bottom: var(--pwa-navpad) !important;
  }

  /* Biztonsági tartalék: a teljes wrap se érjen le a nav-bar alá */
  body.chatpage .wrap{
    padding-bottom: var(--pwa-navpad) !important;
  }

  /* A toast se csússzon alá */
  .toast{
    bottom: calc(18px + var(--pwa-navpad)) !important;
  }
}

/* Ha nagyon alacsony a kijelző (pl. billentyűzet + nav), adjunk nagyobbat */
@media (display-mode: standalone) and (max-height: 740px) {
  :root{ --pwa-navpad: 102px; }
}

/* Chat linkek */
.msgText a{
  text-decoration: underline;
  word-break: break-word;
}

/* ===== MOBIL KÉP TORZULÁS FIX ===== */

/* A bubble soha ne nyomja össze a tartalmat */
.bubble{
  width: fit-content;
  max-width: 100%;
}

/* Üzenet doboz ne kényszerítse a képet shrink-re */
.msg{
  width: fit-content;
  max-width: 92%;
}

/* KÉP: mindig saját arány, soha ne nyúljon */
.chat-img,
.msg img{
  display:block;
  max-width:100%;
  width:auto;
  height:auto;
  max-height:60vh;
  object-fit:contain;
  border-radius:12px;
}

/* Mobil extra védelem */
@media (max-width:700px){

  .msg{
    max-width:100%;
  }

  .bubble{
    max-width:100%;
  }

  .chat-img,
  .msg img{
    max-width:100%;
    width:auto;
    height:auto;
    max-height:52vh;
  }
}

.videoDlBtn{
  margin-top:10px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #e8eefc;
  cursor:pointer;
  font-size:13px;
}
.videoDlBtn:hover{ background: rgba(255,255,255,0.10); }
.videoDlBtn:disabled{ opacity:0.6; cursor:default; }

/* =========================================================
   VISOJI BADGE UI
   ========================================================= */

.assetThumbBadgeWrap{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  overflow:hidden;
}

.assetThumbBadgeWrap > img,
.assetThumbBadgeWrap > video,
.chatPreviewTokenInner > img,
.chatPreviewTokenInner > video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#0b1220;
}

.assetBadgeOverlay{
  position:absolute;
  left:4px;
  right:4px;
  bottom:4px;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  pointer-events:none;
}

.assetBadgeRow{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}

.assetBadgeRowTight{
  gap:4px;
  margin-top:5px;
}

.assetBadgePill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(10,14,20,0.78);
  color:#eef4ff;
  font-size:10px;
  font-weight:800;
  line-height:1;
  letter-spacing:0.01em;
  white-space:nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.24);
  backdrop-filter: blur(8px);
}

.assetBadgePill.overlay{
  min-height:18px;
  padding:2px 6px;
  font-size:9px;
  background: rgba(5,10,18,0.82);
}

.assetBadgePill.subtle{
  background: rgba(255,255,255,0.06);
  border-color: rgba(126,138,163,0.18);
  color:#dce6fb;
}

.composerTokenSelectedMeta,
.tokenChoiceMeta,
.inlineSuggestMeta{
  min-width:0;
}

.composerTokenSelectedMeta > div,
.tokenChoiceBottom,
.inlineSuggestMeta span{
  word-break:break-word;
}

.chatPreviewTokenInner{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  overflow:hidden;
}

/* =========================================================
   FIX: inline suggest preview ne nőjön meg
   ========================================================= */

.inlineSuggestThumbWrap{
  flex:0 0 auto;
  width:44px;
  height:44px;
  display:block;
}

.inlineSuggestThumbWrap > .assetThumbBadgeWrap{
  width:44px;
  height:44px;
  border-radius:12px;
  display:block;
}

.inlineSuggestThumbWrap .assetBadgeOverlay{
  left:3px;
  right:3px;
  bottom:3px;
  gap:3px;
}

.inlineSuggestThumbWrap .assetBadgePill.overlay{
  min-height:14px;
  padding:1px 5px;
  font-size:8px;
  line-height:1;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================================================
   FIX: MyChats preview badge legyen olvashatóbb
   ========================================================= */

.chatPreviewToken{
  width:58px;
  height:58px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(126,138,163,0.18);
  background: rgba(255,255,255,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.chatPreviewTokenInner{
  width:100%;
  height:100%;
  border-radius:inherit;
}

.chatPreviewTokenInner .assetBadgeOverlay{
  left:4px;
  right:4px;
  bottom:4px;
  justify-content:flex-start;
}

.chatPreviewTokenInner .assetBadgePill.overlay{
  min-height:16px;
  padding:1px 6px;
  font-size:8px;
  line-height:1;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* =========================================================
   SHARED VISOJI CREATION MODAL
   ========================================================= */

.hidden{
  display:none !important;
}

.creator-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(5,10,18,0.82);
  backdrop-filter:blur(10px);
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  padding:16px;
}

.creator-modal-backdrop.active{
  opacity:1;
  pointer-events:auto;
}

.creator-modal{
  width:min(720px, 100%);
  max-height:min(92dvh, 920px);
  overflow:auto;
}

.creationModeTabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.creationModeTabs .btn.active{
  background:rgba(77,163,255,.28);
  border-color:rgba(77,163,255,.46);
  color:#fff;
}

.creationPanel{
  border:1px solid rgba(126,138,163,.18);
  border-radius:16px;
  background:rgba(10,14,20,.38);
  padding:14px;
  margin-top:10px;
}

.creationPanel.hidden{
  display:none !important;
}

.creationGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.creationActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.creationStatus{
  margin-top:12px;
  font-size:12px;
  color:var(--muted);
}

.creationHelp{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}

.creationPreviewVideo{
  width:100%;
  max-height:260px;
  border-radius:14px;
  background:#000;
  object-fit:contain;
  border:1px solid rgba(126,138,163,.18);
}

.creationInlineRow{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.creationWordInput{
  font-weight:700;
  letter-spacing:.01em;
}

.creationModalTitleWord{
  color:#9fd0ff;
}

@media (max-width: 700px){
  .creator-modal{
    width:100%;
    max-height:94dvh;
  }

  .creationActions{
    flex-direction:column;
  }

  .creationActions .btn{
    width:100%;
  }
}