/* GregPlitt 2026 — Greg AI chat widget. Dark, on-brand, portal-parity. */
.gp-gregai-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 16px 56px;
  color: var(--gp-text, #fff);
  font-family: var(--gp-font-body, inherit);
}

/* ---- Member CTA (non-members) ---- */
.gp-gregai-cta { text-align: center; padding: 64px 20px; }
.gp-gregai-cta__title {
  font-family: var(--gp-font-display, inherit);
  font-size: 2.4rem; color: var(--gp-text, #fff); margin: 0 0 14px;
}
.gp-gregai-cta__lead {
  max-width: 560px; margin: 0 auto 26px;
  color: var(--gp-text-dim, rgba(255,255,255,.6)); line-height: 1.6;
}
.gp-gregai-cta__sub { margin-top: 16px; font-size: .9rem; color: var(--gp-text-muted, rgba(255,255,255,.4)); }
.gp-gregai-cta__sub a, .gp-gregai-cta__btn { color: var(--gp-gold, #ffba00); }

/* ---- Shared ---- */
.gp-gregai {
  --ai-gold: var(--gp-gold, #ffba00);
  --ai-line: rgba(255,255,255,.08);
  color: var(--gp-text, #fff);
}
.gp-gregai__loading { padding: 48px; text-align: center; color: var(--gp-text-dim, rgba(255,255,255,.55)); }

/* ---- Liability gate ---- */
.gp-gregai__gate {
  max-width: 580px; margin: 24px auto; padding: 26px;
  border: 1px solid var(--ai-line); border-radius: 16px; background: var(--gp-surface, #0c0c0c);
}
.gp-gregai__gate-title { font-family: var(--gp-font-display, inherit); margin: 0 0 10px; font-size: 1.5rem; color: var(--gp-text, #fff); }
.gp-gregai__gate-text { color: var(--gp-text-dim, rgba(255,255,255,.6)); line-height: 1.6; font-size: .95rem; }
.gp-gregai__gate-check { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; font-size: .9rem; color: var(--gp-text-dim, rgba(255,255,255,.7)); line-height: 1.55; }
.gp-gregai__gate-check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--ai-gold); }
.gp-gregai__gate-check a { color: var(--ai-gold); text-decoration: underline; }
.gp-gregai__gate-btn[disabled] { opacity: .45; cursor: not-allowed; }
.gp-gregai__gate-err { color: #ff6b6b; font-size: .9rem; margin-top: 12px; }

/* ---- Shell (sidebar + chat) ---- */
.gp-gregai__shell {
  display: flex;
  height: min(74vh, 680px);
  border: 1px solid var(--ai-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--gp-surface, #0c0c0c);
}
.gp-gregai__side {
  width: 240px; flex: 0 0 auto;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--ai-line);
  background: var(--gp-bg, #050505);
}
/* Sidebar header (close button) — only meaningful on mobile slide-over. */
.gp-gregai__side-head { display: none; align-items: center; justify-content: space-between; padding: 10px 12px 0; }
.gp-gregai__side-title { font-family: var(--gp-font-display, inherit); letter-spacing: .04em; color: var(--gp-text-dim, rgba(255,255,255,.6)); font-size: .9rem; }
.gp-gregai__side-close { border: 0; background: transparent; color: var(--gp-text, #fff); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 4px 6px; }
/* Backdrop behind the mobile slide-over. */
.gp-gregai__backdrop { display: none; position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,.55); }
.gp-gregai__new {
  margin: 12px; padding: 10px 12px;
  border: 1px solid var(--ai-line); border-radius: 10px;
  background: transparent; color: var(--gp-text, #fff);
  font-family: var(--gp-font-body, inherit); font-size: .9rem; cursor: pointer;
}
.gp-gregai__new:hover { border-color: var(--ai-gold); color: var(--ai-gold); }
.gp-gregai__list { flex: 1 1 auto; overflow-y: auto; padding: 0 8px 12px; }
.gp-gregai__row { position: relative; display: flex; align-items: center; }
.gp-gregai__row-btn {
  flex: 1 1 auto; min-width: 0; text-align: left;
  padding: 9px 30px 9px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--gp-text-dim, rgba(255,255,255,.7));
  font: inherit; font-size: .82rem; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gp-gregai__row.is-active .gp-gregai__row-btn { background: rgba(255,255,255,.06); color: var(--gp-text, #fff); }
.gp-gregai__row:hover .gp-gregai__row-btn { background: rgba(255,255,255,.04); color: var(--gp-text, #fff); }
.gp-gregai__row-del {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; opacity: 0;
  font-size: .8rem; padding: 4px; line-height: 1; color: var(--gp-text-muted, rgba(255,255,255,.5));
}
.gp-gregai__row:hover .gp-gregai__row-del { opacity: 1; }
.gp-gregai__row-del:hover { color: #ff6b6b; }

/* ---- Main ---- */
.gp-gregai__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gp-gregai__bar {
  display: none; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--ai-line);
}
.gp-gregai__menu { border: 0; background: transparent; color: var(--gp-text, #fff); font-size: 1.1rem; cursor: pointer; }
.gp-gregai__bar-title { font-family: var(--gp-font-display, inherit); letter-spacing: .04em; }

.gp-gregai__messages { flex: 1 1 auto; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.gp-gregai__empty { margin: auto; text-align: center; padding: 24px; }
.gp-gregai__empty-title { font-family: var(--gp-font-display, inherit); font-size: 1.6rem; color: var(--gp-text, #fff); }
.gp-gregai__empty-sub { color: var(--gp-text-dim, rgba(255,255,255,.55)); margin: 6px 0 18px; }
.gp-gregai__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 560px; margin: 0 auto; }
.gp-gregai__chip {
  border: 1px solid var(--ai-line); border-radius: 999px;
  background: var(--gp-surface-2, #141414); color: var(--gp-text-dim, rgba(255,255,255,.8));
  padding: 8px 14px; font: inherit; font-size: .85rem; cursor: pointer;
}
.gp-gregai__chip:hover { border-color: var(--ai-gold); color: var(--gp-text, #fff); }

.gp-gregai__msg { display: flex; }
.gp-gregai__msg--user { justify-content: flex-end; }
.gp-gregai__bubble {
  max-width: 82%; padding: 11px 15px; border-radius: 16px; line-height: 1.55;
  white-space: pre-wrap; word-wrap: break-word; font-size: 1rem; color: var(--gp-text, #fff);
}
.gp-gregai__msg--assistant .gp-gregai__bubble {
  background: var(--gp-surface-2, #141414); border-left: 2px solid var(--ai-gold); border-top-left-radius: 6px;
}
.gp-gregai__msg--user .gp-gregai__bubble {
  background: rgba(255,186,0,.16); border: 1px solid rgba(255,186,0,.28); border-top-right-radius: 6px;
}

.gp-gregai__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--ai-line); background: var(--gp-surface, #0c0c0c); }
.gp-gregai__input {
  flex: 1 1 auto; resize: none; max-height: 140px; min-height: 46px; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  background: var(--gp-surface-2, #141414); color: var(--gp-text, #fff); caret-color: var(--ai-gold);
  font-family: var(--gp-font-body, inherit); font-size: 16px; line-height: 1.4; outline: none;
}
.gp-gregai__input::placeholder { color: var(--gp-text-muted, rgba(255,255,255,.4)); }
.gp-gregai__input:focus { border-color: var(--ai-gold); }
.gp-gregai__send {
  flex: 0 0 auto; padding: 0 20px; border: 0; border-radius: 12px;
  background: var(--ai-gold); color: var(--gp-text-on-gold, #050505);
  font-family: var(--gp-font-display, inherit); letter-spacing: .04em; font-weight: 700; text-transform: uppercase; cursor: pointer;
}
.gp-gregai__send:hover { background: var(--gp-gold-deep, #d69a00); }

/* ---- Mobile: sidebar becomes a slide-over ---- */
@media (max-width: 720px) {
  /* Full-bleed app screen; JS sizes .gp-gregai__shell to the visible viewport. */
  .gp-gregai-page { padding: 0; max-width: none; }
  .gp-gregai__bar { display: flex; }
  .gp-gregai__shell {
    position: relative;
    height: 74vh; /* fallback; JS overrides with the visible-viewport height */
    border-radius: 0; border-left: 0; border-right: 0;
  }
  .gp-gregai__side {
    position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; width: 80%; max-width: 320px;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.5);
  }
  .gp-gregai__side.is-open { transform: translateX(0); }
  .gp-gregai__side-head { display: flex; }
  .gp-gregai__backdrop.is-open { display: block; }
}