/* Altifier — app-specific styles. Base theme: web_themes (witchsky-cyan). */

/* Altifier */
.altifier-container { max-width: 700px; margin: 30px auto; padding: 0 20px; }

.altifier-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}

.altifier-section h2,
.altifier-section h3 { margin-top: 0; }

.altifier-section p { margin: 0 0 12px 0; }

.altifier-scan-button {
  padding: 12px 32px;
  font-size: 1.1em;
}

.altifier-status-box {
  padding: 14px;
  border-radius: 6px;
  margin: 14px 0;
}

.altifier-status-box-success { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); }
.altifier-status-box-error { background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border); }
.altifier-status-box p { margin: 0; }

.altifier-summary ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
}

.altifier-summary li {
  padding: 4px 0;
  color: var(--text);
}

.altifier-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  font-size: 0.95em;
  color: var(--text-muted);
  cursor: pointer;
  min-height: 48px;
}

.altifier-filter input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--button-bg);
  min-height: auto;
}

/* Altifier post list */
.altifier-post-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.altifier-post-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 16px;
}

.altifier-post-context {
  margin-bottom: 12px;
}

.altifier-post-text {
  margin: 0 0 6px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.altifier-post-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.85em;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.altifier-post-reply-badge {
  background: var(--button-bg);
  color: var(--button-text);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 600;
}

/* Altifier image card — full review card per image */
.altifier-image-card {
  border: 2px solid var(--card-border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}

.altifier-image-card.missing-alt {
  border-color: var(--error-text);
}

.altifier-image-card.has-alt {
  border-color: var(--success-text);
}

.altifier-image-card-img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  background: #0a0f14;
  display: block;
}

.altifier-image-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.altifier-image-card-status {
  font-size: 0.85em;
  color: var(--text-muted);
  padding: 6px 10px;
  background: var(--navbar-bg);
  border-radius: 4px;
  word-break: break-word;
}

.altifier-image-card.missing-alt .altifier-image-card-status {
  background: var(--error-bg);
  color: var(--error-text);
}

.altifier-image-card-actions {
  display: flex;
  gap: 8px;
}

.altifier-generate-button {
  background: var(--button-bg);
  color: var(--button-text);
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.altifier-generate-button:hover { background: var(--button-hover-bg); }
.altifier-generate-button:disabled { opacity: 0.6; cursor: not-allowed; }

.altifier-image-card-error {
  font-size: 0.85em;
  color: var(--error-text);
  padding: 6px 10px;
  background: var(--error-bg);
  border-radius: 4px;
}

.altifier-alt-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--navbar-bg);
  color: var(--text);
  font-size: 0.95em;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
}

.altifier-alt-textarea:focus {
  border-color: var(--button-bg);
  outline: none;
}

.altifier-char-count {
  font-size: 0.8em;
  color: var(--text-muted);
  text-align: right;
}

.altifier-image-card-buttons {
  display: flex;
  gap: 8px;
}

.altifier-approve-button {
  background: var(--success-text);
  color: #111822;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 0.95em;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  flex: 1;
}

.altifier-approve-button:hover { filter: brightness(1.1); }
.altifier-approve-button:disabled { opacity: 0.6; cursor: not-allowed; }

.altifier-reject-button {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 0.95em;
  cursor: pointer;
  min-height: 48px;
}

.altifier-reject-button:hover { border-color: var(--error-text); color: var(--error-text); }
.altifier-reject-button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Altifier post footer */
.altifier-post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--card-border);
  flex-wrap: wrap;
}

.altifier-review-status {
  font-size: 0.9em;
  color: var(--text-muted);
}

.altifier-apply-button {
  background: var(--button-bg);
  color: var(--button-text);
  border: none;
  border-radius: 6px;
  padding: 10px 24px;
  font-size: 0.95em;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
}

.altifier-apply-button:hover { background: var(--button-hover-bg); }
.altifier-apply-button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Confirmation modal */
.altifier-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.altifier-modal {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
}

.altifier-modal h3 {
  margin: 0 0 12px 0;
  color: var(--text);
}

.altifier-modal p {
  margin: 0 0 8px 0;
  color: var(--text-muted);
}

.altifier-modal-warning {
  color: var(--error-text);
  font-weight: 600;
}

.altifier-modal-buttons {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.altifier-modal-confirm {
  background: var(--button-bg);
  color: var(--button-text);
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  flex: 1;
}

.altifier-modal-confirm:hover { filter: brightness(1.1); }

.altifier-modal-cancel {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  min-height: 48px;
}

.altifier-modal-cancel:hover { border-color: var(--text-muted); color: var(--text); }

/* Pre-write diff list (P7) */
.altifier-modal-diff {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  max-height: 220px;
  overflow-y: auto;
}
.altifier-modal-diff li {
  padding: 8px 0;
  border-bottom: 1px solid var(--card-border);
  font-size: 0.9em;
  color: var(--text);
  word-break: break-word;
}
.altifier-modal-diff li:last-child { border-bottom: none; }
.altifier-diff-old { color: var(--text-muted); text-decoration: line-through; }
.altifier-diff-new { color: var(--success-text); }

/* Video placeholder (no thumbnail) */
.altifier-video-placeholder {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navbar-bg);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Resume scan box (P6) */
.altifier-resume-box p { margin: 0 0 12px 0; }
.altifier-resume-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.altifier-resume-restart {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 12px 24px;
  font-size: 1em;
  cursor: pointer;
  min-height: 48px;
}
.altifier-resume-restart:hover { border-color: var(--error-text); color: var(--error-text); }

/* AI settings (P4) */
.altifier-settings { max-width: 520px; }
.altifier-settings-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9em;
  color: var(--text-muted);
  font-weight: 600;
}
.altifier-settings-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--navbar-bg);
  color: var(--text);
  font-size: 0.95em;
  box-sizing: border-box;
}
.altifier-settings-input:focus { border-color: var(--button-bg); outline: none; }
.altifier-settings-note { font-size: 0.85em; color: var(--text-muted); }
.altifier-settings-buttons {
  display: flex;
  gap: 10px;
}
.altifier-settings-save {
  background: var(--button-bg);
  color: var(--button-text);
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 0.95em;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
}
.altifier-settings-save:hover { background: var(--button-hover-bg); }
.altifier-settings-save:disabled { opacity: 0.6; cursor: not-allowed; }
.altifier-settings-clear {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 0.95em;
  cursor: pointer;
  min-height: 48px;
}
.altifier-settings-clear:hover { border-color: var(--error-text); color: var(--error-text); }
.altifier-settings-clear:disabled { opacity: 0.6; cursor: not-allowed; }

/* Bluesky oEmbed post embed */
.altifier-post-embed { margin: 10px 0 4px 0; }

.altifier-post-aturi {
  margin-top: 8px;
  font-size: 0.8em;
  color: var(--text-muted);
  word-break: break-all;
}
.altifier-post-aturi code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--navbar-bg);
  padding: 3px 6px;
  border-radius: 4px;
}

.altifier-post-embed-loading {
  padding: 10px;
  font-size: 0.85em;
  color: var(--text-muted);
  background: var(--navbar-bg);
  border-radius: 6px;
}
.altifier-post-embed-link {
  color: var(--button-bg);
  font-size: 0.9em;
  font-weight: 600;
  text-decoration: underline;
}

/* Footer version + repo link */
.footer-version {
  font-size: 0.85rem;
  opacity: 0.7;
}
.footer-version a {
  color: inherit;
}