/*
 * profile-cards.css — base styles for the locked profile cards.
 * Loaded once per profile page from the platform origin. User HTML
 * around the cards is unaffected; everything is namespaced under
 * .pageduo-card / .pageduo-* to avoid collisions with user CSS.
 *
 * Spec: spec-workspace-profile.md §3, §9.
 */

.pageduo-profile {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px 80px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  color: #1a1a1a;
}

.pageduo-card {
  margin: 24px 0;
}

.pageduo-card-error {
  padding: 16px 20px;
  border-radius: 12px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 14px;
}

/* ---------- avatar ---------- */

.pageduo-card-avatar .pageduo-avatar-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
}

.pageduo-card-avatar .pageduo-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14B8A6, #0D9488);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 1px;
  flex-shrink: 0;
  overflow: hidden;
}

.pageduo-card-avatar .pageduo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pageduo-card-avatar .pageduo-avatar-text {
  flex: 1;
  min-width: 0;
}

.pageduo-card-avatar .pageduo-avatar-name {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

.pageduo-card-avatar .pageduo-avatar-bio {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #4b5563;
  word-wrap: break-word;
}

.pageduo-card-avatar .pageduo-avatar-bio a {
  color: #4f46e5;
  text-decoration: underline;
}

/* ---------- gallery ----------
   Single-column stack of full-size cards, mirroring the /demos page
   layout: each row is one big card with an 800px-tall interactive
   iframe of the actual published page, title + meta + "open" link
   below. */

/* 2-column grid (owner direction 2026-07-09): the External Main Page site
   gallery is a mini-feed scoped to the workspace — two columns of large,
   interactive site cards that the page scrolls through vertically. Collapses
   to a single column on narrow viewports so a phone shows one card per row. */
.pageduo-card-gallery .pageduo-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}
@media (max-width: 720px) {
  .pageduo-card-gallery .pageduo-gallery-grid { grid-template-columns: 1fr; }
}

.pageduo-gallery-tile {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 160ms ease;
  color: inherit;
}

.pageduo-gallery-tile:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

.pageduo-gallery-thumb-initial {
  font-size: 96px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 1px;
}

/* Live, full-size iframe preview — same shape as the /demos
   TopCard: fixed 800px tall, interactive sandbox so the page
   actually plays inside the card. The "Open" link in the meta
   strip is the explicit nav target. */
.pageduo-gallery-preview {
  position: relative;
  width: 100%;
  /* Half-width in the 2-col grid → a shorter live preview keeps each cell a
     comfortable, scannable size (big enough to see, two per row). */
  height: 420px;
  background: #fff;
  overflow: hidden;
  isolation: isolate;
}

.pageduo-gallery-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  z-index: 2;
}

.pageduo-gallery-preview-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Legacy ogImage path — when present, paints over the live iframe so
   user-curated card art still wins. */
.pageduo-gallery-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
  pointer-events: none;
}

/* Smaller viewports: drop iframe height proportionally so a phone
   doesn't dedicate the whole screen to one card. */
@media (max-width: 720px) {
  .pageduo-gallery-preview { height: 480px; }
}
@media (max-width: 480px) {
  .pageduo-gallery-preview { height: 320px; }
}

.pageduo-gallery-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px 22px;
}

.pageduo-gallery-meta-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pageduo-gallery-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pageduo-gallery-sub {
  font-size: 13px;
  color: #6b7280;
}

/* Action row — mirrors the in-app /feed TopCard footer (owner 2026-07-12:
   "same as feed"): a solid-teal primary + an outline secondary, both
   full-radius pills at the same size. Wraps on narrow tiles. */
.pageduo-gallery-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* PRIMARY — "Customize your own version with AI" (brand-teal solid pill). */
.pageduo-gallery-customize {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 9999px;
  border: none;
  background: #14b8a6; /* --color-brand-teal */
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  transition: background 120ms ease;
}

.pageduo-gallery-customize:hover {
  background: #0d9080; /* --color-brand-teal-deep */
}

/* Disabled — a non-remixable site (matches the feed card's grayed state). */
.pageduo-gallery-customize-disabled,
.pageduo-gallery-customize-disabled:hover {
  background: #d1d5db;
  color: #6b7280;
  cursor: not-allowed;
  box-shadow: none;
}

/* SECONDARY — "Open in new tab" (outline pill). */
.pageduo-gallery-open {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 9999px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.pageduo-gallery-open:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #111827;
}

.pageduo-gallery-sentinel {
  height: 1px;
}

.pageduo-gallery-empty .pageduo-gallery-empty-msg {
  padding: 48px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 15px;
  border: 1px dashed #cbd0d8;
  /* Grey fill so an empty gallery reads as a distinct zone, not blank page
     (owner direction 2026-07-09). Theme-agnostic tint works on light + dark. */
  background: rgba(128, 128, 128, 0.09);
  border-radius: 12px;
}
.pageduo-gallery-empty .pageduo-gallery-empty-msg strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #344054;
  margin-bottom: 6px;
}
.pageduo-gallery-empty .pageduo-gallery-empty-sub {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
}

@media (prefers-color-scheme: dark) {
  .pageduo-profile { color: #e5e7eb; }
  .pageduo-card-avatar .pageduo-avatar-bio { color: #9ca3af; }
  .pageduo-gallery-tile { background: #1f2937; border-color: #374151; }
  .pageduo-gallery-preview { background: #fff; } /* keep white — iframe content is white */
  .pageduo-gallery-title { color: #f3f4f6; }
  .pageduo-gallery-sub { color: #9ca3af; }
  .pageduo-gallery-open {
    background: #111827;
    border-color: #374151;
    color: #f3f4f6;
  }
  .pageduo-gallery-open:hover { background: #1f2937; border-color: #4b5563; color: #fff; }
  /* Primary teal stays vivid on dark; disabled reads as a muted slate chip. */
  .pageduo-gallery-customize-disabled,
  .pageduo-gallery-customize-disabled:hover { background: #374151; color: #9ca3af; }
  .pageduo-gallery-empty .pageduo-gallery-empty-msg { color: #9ca3af; border-color: #374151; }
  .pageduo-gallery-empty .pageduo-gallery-empty-msg strong { color: #e5e7eb; }
  .pageduo-gallery-empty .pageduo-gallery-empty-sub { color: #9ca3af; }
  .pageduo-card-error { background: #7f1d1d; color: #fecaca; }
}

/* ---------- booking widget ---------- spec-booking-widget.md §5 + §19 mobile-first ---------- */

.pageduo-card-booking {
  margin: 24px 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}
.pageduo-booking {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.pageduo-booking-heading {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
  color: #111827;
}
.pageduo-booking-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #111827;
  letter-spacing: -0.01em;
}
.pageduo-booking-subtitle {
  font-size: 13px;
  margin: 0 0 18px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.pageduo-booking-screen-intake {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pageduo-booking-intake-intro {
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
  margin: 0;
}
.pageduo-booking-intake-textarea {
  font: inherit;
  font-size: 15px;
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  resize: vertical;
  background: #fff;
  color: #111827;
  outline: none;
  transition: border-color 120ms ease;
}
.pageduo-booking-intake-textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.pageduo-booking-intake-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pageduo-booking-intake-actions .pageduo-booking-cta {
  margin-left: auto;
}
.pageduo-booking-skip {
  background: transparent;
  border: none;
  color: #6b7280;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 10px;
}
.pageduo-booking-skip:hover {
  color: #111827;
}
/* Intake chat */
.pageduo-booking-intake-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}
.pageduo-booking-intake-bubble-ai,
.pageduo-booking-intake-bubble-me {
  font-size: 14px;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 12px;
  max-width: 85%;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.pageduo-booking-intake-bubble-ai {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #111827;
}
.pageduo-booking-intake-bubble-me {
  align-self: flex-end;
  background: #2563eb;
  color: #fff;
}
.pageduo-booking-intake-thinking {
  opacity: 0.6;
  font-style: italic;
}
.pageduo-booking-intake-input-row {
  display: flex;
  gap: 8px;
}
.pageduo-booking-intake-input {
  flex: 1;
  font: inherit;
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  outline: none;
}
.pageduo-booking-intake-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.pageduo-booking-intake-send {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
}
.pageduo-booking-intake-send:disabled { opacity: 0.5; cursor: not-allowed; }
.pageduo-booking-intake-send:hover:not(:disabled) { background: #1d4ed8; }
.pageduo-booking-intake-done-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}
/* Photo step — dual Take / Upload affordance */
.pageduo-booking-photo-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pageduo-booking-photo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 10px;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
  color: #374151;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.pageduo-booking-photo-btn:hover,
.pageduo-booking-photo-btn:focus-within {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}
.pageduo-booking-photo-btn-icon {
  font-size: 24px;
  line-height: 1;
}
.pageduo-booking-photo-btn-label {
  font-weight: 600;
}
/* Mobile: stack into a single column with bigger tap targets */
@media (max-width: 420px) {
  .pageduo-booking-photo-buttons {
    grid-template-columns: 1fr;
  }
  .pageduo-booking-photo-btn {
    padding: 22px 14px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
  }
  .pageduo-booking-photo-btn-icon { font-size: 28px; }
}
.pageduo-booking-photo-preview img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  margin-top: 8px;
  display: block;
}
.pageduo-booking-photo-status {
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}
.pageduo-booking-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  font-weight: 600;
  margin: 16px 0 8px;
}
.pageduo-booking-services {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pageduo-booking-service {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.pageduo-booking-service:hover { border-color: #d1d5db; background: #f9fafb; }
.pageduo-booking-service input { margin-top: 4px; flex-shrink: 0; }
.pageduo-booking-service-text { flex: 1; min-width: 0; }
.pageduo-booking-service-name { font-weight: 600; font-size: 14px; color: #111827; }
.pageduo-booking-service-meta { font-size: 13px; color: #6b7280; margin-top: 2px; }
.pageduo-booking-service-desc { font-size: 13px; color: #4b5563; margin-top: 6px; }

.pageduo-booking-calendar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}
.pageduo-booking-day {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
}
.pageduo-booking-day-header {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.pageduo-booking-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pageduo-booking-slot {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  min-height: 44px; /* touch target */
  transition: all 120ms ease;
}
.pageduo-booking-slot:hover { border-color: #14B8A6; }
.pageduo-booking-slot-active {
  border-color: #14B8A6;
  background: #eef2ff;
  color: #0F766E;
  font-weight: 600;
}

.pageduo-booking-cta {
  width: 100%;
  margin-top: 16px;
  padding: 14px 20px;
  background: #4f46e5;
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: background 120ms ease;
}
.pageduo-booking-cta:hover { background: #0F766E; }
.pageduo-booking-cta:disabled { background: #d1d5db; cursor: not-allowed; }

.pageduo-booking-back {
  background: transparent;
  border: 0;
  color: #6b7280;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 8px;
  padding: 4px 0;
}

.pageduo-booking-summary {
  background: #f9fafb;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pageduo-booking-summary-line { font-size: 14px; color: #111827; }

.pageduo-booking-form { display: flex; flex-direction: column; gap: 12px; }
.pageduo-booking-field { display: flex; flex-direction: column; gap: 4px; }
.pageduo-booking-field-row { display: flex; gap: 12px; }
.pageduo-booking-field-row > .pageduo-booking-field { flex: 1; min-width: 0; }
@media (max-width: 380px) {
  .pageduo-booking-field-row { flex-direction: column; gap: 12px; }
}
.pageduo-booking-field label { font-size: 13px; font-weight: 500; color: #374151; }
.pageduo-booking-field input,
.pageduo-booking-field textarea {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  min-height: 44px;
  box-sizing: border-box;
}
.pageduo-booking-field input:focus,
.pageduo-booking-field textarea:focus {
  outline: none;
  border-color: #14B8A6;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

.pageduo-booking-cancel-line {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}
.pageduo-booking-sms-consent {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.45;
  margin: -2px 0 4px;
}
.pageduo-booking-tz-note {
  font-size: 11px;
  color: #9ca3af;
  text-align: center;
  margin-top: 12px;
  font-style: italic;
}
.pageduo-booking-resched-context {
  font-size: 13px;
  color: #5f6368;
  background: #f1f3f4;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 12px;
  line-height: 1.4;
}
.pageduo-booking-error {
  font-size: 13px;
  color: #b91c1c;
  margin-top: 4px;
}

.pageduo-booking-screen-done {
  text-align: center;
  padding: 16px 0;
}
.pageduo-booking-tick {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.pageduo-booking-confirmation {
  font-size: 13px;
  color: #6b7280;
  margin-top: 8px;
}
.pageduo-booking-manage,
.pageduo-booking-gcal {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  color: #4f46e5;
  text-decoration: none;
  background: #fff;
}
.pageduo-booking-manage:hover,
.pageduo-booking-gcal:hover { background: #f9fafb; }

.pageduo-booking-empty,
.pageduo-booking-loading {
  padding: 24px 12px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

@media (prefers-color-scheme: dark) {
  .pageduo-booking { background: #1f2937; border-color: #374151; }
  .pageduo-booking-heading { color: #f9fafb; }
  .pageduo-booking-service { background: #111827; border-color: #374151; }
  .pageduo-booking-service:hover { background: #1f2937; border-color: #4b5563; }
  .pageduo-booking-service-name { color: #f3f4f6; }
  .pageduo-booking-calendar { background: #111827; border-color: #374151; }
  .pageduo-booking-day { background: #1f2937; }
  .pageduo-booking-slot { background: #1f2937; border-color: #374151; color: #d1d5db; }
  .pageduo-booking-slot-active { background: #0F766E; color: #fff; border-color: #14B8A6; }
  .pageduo-booking-summary { background: #111827; }
  .pageduo-booking-summary-line { color: #f3f4f6; }
  .pageduo-booking-field input,
  .pageduo-booking-field textarea { background: #111827; border-color: #374151; color: #f3f4f6; }
  .pageduo-booking-manage,
  .pageduo-booking-gcal { background: #1f2937; border-color: #374151; color: #c7d2fe; }
}