/* Otthon — A irány: meleg, otthonos */
/* Betűtípusok a saját szerverről (SIL Open Font License), hogy a látogatók adatai ne menjenek külső céghez */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/static/betuk/figtree-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/static/betuk/figtree-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/betuk/youngserif-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/betuk/youngserif-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg: #f5ebe0;
  --surface: #ebdccb;
  --card: #fbf5ee;
  --ink: #2c2620;
  --muted: #7c6d5f;
  --line: #e2d3c1;
  --green: #2f5d4a;
  --green-deep: #223f33;
  --honey: #e5b45a;
  --clay: #b86a4b;
  --danger: #c4443a;
  --kulso: #e6d9c9;
  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fent: env(safe-area-inset-top, 0px);
  --lent: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.ikonkeszlet { position: absolute; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
/* telefonon az egész oldal ne rugózzon és ne csússzon el: csak a belső részek görögnek */
body { position: fixed; inset: 0; width: 100%; background: var(--kulso); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.4; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:focus-visible { outline: 2.5px solid var(--honey); outline-offset: 2px; }
a { color: var(--green); }

#app { max-width: 480px; margin: 0 auto; height: 100vh; height: 100dvh; height: var(--app-magassag, 100vh); transform: translateY(var(--app-eltolas, 0px)); background: var(--bg); position: relative; overflow: hidden; }
.tartalom, .msgs, .belepes, .lap, .events, .items, .shots-hely, .csempek { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (min-width: 520px) { #app { box-shadow: 0 0 60px -20px rgba(60, 40, 20, .35); } }

.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.serif { font-family: var(--serif); font-weight: 400; }
.round-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); flex: 0 0 auto; }
.round-btn:active { transform: scale(.95); }
.av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 16px; color: #fff; flex: 0 0 auto; user-select: none; }
.av.kicsi { width: 28px; height: 28px; font-size: 11px; }
.av.kozep { width: 40px; height: 40px; font-size: 14px; }

.btn { height: 54px; border-radius: 27px; background: var(--green); color: var(--bg); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 16px; width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.masodlagos { background: var(--surface); color: var(--ink); }
.btn.veszely { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn .ico { width: 20px; height: 20px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.input { height: 52px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line); padding: 0 14px; font-size: 17px; font-weight: 600; width: 100%; }
.input:focus { outline: none; border-color: var(--green); }
.input.kod { letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.hiba { color: var(--danger); font-size: 13.5px; min-height: 19px; }

/* ---------- belépés ---------- */
.belepes { height: 100%; overflow-y: auto; padding: calc(56px + var(--fent)) 24px calc(28px + var(--lent)); display: flex; flex-direction: column; }
.logo { width: 64px; height: 64px; border-radius: 22px; background: var(--green); color: var(--honey); display: grid; place-items: center; }
.logo .ico { width: 34px; height: 34px; stroke-width: 1.7; }
.belepes h1 { margin: 18px 0 6px; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.05; }
.belepes .lead { color: var(--muted); font-size: 15.5px; margin: 0 0 22px; max-width: 34ch; }
.belepes form { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.belepes .also { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
.meghivo-kartya { padding: 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); display: flex; gap: 12px; align-items: center; }
.meghivo-kartya b { display: block; font-size: 15px; }
.meghivo-kartya small { color: var(--muted); font-size: 13px; }
.apro { text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- főváz ---------- */
.shell { height: 100%; display: flex; flex-direction: column; }
.tartalom { flex: 1; overflow-y: auto; padding-bottom: 12px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(22px + var(--fent)) 20px 10px; }
.top h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1; }
.top .gombok { display: flex; gap: 8px; }

.nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 8px calc(8px + var(--lent)); background: var(--bg); border-top: 1px solid var(--line); flex: 0 0 auto; }
.nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; font-size: 11px; font-weight: 600; color: var(--muted); }
.nav button.on { color: var(--green); }

.felhivas { margin: 6px 16px 10px; padding: 14px; border-radius: 20px; background: var(--green); color: var(--bg); display: flex; align-items: center; gap: 12px; }
.felhivas > div { flex: 1; }
.felhivas b { display: block; font-size: 15px; line-height: 1.25; }
.felhivas small { font-size: 13px; opacity: .85; }
.felhivas button { height: 40px; padding: 0 14px; border-radius: 20px; background: var(--honey); color: var(--ink); font-weight: 700; font-size: 14px; flex: 0 0 auto; }

.chats { display: flex; flex-direction: column; padding: 0 8px; }
.chat { display: flex; align-items: center; gap: 12px; padding: 8px 10px; min-height: 66px; border-radius: 16px; text-align: left; width: 100%; }
.chat:active, .chat:hover { background: #ecdfd0; }
.c-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c-head, .c-sub { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.c-name { font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.c-msg { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 5px; align-items: center; min-width: 0; }
.c-msg span { overflow: hidden; text-overflow: ellipsis; }
.c-msg .ico { width: 15px; height: 15px; }
.chat.uj .c-msg { color: var(--ink); font-weight: 600; }
.badge { min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: var(--green); color: var(--bg); font-size: 12px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; flex: 0 0 auto; }

.keszul { padding: 40px 28px; display: flex; flex-direction: column; gap: 10px; color: var(--muted); }
.keszul .ico { width: 40px; height: 40px; color: var(--green); stroke-width: 1.5; }
.keszul b { color: var(--ink); font-size: 17px; }

/* ---------- beszélgetés ---------- */
.conv { height: 100%; display: flex; flex-direction: column; }
.conv-top { display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--fent)) 12px 10px 6px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.conv-top .t { flex: 1; min-width: 0; }
.conv-top b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-top small { color: var(--muted); font-size: 12.5px; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; color: var(--green); flex: 0 0 auto; border-radius: 50%; }

.msgs { flex: 1; overflow-y: auto; padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 4px; }
.msgs .kitolto { margin-top: auto; }
.nap { align-self: center; font-size: 12px; font-weight: 600; color: var(--muted); padding: 3px 11px; border-radius: 10px; background: var(--surface); margin: 10px 0 6px; }
.m { display: flex; gap: 8px; align-items: flex-end; max-width: 86%; }
.m.folytatas { padding-left: 36px; }
.m.folytatas.paros, .m.paros { padding-left: 0; }
.m .ures-av { width: 28px; flex: 0 0 auto; }
.bub { background: var(--card); border-radius: 18px 18px 18px 6px; padding: 8px 12px 6px; box-shadow: 0 1px 0 var(--line); min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.who { font-size: 12px; font-weight: 700; margin-bottom: 1px; white-space: normal; }
.m.me { align-self: flex-end; }
.m.me .bub { background: var(--green); color: var(--bg); border-radius: 18px 18px 6px 18px; box-shadow: none; }
.m + .m:not(.folytatas) { margin-top: 6px; }
.meta { font-size: 11px; opacity: .7; display: flex; gap: 3px; align-items: center; justify-content: flex-end; margin-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.meta .ico { width: 15px; height: 15px; }
.bub img.kep { display: block; max-width: 230px; max-height: 300px; width: 100%; object-fit: cover; border-radius: 12px; margin: 4px 0 2px; background: var(--surface); cursor: zoom-in; }
.m.csak-kep .bub { padding: 4px 4px 4px; }
.m.csak-kep .meta { padding: 0 6px 2px; }
.m.kuldes-alatt { opacity: .6; }

.voice { display: flex; align-items: center; gap: 9px; min-width: 200px; padding: 2px 0; }
.play { width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: var(--bg); display: grid; place-items: center; flex: 0 0 auto; }
.play .ico { width: 14px; height: 14px; }
.m.me .play { background: var(--bg); color: var(--green); }
.wave { display: flex; gap: 2px; align-items: center; height: 26px; flex: 1; }
.wave i { width: 3px; border-radius: 2px; background: currentColor; opacity: .35; }
.wave i.p { opacity: 1; }
.dur { font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; min-width: 30px; }

.composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(10px + var(--lent)); border-top: 1px solid var(--line); background: var(--bg); flex: 0 0 auto; }
.composer textarea { flex: 1; min-height: 44px; max-height: 140px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); padding: 11px 16px; resize: none; line-height: 1.35; font-size: 16px; }
.composer textarea:focus { outline: none; border-color: var(--green); }
.diktal { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--green); flex: 0 0 auto; }
.diktal.fut { background: var(--danger); color: #fff; animation: pulzal-hatter 1.4s ease-in-out infinite; }
@keyframes pulzal-hatter { 50% { box-shadow: 0 0 0 7px rgba(196, 68, 58, .18); } }
.composer textarea.diktalas { border-color: var(--danger); }
.fo-gomb {width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: var(--bg); display: grid; place-items: center; flex: 0 0 auto; }
.felvetel { flex: 1; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); font-weight: 600; font-variant-numeric: tabular-nums; }
.felvetel i { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: pulzal 1.2s ease-in-out infinite; }
.felvetel span { flex: 1; }
@keyframes pulzal { 50% { opacity: .3; } }

/* ---------- alsó lap ---------- */
.lap-hatter { position: absolute; inset: 0; background: rgba(34, 28, 22, .38); display: flex; align-items: flex-end; z-index: 20; animation: elo .18s ease-out; }
.lap { width: 100%; max-height: 88%; overflow-y: auto; background: var(--bg); border-radius: 26px 26px 0 0; padding: 10px 20px calc(22px + var(--lent)); display: flex; flex-direction: column; gap: 14px; animation: fel .22s ease-out; }
.lap .fogo { width: 40px; height: 5px; border-radius: 3px; background: var(--line); align-self: center; }
.lap-fej { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lap h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 24px; }
.lap p { margin: 0; color: var(--muted); }
.tag-sor { display: flex; align-items: center; gap: 12px; min-height: 56px; width: 100%; text-align: left; padding: 4px 6px; border-radius: 14px; font-weight: 600; font-size: 15.5px; }
.tag-sor:hover { background: #ecdfd0; }
.tag-sor .jelolo { margin-left: auto; width: 26px; height: 26px; border-radius: 9px; border: 2px solid #c9b59f; display: grid; place-items: center; }
.tag-sor.valasztva .jelolo { background: var(--green); border-color: var(--green); color: var(--bg); }
.tag-sor .jelolo .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.kod-doboz { padding: 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); text-align: center; display: flex; flex-direction: column; gap: 4px; }
.kod-doboz b { font-size: clamp(19px, 6.2vw, 28px); letter-spacing: .05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kod-doboz small { color: var(--muted); }
.gomb-sor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@keyframes elo { from { opacity: 0; } }
@keyframes fel { from { transform: translateY(40px); opacity: .6; } }

.nagyito { position: absolute; inset: 0; z-index: 30; background: rgba(20, 16, 12, .92); display: grid; place-items: center; padding: 20px; }
.nagyito img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.nagyito .icon-btn { position: absolute; top: calc(12px + var(--fent)); right: 12px; color: #fff; }

#uzenet-sav { position: fixed; left: 50%; bottom: calc(96px + var(--lent)); transform: translate(-50%, 20px); width: max-content; background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 22px; font-weight: 600; font-size: 14px; max-width: calc(100% - 40px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 40; text-align: center; }
#uzenet-sav.lathato { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- hívás ---------- */
.hivas-banner { background: var(--honey); color: var(--ink); }
.hivas-banner button { background: var(--green); color: var(--bg); }
.hivas-sor .c-msg .ico { width: 16px; height: 16px; }
.hivas-sor.nem-fogadott .c-msg, .hivas-sor.nem-fogadott .c-name { color: var(--danger); }
.ico.letesz { transform: rotate(135deg); }

#hivas-hely > .hivas-reteg { position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 480px); z-index: 25; display: flex; flex-direction: column; color: #f5ebe0; }
.hivas-reteg h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.1; text-align: center; }
.hivas-reteg .sub { margin-top: 6px; font-size: 15px; opacity: .78; text-align: center; }
.hivas-reteg .big-av { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; font-size: 46px; font-weight: 700; color: var(--ink); margin: 0 auto 22px; }

/* bejövő */
.hivas-reteg.bejovo { align-items: center; padding: calc(80px + var(--fent)) 24px calc(40px + var(--lent)); background: radial-gradient(120% 80% at 50% 20%, #3d7059 0%, #223f33 70%); animation: elo .2s ease-out; }
.hivas-reteg .kind { font-size: 15px; opacity: .85; display: flex; gap: 7px; align-items: center; margin-bottom: 34px; }
.hivas-reteg .kind .ico { width: 19px; height: 19px; }
.hivas-reteg.bejovo .big-av { animation: csorog 1.6s ease-in-out infinite; }
@keyframes csorog { 50% { box-shadow: 0 0 0 16px rgba(229, 180, 90, .18); } }
.call-actions { margin-top: auto; width: 100%; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.call-row { display: flex; justify-content: space-around; width: 100%; }
.cbtn { display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: #f5ebe0; }
.cbtn i { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.cbtn i .ico { width: 32px; height: 32px; }
.cbtn.no i { background: #e0483e; }
.cbtn.yes i { background: #2fae63; animation: csorog 1.6s ease-in-out infinite; }
.hivas-reteg .reply { font-size: 14px; font-weight: 600; display: flex; gap: 7px; align-items: center; color: #f5ebe0; opacity: .9; min-height: 44px; padding: 0 12px; }
.hivas-reteg .reply .ico { width: 18px; height: 18px; }

/* folyamatban lévő */
.hivas-reteg.aktiv { background: var(--green-deep); padding: calc(12px + var(--fent)) 10px calc(18px + var(--lent)); gap: 10px; }
.vc-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; min-height: 44px; }
.vc-top b { display: block; font-size: 17px; }
.vc-top small { font-size: 13px; opacity: .78; font-variant-numeric: tabular-nums; }
.varakozas { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 60px; }
.varakozas .big-av { animation: csorog 1.6s ease-in-out infinite; }

.csempek { flex: 1; min-height: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); }
.hivas-reteg[data-db="3"] .csempek, .hivas-reteg[data-db="4"] .csempek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hivas-reteg[data-db="3"] .tile:first-child { grid-column: span 2; }
.hivas-reteg[data-db="5"] .csempek { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(160px, 1fr); overflow-y: auto; }
.tile { position: relative; border-radius: 22px; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--szin) 70%, #1b2a23); transition: box-shadow .15s; }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.tile.van-kep video { opacity: 1; }
.tile .ini { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 32px; background: rgba(255, 255, 255, .18); color: #fff; }
.tile.van-kep .ini { visibility: hidden; }
.tile .lbl { position: absolute; left: 10px; bottom: 10px; font-size: 13px; font-weight: 600; background: rgba(20, 30, 25, .5); padding: 4px 10px; border-radius: 12px; display: flex; gap: 5px; align-items: center; }
.tile .lbl .ico { width: 14px; height: 14px; }
.tile .tile-allapot { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 12.5px; opacity: .85; }
.tile.beszel { box-shadow: inset 0 0 0 3px var(--honey); }

.sajat { position: absolute; right: 20px; bottom: calc(104px + var(--lent)); width: 96px; height: 128px; border-radius: 16px; overflow: hidden; background: #3a4a42; border: 2px solid #f5ebe0; display: grid; place-items: center; font-weight: 700; font-size: 13px; z-index: 2; }
.sajat video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.sajat.hatso video { transform: none; }
.sajat span { position: relative; }
.sajat:not(.kamera-ki) span { display: none; }
.sajat.kamera-ki video { opacity: 0; }

.vc-ctrl { display: flex; justify-content: center; gap: 14px; padding: 6px 0 0; }
.vc-gomb { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(245, 235, 224, .15); color: #f5ebe0; }
.vc-gomb .ico { width: 25px; height: 25px; }
.vc-gomb.ki { background: #f5ebe0; color: var(--green-deep); }
.vc-gomb.letesz-gomb { background: #e0483e; color: #fff; width: 74px; border-radius: 29px; }

/* ---------- közös: űrlapok a lapokon ---------- */
.shell { position: relative; }
.mezo-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mezo-megj { color: var(--muted); font-size: 12.5px; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 34px; font-size: 16px; }
.input[type="date"], .input[type="time"] { font-size: 16px; }
.input:disabled { opacity: .45; }
.input.textarea { height: auto; padding: 12px 14px; font-weight: 500; font-size: 16px; resize: vertical; }
.pipa-sor { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; min-height: 44px; padding: 4px 2px; cursor: pointer; }
.pipa-sor input { width: 22px; height: 22px; accent-color: var(--green); margin: 1px 0 0; flex: 0 0 auto; }
.pipa-sor span { display: flex; flex-direction: column; gap: 1px; }
.pipa-sor small { color: var(--muted); font-weight: 500; }

/* ---------- következő esemény a csevegőlistán ---------- */
.today { margin: 6px 16px 8px; padding: 12px 14px; border-radius: 20px; background: var(--green); color: var(--bg); display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); text-align: left; }
.today .ico { width: 22px; height: 22px; color: var(--honey); }
.today span { display: flex; flex-direction: column; min-width: 0; }
.today b { font-size: 15px; line-height: 1.25; }
.today small { font-size: 13px; opacity: .85; }

/* ---------- bevásárlólista ---------- */
.seg-sor { display: flex; gap: 6px; padding: 4px 16px 8px; overflow-x: auto; scrollbar-width: none; }
.seg-sor::-webkit-scrollbar { display: none; }
.seg-ful { flex: 0 0 auto; height: 40px; padding: 0 16px; border-radius: 20px; background: var(--surface); color: var(--muted); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 7px; }
.seg-ful.on { background: var(--green); color: var(--bg); }
.seg-ful.uj { width: 40px; padding: 0; justify-content: center; }
.seg-ful.uj .ico { width: 18px; height: 18px; }
.seg-szam { min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px; font-size: 11.5px; display: grid; place-items: center; background: rgba(0, 0, 0, .08); font-variant-numeric: tabular-nums; }
.seg-ful.on .seg-szam { background: rgba(245, 235, 224, .22); }
.uj-tetel-sor { display: flex; gap: 8px; padding: 2px 16px 6px; }
.uj-tetel-sor .uj-tetel { flex: 1; min-width: 0; font-weight: 600; }
.uj-tetel-sor .uj-menny { width: 96px; font-weight: 600; }
.uj-tetel-sor .fo-gomb { width: 52px; height: 52px; }
.items { padding: 4px 16px 0; display: flex; flex-direction: column; }
.grp { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted); padding: 14px 4px 4px; display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.item { display: flex; align-items: center; gap: 6px; min-height: 58px; border-bottom: 1px solid var(--line); }
.item .box { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; position: relative; }
.item .box::before { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 9px; border: 2px solid #c9b59f; }
.item.done .box::before { background: var(--green); border-color: var(--green); }
.item .box .ico { position: relative; width: 16px; height: 16px; stroke-width: 2.8; color: var(--bg); }
.item .it { flex: 1; min-width: 0; text-align: left; padding: 8px 0; display: flex; flex-direction: column; }
.item .it b { font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.item .it small { font-size: 12.5px; color: var(--muted); }
.item.done .it b { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.item .qty { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; padding-right: 4px; white-space: nowrap; }
.kipipaltak { margin: 18px 0 8px; height: 46px; font-size: 14.5px; }

/* ---------- naptár ---------- */
.het-lepteto { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
.het-lepteto .elore .ico { transform: scaleX(-1); }
.ma-gomb { height: 34px; padding: 0 16px; border-radius: 17px; background: var(--surface); font-weight: 700; font-size: 13.5px; }
.week { margin: 4px 12px 10px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.wd { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 0 8px; border-radius: 16px; min-height: 64px; }
.wd small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.wd b { font-size: 17px; font-variant-numeric: tabular-nums; }
.wd.ma b { color: var(--clay); }
.wd i { width: 6px; height: 6px; border-radius: 50%; }
.wd i.dot { background: var(--clay); }
.wd.on { background: var(--green); color: var(--bg); }
.wd.on small, .wd.on.ma b { color: var(--bg); }
.wd.on i.dot { background: var(--honey); }
.events { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.ev-day { font-size: 13px; font-weight: 700; color: var(--muted); padding: 8px 2px 0; scroll-margin-top: 10px; }
.ev { display: flex; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-align: left; width: 100%; }
.ev .when { width: 50px; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; padding-top: 1px; line-height: 1.25; }
.ev .what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ev .what b { font-size: 15.5px; }
.ev .what small { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mini { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; flex: 0 0 auto; }
.ev.big { background: var(--honey); border-color: var(--honey); }
.ev.big .what small { color: #5b4520; }

/* ---------- album ---------- */
.chips { display: flex; gap: 8px; padding: 2px 16px 10px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; height: 38px; padding: 0 15px; border-radius: 19px; display: flex; align-items: center; font-weight: 700; font-size: 13.5px; background: var(--surface); color: var(--ink); }
.chip.on { background: var(--green); color: var(--bg); }
.alb-head { padding: 0 16px 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.alb-head:empty { display: none; }
.alb-head b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; }
.alb-head small { color: var(--muted); font-size: 13px; }
.feltoltes-sav { margin: 0 16px 10px; padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; }
.feltoltes-sav .csik { height: 6px; border-radius: 3px; background: var(--surface); overflow: hidden; }
.feltoltes-sav .csik i { display: block; height: 100%; width: 0; background: var(--green); transition: width .2s; }
.shots-hely { padding: 0 16px 90px; }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 4px; }
.shot { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--surface); }
.shot.wide { grid-column: span 2; grid-row: span 2; border-radius: 14px; }
.shot img, .shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot .vid { position: absolute; right: 6px; bottom: 6px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .45); padding: 2px 7px 2px 5px; border-radius: 9px; display: flex; align-items: center; gap: 3px; }
.shot .vid .ico { width: 10px; height: 10px; }
.fab { position: absolute; right: 18px; bottom: calc(84px + var(--lent)); height: 52px; padding: 0 20px 0 16px; border-radius: 26px; background: var(--green); color: var(--bg); display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px; box-shadow: 0 10px 22px -8px rgba(34, 63, 51, .6); z-index: 5; }
.fab:disabled { opacity: .6; }
.fab .ico { width: 20px; height: 20px; }

.nezo { display: flex; flex-direction: column; padding: 0; place-items: stretch; outline: none; }
.nezo-fej { display: flex; align-items: center; gap: 6px; padding: calc(8px + var(--fent)) 8px 8px; color: #fff; }
.nezo-fej .icon-btn { position: static; color: #fff; }
.nezo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nezo-info small { opacity: .75; font-size: 12.5px; }
.nezo-kep { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px 8px calc(20px + var(--lent)); }
.nezo-kep img, .nezo-kep video { max-width: 100%; max-height: 100%; border-radius: 6px; }
.nezo-lep { position: absolute; top: 50%; width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; display: grid; place-items: center; transform: translateY(-50%); }
.nezo-lep.bal { left: 8px; }
.nezo-lep.jobb { right: 8px; }
.nezo-lep.jobb .ico { transform: scaleX(-1); }

/* ---------- család, szerepek, eszközök ---------- */
.szerep { margin-left: auto; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 10px; background: var(--surface); color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.szerep.gazda { background: var(--green); color: var(--bg); }
.szerep.vendeg { background: #efe0c0; color: #6b5220; }
.tag-sor .tag-nev { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.tag-sor .tag-nev small { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.tag-sor:disabled { opacity: 1; cursor: default; }
.tag-sor:disabled:hover { background: none; }
.tag-sor > .ico { margin-left: auto; color: var(--green); }
.szoveg-gomb { margin-left: auto; min-height: 40px; padding: 0 10px; font-weight: 700; font-size: 14px; color: var(--green); border-radius: 12px; }
.szoveg-gomb.veszely-szoveg { margin: 4px auto 0; color: var(--danger); font-weight: 600; }
.valasztas { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); text-align: left; width: 100%; }
.valasztas .ico { width: 26px; height: 26px; color: var(--green); margin-top: 2px; }
.valasztas span { display: flex; flex-direction: column; gap: 2px; }
.valasztas b { font-size: 16px; }
.valasztas small { color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.csoport-valaszto { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.felhivas.jovahagyas { background: var(--honey); color: var(--ink); }
.felhivas.jovahagyas > .ico { width: 24px; height: 24px; }
.felhivas.jovahagyas button { background: var(--green); color: var(--bg); }
.fuggo-sor { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 12px; border-bottom: 1px solid var(--line); }
.fuggo-sor .btn { height: 44px; font-size: 15px; }
.szerep-valaszto { display: flex; gap: 6px; flex-wrap: wrap; }
.eszkoz-sor { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.eszkoz-sor span { display: flex; flex-direction: column; }
.eszkoz-sor small { color: var(--muted); font-size: 12.5px; }
.conv-cim { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; border-radius: 14px; padding: 2px 4px; }
.conv-cim .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nav.ket-ful { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lap .grp { padding: 6px 4px 0; }

/* ---------- Csillag, a lelki beszélgetőtárs ---------- */
.csillag-av { background: linear-gradient(145deg, #f0c877, #d99a45); color: #fff; }
.csillag-av .ico { width: 24px; height: 24px; stroke-width: 1.7; }
.av.kozep.csillag-av .ico { width: 21px; height: 21px; }
.chats + .chats { margin-top: 0; }
.chat.csillag-sor .c-msg { color: #9a6f2a; }
.felhivas.esti { background: #3b3350; color: #f5ebe0; align-items: center; }
.felhivas.esti small { opacity: .85; }
.felhivas.esti > div { flex: 1; min-width: 0; }
.felhivas.esti button { background: var(--honey); color: var(--ink); }
.felhivas.esti .esti-bezar { background: transparent; color: #f5ebe0; width: 36px; padding: 0; display: grid; place-items: center; }
.felhivas.esti .esti-bezar .ico { width: 18px; height: 18px; }
.csillag-nezet .msgs { background: linear-gradient(180deg, #f5ebe0 0%, #f1e6f0 100%); }
.csillag-info { align-self: center; max-width: 330px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px 18px; margin: 4px 0 10px; }
.csillag-info .av { width: 56px; height: 56px; }
.csillag-info .av .ico { width: 30px; height: 30px; }
.csillag-info b { font-family: var(--serif); font-weight: 400; font-size: 21px; }
.csillag-info p { margin: 0; color: var(--ink); font-size: 14.5px; }
.csillag-info small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.csillag-inditok { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 4px; }
.csillag-inditok .chip { height: auto; min-height: 40px; padding: 8px 14px; background: var(--card); border: 1px solid var(--line); text-align: left; }
.m.hibas .bub { color: var(--danger); font-style: italic; }
.gepel { display: inline-flex; gap: 4px; padding: 6px 2px; }
.gepel i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: gepel 1.2s infinite ease-in-out; }
.gepel i:nth-child(2) { animation-delay: .15s; }
.gepel i:nth-child(3) { animation-delay: .3s; }
@keyframes gepel { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.conv-top small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- üzenet menü ---------- */
.bub { -webkit-touch-callout: none; }
@media (pointer: coarse) { .bub { -webkit-user-select: none; user-select: none; } }
.uzenet-elonezet { padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow: auto; }
.uzenet-elonezet small { color: var(--muted); font-size: 12.5px; }
.uzenet-elonezet span { white-space: pre-wrap; overflow-wrap: anywhere; }
.belepes h1 + form { margin-top: 18px; }
.csillag-info.rovid { padding: 4px 12px 10px; margin: 0; max-width: 300px; }
.csillag-info.rovid small { font-size: 11.5px; }
/* kis kijelzőn az üdvözlő ne tolja ki a képernyőről a beszélgetést */
@media (max-height: 640px) {
  .csillag-info { padding: 6px 12px 10px; gap: 4px; }
  .csillag-info .av { width: 44px; height: 44px; }
  .csillag-info b { font-size: 18px; }
  .csillag-info p { font-size: 13.5px; }
  .csillag-inditok { gap: 6px; padding: 4px; }
  .csillag-inditok .chip { min-height: 36px; padding: 6px 12px; font-size: 13px; }
}

/* === TELJES-SZELESSEG-OVERRIDE (Timea keresere: ne legyen oldalso csik) === */
html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; }
#app { max-width: none !important; width: 100% !important; margin: 0 !important; }