/* views.css — page frame, inset grouped lists, rows, and each view's extras. */

.main { min-height: calc(100vh - var(--nav-h)); }
.view-in .page { animation: fadeUp .4s var(--ease-out) both; }
.page { max-width: 980px; margin: 0 auto; padding: 32px 24px 64px; position: relative; }
.page--narrow { max-width: 760px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.large-title { font-size: 34px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
.head-actions { display: flex; gap: 8px; }

/* ── Segmented control ─────────────────────────────────────────────── */
.segmented { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--surface-3); }
:root[data-theme="dark"] .segmented { background: var(--surface-2); }
.segmented button {
  padding: 5px 16px; border: none; background: none; border-radius: 7px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--label-2); transition: background .2s, color .2s, box-shadow .2s;
}
.segmented button[aria-selected="true"] { background: var(--surface); color: var(--label); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
:root[data-theme="dark"] .segmented button[aria-selected="true"] { background: var(--surface-3); }

/* ── Inset grouped list ────────────────────────────────────────────── */
.list {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 18px;
}
.list--inset { box-shadow: none; background: var(--surface-2); border-radius: var(--r-md); margin: 0; }
.list--scroll { max-height: 320px; overflow-y: auto; }
.row {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer; transition: background .12s;
}
.row + .row::before {   /* hairline inset past the icon, like iOS */
  content: ''; position: absolute; top: 0; right: 0; left: 64px; border-top: 1px solid var(--border-2);
}
.row:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.list--inset .row:hover { background: var(--surface-3); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-top { display: flex; justify-content: space-between; gap: 10px; }
.row-who { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-when { font-size: 13px; color: var(--label-3); white-space: nowrap; flex-shrink: 0; }
.row-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 13px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub.is-error { color: var(--red); }
.row-tail { display: flex; align-items: center; gap: 2px; color: var(--label-3); }
.row-tail .icon-btn { opacity: 0; transition: opacity .15s, background .14s, color .14s; }
.row:hover .row-tail .icon-btn, .row-tail .icon-btn:focus-visible { opacity: 1; }
@media (hover: none) { .row-tail .icon-btn { opacity: 1; } }
.chev svg, .back svg, .crumbs svg { width: 14px; height: 14px; }
.chev { display: flex; }
.clamp { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Posts: Mail's unread dot, sender, subject, two-line preview. */
.row--post { align-items: flex-start; padding-left: 26px; }
.row--post + .row--post::before { left: 78px; }
.row--post .dot { position: absolute; left: 10px; top: 26px; width: 9px; height: 9px; border-radius: 50%; }
.row--post.is-unread .dot { background: var(--accent); }
.row--post.is-unread .row-title { font-weight: 700; }
.row--post .row-title { margin-top: 1px; display: flex; align-items: center; gap: 8px; }
.clip { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 500; color: var(--label-3); }
.clip svg { width: 13px; height: 13px; }

/* ── Avatars and file tiles ────────────────────────────────────────── */
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #a1a1a6, #8e8e93); color: #fff; font-size: 14px; font-weight: 600;
}
.avatar svg { width: 19px; height: 19px; }
.avatar--sm { width: 30px; height: 30px; font-size: 11px; }
.avatar--sm svg { width: 15px; height: 15px; }
.avatar--lg { width: 48px; height: 48px; font-size: 17px; }
.avatar--accent { background: linear-gradient(160deg, #8e8cf0, var(--accent)); }
.avatar--more { background: var(--surface-3); color: var(--label-2); }

.ftile {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--label-2);
}
.ftile svg { width: 21px; height: 21px; }
.ftile--folder { background: rgba(10, 132, 255, .12); color: #0a84ff; }
.ftile--image  { background: rgba(255, 159, 10, .14); color: #ff9f0a; }
.ftile--pdf    { background: rgba(255, 59, 48, .12); color: #ff3b30; }
.ftile--video  { background: rgba(175, 82, 222, .13); color: #af52de; }
.ftile--sheet  { background: rgba(52, 199, 89, .14); color: #28a745; }
.ftile--slides { background: rgba(255, 149, 0, .14); color: #f08a00; }
.ftile--doc    { background: var(--accent-light); color: var(--accent); }

.progress { height: 4px; margin-top: 7px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .2s var(--ease); }

/* ── Empty states ──────────────────────────────────────────────────── */
.empty { text-align: center; padding: 56px 28px; display: flex; flex-direction: column; align-items: center; }
.empty-ic {
  width: 64px; height: 64px; border-radius: 18px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-light); color: var(--accent);
}
.empty-ic svg { width: 30px; height: 30px; }
.empty-title { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.empty-body { color: var(--label-2); max-width: 380px; margin: 6px 0 22px; }

/* ── Post ──────────────────────────────────────────────────────────── */
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 500; margin-bottom: 14px; }
.back:hover { opacity: .75; }
.post { padding: 28px 30px; }
.post-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--border-2); }
.post-from { font-size: 17px; font-weight: 600; }
.post-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-top: 22px; }
.post-body { font-size: 16px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 14px; }
.post-eyebrow { margin: 28px 0 10px; }
.post-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; font-size: 13px; min-height: 38px; }

/* ── Library ───────────────────────────────────────────────────────── */
.crumbs { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--label-3); min-height: 4px; margin-bottom: 2px; flex-wrap: wrap; }
.crumbs a { color: var(--accent); font-weight: 500; }
.crumbs a:hover { opacity: .75; }
.drop-hint {
  position: absolute; inset: 16px; border-radius: var(--r-xl); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent-light) 70%, var(--bg));
  color: var(--accent); font-weight: 600; font-size: 17px;
  opacity: 0; transform: scale(.98); transition: opacity .2s, transform .25s var(--spring);
}
.drop-hint svg { width: 34px; height: 34px; }
.is-drop > .drop-hint { opacity: 1; transform: none; }

/* ── Groups ────────────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.group { padding: 18px; border-radius: var(--r-lg); }
.group-head { display: flex; align-items: center; gap: 12px; }
.faces { display: flex; margin-top: 16px; padding-left: 6px; }
.faces .avatar { margin-left: -6px; border: 2px solid var(--surface); }