:root { color-scheme:dark; --bg:#101b1b; --panel:#192727; --text:#eee9de; --muted:#a8b5ae; --accent:#e9ba7b; --line:#34433d; --mint:#a4c5b6; }
* { box-sizing:border-box; }
html { line-height:1.6; font-family:"Vazirmatn",Tahoma,"Noto Sans Arabic",sans-serif; background:var(--bg); color:var(--text); }
body { margin:0; min-height:100svh; background:radial-gradient(ellipse at 75% 35%,#23312a80,transparent 60%),var(--bg); }
a { color:inherit; } button,input { font:inherit; } button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.5; } [hidden] { display:none!important; }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.masthead,main,footer { width:min(1480px,100%); margin-inline:auto; padding-inline:clamp(20px,4vw,64px); }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:22px; border-bottom:1px solid #b6c7b217; }
.brand { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-weight:bold; font-size:23px; text-decoration:none; }
.brand-mark { font-size:36px; color:var(--accent); line-height:1; }
.brand-caption { font-size:10px; font-weight:normal; color:var(--muted); border-inline-start:1px solid var(--line); padding-inline-start:12px; }
.masthead-note { color:var(--muted); font-size:12px; }
.chat-link { font-size:12px; text-decoration:none; color:var(--mint); } .chat-link span { padding-inline-start:12px; }
main { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(330px,1fr); gap:clamp(24px,4vw,60px); padding-block:28px; }
.radio-room { min-width:0; display:flex; flex-direction:column; justify-content:center; position:relative; isolation:isolate; }
.radio-room::before { content:""; position:absolute; z-index:-1; inset:10% 0 4%; pointer-events:none; background:radial-gradient(ellipse,#bc6c242a,transparent 68%); opacity:0; transition:opacity 1.4s ease; }
[data-power="on"] .radio-room::before { opacity:1; }
.eyebrow { color:var(--mint); font-size:11px; letter-spacing:.02em; }
.hero { margin-bottom:24px; } .hero .eyebrow span { color:var(--accent); padding-inline-end:7px; }
h1 { font-size:clamp(25px,2.8vw,41px); line-height:1.6; margin:9px 0 5px; font-weight:normal; letter-spacing:-1.5px; }
h1 em { color:var(--accent); font-style:normal; }
.intro { color:var(--muted); font-size:12px; line-height:1.9; margin:0; }
.player-card { padding:15px; border:1px solid #825d3d; border-radius:24px; position:relative; background:repeating-linear-gradient(3deg,#0000 0 3px,#160c0638 4px,#c58e4210 5px,#0000 7px),linear-gradient(110deg,#65422b,#392719 25%,#775136 62%,#43291c); box-shadow:inset 0 2px 2px #d9ab7760,inset 0 -4px 6px #170d08,0 22px 35px #0006,0 3px 3px #0008; }
.player-card::before,.player-card::after { content:""; position:absolute; bottom:-9px; width:42px; height:9px; background:linear-gradient(#3c2a1d,#211b14); border-radius:0 0 5px 5px; box-shadow:0 5px 5px #0007; } .player-card::before { left:38px; } .player-card::after { right:38px; }
.radio-face { border-radius:13px; padding:17px 20px 12px; border:1px solid #a5815155; background:linear-gradient(120deg,#332b20,#211e17); box-shadow:inset 0 1px 8px #100b08; }
.radio-nameplate { display:flex; align-items:center; justify-content:space-between; color:#c7ad83; padding-bottom:16px; }
.radio-nameplate h2 { margin:0; font-size:20px; font-weight:normal; } .radio-nameplate>span { font-family:Georgia,serif; letter-spacing:2px; font-size:8px; }
.radio-hardware { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(100px,1fr); gap:20px; }
.speaker { grid-column:2; grid-row:1; position:relative; overflow:hidden; border-radius:9px; border:4px solid #1b1811; background:repeating-linear-gradient(0deg,#211b17aa 0 2px,#0000 2px 5px),repeating-linear-gradient(90deg,#b29a6c 0 1px,#6e6246 1px 3px,#302b20 3px 5px); box-shadow:inset 0 0 22px 7px #000a,0 1px 0 #b69a5050; }
.speaker::before { content:""; position:absolute; inset:12%; border-radius:50%; background:#0c0c086b; filter:blur(7px); } .speaker::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,#e0a35322); opacity:0; transition:opacity 1.4s; } [data-power="on"] .speaker::after { opacity:1; }
.speaker-emblem { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid #bfa775; color:#c5b082; border-radius:50%; width:34px; height:34px; display:grid; place-items:center; background:#4a402d; font-size:18px; box-shadow:0 2px 5px #0008; }
.tuner { grid-column:1; grid-row:1; min-width:0; }
.frequency-dial { position:relative; padding:14px 15px 10px; min-height:159px; border:3px solid #151711; border-radius:8px; background:#25271b; color:#aeae88; box-shadow:inset 0 2px 9px #0009,0 1px 0 #cdb37140; transition:background 1.1s .15s,color 1.1s .15s,box-shadow 1.1s .15s; }
[data-power="on"] .frequency-dial { background:#be8e47; color:#302715; box-shadow:inset 0 2px 9px #643b17aa,inset 0 0 25px #ffcf74,0 0 24px #eaa34235; animation:tube-warmup 1.5s ease both; }
.dial-heading { display:flex; justify-content:space-between; gap:8px; font-size:9px; }
.live-indicator { font:9px/1.5 monospace; color:#96967d; } .live-indicator[data-live="true"] { color:#593415; font-weight:bold; text-shadow:0 0 6px #ffefb3; }
.frequency-scale { position:relative; margin-top:18px; } .frequency-numbers { display:flex; justify-content:space-between; font:11px "Vazirmatn",Tahoma,sans-serif; }
.frequency-ticks { height:21px; margin-top:5px; background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 6px); opacity:.55; border-block-end:1px solid; }
.dial-needle { position:absolute; width:2px; height:42px; top:0; left:47%; background:#c88956; box-shadow:0 0 4px #0006; transform:translateX(-9px); transition:transform 1.2s .3s ease,background .8s; } [data-power="on"] .dial-needle { transform:translateX(0); background:#7b391e; }
.dial-bands { display:flex; justify-content:space-between; margin-top:6px; font:7px Georgia,serif; letter-spacing:1px; }
.track { font-size:11px; line-height:1.8; margin:12px 0 2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.audio-wave { height:15px; display:flex; justify-content:center; align-items:center; gap:3px; opacity:.4; } .audio-wave span { width:3px; height:100%; background:currentColor; transform:scaleY(.12); border-radius:1px; } .audio-wave[data-active="true"] { opacity:.9; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 4px 0; }
.power-control { display:flex; flex-direction:column; align-items:center; gap:7px; min-width:68px; }
.power-knob { position:relative; width:58px; height:58px; border-radius:50%; border:3px solid #b59b70; color:#ded0ac; background:radial-gradient(circle at 36% 26%,#655e4d,#262921 70%); box-shadow:0 5px 7px #0009,0 0 0 3px #141813,inset 0 1px 3px #dcd5b85c; transition:transform .15s,box-shadow .5s; }
.power-knob:not(:disabled):hover { box-shadow:0 5px 7px #0009,0 0 0 3px #141813,0 0 14px #e9ba7b45; }
.knob-notch { position:absolute; top:3px; left:calc(50% - 1px); width:2px; height:8px; background:#e7c894; transform:rotate(-38deg); transform-origin:1px 23px; transition:transform .15s; } [data-power="on"] .knob-notch { transform:rotate(38deg); }
.power-icon { display:block; font:23px Arial,sans-serif; } [data-power="on"] .power-icon { color:#ffd697; text-shadow:0 0 8px #e9ba7b99; }
#play-label { color:#c3b69b; font-size:10px; }
.volume-control { width:55%; max-width:145px; color:#b8ac8f; font-size:10px; } .volume-control label { display:flex; justify-content:space-between; gap:8px; }
#radio-volume { width:100%; height:22px; margin:8px 0 0; accent-color:#c7ae80; direction:ltr; cursor:pointer; }
.volume-labels { direction:ltr; display:flex; justify-content:space-between; font-size:8px; }
.radio-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:16px; padding-top:10px; border-top:1px solid #b99c6530; font-size:8px; color:#b2a283; }
.switch-sound { display:flex; align-items:center; gap:4px; cursor:pointer; } .switch-sound input { accent-color:#c7ae80; width:12px; height:12px; margin:0; }
.receiver-status { padding-top:23px; text-align:center; } .on-air { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; min-height:22px; font-size:11px; color:var(--text); }
.status-dot { width:6px; height:6px; border-radius:50%; background:#7a897f; } [data-playing="true"] .status-dot { background:var(--accent); box-shadow:0 0 10px #e9ba7b80; }
#retry-radio { border:1px solid var(--line); background:transparent; color:var(--accent); border-radius:5px; padding:6px 10px; font-size:11px; }
.playback-state { font-size:10px; color:var(--muted); margin:5px 0; line-height:1.7; }
.listening-meta { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 18px; font-size:9px; color:var(--muted); line-height:1.8; } .listening-meta time { display:inline-block; font-variant-numeric:tabular-nums; }
.below { display:flex; gap:13px; align-items:center; padding:15px 0 0; margin-top:20px; border-top:1px solid var(--line); } .below h2 { font-size:11px; font-weight:normal; margin:0 0 6px; color:var(--accent); } .below p { font-size:10px; color:var(--muted); margin:0; line-height:1.8; } .next-icon { font-size:25px; color:var(--muted); } .section-number { margin-inline-start:auto; font-size:10px; white-space:nowrap; color:#788d82; }
.chat-card { min-width:0; min-height:0; display:flex; flex-direction:column; border:1px solid #53635366; border-radius:16px; padding:22px; background:linear-gradient(150deg,#24332c,#192727 70%); box-shadow:0 12px 35px #0002; }
.chat-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; } .chat-heading .eyebrow { font-size:10px; color:#a6b8a8; } .chat-card h2 { font-size:21px; font-weight:normal; margin:10px 0 5px; } .chat-symbol { display:grid; place-items:center; border:1px solid #667b6255; width:38px; height:38px; border-radius:50%; color:var(--mint); font-size:24px; }
.chat-note { font-size:11px; color:var(--muted); line-height:1.9; margin:7px 0; }
#chat-mode { padding-bottom:13px; margin-bottom:0; border-bottom:1px solid var(--line); font-size:10px; }
.chat-messages { flex:1; min-height:100px; list-style:none; padding:10px 0; margin:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#526557 transparent; }
.chat-messages li { padding:13px 0; border-bottom:1px solid #a8b5ae13; overflow-wrap:anywhere; line-height:1.95; font-size:12px; }
.chat-messages strong { display:block; color:var(--accent); font-size:10px; font-weight:normal; margin-bottom:5px; } .chat-messages li>span { display:block; background:#ffffff05; border:1px solid #ffffff06; border-radius:9px 0 9px 9px; padding:9px 12px; }
.chat-messages li:only-child { border-bottom:0; } .chat-messages li.chat-empty { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; height:100%; min-height:150px; color:var(--muted); padding:24px; } .chat-empty::before { content:"☵"; font-size:34px; color:#789180; margin-bottom:13px; }
.chat-compose { flex:none; border-top:1px solid var(--line); padding-top:8px; max-height:55%; overflow-y:auto; scrollbar-width:thin; }
/* Keep focus rings inside controls so the scrolling composer cannot clip them. */
.chat-compose :focus-visible { outline-offset:-2px; }
.chat-form { margin-top:9px; } .chat-form label { display:block; font-size:10px; margin-bottom:7px; line-height:1.8; }
.chat-row { display:flex; flex-wrap:wrap; gap:7px; }
.chat-row input,.chat-identity input { font:inherit; font-size:11px; color:var(--text); background:#101d1b; border:1px solid #4a5c4b; border-radius:7px; padding:11px; }
.chat-row input { flex:1; min-width:100px; width:0; }
.chat-row button { border:1px solid #d9bc87; color:#272c23; background:#dfc79c; border-radius:7px; padding:10px 12px; font-size:10px; }
.chat-row button:hover { background:#efdab6; }
.identity-settings { margin-bottom:10px; border-bottom:1px solid var(--line); padding-bottom:9px; } .identity-settings summary { cursor:pointer; color:var(--mint); font-size:11px; padding:4px 0; } .chat-identity { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:10px; } .chat-identity input { display:block; width:100%; margin-top:5px; }
.chat-form .chat-consent { display:flex; align-items:flex-start; gap:6px; } .chat-consent input { accent-color:var(--accent); flex:none; } .identity-settings .chat-note { font-size:9px; } #chat-feedback:empty { display:none; }
footer { display:flex; justify-content:space-between; gap:12px; border-top:1px solid #b6c7b217; padding-block:14px; color:#8a9d91; font-size:9px; }
@keyframes tube-warmup { 0% { filter:brightness(.6); } 36% { filter:brightness(.84); } 43% { filter:brightness(.77); } 65% { filter:brightness(1.04); } 100% { filter:brightness(1); } }
@media (min-width:1000px) and (min-height:650px) { body { height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; } main { min-height:0; grid-template-rows:minmax(0,1fr); } .radio-room { min-height:0; max-height:100%; } .chat-messages { min-height:60px; } }
@media (min-width:1000px) and (max-height:800px) { .masthead { padding-block:16px; } main { padding-block:20px; } .hero { margin-bottom:16px; } h1 { font-size:30px; margin-block:5px; } .player-card { padding:12px; } .radio-face { padding:12px 16px 10px; } .radio-nameplate { padding-bottom:10px; } .frequency-dial { min-height:145px; padding-block:10px 7px; } .frequency-scale { margin-top:12px; } .controls { padding-top:11px; } .radio-bottom { margin-top:10px; padding-top:8px; } .receiver-status { padding-top:18px; } .below { margin-top:12px; padding-top:11px; } }
@media (max-width:1100px) { .brand-caption { display:none; } main { gap:25px; } .radio-hardware { gap:12px; } .radio-face { padding-inline:12px; } .chat-card { padding:18px; } .section-number { display:none; } }
@media (max-width:999px) { main { grid-template-columns:minmax(0,1fr); max-width:760px; padding-block:28px; } .masthead-note { display:none; } .hero { text-align:center; } .radio-room { padding-bottom:5px; } .chat-card { height:570px; } .intro { font-size:12px; } footer { margin-top:8px; } }
@media (min-width:1000px) and (max-height:649px) { .chat-card { max-height:600px; } }
@media (max-width:480px) { .masthead { padding-block:18px; } .brand { font-size:20px; } .chat-link { font-size:10px; } .masthead,main,footer { padding-inline:16px; } main { gap:22px; } h1 { font-size:26px; } .intro { font-size:10px; } .player-card { padding:10px; border-radius:18px; } .radio-face { padding:12px 10px 9px; } .radio-hardware { grid-template-columns:minmax(0,1.8fr) minmax(65px,1fr); gap:10px; } .radio-nameplate h2 { font-size:17px; } .radio-nameplate>span { font-size:6px; letter-spacing:1px; } .frequency-dial { padding:10px 9px 7px; } .dial-heading { font-size:8px; } .frequency-numbers { font-size:9px; } .controls { gap:10px; padding-inline:0; } .power-knob { width:50px; height:50px; } .knob-notch { transform-origin:1px 19px; } .power-control { min-width:58px; } .volume-control { font-size:9px; } .radio-bottom { font-size:7px; } .radio-bottom>span:last-child { display:none; } .chat-card h2 { font-size:20px; } footer { font-size:8px; } .chat-identity { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; transition:none!important; } }

@media (min-width:1000px) and (min-height:650px) and (max-height:720px) {
  .masthead { padding-block:12px; } main { padding-block:14px; }
  .hero { margin-bottom:10px; } .hero .eyebrow { display:none; } h1 { font-size:26px; margin:0; }
  .radio-nameplate { padding-bottom:6px; } .radio-nameplate h2 { font-size:17px; }
  .frequency-dial { min-height:130px; } .frequency-scale { margin-top:8px; }
  .power-knob { width:50px; height:50px; } .knob-notch { transform-origin:1px 19px; }
  .radio-bottom { margin-top:8px; padding-top:6px; } .receiver-status { padding-top:15px; }
  .below { margin-top:9px; padding-top:8px; } footer { padding-block:10px; }
}

/* Fit the receiver and the conversation within ordinary laptop viewports. */
@media (min-width:1000px) and (min-height:650px) {
  .hero { margin-bottom:18px; } .intro { line-height:1.6; }
  .radio-nameplate { padding-bottom:10px; } .radio-nameplate h2 { line-height:1.3; }
  .receiver-status { padding-top:18px; } .below { margin-top:14px; padding-top:11px; }
}
@media (min-width:1000px) and (min-height:650px) and (max-height:800px) {
  .hero { margin-bottom:12px; } .radio-bottom { margin-top:8px; padding-top:6px; }
  .frequency-ticks { height:17px; } .track { margin-top:8px; }
  .receiver-status { padding-top:15px; } .below { margin-top:10px; padding-top:8px; }
}
@media (min-width:1000px) and (min-height:650px) and (max-height:700px) {
  .hero { margin-bottom:8px; } .intro { display:none; }
  .radio-nameplate { padding-bottom:6px; } .frequency-dial { min-height:122px; padding-block:7px 5px; }
  .frequency-scale { margin-top:6px; } .radio-bottom { margin-top:6px; padding-top:5px; }
  .receiver-status { padding-top:13px; } .playback-state { margin-block:3px; }
  .below { margin-top:7px; padding-top:6px; }
}

#chat-new-messages { flex:none; align-self:center; border:1px solid var(--line); border-radius:6px; padding:5px 12px; background:#263d32; color:var(--accent); font-size:11px; }
.report-message { color:var(--muted); background:transparent; border:0; font-size:10px; margin-top:5px; padding:3px 6px; }