/* =============================================================================
 * AI Panel: media rendering in chat messages
 * Ported from scitex-cloud global-ai-chat/08-media.css
 * ============================================================================= */

.stx-shell-ai-media {
  margin: 0.5rem 0 0.25rem;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-default, #30363d);
  max-width: min(100%, 400px);
}

/* Image */
.stx-shell-ai-media-image img {
  max-width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  transition: opacity 0.15s;
}
.stx-shell-ai-media-image img:hover {
  opacity: 0.85;
}

/* Caption (filename under image) */
.stx-shell-ai-media-caption {
  display: block;
  font-size: 0.6875rem;
  color: var(--fg-muted, var(--text-muted, #8b949e));
  padding: 0.2rem 0.5rem;
  background: rgba(0, 0, 0, 0.25);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CSV table preview */
.stx-shell-ai-media-table {
  overflow-x: auto;
  max-height: 200px;
  overflow-y: auto;
}
.stx-shell-ai-media-table table {
  width: 100%;
  font-size: 0.7rem;
  border-collapse: collapse;
  font-family: monospace;
}
.stx-shell-ai-media-table th,
.stx-shell-ai-media-table td {
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--border-default, #30363d);
  white-space: nowrap;
  text-align: left;
}
.stx-shell-ai-media-table th {
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
}

/* PDF / file link */
.stx-shell-ai-media-file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.75rem;
  text-decoration: none;
  color: var(--color-accent-fg, #58a6ff);
  transition: background 0.15s;
}
.stx-shell-ai-media-file:hover {
  background: rgba(255, 255, 255, 0.08);
}
.stx-shell-ai-media-file i {
  font-size: 1rem;
  opacity: 0.7;
}

/* File operation badges */
.stx-shell-ai-file-op {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  margin: 0.2rem 0.25rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-family: monospace;
  animation: file-op-flash 1.5s ease-out;
}

.stx-shell-ai-file-op--created {
  background: var(--status-success-bg, rgba(90, 154, 126, 0.1));
  color: var(--status-success, #5a9a7e);
  border: 1px solid var(--status-success-border, rgba(90, 154, 126, 0.3));
}

.stx-shell-ai-file-op--modified {
  background: var(--status-warning-bg, rgba(184, 149, 106, 0.1));
  color: var(--status-warning, #b8956a);
  border: 1px solid var(--status-warning-border, rgba(184, 149, 106, 0.3));
}

.stx-shell-ai-file-op--moved {
  background: var(--status-info-bg, rgba(107, 107, 107, 0.1));
  color: var(--status-info, #6b6b6b);
  border: 1px solid var(--status-info-border, rgba(107, 107, 107, 0.3));
}

.stx-shell-ai-file-op--deleted {
  background: var(--status-error-bg, rgba(166, 115, 115, 0.1));
  color: var(--status-error, #a67373);
  border: 1px solid var(--status-error-border, rgba(166, 115, 115, 0.3));
}

.stx-shell-ai-file-op i {
  font-size: 0.625rem;
}

.stx-shell-ai-file-op-dir {
  opacity: 0.5;
}

@keyframes file-op-flash {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 0 8px currentColor;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    box-shadow: none;
  }
}
