/* PicToPost — Frontend Styles — v1.3.2 Light Theme */

#pictopost-app {
  /* ── COLOR PALETTE ─────────────────────────────────────────────── */
  --ptp-bg:        #FFFFFF;
  --ptp-card-bg:   #F8F9FB;
  --ptp-input-bg:  #FFFFFF;
  --ptp-border:    #E2E5EB;
  --ptp-border-focus: #8B5CF6;
  --ptp-text:      #1A1D23;
  --ptp-text-soft: #5A6172;
  --ptp-muted:     #8B92A0;
  --ptp-purple:    #8B5CF6;
  --ptp-purple-hover: #7C3AED;
  --ptp-cyan:      #0EA5C9;
  --ptp-green:     #16A34A;
  --ptp-header-bg: #1A1D23;
  --ptp-tint:      #F1F0FF;
  --ptp-warning:   #D97706;
  --ptp-danger:    #DC2626;

  /* ── TYPOGRAPHY — clamp(min, preferred, max) ───────────────────── */
  --ptp-font-xs:   clamp(0.72rem, 0.65rem + 0.3vw, 0.8rem);
  --ptp-font-sm:   clamp(0.82rem, 0.75rem + 0.3vw, 0.92rem);
  --ptp-font-base: clamp(0.95rem, 0.88rem + 0.35vw, 1.08rem);
  --ptp-font-md:   clamp(1.0rem, 0.92rem + 0.4vw, 1.15rem);
  --ptp-font-lg:   clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --ptp-font-xl:   clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);

  /* ── SPACING ───────────────────────────────────────────────────── */
  --ptp-radius:    10px;
  --ptp-radius-sm: 7px;
  --ptp-radius-pill: 100px;

  /* ── BASE ──────────────────────────────────────────────────────── */
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  color: var(--ptp-text);
  max-width: 1280px;
  margin: 0 auto;
  background: var(--ptp-bg);
  padding: 0 0 40px;
  border-radius: var(--ptp-radius) var(--ptp-radius) 0 0;
  font-size: var(--ptp-font-base);
  line-height: 1.55;
}

/* ── HEADER ────────────────────────────────────────────────────────── */
.ptp-header {
  background: var(--ptp-header-bg);
  padding: 18px 28px;
  border-radius: var(--ptp-radius) var(--ptp-radius) 0 0;
  display: flex; align-items: center; gap: 12px;
}
.ptp-logo { font-weight: 700; font-size: var(--ptp-font-xl); color: #fff; letter-spacing: -0.5px; }
.ptp-logo span { color: var(--ptp-purple); }
.ptp-user { margin-left: auto; font-size: var(--ptp-font-sm); color: rgba(255,255,255,0.6); }

/* ── TABS ──────────────────────────────────────────────────────────── */
.ptp-tabs {
  background: var(--ptp-card-bg);
  padding: 0 28px;
  border-bottom: 2px solid var(--ptp-border);
  display: flex; gap: 4px;
}
.ptp-tab {
  font-family: inherit;
  font-size: var(--ptp-font-xs);
  font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  padding: 13px 20px; color: var(--ptp-muted);
  cursor: pointer; border: none; background: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px; transition: all 0.2s;
}
.ptp-tab:hover { color: var(--ptp-text); }
.ptp-tab-active { color: var(--ptp-purple) !important; border-bottom-color: var(--ptp-purple) !important; }

/* ── PANELS ────────────────────────────────────────────────────────── */
.ptp-panel { padding: 28px; }

/* ── CARDS ──────────────────────────────────────────────────────────── */
.ptp-card {
  background: var(--ptp-card-bg);
  border: 1px solid var(--ptp-border);
  border-radius: var(--ptp-radius);
  padding: 24px; margin-bottom: 20px;
}

/* ── SECTION TITLES ────────────────────────────────────────────────── */
.ptp-section-title {
  font-size: var(--ptp-font-md); font-weight: 600;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
  color: var(--ptp-text);
}
.ptp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ptp-purple); flex-shrink: 0; }
.ptp-section-desc {
  font-size: var(--ptp-font-sm); color: var(--ptp-text-soft);
  margin-bottom: 16px; line-height: 1.55;
}

/* ── LABELS & INPUTS ───────────────────────────────────────────────── */
.ptp-label {
  display: block; font-size: var(--ptp-font-xs); font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--ptp-text-soft); margin-bottom: 6px;
}
.ptp-input, .ptp-textarea, .ptp-select {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--ptp-border); border-radius: var(--ptp-radius-sm);
  font-family: inherit; font-size: var(--ptp-font-base);
  color: var(--ptp-text); background: var(--ptp-input-bg);
  transition: border-color 0.2s; margin-bottom: 16px; box-sizing: border-box;
}
.ptp-input:focus, .ptp-textarea:focus, .ptp-select:focus {
  outline: none; border-color: var(--ptp-border-focus);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.ptp-textarea { resize: vertical; line-height: 1.55; }
.ptp-input-small { width: 72px; text-align: center; margin-bottom: 0; padding: 8px 10px; }
.ptp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── PHOTO DROP ────────────────────────────────────────────────────── */
.ptp-photo-drop {
  border: 2px dashed var(--ptp-border); border-radius: var(--ptp-radius);
  padding: 32px; text-align: center; cursor: pointer;
  transition: all 0.2s; background: var(--ptp-input-bg);
  margin-bottom: 16px; position: relative;
}
.ptp-photo-drop:hover { border-color: var(--ptp-purple); background: var(--ptp-tint); }
.ptp-photo-drop input[type="file"] {
  position: absolute; inset: 0; opacity: 0;
  cursor: pointer; width: 100%; height: 100%;
  margin: 0; padding: 0; border: none;
}
.ptp-drop-icon { font-size: 2.4rem; margin-bottom: 8px; }
.ptp-drop-text { font-weight: 600; font-size: var(--ptp-font-base); color: var(--ptp-text); }
.ptp-drop-sub { font-size: var(--ptp-font-sm); color: var(--ptp-muted); margin-top: 4px; }

/* ── PHOTO PREVIEW ─────────────────────────────────────────────────── */
.ptp-photo-preview {
  position: relative; border-radius: var(--ptp-radius); overflow: hidden;
  border: 1.5px solid var(--ptp-border); margin-bottom: 16px;
  background: #f0f0f0;
}
.ptp-photo-preview img {
  width: 100%; max-height: 420px; object-fit: contain; display: block;
}
.ptp-remove-photo {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.55); color: #fff;
  border: none; border-radius: 50%;
  width: 28px; height: 28px; font-size: 0.9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.ptp-remove-photo:hover { background: rgba(0,0,0,0.8); }

/* ── PILLS ─────────────────────────────────────────────────────────── */
.ptp-pill-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ptp-pill {
  padding: 7px 16px; border-radius: var(--ptp-radius-pill);
  border: 1.5px solid var(--ptp-border);
  font-size: var(--ptp-font-sm); font-weight: 500; cursor: pointer;
  transition: all 0.2s; background: var(--ptp-input-bg);
  color: var(--ptp-text); user-select: none;
}
.ptp-pill:hover { border-color: var(--ptp-purple); color: var(--ptp-purple); }
.ptp-pill-selected {
  background: var(--ptp-purple) !important;
  border-color: var(--ptp-purple) !important;
  color: #fff !important;
}

/* ── BUTTONS ───────────────────────────────────────────────────────── */
.ptp-btn-generate {
  width: 100%; padding: 15px;
  background: var(--ptp-purple); color: #fff;
  border: none; border-radius: var(--ptp-radius-sm);
  font-family: inherit; font-size: var(--ptp-font-base); font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 6px;
}
.ptp-btn-generate:hover { background: var(--ptp-purple-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139,92,246,0.3); }
.ptp-btn-generate:disabled { background: #D1D5DB; cursor: not-allowed; transform: none; box-shadow: none; }

.ptp-btn-copy, .ptp-btn-save, .ptp-btn-regen, .ptp-btn-save-profile, .ptp-btn-load-more {
  padding: 9px 18px; border-radius: var(--ptp-radius-sm);
  font-family: inherit; font-size: var(--ptp-font-sm); font-weight: 500;
  cursor: pointer; transition: all 0.2s;
  border: 1.5px solid var(--ptp-border);
  background: var(--ptp-input-bg); color: var(--ptp-text);
}
.ptp-btn-copy:hover   { border-color: var(--ptp-cyan); color: var(--ptp-cyan); }
.ptp-btn-save:hover   { border-color: var(--ptp-purple); color: var(--ptp-purple); }
.ptp-btn-regen:hover  { border-color: var(--ptp-muted); color: var(--ptp-text-soft); }
.ptp-btn-save-profile {
  background: var(--ptp-purple); color: #fff; border-color: var(--ptp-purple);
}
.ptp-btn-save-profile:hover { background: var(--ptp-purple-hover); border-color: var(--ptp-purple-hover); }
.ptp-btn-load-more { display: block; margin: 16px auto 0; padding: 11px 30px; }

/* ── MULTI-PLATFORM OUTPUT ─────────────────────────────────────────── */
.ptp-multi-output { display: flex; flex-direction: column; gap: 18px; }
.ptp-post-block {
  border: 1.5px solid var(--ptp-border);
  border-radius: var(--ptp-radius); overflow: hidden;
  background: var(--ptp-input-bg);
}
.ptp-post-block-header {
  padding: 10px 16px; background: var(--ptp-header-bg); color: #fff;
  font-size: var(--ptp-font-xs); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
}
.ptp-post-block-textarea {
  width: 100%; min-height: 130px; padding: 16px;
  border: none; border-bottom: 1px solid var(--ptp-border);
  font-family: inherit; font-size: var(--ptp-font-base);
  color: var(--ptp-text); background: var(--ptp-input-bg);
  line-height: 1.6; resize: vertical; box-sizing: border-box;
}
.ptp-post-block-textarea:focus { outline: none; background: #FAFAFF; }
.ptp-post-block-footer {
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ptp-char-indicator { font-size: var(--ptp-font-xs); margin-left: auto; }
.ptp-char-ok   { color: var(--ptp-cyan); }
.ptp-char-warn { color: var(--ptp-warning); }
.ptp-char-over { color: var(--ptp-danger); font-weight: 600; }
.ptp-platform-limit { font-size: var(--ptp-font-xs); color: var(--ptp-muted); margin-left: 8px; }

/* ── PROFILE BAR ───────────────────────────────────────────────────── */
.ptp-profile-summary {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; background: var(--ptp-tint);
  border: 1.5px solid #DDD6FE;
  border-radius: var(--ptp-radius-sm); margin-bottom: 20px;
}
.ptp-profile-icon { font-size: 1.6rem; }
.ptp-profile-name { font-weight: 700; font-size: var(--ptp-font-base); color: var(--ptp-text); }
.ptp-profile-detail { font-size: var(--ptp-font-sm); color: var(--ptp-text-soft); margin-top: 2px; }
.ptp-no-profile {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; background: #FFF7ED;
  border: 1.5px solid #FED7AA;
  border-radius: var(--ptp-radius-sm); margin-bottom: 20px;
  font-size: var(--ptp-font-sm); color: #92400E;
}
.ptp-no-profile a { color: var(--ptp-purple); font-weight: 600; text-decoration: none; }
.ptp-no-profile a:hover { text-decoration: underline; }

/* ── HISTORY ───────────────────────────────────────────────────────── */
.ptp-history-item {
  border: 1.5px solid var(--ptp-border);
  border-radius: var(--ptp-radius); overflow: hidden;
  margin-bottom: 12px; background: var(--ptp-input-bg);
  cursor: pointer; transition: border-color 0.2s;
}
.ptp-history-item:hover { border-color: var(--ptp-purple); }
.ptp-history-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.ptp-history-thumb {
  width: 56px; height: 42px; object-fit: cover;
  border-radius: 6px; flex-shrink: 0; background: var(--ptp-border); cursor: pointer;
}
.ptp-history-thumb-placeholder {
  width: 56px; height: 42px; border-radius: 6px;
  background: var(--ptp-card-bg); border: 1px solid var(--ptp-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.ptp-history-meta { flex: 1; min-width: 0; }
.ptp-history-platform {
  font-size: var(--ptp-font-xs); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ptp-text);
}
.ptp-history-preview {
  font-size: var(--ptp-font-sm); color: var(--ptp-text-soft); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ptp-history-date { font-size: var(--ptp-font-xs); color: var(--ptp-muted); flex-shrink: 0; }
.ptp-history-body { display: none; padding: 0 16px 16px; border-top: 1px solid var(--ptp-border); }
.ptp-history-body.open { display: block; }
.ptp-history-text {
  white-space: pre-wrap; font-size: var(--ptp-font-base);
  line-height: 1.6; padding: 14px 0; color: var(--ptp-text);
}
.ptp-history-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ptp-published-badge {
  font-size: var(--ptp-font-xs); font-weight: 600;
  padding: 4px 12px; border-radius: var(--ptp-radius-pill);
  background: #ECFDF5; color: var(--ptp-green);
  cursor: pointer; border: 1px solid #A7F3D0;
}
.ptp-published-badge.unpublished {
  background: var(--ptp-card-bg); color: var(--ptp-muted); border-color: var(--ptp-border);
}
.ptp-edited-badge { font-size: var(--ptp-font-xs); color: var(--ptp-muted); }

/* ── STATUS ────────────────────────────────────────────────────────── */
.ptp-status-saved { color: var(--ptp-green); font-size: var(--ptp-font-sm); font-weight: 500; }
.ptp-status-error { color: var(--ptp-danger); font-size: var(--ptp-font-sm); }

/* ── HASHTAG SETTINGS ──────────────────────────────────────────────── */
.ptp-hashtag-grid { display: flex; flex-direction: column; gap: 12px; }
.ptp-hashtag-row {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; background: var(--ptp-input-bg);
  border: 1px solid var(--ptp-border); border-radius: var(--ptp-radius-sm);
}
.ptp-hashtag-platform { flex: 1; font-size: var(--ptp-font-sm); font-weight: 500; color: var(--ptp-text); }

/* ── TOGGLE SWITCH ─────────────────────────────────────────────────── */
.ptp-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.ptp-toggle input { opacity: 0; width: 0; height: 0; }
.ptp-toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #D1D5DB; border-radius: 24px; transition: 0.3s;
}
.ptp-toggle-slider::before {
  content: ''; position: absolute; height: 18px; width: 18px;
  left: 3px; bottom: 3px; background: #fff;
  border-radius: 50%; transition: 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.ptp-toggle input:checked + .ptp-toggle-slider { background: var(--ptp-purple); }
.ptp-toggle input:checked + .ptp-toggle-slider::before { transform: translateX(18px); }

/* ── LIGHTBOX ──────────────────────────────────────────────────────── */
.ptp-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
}
.ptp-lightbox-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.8); }
.ptp-lightbox-content { position: relative; max-width: 90vw; max-height: 90vh; }
.ptp-lightbox-content img { max-width: 90vw; max-height: 85vh; border-radius: var(--ptp-radius); object-fit: contain; }
.ptp-lightbox-close {
  position: absolute; top: -14px; right: -14px;
  background: var(--ptp-purple); color: #fff;
  border: none; border-radius: 50%;
  width: 34px; height: 34px; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.ptp-lightbox-close:hover { background: var(--ptp-purple-hover); }

/* ── SPINNER ───────────────────────────────────────────────────────── */
.ptp-spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff; border-radius: 50%;
  animation: ptp-spin 0.7s linear infinite;
}
@keyframes ptp-spin { to { transform: rotate(360deg); } }

.ptp-loading { color: var(--ptp-muted); font-size: var(--ptp-font-base); padding: 24px 0; text-align: center; }
.ptp-empty { color: var(--ptp-muted); font-size: var(--ptp-font-base); padding: 36px 0; text-align: center; }
.ptp-profile-actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; }

/* ── LOGIN PROMPT ──────────────────────────────────────────────────── */
.ptp-login-prompt {
  text-align: center; padding: 48px 24px;
  font-size: var(--ptp-font-md); color: var(--ptp-text-soft);
}
.ptp-login-prompt a { color: var(--ptp-purple); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — 640px and below
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Keep the rounded top corners on mobile */
  #pictopost-app {
    border-radius: var(--ptp-radius) var(--ptp-radius) 0 0;
  }

  /* Header — keep radius, tighten padding */
  .ptp-header {
    padding: 14px 14px;
    border-radius: var(--ptp-radius) var(--ptp-radius) 0 0;
  }

  /* Tabs — stretch across full width evenly */
  .ptp-tabs {
    padding: 0;
    gap: 0;
  }
  .ptp-tab {
    flex: 1;
    text-align: center;
    padding: 12px 6px;
    font-size: clamp(0.58rem, 0.5rem + 0.5vw, 0.72rem);
    letter-spacing: 0.3px;
    white-space: nowrap;
  }

  /* Panels — minimal side padding */
  .ptp-panel {
    padding: 12px 8px;
  }

  /* Cards — reduced padding */
  .ptp-card {
    padding: 16px 12px;
    margin-bottom: 12px;
    border-radius: 8px;
  }

  /* Field rows go single column */
  .ptp-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Photo drop */
  .ptp-photo-drop {
    padding: 20px 14px;
  }

  /* Pills */
  .ptp-pill {
    padding: 8px 14px;
  }

  /* Post output blocks */
  .ptp-post-block-header {
    padding: 8px 12px;
  }
  .ptp-post-block-textarea {
    padding: 12px;
    min-height: 100px;
  }
  .ptp-post-block-footer {
    padding: 10px 12px;
    gap: 8px;
  }
  .ptp-char-indicator {
    margin-left: 0;
    width: 100%;
    text-align: right;
  }

  /* Profile bar */
  .ptp-profile-summary {
    padding: 12px;
    gap: 10px;
  }
  .ptp-no-profile {
    padding: 10px 12px;
    flex-wrap: wrap;
  }

  /* History */
  .ptp-history-header {
    padding: 12px;
    gap: 10px;
  }
  .ptp-history-preview {
    max-width: 100%;
  }
  .ptp-history-date {
    display: none;
  }
  .ptp-history-body {
    padding: 0 12px 12px;
  }

  /* Hashtag rows */
  .ptp-hashtag-row {
    padding: 10px 12px;
    gap: 10px;
  }
  .ptp-hashtag-platform {
    font-size: var(--ptp-font-xs);
  }

  /* Save profile button — full width */
  .ptp-btn-save-profile {
    width: 100%;
    justify-content: center;
  }
  .ptp-profile-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Lightbox */
  .ptp-lightbox-close {
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   VERY SMALL SCREENS — 380px and below (iPhone SE, etc.)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .ptp-header {
    padding: 12px 10px;
  }
  .ptp-panel {
    padding: 10px 4px;
  }
  .ptp-card {
    padding: 12px 8px;
  }
  .ptp-tab {
    padding: 10px 4px;
    font-size: 0.56rem;
  }
}