/* css/preview.css — Right-panel on-demand file preview styles.
   Skin tokens ONLY — no hardcoded hex, font names, border radii, or shadow values.
   Wave 5.4 */

/* ── Preview panel base ── */
.right-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;        /* clips iframe to panel boundary */
  position: relative;      /* iframe positioned within panel, not viewport */
}

/* ── Header: filename + close button ── */
.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  flex-shrink: 0;
}

.preview-header__filename {
  font-size: 0.875rem;
  font-family: var(--font-base);
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.preview-close {
  flex-shrink: 0;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-base);
  font-size: 0.8125rem;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.15s;
}
.preview-close:hover {
  background: var(--bg);
}

/* ── Preview body (fills remaining panel height) ── */
.preview-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── PDF iframe ── */
.preview-body--pdf {
  padding: 0;
}

.preview-iframe {
  width: 100%;
  flex: 1;
  border: none;
  min-height: 0;
  position: relative;      /* stay in normal flow; don't bleed outside .right-panel */
  display: block;
  /* pointer-events: auto — iframe content is clickable INSIDE the panel;
     the panel itself is clipped by overflow:hidden so the iframe cannot
     extend over the chat column and intercept attachment chip clicks */
  pointer-events: auto;
}

/* ── Text / Markdown pre block ── */
.preview-text-block {
  font-family: monospace;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  overflow-x: auto;
  flex: 1;
}

/* ── Image ── */
.preview-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* ── Placeholder / binary / error messages ── */
.preview-placeholder-msg,
.preview-binary-msg {
  font-family: var(--font-base);
  font-size: 0.875rem;
  color: var(--fg);
  opacity: 0.8;
  line-height: 1.5;
}

.preview-placeholder-hint {
  font-family: monospace;
  font-size: 0.78rem;
  color: var(--fg);
  opacity: 0.55;
  word-break: break-all;
}

.preview-download-link {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-base);
  font-size: 0.875rem;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.preview-download-link:hover {
  opacity: 0.8;
}

/* ── Mobile: full-screen overlay ── */
@media (max-width: 1023px) {
  /* z-index must clear the fixed .top-bar (z-index 100) so the overlay covers
     the whole screen incl. the top bar and its close button is tappable. This
     rule loads after shell.css's duplicate, so this value is the effective one;
     both are kept in sync at 210. */
  body[data-preview-mobile-overlay="true"] .right-panel {
    position: fixed;
    inset: 0;
    height: 100vh;
    transform: none;
    z-index: 210;
    background: var(--bg-elev);
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .preview-close {
    transition: none;
  }
}