/* OMNIA Q&A - mobil-first, sötét prémium brand. */
:root {
  --bg: #0a0c10;
  --surface: #12161d;
  --surface-2: #1a1f29;
  --line: #262d39;
  --text: #eef2f7;
  --muted: #8b95a4;
  --red: #f4211a;
  --teal: #14dfc4;
  --radius: 16px;
  --space: clamp(14px, 4vw, 22px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; max-width: 100%; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Helvetica Neue", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal); text-decoration: none; }
.logo { display: block; }
.ring { fill: none; stroke: var(--red); }

/* ---- login ---- */
.auth-wrap {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: var(--space); gap: 26px;
  background: radial-gradient(120% 80% at 50% 0%, #141a24 0%, var(--bg) 60%);
}
.auth-card {
  position: relative; width: 100%; max-width: 400px;
  background: linear-gradient(180deg, rgba(28,34,44,.9), rgba(16,20,27,.92));
  border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(24px, 6vw, 34px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter: blur(8px);
  animation: cardIn .5s var(--ease, cubic-bezier(.16,1,.3,1)) both;
  overflow: hidden;
}
.auth-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--red), var(--teal));
}
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
.auth-card h1 { font-size: 22px; margin: 0 0 4px; font-weight: 800; letter-spacing: -.01em; }
.auth-card p.sub { color: var(--muted); margin: 0 0 22px; font-size: 14px; line-height: 1.5; }
label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 7px; }
.auth-card input[type=text], .auth-card input[type=password], .auth-card input[type=email] {
  width: 100%; background: rgba(8,10,14,.7); border: 1px solid var(--line);
  color: var(--text); border-radius: 13px; padding: 14px 15px 14px 46px; font-size: 16px;
  background-repeat: no-repeat; background-position: 15px center; background-size: 20px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.auth-card input[type=email] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238b95a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.auth-card input[type=text] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238b95a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.auth-card input[type=password] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238b95a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.auth-card input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,223,196,.16); background-color: rgba(8,10,14,.95); }
.btn {
  width: 100%; margin-top: 24px; border: 0; border-radius: 13px;
  background: linear-gradient(135deg, #ff3b33, var(--red) 60%, #d4140d);
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .01em;
  padding: 15px; cursor: pointer; min-height: 52px;
  box-shadow: 0 10px 24px -8px rgba(244,33,26,.55);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover { filter: brightness(1.06); box-shadow: 0 14px 30px -8px rgba(244,33,26,.7); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: 0 6px 16px -8px rgba(244,33,26,.6); }
.auth-card a { color: var(--teal); transition: opacity .15s ease; }
.auth-card a:hover { opacity: .75; }
.err { background: rgba(244,33,26,.12); border: 1px solid rgba(244,33,26,.4);
  color: #ffb3ae; padding: 10px 13px; border-radius: 10px; font-size: 14px; margin-top: 16px; }

/* ---- app shell ---- */
.app { display: flex; flex-direction: column; height: 100dvh; }
header.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--space); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), rgba(18,22,29,.85));
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5;
  box-shadow: 0 6px 20px -16px rgba(0,0,0,.9);
}
header.bar .brand { display: flex; align-items: center; gap: 10px; }
header.bar .brand .o { width: 18px; height: 18px; border-radius: 50%;
  border: 4px solid var(--red); }
header.bar .brand b { font-weight: 700; letter-spacing: 2px; font-size: 15px; }
header.bar .brand b span { color: var(--teal); font-weight: 500; }
header.bar .who { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 12px; }
header.bar .who .uname { max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* hamburger gomb - csak mobilon látszik */
.menu-btn { display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface-2); cursor: pointer; padding: 0; }
.menu-btn span { display: block; width: 18px; height: 2px; margin: 0 auto; border-radius: 2px;
  background: var(--text); transition: transform .2s ease, opacity .2s ease; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 560px) {
  .menu-btn { display: flex; }
  header.bar .who {
    position: absolute; top: calc(100% + 8px); right: 12px; z-index: 20;
    flex-direction: column; align-items: stretch; gap: 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 16px; min-width: 190px; display: none;
    box-shadow: 0 20px 50px -16px rgba(0,0,0,.75);
  }
  header.bar .who.open { display: flex; animation: cardIn .2s ease both; }
  header.bar .who .uname { display: block; max-width: none; color: var(--text); font-size: 14px; }
  header.bar .who #lang { width: 100%; padding: 9px 10px; }
  header.bar .who #signout { padding: 4px 0; }
}
.app { overflow-x: hidden; }   /* biztonsági guard a vízszintes csúszás ellen */
#lang {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 8px; font-size: 13px; font-family: inherit;
}
#lang:focus { outline: none; border-color: var(--teal); }
.auth-card #lang { margin-left: 10px; }

.chat { flex: 1; overflow-y: auto; padding: var(--space); display: flex;
  flex-direction: column; gap: 14px; -webkit-overflow-scrolling: touch; }
.msg { max-width: 88%; padding: 13px 16px; border-radius: 18px; font-size: 15.5px;
  animation: msgIn .32s cubic-bezier(.16,1,.3,1) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg.user { align-self: flex-end; color: #06231f; font-weight: 600;
  background: linear-gradient(135deg, #1ff0d4, #11c7b1);
  border-bottom-right-radius: 6px; box-shadow: 0 6px 16px -8px rgba(20,223,196,.55); }
.msg.bot { align-self: flex-start; background: var(--surface-2);
  border: 1px solid var(--line); border-bottom-left-radius: 6px;
  box-shadow: 0 8px 22px -16px rgba(0,0,0,.8); }
.msg.bot.think { color: var(--muted); }
/* streaming gépelés-kurzor (ChatGPT-szerű) */
.cursor { display: inline-block; width: 7px; height: 1.05em; margin-left: 1px;
  vertical-align: text-bottom; background: var(--teal); border-radius: 1px;
  animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* markdown a válaszban */
.msg.bot > :first-child { margin-top: 0; }
.msg.bot > :last-child { margin-bottom: 0; }
.msg.bot p { margin: 8px 0; }
.msg.bot strong { color: #fff; font-weight: 700; }
.msg.bot ul, .msg.bot ol { margin: 8px 0; padding-left: 20px; }
.msg.bot li { margin: 4px 0; }
.msg.bot li::marker { color: var(--teal); }
.msg.bot h3, .msg.bot h4 { margin: 12px 0 6px; font-size: 15px; color: #fff; }
.msg.bot a { color: var(--teal); }
.msg.bot code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.msg.bot table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.msg.bot th, .msg.bot td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; }
.msg.bot th { background: var(--bg); color: var(--teal); font-weight: 600; }
.msg.bot table { display: block; overflow-x: auto; }
.dots span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%;
  background: var(--teal); animation: b 1.2s infinite; }
.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes b { 0%,80%,100%{opacity:.3}40%{opacity:1} }

.intro { text-align: center; color: var(--muted); margin: auto; max-width: 460px; }
.intro .logo { margin: 0 auto 18px; }
.intro h2 { color: var(--text); font-weight: 700; font-size: 19px; margin: 0 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.chip { background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 9px 15px; font-size: 13.5px; cursor: pointer;
  transition: border-color .15s ease, transform .12s ease, background .15s ease; }
.chip:hover { border-color: var(--teal); transform: translateY(-1px); background: #1f2530; }
.chip:active { transform: translateY(0); }

footer.compose {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: 10px var(--space) calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; align-items: flex-end;
}
footer.compose textarea {
  flex: 1; resize: none; background: var(--bg); border: 1px solid var(--line);
  color: var(--text); border-radius: 14px; padding: 13px 15px; font-size: 16px;
  font-family: inherit; max-height: 140px; line-height: 1.4;
}
footer.compose textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,223,196,.15); }
footer.compose button {
  border: 0; border-radius: 50%; width: 48px; height: 48px; flex: 0 0 48px;
  background: linear-gradient(135deg, #ff3b33, var(--red) 60%, #d4140d); color: #fff;
  font-size: 20px; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(244,33,26,.6);
  transition: transform .12s ease, box-shadow .18s ease, filter .15s ease;
}
footer.compose button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
footer.compose button:active:not(:disabled) { transform: translateY(1px); }
footer.compose button:disabled { opacity: .4; box-shadow: none; }