/* The Storage page — rendered inside aly-dialog.js's own `.aly-dialog` shell,
   so only the CONTENT below the title needs its own rules. Same LUX tokens
   as every other ALY surface; nothing here invents a colour. */

.aly-storage-body { display: grid; gap: 16px; width: min(560px, calc(100vw - 48px)); }

.aly-storage-total { display: grid; gap: 6px; }
.aly-storage-total-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.aly-storage-total-label { color: var(--text); font-weight: 500; }
.aly-storage-total-value { color: var(--muted); font-variant-numeric: tabular-nums; }
.aly-storage-meter { position: relative; height: 6px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.aly-storage-meter span { position: absolute; inset: 0 auto 0 0; display: block; height: 100%; background: var(--accent, #6ea8ff); border-radius: inherit; }
.aly-storage-meter.is-caution span { background: #d9a441; }
.aly-storage-meter.is-high span { background: #d95c4a; }

.aly-storage-retention { margin: 0; color: var(--muted); font-size: 12px; }

.aly-storage-projects { display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; }

.aly-storage-expand-toggle {
  flex: none; width: 20px; border: none; background: none; color: var(--muted);
  font-size: 12px; cursor: pointer; padding: 0;
}
.aly-storage-expand-toggle:hover, .aly-storage-expand-toggle:focus-visible { color: var(--text); }

.aly-storage-project { border-bottom: 1px solid var(--hair); padding: 8px 0; }
.aly-storage-project-head, .aly-storage-conversation-head, .aly-storage-attachment {
  display: flex; align-items: center; gap: 8px;
}
.aly-storage-project-name, .aly-storage-conversation-title { flex: 1 1 auto; color: var(--text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aly-storage-project-breakdown, .aly-storage-conversation-counts {
  color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; flex: none;
}
.aly-storage-project-total { color: var(--text); font-variant-numeric: tabular-nums; flex: none; font-weight: 500; }
.aly-storage-conversation-date { color: var(--muted); font-size: 12px; flex: none; }

.aly-storage-project-body, .aly-storage-conversation-body {
  padding-left: 28px; display: grid; gap: 6px; margin-top: 6px;
}
.aly-storage-conversation { padding: 4px 0; }

.aly-storage-attachment-info { flex: 1 1 auto; display: flex; gap: 8px; min-width: 0; }
.aly-storage-attachment-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.aly-storage-attachment-size { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }

.aly-storage-row-actions { display: flex; gap: 6px; flex: none; }
.aly-storage-delete-btn, .aly-storage-pin-btn {
  border: 1px solid var(--hair); border-radius: 6px; background: none; color: var(--muted);
  font: inherit; font-size: 12px; padding: 3px 8px; cursor: pointer;
}
.aly-storage-delete-btn:hover, .aly-storage-pin-btn:hover { color: var(--text); border-color: var(--hair-2); }
.aly-storage-pin-btn.is-pinned { color: var(--text); border-color: var(--hair-2); }
.aly-storage-delete-btn:disabled, .aly-storage-pin-btn:disabled { opacity: .5; cursor: default; }

.aly-storage-empty, .aly-storage-loading { margin: 0; color: var(--muted); font-size: 12px; }