/* Shell shared by the two proxy pages. Replaces page-embed.css, search.css
   and page-calculus.css, which were three separate takes on the same screen.
   Load /css/ui.css first — this file styles with its tokens.

     embed.html    bare frame, no chrome   (--bar stays 0)
     calculus.html frame + address bar     (--bar: 64px)

   The only structural difference between them is whether a bar sits above the
   frame, so that offset is one variable rather than two copies of the layout. */

:root { --bar: 0px; }

html, body { height: 100%; overflow: hidden; }
body { background: var(--bg); }

.proxy-iframe {
  position: fixed;
  top: var(--bar);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--bar));
  border: 0;
  /* White, not the page background: most sites assume a white canvas and
     paint no background of their own. */
  background: #fff;
  z-index: 1;
}

/* ── Address bar ──────────────────────────────────────────── */
/* Floats like the sidebar's groups do, but unlike them it reserves its space
   (via --bar) instead of overlaying — an address bar that covered the top of
   every page you visited would be worse than no address bar. */

.proxy-bar {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 44px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
}

/* Hiding the bar zeroes --bar, so the frame grows into the space instead of
   leaving a gap where the bar was. Set on body, not :root, so it overrides the
   page's own :root value for everything inside. */
body.bar-hidden { --bar: 0px; }
body.bar-hidden .proxy-bar { display: none; }

.proxy-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--text-dim);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.proxy-btn:hover { background: var(--surface-hover); color: var(--text); }
.proxy-btn svg { width: 18px; height: 18px; }

/* The handle that brings a hidden bar back. It only exists while the bar is
   hidden, and it has to sit above the frame to be clickable at all. Faint
   until pointed at, so it doesn't nag over the top of the site. */
.proxy-reveal {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: none;
  place-items: center;
  width: 54px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--text-faint);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.14s ease, color 0.14s ease, height 0.14s ease;
}
body.bar-hidden .proxy-reveal { display: grid; }
.proxy-reveal:hover { opacity: 1; height: 24px; color: var(--text); }
.proxy-reveal svg { width: 15px; height: 15px; }

.proxy-url-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.proxy-lock {
  position: absolute;
  left: 12px;
  width: 14px;
  height: 14px;
  color: var(--text-faint);
  pointer-events: none;
}
.proxy-url {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 14px 0 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.proxy-url::placeholder { color: var(--text-faint); }
.proxy-url:focus {
  border-color: rgba(125, 211, 252, 0.5);
  background: rgba(0, 0, 0, 0.42);
}

/* ── Loading and empty states ─────────────────────────────── */

.loading-overlay,
.empty-state {
  position: fixed;
  top: var(--bar);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--bar));
  display: none;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(700px 400px at 30% 20%, rgba(125, 211, 252, 0.07), transparent 60%),
    radial-gradient(600px 400px at 70% 80%, rgba(167, 139, 250, 0.05), transparent 60%),
    var(--bg);
}
.loading-overlay { z-index: 20; transition: opacity 0.4s ease; }
.empty-state { z-index: 19; }

#loading-container,
.empty-content {
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
}

.loader {
  width: 44px;
  height: 44px;
  margin: 0 auto 22px;
  border: 3px solid rgba(125, 211, 252, 0.14);
  border-top-color: var(--sky);
  border-radius: 50%;
  animation: proxy-spin 0.8s linear infinite;
}
@keyframes proxy-spin { to { transform: rotate(360deg); } }

#theh1, .empty-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
#thep, .empty-subtitle {
  max-width: 46ch;
  margin: 0 auto;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
}

.loading-dots { display: inline-flex; gap: 4px; margin-left: 5px; vertical-align: middle; }
.loading-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sky);
  animation: proxy-dot 1.4s infinite ease-in-out;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes proxy-dot {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

.empty-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-raised);
}
.empty-icon svg { width: 30px; height: 30px; color: var(--sky); }

.empty-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .loader, .loading-dots span { animation: none; }
}

@media (max-width: 600px) {
  .proxy-bar { gap: 2px; }
  /* Forward is the least-used control; the URL needs the room more. */
  #forward-btn { display: none; }
}