/* Holmes — Rich message blocks CSS (Fase 2.2).
 *
 * Token-based con catena di fallback: --rb-<semantic> → --<host-token> → hardcoded.
 * Nessun ramo Simple-vs-Orbit: lo stesso file copre entrambe le UI perché
 * i token host differiscono ma lo schema di fallback li risolve in automatico.
 * Esempio: su Orbit --surface è definito in orbit.css; su Simple è in style.css.
 * Se nessuno dei due definisse il token, scendiamo al valore hardcoded.
 */

.rb {
  /* Fallback chain: --rb-* sono la superficie pubblica dei renderer blocks/*.js.
     Il 1° livello legge i semantici globali forniti da tokens.css; i letterali
     sono l'ultimo fallback per graceful degradation se tokens.css non si carica. */
  --rb-surface:       var(--surface, #1a1a1f);
  --rb-surface-hover: var(--surface-hover, rgba(255,255,255,.04));
  --rb-bg-2:          var(--bg-2, #11111a);
  --rb-border:        var(--border, rgba(255,255,255,.12));
  --rb-text:          var(--text, #e8e8ea);
  --rb-text-dim:      var(--text-dim, rgba(232,232,234,.62));
  --rb-accent:        var(--accent, #7b6fe4);
  --rb-accent-text:   var(--accent-text, #fff);
  --rb-danger:        var(--danger, #e05d5d);
  --rb-warning:       var(--warning, #d9a44a);
  --rb-focus-ring:    var(--focus-ring, currentColor);

  display: block;
  margin: 8px 0;
  padding: 12px 14px;
  background: var(--rb-surface);
  border: 1px solid var(--rb-border);
  border-radius: 12px;
  color: var(--rb-text);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 100%;
  box-sizing: border-box;
}

.rb.rb-locked {
  opacity: 0.72;
  pointer-events: none;
  filter: saturate(0.7);
}

.rb a {
  color: var(--rb-accent);
  text-decoration: none;
}
.rb a:hover { text-decoration: underline; }

.rb .rb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.rb .rb-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--rb-text);
  flex: 1 1 auto;
  min-width: 0;
}
.rb .rb-badge {
  font-size: 0.75rem;
  color: var(--rb-text-dim);
  background: var(--rb-bg-2);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--rb-border);
}

.rb .rb-empty {
  padding: 16px 8px;
  text-align: center;
  color: var(--rb-text-dim);
  font-style: italic;
}

/* ─── Lista generica ────────────────────────────────────────────── */
.rb .rb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ─── email-list ────────────────────────────────────────────────── */
.rb-email-list .rb-email-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .14s ease;
  border: 1px solid transparent;
}
.rb-email-list .rb-email-item:hover,
.rb-email-list .rb-email-item:focus-visible {
  background: var(--rb-surface-hover);
  outline: none;
  border-color: var(--rb-border);
}
.rb-email-list .rb-email-item:focus-visible {
  box-shadow: 0 0 0 2px var(--rb-focus-ring);
}
.rb-email-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rb-email-row--top { justify-content: space-between; }
.rb-email-from {
  font-size: 0.82rem;
  color: var(--rb-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.rb-email-date {
  font-size: 0.75rem;
  color: var(--rb-text-dim);
  flex: 0 0 auto;
}
.rb-email-subject {
  font-weight: 500;
  color: var(--rb-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.rb-email-snippet {
  font-size: 0.82rem;
  color: var(--rb-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.rb-email-item.is-unread .rb-email-subject,
.rb-email-item.is-unread .rb-email-from { color: var(--rb-text); font-weight: 600; }
.rb-dot-unread {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rb-accent);
  flex: 0 0 auto;
}
.rb-attach { font-size: 0.85rem; flex: 0 0 auto; opacity: .8; }

/* ─── email-detail ──────────────────────────────────────────────── */
.rb-email-detail .rb-email-detail-head { margin-bottom: 10px; }
.rb-email-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--rb-bg-2);
  border-radius: 8px;
  margin-bottom: 10px;
}
.rb-meta-row {
  display: flex;
  gap: 8px;
  font-size: 0.82rem;
}
.rb-meta-label {
  color: var(--rb-text-dim);
  flex: 0 0 48px;
}
.rb-meta-value {
  color: var(--rb-text);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rb-email-detail-body {
  white-space: pre-wrap;
  word-break: break-word;
  padding: 10px 12px;
  background: var(--rb-bg-2);
  border-radius: 8px;
  font-size: 0.9rem;
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 10px;
}

/* ─── event-list ────────────────────────────────────────────────── */
.rb-event-list .rb-event-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .14s ease;
}
.rb-event-list .rb-event-item:hover,
.rb-event-list .rb-event-item:focus-visible {
  background: var(--rb-surface-hover);
  outline: none;
  border-color: var(--rb-border);
}
.rb-event-row {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.rb-event-row--top { justify-content: space-between; }
.rb-event-title { font-weight: 500; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-event-when { font-size: 0.78rem; color: var(--rb-text-dim); flex: 0 0 auto; }
.rb-event-row--meta { flex-wrap: wrap; font-size: 0.8rem; color: var(--rb-text-dim); }

/* ─── event-form ────────────────────────────────────────────────── */
.rb-event-form .rb-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.rb-form-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rb-form-row .rb-field { flex: 1 1 140px; min-width: 0; }
.rb-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rb-label {
  font-size: 0.75rem;
  color: var(--rb-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rb-input, .rb-textarea {
  background: var(--rb-bg-2);
  color: var(--rb-text);
  border: 1px solid var(--rb-border);
  border-radius: 6px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.9rem;
  width: 100%;
  box-sizing: border-box;
}
.rb-input:focus, .rb-textarea:focus {
  outline: none;
  border-color: var(--rb-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rb-accent) 35%, transparent);
}
.rb-textarea { resize: vertical; min-height: 48px; }

.rb-warn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--rb-warning);
  border-radius: 6px;
  background: color-mix(in srgb, var(--rb-warning) 18%, transparent);
  color: var(--rb-text);
}
.rb-warn-item { font-size: 0.85rem; }

/* ─── drive-list ────────────────────────────────────────────────── */
.rb-drive-list .rb-drive-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background .14s ease;
}
.rb-drive-list .rb-drive-item:hover { background: var(--rb-surface-hover); border-color: var(--rb-border); }
.rb-drive-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rb-drive-name {
  color: var(--rb-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.rb-drive-name { color: var(--rb-text); }
a.rb-drive-name:hover { color: var(--rb-accent); text-decoration: underline; }
.rb-drive-sub {
  display: flex;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--rb-text-dim);
  flex-wrap: wrap;
}
.rb-drive-actions {
  position: relative;
  flex: 0 0 auto;
}
.rb-drive-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  background: var(--rb-surface);
  border: 1px solid var(--rb-border);
  border-radius: 8px;
  padding: 4px;
  display: none;
  z-index: 20;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.rb-drive-menu.is-open { display: block; }
.rb-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: transparent;
  color: var(--rb-text);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}
.rb-menu-item:hover { background: var(--rb-surface-hover); }

/* ─── confirm-action ────────────────────────────────────────────── */
.rb-confirm-action {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
}
.rb-confirm-action[data-severity="danger"]  { border-color: var(--rb-danger); }
.rb-confirm-action[data-severity="warning"] { border-color: var(--rb-warning); }

.rb-confirm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rb-bg-2);
  color: var(--rb-text);
  font-weight: 700;
}
.rb-confirm-action[data-severity="danger"] .rb-confirm-icon {
  background: color-mix(in srgb, var(--rb-danger) 22%, transparent);
  color: var(--rb-danger);
}
.rb-confirm-action[data-severity="warning"] .rb-confirm-icon {
  background: color-mix(in srgb, var(--rb-warning) 22%, transparent);
  color: var(--rb-warning);
}
.rb-confirm-body {
  grid-column: 2;
  min-width: 0;
}
.rb-confirm-title { font-weight: 600; margin-bottom: 2px; }
.rb-confirm-desc  { font-size: 0.88rem; color: var(--rb-text-dim); word-break: break-word; }
.rb-confirm-action .rb-actions {
  grid-column: 1 / -1;
  margin-top: 8px;
}

/* ─── Actions / buttons ─────────────────────────────────────────── */
.rb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.rb-actions--end { justify-content: flex-end; }

.rb-btn {
  font: inherit;
  font-size: 0.85rem;
  padding: 6px 12px;
  border: 1px solid var(--rb-border);
  border-radius: 6px;
  background: var(--rb-bg-2);
  color: var(--rb-text);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.rb-btn:hover  { background: var(--rb-surface-hover); }
.rb-btn:active { transform: translateY(1px); }
.rb-btn:focus-visible {
  outline: 2px solid var(--rb-focus-ring);
  outline-offset: 2px;
}
.rb-btn[aria-disabled="true"], .rb-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.rb-btn-primary {
  background: var(--rb-accent);
  color: var(--rb-accent-text);
  border-color: var(--rb-accent);
}
.rb-btn-primary:hover { filter: brightness(1.08); }

.rb-btn-secondary {
  background: var(--rb-bg-2);
  color: var(--rb-text);
}

.rb-btn-danger {
  background: var(--rb-danger);
  color: #fff;
  border-color: var(--rb-danger);
}
.rb-btn-danger:hover { filter: brightness(1.08); }

.rb-btn-icon {
  padding: 4px 8px;
  font-size: 1.05rem;
  line-height: 1;
}

/* ─── Skeleton ──────────────────────────────────────────────────── */
.rb-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rb-skeleton-bar {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--rb-bg-2) 0%,
    var(--rb-surface-hover) 40%,
    var(--rb-bg-2) 80%);
  background-size: 200% 100%;
  animation: rb-skeleton-shimmer 1.2s ease-in-out infinite;
}
.rb-skeleton-bar:nth-child(1) { width: 58%; }
.rb-skeleton-bar:nth-child(2) { width: 82%; }
.rb-skeleton-bar:nth-child(3) { width: 46%; }
.rb-skeleton-bar:nth-child(4) { width: 72%; }

@keyframes rb-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* ─── Fallback ──────────────────────────────────────────────────── */
.rb-fallback {
  border-color: var(--rb-warning);
  background: color-mix(in srgb, var(--rb-warning) 12%, var(--rb-surface));
}
.rb-fallback-head { font-weight: 600; margin-bottom: 4px; }
.rb-fallback-reason { font-size: 0.82rem; color: var(--rb-text-dim); margin-bottom: 6px; }
.rb-fallback-raw {
  font-size: 0.75rem;
  background: var(--rb-bg-2);
  padding: 6px 8px;
  border-radius: 4px;
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* ─── Responsive: mobile-first tweaks ───────────────────────────── */
@media (max-width: 560px) {
  .rb { padding: 10px 12px; font-size: 0.88rem; }
  .rb-email-row--top { flex-wrap: wrap; }
  .rb-email-date { order: 2; }
  .rb-form-row  { flex-direction: column; }
  .rb-confirm-action { grid-template-columns: 1fr; }
  .rb-confirm-body   { grid-column: 1; }
}