/* components.css */
.viewer-card {
  background: rgba(255, 255, 255, 0.1); /* Frosted glass style */
  border-radius: 12px;
  padding: 2rem 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
  transition: all 0.3s ease-in-out;
  width: 100%;
  max-width: 700px;
  margin: auto;
  box-sizing: border-box;
  z-index: 3;
  position: relative;
}

.viewer-wrapper {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
}

.response-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
  background: transparent;
  overflow: hidden;
}

.default-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
  background: transparent;
  
}
.default-wrapper .viewer-card {
  max-width: 75%;
  padding: 2rem 3rem;
}

.viewer-card h1,
.universal-block h1 {
    color: #f0f0ff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

/* ─── pretty scrollbar for viewer-card ─── */
.viewer-card::-webkit-scrollbar {
  width: 8px;                   /* scrollbar width */
}

.viewer-card::-webkit-scrollbar-track {
  background: transparent;      /* no track color */
}

.viewer-card::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.35);  /* light thumb */
  border-radius: 4px;
  transition: background 0.2s;
}

.viewer-card::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.55);  /* brighter on hover */
}

/* Firefox */
.viewer-card {
  scrollbar-width: thin;                     /* slim bar */
  scrollbar-color: rgba(255,255,255,0.35) transparent;
}