/* ---------- Artifacts & Media ---------- */

.more-btn { justify-self: end; }
.topbar.library .round-btn#menu-btn { visibility: hidden; }

.view-library {
  overflow-y: auto;
  padding: calc(var(--topbar-h) + 16px) 16px calc(var(--tabbar-h) + var(--tabbar-gap) + 40px + env(safe-area-inset-bottom));
  scrollbar-width: none;
}
.view-library::-webkit-scrollbar { display: none; }
.view-library > * { max-width: var(--col); margin-left: auto; margin-right: auto; }

/* Library: Artifacts/Media switch with the "…" button beside it. */
.library-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.library-head .segmented { flex: 1; min-width: 0; margin-bottom: 0; }
.library-head .more-btn { flex: none; }
/* The top bar is empty on this tab, so the row sits in its place, and the pill matches the round button. */
.view-library { padding-top: calc(14px + env(safe-area-inset-top)); }
.topbar.library { background: none; }
.library-head .segmented { height: 44px; padding: 4px; }
.library-head .segmented button { font-size: 0.9375rem; }
.library-head .seg-indicator { top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); }
.library-head .more-btn { width: 44px; height: 44px; }

.segmented {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 60px;
  padding: 6px;
  border-radius: 999px;
  background: var(--pill);
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
.segmented button {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  border-radius: 999px;
}
.segmented button[aria-selected="true"] { color: var(--text); }
.seg-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc(50% - 6px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(16, 17, 19, 0.08);
  transform: translateX(calc(var(--seg, 0) * 100%));
  transition: transform 0.35s cubic-bezier(0.3, 0.8, 0.25, 1);
}

.artifact-list { display: flex; flex-direction: column; }
.artifact {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
}
.artifact .meta { flex: 1; min-width: 0; }
.artifact .meta strong { display: block; font-size: 1.125rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artifact .meta span { display: block; margin-top: 2px; font-size: 1rem; color: var(--text-2); }

/* Compact rows (like the connectors list). */
.artifact { gap: 12px; padding: 7px 0; }
.artifact .meta strong { font-size: 0.9375rem; }
.artifact .meta span { margin-top: 1px; font-size: 0.8125rem; }
.artifact .doc-icon { width: 30px; height: 37px; margin: 0 2px; border-radius: 5px; padding-bottom: 5px; font-size: 0.5625rem; }
.artifact .kebab svg { width: 18px; height: 18px; }
.kebab {
  width: 36px;
  height: 44px;
  border: 0;
  background: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  cursor: pointer;
  flex: none;
}
.kebab:hover { background: var(--muted); color: var(--text); }
.kebab svg { width: 20px; height: 20px; }

/* Document icon with a folded corner and a format label */
.doc-icon {
  width: 44px;
  height: 54px;
  margin: 0 6px;
  flex: none;
  position: relative;
  border-radius: 7px;
  background: #ececef;
  clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6e6e73;
  letter-spacing: 0.02em;
}
.doc-icon::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 32%;
  height: 26%;
  background: #d6d6db;
  border-bottom-left-radius: 5px;
}
.doc-icon.html { background: #3848e0; color: #fff; }
.doc-icon.html::after { background: #6a77f0; }
.doc-icon.pdf { background: #e5484d; color: #fff; }
.doc-icon.pdf::after { background: #f08589; }
.doc-icon.docx { background: #2b5fd9; color: #fff; }
.doc-icon.docx::after { background: #6a8ff0; }
.doc-icon.xlsx { background: #1f8a4c; color: #fff; }
.doc-icon.xlsx::after { background: #5fb883; }
.doc-icon.pptx { background: #d9622b; color: #fff; }
.doc-icon.pptx::after { background: #f09a6e; }
.doc-icon.app { background: #1d1d1f; color: #fff; }
.doc-icon.app::after { background: #4a4a50; }
.art-tile {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #cfe0f6, #6f9fd8);
  display: grid;
  place-items: center;
  font-size: 26px;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  border-radius: 18px;
  overflow: hidden;
}
.media-grid img, .media-grid .ph {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--muted);
}

.library-empty {
  margin: 48px auto 0;
  max-width: 320px;
  text-align: center;
  color: var(--text-2);
  line-height: 1.55;
}
.library-empty h2 { font-family: "Newsreader", Georgia, serif; font-size: 1.5rem; font-weight: 500; color: var(--text); margin-bottom: 8px; }
.media-grid .library-empty { grid-column: 1 / -1; }

/* Artifact viewer */
.doc-view {
  background: #fff;
  border-radius: 24px;
  padding: 24px 22px 28px;
  line-height: 1.6;
  font-size: 1.0625rem;
  overflow-wrap: anywhere;
}
.doc-view h1, .doc-view h2, .doc-view h3 { font-family: "Inter", sans-serif; letter-spacing: -0.01em; line-height: 1.3; }
.doc-view h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; }
.doc-view h2 { font-size: 1.1875rem; font-weight: 600; margin: 22px 0 8px; }
.doc-view h3 { font-size: 1.0625rem; font-weight: 600; margin: 18px 0 6px; }
.doc-view p { margin: 8px 0; }
.doc-view ul { margin: 6px 0; padding-left: 1.2em; }
.doc-view li + li { margin-top: 4px; }

/* Small action menu */
.menu-pop {
  position: fixed;
  z-index: 40;
  min-width: 180px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(16, 17, 19, 0.16);
  animation: fade 0.12s ease;
}
.menu-pop button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  padding: 11px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.menu-pop button:hover { background: var(--muted); }
.menu-pop button.danger { color: var(--error); }

/* Option menus (Goals "…"): a checkmark column, section label and rules. */
.menu-pop.rich { min-width: 250px; padding: 8px; border-radius: 26px; }
.menu-pop.rich button { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 10px; border-radius: 14px; font-size: 1.0625rem; color: var(--text); }
.menu-lead { flex: none; width: 24px; height: 24px; display: grid; place-items: center; }
.menu-lead svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-heading { padding: 10px 14px 4px 46px; font-size: 0.875rem; color: var(--text-2); }
.menu-rule { margin: 6px 14px 6px 46px; border: 0; border-top: 1px solid var(--border); }