/* Üzleti Pilóta PWA. Tokens and the two typefaces come from the product landing
   (services/uzletipilota-fooldal/stilus.css); Archivo and Instrument Sans are OFL. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;src:url(betuk/archivo-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:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;src:url(betuk/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(betuk/instrument-sans-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:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(betuk/instrument-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#070C18; --ink-2:#0D1526; --ink-3:#141F36; --ink-4:#1D2B48;
  --on-ink:#E8EDF5; --on-ink-2:#AEB9CC;
  --signal:#FFB020; --signal-2:#FF8E24; --signal-soft:#FFF3DC; --signal-text:#7A4A00;
  --mint:#2ECF92; --piros:#E5484D;
  --line:rgba(255,255,255,.08);
  --fd:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fb:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:flex;flex-direction:column;height:100dvh;background:var(--ink);color:var(--on-ink);font-family:var(--fb);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
[hidden]{display:none !important}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;border-radius:12px;min-height:44px;padding:0 18px;background:var(--signal);color:var(--ink);font-family:var(--fd);font-weight:700}
button:disabled{opacity:.55;cursor:default}
button.masodlagos{background:transparent;color:var(--on-ink);border:1px solid var(--line)}
button.veszely{background:var(--piros);color:#fff}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
a{color:var(--signal)}

/* ---------- top banner ---------- */
.sav{flex:none;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));text-align:center;font-size:.95rem;font-weight:600}
.sav.offline{background:var(--ink-4);color:var(--on-ink)}
.sav.ujra,.sav.szolg{background:var(--signal);color:var(--ink)}
.sav.ujra::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:.5em;vertical-align:-.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:forog 1s linear infinite}

/* ---------- login view ---------- */
.belepes{width:100%;max-width:440px;margin:0 auto;overflow-y:auto;padding:56px 22px 40px;display:flex;flex-direction:column;gap:14px}
.belepes .logo{width:72px;height:72px}
.belepes h1{font-family:var(--fd);font-size:1.9rem;line-height:1.1;margin:6px 0 0;letter-spacing:-.015em}
.belepes p{margin:0;color:var(--on-ink-2)}
.belepes .uzenet{color:var(--on-ink);background:var(--ink-3);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.urlap{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.urlap label{font-weight:600;font-size:.95rem}
.urlap input{background:var(--ink-2);border:1px solid var(--ink-4);border-radius:12px;padding:12px 14px;font-size:1.05rem}
.urlap button{margin-top:6px;min-height:50px;font-size:1.05rem}
.segitseg{font-size:.95rem;margin-top:18px !important}

/* ---------- chat view ---------- */
.csevego{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;max-width:820px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--ink-2)}
.fejlec{display:flex;align-items:center;gap:12px;padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top));background:var(--ink);border-bottom:1px solid var(--line)}
.fej-szoveg{flex:1;min-width:0}
.fejlec h1{font-family:var(--fd);font-size:1.12rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agens-allapot{margin:0;font-size:.85rem;color:var(--on-ink-2)}
.potty{flex:none;width:12px;height:12px;border-radius:50%;background:#5B6680}
.potty.be{background:var(--mint);animation:lukteto 2.4s ease-in-out infinite}
.fejlec select{background:var(--ink-3);border:1px solid var(--ink-4);border-radius:10px;padding:8px;max-width:40%}
.menu-gomb{width:44px;padding:0;background:transparent;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.menu-gomb span{display:block;width:20px;height:2px;border-radius:2px;background:var(--on-ink)}
.menu{display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--ink);border-bottom:1px solid var(--line)}
.menu-szoveg{margin:0;font-size:.92rem;color:var(--on-ink-2)}
.megerosites{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;background:var(--ink-3)}
.megerosites p{margin:0}
.gombsor{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- quota bars ---------- */
.keret{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;padding:10px 14px;background:var(--ink);border-bottom:1px solid var(--line);font-size:.8rem}
.keret-sor{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;min-width:0}
.keret-cim{color:var(--on-ink-2);white-space:nowrap}
.sav-kulso{height:6px;border-radius:3px;background:var(--ink-4);overflow:hidden}
.sav-belso{height:100%;width:calc(var(--szazalek,0) * 1%);background:var(--mint);border-radius:3px;transition:width .4s ease}
.keret-szoveg{grid-column:1 / -1;color:var(--on-ink)}
.keret-sor.sarga .sav-belso{background:var(--signal)}
.keret-sor.piros .sav-belso{background:var(--piros)}
.keret-sor.piros .keret-szoveg{color:#FF8A8D}
.keret-sor.nem-olvashato .sav-kulso{background:repeating-linear-gradient(135deg,var(--ink-4) 0 6px,var(--ink-3) 6px 12px)}
.keret-sor.nem-olvashato .keret-szoveg{color:var(--on-ink-2)}

/* ---------- messages ---------- */
.uzenetek{flex:1;overflow-y:auto;list-style:none;margin:0;padding:14px 12px;display:flex;flex-direction:column;gap:6px}
.ures{margin:auto;padding:24px;max-width:340px;text-align:center;color:var(--on-ink-2)}
.buborek{max-width:min(82%,560px);padding:8px 12px 6px;border-radius:16px;overflow-wrap:anywhere;white-space:pre-wrap}
.buborek.be{align-self:flex-start;background:var(--ink-3);border-bottom-left-radius:6px}
.buborek.ki{align-self:flex-end;background:var(--ink-4);border-bottom-right-radius:6px}
.buborek .szoveg{font-size:1rem}
.meta{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 8px;margin-top:3px;font-size:.75rem;color:var(--on-ink-2);white-space:normal}
.szerkesztve{font-style:italic}
.kezbesitve-jel{color:var(--mint)}
.allapot-szoveg{flex-basis:100%;text-align:right}
.buborek.lejart .allapot-szoveg{color:#FF8A8D}
.ujrakuldes{min-height:32px;padding:0 12px;font-size:.8rem;border-radius:9px}
.ora{position:relative;display:inline-block;width:12px;height:12px;border:1.5px solid currentColor;border-radius:50%}
.ora::before,.ora::after{content:"";position:absolute;left:50%;top:50%;width:1.5px;background:currentColor;transform-origin:50% 0}
.ora::before{height:4px;transform:translateX(-50%) rotate(180deg)}
.ora::after{height:3px;transform:translateX(-50%) rotate(-90deg)}

/* ---------- composer ---------- */
.kuldes{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:var(--ink);border-top:1px solid var(--line)}
.kuldes textarea{flex:1;resize:none;max-height:40vh;min-height:44px;background:var(--ink-2);border:1px solid var(--ink-4);border-radius:14px;padding:11px 14px;line-height:1.35}
.kuldes-hiba{margin:0;padding:0 14px 10px;background:var(--ink);color:#FF8A8D;font-size:.9rem}

@keyframes forog{to{transform:rotate(360deg)}}
@keyframes lukteto{0%,100%{box-shadow:0 0 0 0 rgba(46,207,146,.45)}50%{box-shadow:0 0 0 5px rgba(46,207,146,0)}}
@media (prefers-reduced-motion:reduce){.potty.be,.sav.ujra::before{animation:none}.sav-belso{transition:none}}
@media (max-width:420px){.keret{grid-template-columns:1fr}.buborek{max-width:88%}}