:root {
  --ec-blue: #2563EB;
  --ec-purple: #9333EA;
  --ec-surface-0: rgba(255,255,255,0.03);
  --ec-surface-1: rgba(255,255,255,0.06);
  --ec-surface-2: rgba(255,255,255,0.10);
  --ec-border: rgba(255,255,255,0.14);
  --ec-border-strong: rgba(37,99,235,0.35);
  --ec-shadow-1: 0 12px 28px -16px rgba(0,0,0,.55);
  --ec-shadow-2: 0 18px 36px -22px rgba(0,0,0,.6);
  --ec-radius: 16px;

  --fg: #e8ecf1;
  --bg: #0b0d12;
  --desc: #9aa3ad;

  --ring: color-mix(in oklab, var(--ec-blue) 70%, white 15%);
  --ring-strong: color-mix(in oklab, var(--ec-purple) 65%, white 10%);
  --glow-blue: 0 0 0 2px #1c3faa, 0 0 30px 0 rgba(37,99,235,.35);
  --glow-purple: 0 0 0 2px #5a1cb3, 0 0 34px 0 rgba(147,51,234,.35);

  /* Controls inset + reserve so buttons don't overlap textarea text */
  --control-inset: 16px;
  --control-reserve: 72px;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.easycodeGettingStartedContainer {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ec-grain {
  position: fixed; inset: -2px;
  background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'>\
      <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' /></filter>\
      <rect width='120' height='120' filter='url("#n")' opacity='0.035'/>\
    </svg>");
  background-size: 120px 120px;
  mix-blend-mode: overlay;
  pointer-events: none; z-index: 0;
}

.easycodeGettingStartedContainer .gettingStarted { position: relative; z-index: 1; }

/* ===== Layout =============================================================== */
.gettingStartedSlide { width: 100%; height: 100%; padding: 18px 24px; }

.gettingStartedCategoriesContainer {
  display: grid; max-width: 1100px; margin: 0 auto;
  /* was: auto auto auto auto auto */
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-columns: 1fr;
  /* was: "header" "prompt" "tabs" "community" "footer" */
  grid-template-areas:
    "header"
    "prompt"
    "tabs"
    "recent"     /* <-- add this row */
    "community"
    "footer";
  gap: clamp(18px, 3.2vw, 34px) 0;
  padding: clamp(46px, 6vw, 72px) 20px;
  align-content: center;
}

.header { grid-area: header; text-align: center; align-self: end; padding-bottom: 6px; }

/* ===== HERO TITLE — clean & premium ======================================= */
.header h1{
  margin: 0 0 8px;
  font-weight: 1000;
  letter-spacing: -0.022em;
  font-size: clamp(30px, 5.2vw, 54px);
  line-height: 1.06;
  text-shadow: 0 1px 0 rgba(0,0,0,.38);
}

/* Ensure no whole-line gradient fights the spans */
.header .product-name{
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: inherit;
  position: relative;
  display: inline-block;
  padding-bottom: 10px; /* space for optional accent bar */
}

/* “Welcome To” — vivid brand sweep */
.header .title-blue{
  background: linear-gradient(135deg,
    #AEC9FF 0%,
    #5D8DFF 28%,
    var(--ec-blue) 55%,
    var(--ec-purple) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* “EasyCode” — subtle, almost-solid lavender with a gentle drift */
.header .title-purple{
  background: linear-gradient(90deg,
    #cbb6ff 0%,
    #cbb6ff 88%,
    #b9caff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 10px 24px rgba(40,20,80,.16);
}

/* Optional: elegant accent bar under the H1 */
.product-name::after{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom:-10px;
  height:3px; width:min(120px,28%);
  border-radius:999px;
  background: linear-gradient(90deg, transparent, var(--ec-blue), var(--ec-purple), transparent);
  box-shadow:
    0 8px 22px -10px rgba(147,51,234,.6),
    0 8px 22px -10px rgba(37,99,235,.6);
}

.header .subtitle {
  opacity: .95;
  font-weight: 500;
  max-width: 760px;
  margin-top: 12px !important;   /* try 12–20px to taste */
  color: color-mix(in oklab, var(--fg) 82%, #b7c0c9 18%);
}

/* ===== PROMPT ============================================================== */
.prompt { grid-area: prompt; margin: 0 auto; width: 100%; max-width: 860px; }
.prompt .prompt-container { position: relative; }

.prompt textarea {
  width: 100%;
  min-height: 138px;
  resize: vertical;
  padding: 16px 16px var(--control-reserve);
  border-radius: calc(var(--ec-radius) / 2);
  border: 1px solid color-mix(in oklab, var(--ec-border) 80%, #7aa5ff 20%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.03) 100%),
    var(--ec-surface-1);
  color: var(--fg);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 40px -30px rgba(37,99,235,.55);
  backdrop-filter: blur(4px);
}
.prompt textarea:focus {
  border-color: color-mix(in oklab, var(--ec-blue) 56%, white 8%);
  box-shadow: var(--glow-blue);
}

/* Controls cluster — equal left & bottom gap */
.controller-wrapper {
  display: flex; justify-content: space-between; align-items: center;
  position: absolute; bottom: var(--control-inset); left: var(--control-inset); right: var(--control-inset);
  gap: 10px;
}

/* ===== Buttons ============================================================= */
.nextui-button {
  border: 0;
  border-radius: 8px; /* halved from 12 */
  padding: 10px 16px;
  background: var(--ec-surface-2);
  color: var(--fg);
  box-shadow: var(--ec-shadow-1);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, filter .18s ease;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.nextui-button:hover { transform: translateY(-1px); background: rgba(255,255,255,.12); }
.nextui-button:active { transform: translateY(0); filter: brightness(.98); }

.nextui-button.primary {
  background: var(--ec-blue);
  color: #fff;
  box-shadow: 0 12px 28px -12px rgba(37,99,235,.55);
}
.nextui-button.primary:hover { background: #1f54c9; }

/* Gradient variant for Start */
.nextui-button.primary[data-variant="gradient"]{
  background: linear-gradient(135deg, var(--ec-blue), var(--ec-purple));
  box-shadow: 0 16px 38px -18px rgba(37,99,235,.55), 0 16px 42px -20px rgba(147,51,234,.50);
}
.nextui-button.primary[data-variant="gradient"]:hover{
  filter: brightness(1.06);
}

/* Button icons */
.nextui-button .button-icon {
  width: 16px; height: 16px; display: inline-block;
  background-size: 16px 16px; background-position: center; background-repeat: no-repeat;
}
.image-button .button-icon {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l10-10a4 4 0 1 1 5.66 5.66L9.41 17.82a2 2 0 1 1-2.83-2.83L15.17 6.4'/></svg>");
  opacity: .9;
}
.send-button .button-icon {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
}

/* Suggestions */
.prompt-suggestions {
  margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.suggestion-chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border: 1px solid var(--ec-border); color: var(--fg);
  cursor: pointer; user-select: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  backdrop-filter: blur(4px);
}
.suggestion-chip:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--ec-shadow-1);
}

/* Tabs */
.tabs { grid-area: tabs; margin-bottom: 4px; display: flex; justify-content: center; }
.tabs .controller-wrapper {
  position: static; display: inline-flex; gap: 6px; padding: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border: 1px solid var(--ec-border);
  backdrop-filter: blur(10px); box-shadow: var(--ec-shadow-1);
}
.tabs .controller-wrapper .monaco-button {
  border: 0; background: transparent; color: var(--fg); padding: 8px 16px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.tabs .controller-wrapper .monaco-button:hover { background: var(--ec-surface-2); transform: translateY(-1px); }
.tabs .controller-wrapper .monaco-button.active {
  background: linear-gradient(135deg, var(--ec-blue), var(--ec-purple)); color: #fff;
  box-shadow: 0 12px 28px -12px rgba(37,99,235,.45);
}
.tabs .controller-wrapper .monaco-button .tab-icon {
  width: 16px; height: 16px; display: inline-block; background-size: 16px 16px; background-position: center; background-repeat: no-repeat;
}
.tabs .controller-wrapper .monaco-button.active .tab-icon { filter: brightness(0) invert(1); }

/* === Recent Projects (sits above community; uses same card/grid system) ==== */
.recent { grid-area: recent; margin-top: -6px; }
.recent-title{
  font-family: "SF Pro Display", "SF Pro Text", ui-sans-serif, system-ui, -apple-system,
               Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  font-size: clamp(18px, 2vw, 22px);
  margin: 6px 0 1rem;
}

.recent .template-container ul{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: stretch;
}

/* Container gets centered like community */
.recent .template-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Use a UL grid just like community, but enforce thirds on wide view */
.recent .template-container ul.recent-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* exact thirds */
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: stretch;
}

/* Reuse the existing .element card styles (already defined) */
/* Ensure title/description styling matches Community */
.recent .element .title {
  margin: 4px 0 0;
  font-weight: 700;
  letter-spacing: .1px;
  color: inherit;                 /* prevent link-blue */
}
.recent .element .description {
  color: var(--desc);
  font-size: 13px;
}



/* Responsive: collapse to 2 columns on medium, 1 on small */
@media (max-width: 1100px) {
  .recent .template-container ul.recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .recent .template-container ul.recent-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Community grid & cards (Refined Glass) ============================= */
.community { 
  grid-area: community; 
  position: relative;
  z-index: 5; 
}

.community-title {
  font-size: clamp(18px, 2vw, 22px); 
  font-weight: 600; 
  text-align: center; 
  margin: 6px 0 2.5rem; 
  letter-spacing: -0.01em;
  color: #fff;
  opacity: 0.9;
  text-shadow: 0 4px 20px rgba(0,0,0,0.8);
}

/* 1. SCROLLING CONTAINER (Community Only) */
.community .template-container {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;

  display: flex !important;
  flex-direction: column !important;
  gap: 24px;
  
  /* Padding top/bottom ensures hover scale doesn't get clipped */
  padding: 20px 0 60px; 

  /* REVERTED MASK: Fades Left/Right ONLY (Crisp top/bottom) */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  
  /* Remove composite logic since we only have one mask now */
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

.community .template-container ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
  will-change: transform;
  
  /* Removed strong perspective for a flatter, cleaner look */
  transition: opacity 0.5s ease;
}

/* Pause row on hover */
.community .template-container ul:hover {
  animation-play-state: paused;
}

/* --- REFINED FOCUS EFFECT --- */

/* 1. Siblings: Only dim slightly, no blur or grayscale */
.community .template-container ul:hover li {
  opacity: 0.6; 
  transform: scale(0.98); /* Very subtle shrink */
  transition: all 0.4s ease;
}

/* 2. Active Card: Gentle lift, no extreme 3D pop */
.community .template-container ul li:hover {
  opacity: 1;
  transform: scale(1.02); /* Reduced from 1.1 to 1.02 */
  z-index: 100;
  cursor: pointer;
}

/* Width for community cards */
.community .template-container ul li {
  flex: 0 0 300px;
  width: 300px;
  height: 180px;
  display: block !important;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); /* Smoother bezier */
}

@media (max-width: 640px) {
  .community .template-container ul li { 
    flex: 0 0 240px; 
    width: 240px;
    height: 150px;
  }
}

/* 2. SHARED / BASE ELEMENT STYLES (Default: Recent Projects) */
.element {
  position: relative; 
  display: block; 
  width: 100%;
  height: 100%; /* Fills grid cell */
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--ec-border);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Default Inner Layout (Recent Projects) */
.element .card-inner {
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  height: 100%;
  padding: 14px; 
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
}

/* Default Thumbnail (Recent Projects) */
.element .thumbnail {
  position: relative;
  width: 100%; 
  height: auto; 
  aspect-ratio: 16/9; /* Consistent aspect ratio for grid */
  border-radius: 8px; 
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.element .thumbnail img {
  width: 100%; 
  height: 100%; 
  object-fit: cover;
}

/* Default Title & Tags (Recent Projects) */
.element .title { 
  font-weight: 700; 
  margin-top: 4px; 
  color: #fff;
}

.element .description { 
  color: var(--desc); 
  font-size: 13px; 
  margin-bottom: auto; /* Pushes tags to bottom if needed */
}

.element .tags { 
  display: flex; 
  gap: 6px; 
  flex-wrap: wrap; 
  margin-top: 6px;
}

/* =========================================================
   3. COMMUNITY SPECIFIC OVERRIDES (The Glass Reel) 
   ========================================================= */

/* Glass Background & Border */
.community .element {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Reset inner padding to let image fill the card */
.community .element .card-inner {
  padding: 0;
  background: none;
  display: block;
}

/* Make image absolute to fill the glass card */
.community .element .thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
}

.community .element .thumbnail img {
  opacity: 0.85;
  transition: opacity 0.4s ease, transform 0.6s ease;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* Float Title over the image */
.community .element .title {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  z-index: 2;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  transform: translateY(0);
  transition: transform 0.3s ease;
}

/* HIDE TAGS ONLY IN COMMUNITY */
.community .element .description,
.community .element .tags { 
  display: none; 
}

/* Hover Effects (Community Specific) */
.community .element:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7);
}

.community .element:hover .thumbnail img {
  opacity: 1;
  transform: scale(1.05);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.community .element:hover .title {
  transform: translateY(-2px);
}

/* Play Button Icon (Only for Community) */
.community .element::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 40px; height: 40px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 0;
  z-index: 10;
  transition: all 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: 55% center;
}

.community .element:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background-color: var(--ec-blue);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.element .shine { display: none; }

/* 3. SCROLL ANIMATIONS */
.community .row-1 { animation: scrollLeft 100s linear infinite; }
.community .row-2 { animation: scrollRight 120s linear infinite; }
.community .row-3 { animation: scrollLeft 110s linear infinite; }

@keyframes scrollLeft {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes scrollRight {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Image chip */
.image-chip-container { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.image-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 10px;
  background: linear-gradient(135deg, var(--ec-blue), var(--ec-purple)); color: #fff; cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(37,99,235,.55);
}
.image-chip .filename { font-size: 12px; }
.image-chip .remove { font-weight: 700; }

/* ===== Loading overlay ===================================================== */
.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 12, 18, 0.9);
  display: flex; align-items: center; justify-content: center;
  z-index: 99999;
}
.spinner {
  width: 64px; height: 64px; border: 6px solid rgba(255,255,255,0.2); border-top-color: #2563EB;
  border-radius: 50%; animation: spin 0.8s linear infinite;
}

/* ===== Auth modal ========================================================== */
.auth-overlay{
  position:fixed; inset:0;
  background: rgba(10, 12, 18, 0.85);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  z-index:100000;
}
.auth-modal{
  width:100%; max-width:440px;
  background:#12161f; color:var(--fg);
  border:1px solid var(--ec-border-strong);
  border-radius:18px; padding:22px 20px;
  box-shadow: 0 18px 36px -22px rgba(0,0,0,.60), 0 2px 0 rgba(255,255,255,.03) inset;
}
.auth-title{margin:0 0 6px; font-size:22px; font-weight:900; letter-spacing:.2px}
.auth-sub{margin:0 0 16px; color:var(--desc)}
.auth-actions{display:flex; flex-direction:column; gap:10px}
.auth-btn{
  display:flex; align-items:center; gap:12px; width:100%;
  border-radius:12px; padding:12px 16px; cursor:pointer;
  border:1px solid var(--ec-border);
  background:#171b25; color:var(--fg);
  transition:transform .15s ease, filter .15s ease, background .15s ease, box-shadow .15s ease;
}
.auth-btn:hover{ transform: translateY(-1px); background:#1b2130; }
.auth-actions .auth-btn:first-child{
  border:0; color:#fff;
  background: linear-gradient(135deg, var(--ec-blue) 0%, var(--ec-purple) 100%);
  box-shadow: 0 14px 28px -16px rgba(37,99,235,.45), 0 10px 24px -18px rgba(147,51,234,.40);
}
.auth-actions .auth-btn:first-child:hover{ filter: brightness(1.05); }
.auth-actions .auth-btn:last-child{ background: rgba(255,255,255,0.06); border:1px solid var(--ec-border-strong); }
.auth-actions .auth-btn:last-child:hover{ background: rgba(255,255,255,0.09); }
.auth-ico{ width:18px; height:18px; background-size:contain; background-repeat:no-repeat; display:inline-block }
.auth-ico.gh{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
.auth-footer{margin-top:12px; display:flex; justify-content:flex-end}
.auth-cancel{
  background:transparent; border:1px solid var(--ec-border); color:var(--fg);
  border-radius:10px; padding:8px 12px; cursor:pointer;
}
.auth-cancel:hover{ background: rgba(255,255,255,0.08); transform: translateY(-1px); }

/* ===== States & utilities ================================================== */
.nextui-button:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: auto; }

.header, .prompt, .tabs { justify-self: center; }

/* Focus rings */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ===== Community Preview Modal (Premium Glass) ============================ */

.community-modal-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top,
      rgba(10,14,24,0.96),
      rgba(2,4,10,0.98));
  display: none;                    /* toggled via JS */
  align-items: center;
  justify-content: center;
  z-index: 100000;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.community-modal-overlay.is-open {
  display: flex;
}

.community-modal {
  width: min(1200px, 96vw);
  height: min(760px, 82vh);
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.06),
      rgba(10,14,26,0.96)),
    radial-gradient(circle at top left,
      rgba(37,99,235,0.26),
      transparent 60%),
    radial-gradient(circle at bottom right,
      rgba(147,51,234,0.24),
      transparent 60%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 36px 90px -38px rgba(0,0,0,0.95),
    0 0 0 1px rgba(6,14,40,0.7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;

  /* inner highlight edge */
  outline: 1px solid rgba(255,255,255,0.05);
  outline-offset: -1px;
}

/* Header with title + close */
.community-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 9px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg,
      rgba(9,12,20,0.95),
      rgba(9,12,20,0.92));
  box-shadow:
    0 12px 32px -26px rgba(0,0,0,0.9),
    0 1px 0 rgba(255,255,255,0.03);
}

.community-modal__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Status pill */
.community-modal__dot {
  height: 20px;
  padding: 0 11px;
  border-radius: 999px;
  background:
    linear-gradient(135deg,
      rgba(37,99,235,0.4),
      rgba(147,51,234,0.7));
  box-shadow:
    0 0 0 1px rgba(122,165,255,0.8),
    0 0 16px rgba(37,99,235,0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #e9f1ff;
}

.community-modal__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.community-modal__open {
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  background: #ffffff;
  color: #070b12;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  /* match welcome typography */
  font-family: "SF Pro Display", "SF Pro Text", ui-sans-serif, system-ui,
    -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  font-weight: 600;

  box-shadow:
    0 10px 26px -18px rgba(0,0,0,0.9),
    0 0 0 1px rgba(0,0,0,0.08);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    background .14s ease,
    color .14s ease,
    filter .14s ease;
}

.community-modal__open:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 34px -20px rgba(0,0,0,0.95),
    0 0 0 1px rgba(0,0,0,0.12);
  filter: brightness(1.02);
}

.community-modal__open:active {
  transform: translateY(0);
  box-shadow:
    0 9px 20px -16px rgba(0,0,0,0.9),
    0 0 0 1px rgba(0,0,0,0.10);
}

.community-modal__open:focus-visible {
  outline: 2px solid var(--ring-strong);
  outline-offset: 2px;
}

.community-modal__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.community-modal__open {
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  background: #ffffff;
  color: #070b12;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  font-family: "SF Pro Display", "SF Pro Text", ui-sans-serif, system-ui,
    -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  font-weight: 600;

  box-shadow:
    0 10px 26px -18px rgba(0,0,0,0.9),
    0 0 0 1px rgba(0,0,0,0.08);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    background .14s ease,
    color .14s ease,
    filter .14s ease;
}

.community-modal__open:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 34px -20px rgba(0,0,0,0.95),
    0 0 0 1px rgba(0,0,0,0.12);
  filter: brightness(1.02);
}

.community-modal__open:active {
  transform: translateY(0);
  box-shadow:
    0 9px 20px -16px rgba(0,0,0,0.9),
    0 0 0 1px rgba(0,0,0,0.10);
}

.community-modal__open:focus-visible {
  outline: 2px solid var(--ring-strong);
  outline-offset: 2px;
}

/* === Remix button (blue gradient pill) ==================================== */

.community-modal__remix {
  border: 0;
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--ec-blue), var(--ec-purple));
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  font-family: "SF Pro Display", "SF Pro Text", ui-sans-serif, system-ui,
    -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  font-weight: 600;

  box-shadow:
    0 14px 32px -20px rgba(37,99,235,0.85),
    0 0 0 1px rgba(122,165,255,0.55);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    filter .14s ease;
}

.community-modal__remix:hover {
  transform: translateY(-1px);
  box-shadow:
    0 20px 40px -22px rgba(37,99,235,0.95),
    0 0 0 1px rgba(147,51,234,0.7);
  filter: brightness(1.04);
}

.community-modal__remix:active {
  transform: translateY(0);
  box-shadow:
    0 12px 26px -20px rgba(37,99,235,0.9),
    0 0 0 1px rgba(147,51,234,0.55);
}

.community-modal__remix:focus-visible {
  outline: 2px solid var(--ring-strong);
  outline-offset: 2px;
}

.community-modal__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--fg) 84%, #b9c0d0 16%);
}

/* Close button – circular glass icon with SVG "X" */
.community-modal__close {
  border: 0;
  background:
    radial-gradient(circle at 30% 0%,
      rgba(255,255,255,0.16),
      rgba(8,12,22,0.98));
  color: transparent;         /* hide the ✕ text */
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 10px 26px -18px rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,255,255,0.08);
  transition:
    background .16s ease,
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
  position: relative;
  padding: 0;
}

/* Inject a clean vector X icon */
.community-modal__close::before {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23e8ecf1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.community-modal__close:hover {
  background:
    radial-gradient(circle at 30% 0%,
      rgba(255,255,255,0.22),
      rgba(12,18,30,1));
  transform: translateY(-1px);
  box-shadow:
    0 18px 40px -20px rgba(0,0,0,0.95),
    0 0 0 1px rgba(255,255,255,0.12);
  filter: brightness(1.04);
}

.community-modal__close:active {
  transform: translateY(0);
  box-shadow:
    0 9px 22px -16px rgba(0,0,0,0.92),
    0 0 0 1px rgba(255,255,255,0.08);
}

/* Body / iframe area */
.community-modal__body {
  flex: 1 1 auto;
  position: relative;
  background:
    radial-gradient(circle at bottom right,
      rgba(147,51,234,0.26),
      transparent 55%),
    radial-gradient(circle at top left,
      rgba(37,99,235,0.2),
      transparent 55%),
    rgba(4,7,15,0.98);
}

.community-modal__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: #05060a;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.85) inset;
}

/* Small screens */
@media (max-width: 720px) {
  .community-modal {
    width: 96vw;
    height: 74vh;
    border-radius: 18px;
  }
}

/* === Clean top-right X for modal close ==================================== */

.community-modal__close {
  border: 0;
  background: transparent;
  color: var(--fg, #e8ecf1);
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  width: auto;
  height: auto;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: opacity .15s ease, transform .15s ease;
}

/* Remove the injected circle/icon from previous versions */
.community-modal__close::before {
  content: none !important;
}

.community-modal__close:hover {
  opacity: 0.78;
  transform: translateY(-0.5px);
}

.community-modal__close:active {
  opacity: 0.9;
  transform: translateY(0);
}

/* Back to Top Button */
.footer {
  grid-area: footer; /* <--- CRITICAL FIX */
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
  position: relative;
  z-index: 20; /* Ensure it sits above the community scroll */
  margin-top: 20px;
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  
  /* Dimensions matching .nextui-button */
  padding: 10px 16px;
  border-radius: 8px; 
  
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--ec-border);
  color: var(--desc);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

/* Icon Styling */
.back-to-top svg {
  width: 16px; 
  height: 16px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  
  /* Static offset to visually center the arrow */
  transform: translateY(1px); 
}

/* HOVER STATE: Move the whole button up */
.back-to-top:hover {
  transform: translateY(-3px); /* Lifts the button */
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* On hover, just brighten the icon, don't move it independently */
.back-to-top:hover svg {
  opacity: 1;
}

/* Active State: Button presses down */
.back-to-top:active {
  transform: translateY(0);
}

/* ===== Responsive ========================================================== */
@media (max-width: 900px) {
  .gettingStartedCategoriesContainer {
    grid-template-columns: 1fr;
    /* was: "header" "prompt" "tabs" "community" "footer" */
    grid-template-areas:
      "header"
      "prompt"
      "tabs"
      "recent"     /* <-- add this row on mobile too */
      "community"
      "footer";
    padding-top: 42px;
  }
  .controller-wrapper { position: static; margin-top: 10px; }
  .prompt textarea { padding-bottom: 16px; min-height: 120px; }
  .product-name::after { display: none; }
}

/* ===== Keyframes & reduced motion ========================================= */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty {
  0% { transform: translate3d(0, -1%, 0) scale(1.02); }
  100% { transform: translate3d(0, 1%, 0) scale(1.02); }
}
@keyframes sweep {
  0% { transform: translateX(-20%) rotate(8deg); opacity: .15; }
  100% { transform: translateX(20%) rotate(8deg); opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .ec-ambient, .element .shine { animation: none !important; }
  .nextui-button, .suggestion-chip, .tabs .monaco-button, .element { transition: none !important; }
}

/* --- Fix: clean continuation into EasyCode (no whole-line gradient) ------- */

/* 1) Make sure the H1 itself is not painting a gradient */
.header .product-name{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: inherit !important;
}

/* 2) Keep the vivid sweep only on “Welcome To” */
.header .title-blue{
  background: linear-gradient(135deg,
    #AEC9FF 0%,
    #5D8DFF 28%,
    var(--ec-blue) 55%,
    var(--ec-purple) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* 3) Make “EasyCode” a premium, almost-solid continuation of that purple     */
/*    (no big gradient — just a tiny 96→100% drift so it feels alive)         */
.header .title-purple{
  background: linear-gradient(90deg,
    var(--ec-purple) 0%,
    color-mix(in oklab, var(--ec-purple) 85%, #ffffff 15%) 88%,
    color-mix(in oklab, var(--ec-purple) 75%, #ffffff 25%) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.34), 0 8px 20px rgba(40,20,80,.14) !important;
}

/* === Sleeker, premium wordmark (no 3D) ==================================== */
/* Keep the existing colors/gradients; just refine the typography & depth. */

.header h1{
  font-weight: 800;              /* down from 1000 for a cleaner silhouette */
  letter-spacing: -0.015em;      /* still tight, but less compressed */
  line-height: 1.04;
  text-shadow: none !important;  /* remove blocky/3D look */
}

/* Remove any depth glow from both spans while keeping their gradients */
.header .title-blue,
.header .title-purple{
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent;  /* avoid “outlined” look */
  filter: saturate(.96) contrast(1.02) brightness(1.02); /* subtle crispness */
}

/* Keep your accent bar but tone down the glow for a refined finish */
.product-name::after{
  box-shadow: 0 6px 16px -12px rgba(147,51,234,.38),
              0 6px 16px -12px rgba(37,99,235,.38) !important;
  opacity: .9;
}

/* (Optional) On very small screens, remove the bar for ultimate cleanliness */
@media (max-width: 640px){
  .product-name::after{ display: none; }
}

/* === Sleek, Apple-like wordmark (lighter, cleaner, zero 3D) =============== */
/* Leaves your gradients exactly as-is; only typography/refinement changes.  */

.header h1{
  font-weight: 600;            /* was 800/1000; lighter, more refined */
  letter-spacing: -0.01em;     /* ease the compression */
  line-height: 1.06;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prefer SF Display if present, otherwise your existing stack */
.header h1,
.header .title-blue,
.header .title-purple{
  font-family: "SF Pro Display", "SF Pro Text", ui-sans-serif, system-ui, -apple-system,
               Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial !important;
}

/* If variable fonts are supported, nudge weight even cleaner without full jump */
@supports (font-variation-settings: normal){
  .header h1{
    font-variation-settings: "wght" 570; /* between 500–600 for that Apple feel */
  }
}

/* Keep gradients, remove any extra “depth” treatments */
.header .title-blue,
.header .title-purple{
  text-shadow: none !important;
  -webkit-text-stroke: 0 transparent;
  filter: saturate(.96) contrast(1.0) brightness(1.02); /* subtle crispness */
}

/* Tone down the underline accent so the type remains the hero */
.product-name::after{
  height: 2px;                 /* slimmer */
  opacity: .55;                /* softer */
  box-shadow: 0 4px 12px -10px rgba(147,51,234,.32),
              0 4px 12px -10px rgba(37,99,235,.32) !important;
}

/* On very small screens: remove underline for maximum cleanliness */
@media (max-width: 640px){
  .product-name::after{ display:none; }
}

/* Apply the same sleek Apple-like font to the community title */
.community-title{
  font-family: "SF Pro Display", "SF Pro Text", ui-sans-serif, system-ui, -apple-system,
               Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial !important;
  font-weight: 600;          /* match hero’s refined weight */
  letter-spacing: -0.01em;   /* slight negative tracking for premium feel */
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* If variable fonts are available, nudge weight precisely */
@supports (font-variation-settings: normal){
  .community-title{
    font-variation-settings: "wght" 570; /* 550–600 looks great */
  }
}

/* === Top-right user area (Sign in / Profile) ============================== */
.ec-topbar{
  position: fixed; top: 0; left: 0; right: 0; height: 56px;
  display: flex; align-items: center; padding: 0 16px; z-index: 1000;
  background: transparent; pointer-events: none;
}
.ec-topbar__spacer{ flex: 1 1 auto; }
.ec-topbar__user{ pointer-events: auto; }

/* Shared chip look (matches surfaces, borders, shadows) */
.ec-login-btn,
.ec-profile{
  display: inline-flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 14px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid var(--ec-border);
  box-shadow: var(--ec-shadow-1);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
  backdrop-filter: blur(6px);
}

/* Hover/active feel consistent with chips & buttons */
.ec-login-btn:hover,
.ec-profile:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--ec-shadow-2);
}
.ec-login-btn:active,
.ec-profile:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* Focus ring matches the rest of the app */
.ec-login-btn:focus-visible,
.ec-profile:focus-visible{
  outline: 2px solid var(--ring-strong);
  outline-offset: 2px;
}

/* === Sign in button: force white icon & text =============================== */
.ec-login-btn{
  position: relative;
  cursor: pointer;
  color: #fff;                 /* icon & label become white via currentColor */
  font-weight: 700;
  letter-spacing: .1px;
}

/* hide the inline SVG that renderUserMenu injected */
.ec-login-btn > svg { display: none !important; }

/* inject a consistent icon */
.ec-login-btn::before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 0px;          /* respects your .ec-login-btn gap */
  vertical-align: -2px;        /* baseline match to GitHub mark */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  /* chunky mono-white “login” (door + arrow), rounded strokes */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M3 12h11'/%3E%3Cpath d='M10 9l4 3-4 3'/%3E%3C/g%3E%3C/svg%3E");
}

.ec-login-btn svg{
  width: 16px; height: 16px; display: block;
  /* The SVG path uses fill=currentColor in your markup; we ensure white by color:#fff above */
}

/* === Profile chip: use standard foreground (near-white) ==================== */
.ec-profile{
  color: var(--fg);
  cursor: default;
}
.ec-profile img{
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 1px 0 rgba(0,0,0,.35) inset, 0 8px 20px -12px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
}
.ec-profile .ec-name{
  font-weight: 700; max-width: 220px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Compact on small screens */
@media (max-width: 640px){
  .ec-topbar{ height: 52px; padding: 0 10px; }
  .ec-login-btn, .ec-profile{ height: 34px; padding: 0 12px; }
  .ec-profile .ec-name{ max-width: 160px; }
}

/* --- Force hardcoded OAuth icons (Google/GitHub) ------------------------- */
/* Make sure the icon box is big enough */
.auth-btn .auth-ico { width: 20px; height: 20px; }

/* GitHub mark (white) */
.auth-ico.gh{
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
      <path fill='%23ffffff' d='M12 .5C5.73.5.98 5.24.98 11.5c0 4.85 3.14 8.96 7.5 10.41.55.1.75-.24.75-.53 0-.26-.01-1.13-.02-2.05-3.05.66-3.69-1.3-3.69-1.3-.5-1.27-1.22-1.61-1.22-1.61-.99-.68.08-.67.08-.67 1.09.08 1.66 1.12 1.66 1.12.98 1.67 2.57 1.19 3.2.91.1-.7.38-1.19.68-1.46-2.44-.28-5.01-1.22-5.01-5.42 0-1.2.43-2.18 1.13-2.95-.11-.28-.49-1.41.11-2.94 0 0 .92-.29 3.02 1.12.87-.24 1.8-.36 2.73-.36.93 0 1.86.12 2.73.36 2.1-1.41 3.02-1.12 3.02-1.12.6 1.53.22 2.66.11 2.94.7.77 1.13 1.75 1.13 2.95 0 4.21-2.57 5.14-5.02 5.41.39.34.73 1.01.73 2.05 0 1.48-.01 2.67-.01 3.03 0 .29.2.64.76.53 4.35-1.45 7.48-5.56 7.48-10.41C23.02 5.24 18.27.5 12 .5Z'/>\
    </svg>");
}

/* Keep label baseline tidy next to the icon */
.auth-btn span { line-height: 20px; }

/* Google "G" — properly shaped & centered */
.auth-btn .auth-ico.g,
.auth-overlay .auth-btn .auth-ico.g,
.auth-ico.g{
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: -2px;                 /* matches GitHub baseline */
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 92% 92% !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg stroke='%23fff' fill='none' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8' stroke-dasharray='47 7' stroke-dashoffset='3.5'/%3E%3Cpath d='M13.2 12H18'/%3E%3C/g%3E%3C/svg%3E");
  /* tiny nudge if needed on your setup */
  /* transform: translateX(-0.3px); */
}

.ec-profile-wrap { position: relative; display: inline-block; }
.ec-profile {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--ec-border, rgba(255,255,255,0.14));
  padding: 6px 10px; border-radius: 999px; color: var(--fg, #e8ecf1); cursor: pointer;
}
.ec-profile:hover { border-color: var(--ec-border-strong, rgba(37,99,235,0.35)); }
/* ==========================================================================
   PROFILE AVATAR (Letter Fallback)
   ========================================================================== */

.ec-avatar-fallback {
  width: 28px; 
  height: 28px; 
  border-radius: 50%; 
  
  /* Flexbox to center the letter */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Premium Gradient Background (Blue to Purple) */
  background: linear-gradient(135deg, var(--ec-blue), var(--ec-purple));
  
  /* Text Styling */
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  
  /* Subtle inner shadow for depth */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.1);
}

.ec-profile img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ec-name { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-caret { opacity: 0.8; }

.ec-menu {
  display: none;
  position: absolute; right: 0; margin-top: 8px; min-width: 160px;
  background: var(--ec-surface-2, rgba(255,255,255,0.10));
  border: 1px solid var(--ec-border, rgba(255,255,255,0.14));
  border-radius: 12px; box-shadow: var(--ec-shadow-1, 0 12px 28px -16px rgba(0,0,0,.55));
  padding: 6px; z-index: 1000; backdrop-filter: blur(6px);
}
.ec-menu-item {
  width: 100%; text-align: left; background: transparent; border: 0;
  color: var(--fg, #e8ecf1); border-radius: 8px; padding: 8px 10px; cursor: pointer;
}
.ec-menu-item:hover { background: var(--ec-surface-1, rgba(255,255,255,0.06)); }

/* ==========================================================================
   OPTION 1: DUAL ROW - OPPOSITE DIRECTIONS
   ========================================================================== */

/* 2. The Scrolling Tracks */
.community .template-container ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
  will-change: transform;
  grid-template-columns: none !important; /* Override grid */
}

/* --- ROW 1: Slides Left (Standard) --- */
.community .row-1 {
  animation: scrollLeft 100s linear infinite;
}

/* --- ROW 2: Slides Right (Opposite) --- */
.community .row-2 {
  animation: scrollRight 120s linear infinite; /* Slightly slower for organic feel */
}

/* --- ROW 3: Slides Left (Slightly different speed) --- */
.community .row-3 {
  animation: scrollLeft 110s linear infinite;
}

/* --- ROW 4: Slides Right --- */
.community .row-4 {
  animation: scrollRight 125s linear infinite;
}

/* Pause ONLY the specific row being hovered */
.community .template-container ul:hover {
  animation-play-state: paused;
}

/* 3. Animation Keyframes */

/* Move content Left (0 to -50%) */
@keyframes scrollLeft {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* Move content Right (-50% to 0) */
/* We start at -50% (the duplicate set) and move to 0 (the start) */
@keyframes scrollRight {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* 4. Card Styling */
.community .template-container ul li {
  flex: 0 0 320px;
  display: block !important;
  width: 320px;
  perspective: 1000px;
}

@media (max-width: 640px) {
  .community .template-container ul li { 
    flex: 0 0 260px; 
    width: 260px;
  }
}

.community .element {
  height: 170px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #12141a;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 24px -6px rgba(0,0,0,0.6);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.4s ease;
  cursor: pointer;
}

.community .element .card-inner {
  padding: 0;
  height: 100%;
  display: block;
  background: none;
  backdrop-filter: none;
}

/* 5. Image Layer */
.community .element .thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.community .element .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: all 0.5s ease;
}

/* 6. Text Overlay */
.community .element .title {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 2;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.community .element .description,
.community .element .tags { display: none; }

/* 7. Gradient Overlay */
.community .element::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 40%, transparent 100%);
  z-index: 1;
  transition: opacity 0.3s ease;
}

/* 8. Hover Effects */
.community .element:hover {
  transform: scale(1.06) translateY(-4px);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.9);
  border-color: rgba(255,255,255,0.4);
  z-index: 10;
}

.community .element:hover .thumbnail img {
  opacity: 1;
  transform: scale(1.05);
}

/* Play Button */
.community .element::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0;
  z-index: 3;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: 55% center;
}

.community .element:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background-color: rgba(37, 99, 235, 0.9);
  border-color: transparent;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.5);
}

.auth-overlay {
  z-index: 200000 !important; /* higher than .community-modal-overlay (100000) */
}

/* === Center title in community modal header (grid layout) ================= */

/* Header with title + close */
.community-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 9px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg,
      rgba(9,12,20,0.95),
      rgba(9,12,20,0.92));
  box-shadow:
    0 12px 32px -26px rgba(0,0,0,0.9),
    0 1px 0 rgba(255,255,255,0.03);
  position: relative; /* ⭐ add this line */
}

.community-modal__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;

  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, var(--fg) 84%, #b9c0d0 16%);
  pointer-events: none; /* so clicks go through to buttons */
}

.community-modal__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ==========================================================================
   FIXED CINEMATIC ENTRANCE (NO FLASHING)
   ========================================================================== */

/* 1. Global Animation Reset */
/* This ensures elements are HIDDEN immediately before animation starts */
.header, 
.header h1, 
.prompt, 
.tabs, 
.recent, 
.community, 
.footer,
.element {
  opacity: 0; /* Force invisible start */
  animation-fill-mode: both !important; /* Crucial: Applies 0% styles during the delay */
  will-change: transform, opacity, filter;
}

/* 2. The Title (Tracking Reveal) */
.header {
  /* Moves the whole container up */
  animation: cinematic3DUp 1.4s cubic-bezier(0.19, 1, 0.22, 1);
  animation-delay: 0.1s;
  animation-fill-mode: both;
}

.header h1 {
  /* The specific text reveal */
  animation: titleTrackingReveal 1.8s cubic-bezier(0.19, 1, 0.22, 1);
  animation-delay: 0.2s; /* Starts slightly after container */
  animation-fill-mode: both;
  
  /* Ensure gradient text works */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent; /* Ensure fallback color doesn't flash over gradient */
}

/* 3. The Prompt (Hero) */
.prompt {
  animation: cinematic3DUp 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  animation-delay: 0.4s;
  animation-fill-mode: both;
}

/* 4. The Grid & Sections */
.recent, .community, .footer {
  animation: fadeOnly 1s ease;
  animation-delay: 0.5s;
  animation-fill-mode: both;
}

.element {
  animation: cinematic3DUp 1s cubic-bezier(0.19, 1, 0.22, 1);
  animation-fill-mode: both;
}

/* Stagger Loop */
.element:nth-child(1) { animation-delay: 0.50s; }
.element:nth-child(2) { animation-delay: 0.55s; }
.element:nth-child(3) { animation-delay: 0.60s; }
.element:nth-child(4) { animation-delay: 0.65s; }
.element:nth-child(5) { animation-delay: 0.70s; }
.element:nth-child(6) { animation-delay: 0.75s; }
.element:nth-child(7) { animation-delay: 0.80s; }
.element:nth-child(8) { animation-delay: 0.85s; }
.element:nth-child(9) { animation-delay: 0.90s; }
.element:nth-child(10) { animation-delay: 0.95s; }

/* 5. Atmosphere */
.ec-ambient {
  animation: ambientBloom 2.5s ease-out;
  animation-fill-mode: both;
}

/* 6. Vignette Overlay */
.easycodeGettingStartedContainer::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: radial-gradient(circle at center, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
  opacity: 0;
  animation: fadeOnly 2s ease;
  animation-delay: 0.1s;
  animation-fill-mode: both;
}

/* --- Keyframes (Keep these the same as before) --- */
@keyframes cinematic3DUp {
  0% {
    opacity: 0;
    transform: translateY(40px) rotateX(15deg) scale(0.95);
    filter: blur(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes titleTrackingReveal {
  0% {
    opacity: 0;
    letter-spacing: 0.15em;
    filter: blur(15px);
    transform: scale(1.1);
  }
  40% { opacity: 0.6; }
  100% {
    opacity: 1;
    letter-spacing: -0.022em;
    filter: blur(0);
    transform: scale(1);
  }
}

@keyframes ambientBloom {
  0% { opacity: 0; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeOnly {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ==========================================================================
   TEXTAREA POLISH (Remove Dragger & White Lines)
   ========================================================================== */

.prompt textarea {
  /* 1. Remove the resize handle (dragger) from the bottom right */
  resize: none !important; 
}

.prompt textarea:focus {
  /* 2. Remove the default browser focus ring (often white or blue) */
  outline: none !important;
  
  /* 3. Force a clean border color (removes any white mixing) */
  border-color: var(--ec-blue) !important;

  /* 4. Redefine the shadow to ensure no "white inset" line remains */
  /* We keep the cinematic glow, but remove the 'inset 0 1px 0 rgba(255...)' */
  box-shadow: 
    0 0 0 1px var(--ec-blue),                 /* Sharp inner blue ring */
    0 20px 80px -20px rgba(37, 99, 235, 0.4), /* Ambient Blue Glow */
    0 0 120px -40px rgba(147, 51, 234, 0.3)   /* Ambient Purple Glow */
    !important;
}

/* ==========================================================================
   FINAL POLISH: ANIMATED FILM GRAIN
   ========================================================================== */

.ec-grain {
  /* Ensure the image is large enough to move around */
  background-size: 100px 100px; 
  opacity: 0.045; /* Slightly visible */
  animation: grainNoise 8s steps(10) infinite;
}

@keyframes grainNoise {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}

/* ==========================================================================
   FINAL POLISH: CUSTOM SCROLLBAR
   ========================================================================== */

/* For Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent; 
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  border: 2px solid transparent; /* Creates padding around thumb */
  background-clip: content-box;
  transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* For Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* ==========================================================================
   FINAL POLISH: TACTILE INTERACTIONS
   ========================================================================== */

/* 1. Buttons & Chips Squish */
.nextui-button:active, 
.suggestion-chip:active,
.community-modal__close:active,
.community-modal__open:active {
  transform: scale(0.96) translateY(1px) !important;
  transition: transform 0.05s ease-out; /* Instant response */
}

/* 2. Cards Squish (Subtle) */
.element:active {
  transform: scale(0.98) !important;
  border-color: rgba(255, 255, 255, 0.4);
  transition: transform 0.05s ease-out;
}

/* 3. Text Selection Color */
/* Matches your brand instead of default blue */
::selection {
  background: rgba(147, 51, 234, 0.3); /* Purple tint */
  color: #fff;
  text-shadow: 0 0 8px rgba(147, 51, 234, 0.5);
}

/* ==========================================================================
   PREMIUM BACKGROUND: CENTRAL STAGE SPOTLIGHT (Focuses the Prompt)
   ========================================================================== */

.ec-ambient {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: #0b0d12;
  
  /* Reset old styles */
  animation: none !important;
  background-image: none !important;
}

/* Beam 1: The Core Light (Blue - Focuses directly on the box) */
.ec-ambient::before {
  content: "";
  position: absolute;
  
  /* Position: Top Center */
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  
  /* Shape: A tall, narrow beam falling downwards */
  width: 60vw;
  height: 100vh;
  
  /* Gradient: Bright Blue top -> Fades out near the prompt box */
  background: radial-gradient(
    ellipse at top, 
    rgba(37, 99, 235, 0.35) 0%, 
    rgba(37, 99, 235, 0.1) 40%, 
    transparent 70%
  );
  
  filter: blur(80px);
  opacity: 0.8;
  mix-blend-mode: screen;
  
  /* Animation: Subtle "Breathing" intensity */
  animation: spotlightPulse 8s ease-in-out infinite alternate;
}

/* Beam 2: The Atmosphere (Purple - Wider glow to frame the beam) */
.ec-ambient::after {
  content: "";
  position: absolute;
  
  /* Position: Top Center, but wider */
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  
  width: 90vw;
  height: 90vh;
  
  /* Gradient: Soft Purple haze */
  background: radial-gradient(
    ellipse at top, 
    rgba(147, 51, 234, 0.2) 0%, 
    transparent 60%
  );
  
  filter: blur(100px);
  opacity: 0.6;
  mix-blend-mode: screen;
  
  /* Animation: Slightly different rhythm */
  animation: atmospherePulse 12s ease-in-out infinite alternate;
}

/* --- Animations: Intensity Pulse (No drifting left/right) --- */

@keyframes spotlightPulse {
  0% { opacity: 0.7; transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0.9; transform: translateX(-50%) scaleY(1.1); }
}

@keyframes atmospherePulse {
  0% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  100% { opacity: 0.7; transform: translateX(-50%) scale(1.05); }
}

/* ==========================================================================
   OPTIONAL: SCANNING GRID OVERLAY
   ========================================================================== */

.easycodeGettingStartedContainer::after {
  content: "";
  position: fixed;
  inset: 0;
  /* Your existing grid pattern */
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 0;
  
  /* The Mask: Creates a spotlight that moves across the screen */
  mask-image: radial-gradient(
    circle at 50% 50%, 
    black 40%, 
    transparent 80%
  );
  /* Animate the mask position */
  animation: gridScan 15s ease-in-out infinite;
}

@keyframes gridScan {
  0% { mask-position: 0% 0%; mask-size: 100% 100%; }
  25% { mask-position: 100% 0%; mask-size: 120% 120%; }
  50% { mask-position: 100% 100%; mask-size: 100% 100%; }
  75% { mask-position: 0% 100%; mask-size: 120% 120%; }
  100% { mask-position: 0% 0%; mask-size: 100% 100%; }
}

/* ==========================================================================
   HERO PROMPT: DEEP SLATE (Thick Focus + Unified Lift)
   ========================================================================== */

/* 1. The Container (Restored Unified Movement) */
.prompt-container {
  position: relative;
  /* Smooth physics for the lift */
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* When textarea is focused, lift the WHOLE container (buttons included) */
.prompt-container:has(textarea:focus) {
  transform: translateY(-4px);
}

/* 2. The Textarea (Resting State: 1px Border) */
.prompt textarea {
  /* Deep Slate Background */
  background: linear-gradient(180deg, #1e2330 0%, #171b25 100%) !important;
  
  /* Resting: Thin 1px border */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  
  /* Resting Shadow */
  box-shadow: 
    0 12px 32px -8px rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.04) inset
    !important;

  color: #ffffff;
  resize: none !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 3. The Focus State (Active: Visual 2px Border) */
.prompt textarea:focus {
  /* Slightly lighter background */
  background: linear-gradient(180deg, #232836 0%, #1c202b 100%) !important;

  /* 1. The Real Border (Outer 1px) */
  border-color: rgba(59, 130, 246, 0.6) !important;

  /* Remove default outline */
  outline: none !important;

  /* 2. The "Thickening" & Glow Stack */
  box-shadow: 
    /* TRICK: Hard Inset Shadow = Simulated 2nd pixel of border */
    /* This makes the border look 2px thick without shifting the layout */
    inset 0 0 0 1px rgba(59, 130, 246, 0.6),
    
    /* Soft Blue Haze */
    0 0 20px -5px rgba(59, 130, 246, 0.3),
    
    /* Deep Ambient Lift */
    0 20px 50px -10px rgba(0, 0, 0, 0.8)
    !important;
}

/* Placeholder: Subtle but readable */
.prompt textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   NEW CONTROLS: VISIBILITY TOGGLE & MIC
   ========================================================================== */

/* --- 1. Adjust Textarea Padding --- */
/* Make room for the toggle in the top right so text doesn't overlap */
.prompt textarea {
  /* 1. Reset Top Padding to normal (16px) so cursor starts at the top */
  padding-top: 16px !important;

  /* 2. Add Right Padding instead */
  /* This ensures text wraps before it hits the Public/Private toggle */
  padding-right: 120px !important; 
}

/* --- 2. Visibility Toggle (Top Right) --- */
.visibility-toggle-wrapper {
  position: absolute;
  /* Use the same variable as the bottom controls (16px) for perfect alignment */
  top: var(--control-inset);   
  right: var(--control-inset); 
  z-index: 10;
}

.visibility-chip {
  display: flex; align-items: center; gap: 8px;
  height: 28px;
  padding: 0 10px 0 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

.visibility-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

/* Icons */
.vis-icon {
  width: 14px; height: 14px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: 0.8;
}
.vis-icon.globe {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}
.vis-icon.lock {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
.vis-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255,255,255,0.5);
  margin-left: 2px;
}

/* --- 3. The Dropdown Menu --- */
.visibility-dropdown {
  display: none; /* Hidden by default */
  position: absolute;
  top: 100%; right: 0;
  margin-top: 6px;
  width: 240px;
  background: #13161c;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8);
  padding: 4px;
  z-index: 20;
  animation: fadeScale 0.15s ease-out;
}
.visibility-dropdown.show { display: block; }

@keyframes fadeScale {
  from { opacity: 0; transform: scale(0.95) translateY(-5px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.vis-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent; border: 0;
  text-align: left; cursor: pointer;
  border-radius: 6px;
  color: #e8ecf1;
}
.vis-item:hover { background: rgba(255,255,255,0.05); }
.vis-item.active { background: rgba(37, 99, 235, 0.15); }

.vis-label { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vis-title { font-size: 13px; font-weight: 600; }
.vis-desc { font-size: 11px; color: #9aa3ad; }

/* Disabled State */
.vis-item.disabled { opacity: 0.5; cursor: not-allowed; }
.vis-item.disabled:hover { background: transparent; }

/* Checkmark for active item */
.vis-check {
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
  display: none;
}
.vis-item.active .vis-check { display: block; }

/* --- 4. Bottom Controller Layout (Mic + Start) --- */
.right-controls {
  display: flex; align-items: center; gap: 8px;
}

/* Mic Button Styling */
.mic-button {
  padding: 10px; /* Square-ish */
  background: transparent;
  box-shadow: none;
  border: 1px solid transparent;
}

.mic-button:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.1);
}
.mic-button .button-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' 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%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E");
  opacity: 0.8;
}

/* ==========================================================================
   MICROPHONE RECORDING STATE (Red Pulse)
   ========================================================================== */

.mic-button {
  transition: all 0.3s ease;
}

/* Active Recording State */
.mic-button.recording {
  /* Turn the icon Red */
  color: #ef4444 !important; 
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  
  /* The Pulse Animation */
  animation: micPulse 1.5s infinite;
}

/* Force the SVG icon inside to take the red color */
.mic-button.recording .button-icon {
  background-image: none !important; /* Remove the white background image */
  /* Re-apply the icon as a mask so we can color it with background-color */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' 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%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' 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%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: #ef4444; /* The actual red color */
}

@keyframes micPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    transform: scale(1);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    transform: scale(1);
  }
}

/* ==========================================================================
   LANGUAGE SELECTOR (Slide-Out)
   ========================================================================== */

.right-controls {
  position: relative;
  display: flex; align-items: center; gap: 8px;
}

/* Wrapper: Collapsed by default */
.lang-wrapper {
  position: relative;
  width: 0; 
  opacity: 0;
  overflow: visible; /* Allow dropdown to spill out */
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none; /* Ignore clicks when hidden */
  margin-right: -4px; /* Tighten gap when hidden */
}

/* REVEAL LOGIC: Show when hovering controls OR when Mic is recording */
.right-controls:hover .lang-wrapper,
.right-controls:has(.mic-button.recording) .lang-wrapper,
.lang-wrapper.active { /* Keep open if menu is open */
  width: 34px;
  opacity: 1;
  pointer-events: auto;
  margin-right: 0;
}

/* The Button (2-Letter Code) */
.lang-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  height: 32px;
  width: 34px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}

.lang-btn:hover,
.lang-wrapper.active .lang-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* The Dropdown Menu */
.lang-dropdown {
  display: none;
  position: absolute;
  bottom: 100%; /* Opens upwards */
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  background: #13161c;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 4px;
  min-width: 120px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8);
  z-index: 50;
}

.lang-dropdown.show { display: block; animation: fadeUp 0.15s ease-out; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateX(-50%) translateY(5px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Dropdown Items */
.lang-item {
  display: block; width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: transparent; border: 0;
  color: #e8ecf1;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  display: flex; justify-content: space-between;
}
.lang-item:hover { background: rgba(255,255,255,0.06); }
.lang-item.selected { color: #3b82f6; background: rgba(59, 130, 246, 0.1); }