assets/custom.css

/* =====================================================================
   Third Eye — "Aqua-Tech" design system
   Cool, crisp, futuristic light theme (default) + refined dark theme.
   Built for low-vision legibility: Atkinson Hyperlegible body type,
   high contrast, large targets, strong focus, reduced-motion safe.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Sora:wght@400;500;600;700;800&display=swap');

/* ----- Tokens: LIGHT is the default :root, .force-dark overrides ----- */
:root {
  color-scheme: light;

  --bg-0: #e9f1f7;
  --bg-1: #f4f9fc;

  --aurora-1: rgba(6, 182, 212, 0.20);   /* cyan   */
  --aurora-2: rgba(56, 189, 248, 0.18);  /* sky    */
  --aurora-3: rgba(37, 99, 235, 0.12);   /* blue   */

  --text: #0b2230;
  --text-strong: #051722;
  --muted: #45647a;
  --faint: #7e98ab;

  --accent: #0891b2;        /* cyan-600, legible on light */
  --accent-2: #2563eb;      /* blue-600 */
  --accent-glow: rgba(8, 145, 178, 0.35);
  --accent-ink: #ffffff;

  --glass-bg: linear-gradient(158deg, rgba(255, 255, 255, 0.88), rgba(229, 244, 251, 0.64));
  --glass-border: rgba(12, 110, 140, 0.16);
  --glass-border-strong: rgba(8, 145, 178, 0.55);
  --glass-shadow: 0 22px 54px rgba(12, 74, 110, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.9);

  --field-bg: rgba(255, 255, 255, 0.92);
  --field-border: rgba(12, 90, 120, 0.16);

  --ring: rgba(8, 145, 178, 0.85);

  --radius: 24px;
  --radius-md: 18px;
  --radius-sm: 13px;

  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Manual dark override (set by the theme toggle). */
.force-dark {
  color-scheme: dark;

  --bg-0: #060a13;
  --bg-1: #0a1120;

  --aurora-1: rgba(34, 211, 238, 0.20);
  --aurora-2: rgba(56, 189, 248, 0.16);
  --aurora-3: rgba(99, 102, 241, 0.16);

  --text: #e7f1fa;
  --text-strong: #ffffff;
  --muted: #93a8c0;
  --faint: #62748f;

  --accent: #22d3ee;
  --accent-2: #5b8cff;
  --accent-glow: rgba(34, 211, 238, 0.4);
  --accent-ink: #04121a;

  --glass-bg: linear-gradient(158deg, rgba(22, 32, 52, 0.78), rgba(9, 14, 27, 0.6));
  --glass-border: rgba(120, 190, 230, 0.16);
  --glass-border-strong: rgba(34, 211, 238, 0.5);
  --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --glass-highlight: rgba(255, 255, 255, 0.07);

  --field-bg: rgba(9, 15, 28, 0.66);
  --field-border: rgba(120, 190, 230, 0.16);

  --ring: rgba(34, 211, 238, 0.9);
}

/* ----- Canvas + animated aurora ----- */
html {
  background: var(--bg-0) !important;
}

body {
  background: transparent !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: 20px !important;
}

/* Gradio paints <gradio-app> with the theme's solid fill; clear it so the
   aqua canvas + aurora show, and lift it above the aurora layer. */
gradio-app {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

body::before {
  content: "";
  position: fixed;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 40% at 16% 18%, var(--aurora-1), transparent 70%),
    radial-gradient(44% 44% at 88% 12%, var(--aurora-2), transparent 70%),
    radial-gradient(52% 52% at 62% 96%, var(--aurora-3), transparent 70%);
  filter: blur(26px);
  animation: drift 30s ease-in-out infinite alternate;
}

/* Fine grid texture for the "instrument" feel (very subtle). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, var(--glass-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--glass-border) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 28%, black, transparent 78%);
  mask-image: radial-gradient(circle at 50% 28%, black, transparent 78%);
}

.gradio-container {
  position: relative;
  z-index: 1;
  background: transparent !important;
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.6rem) !important;
}

/* ----- Header / brand ----- */
.app-header {
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
  animation: rise 0.6s ease both;
}

.mission-panel {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  margin: 0.6rem 0 1.2rem;
  padding: 22px 24px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 42%),
    var(--glass-bg);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(18px) saturate(1.2);
  animation: rise 0.6s ease 0.05s both;
}

.mission-kicker {
  margin: 0 0 0.55rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.mission-copy h2 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.mission-body {
  max-width: 54ch;
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.65;
}

.mission-steps {
  display: grid;
  gap: 12px;
}

.mission-steps > div {
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.35);
}

.force-dark .mission-steps > div {
  background: rgba(3, 9, 20, 0.34);
}

.mission-steps span {
  display: inline-flex;
  min-width: 38px;
  margin-bottom: 0.55rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.mission-steps strong {
  display: block;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 1rem;
}

.mission-steps p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.brand {
  display: flex;
  align-items: center;
  gap: 15px;
}

.brand-iris {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1.5px solid var(--glass-border-strong);
  border-radius: 50%;
  background: radial-gradient(circle at 46% 40%, #ffffff 0 6%, var(--accent) 7% 26%, var(--accent-2) 52%, #0a2540 86%);
  box-shadow: 0 0 22px var(--accent-glow), inset 0 0 12px rgba(0, 0, 0, 0.25);
}

.brand-iris-core {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px var(--accent), 0 0 4px #fff;
}

.brand-text h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-strong);
}

.brand-text p {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.app-header > *:first-child {
  flex: 1 1 auto;
}

.language-picker,
.theme-toggle {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

.language-picker {
  max-width: 188px;
}

.theme-toggle button,
.theme-toggle {
  border-radius: 999px !important;
  border: 1px solid var(--glass-border) !important;
  background: var(--glass-bg) !important;
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  backdrop-filter: blur(12px);
  white-space: nowrap;
}

.theme-toggle button:hover {
  border-color: var(--glass-border-strong) !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
}

/* ----- Mode cards (a real radio group, styled as cards) ----- */
#mode-cards {
  margin: 0.9rem 0 1.2rem;
  animation: rise 0.6s ease 0.08s both;
}

#mode-cards .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

#mode-cards input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

#mode-cards .wrap label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 94px;
  padding: 18px 18px 18px 64px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(16px) saturate(1.25);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

/* Accent rail that grows when the card is active */
#mode-cards .wrap label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(var(--accent), var(--accent-2));
  opacity: 0;
  transition: opacity 0.16s ease;
}

#mode-cards .wrap label:hover {
  transform: translateY(-3px);
  border-color: var(--glass-border-strong);
}

#mode-cards .wrap label > span {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

/* Icon (masked SVG, themed to the accent) */
#mode-cards .wrap label > span::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 19px;
  width: 28px;
  height: 28px;
  background: var(--accent);
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}

/* Per-card description line */
#mode-cards .wrap label::after {
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.42;
  color: var(--muted);
}

#mode-cards .wrap label:nth-of-type(1) {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
#mode-cards .wrap label:nth-of-type(1)::after {
  content: "Tell me everything in the scene.";
}

#mode-cards .wrap label:nth-of-type(2) {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3C/svg%3E");
}
#mode-cards .wrap label:nth-of-type(2)::after {
  content: "Speak a question about what I see.";
}

#mode-cards .wrap label:nth-of-type(3) {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
}
#mode-cards .wrap label:nth-of-type(3)::after {
  content: "Read labels, menus, and signs aloud.";
}

/* Active / checked card */
#mode-cards .wrap label:has(input:checked) {
  border-color: var(--glass-border-strong);
  box-shadow:
    0 0 0 1.5px var(--accent),
    var(--glass-shadow),
    0 0 32px var(--accent-glow);
}
#mode-cards .wrap label:has(input:checked)::before {
  opacity: 1;
}
#mode-cards .wrap label:has(input:checked) > span::before {
  filter: drop-shadow(0 0 7px var(--accent-glow));
}
#mode-cards .wrap label:has(input:focus-visible) {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

/* ----- Work area: glass cards ----- */
.work-area {
  align-items: stretch !important;
  gap: 16px !important;
  animation: rise 0.6s ease 0.16s both;
}

.glass-card {
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  background: var(--glass-bg) !important;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight) !important;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  padding: 22px !important;
}

/* Strip inner block chrome so each card reads as one clean surface */
.glass-card .block,
.glass-card .form,
.glass-card .gr-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
}

.card-hint {
  font-size: 0.78rem;
  color: var(--faint);
}

.camera-frame {
  overflow: hidden;
  border-radius: var(--radius-md) !important;
}

.assist-strip {
  margin: 0.95rem 0 0.8rem;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.38);
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.55;
}

.force-dark .assist-strip {
  background: rgba(8, 14, 28, 0.42);
}

.assist-strip p {
  margin: 0;
}

.assist-strip strong {
  color: var(--text-strong);
}

.sample-picker,
.quick-prompt {
  margin-top: 0.45rem;
}

.sample-picker .wrap {
  display: grid;
  gap: 10px;
}

.sample-picker label {
  min-height: 60px !important;
  border-radius: 16px !important;
  border: 1px solid var(--glass-border) !important;
  background: var(--field-bg) !important;
}

.sample-picker label:has(input:checked) {
  border-color: var(--glass-border-strong) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--accent-glow) !important;
}

.secondary-action {
  min-height: 58px !important;
  margin-top: 0.6rem !important;
  border-radius: 18px !important;
  border: 1px solid var(--glass-border-strong) !important;
  background: rgba(255, 255, 255, 0.42) !important;
  color: var(--text-strong) !important;
  font-family: var(--font-display) !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

.force-dark .secondary-action {
  background: rgba(7, 15, 30, 0.46) !important;
}

.secondary-action:hover {
  box-shadow: 0 0 18px var(--accent-glow) !important;
}

/* ----- Primary action ----- */
.primary-action {
  margin-top: 0.7rem !important;
  min-height: 72px !important;
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(120deg, var(--accent), var(--accent-2)) !important;
  color: var(--accent-ink) !important;
  font-family: var(--font-display) !important;
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 14px 32px var(--accent-glow), 0 2px 0 rgba(255, 255, 255, 0.25) inset !important;
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}

.primary-action:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 18px 40px var(--accent-glow) !important;
}

.primary-action:active {
  transform: translateY(0);
}

/* ----- Iris status orb ----- */
.iris-stage {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: 0.4rem 0 1.2rem;
}

.iris {
  position: relative;
  display: grid;
  width: 116px;
  height: 116px;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--glass-border-strong);
  border-radius: 50%;
  background: radial-gradient(circle at 47% 42%, #ffffff 0 4%, var(--accent) 5% 12%, var(--accent-2) 30%, #0a2540 60%, #04111c 82%);
  box-shadow:
    0 0 18px var(--accent-glow),
    0 0 46px var(--aurora-2),
    inset 0 0 24px rgba(0, 0, 0, 0.3);
}

.iris::before,
.iris::after {
  position: absolute;
  border: 1px solid var(--glass-border-strong);
  border-radius: 50%;
  content: "";
  inset: 14%;
  opacity: 0.5;
}

.iris::after {
  border-style: dashed;
  inset: 27%;
}

.iris-core {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 18px var(--accent), 0 0 6px #fff;
}

.scan-line {
  position: absolute;
  right: 8%;
  left: 8%;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  box-shadow: 0 0 12px var(--accent);
}

.state-label {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-strong);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.iris.idle {
  animation: breathe 4s ease-in-out infinite;
}
.iris.listening {
  animation: listen 0.9s ease-in-out infinite;
}
.iris.seeing .scan-line {
  opacity: 1;
  animation: scan 1.15s linear infinite;
}
.iris.thinking {
  animation: think 0.62s ease-in-out infinite;
}
.iris.speaking {
  animation: speak 0.48s ease-in-out infinite alternate;
}

/* ----- Fields, inputs, labels ----- */
label,
.label-wrap span {
  color: var(--text) !important;
  font-family: var(--font-display) !important;
}

input,
textarea,
select {
  color: var(--text) !important;
  background: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important;
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
}

.answer-output textarea {
  min-height: 196px !important;
  color: var(--text-strong) !important;
  font-size: 1.24rem !important;
  line-height: 1.7 !important;
}

.sr-status textarea {
  min-height: 52px !important;
  color: var(--accent) !important;
  font-weight: 700;
}

/* ----- Focus rings (accessibility) ----- */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid var(--ring) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
}

/* ----- System accordion + footer ----- */
.system-accordion {
  margin-top: 1.3rem;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px);
}

.diagnostics-btn button,
.diagnostics-btn {
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--accent) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}

.mode-note {
  margin: 0 0 0.6rem;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--muted);
}

.footer-note {
  margin: 0;
  padding: 2rem 0 0.6rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--faint);
}

.footer-note .priv {
  color: var(--accent);
  font-weight: 600;
}

/* ----- Responsive ----- */
@media (max-width: 820px) {
  .mission-panel {
    grid-template-columns: 1fr;
  }
  #mode-cards .wrap {
    grid-template-columns: 1fr;
  }
  .work-area {
    flex-direction: column !important;
  }
}

@media (max-width: 700px) {
  .gradio-container {
    padding: 0.9rem !important;
  }
  .iris {
    width: 104px;
    height: 104px;
  }
  .brand-text h1 {
    font-size: 1.55rem;
  }
}

/* ----- Motion ----- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes drift {
  to {
    transform: translate3d(3%, 2%, 0) rotate(4deg) scale(1.08);
  }
}

@keyframes breathe {
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 24px var(--accent-glow), 0 0 60px var(--aurora-2);
  }
}

@keyframes listen {
  50% {
    transform: scale(1.07);
    box-shadow: 0 0 10px 12px var(--accent-glow), 0 0 70px var(--aurora-2);
  }
}

@keyframes scan {
  from {
    transform: translateY(-44px);
  }
  to {
    transform: translateY(44px);
  }
}

@keyframes think {
  50% {
    transform: scale(0.94) rotate(3deg);
    filter: hue-rotate(20deg);
  }
}

@keyframes speak {
  to {
    transform: scale(1.05);
    filter: brightness(1.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}