/* ============================================================
 * S28.CONTEXTUAL_WORKSPACE_SYSTEM · CSS
 * Drop-in styles for 4-mode right panel + pinned active context
 * + single-scroll system + button audit
 * ============================================================ */

/* ============================================================
 * LAYER 1 · Right panel 4-mode visibility
 * ============================================================ */

/* Default · all mode cards hidden · mode reveals */
.rp-context-card { display: none; }

body[data-rp-mode="quiet"]    .rp-quiet,
body[data-rp-mode="active"]   .rp-active,
body[data-rp-mode="error"]    .rp-error { display: block; }

/* When in quiet/active/error · hide technical content */
body[data-rp-mode="quiet"]    .focus-technical,
body[data-rp-mode="active"]   .focus-technical,
body[data-rp-mode="error"]    .focus-technical {
  display: none !important;
}

/* Technical mode reveals all focus-technical sections */
body[data-rp-mode="technical"] .focus-technical {
  display: block !important;
}

/* Quiet card */
.rp-context-card.rp-quiet {
  padding: 16px 14px;
  background: var(--bg-elev, #26282b);
  border: 1px solid var(--bd-1, #333);
  border-radius: 10px;
  margin: 12px;
}
.rp-quiet .rp-state-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--tx-1, #e0e0e0);
  font-weight: 500;
}
.rp-quiet .rp-state-row .dot.ok {
  width: 8px;
  height: 8px;
  background: var(--ac-green, #44d685);
  border-radius: 50%;
}
.rp-quiet .rp-state-sub {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--tx-2, #a5a8ad);
}
.rp-quiet .rp-state-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.rp-quiet .rp-btn-link {
  background: transparent;
  border: 1px solid var(--bd-1, #333);
  color: var(--tx-2, #a5a8ad);
  padding: 4px 12px;
  font-size: 11.5px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 120ms ease;
}
.rp-quiet .rp-btn-link:hover {
  border-color: var(--ac-blue, #5d8bff);
  color: var(--ac-blue, #5d8bff);
}

/* Active card */
.rp-context-card.rp-active {
  padding: 14px;
  background: rgba(93, 139, 255, 0.05);
  border: 1px solid rgba(93, 139, 255, 0.2);
  border-radius: 10px;
  margin: 12px;
}
.rp-active .rp-state-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ac-blue, #5d8bff);
  margin-bottom: 10px;
  font-weight: 600;
}
.rp-active .rp-active-line {
  font-size: 12.5px;
  color: var(--tx-1, #e0e0e0);
  padding: 4px 0;
}
.rp-active .rp-active-line.streaming {
  animation: rp-pulse 1.4s ease-in-out infinite;
}
.rp-active .rp-active-line.queued {
  color: var(--ac-amber, #f4b25d);
}

/* Error card */
.rp-context-card.rp-error {
  padding: 14px;
  background: rgba(240, 104, 104, 0.08);
  border: 1px solid rgba(240, 104, 104, 0.3);
  border-radius: 10px;
  margin: 12px;
}
.rp-error .rp-error-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--ac-red, #f06868);
  margin-bottom: 10px;
}
.rp-error .rp-error-body {
  font-size: 12px;
  color: var(--tx-1, #e0e0e0);
  margin-bottom: 12px;
}
.rp-error .rp-error-body strong {
  display: block;
  margin-bottom: 4px;
}
.rp-error .rp-error-actions {
  display: flex;
  gap: 6px;
}
.rp-error .rp-btn-link {
  background: transparent;
  border: 1px solid var(--ac-red, #f06868);
  color: var(--ac-red, #f06868);
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 6px;
  cursor: pointer;
}
.rp-error .rp-btn-link:hover {
  background: rgba(240, 104, 104, 0.1);
}

@keyframes rp-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ============================================================
 * LAYER 3 · Pinned active context (sidebar)
 * ============================================================ */

.lsb-active-context {
  background: rgba(93, 139, 255, 0.05);
  border: 1px solid rgba(93, 139, 255, 0.15);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 8px 8px 12px;
}
.lsb-active-context[hidden] { display: none; }
.lsb-pin-title {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--ac-blue, #5d8bff);
  margin-bottom: 6px;
  font-weight: 600;
}
.lsb-pin-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--tx-1, #e0e0e0);
  transition: background 120ms ease;
}
.lsb-pin-item:hover {
  background: rgba(93, 139, 255, 0.08);
}
.lsb-pin-item .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lsb-pin-item .dot.ok { background: var(--ac-blue, #5d8bff); }
.lsb-pin-item .dot.pulse {
  background: var(--ac-blue, #5d8bff);
  animation: rp-pulse 1.6s ease-in-out infinite;
}
.lsb-pin-name {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
 * LAYER 4 · Scroll system
 * Recommended HTML structure:
 *   <main class="center">
 *     <div class="msg-list" id="msg-list"> <!-- ONE scroll -->
 *     <div class="composer sticky-bottom">  <!-- sticky -->
 *   </main>
 * ============================================================ */

/* Smooth scroll with momentum on iOS */
#msg-list,
#msgs,
.msg-list,
.msgs {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
}

/* Sticky composer · keeps at bottom */
.composer.sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--bg-center, #202125);
  border-top: 1px solid var(--bd-1, #333);
}

/* Mobile safe area */
@media (max-width: 720px) {
  .composer.sticky-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
  #msg-list,
  #msgs,
  .msg-list,
  .msgs {
    padding-bottom: 80px;  /* room for sticky composer */
  }
}

/* ============================================================
 * Button audit · hide dead/duplicated
 * ============================================================ */

.future-control[disabled],
button[disabled][title*="em breve"],
.btn-dead {
  display: none !important;
}

/* Keep visible if .show-disabled-debug body class · for power users */
body.show-disabled-debug .future-control[disabled],
body.show-disabled-debug button[disabled][title*="em breve"] {
  display: inline-flex !important;
  opacity: 0.5;
}