<?php
/**
 * ============================================================================
 *  CloudSpace — Professional Multi-Device Browser Emulation Platform
 * ============================================================================
 *  Version   : 1.0.0
 *  File      : index.php
 *  Requires  : PHP 7.4+ (works on 8.x too) · No database · No dependencies
 *  Install   : Upload this single file to your hosting. That's it.
 * ============================================================================
 */

declare(strict_types=1);
error_reporting(E_ALL);
ini_set('display_errors', '0');

/* ─────────────────────────  SECURE SESSION  ───────────────────────── */
if (session_status() === PHP_SESSION_NONE) {
    session_set_cookie_params([
        'lifetime' => 0,
        'path'     => '/',
        'secure'   => !empty($_SERVER['HTTPS']),
        'httponly' => true,
        'samesite' => 'Lax',
    ]);
    session_name('cloudspace_sid');
    session_start();
}

/* ──────────────────────  SECURITY HEADERS  ────────────────────── */
if (!headers_sent() && PHP_SAPI !== 'cli') {
    header_remove('X-Powered-By');
    header('X-Content-Type-Options: nosniff');
    header('X-Frame-Options: SAMEORIGIN');
    header('Referrer-Policy: no-referrer');
    header('Permissions-Policy: geolocation=(), microphone=(), camera=()');
}

/* ══════════════════════════════════════════════════════════════════
   DEVICE CATALOG — Real viewport sizes + real User-Agent strings
   ══════════════════════════════════════════════════════════════════ */
$DEVICES = [
    /* ───────────── ANDROID ───────────── */
    'pixel_8_pro' => [
        'brand' => 'Google', 'model' => 'Pixel 8 Pro', 'icon' => '📱',
        'os' => 'Android 14', 'w' => 412, 'h' => 915, 'r' => 44, 'notch' => 'punch',
        'ua' => 'Mozilla/5.0 (Linux; Android 14; Pixel 8 Pro) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36',
        'tag' => 'Chrome 120',
    ],
    'pixel_8' => [
        'brand' => 'Google', 'model' => 'Pixel 8', 'icon' => '📱',
        'os' => 'Android 14', 'w' => 412, 'h' => 870, 'r' => 44, 'notch' => 'punch',
        'ua' => 'Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36',
        'tag' => 'Chrome 120',
    ],
    'pixel_7' => [
        'brand' => 'Google', 'model' => 'Pixel 7', 'icon' => '📱',
        'os' => 'Android 13', 'w' => 412, 'h' => 890, 'r' => 38, 'notch' => 'punch',
        'ua' => 'Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Mobile Safari/537.36',
        'tag' => 'Chrome 119',
    ],
    'pixel_tablet' => [
        'brand' => 'Google', 'model' => 'Pixel Tablet', 'icon' => '📟',
        'os' => 'Android 14', 'w' => 800, 'h' => 1280, 'r' => 22, 'notch' => 'bezel',
        'ua' => 'Mozilla/5.0 (Linux; Android 14; Pixel Tablet) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
        'tag' => 'Chrome 120',
    ],
    'galaxy_s24_ultra' => [
        'brand' => 'Samsung', 'model' => 'Galaxy S24 Ultra', 'icon' => '📱',
        'os' => 'Android 14', 'w' => 412, 'h' => 915, 'r' => 32, 'notch' => 'punch',
        'ua' => 'Mozilla/5.0 (Linux; Android 14; SM-S928B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36',
        'tag' => 'Chrome 120',
    ],
    'galaxy_s23' => [
        'brand' => 'Samsung', 'model' => 'Galaxy S23', 'icon' => '📱',
        'os' => 'Android 13', 'w' => 384, 'h' => 854, 'r' => 32, 'notch' => 'punch',
        'ua' => 'Mozilla/5.0 (Linux; Android 13; SM-S911B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36',
        'tag' => 'Chrome 120',
    ],
    'galaxy_a54' => [
        'brand' => 'Samsung', 'model' => 'Galaxy A54', 'icon' => '📱',
        'os' => 'Android 14', 'w' => 412, 'h' => 892, 'r' => 28, 'notch' => 'punch',
        'ua' => 'Mozilla/5.0 (Linux; Android 14; SM-A546B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36',
        'tag' => 'Chrome 120',
    ],
    'oneplus_12' => [
        'brand' => 'OnePlus', 'model' => 'OnePlus 12', 'icon' => '📱',
        'os' => 'Android 14', 'w' => 412, 'h' => 906, 'r' => 36, 'notch' => 'punch',
        'ua' => 'Mozilla/5.0 (Linux; Android 14; CPH2581) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36',
        'tag' => 'Chrome 120',
    ],
    'xiaomi_14' => [
        'brand' => 'Xiaomi', 'model' => 'Xiaomi 14 Pro', 'icon' => '📱',
        'os' => 'Android 14', 'w' => 412, 'h' => 916, 'r' => 34, 'notch' => 'punch',
        'ua' => 'Mozilla/5.0 (Linux; Android 14; 23116PN5BC) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36',
        'tag' => 'Chrome 120',
    ],
    'nothing_phone_2' => [
        'brand' => 'Nothing', 'model' => 'Phone (2)', 'icon' => '📱',
        'os' => 'Android 14', 'w' => 412, 'h' => 919, 'r' => 36, 'notch' => 'punch',
        'ua' => 'Mozilla/5.0 (Linux; Android 14; A065) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36',
        'tag' => 'Chrome 120',
    ],

    /* ───────────── iOS ───────────── */
    'iphone_15_pro_max' => [
        'brand' => 'Apple', 'model' => 'iPhone 15 Pro Max', 'icon' => '🍎',
        'os' => 'iOS 17', 'w' => 430, 'h' => 932, 'r' => 50, 'notch' => 'dynamic',
        'ua' => 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
        'tag' => 'Safari 17',
    ],
    'iphone_15' => [
        'brand' => 'Apple', 'model' => 'iPhone 15', 'icon' => '🍎',
        'os' => 'iOS 17', 'w' => 393, 'h' => 852, 'r' => 50, 'notch' => 'dynamic',
        'ua' => 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
        'tag' => 'Safari 17',
    ],
    'iphone_14' => [
        'brand' => 'Apple', 'model' => 'iPhone 14 Pro', 'icon' => '🍎',
        'os' => 'iOS 16', 'w' => 393, 'h' => 852, 'r' => 50, 'notch' => 'dynamic',
        'ua' => 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1',
        'tag' => 'Safari 16',
    ],
    'iphone_se' => [
        'brand' => 'Apple', 'model' => 'iPhone SE (3rd)', 'icon' => '🍎',
        'os' => 'iOS 17', 'w' => 375, 'h' => 667, 'r' => 18, 'notch' => 'bezel',
        'ua' => 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
        'tag' => 'Safari 17',
    ],
    'ipad_pro' => [
        'brand' => 'Apple', 'model' => 'iPad Pro 12.9"', 'icon' => '📟',
        'os' => 'iPadOS 17', 'w' => 1024, 'h' => 1366, 'r' => 18, 'notch' => 'bezel',
        'ua' => 'Mozilla/5.0 (iPad; CPU OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
        'tag' => 'Safari 17',
    ],

    /* ───────────── DESKTOP ───────────── */
    'macbook_air' => [
        'brand' => 'Apple', 'model' => 'MacBook Air 13"', 'icon' => '💻',
        'os' => 'macOS Sonoma', 'w' => 1280, 'h' => 832, 'r' => 10, 'notch' => 'none', 'desktop' => true,
        'ua' => 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15',
        'tag' => 'Safari 17',
    ],
    'windows_11' => [
        'brand' => 'Microsoft', 'model' => 'Windows 11 Desktop', 'icon' => '🖥️',
        'os' => 'Windows 11', 'w' => 1366, 'h' => 768, 'r' => 10, 'notch' => 'none', 'desktop' => true,
        'ua' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
        'tag' => 'Chrome 120',
    ],
    'windows_10' => [
        'brand' => 'Microsoft', 'model' => 'Windows 10 Desktop', 'icon' => '🖥️',
        'os' => 'Windows 10', 'w' => 1366, 'h' => 768, 'r' => 10, 'notch' => 'none', 'desktop' => true,
        'ua' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
        'tag' => 'Chrome 120',
    ],
    'ubuntu_desktop' => [
        'brand' => 'Canonical', 'model' => 'Ubuntu 24.04 Desktop', 'icon' => '🐧',
        'os' => 'Linux', 'w' => 1366, 'h' => 768, 'r' => 10, 'notch' => 'none', 'desktop' => true,
        'ua' => 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
        'tag' => 'Chrome 120',
    ],
    'chromeos_flex' => [
        'brand' => 'Google', 'model' => 'ChromeOS Flex', 'icon' => '🌐',
        'os' => 'ChromeOS', 'w' => 1366, 'h' => 768, 'r' => 10, 'notch' => 'none', 'desktop' => true,
        'ua' => 'Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
        'tag' => 'Chrome 120',
    ],
];

/* ══════════════════════════════════════════════════════════════════
   HELPER FUNCTIONS
   ══════════════════════════════════════════════════════════════════ */

/**
 * HTML-escape a string safely.
 */
function e($s): string {
    return htmlspecialchars((string)$s, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
}

/**
 * Normalize user-supplied URL: if no scheme, try to build one.
 * Falls back to Google search for freeform text.
 */
function normalize_url(string $input): string {
    $input = trim($input);
    if ($input === '') return '';
    if (preg_match('#^https?://#i', $input)) return $input;
    if (preg_match('#^[\w.-]+\.[a-z]{2,}([/?#]|$)#i', $input)) return 'https://' . $input;
    return 'https://www.google.com/search?q=' . urlencode($input);
}

/**
 * Extract the domain for display purposes.
 */
function display_host(string $url): string {
    $h = parse_url($url, PHP_URL_HOST);
    if (!$h) return $url;
    return preg_replace('/^www\./i', '', $h);
}

/* ══════════════════════════════════════════════════════════════════
   REQUEST HANDLING
   ══════════════════════════════════════════════════════════════════ */

/* ---- Device selection ---- */
$deviceKey = $_POST['device'] ?? $_GET['device'] ?? $_SESSION['device'] ?? 'pixel_8_pro';
if (!isset($DEVICES[$deviceKey])) $deviceKey = 'pixel_8_pro';
$_SESSION['device'] = $deviceKey;
$device = $DEVICES[$deviceKey];

/* ---- URL handling ---- */
$clear = isset($_POST['clear']) || isset($_GET['clear']);
$rawUrl = trim((string)($_POST['url'] ?? $_GET['url'] ?? ''));

if ($clear) {
    $url = '';
    unset($_SESSION['url']);
} elseif ($rawUrl !== '') {
    $url = normalize_url($rawUrl);
    $_SESSION['url'] = $url;
} else {
    $url = (string)($_SESSION['url'] ?? '');
}

$hasUrl = ($url !== '');
$frameW = (int)$device['w'];
$frameH = (int)$device['h'];

/* ---- Grouped device list for the dropdown ---- */
$deviceGroups = [
    'Android'      => ['pixel_8_pro','pixel_8','pixel_7','pixel_tablet','galaxy_s24_ultra','galaxy_s23','galaxy_a54','oneplus_12','xiaomi_14','nothing_phone_2'],
    'iOS / iPadOS' => ['iphone_15_pro_max','iphone_15','iphone_14','iphone_se','ipad_pro'],
    'Desktop'      => ['macbook_air','windows_11','windows_10','ubuntu_desktop','chromeos_flex'],
];

/* ---- Suggested URLs shown on the empty state ---- */
$suggestions = [
    'https://example.com',
    'https://www.wikipedia.org',
    'https://httpbin.org/html',
    'https://web.telegram.org/a/',
    'https://www.google.com',
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#0a0e1a">
<meta name="referrer" content="no-referrer">
<meta name="robots" content="noindex, nofollow">
<title>CloudSpace — Device Emulation Platform</title>
<style>
/* ══════════════════════════════════════════════════════════════════
   RESET & ROOT
   ══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0e1a;
  --bg-2:#0d1220;
  --panel:#111827;
  --panel-2:#16223a;
  --line:#1f2937;
  --line-2:#2b3a5c;
  --text:#f1f5f9;
  --muted:#94a3b8;
  --muted-2:#64748b;
  --accent:#3b82f6;
  --accent-2:#06b6d4;
  --green:#10b981;
  --amber:#f59e0b;
  --red:#ef4444;
  --radius:12px;
  --shadow:0 20px 50px rgba(0,0,0,.5);
  --sidebar-w:280px;
}
html,body{height:100%;overflow:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:14px;line-height:1.5;color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit;outline:none}
input,select{font-family:inherit;font-size:inherit;outline:none}
a{color:var(--accent);text-decoration:none}
code,.mono{font-family:'SF Mono',Consolas,Monaco,'Courier New',monospace}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#26324d;border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#33415f}

/* ══════════════════════════════════════════════════════════════════
   APP LAYOUT
   ══════════════════════════════════════════════════════════════════ */
.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  height:100vh;width:100vw;
}

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════════ */
.sidebar{
  background:linear-gradient(180deg,#0b101d,#070a13);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  height:100vh;overflow:hidden;
}
.sb-header{
  padding:18px 18px 16px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:11px;
}
.brand-mark{
  width:40px;height:40px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(59,130,246,.4);
}
.brand-mark svg{width:22px;height:22px;color:#fff}
.brand-name{
  font-weight:800;font-size:16px;letter-spacing:-.3px;
  background:linear-gradient(135deg,#fff,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand-sub{
  font-size:10px;color:var(--muted);letter-spacing:.15em;
  text-transform:uppercase;font-weight:600;margin-top:1px;
}
.sb-section{padding:14px 14px 6px}
.section-label{
  font-size:10px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted-2);font-weight:700;
  padding:0 6px 8px;display:flex;justify-content:space-between;align-items:center;
}

/* Device picker dropdown */
.device-picker{position:relative;margin:0 6px}
.device-picker-btn{
  width:100%;padding:11px 13px;
  background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:11px;display:flex;align-items:center;gap:10px;
  text-align:left;transition:.15s;
}
.device-picker-btn:hover{border-color:var(--accent);filter:brightness(1.08)}
.device-picker-btn .dp-icon{font-size:22px;flex-shrink:0}
.device-picker-btn .dp-info{flex:1;min-width:0}
.device-picker-btn .dp-name{
  font-weight:600;font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.device-picker-btn .dp-meta{
  font-size:10.5px;color:var(--muted);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.device-picker-btn .dp-chevron{
  color:var(--muted);font-size:11px;transition:transform .2s;
}
.device-picker.open .device-picker-btn .dp-chevron{transform:rotate(180deg)}
.device-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--panel);border:1px solid var(--line-2);
  border-radius:12px;box-shadow:var(--shadow);
  max-height:400px;overflow-y:auto;
  z-index:100;display:none;padding:6px;
}
.device-picker.open .device-dropdown{display:block;animation:ddIn .18s ease}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.device-cat{
  font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted-2);font-weight:700;padding:8px 10px 5px;
}
.device-opt{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:9px;cursor:pointer;
  transition:.12s;border:1px solid transparent;text-align:left;width:100%;
}
.device-opt:hover{background:var(--panel-2);border-color:var(--line-2)}
.device-opt.active{
  background:linear-gradient(135deg,rgba(59,130,246,.16),transparent);
  border-color:rgba(59,130,246,.45);
}
.device-opt .do-icon{font-size:18px;flex-shrink:0}
.device-opt .do-info{flex:1;min-width:0}
.device-opt .do-name{font-size:12.5px;font-weight:600;line-height:1.25}
.device-opt .do-meta{font-size:10.5px;color:var(--muted);margin-top:1px}

/* UA card */
.ua-card{
  margin:0 6px;padding:12px;
  background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:11px;
}
.ua-card .ua-label{
  font-size:10.5px;color:var(--muted);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:7px;
}
.ua-card .ua-label button{
  font-size:10.5px;color:var(--accent);font-weight:600;
  padding:2px 6px;border-radius:5px;letter-spacing:0;text-transform:none;
}
.ua-card .ua-label button:hover{background:rgba(59,130,246,.1)}
.ua-card .ua-text{
  font-family:'SF Mono',Consolas,Monaco,monospace;
  font-size:10.5px;line-height:1.55;color:var(--accent-2);
  word-break:break-all;
  max-height:100px;overflow-y:auto;
  padding-right:4px;
}
.device-meta{
  margin:10px 6px 0;
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
}
.device-meta .dm-item{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:9px;padding:8px 10px;
}
.device-meta .dm-key{
  font-size:9.5px;color:var(--muted-2);
  text-transform:uppercase;letter-spacing:.08em;font-weight:700;
}
.device-meta .dm-val{
  font-size:11.5px;font-weight:600;margin-top:2px;
  font-family:'SF Mono',Consolas,monospace;
}
.sb-footer{
  margin-top:auto;padding:14px 18px;
  border-top:1px solid var(--line);
  font-size:11px;color:var(--muted-2);line-height:1.7;
}
.sb-footer .status-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:6px;
}
.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:99px;
  font-size:10.5px;font-weight:600;
  background:var(--panel-2);border:1px solid var(--line-2);
  color:var(--muted);
}
.pill.live{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.35);color:var(--green)}
.pill.live::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;animation:pulse 1.6s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ══════════════════════════════════════════════════════════════════
   MAIN AREA
   ══════════════════════════════════════════════════════════════════ */
.main{display:flex;flex-direction:column;height:100vh;overflow:hidden;min-width:0}

.topbar{
  height:60px;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:0 22px;
  border-bottom:1px solid var(--line);
  background:rgba(10,14,26,.75);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.topbar-left{display:flex;align-items:center;gap:14px;min-width:0}
.topbar h1{
  font-size:15.5px;font-weight:700;letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar .subtitle{
  font-size:11.5px;color:var(--muted);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-btn{
  width:36px;height:36px;border-radius:9px;
  display:grid;place-items:center;
  color:var(--muted);transition:.12s;
  flex-shrink:0;font-size:15px;
}
.nav-btn:hover{background:var(--panel-2);color:var(--text)}
.nav-btn:disabled{opacity:.35;cursor:not-allowed}

.urlbar{
  height:56px;flex-shrink:0;
  display:flex;align-items:center;gap:10px;
  padding:0 22px;
  border-bottom:1px solid var(--line);
  background:rgba(8,11,20,.55);
}
.url-form{
  flex:1;display:flex;align-items:center;min-width:0;
  background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:11px;padding:0 4px 0 14px;height:40px;
  transition:.15s;
}
.url-form:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.url-form .lock{font-size:13px;margin-right:8px;flex-shrink:0;color:var(--muted)}
.url-form input{
  flex:1;background:transparent;border:0;color:var(--text);
  padding:10px 0;font-size:13.5px;min-width:0;
}
.url-form input::placeholder{color:var(--muted-2)}
.url-go{
  padding:0 16px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),#2563eb);
  color:#fff;font-weight:600;font-size:12.5px;
  display:grid;place-items:center;flex-shrink:0;
  transition:.15s;
}
.url-go:hover{filter:brightness(1.1)}

/* Viewport */
.viewport{
  flex:1;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:
    radial-gradient(1000px 600px at 50% 0%,rgba(59,130,246,.06),transparent 60%),
    repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(59,130,246,.03) 40px),
    repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(59,130,246,.03) 40px);
}

/* Device frame */
.device-frame{
  position:relative;background:#000;
  border-radius:44px;padding:12px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.65),
    0 0 0 2px #1a1a1a,
    inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .2s;
  flex-shrink:0;
  transform-origin:center center;
}
.device-frame.desktop{
  border-radius:14px;padding:14px 14px 0;
  background:linear-gradient(180deg,#1a1f2e,#0d1220);
}
.device-frame.desktop::after{
  content:"";position:absolute;bottom:-22px;left:50%;
  transform:translateX(-50%);
  width:120px;height:22px;
  background:linear-gradient(180deg,#1a1f2e,#0d1220);
  border-radius:0 0 10px 10px;
  box-shadow:0 12px 24px rgba(0,0,0,.5);
}
.device-screen{
  position:relative;background:#fff;overflow:hidden;
  border-radius:32px;
  display:flex;flex-direction:column;
}
.device-frame.desktop .device-screen{border-radius:0}

/* Notch */
.notch{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:100px;height:26px;background:#000;
  border-radius:16px;z-index:5;
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
}
.notch::after{
  content:"";width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#1e293b,#0a0f1a);
  box-shadow:inset 0 0 3px rgba(255,255,255,.15);
}
.notch.punch{
  width:12px;height:12px;top:14px;padding:0;
  border-radius:50%;
}
.notch.punch::after{display:none}
.notch.bezel{
  width:70px;height:5px;top:6px;
  border-radius:3px;background:#1a1a1a;padding:0;
}
.notch.bezel::after{display:none}
.notch.none{display:none}

/* Status bar */
.status-bar{
  height:48px;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;
  background:transparent;color:#000;
  font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums;
  position:relative;z-index:4;pointer-events:none;
}
.status-bar.android{height:38px;font-size:12px;font-weight:500}
.status-bar .sb-right{display:flex;align-items:center;gap:6px}
.battery-icon{
  width:24px;height:12px;border:1.5px solid currentColor;
  border-radius:3px;position:relative;opacity:.9;
}
.battery-icon::before{
  content:"";position:absolute;top:1.5px;left:1.5px;bottom:1.5px;
  width:85%;background:currentColor;border-radius:1px;
}
.battery-icon::after{
  content:"";position:absolute;top:50%;right:-4px;
  transform:translateY(-50%);width:2.5px;height:5px;
  border-radius:0 2px 2px 0;background:currentColor;
}
.signal-bars{
  display:inline-flex;align-items:flex-end;gap:1.5px;height:11px;
}
.signal-bars i{width:2.5px;background:currentColor;border-radius:1px}
.signal-bars i:nth-child(1){height:3px}
.signal-bars i:nth-child(2){height:5px}
.signal-bars i:nth-child(3){height:7px}
.signal-bars i:nth-child(4){height:9px}

/* Frame content */
.frame-wrap{flex:1;position:relative;background:#fff;overflow:hidden}
.frame-wrap iframe{
  width:100%;height:100%;border:0;display:block;
  background:#fff;
}

/* Empty state */
.empty-state{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#f8fafc,#e2e8f0);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:32px;text-align:center;gap:14px;
  color:#334155;
}
.empty-state .ei{font-size:52px;opacity:.6}
.empty-state h3{font-size:16px;font-weight:700;color:#0f172a}
.empty-state p{font-size:12.5px;color:#64748b;max-width:340px;line-height:1.6}
.empty-state .suggestions{
  display:flex;gap:7px;flex-wrap:wrap;justify-content:center;
  margin-top:6px;max-width:400px;
}
.empty-state .suggestions button{
  padding:6px 12px;border-radius:99px;
  background:#fff;border:1px solid #cbd5e1;
  font-size:11.5px;font-weight:500;color:#475569;
  transition:.15s;
}
.empty-state .suggestions button:hover{
  border-color:var(--accent);color:var(--accent);
  background:#eff6ff;
}
.empty-state .hint{
  font-size:10.5px;color:#94a3b8;margin-top:10px;
  max-width:400px;line-height:1.6;
}
.empty-state .hint code{
  background:#e2e8f0;padding:1px 5px;
  border-radius:4px;font-size:10px;color:#475569;
}

/* Blocked overlay */
.blocked{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#1a1f2e,#0d1220);
  display:none;flex-direction:column;
  align-items:center;justify-content:center;
  padding:32px;text-align:center;gap:16px;
}
.blocked.show{display:flex}
.blocked .bi{font-size:48px;opacity:.85}
.blocked h4{color:#fff;font-size:16px;font-weight:700;max-width:300px}
.blocked p{color:var(--muted);font-size:12.5px;line-height:1.65;max-width:360px}
.blocked p code{
  background:rgba(255,255,255,.08);padding:2px 6px;
  border-radius:4px;font-size:11px;color:var(--accent-2);
}
.blocked .bo-btn{
  padding:10px 18px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),#2563eb);
  color:#fff;font-weight:600;font-size:13px;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 8px 22px rgba(59,130,246,.35);
  transition:.15s;margin-top:6px;
}
.blocked .bo-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}

/* Loading bar */
.loading-bar{
  position:absolute;top:0;left:0;right:0;height:3px;
  overflow:hidden;z-index:15;pointer-events:none;
}
.loading-bar::after{
  content:"";position:absolute;
  top:0;left:-40%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,var(--accent-2),transparent);
  animation:lb 1.2s ease-in-out infinite;
}
@keyframes lb{0%{left:-40%}100%{left:100%}}
.loading-bar.hidden{display:none}

/* Home button */
.home-btn{
  width:44px;height:5px;border-radius:3px;
  background:#334155;margin:6px auto 2px;
  cursor:pointer;transition:.15s;
}
.home-btn:hover{background:#475569}

/* Fullscreen mode */
body.fs .sidebar{display:none}
body.fs .topbar{display:none}
body.fs .urlbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,14,26,.92);
}
body.fs .app{grid-template-columns:1fr}
body.fs .viewport{padding-top:80px}

/* Toasts */
.toasts{
  position:fixed;top:20px;right:20px;
  z-index:2000;display:flex;flex-direction:column;gap:10px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  min-width:240px;max-width:360px;
  padding:12px 16px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line-2);
  border-left:3px solid var(--accent);
  box-shadow:var(--shadow);
  animation:ti .28s ease;font-size:13px;
}
.toast.success{border-left-color:var(--green)}
.toast.error{border-left-color:var(--red)}
.toast.warn{border-left-color:var(--amber)}
.toast .tt{font-weight:700;margin-bottom:2px}
.toast .ts{color:var(--muted);font-size:11.5px;line-height:1.45}
.toast.out{animation:to .25s ease forwards}
@keyframes ti{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes to{to{opacity:0;transform:translateX(30px)}}

/* Responsive */
.mobile-menu{display:none}
.sb-backdrop{display:none}
@media (max-width:900px){
  :root{--sidebar-w:0px}
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:290px;
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,.6,.3,1);
    z-index:200;
  }
  .sidebar.open{transform:none}
  .sb-backdrop{
    display:block;position:fixed;inset:0;
    background:rgba(4,7,15,.72);z-index:150;
    opacity:0;visibility:hidden;transition:.25s;
  }
  .sb-backdrop.open{opacity:1;visibility:visible}
  .mobile-menu{display:grid}
  .topbar{padding:0 14px}
  .urlbar{padding:0 14px}
  .viewport{padding:14px}
}
</style>
</head>
<body>

<div class="app">
  <!-- ══════════════ SIDEBAR ══════════════ -->
  <aside class="sidebar" id="sidebar">
    <div class="sb-header">
      <div class="brand-mark">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 2L4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z"/>
        </svg>
      </div>
      <div>
        <div class="brand-name">CloudSpace</div>
        <div class="brand-sub">Device Emulator</div>
      </div>
    </div>

    <div class="sb-section">
      <div class="section-label">Select Device</div>
      <div class="device-picker" id="devicePicker">
        <button type="button" class="device-picker-btn" id="devicePickerBtn">
          <span class="dp-icon"><?= e($device['icon']) ?></span>
          <span class="dp-info">
            <span class="dp-name"><?= e($device['brand'] . ' ' . $device['model']) ?></span>
            <span class="dp-meta"><?= e($device['os']) ?> · <?= (int)$device['w'] ?>×<?= (int)$device['h'] ?></span>
          </span>
          <span class="dp-chevron">▼</span>
        </button>
        <div class="device-dropdown" id="deviceDropdown">
          <?php foreach ($deviceGroups as $groupName => $keys): ?>
            <div class="device-cat"><?= e($groupName) ?></div>
            <?php foreach ($keys as $k): if (!isset($DEVICES[$k])) continue; $d = $DEVICES[$k]; $active = ($k === $deviceKey); ?>
              <button type="button" class="device-opt<?= $active ? ' active' : '' ?>" data-device="<?= e($k) ?>">
                <span class="do-icon"><?= e($d['icon']) ?></span>
                <span class="do-info">
                  <span class="do-name"><?= e($d['brand'] . ' ' . $d['model']) ?></span>
                  <span class="do-meta"><?= e($d['os']) ?> · <?= (int)$d['w'] ?>×<?= (int)$d['h'] ?></span>
                </span>
              </button>
            <?php endforeach; ?>
          <?php endforeach; ?>
        </div>
      </div>
    </div>

    <div class="device-meta">
      <div class="dm-item">
        <div class="dm-key">Viewport</div>
        <div class="dm-val"><?= (int)$device['w'] ?>×<?= (int)$device['h'] ?></div>
      </div>
      <div class="dm-item">
        <div class="dm-key">Platform</div>
        <div class="dm-val"><?= e($device['os']) ?></div>
      </div>
    </div>

    <div class="sb-section">
      <div class="section-label">Target User-Agent</div>
      <div class="ua-card">
        <div class="ua-label">
          <span><?= e($device['tag']) ?></span>
          <button type="button" id="copyUa">Copy</button>
        </div>
        <div class="ua-text" id="uaText"><?= e($device['ua']) ?></div>
      </div>
    </div>

    <div class="sb-footer">
      <div class="status-row">
        <span class="pill live">● Online</span>
        <span>v1.0</span>
      </div>
      <div>Session persists in browser.</div>
    </div>
  </aside>

  <div class="sb-backdrop" id="sbBackdrop"></div>

  <!-- ══════════════ MAIN ══════════════ -->
  <main class="main">
    <header class="topbar">
      <div class="topbar-left">
        <button class="nav-btn mobile-menu" id="menuBtn" title="Menu">☰</button>
        <div style="min-width:0">
          <h1><?= e($device['brand'] . ' ' . $device['model']) ?></h1>
          <div class="subtitle"><?= $hasUrl ? e(display_host($url)) : 'Ready — enter a URL to begin' ?></div>
        </div>
      </div>
      <div class="topbar-right">
        <button class="nav-btn" id="homeBtn" title="Home">⌂</button>
        <button class="nav-btn" id="fullscreenBtn" title="Fullscreen">⛶</button>
      </div>
    </header>

    <form class="urlbar" method="POST" id="urlForm" autocomplete="off">
      <input type="hidden" name="device" value="<?= e($deviceKey) ?>">
      <button type="button" class="nav-btn" id="clearBtn" title="Clear">✕</button>
      <div class="url-form">
        <span class="lock"><?= $hasUrl && strpos($url, 'https://') === 0 ? '🔒' : '🌐' ?></span>
        <input type="text" name="url" id="urlInput"
               placeholder="Enter URL or search…"
               value="<?= e($url) ?>"
               spellcheck="false">
        <button type="submit" class="url-go">Go</button>
      </div>
      <button type="button" class="nav-btn" id="externalBtn" title="Open in new tab"<?= $hasUrl ? '' : ' disabled' ?>>↗</button>
    </form>

    <div class="viewport" id="viewport">
      <div class="device-frame<?= !empty($device['desktop']) ? ' desktop' : '' ?>" id="deviceFrame">
        <?php if (!empty($device['notch']) && $device['notch'] !== 'none'): ?>
          <div class="notch <?= e($device['notch']) ?>"></div>
        <?php endif; ?>

        <div class="device-screen" style="width:<?= (int)$frameW ?>px;height:<?= (int)$frameH ?>px">
          <div class="loading-bar<?= $hasUrl ? '' : ' hidden' ?>" id="loadingBar"></div>

          <?php if (empty($device['desktop'])): ?>
            <div class="status-bar<?= strpos($device['os'], 'Android') === 0 ? ' android' : '' ?>">
              <span id="statusTime">—:—</span>
              <span class="sb-right">
                <span class="signal-bars"><i></i><i></i><i></i><i></i></span>
                <span style="font-size:10.5px">5G</span>
                <span class="battery-icon"></span>
              </span>
            </div>
          <?php endif; ?>

          <div class="frame-wrap" id="frameWrap">
            <?php if ($hasUrl): ?>
              <iframe id="frame" src="<?= e($url) ?>"
                      sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-modals"
                      referrerpolicy="no-referrer"></iframe>
            <?php else: ?>
              <div class="empty-state" id="emptyState">
                <div class="ei">🌐</div>
                <h3>Enter a URL to begin</h3>
                <p>Type a web address above, or try one of these:</p>
                <div class="suggestions">
                  <?php foreach ($suggestions as $s): ?>
                    <button type="button" data-url="<?= e($s) ?>"><?= e(display_host($s)) ?></button>
                  <?php endforeach; ?>
                </div>
                <p class="hint">Some sites (<code>Google</code>, <code>Telegram</code>, <code>Facebook</code>) send <code>X-Frame-Options</code> and block embedding. Those will show a fallback "Open in new tab" button.</p>
              </div>
            <?php endif; ?>
            <div class="blocked" id="blocked">
              <div class="bi">🔒</div>
              <h4>This site can't be embedded</h4>
              <p>The site sent <code>X-Frame-Options: DENY</code> or a restrictive <code>Content-Security-Policy</code> header, so it refuses to load inside a frame.</p>
              <button type="button" class="bo-btn" id="openExternal">↗ Open in new tab</button>
            </div>
          </div>
        </div>

        <?php if (empty($device['desktop'])): ?>
          <div class="home-btn" id="homeBtn2" title="Home"></div>
        <?php endif; ?>
      </div>
    </div>
  </main>
</div>

<div class="toasts" id="toasts"></div>

<script>
"use strict";
(function(){
  const $  = (s, r) => (r || document).querySelector(s);
  const $$ = (s, r) => Array.from((r || document).querySelectorAll(s));

  /* ─── Toast notifications ─────────────────────────────── */
  function toast(title, sub, kind, ms){
    const el = document.createElement("div");
    el.className = "toast" + (kind ? " " + kind : "");
    el.innerHTML = '<div class="tt">' + title + '</div>' +
                   (sub ? '<div class="ts">' + sub + '</div>' : '');
    $("#toasts").appendChild(el);
    setTimeout(() => {
      el.classList.add("out");
      setTimeout(() => el.remove(), 260);
    }, ms || 2600);
  }

  /* ─── Device picker ───────────────────────────────────── */
  const picker = $("#devicePicker");
  const pickerBtn = $("#devicePickerBtn");
  if (pickerBtn) {
    pickerBtn.addEventListener("click", (e) => {
      e.stopPropagation();
      picker.classList.toggle("open");
    });
  }
  document.addEventListener("click", (e) => {
    if (!e.target.closest("#devicePicker")) picker.classList.remove("open");
  });

  /* Device option → build hidden form and submit */
  $$(".device-opt").forEach(btn => {
    btn.addEventListener("click", () => {
      const key = btn.dataset.device;
      const form = document.createElement("form");
      form.method = "POST";
      form.style.display = "none";
      const dInput = document.createElement("input");
      dInput.type = "hidden"; dInput.name = "device"; dInput.value = key;
      form.appendChild(dInput);
      const uInput = document.createElement("input");
      uInput.type = "hidden"; uInput.name = "url";
      uInput.value = ($("#urlInput")?.value || "");
      form.appendChild(uInput);
      document.body.appendChild(form);
      form.submit();
    });
  });

  /* ─── Live clock in status bar ────────────────────────── */
  function tick(){
    const d = new Date();
    const t = String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
    const el = $("#statusTime");
    if (el) el.textContent = t;
  }
  tick();
  setInterval(tick, 20000);

  /* ─── Auto-fit device frame into viewport ─────────────── */
  function fitFrame(){
    const frame = $("#deviceFrame");
    const vp = $("#viewport");
    if (!frame || !vp) return;
    frame.style.transform = "scale(1)";
    const fw = frame.offsetWidth;
    const fh = frame.offsetHeight;
    if (fw === 0 || fh === 0) return;
    const vw = vp.clientWidth - 48;
    const vh = vp.clientHeight - 48;
    const scale = Math.min(1, vw / fw, vh / fh);
    if (scale < 1) {
      frame.style.transform = "scale(" + scale.toFixed(4) + ")";
    }
  }
  window.addEventListener("resize", fitFrame);
  window.addEventListener("load", fitFrame);
  setTimeout(fitFrame, 60);
  setTimeout(fitFrame, 300);

  /* ─── Copy UA button ──────────────────────────────────── */
  const copyBtn = $("#copyUa");
  if (copyBtn) {
    copyBtn.addEventListener("click", () => {
      const text = $("#uaText").textContent;
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).then(
          () => toast("Copied", "User-Agent copied", "success", 1600),
          () => fallbackCopy(text)
        );
      } else {
        fallbackCopy(text);
      }
    });
  }
  function fallbackCopy(text){
    const ta = document.createElement("textarea");
    ta.value = text;
    ta.style.position = "fixed";
    ta.style.left = "-9999px";
    document.body.appendChild(ta);
    ta.select();
    try {
      document.execCommand("copy");
      toast("Copied", "User-Agent copied", "success", 1600);
    } catch (_) {
      toast("Copy failed", "Select text manually", "warn", 2000);
    }
    ta.remove();
  }

  /* ─── Suggestion chips → load URL ─────────────────────── */
  $$("[data-url]").forEach(btn => {
    btn.addEventListener("click", () => {
      const inp = $("#urlInput");
      if (inp) {
        inp.value = btn.dataset.url;
        $("#urlForm").submit();
      }
    });
  });

  /* ─── Clear URL ───────────────────────────────────────── */
  const clearBtn = $("#clearBtn");
  if (clearBtn) {
    clearBtn.addEventListener("click", () => {
      const form = $("#urlForm");
      const h = document.createElement("input");
      h.type = "hidden"; h.name = "clear"; h.value = "1";
      form.appendChild(h);
      form.submit();
    });
  }

  /* ─── Home buttons ────────────────────────────────────── */
  function goHome(){
    const form = $("#urlForm");
    const h = document.createElement("input");
    h.type = "hidden"; h.name = "clear"; h.value = "1";
    form.appendChild(h);
    form.submit();
  }
  const h1 = $("#homeBtn"); if (h1) h1.addEventListener("click", goHome);
  const h2 = $("#homeBtn2"); if (h2) h2.addEventListener("click", goHome);

  /* ─── Open externally ─────────────────────────────────── */
  const currentUrl = <?= json_encode($hasUrl ? $url : '') ?>;
  function openExternal(){
    if (currentUrl) window.open(currentUrl, "_blank", "noopener,noreferrer");
  }
  const ext1 = $("#externalBtn"); if (ext1) ext1.addEventListener("click", openExternal);
  const ext2 = $("#openExternal"); if (ext2) ext2.addEventListener("click", openExternal);

  /* ─── Iframe blocked detection ────────────────────────── */
  const iframe = $("#frame");
  const blocked = $("#blocked");
  const loadingBar = $("#loadingBar");
  if (iframe) {
    let loaded = false;
    iframe.addEventListener("load", () => {
      loaded = true;
      if (loadingBar) loadingBar.classList.add("hidden");
      let looksBlocked = false;
      try {
        const doc = iframe.contentDocument;
        if (doc && doc.body) {
          const html = (doc.body.innerHTML || "").trim();
          if (html.length < 40) looksBlocked = true;
        }
      } catch (_) {
        looksBlocked = false;
      }
      if (blocked) {
        if (looksBlocked) blocked.classList.add("show");
        else blocked.classList.remove("show");
      }
    });
    setTimeout(() => {
      if (!loaded) {
        if (loadingBar) loadingBar.classList.add("hidden");
        if (blocked) blocked.classList.add("show");
      }
    }, 6000);
  }

  /* ─── Fullscreen ──────────────────────────────────────── */
  const fsBtn = $("#fullscreenBtn");
  if (fsBtn) {
    fsBtn.addEventListener("click", () => {
      if (!document.fullscreenElement) {
        const el = document.documentElement;
        if (el.requestFullscreen) el.requestFullscreen().catch(() => {});
        else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
      } else {
        if (document.exitFullscreen) document.exitFullscreen();
        else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
      }
    });
    document.addEventListener("fullscreenchange", () => {
      document.body.classList.toggle("fs", !!document.fullscreenElement);
      setTimeout(fitFrame, 120);
    });
  }

  /* ─── Mobile sidebar ──────────────────────────────────── */
  const menuBtn = $("#menuBtn");
  const sb = $("#sidebar");
  const sbBackdrop = $("#sbBackdrop");
  if (menuBtn && sb && sbBackdrop) {
    menuBtn.addEventListener("click", () => {
      sb.classList.toggle("open");
      sbBackdrop.classList.toggle("open");
    });
    sbBackdrop.addEventListener("click", () => {
      sb.classList.remove("open");
      sbBackdrop.classList.remove("open");
    });
  }

  /* ─── Keyboard shortcuts ──────────────────────────────── */
  document.addEventListener("keydown", (e) => {
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "l") {
      e.preventDefault();
      const u = $("#urlInput");
      if (u) { u.focus(); u.select(); }
    }
    if (e.key === "Escape") picker.classList.remove("open");
  });

  /* ─── URL input focus select ──────────────────────────── */
  const urlInput = $("#urlInput");
  if (urlInput) {
    urlInput.addEventListener("focus", () => urlInput.select());
  }
})();
</script>
</body>
</html>