/* ===== Témák: automatikus (rendszer), világos, sötét ===== */
:root {
  --bg:#f6f4f1; --panel:#ffffff; --text:#1e1c1a; --muted:#6b655e; --line:#ddd7cf;
  --me:#2a6762; --me-text:#ffffff; --her:#ffffff; --accent:#ad3562; --on-accent:#ffffff;
  --danger:#a52f27; --ok:#2d7d46; --warn:#7a5f08; --shadow:rgba(0,0,0,.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#161513; --panel:#1f1d1b; --text:#ece8e3; --muted:#a39c93; --line:#37332f;
    --me:#2f7873; --me-text:#ffffff; --her:#272421; --accent:#e888a8; --on-accent:#1b0f13;
    --danger:#f0766d; --ok:#5ec27d; --warn:#d9b04a; --shadow:rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bg:#161513; --panel:#1f1d1b; --text:#ece8e3; --muted:#a39c93; --line:#37332f;
  --me:#2f7873; --me-text:#ffffff; --her:#272421; --accent:#e888a8; --on-accent:#1b0f13;
  --danger:#f0766d; --ok:#5ec27d; --warn:#d9b04a; --shadow:rgba(0,0,0,.6);
}

* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body { background:var(--bg); color:var(--text); font:16px/1.5 system-ui,"Segoe UI",sans-serif; display:flex; }
[hidden] { display:none !important; }
button { font:inherit; cursor:pointer; color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.skip { position:absolute; left:-999px; top:0; background:var(--accent); color:var(--on-accent); padding:8px 12px; z-index:50; border-radius:0 0 8px 0; }
.skip:focus { left:0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* ===== Elrendezés ===== */
.app { display:flex; flex:1; min-width:0; height:100%; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
header { display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line); }
.avatar { width:46px; height:46px; flex:none; border-radius:50%; background:var(--bg); border:2px solid var(--accent); display:grid; place-items:center; font-size:26px; transition:transform .25s; }
.avatar.bump { transform:scale(1.15); }
.brand-mark { flex:none; width:auto; height:24px; }
@media (max-width:520px) { .brand-mark { display:none; } }
.brand-logo { display:block; width:auto; height:72px; margin:0 auto 10px; }
.who { flex:1; min-width:0; }
.who b { display:block; }
.who small { color:var(--muted); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--warn); margin-right:6px; }
.dot.on { background:var(--ok); } .dot.off { background:var(--danger); }
.btn { background:transparent; border:1px solid var(--line); border-radius:8px; padding:6px 10px; min-height:36px; }
.btn:hover { border-color:var(--accent); }
.btn.ib { display:inline-flex; align-items:center; gap:6px; }
.wide-btn { width:100%; margin-top:12px; font-size:13px; }
.toggle { display:none; }
.banner { background:var(--danger); color:#fff; padding:8px 16px; font-size:14px; display:flex; gap:12px; align-items:center; }
.banner button { background:#fff; color:#000; border:0; border-radius:6px; padding:4px 10px; }

/* ===== Csevegés ===== */
#log { flex:1; overflow-y:auto; padding:20px 16px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
.turn { display:flex; flex-direction:column; gap:3px; max-width:min(640px,86%); }
.turn.me { align-self:flex-end; align-items:flex-end; }
.turn.her { align-self:flex-start; align-items:flex-start; }
.msg { padding:10px 14px; border-radius:16px; overflow-wrap:anywhere; animation:in .25s ease-out; }
.msg.me { background:var(--me); color:var(--me-text); border-bottom-right-radius:4px; white-space:pre-wrap; }
.msg.her { background:var(--her); border:1px solid var(--line); border-bottom-left-radius:4px; }
.msg.her.cont { border-top-left-radius:6px; }
@keyframes in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.sub { display:flex; gap:8px; align-items:center; min-height:16px; font-size:12px; color:var(--muted); }
.react { font-size:18px; line-height:1; animation:pop .35s ease-out; }
@keyframes pop { 0% { transform:scale(0); } 70% { transform:scale(1.35); } 100% { transform:scale(1); } }
.meta { font-size:12px; color:var(--muted); padding:0 4px; }
.workcard { max-width:min(560px,100%); padding:12px 14px; display:flex; flex-direction:column; gap:8px; border-left:3px solid var(--accent); }
.workcard p { margin:0; white-space:pre-wrap; line-height:1.5; }
.wmeta { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.wtitle { font-weight:700; font-size:16px; }
.wimg { max-width:100%; border-radius:10px; display:block; }
.wimg-btn { display:block; padding:0; border:0; background:none; cursor:zoom-in; border-radius:10px; }
.waudio { width:100%; max-width:360px; }
/* hangkártya és hangüzenet: mindig a teljes lejátszó (idő, csúszka, hangerő), ne a zsugorított; a böngésző ⋮ menüje így nem lóg ki a képernyőről */
.msg.audiocard, .msg.me.voicemsg { width:min(360px, 82vw); min-width:min(300px, 82vw); box-sizing:border-box; }
.msg.audiocard .waudio, .msg.me.voicemsg .waudio { width:100%; max-width:none; }
.vtrans { margin-top:6px; font-size:13px; color:var(--muted); }
.vtrans summary { cursor:pointer; }
.vtrans p { margin:4px 0 0; }
.msg.me.voicemsg { display:flex; flex-direction:column; gap:6px; }
.msg.me.voicemsg .vtext { font-size:13px; opacity:.85; }
.attr { display:grid; grid-template-columns:minmax(110px,170px) 1fr; gap:8px; align-items:center; margin:4px 0; font-size:14px; }
.attr-wrap { display:flex; flex-direction:column; gap:4px; margin:4px 0; }
.attr-wrap > input, .attr-wrap > textarea { width:100%; }
details.look { border:1px solid var(--line); border-radius:10px; padding:6px 10px; margin:8px 0; }
details.look > summary { cursor:pointer; font-weight:600; padding:4px 0; }
.portrait { max-width:260px; width:100%; border-radius:12px; display:block; margin:8px 0; }
/* keskeny (telefon) képernyőn a szövegmező külön, teljes szélességű sort kap: a három eszköz-gomb (kamera, mikrofon, emoji) különben ~66 px-esre nyomta (mérve 375 px-en) */
@media (max-width: 520px) {
  form#form { flex-wrap:wrap; }
  form#form textarea { order:-1; flex:1 1 100%; min-height:44px; }
  form#form .send { margin-left:auto; }
}
.cand-row { display:flex; gap:8px; }
.cand { padding:0; border:2px solid var(--line); border-radius:10px; background:none; width:72px; overflow:hidden; cursor:pointer; }
.cand.wide { width:92px; position:relative; }
.cand-label { position:absolute; left:0; right:0; bottom:0; font-size:11px; padding:2px 0; text-align:center; background:rgba(0,0,0,.55); color:#fff; }
.cand.sel { border-color:var(--accent); }
.cand img { width:100%; display:block; }
.portrait-btn { display:block; padding:0; border:0; background:none; cursor:zoom-in; border-radius:12px; max-width:260px; }
.works-filter { margin:6px 0 10px; }
.gal { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.gal-item { border:1px solid var(--line); border-radius:12px; padding:6px; display:flex; flex-direction:column; gap:6px; background:var(--panel); min-width:0; }
.gal-item.text, .gal-item.audio { grid-column:1 / -1; }
.gal-thumb { border:0; padding:0; background:transparent; border-radius:8px; overflow:hidden; display:block; cursor:zoom-in; }
.gal-thumb img { width:100%; aspect-ratio:3 / 4; object-fit:cover; display:block; }
.gal-meta { display:grid; grid-template-columns:1fr auto; gap:2px 6px; align-items:start; }
.gal-title { border:0; background:transparent; text-align:left; font-weight:600; font-size:13px; padding:2px; color:var(--text); cursor:pointer; }
.gal-sub { grid-column:1; font-size:11px; color:var(--muted); padding:0 2px; }
.gal-del { grid-column:2; grid-row:1 / span 2; border:0; background:transparent; color:var(--muted); font-size:13px; padding:4px 6px; border-radius:6px; }
.gal-del:hover, .gal-del:focus-visible { color:var(--danger); }
.about-card { border:1px solid var(--line); border-radius:12px; padding:8px 10px; margin-bottom:12px; background:var(--panel); }
.side-head { margin-bottom:4px; }
.profile-img { display:block; width:96px; height:96px; margin:0 auto 8px; border-radius:50%; object-fit:cover; border:1px solid var(--line); background:var(--panel); }
.thought { position:relative; display:flex; gap:6px; align-items:flex-start; margin:0 0 10px; padding:8px 10px; border:1px solid var(--line); border-radius:14px; background:var(--panel); font-size:13px; font-style:italic; }
.thought[hidden] { display:none; }
.thought-text { flex:1; min-width:0; overflow-wrap:anywhere; }
.thought-x { padding:0 6px; line-height:1.4; font-style:normal; }
.about-card h3 { margin:0 0 6px; font-size:14px; }
.about-list { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; margin:0; font-size:13px; }
.about-list dt { color:var(--muted); }
.about-list dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.gal-excerpt { margin:0; font-size:12.5px; line-height:1.45; color:var(--muted); white-space:pre-wrap; }
.lbimg { display:block; margin:0 auto; border-radius:10px; width:100%; height:calc(100vh - 150px); object-fit:contain; }
.lbtools { margin:0 0 8px; text-align:center; }
.lbtools ~ .lbimg { height:calc(100vh - 215px); }
.older { display:block; margin:8px auto 14px; }
.older-note { text-align:center; font-size:12px; color:var(--muted); margin:8px 0 14px; }
video.lbimg { background:#000; }
#lightbox { padding:8px; }
@media (min-width:821px) { #lightbox { inset:0 340px 0 0; } }   /* a nagyítás a beszélgetés felületét tölti ki (az oldalpanel marad), nem a teljes képernyőt */
#lightbox .card { width:100%; max-width:none; height:calc(100% - 4px); max-height:none; }
#lightbox .card-body { padding:8px; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.lbtext { margin:8px 0; line-height:1.55; white-space:pre-wrap; }
.bwrap { display:flex; flex-direction:column; align-items:flex-start; gap:3px; max-width:100%; }
.brow { display:flex; align-items:center; gap:4px; max-width:100%; }
.rbar { display:flex; align-items:center; gap:6px; min-height:24px; }
.rbtn { border:1px solid transparent; background:transparent; color:var(--muted); border-radius:999px; font-size:15px; line-height:1; padding:3px 7px; min-height:28px; min-width:28px; opacity:.55; }
.turn.her:hover .rbtn, .rbtn:focus-visible, .rbtn[aria-expanded="true"] { opacity:1; border-color:var(--line); }
.react.mine { font-size:16px; }
.rpick { display:flex; flex-wrap:wrap; gap:2px; padding:4px; border:1px solid var(--line); border-radius:14px; background:var(--panel); max-width:100%; }
.rpick[hidden] { display:none; }
.rpick button { font-size:20px; line-height:1; padding:5px; border:0; background:transparent; border-radius:8px; min-width:36px; min-height:36px; }
.rpick button:hover, .rpick button:focus-visible { background:var(--bg); }
.dots { display:inline-flex; gap:4px; padding:2px 0; }
.dots i { width:7px; height:7px; border-radius:50%; background:var(--muted); animation:blink 1.2s infinite both; }
.dots i:nth-child(2) { animation-delay:.2s; } .dots i:nth-child(3) { animation-delay:.4s; }
@keyframes blink { 0%, 80%, 100% { opacity:.25; } 40% { opacity:1; } }
.milestone { align-self:center; text-align:center; font-size:13px; padding:6px 14px; border-radius:999px; background:var(--panel); border:1px solid var(--line); color:var(--muted); }
.milestone.up { color:var(--accent); border-color:var(--accent); }
.err { align-self:center; color:var(--danger); font-size:14px; text-align:center; }
form#form { display:flex; gap:8px; padding:12px 16px; background:var(--panel); border-top:1px solid var(--line); position:relative; }
textarea { flex:1; resize:none; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 12px; max-height:140px; }
textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.send { background:var(--accent); color:var(--on-accent); border:0; border-radius:12px; padding:0 18px; min-height:40px; font-weight:600; }
.send.big { padding:10px 18px; } .send.small { padding:6px 12px; min-height:32px; border-radius:8px; }
.send:disabled { opacity:.5; cursor:default; }
.attach { display:flex; align-items:center; gap:10px; padding:8px 16px; background:var(--panel); border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.attach img { height:56px; width:auto; max-width:120px; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.attach span { flex:1; }
.msg.me.imgmsg { display:flex; flex-direction:column; gap:6px; padding:6px; }
.msg.me.imgmsg .wimg { max-width:min(320px, 70vw); }
.msg.me.imgmsg .vtext { padding:2px 8px 4px; }
.msg.me.imgmsg.vidmsg .wimg { max-width:min(440px, 80vw); }
.vidtag { font-size:12px; opacity:.8; padding:0 8px; }
.lostmedia { padding:14px 12px; font-size:13px; color:var(--muted); border:1px dashed var(--line); border-radius:10px; text-align:center; }
form#form.dropping { outline:2px dashed var(--accent); outline-offset:-4px; }
.emo-btn { background:transparent; border:1px solid var(--line); border-radius:12px; padding:0 12px; font-size:20px; line-height:1; min-height:40px; }
.emo-btn:hover { border-color:var(--accent); }
.mic-btn { touch-action:none; user-select:none; }
.mic-btn[hidden] { display:none; }
.mic-btn.rec { background:var(--danger); border-color:var(--danger); animation:recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse { 0%, 100% { box-shadow:0 0 0 0 rgba(165,47,39,.45); } 50% { box-shadow:0 0 0 8px rgba(165,47,39,0); } }
@media (prefers-reduced-motion: reduce) { .mic-btn.rec { animation:none; } }
#emoPop { position:absolute; left:16px; bottom:calc(100% + 6px); width:min(340px, calc(100vw - 32px)); background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:8px; box-shadow:0 8px 28px var(--shadow); z-index:6; }
#emoPop .emotabs { display:flex; gap:2px; padding-bottom:6px; margin-bottom:6px; border-bottom:1px solid var(--line); overflow-x:auto; }
#emoPop .emogrid { display:grid; grid-template-columns:repeat(8, 1fr); gap:2px; max-height:min(240px, 40vh); overflow-y:auto; }
#emoPop button { background:none; border:0; font-size:22px; padding:4px; border-radius:8px; }
#emoPop .emotab { font-size:18px; flex:0 0 auto; opacity:.65; }
#emoPop .emotab.on { opacity:1; background:var(--bg); }
#emoPop button:hover, #emoPop button:focus-visible { background:var(--bg); }

/* ===== Oldalpanel ===== */
aside { width:340px; background:var(--panel); border-left:1px solid var(--line); overflow-y:auto; }
.tabs { display:flex; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); z-index:2; }
.tab { flex:1; padding:12px 6px; background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); font-weight:600; font-size:14px; }
.tab.active { color:var(--text); border-bottom-color:var(--accent); }
.badge { display:inline-block; min-width:20px; padding:0 6px; margin-left:2px; border-radius:999px; background:var(--bg); color:var(--muted); font-size:12px; line-height:20px; }
.badge.new { background:var(--accent); color:var(--on-accent); animation:pulse 1.2s ease-out 2; }
@keyframes pulse { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.25); } }
.rel { padding:14px 16px; font-size:13px; }
.rel-head { display:flex; justify-content:space-between; margin-bottom:8px; font-size:15px; }
.rel-head span { color:var(--accent); font-size:13px; font-weight:600; }
.rel label { display:flex; justify-content:space-between; color:var(--muted); margin-top:8px; }
.bar { height:6px; border-radius:3px; background:var(--bg); overflow:hidden; margin-top:3px; }
.bar i { display:block; height:100%; width:0; background:var(--accent); transition:width .4s; }
.bar.irr i { background:var(--danger); } .bar.grudge i { background:var(--warn); }
#spark { width:100%; height:64px; margin-top:12px; background:var(--bg); border-radius:8px; }
#spark .band { fill:var(--line); opacity:.35; }
#spark .grid { stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
#spark polyline { fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke; }
#spark circle { fill:var(--accent); }
#spark .ms { fill:var(--warn); }
.rel h3 { margin:14px 0 4px; font-size:13px; }
.rel summary { margin-top:12px; cursor:pointer; color:var(--muted); }
.moments { list-style:none; margin:0; padding:0; }
.moments li { padding:6px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.moments .q { font-style:italic; }
.moments .tags { color:var(--muted); font-size:12px; }
.moments .d { font-weight:600; margin-right:6px; }
.moments .pos { color:var(--ok); } .moments .neg { color:var(--danger); }
.moments .none { color:var(--muted); border:0; }
.mem-head { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); }
.mem-add { display:flex; flex-wrap:wrap; gap:6px; padding:10px 16px; border-bottom:1px solid var(--line); }
.mem-add input[type=text] { flex:1 1 100%; }
input[type=text], select { font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 8px; min-height:32px; }
#mems { padding:4px 8px 8px; }
.cat { margin:10px 8px 2px; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.mem { display:flex; gap:6px; align-items:flex-start; padding:6px 8px; border-radius:8px; font-size:14px; }
.mem:hover { background:var(--bg); }
.mem .txt { flex:1; overflow-wrap:anywhere; }
.mem .imp { color:var(--muted); font-size:10px; letter-spacing:1px; }
.mem .acts { display:flex; gap:2px; }
.mem .acts button { border:0; background:none; color:var(--muted); padding:2px 5px; border-radius:6px; min-width:28px; min-height:28px; }
.mem .acts button:hover { color:var(--text); background:var(--line); }
.mem .acts .pin[aria-pressed="true"] { color:var(--accent); }
.mem-edit { display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.mem-edit input[type=text] { flex:1 1 100%; }
.empty { color:var(--muted); font-size:14px; padding:12px; }
.story-sec { padding:12px 16px; border-bottom:1px solid var(--line); font-size:13px; }
.story-sec h3 { margin:0 0 6px; font-size:14px; display:flex; justify-content:space-between; align-items:center; }
.story-sec ul { list-style:none; margin:0; padding:0; }
.story-sec li { display:flex; gap:6px; align-items:flex-start; padding:5px 0; border-bottom:1px dashed var(--line); }
.story-sec li .t { flex:1; overflow-wrap:anywhere; }
.story-sec li .when { color:var(--muted); font-size:12px; white-space:nowrap; }
.story-sec li button { border:0; background:none; color:var(--muted); min-width:28px; min-height:28px; border-radius:6px; }
.story-sec li button:hover { color:var(--danger); background:var(--line); }
.mood { font-size:15px; }
.diary-entry { display:block !important; }
.diary-entry .when { display:block; margin-bottom:2px; }

/* ===== Felugró ablakok ===== */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:grid; place-items:center; z-index:9; padding:12px; }
#gate { z-index:10; }
.card { background:var(--panel); border-radius:16px; width:min(780px,100%); max-height:94vh; display:flex; flex-direction:column; box-shadow:0 12px 40px var(--shadow); }
.card.narrow { width:min(420px,100%); padding:24px; display:block; }
.card.narrow h1 { margin:0 0 8px; font-size:20px; }
.card.narrow p { color:var(--muted); margin:8px 0; font-size:14px; }
.card .row { display:flex; gap:8px; margin-top:16px; }
.card-head { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); }
.card-head h1 { margin:0; font-size:18px; }
.card-body { overflow-y:auto; padding:4px 18px 18px; }
.card-foot { display:flex; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid var(--line); }
#crMsg { flex:1; font-size:13px; color:var(--muted); } #crMsg.err { color:var(--danger); }
.sec { padding:16px 0; border-bottom:1px dashed var(--line); }
.sec:last-child { border-bottom:0; }
.sec h2 { margin:0 0 4px; font-size:15px; }
.hint { margin:0 0 10px; color:var(--muted); font-size:13px; }
/* a videóhívás-képek készítésének állapotsora (karakter-szerkesztő): jól látható keret, állapot szerinti szín */
.cv-status { margin:6px 0 10px; padding:8px 10px; border:1px solid var(--line); border-left:4px solid var(--muted); border-radius:8px; font-size:14px; color:var(--text); }
.cv-status.busy { border-left-color:var(--accent); }
.cv-status.ok { border-left-color:var(--ok); }
.cv-status.warn { border-left-color:var(--warn); }
.count { margin:8px 0 0; color:var(--muted); font-size:12px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { border:1px solid var(--line); background:var(--bg); border-radius:999px; padding:6px 12px; font-size:14px; min-height:34px; }
.chip:hover { border-color:var(--accent); }
.chip[data-state="1"] { border-color:var(--accent); color:var(--accent); background:transparent; font-weight:600; }
.chip[data-state="2"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.chip[data-state="3"] { border-color:var(--danger); color:var(--danger); font-weight:600; background:transparent; }
.chip.dis { opacity:.4; cursor:not-allowed; }
.legend { display:flex; gap:12px; flex-wrap:wrap; margin:0 0 10px; font-size:12px; color:var(--muted); }
.gap-top { margin-top:8px; }
.cards { display:grid; gap:8px; }
.story { text-align:left; border:1px solid var(--line); background:var(--bg); border-radius:12px; padding:10px 12px; }
.story:hover { border-color:var(--accent); }
.story[aria-checked="true"] { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.voice-card { display:flex; gap:8px; align-items:stretch; }
.voice-card .story { flex:1; }
.story b { display:block; margin-bottom:2px; }
.story span { color:var(--muted); font-size:13px; display:block; }
.card-body textarea, .card-body input[type=text] { width:100%; margin-top:8px; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 10px; resize:vertical; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:13px; }
.kv dt { color:var(--muted); } .kv dd { margin:0; overflow-wrap:anywhere; }
.danger-zone { border:1px solid var(--danger); border-radius:12px; padding:12px; margin-top:8px; }
.danger-zone .row { margin-top:8px; }

/* ===== Reszponzív ===== */
@media (max-width:820px) {
  aside { position:fixed; inset:0 0 0 auto; width:min(340px,92%); transform:translateX(100%); transition:transform .2s; z-index:5; }
  aside.open { transform:none; box-shadow:-8px 0 24px var(--shadow); }
  .toggle { display:inline-flex; }
}
@media (max-width:560px) {
  header { padding:8px 10px; gap:6px; }
  .btn.ib .lbl { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .btn.ib { min-width:40px; min-height:40px; justify-content:center; font-size:18px; padding:4px 8px; }
  .turn { max-width:92%; }
}
.notice-list { padding-left: 1.2em; margin: .6em 0 1em; }
.notice-list li { margin: .45em 0; line-height: 1.45; }
.wvideo { width:100%; max-width:min(520px, 100%); border-radius:10px; display:block; }
.wvideo-wrap { position:relative; }
.wvideo-zoom { position:absolute; top:8px; right:8px; width:34px; height:34px; border-radius:50%; border:0; background:rgba(0,0,0,.55); color:#fff; font-size:18px; cursor:zoom-in; }
video.gal-thumb { width:100%; aspect-ratio:3 / 4; object-fit:cover; background:#000; cursor:default; }
.mediawarn { align-self:center; text-align:center; font-size:13px; padding:6px 14px; border-radius:999px; background:transparent; border:1px solid var(--danger); color:var(--danger); max-width:92%; }
.mediawarn.credit { font-weight:600; }
.phold { position:relative; padding:0; overflow:hidden; width:min(320px, 100%); }
.phold-img { width:100%; aspect-ratio:3 / 4; object-fit:cover; display:block; }
.phold-text { position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:16px; color:#fff; font-size:14px; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.55); }
.phold-err .phold-img { filter:saturate(.6); }
.wreact { display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin-top:2px; }
.workcard:hover .rbtn { opacity:1; }
.aitag { color:var(--muted); font-size:11px; margin-top:4px; opacity:.8; display:inline-flex; align-items:center; gap:6px; }
/* látható „MI” címke minden generált alkotáson (CCBill P4): képen és galéria-bélyegen alul balra, videón fent balra (alul a lejátszó vezérlői vannak), hangnál a lejátszó mellett */
.aibadge { display:inline-flex; align-items:center; justify-content:center; padding:1px 6px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:.04em; line-height:1.4; color:#fff; background:rgba(0,0,0,.62); }
.wimg-btn, .wmedia, button.gal-thumb { position:relative; }
.wimg-btn > .aibadge, .wmedia > .aibadge, button.gal-thumb > .aibadge { position:absolute; left:8px; bottom:8px; pointer-events:none; }
.wvideo-wrap > .aibadge { position:absolute; left:8px; top:8px; pointer-events:none; }
.waudiorow { display:flex; align-items:center; gap:8px; }
.waudiorow .waudio { flex:1; min-width:0; }
.waudiorow .aibadge { flex:none; }
.wmedia-top > .aibadge { top:8px; bottom:auto; }   /* a galéria videóján alul a lejátszó vezérlői vannak: a címke fent balra áll */
.report { font-size:12px; color:var(--muted); margin-top:2px; }
.report-open { cursor:pointer; opacity:.75; width:fit-content; padding:2px 0; }
.report-open:hover, .report[open] .report-open { opacity:1; }
.report-form { display:flex; flex-direction:column; gap:6px; margin-top:6px; max-width:320px; }
.report-hint { margin:0; line-height:1.4; }
.report-reason, .report-note { font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:6px 8px; }
.report-note { resize:vertical; }
.report-status { min-height:1em; }
.report-done { padding:10px 12px; color:var(--muted); }
.dob { border:0; padding:0; margin:12px 0 4px; display:flex; gap:8px; flex-wrap:wrap; }
.dob legend { font-size:13px; color:var(--muted); margin-bottom:6px; padding:0; }
.dob label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:4px; }
.dob input { width:92px; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.mediawarn.warning { border-color:var(--warn); color:var(--warn); }

/* ---- videóhívás (js/call.js): teljes képernyős 2D hívás-nézet; az avatar állapotai: idle / listening / thinking / speaking */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.overlay.call { padding:0; background:#000; }
.call-card { width:min(560px,100%); height:100dvh; max-height:100dvh; display:flex; flex-direction:column; background:#000; color:#fff; }
@media (min-width:821px) { .call-card { height:min(92vh,860px); border-radius:18px; overflow:hidden; } .overlay.call { background:rgba(0,0,0,.75); } }
.call-avatar { position:relative; flex:1; min-height:0; overflow:hidden; background:#111; }
.call-still, .call-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.call-still { transform-origin:50% 40%; transition:transform .6s ease; }
.call-video { opacity:0; transition:opacity .35s ease; }
.call-video.on { opacity:1; }
.call-avatar[data-state="idle"] .call-still { animation:call-breathe 5s ease-in-out infinite; }
.call-avatar[data-state="listening"] .call-still { animation:call-breathe 4s ease-in-out infinite; transform:scale(1.02); }
.call-avatar[data-state="thinking"] .call-still { animation:call-breathe 3s ease-in-out infinite; }
.call-avatar[data-state="speaking"] .call-still { animation:call-speak 1.1s ease-in-out infinite; }
@keyframes call-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.015); } }
@keyframes call-speak { 0%,100% { transform:scale(1.01); } 35% { transform:scale(1.03); } 70% { transform:scale(1.015); } }
.call-avatar::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 0 var(--accent); transition:box-shadow .3s ease; }
.call-avatar[data-state="speaking"]::after { box-shadow:inset 0 0 0 4px var(--accent); }
.call-avatar[data-state="listening"]::after { box-shadow:inset 0 0 0 2px var(--ok); }
.call-state { position:absolute; left:12px; top:12px; background:rgba(0,0,0,.55); color:#fff; padding:4px 10px; border-radius:999px; font-size:13px; }
.call-msg { position:absolute; left:16px; right:16px; top:50%; transform:translateY(-50%); text-align:center; background:rgba(0,0,0,.7); padding:14px; border-radius:12px; margin:0; }
.call-caption { position:absolute; left:12px; right:12px; bottom:12px; margin:0; background:rgba(0,0,0,.6); padding:8px 12px; border-radius:10px; font-size:16px; line-height:1.35; max-height:40%; overflow-y:auto; }
.call-self { position:absolute; right:12px; top:12px; width:28%; max-width:150px; aspect-ratio:3/4; object-fit:cover; border-radius:12px; border:2px solid rgba(255,255,255,.6); transform:scaleX(-1); background:#222; }
.call-note { margin:0; padding:8px 14px; font-size:13px; background:#222; color:#e9e4dc; }
.call-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; padding:12px; background:#0b0b0b; padding-bottom:max(12px, env(safe-area-inset-bottom)); }
.call-controls .btn { color:#fff; border-color:#444; background:#1b1b1b; }
.call-controls .btn.on, .call-controls .btn[aria-pressed="true"] { border-color:var(--accent); }
.call-talk { min-height:48px; padding:0 22px; font-size:16px; touch-action:none; user-select:none; }
.call-talk.rec { background:var(--ok); color:#fff; }
.call-end { background:#a52f27 !important; border-color:#a52f27 !important; font-weight:600; }
@media (max-width:560px) { .call-controls .btn .lbl { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } }
/* élő avatar (Simli): a kb. négyzetes videó nem vágódik le a magas hívás-nézetben (contain), sötét háttéren */
.call-avatar.live { background:#000; }
.call-avatar.phone { background:radial-gradient(circle at 50% 40%, #2a2630, #111 70%); }   /* telefonhívás: csak hang, a portré nyugodt képe vagy a telefon-jel */
.call-avatar.phone .call-still { animation:none; transform:none; filter:saturate(.85); }
.call-avatar.phone.nopic::before { content:"☎️"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:96px; opacity:.85; }
.call-avatar.phone[data-state="speaking"]::before { animation:call-breathe 1.1s ease-in-out infinite; }
.call-live { object-fit:contain; background:#000; }.bound-list { margin:0 0 10px; padding-left:20px; }
.bound-list li { margin:4px 0; }
.bound-now { color:inherit; font-weight:600; }
/* kézi kamera (videóhívás): az élő képet a kezében tartott telefon veszi, ezért alig észrevehetően ring (csak 1-2 px eltolás, forgatás nélkül: a négyzetes videó széle a fekete háttéren forgatva látszana); csökkentett mozgásnál nincs */
.call-live.handheld.on { animation:call-handheld 8s ease-in-out infinite; }
@keyframes call-handheld { 0%, 100% { transform:translate(0, 0); } 25% { transform:translate(1px, -1.5px); } 50% { transform:translate(-1.5px, .5px); } 75% { transform:translate(.5px, 1.5px); } }
@media (prefers-reduced-motion: reduce) { .call-live.handheld.on { animation:none; transform:none; } }
/* többfelhasználós belépő- és fiók-felület (L5, váz): az ideiglenes, helyőrző szövegek feltűnő jelölése (GY9 a, D4) */
.acct-draft { margin:0 0 10px; padding:4px 8px; border:2px dashed var(--accent); border-radius:8px; color:var(--accent); font-size:12px; font-weight:700; text-transform:uppercase; }
.acct-card { max-height:94vh; overflow-y:auto; }
.acct-ask .row > button { flex:1 1 0; min-height:40px; padding:10px 18px; border-radius:12px; }   /* R9: a „Most nem” ugyanakkora */
.acct-form { margin-top:8px; }
.acct-field { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.acct-field input { font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.acct-check { margin:8px 0; font-size:14px; }
.acct-check label, label.acct-check { display:flex; gap:8px; align-items:flex-start; }
.acct-check .hint { margin:4px 0 0 26px; }
.acct-msg { margin-top:10px; color:var(--accent); }
.acct-list { padding-left:18px; }
.acct-list li { margin:4px 0; }
.acct-sec h3 { margin:12px 0 4px; font-size:14px; }
.acct-card h2 { margin:14px 0 4px; font-size:15px; }
/* kép- és videóminőség (Plusz / Prémium): a Beállítások minta-lapja */
.q-row { display:flex; gap:8px; }
.q-fig { margin:0; flex:1 1 0; min-width:0; max-width:260px; }
.q-fig img { width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:6px; }
.q-fig figcaption { font-size:12px; text-align:center; margin-top:2px; }
.q-label { margin:10px 0 4px; font-size:13px; font-weight:600; }
.q-ai { font-style:italic; }
.q-sample { margin-top:10px; }

/* csomag-kapuk felülete (Csaba, 2026-11-03): ruhatár-fül, háromgombos értesítés, vásárlási sáv és vásárlási ablak */
.tab { padding:12px 4px; font-size:13px; }
.wardrobe-item .wardrobe-thumb { cursor:default; }
.wardrobe-thumb img { width:100%; aspect-ratio:3 / 4; object-fit:cover; display:block; }
.wardrobe-nothumb { width:100%; aspect-ratio:3 / 4; display:flex; align-items:center; justify-content:center; font-size:32px; background:var(--panel); border:1px dashed var(--line); border-radius:8px; }
.wardrobe-title { cursor:default; text-align:left; }
.wardrobe-acts { display:flex; flex-direction:column; gap:6px; }
.wardrobe-acts .btn { width:100%; font-size:12.5px; }
.wardrobe-fav { grid-column:auto; grid-row:auto; }
.notice-actions { align-self:center; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:4px 0 8px; max-width:92%; }
.notice-actions .btn { font-size:13px; }
.shop-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 12px; border-top:1px solid var(--line); background:var(--panel); }
.shop-bar[hidden] { display:none; }
.shop-bar-text { flex:1 1 200px; font-size:13px; }
.shop-bar-out { flex-basis:100%; margin:0; }
.shop-sec { margin:14px 0; }
.shop-sec h3 { margin:0 0 6px; }
.shop-soon { padding:8px 12px; border:1px solid var(--warn); border-radius:8px; color:var(--warn); }
.shop-plans { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px; }
.shop-plan { border:1px solid var(--line); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:6px; background:var(--panel); }
.shop-plan.current { border-color:var(--accent); }
.shop-plan h4 { margin:0; }
.shop-feat { margin:0; padding-left:1.1em; font-size:13px; }
.shop-buy { width:100%; }
.shop-out { min-height:1.2em; }.shop-sec label { display:block; margin:10px 0 3px; font-size:13px; }
.shop-sec input[type=number], .shop-sec select { width:100%; max-width:320px; box-sizing:border-box; }
.shop-sec .row { display:flex; gap:8px; margin-top:10px; }.mediawarn.info { border-color:var(--ok); color:var(--ok); }

/* ---- közös naptár fül (Csaba, 2026-11-03) */
#calendar { padding-bottom: 24px; }
.cal-head { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; }
.cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; padding:0 8px 8px; }
.cal-wd { text-align:center; font-size:11px; color:var(--muted); padding:2px 0; }
.cal-day { display:flex; flex-direction:column; align-items:stretch; gap:1px; min-height:58px; padding:3px; text-align:left; background:none; border:1px solid var(--line); border-radius:6px; color:var(--text); font-size:11px; overflow:hidden; }
.cal-day.other { opacity:.45; }
.cal-day.today { border-color:var(--accent); }
.cal-day .n { font-weight:600; }
.cal-work { color:var(--muted); font-size:10px; }
.cal-ev { display:block; background:var(--line); border-radius:3px; padding:0 3px; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-ev.proposed { border:1px dashed var(--accent); background:none; }
.cal-ev.upcoming, .cal-ev.prep, .cal-ev.live { background:var(--accent); color:var(--bg); }
.cal-ev.legacy { opacity:.7; }
.cal-ev.own { background:none; border:1px solid var(--line); font-style:italic; }
.cal-note { margin:6px 16px; font-size:13px; color:var(--muted); }
.cal-conflict { margin:6px 16px; padding:8px 10px; border:1px solid var(--accent); border-radius:8px; font-size:13px; }
.cal-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.cal-proposal, .story-sec li.cal-proposal { display:block; padding:8px 0; }   /* a `.story-sec li` (flex sor) erősebb, mint a sima osztály: a javaslat oszlopban áll, nem sorban */
.cal-card { margin:6px 16px; padding:8px 10px; border:1px solid var(--accent); border-radius:8px; font-size:13px; }
.cal-form { display:flex; flex-direction:column; gap:8px; }
.cal-field { display:flex; flex-direction:column; gap:2px; font-size:13px; }
.cal-field input, .cal-field select { padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--panel, transparent); color:var(--text); min-height:36px; }
.cal-check { display:flex; gap:6px; align-items:center; font-size:13px; }
.cal-ev-line { align-items:center; }
/* A közelgő / korábbi program sora (Csaba, 2026-11-07): a cím teljes szélességben, alatta az időpont és a törlés, alatta a „Videós randi” kapcsoló; a `.story-sec li .t` erősebb szelektor, ezért ugyanilyen mélységű kell */
.story-sec .cal-ev-line { flex-wrap:wrap; }
.story-sec .cal-ev-line .t { flex:1 1 100%; order:0; }
.story-sec .cal-ev-line .when { flex:1 1 auto; order:1; white-space:normal; }
.story-sec .cal-ev-line > button { order:2; margin-left:auto; }
.story-sec .cal-ev-line .cal-switch { flex:1 1 100%; order:3; margin:.15rem 0 0; }
.cal-info { margin:4px 0; font-size:12px; color:var(--muted); }
/* Nap nagyítása: a kattintott nap a helyén nagyított kártyaként nyílik */
.cal-grid-wrap { position:relative; }
.cal-day.picked { border-color:var(--accent); }
.cal-zoom { position:absolute; z-index:4; width:min(260px, calc(100% - 16px)); max-height:min(70vh, 420px); overflow-y:auto; padding:10px 12px; background:var(--panel); color:var(--text); border:1px solid var(--accent); border-radius:10px; box-shadow:0 8px 24px var(--shadow); font-size:13px; }
.cal-zoom h4 { margin:0 28px 6px 0; font-size:14px; }
.cal-zoom p { margin:4px 0; }
.cal-zoom ul { list-style:none; margin:4px 0; padding:0; }
.cal-zoom li { padding:4px 0; border-top:1px dashed var(--line); overflow-wrap:anywhere; }
.cal-zoom .when, .cal-zoom .empty { color:var(--muted); }
.cal-zoom-close { position:absolute; top:4px; right:4px; border:0; background:none; color:var(--muted); min-width:28px; min-height:28px; border-radius:6px; }
.cal-zoom-close:hover { color:var(--danger); background:var(--line); }
/* A megbeszélt randi elfogadása: kiemelt javaslat, villogó „Elfogadom” (mozgáscsökkentésnél a globális szabály leállítja a villogást, a kiemelés marad) */
.story-sec li.cal-proposal.hot { border:1px solid var(--accent); border-radius:10px; padding:8px 10px; }
.cal-accept.hot { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; animation:cal-blink 1.1s ease-in-out infinite; }
@keyframes cal-blink { 0%, 100% { box-shadow:0 0 0 0 var(--accent); } 50% { box-shadow:0 0 0 .3rem var(--accent); } }

/* A „Videós randi” kapcsoló és Lia hívása (Csaba, 2026-11-04) */
.cal-switch { position:relative; display:flex; align-items:center; gap:.5rem; margin:.35rem 0; cursor:pointer; }   /* relative: a rejtett jelölőnégyzet (absolute) ne nyújtsa meg az oldalt az oldalpanel görgetésén túl (Csaba, 2026-11-07: „ez az üres rész itt most mi”) */
.cal-switch input { position:absolute; opacity:0; width:1px; height:1px; }
.cal-switch-track { flex:none; position:relative; width:2.4rem; height:1.3rem; border-radius:1rem; background:#6668; transition:background .2s; }
.cal-switch-track::after { content:""; position:absolute; top:.15rem; left:.15rem; width:1rem; height:1rem; border-radius:50%; background:#fff; transition:transform .2s; }
.cal-switch input:checked + .cal-switch-track { background:var(--accent); }
.cal-switch input:checked + .cal-switch-track::after { transform:translateX(1.1rem); }
.cal-switch input:focus-visible + .cal-switch-track { outline:2px solid var(--accent); outline-offset:2px; }
.call-ring { position:fixed; z-index:60; left:50%; top:1.5rem; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:1rem 1.4rem; border-radius:1rem; background:#17151bf2; color:#fff; box-shadow:0 8px 30px #0008; animation:call-ring-pulse 1.6s ease-in-out infinite; }
.call-ring-photo { width:5rem; height:5rem; border-radius:50%; object-fit:cover; }
@keyframes call-ring-pulse { 50% { box-shadow:0 8px 30px #0008, 0 0 0 .4rem var(--accent); } }
@media (prefers-reduced-motion: reduce) { .call-ring { animation:none; } }

/* Ajándék fül (Csaba, 2026-11-07..09; js/gifts.js) */
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.gift-item { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--line, rgba(127, 127, 127, .35)); border-radius: 10px; }
.gift-name { font-size: 1rem; }
.gift-price { font-weight: 600; }
.gift-compose textarea { width: 100%; box-sizing: border-box; margin: 6px 0 2px; }
.gift-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* Kirándulás és nyaralás (Csaba, 2026-11-09; js/trips.js, az Ajándék fülben) */
.trips { margin-top: 18px; }
.trip-compose input[type="text"], .trip-compose input[type="date"], .trip-compose select { box-sizing: border-box; max-width: 100%; margin: 6px 8px 2px 0; }
.trip-compose input[type="text"] { width: 100%; }
.trip-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.trip-media { display: flex; align-items: center; gap: 6px; }
.trip-plan { margin-top: 6px; }
.cal-ev.trip { background: var(--accent-soft, rgba(127, 127, 127, .18)); border-radius: 4px; }