@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Display";
  src: url("/fonts/RedHatDisplay-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

:root {
  --rf-bg: #0b0f14;
  --rf-card: #111820;
  --rf-card-soft: #151f2a;
  --rf-border: #263442;
  --rf-text: #f7fafc;
  --rf-muted: #9fb0c0;
  --rf-cyan: #00aeef;
  --rf-blue: #0066cc;
  --rf-green: #35d399;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--rf-text);
  background:
    radial-gradient(900px 560px at 85% -10%, rgba(0, 174, 239, .13), transparent 60%),
    radial-gradient(760px 520px at -10% 100%, rgba(0, 102, 204, .12), transparent 65%),
    var(--rf-bg);
  font-family: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
}

.rf-shell { width: min(1460px, calc(100% - 32px)); margin: 0 auto; padding: 16px 0 24px; }
.rf-header {
  display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 14px;
  padding: 12px 15px; border: 1px solid var(--rf-border); border-radius: 15px;
  background: rgba(17,24,32,.84); box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.rf-brand { display: flex; align-items: center; gap: 13px; }
.rf-mark {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px;
  background: linear-gradient(145deg, rgba(0,174,239,.2), rgba(0,102,204,.28));
  border: 1px solid rgba(0,174,239,.4); color: #7ddcff; font-weight: 900;
  overflow: hidden;
}
.rf-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rf-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.rf-subtitle { color: var(--rf-muted); font-size: .78rem; margin-top: 3px; }
.rf-header-actions { display: flex; align-items: center; gap: 10px; }
.rf-badge {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 7px 11px;
  color: #baf7dc; background: rgba(53,211,153,.09); border: 1px solid rgba(53,211,153,.28);
  font-size: .72rem; font-weight: 750;
}
.rf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rf-green); box-shadow: 0 0 9px rgba(53,211,153,.8); }
.rf-link { color: var(--rf-muted); text-decoration: none; font-size: .8rem; padding: 8px 10px; }
.rf-link:hover { color: #fff; }

.rf-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; min-height: calc(100vh - 106px); }
.rf-panel {
  position: relative; background: rgba(17,24,32,.94); border: 1px solid var(--rf-border);
  border-radius: 16px; box-shadow: 0 16px 38px rgba(0,0,0,.16);
}
.rf-panel::before {
  content: ""; position: absolute; inset: 0 18px auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,174,239,.5), transparent);
}
.rf-sidebar { padding: 18px 16px; align-self: start; position: sticky; top: 16px; }
.rf-kicker { color: #74d7fb; font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 800; }
.rf-sidebar h2 { font-size: 1rem; margin: 7px 0 8px; }
.rf-sidebar p { font-size: .8rem; color: var(--rf-muted); line-height: 1.5; margin: 0 0 16px; }
.rf-examples { display: grid; gap: 8px; }
.rf-example {
  width: 100%; text-align: left; color: #dce8f2; background: #0e151d; border: 1px solid #23313f;
  border-radius: 10px; padding: 10px 11px; font-size: .76rem; line-height: 1.35; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.rf-example:hover { border-color: rgba(0,174,239,.48); background: rgba(0,174,239,.06); transform: translateX(2px); }
.rf-note { margin-top: 18px; padding: 12px; border-radius: 12px; background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.18); color: #e8cf9e; font-size: .72rem; line-height: 1.45; }

.rf-chat { display: grid; grid-template-rows: 1fr auto; min-width: 0; overflow: hidden; }
.rf-messages { padding: 24px 26px; overflow-y: auto; max-height: calc(100vh - 220px); min-height: 540px; }
.rf-message { display: flex; gap: 11px; margin-bottom: 18px; align-items: flex-start; }
.rf-message.user { justify-content: flex-end; }
.rf-avatar {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center;
  font-size: .72rem; font-weight: 900; color: #8ee3ff; background: rgba(0,174,239,.1); border: 1px solid rgba(0,174,239,.25);
  overflow: hidden;
}
.rf-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.rf-bubble {
  max-width: min(820px, 88%); background: var(--rf-card-soft); border: 1px solid var(--rf-border);
  border-radius: 5px 16px 16px 16px; padding: 13px 15px; font-size: .87rem; line-height: 1.55;
}
.user .rf-bubble { background: rgba(0,102,204,.18); border-color: rgba(0,174,239,.28); border-radius: 16px 5px 16px 16px; }
.rf-learn {
  display: block; margin-top: 10px; padding: 6px 9px; border-radius: 9px;
  border: 1px solid rgba(225,29,72,.35); background: rgba(225,29,72,.08);
  color: #f5a3b5; font: inherit; font-size: .68rem; cursor: pointer;
}
.rf-learn:hover { border-color: rgba(225,29,72,.65); color: #ffd8e1; }
.rf-learn:disabled { opacity: .72; cursor: default; }
.rf-loading { display: inline-flex; gap: 5px; padding: 4px 0; }
.rf-loading span { width: 6px; height: 6px; border-radius: 50%; background: #7ddcff; animation: rfPulse 1.2s infinite; }
.rf-loading span:nth-child(2) { animation-delay: .16s; }
.rf-loading span:nth-child(3) { animation-delay: .32s; }
@keyframes rfPulse { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }

.rf-result { margin: -5px 0 20px 41px; max-width: calc(100% - 41px); }
.rf-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 8px; margin-bottom: 10px; }
.rf-stat {
  padding: 11px 12px; border-radius: 10px; background: linear-gradient(145deg, #0d141b, #101922);
  border: 1px solid #22303d; min-width: 0;
}
.rf-stat-label { color: var(--rf-muted); font-size: .63rem; text-transform: uppercase; letter-spacing: .08em; }
.rf-stat-value { font-size: .88rem; font-weight: 800; margin-top: 4px; overflow-wrap: anywhere; }
.rf-table-wrap { overflow: auto; border: 1px solid #22303d; border-radius: 11px; max-height: 310px; background: #0d141b; }
.rf-table { width: 100%; border-collapse: collapse; font-size: .73rem; white-space: nowrap; }
.rf-table th { position: sticky; top: 0; background: #15212b; color: #80d8f7; text-align: left; padding: 9px 10px; text-transform: uppercase; letter-spacing: .06em; font-size: .61rem; }
.rf-table td { padding: 8px 10px; border-top: 1px solid #1e2b37; }
.rf-table tr:nth-child(even) td { background: rgba(255,255,255,.015); }
.rf-chart { padding: 14px; border: 1px solid #d7dee5; border-radius: 11px; background: #f9fafb; margin-top: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.rf-chart svg { display: block; width: 100%; height: auto; min-height: 280px; }
.rf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rf-action {
  border: 1px solid #2a3b4a; color: #dbe8f2; background: #101821; border-radius: 10px;
  padding: 8px 11px; font-size: .72rem; font-weight: 750; cursor: pointer;
}
.rf-action:hover { border-color: rgba(0,174,239,.5); color: #fff; }
.rf-action.primary { background: linear-gradient(135deg, rgba(0,174,239,.15), rgba(0,102,204,.2)); border-color: rgba(0,174,239,.3); }
.rf-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 18px 41px; }
.rf-suggestion { border: 1px solid #243443; border-radius: 999px; padding: 7px 10px; background: transparent; color: #a9c1d3; font-size: .69rem; cursor: pointer; }
.rf-suggestion:hover { color: #fff; border-color: rgba(0,174,239,.4); }

.rf-composer { border-top: 1px solid var(--rf-border); padding: 13px 16px 15px; background: rgba(12,18,24,.97); }
.rf-input-shell { display: flex; align-items: flex-end; gap: 10px; background: #0b1117; border: 1px solid #2b3a48; border-radius: 15px; padding: 8px; }
.rf-input-shell:focus-within { border-color: rgba(0,174,239,.55); box-shadow: 0 0 0 3px rgba(0,174,239,.08); }
.rf-input { flex: 1; min-height: 42px; max-height: 130px; resize: none; border: 0; outline: 0; background: transparent; color: #fff; padding: 10px; font: inherit; font-size: .87rem; }
.rf-input::placeholder { color: #647687; }
.rf-send {
  width: 42px; height: 42px; border: 0; border-radius: 12px; cursor: pointer; color: #fff;
  background: linear-gradient(145deg, var(--rf-cyan), var(--rf-blue)); font-size: 1rem; font-weight: 900;
}
.rf-send:disabled { opacity: .45; cursor: wait; }
.rf-disclaimer { color: #6f8191; font-size: .65rem; text-align: center; margin-top: 8px; }

@media (max-width: 900px) {
  .rf-layout { grid-template-columns: 1fr; }
  .rf-sidebar { position: static; }
  .rf-sidebar p, .rf-note { display: none; }
  .rf-examples { display: flex; overflow-x: auto; }
  .rf-example { min-width: 235px; }
  .rf-messages { max-height: none; min-height: 480px; }
}
@media (max-width: 600px) {
  .rf-shell { width: min(100% - 18px, 1380px); padding-top: 12px; }
  .rf-header { align-items: flex-start; }
  .rf-badge { display: none; }
  .rf-layout { min-height: calc(100vh - 88px); }
  .rf-messages { padding: 15px 11px; }
  .rf-bubble { max-width: 92%; }
  .rf-result, .rf-suggestions { margin-left: 0; max-width: 100%; }
}