/* ─────────────────────────────────────────────────────────────
   Capraseo — chat page (index.html)
   Hero, composer, chips/dropdowns, suggested chips, upgrade pill.
   ───────────────────────────────────────────────────────────── */

/* Override generic .center to center vertically (hero-style) */
.center.center-hero {
  justify-content: center;
  gap: 72px;
}

/* Upgrade pill in stage-top — premium gold-tinted CTA.
   Layered material: warm gold lift at the top, cool body, inner top
   highlight for "lit-from-above" depth, soft outer gold ambient glow
   so the button reads as luminous against the dark stage. */
.upgrade {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  background:
    linear-gradient(180deg,
      rgba(230, 196, 122, 0.10) 0%,
      rgba(255, 255, 255, 0.02) 38%,
      rgba(20, 20, 23, 0.40) 100%),
    rgba(22, 22, 25, 0.55);
  border: 1px solid rgba(230, 196, 122, 0.22);
  border-radius: 999px;
  color: rgba(243, 243, 245, 0.92);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 6px 20px -10px rgba(230, 196, 122, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.35);
  transition:
    border-color 200ms cubic-bezier(0.32, 0.72, 0, 1),
    color 200ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 200ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.upgrade:hover {
  border-color: rgba(230, 196, 122, 0.45);
  color: #f8f8f8;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 10px 26px -8px rgba(230, 196, 122, 0.42),
    0 2px 4px rgba(0, 0, 0, 0.40);
}
.upgrade:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
}
.upgrade:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.upgrade .star {
  color: var(--gold);
  display: inline-flex;
  filter: drop-shadow(0 0 4px rgba(230, 196, 122, 0.45));
  transition:
    filter 200ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.upgrade:hover .star {
  filter: drop-shadow(0 0 9px rgba(230, 196, 122, 0.80));
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .upgrade, .upgrade .star { transition: none; }
  .upgrade:hover, .upgrade:active { transform: none; }
  .upgrade:hover .star { transform: none; }
}

/* Hero */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; }

.logo {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  position: relative;
}
.logo::after {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.06), transparent 70%);
  z-index: -1;
}
.logo .logo-glyph {
  display: block;
  width: 140px;
  height: 140px;
}

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  color: rgba(232, 232, 234, 0.38);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 18px 0;
}
.title {
  font-size: 34px;
  font-weight: 500;
  color: #f3f3f5;
  margin: 0;
  letter-spacing: -0.02em;
}
.sub {
  margin-top: 14px;
  color: var(--muted-2);
  font-size: 14px;
  font-weight: 400;
}

/* Suggested prompt chips */
.suggested {
  display: flex;
  gap: 18px;
  margin-top: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.suggested-chip {
  height: 30px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  color: rgba(200, 200, 210, 0.5);
  font-size: 12.5px;
  font-weight: 400;
  font-family: inherit;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.suggested-chip:hover {
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}

/* Composer */
.composer {
  width: min(640px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.composer::before {
  content: "";
  position: absolute;
  inset: -50px -80px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.04), transparent 65%);
  pointer-events: none;
  z-index: -1;
}

.chatcard {
  position: relative;
  background:
    linear-gradient(180deg, rgba(28,28,32,0.7) 0%, rgba(18,18,21,0.78) 100%);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 14px 50px -16px rgba(0,0,0,0.6);
  overflow: hidden;
}

.input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 18px;
}
.input-wrap .plus {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #b8b8c0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.input-wrap .plus:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.divider-v { width: 1px; height: 22px; background: rgba(255,255,255,0.08); }
.input-wrap input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  letter-spacing: -0.005em;
}
.input-wrap input::placeholder { color: #5a5a63; }

.send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: linear-gradient(180deg, #2a2a30, #1a1a1d);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #e8e8ea;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.18s ease, border-color 0.18s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 4px 12px -4px rgba(0,0,0,0.5);
}
.send:hover {
  background: linear-gradient(180deg, #35353c, #212125);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}
.send:active { transform: translateY(0); }

/* Chips + dropdowns */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dropdown { position: relative; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  background: rgba(22,22,25,0.22);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 8px;
  color: rgba(200,200,210,0.42);
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
  backdrop-filter: blur(6px);
}
.chip:hover,
.chip.open {
  background: rgba(22,22,25,0.55);
  border-color: rgba(255,255,255,0.1);
  color: var(--text);
}
.chip:hover:not(.open) { transform: translateY(-1px); }
.chip .chip-icon { opacity: 0.7; display: inline-flex; width: 12px; height: 12px; }
.chip .chip-icon svg { width: 12px; height: 12px; }
.chip .chip-label {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Lock font-size/weight/color so the three chips (skill, model, MCP)
     always render their selected text identically — independent of any
     inherited weight or color from elsewhere in the cascade. */
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: inherit;
}
.chip .chev {
  opacity: 0.45;
  display: inline-flex;
  transition: transform 0.2s ease;
  margin-left: 1px;
}
.chip .chev svg { width: 10px; height: 10px; }
.chip.open .chev { transform: rotate(180deg); }

.menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(28,28,32,0.95), rgba(18,18,21,0.95));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow:
    0 20px 40px -12px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
  z-index: 10;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #c0c0c8;
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.menu-item:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.menu-item .mi-icon { opacity: 0.7; display: inline-flex; flex-shrink: 0; }
.menu-item .mi-label { flex: 1; }
.menu-item .mi-check { opacity: 0; color: var(--accent); display: inline-flex; }
.menu-item.selected .mi-check { opacity: 1; }
.menu-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 6px 4px; }
.menu-item.add { color: #9a9aa2; }
.menu-item.add:hover { color: var(--text); }
.menu-item.add .mi-icon { opacity: 0.9; }

/* Model dropdown opens upward and scrolls — the list of providers is
   long enough that anchoring it below the chip pushes options off the
   bottom of the viewport with no way to reach them. */
.dropdown[data-dropdown="model"] .menu {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateY(4px);
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.dropdown[data-dropdown="model"] .menu::-webkit-scrollbar { width: 4px; }
.dropdown[data-dropdown="model"] .menu::-webkit-scrollbar-track { background: transparent; }
.dropdown[data-dropdown="model"] .menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 4px;
}
.dropdown[data-dropdown="model"] .menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.28);
}
.dropdown[data-dropdown="model"] .menu.open { transform: translateY(0); }
.dropdown[data-dropdown="model"] .menu-item {
  padding: 6px 9px;
  font-size: 11.5px;
  gap: 8px;
}
.dropdown[data-dropdown="model"] .menu-item .mi-icon svg,
.dropdown[data-dropdown="model"] .menu-item .mi-check svg {
  width: 12px;
  height: 12px;
}

/* Type-to-filter field injected into the skill + model menus
   (js/dropdown-search.js). Sticks to the top of the scrolling menu so
   it stays reachable while the list scrolls under it. The negative
   margins bleed it over the .menu 6px padding so it spans edge to edge;
   the near-opaque background hides rows scrolling beneath it. */
.menu-search {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -6px -6px 4px;
  padding: 9px 12px;
  background: rgba(20,20,24,0.98);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px 12px 0 0;
}
.menu-search.ms-collapsed { display: none; }
.menu-search .ms-icon { display: inline-flex; color: #7a7a82; flex-shrink: 0; }
.menu-search .ms-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
}
.menu-search .ms-input::placeholder { color: #6c6c74; }
.menu-item.ms-hidden,
.menu-divider.ms-hidden,
.menu-empty.ms-hidden { display: none !important; }
.menu-empty {
  padding: 10px;
  color: #7a7a82;
  font-size: 12.5px;
  text-align: center;
}

/* Shared hover tooltip used by the model and MCP dropdowns —
   single element on <body>, positioned by js/chip-tooltip.js.
   Position fixed so it can sit outside the scrolling menu without
   being clipped. */
.chip-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  min-width: 140px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(28,28,32,0.98), rgba(18,18,21,0.98));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow:
    0 12px 28px -10px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  color: #d8d8e0;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.08s ease;
}
.chip-tooltip.visible { opacity: 1; }
.chip-tooltip .tt-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.chip-tooltip .tt-k { color: #8a8a92; }
.chip-tooltip .tt-v {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.chip-tooltip .tt-foot {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: #6f6f78;
  font-size: 10px;
  text-align: center;
}
.chip-tooltip .tt-empty { color: #8a8a92; }
.chip-tooltip .tt-title {
  display: block;
  color: var(--text);
  font-weight: 600;
  font-size: 11.5px;
  margin-bottom: 4px;
}
.chip-tooltip .tt-body {
  max-width: 220px;
  color: #b4b4bc;
  font-size: 11px;
  line-height: 1.4;
}

/* Full-screen modal (add new skill / domain) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  animation: modalIn 0.18s ease-out;
}
.modal[hidden] { display: none; }

@keyframes modalIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-card {
  position: relative;
  width: min(440px, 100%);
  padding: 28px 26px 22px;
  background: linear-gradient(180deg, rgba(28,28,32,0.96), rgba(18,18,21,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow:
    0 30px 60px -16px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.04);
  animation: modalCardIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modalCardIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: rgba(200,200,210,0.55);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: rgba(255,255,255,0.05); color: var(--text); }

.modal-title {
  margin: 0 0 6px 0;
  font-size: 17px;
  font-weight: 500;
  color: #f3f3f5;
  letter-spacing: -0.01em;
}
.modal-sub {
  margin: 0 0 20px 0;
  font-size: 13px;
  color: var(--muted);
}

.modal-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: 0;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.modal-input:focus {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}
.modal-input::placeholder { color: #5a5a63; }

.modal-body {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  margin-top: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  outline: 0;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.modal-body:focus {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}
.modal-body::placeholder { color: #5a5a63; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.modal-cancel,
.modal-confirm {
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.modal-cancel {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
}
.modal-cancel:hover {
  border-color: rgba(255,255,255,0.18);
  color: var(--text);
}
.modal-confirm {
  background: linear-gradient(180deg, #2a2a30, #1a1a1d);
  border: 1px solid rgba(255,255,255,0.12);
  color: #f3f3f5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.modal-confirm:hover {
  background: linear-gradient(180deg, #35353c, #212125);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}
.modal-confirm:active { transform: translateY(0); }