:root {
  --ec-blue: #2563EB;
  --ec-purple: #9333EA;
  --ec-surface-0: rgba(255,255,255,0.03);
  --ec-surface-1: rgba(255,255,255,0.05);
  --ec-surface-2: rgba(255,255,255,0.08);
  --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: 14px;

  --fg: #e6e6e6;
  --bg: #0f1115;
  --tile-bg: rgba(255,255,255,0.05);
  --tile-bg-hover: rgba(255,255,255,0.08);
  --tile-border: rgba(255,255,255,0.14);
  --desc: #9aa3ad;
}

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

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

.easycodeGettingStartedContainer::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 4px, 4px 0;
  pointer-events: none; z-index: 0;
}
.easycodeGettingStartedContainer .gettingStarted { position: relative; z-index: 1; }

.gettingStartedSlide { width: 100%; height: 100%; padding: 12px 24px; }
.gettingStartedCategoriesContainer {
  display: grid;
  max-width: 1200px;   /* reverted back to wider style */
  margin: 0 auto;
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "prompt"
    "tabs"
    "community"
    "footer";
  gap: 32px 0;
  padding: 60px 20px;
  flex: 1; /* take available height */
  align-content: center; /* vertical centering of header + prompt + tabs */
}

.header { grid-area: header; text-align: center; align-self: end; padding-bottom: 10px; }
.header h1 { margin: 0 0 8px; font-weight: 900; letter-spacing: -0.02em; font-size: clamp(28px, 5vw, 44px); }
.header .title-blue { background: linear-gradient(135deg, #2563EB 0%, #2563EB 60%, #9333EA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.header .title-purple { color: var(--ec-purple); }
.header .subtitle { opacity: .9; font-weight: 500; max-width: 780px; margin: 0 auto; }

.prompt {
  grid-area: prompt;
  margin: 0 auto;
  width: 100%; /* full width of container */
}

.prompt .prompt-container { position: relative; }
.prompt textarea {
  width: 100%; min-height: 124px; resize: vertical; padding: 14px;
  border-radius: var(--ec-radius); border: 1px solid var(--ec-border); background: var(--ec-surface-1);
  color: var(--fg); outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.prompt textarea:focus {
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08), var(--ec-shadow-1);
}
.controller-wrapper {
  display: flex; justify-content: space-between; align-items: center;
  position: absolute; bottom: 8px; left: 8px; right: 8px; gap: 10px;
}

.nextui-button {
  border: 0; border-radius: 10px; padding: 8px 16px;
  background: var(--ec-surface-2); color: var(--fg);
  box-shadow: var(--ec-shadow-1);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.nextui-button:hover { transform: translateY(-1px); background: rgba(255,255,255,.10); }
.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; }

.prompt-suggestions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.suggestion-chip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px;
  background: var(--ec-surface-1); border: 1px solid var(--ec-border); color: var(--fg);
  cursor: pointer; user-select: none; transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.suggestion-chip:hover { transform: translateY(-1px); background: var(--ec-surface-2); border-color: rgba(255,255,255,.22); }

.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: var(--ec-surface-1); 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;
  transition: transform .15s ease, background .15s ease;
}
.tabs .controller-wrapper .monaco-button:hover { background: var(--ec-surface-2); transform: translateY(-1px); }
.tabs .controller-wrapper .monaco-button.active {
  background: #2563EB; color: #fff; box-shadow: 0 12px 28px -12px rgba(37,99,235,.55);
}

.template { grid-area: template; }
.community { grid-area: community; }

.template .template-container ul,
.community .template-container ul {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: stretch; /* NEW: make all items in a row equal height */
}

.element {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* NEW: distribute content evenly */
  gap: 6px;
  border-radius: var(--ec-radius);
  padding: 14px;
  background: var(--ec-surface-1);
  border: 1px solid var(--ec-border);
  box-shadow: var(--ec-shadow-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  cursor: pointer;
  overflow: hidden;
  height: 100%; /* NEW: stretch to match tallest in row */
}

.element:hover {
  transform: translateY(-4px);
  background: var(--ec-surface-2);
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--ec-shadow-2);
}
.element .thumbnail img { width: 100%; height: auto; border-radius: 10px; display: block; }
.element .title { margin: 0; font-weight: 600; }
.element .description { color: var(--desc); font-size: 13px; }
.element .tags { display: flex; gap: 6px; flex-wrap: wrap; color: var(--desc); }
.element .tags .tag {
  border: 1px solid var(--ec-border); background: var(--ec-surface-0);
  padding: 0 10px; line-height: 20px; border-radius: 999px; font-size: 12px;
}

.community-title { font-size: 1.4em; font-weight: 700; text-align: center; margin: 0 0 1rem; }

.image-chip-container { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.image-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 10px;
  background: var(--ec-blue); 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; }

.image-preview-dialog {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.image-preview-dialog img { max-width: 80%; max-height: 80%; object-fit: contain; }

.close-button {
  position: fixed; right: 20px; top: 20px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--ec-surface-2); border: 1px solid var(--ec-border);
  color: var(--fg); box-shadow: var(--ec-shadow-1); cursor: pointer; z-index: 1000;
}
.close-button:hover { background: rgba(255,255,255,.10); transform: translateY(-1px); }

@media (max-width: 900px) {
  .gettingStartedCategoriesContainer {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "prompt"
      "tabs"
      "community"
      "footer";
  }
  .controller-wrapper { position: static; margin-top: 8px; }
}

.nextui-button .button-icon,
.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;
}

/* NEW: button icons */
.image-button .button-icon {
  /* paperclip (white) */
  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 {
  /* arrow-right (white) */
  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>");
}

/* NEW: tab icons */
.tabs .controller-wrapper .monaco-button { display: inline-flex; align-items: center; gap: 6px; }

/* globe for Community */
.community-button .tab-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='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <circle cx='12' cy='12' r='10'/><path d='M2 12h20'/>\
    <path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10'/>\
    <path d='M12 2a15.3 15.3 0 0 0-4 10 15.3 15.3 0 0 0 4 10'/>\
  </svg>");
}
.recent-button .tab-icon {
  /* clock */
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/>\
  </svg>");
}
.open-button .tab-icon {
  /* folder-open */
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <path d='M3 20h18a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-7.59a2 2 0 0 1-1.41-.59L9.59 6A2 2 0 0 0 8.17 5H3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2z'/>\
  </svg>");
}

/* active tab uses white icons */
.tabs .controller-wrapper .monaco-button.active .tab-icon {
  filter: brightness(0) invert(1);
}

.nextui-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto; /* still allow hover so tooltip shows */
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, 0.9); /* darkened backdrop */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255,255,255,0.2);
  border-top-color: #2563EB; /* EasyCode blue */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

.gettingStartedCategoriesContainer {
  align-content: center; /* vertical centering of top sections */
}