/* =====================
   SMART ADVICE — Retro ASCII Theme (Grayscale)
   ===================== */
:root{
  --bg:#0f0f12;
  --bg2:#141418;
  --ink:#e6e6e6;
  --muted:#bdbdbd;
  --line:#2a2a2e;
  --accent:#cfcfcf; /* keep gray accents */
  --green:#cfd3cf;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--ink);
  font-family: ui-monospace, "Cascadia Mono","Fira Mono","Courier New",monospace; }
a{color:var(--ink);text-decoration:none;border-bottom:1px dashed var(--muted)}
a:hover{opacity:.9}
.container{max-width:980px;margin:0 auto;padding:16px}
header{
  position:sticky;top:0;z-index:10;background:rgba(17,17,20,.8);
  border-bottom:1px solid var(--line);backdrop-filter:blur(6px)
}
.nav{display:flex;gap:14px;align-items:center}
.nav .spacer{flex:1}
.nav a, .nav b{padding:8px 10px;border:1px solid var(--line);background:#111; border-radius:6px}
.lang{display:flex;gap:8px}
main{min-height:70vh}
footer{border-top:1px solid var(--line);padding:24px 0;color:var(--muted)}
h1,h2,h3{letter-spacing:.5px}
h1{font-size:clamp(26px,4.8vw,40px);margin:16px 0 6px}
.lead{color:var(--muted);margin:0 0 10px}
.btn{display:inline-block;padding:10px 14px;border:1px solid var(--line);background:#121216;border-radius:8px}
.btn.primary{box-shadow:0 0 0 2px #222 inset}
.grid{display:grid;gap:14px}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.card{border:1px solid var(--line);border-radius:var(--radius);background:#121216;padding:14px}
.ascii{white-space:pre; font-size:12px; line-height:1.1; color:#c9c9c9; border:1px solid var(--line); border-radius:var(--radius); padding:12px; background:#0f0f12; overflow:auto}
.kbd{border:1px solid var(--line);padding:2px 6px;border-radius:4px;background:#0e0e11;color:#ddd}
.small{font-size:.9rem;color:var(--muted)}

/* Typewriter + old SMS cue */
.typewriter{border:1px dashed var(--line);padding:10px;border-radius:8px;min-height:42px;position:relative;background:#111}
.typewriter .cursor{display:inline-block;width:8px;height:1.05em;background:#ddd;vertical-align:-2px;animation:blink 1s steps(1) infinite;margin-left:4px}
@keyframes blink{50%{opacity:0}}
.sms-dots{margin-top:6px; color:#aaa; font-size:12px}
.sms-dots span{display:inline-block; width:6px; height:6px; margin-right:4px; background:#aaa; border-radius:50%; opacity:.2; animation:dot 1.2s infinite}
.sms-dots span:nth-child(2){animation-delay:.2s}
.sms-dots span:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.2} 40%{opacity:.9}}

/* Swipe cards (grayscale) */
.swipe{display:grid; grid-auto-flow:column; grid-auto-columns:min(80vw,240px); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px}
.swipe::-webkit-scrollbar{height:6px}
.swipe::-webkit-scrollbar-thumb{background:#2c2c30;border-radius:20px}
.swipe .card{scroll-snap-align:start}

/* FAQ */
details{border:1px solid var(--line);border-radius:10px;background:#121216;padding:12px;margin:10px 0}
summary{cursor:pointer;font-weight:700}
details[open]{box-shadow:0 0 0 2px #1f1f24 inset}
details p{color:var(--muted)}

/* mIRC-like chat (grayscale) */
.chat-fab{position:fixed;right:16px;bottom:16px;background:#1a1a1e;border:1px solid var(--line);border-radius:999px;color:#ddd;padding:10px 14px;z-index:50}
.chat{position:fixed;right:12px;bottom:12px;width:min(420px,95vw);height:62vh;display:none;z-index:60}
.chat.open{display:block}
.chat-frame{height:100%;background:#0f0f12;border:1px solid var(--line);border-radius:10px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.chat .title{background:#141418;padding:8px 10px;border-bottom:1px solid var(--line);font-weight:700;color:#cfcfcf}
.chat .log{background:repeating-linear-gradient(180deg,#101014 0px,#101014 26px,#0f0f13 26px,#0f0f13 52px); padding:10px; overflow:auto; font-size:14px}
.chat .nick{color:#9c9c9c;margin-right:6px}
.chat .me{color:#dcdcdc}
.chat .ai{color:#bfbfbf}
.chat .input{display:flex;gap:8px;border-top:1px solid var(--line);padding:8px;background:#141418}
.chat input[type=text]{flex:1;background:#0e0e12;border:1px solid #222;border-radius:8px;color:#ddd;padding:10px}
.chat button{background:#1b1b20;border:1px solid #2a2a2e;color:#e1e1e1;border-radius:8px;padding:10px 12px}
/* RTL tweaks */
[dir="rtl"] .nav{flex-direction:row-reverse}
[dir="rtl"] .lang{flex-direction:row-reverse}
[dir="rtl"] .chat{right:auto; left:12px}