/* ============================================================================
   responsive-analyzer.css — Responsive Website Analyzer view.
   Token-only: every colour/radius/space comes from tokens.css, so the whole
   view themes correctly in light AND dark with no per-theme overrides.
   No inline styles are used in the markup; everything is a class here.
   ========================================================================= */

.ra-wrap { padding: var(--space-6) var(--space-6) var(--space-10); }

/* `display:grid/flex/block` below would otherwise beat the UA [hidden] rule and
   leave the workspace visible underneath the empty state. Keep hidden honest. */
#view-respanalyzer [hidden] { display: none !important; }

/* ---------------------------------------------------------------- empty ---- */
.ra-hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-10); align-items: center;
  padding: var(--space-10) var(--space-8);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: var(--card); box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.ra-hero::after {
  content: ""; position: absolute; inset: auto -120px -160px auto;
  width: 420px; height: 420px; pointer-events: none;
  background: radial-gradient(circle, rgba(124, 92, 252, 0.18), transparent 70%);
  filter: blur(40px);
}
.ra-hero-copy { position: relative; z-index: 1; min-width: 0; }

.ra-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--purple-bright);
  background: rgba(124, 92, 252, 0.12);
  border: 1px solid rgba(124, 92, 252, 0.30);
  padding: 5px 12px; border-radius: var(--radius-pill);
}
.ra-eyebrow svg { width: 14px; height: 14px; }

.ra-h1 {
  font-family: var(--font-heading); font-size: 42px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.08;
  color: var(--text); margin: var(--space-5) 0 var(--space-3);
}
.ra-h1 em {
  font-style: normal;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ra-sub {
  font-size: 15px; line-height: 1.6; color: var(--text-3);
  margin: 0 0 var(--space-6); max-width: 52ch;
}

/* URL form ---------------------------------------------------------------- */
.ra-urlform { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ra-input {
  flex: 1; min-width: 220px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 13px 16px; font-family: var(--font); font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.ra-input::placeholder { color: var(--muted-soft); }
.ra-input:focus {
  outline: none; border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.18);
}
.ra-run {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--gradient); color: #fff; border: 0;
  border-radius: var(--radius); padding: 13px 22px;
  font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(124, 92, 252, 0.8);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.ra-run:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(124, 92, 252, 0.9); }
.ra-run[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.ra-run svg { width: 16px; height: 16px; }
.ra-hint { font-size: 12.5px; color: var(--muted); margin: var(--space-3) 0 0; }
.ra-err {
  margin: var(--space-3) 0 0; font-size: 13px; color: var(--red);
  background: rgba(245, 101, 101, 0.10); border: 1px solid rgba(245, 101, 101, 0.30);
  border-radius: var(--radius-sm); padding: 10px 14px;
}
.ra-err[hidden] { display: none; }

/* ------------------------------------------------- animated illustration --- */
.ra-hero-art { position: relative; z-index: 1; display: flex; justify-content: center; }
.ra-art { width: 100%; max-width: 440px; height: auto; overflow: visible; }

.ra-art .ra-float-a { animation: ra-float 7s ease-in-out infinite; }
.ra-art .ra-float-b { animation: ra-float 8.5s ease-in-out infinite reverse; }
.ra-art .ra-scan { animation: ra-scan 3.6s cubic-bezier(.4, 0, .2, 1) infinite; }
.ra-art .ra-pulse { animation: ra-pulse 2.4s ease-in-out infinite; transform-origin: center; }
.ra-art .ra-pulse-2 { animation: ra-pulse 2.4s ease-in-out .5s infinite; transform-origin: center; }
.ra-art .ra-pulse-3 { animation: ra-pulse 2.4s ease-in-out 1s infinite; transform-origin: center; }
.ra-art .ra-draw { stroke-dasharray: 180; stroke-dashoffset: 180; animation: ra-draw 3.2s ease-in-out infinite; }
.ra-art .ra-draw-2 { stroke-dasharray: 150; stroke-dashoffset: 150; animation: ra-draw 3.2s ease-in-out .6s infinite; }
.ra-art .ra-bar { transform-origin: left center; animation: ra-bar 3s ease-in-out infinite; }
.ra-art .ra-bar-2 { transform-origin: left center; animation: ra-bar 3s ease-in-out .35s infinite; }
.ra-art .ra-bar-3 { transform-origin: left center; animation: ra-bar 3s ease-in-out .7s infinite; }

@keyframes ra-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ra-scan { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(104px); opacity: 0; } }
@keyframes ra-pulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes ra-draw { 0% { stroke-dashoffset: 180; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -180; } }
@keyframes ra-bar { 0%, 100% { transform: scaleX(.55); } 50% { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .ra-art * { animation: none !important; }
}

/* SVG part styling — kept here (not inline) so the illustration follows the
   active theme instead of hardcoding colours into the markup. */
.ra-art .ra-stop-1 { stop-color: var(--purple); }
.ra-art .ra-stop-2 { stop-color: var(--magenta); }
.ra-art .ra-glow { fill: rgba(124, 92, 252, 0.13); }
.ra-art .ra-win { fill: var(--panel); stroke: var(--border-strong); stroke-width: 1.5; }
.ra-art .ra-line { stroke: var(--hairline); stroke-width: 1.5; }
.ra-art .ra-dot3 { fill: var(--muted-soft); opacity: .55; }
.ra-art .ra-addr { fill: var(--bg-2); }
.ra-art .ra-block { fill: url(#raGrad); opacity: .5; }
.ra-art .ra-blockb { fill: var(--purple); opacity: .16; }
.ra-art .ra-scanline { fill: var(--cyan); opacity: .75; }
.ra-art .ra-conn { stroke: var(--purple); stroke-width: 1.6; fill: none; opacity: .55; stroke-linecap: round; }
.ra-art .ra-nodec { fill: var(--magenta); }
.ra-art .ra-nodering { stroke: var(--magenta); stroke-width: 1.2; fill: none; opacity: .4; }

/* ------------------------------------------------------------ feature cards */
.ra-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  /* .ra-hero declares no margin of its own, so without a bottom margin here the
     card row butts straight up against the panel below it. */
  gap: var(--space-4); margin-top: var(--space-6); margin-bottom: var(--space-8);
}
.ra-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.ra-card:hover {
  transform: translateY(-3px); border-color: rgba(124, 92, 252, 0.35);
  box-shadow: var(--shadow-md);
}
.ra-card-ic {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(124, 92, 252, 0.12); color: var(--purple-bright);
  border: 1px solid rgba(124, 92, 252, 0.24); margin-bottom: var(--space-4);
}
.ra-card-ic svg { width: 19px; height: 19px; }
.ra-card h3 {
  font-family: var(--font-heading); font-size: 15px; font-weight: 700;
  color: var(--text); margin: 0 0 var(--space-2);
}
.ra-card p { font-size: 13px; line-height: 1.55; color: var(--text-3); margin: 0; }

/* ----------------------------------------------------------------- history */
.ra-hist { margin-top: var(--space-8); }
.ra-hist-h {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-size: 13px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text); margin-bottom: var(--space-4);
}
.ra-hist-h svg { width: 16px; height: 16px; color: var(--purple-bright); }
.ra-hist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.ra-hist-item {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-4);
  cursor: pointer; text-align: left; width: 100%;
  transition: border-color .15s, transform .15s;
}
.ra-hist-item:hover { border-color: rgba(124, 92, 252, 0.4); transform: translateY(-2px); }
.ra-hist-fav { width: 28px; height: 28px; border-radius: var(--radius-xs); flex: 0 0 auto; }
.ra-hist-meta { min-width: 0; flex: 1; display: block; }
.ra-hist-title, .ra-hist-url { display: block; }
.ra-skelwrap { flex: 1; min-width: 0; }
.ra-hist-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ra-hist-url { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-hist-score { font-family: var(--font-mono); font-size: 15px; font-weight: 800; flex: 0 0 auto; }

/* ------------------------------------------------------------- workspace --- */
/* align-items:start so a short preview (e.g. the blocked-embed card) does not
   stretch the left panel to match the tall analysis column. */
.ra-work { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }

.ra-panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; min-width: 0;
}
.ra-bar-top {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--hairline); flex-wrap: wrap;
}
.ra-urlchip {
  display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1;
  font-size: 12.5px; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill); padding: 7px 13px;
}
.ra-urlchip img { width: 16px; height: 16px; border-radius: 3px; flex: 0 0 auto; }
.ra-urlchip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* device segmented control — mirrors the topbar seg pattern */
.ra-seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 3px; }
.ra-seg button {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  color: var(--text-3); font-family: var(--font); font-size: 12px; font-weight: 600;
  padding: 7px 13px; border-radius: var(--radius-pill); transition: background .15s, color .15s;
}
.ra-seg button svg { width: 14px; height: 14px; }
.ra-seg button:hover { color: var(--text); }
.ra-seg button.on { background: var(--gradient); color: #fff; }

/* Toolbar buttons carry a text label beside the icon. They used to be
   icon-only, which left a bare "+" and a refresh glyph to be guessed at. */
.ra-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: 34px; height: 34px; flex: 0 0 auto; padding: 0 12px;
  background: var(--bg-2); color: var(--text-3);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 12px; font-weight: 600; line-height: 1;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.ra-iconbtn:hover { color: var(--purple-bright); border-color: rgba(124, 92, 252, 0.4); }
.ra-iconbtn svg { width: 16px; height: 16px; }

/* preview stage */
.ra-stage {
  flex: 1; display: flex; align-items: flex-start; justify-content: center;
  padding: var(--space-5); background: var(--bg-2); min-height: 460px; overflow: auto;
}
/* The device frame is sized in JS: the iframe is rendered at the REAL device
   width (so the site fires its true breakpoints) and then scaled down to fit
   the panel. Sizing the iframe to the panel instead would make a "Desktop"
   preview only ~700px wide, which triggers the site's tablet layout. */
.ra-device {
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); transition: width .3s cubic-bezier(.16, 1, .3, 1);
  max-width: 100%;
}
.ra-device-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--hairline); background: var(--bg-2);
}
.ra-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-soft); opacity: .5; }
.ra-dims {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--muted); letter-spacing: .04em; white-space: nowrap;
}
.ra-scaler { position: relative; overflow: hidden; background: var(--panel); }
.ra-frame { border: 0; display: block; background: #fff; transform-origin: top left; }

/* Shown when the framed site navigated somewhere the proxy could not follow. */
.ra-lost {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--hairline);
  background: rgba(245, 158, 11, 0.08);
  font-size: 12.5px; color: var(--text-2);
}
.ra-lost-btn {
  margin-left: auto; cursor: pointer; font-family: var(--font); font-size: 12px; font-weight: 700;
  color: var(--purple-bright); background: rgba(124, 92, 252, 0.12);
  border: 1px solid rgba(124, 92, 252, 0.35); border-radius: var(--radius-sm); padding: 7px 13px;
}
.ra-lost-btn:hover { background: rgba(124, 92, 252, 0.2); }

.ra-blocked { padding: var(--space-10) var(--space-6); text-align: center; }
.ra-blocked svg { width: 34px; height: 34px; color: var(--amber); margin-bottom: var(--space-3); }
.ra-blocked h4 { font-family: var(--font-heading); font-size: 15px; color: var(--text); margin: 0 0 var(--space-2); }
.ra-blocked p { font-size: 13px; color: var(--text-3); line-height: 1.6; margin: 0 auto var(--space-4); max-width: 44ch; }
.ra-blocked a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--purple-bright); text-decoration: none;
}

/* ------------------------------------------------------- analysis column --- */
.ra-right { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.ra-scorecard {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-6); border-bottom: 1px solid var(--hairline);
}
.ra-ring {
  position: relative; width: 92px; height: 92px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 27px; font-weight: 800;
  background: conic-gradient(currentColor calc(var(--pct, 0) * 1%), rgba(124, 92, 252, 0.14) 0);
}
.ra-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--panel); }
.ra-ring span { position: relative; line-height: 1; }
.ra-good { color: var(--green); }
.ra-mid { color: var(--amber); }
.ra-bad { color: var(--red); }
.ra-verdict { font-family: var(--font-heading); font-size: 17px; font-weight: 800; color: var(--text); margin: 0 0 var(--space-2); }
.ra-summary { font-size: 13px; line-height: 1.6; color: var(--text-3); margin: 0; }

.ra-sec { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--hairline); }
.ra-sec-h {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 var(--space-4);
}
.ra-sec-h svg { width: 14px; height: 14px; }
.ra-count {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  border-radius: var(--radius-pill); padding: 2px 8px; margin-left: auto;
}
.ra-count.crit { color: var(--red); background: rgba(245, 101, 101, 0.12); }
.ra-count.med { color: var(--amber); background: rgba(245, 158, 11, 0.12); }
.ra-count.sug { color: var(--cyan); background: rgba(6, 214, 245, 0.12); }

.ra-item { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--space-3); background: var(--bg-2); }
.ra-item:last-child { margin-bottom: 0; }
.ra-item-t { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.ra-item-d { font-size: 12.5px; line-height: 1.6; color: var(--text-3); }
.ra-item-fix { font-size: 12.5px; line-height: 1.6; color: var(--text-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--hairline); }
.ra-item pre, .ra-msg pre {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55;
  background: var(--bg); color: var(--text-2); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 11px 13px; margin: var(--space-2) 0 0;
  overflow-x: auto; white-space: pre;
}

/* ------------------------------------------------------------------ chat --- */
.ra-chat { display: flex; flex-direction: column; flex: 1; min-height: 320px; }
.ra-msgs { flex: 1; overflow-y: auto; padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); max-height: 420px; }
.ra-msg { font-size: 13px; line-height: 1.62; max-width: 92%; }
.ra-msg.me {
  align-self: flex-end; background: var(--gradient); color: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
  padding: 10px 14px;
}
.ra-msg.ai {
  align-self: flex-start; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs);
  padding: 12px 15px; white-space: pre-wrap;
}
.ra-msg code {
  font-family: var(--font-mono); font-size: 11.5px;
  background: rgba(124, 92, 252, 0.12); color: var(--purple-bright);
  border-radius: var(--radius-xs); padding: 1px 5px;
}
.ra-msg pre { white-space: pre; margin: var(--space-3) 0; }
.ra-msg pre code { background: none; padding: 0; color: inherit; }
.ra-msg.me code { background: rgba(255, 255, 255, 0.18); color: #fff; }
/* Starter prompts: one compact scrollable row instead of a wrapping block that
   ate half the panel. Hidden entirely once the conversation has started. */
.ra-chips {
  display: flex; gap: var(--space-2); padding: 0 var(--space-6) var(--space-3);
  overflow-x: auto; scrollbar-width: none;
}
.ra-chips::-webkit-scrollbar { display: none; }
.ra-chips[hidden] { display: none !important; }
.ra-chip {
  font-size: 11.5px; color: var(--text-3); cursor: pointer; white-space: nowrap; flex: 0 0 auto;
  background: var(--bg-2); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill); padding: 6px 12px;
  transition: color .15s, border-color .15s, background .15s;
}
.ra-chip:hover { color: var(--text); border-color: rgba(124, 92, 252, 0.45); background: rgba(124, 92, 252, 0.08); }

/* Typing indicator */
.ra-typing { display: inline-flex; align-items: center; gap: 5px; padding: 13px 16px; }
.ra-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--purple-bright);
  display: block; opacity: .4; animation: ra-dot 1.25s ease-in-out infinite;
}
.ra-typing i:nth-child(2) { animation-delay: .18s; }
.ra-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes ra-dot {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) { .ra-typing i { animation: none; } }
.ra-composer { display: flex; gap: var(--space-2); padding: var(--space-4) var(--space-6) var(--space-5); border-top: 1px solid var(--hairline); }
.ra-composer input {
  flex: 1; min-width: 0; background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 11px 16px; font-family: var(--font); font-size: 13px;
}
.ra-composer input:focus { outline: none; border-color: var(--purple); }
.ra-send {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto;
  background: var(--gradient); color: #fff; border: 0;
  border-radius: 50%; cursor: pointer;
}
.ra-send[disabled] { opacity: .5; cursor: not-allowed; }
.ra-send svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------- skeletons --- */
.ra-skel { border-radius: var(--radius-sm); background: linear-gradient(90deg, rgba(124, 92, 252, 0.06), rgba(124, 92, 252, 0.16), rgba(124, 92, 252, 0.06)); background-size: 200% 100%; animation: ra-shimmer 1.3s linear infinite; }
.ra-skel-line { height: 12px; margin-bottom: 10px; }
.ra-skel-line.w60 { width: 60%; }
.ra-skel-line.w80 { width: 80%; }
.ra-skel-ring { width: 92px; height: 92px; border-radius: 50%; }
@keyframes ra-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ra-skel { animation: none; } }

/* ------------------------------------------------------------ responsive --- */
@media (max-width: 1180px) {
  .ra-work { grid-template-columns: 1fr; }
  .ra-hero { grid-template-columns: 1fr; gap: var(--space-8); }
  .ra-hero-art { order: -1; }
  .ra-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ra-hist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ra-wrap { padding: var(--space-4); }
  .ra-hero { padding: var(--space-6) var(--space-5); }
  .ra-h1 { font-size: 30px; }
  .ra-cards, .ra-hist-grid { grid-template-columns: 1fr; }
  .ra-device.is-tablet, .ra-device.is-mobile { width: 100%; }
  .ra-stage { padding: var(--space-3); min-height: 320px; }
  .ra-frame { height: 460px; }
}