/* social-story.css — "📷 Social Story" modal. LABEL: PILOT-READY.
   Mirrors image-board.css's modal language (same overlay/panel shape). */

.ss-overlay {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55); padding: 1rem;
}
.ss-panel {
  background: var(--surface, #fff); color: var(--ink, #1a1a2e);
  width: min(560px, 100%); max-height: 92vh;
  border-radius: 16px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column; overflow: hidden;
}
.ss-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--border, #e6e6ef);
}
.ss-title { font-weight: 800; font-size: 1.05rem; }
.ss-close {
  background: transparent; border: none; font-size: 1.1rem; cursor: pointer;
  color: var(--ink-muted, #666); min-width: 44px; min-height: 44px;
}
.ss-body { padding: 1rem; overflow: auto; }

.ss-lead { margin: 0 0 0.75rem; line-height: 1.45; }
.ss-points {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
  font-size: 0.92rem; line-height: 1.4;
}

.ss-primary, .ss-secondary {
  min-height: 44px; border-radius: 10px; font-weight: 700;
  cursor: pointer; padding: 0 1rem; font-size: 0.95rem;
}
.ss-primary { background: var(--brand-blue, #4f46e5); color: #fff; border: none; width: 100%; }
.ss-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.ss-secondary { background: transparent; border: 1.5px solid var(--border, #d0d0d0); color: var(--ink, #222); }

.ss-loading, .ss-error { padding: 1rem 0; line-height: 1.45; }
.ss-error { color: #c0392b; font-weight: 600; }

.ss-count { font-size: 0.9rem; color: var(--ink-muted, #666); margin-bottom: 0.5rem; }
.ss-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.5rem; margin-bottom: 0.85rem;
}
.ss-thumb { position: relative; }
.ss-thumb-img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border, #e6e6ef); background: #faf9f6;
}
.ss-thumb-num {
  position: absolute; top: 4px; left: 4px;
  background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.7rem; font-weight: 700;
  min-width: 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: 9px; padding: 0 4px;
}
.ss-topic-label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; }
.ss-topic {
  width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 0.7rem;
  border: 1.5px solid var(--border, #d0d0d0); border-radius: 10px;
  font-size: 0.95rem; background: #fff; color: var(--ink, #1a1a2e); margin-bottom: 0.6rem;
}
.ss-keynote {
  font-size: 0.85rem; line-height: 1.4; background: rgba(79, 70, 229, 0.08);
  border-radius: 8px; padding: 0.5rem 0.65rem; margin-bottom: 0.6rem;
}
.ss-keynote-warn { background: rgba(232, 168, 56, 0.14); border: 1px solid var(--amber, #e8a838); }
.ss-actions { display: flex; gap: 0.5rem; }
.ss-actions .ss-secondary { flex: 0 0 auto; }
.ss-actions .ss-primary { flex: 1 1 auto; }
.ss-status { font-size: 0.9rem; min-height: 1.2em; line-height: 1.4; margin-top: 0.5rem; }

@media (max-width: 480px) {
  .ss-actions { flex-direction: column; }
  .ss-actions .ss-secondary, .ss-actions .ss-primary { width: 100%; }
}