/* Gather — United Adoration team chat */

:root {
  /* exact colors extracted from the logo's stone files */
  --ua-yellow: #FBB223;
  --ua-green: #2DB77D;
  --ua-blue: #1380B9;
  --ua-lightblue: #25AED2;
  --ua-red: #ED2A31;
  --ua-lime: #90C843;
  --ua-teal: #12A89D;
  --ua-deepteal: #126074;
  --ua-sky: #88CEE4;
  --ua-pink: #DB77AE;
  --ua-orange: #F15A2D;
  --ua-forest: #0C9246;

  --bg-dark: #1A1A1A;
  --bg-darker: #141414;
  --bg-main: #FFFFFF;
  --bg-hover: #F6F6F4;
  --border: #E4E2DE;
  --text: #1A1A1A;
  --text-dim: #5C5C59; /* one shade darker than before — easier on older eyes */
  --sidebar-text: #C9C9C5;
  --sidebar-active: #2E2E2C;
  --accent: var(--ua-teal);

  font-size: 15.5px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--bg-main);
  height: 100vh;
  height: 100dvh; /* mobile browsers: track the real visible viewport */
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .workspace-name, .login-card h1 { font-family: 'Varela Round', 'Inter', sans-serif; }

.hidden { display: none !important; }

button {
  font-family: inherit; cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease, box-shadow 0.13s ease;
}
textarea, input { font-family: inherit; font-size: inherit; }
.ic { display: block; flex-shrink: 0; }
button .ic, .search-ic .ic { pointer-events: none; }

/* ---------- Login ---------- */

.login {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(1100px 700px at 50% 18%, #242422, var(--bg-darker));
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  width: 380px; max-width: 90vw; text-align: center; color: #fff;
}
.login-logo { width: 210px; margin-bottom: 18px; }
/* the tiles assemble, one by one — a single moment of motion at the door */
.login-tiles { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; }
.login-tiles img {
  width: 21px; height: 21px; object-fit: contain; display: inline-block;
  opacity: 0; transform: scale(0.5);
  animation: tile-in 0.3s ease forwards;
}
.login-tiles img:nth-child(1) { animation-delay: 0.15s; }
.login-tiles img:nth-child(2) { animation-delay: 0.24s; }
.login-tiles img:nth-child(3) { animation-delay: 0.33s; }
.login-tiles img:nth-child(4) { animation-delay: 0.42s; }
.login-tiles img:nth-child(5) { animation-delay: 0.51s; }
.login-tiles img:nth-child(6) { animation-delay: 0.6s; }
.login-tiles img:nth-child(7) { animation-delay: 0.69s; }
.login-tiles img:nth-child(8) { animation-delay: 0.78s; }
@keyframes tile-in { to { opacity: 1; transform: scale(1); } }

/* Update banner — appears when a deploy lands while the app is open */
#update-banner {
  position: fixed;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 9px 9px 16px;
  background: var(--ua-deepteal);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  font-size: 14px;
  animation: update-banner-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes update-banner-in {
  from { opacity: 0; transform: translate(-50%, -16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.update-banner-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ua-yellow);
  animation: update-banner-pulse 1.8s ease-in-out infinite;
}
@keyframes update-banner-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 178, 35, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(251, 178, 35, 0); }
}
.update-banner-text { font-weight: 500; white-space: nowrap; }
.update-banner-btn {
  border: 0;
  background: #fff;
  color: var(--ua-deepteal);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.update-banner-btn:hover { background: var(--ua-yellow); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .login-tiles img { animation: none; opacity: 1; transform: none; }
}
.login-card h1 { font-size: 44px; letter-spacing: 2px; }
.login-sub { color: #9b9b97; margin: 10px 0 30px; line-height: 1.5; }
.login-card input {
  width: 100%; padding: 13px 16px; margin-bottom: 12px;
  border-radius: 12px; border: 1px solid #3a3a38; background: #242422; color: #fff;
  outline: none;
}
.login-card input:focus { border-color: var(--ua-teal); }
.login-card button {
  width: 100%; padding: 13px; border: none; border-radius: 12px;
  background: var(--ua-teal); color: #fff; font-weight: 600; font-size: 16px;
}
.login-card button:hover { background: var(--ua-deepteal); }
.login-error { color: var(--ua-red); margin-top: 12px; min-height: 1em; font-size: 13px; }

/* ---------- Layout ---------- */

.app { display: flex; height: 100vh; height: 100dvh; }
.mobile-only { display: none !important; }
.drawer-scrim { display: none; }

.sidebar {
  width: 250px; flex-shrink: 0; background: var(--bg-dark); color: var(--sidebar-text);
  display: flex; flex-direction: column;
}
.workspace { padding: 16px 16px 13px; border-bottom: 1px solid #2c2c2a; }
.workspace-name { color: #fff; font-size: 17px; display: flex; align-items: center; gap: 9px; }
.ws-icon {
  width: 26px; height: 26px; object-fit: contain;
  background: #fff; padding: 3px; border-radius: 8px; box-sizing: border-box;
}

.me-row { margin-bottom: 4px; }
.me-row .avatar.small { width: 28px; height: 28px; border-radius: 9px; font-size: 11px; }
.me-row .me-name { flex: 1; color: #fff; font-weight: 600; font-size: 14px; text-align: left; }

.sidebar-scroll { flex: 1; overflow-y: auto; padding: 12px 0; }
.sidebar-section { margin-bottom: 20px; }
.sidebar-heading {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 16px 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 1px; color: #8a8a86;
}
.sidebar-heading .icon-btn { color: #8a8a86; width: 24px; height: 24px; border-radius: 6px; }
.sidebar-heading .icon-btn:hover { color: #fff; }

.sidebar ul { list-style: none; padding: 0 8px; }
.sidebar li {
  padding: 5px 9px; margin: 1px 0; cursor: pointer; display: flex; align-items: center; gap: 8px;
  font-size: 14px; white-space: nowrap; overflow: hidden; border-radius: 8px;
  transition: background 0.13s ease, color 0.13s ease;
}
.sidebar li:hover { background: rgba(255, 255, 255, 0.07); }
.sidebar li.active { background: var(--ua-deepteal); color: #fff; }
.sidebar li.unread { color: #fff; font-weight: 600; }
.sidebar li .label { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.badge {
  background: var(--ua-red); color: #fff; border-radius: 6px;
  font-size: 11px; font-weight: 700; padding: 1px 7px;
}
.hash { opacity: 0.6; display: flex; }
.sidebar li.active .hash, .sidebar li.unread .hash { opacity: 0.9; }
.hash.hued { opacity: 0.95; }
.chan-tile.sm { width: 13px; height: 13px; }

/* tiny logo tiles instead of circles — the brand's geometry, everywhere */
.presence-dot {
  width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0;
  background: transparent; border: 1.5px solid #8a8a86;
}
.presence-dot.online { background: var(--ua-lime); border-color: var(--ua-lime); }

/* Slack-style: the presence tile overlaps the avatar's corner */
.av-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.av-wrap .presence-dot.ovl {
  position: absolute; right: -3px; bottom: -3px;
  width: 11px; height: 11px; border-radius: 4px;
  box-shadow: 0 0 0 2.5px #fff;
  background: #B4B2A9; border: none;
}
.av-wrap .presence-dot.ovl.online { background: var(--ua-lime); }
.sidebar .av-wrap .presence-dot.ovl, .rail .av-wrap .presence-dot.ovl {
  box-shadow: 0 0 0 2.5px var(--bg-dark);
}
.rail .av-wrap .presence-dot.ovl { box-shadow: 0 0 0 2.5px var(--bg-darker); }
.av-wrap .avatar.xs + .presence-dot.ovl, .me-row .presence-dot.ovl {
  width: 9px; height: 9px; border-radius: 3px; right: -2px; bottom: -2px;
}

/* Slack-style "on vacation" marker — the palm-tree status emoji shown inline right
   after a teammate's name (chat headers, DM list, members, directory, profile). */
.vac-mark {
  display: inline-block; margin-left: 4px; font-size: 0.92em; line-height: 1;
  vertical-align: baseline; flex-shrink: 0; text-decoration: none;
}
.mr-name .vac-mark { margin-left: 0; } /* the row's own flex gap already spaces it */

/* Same palm tree, but as a corner badge on the avatar itself (top corner, opposite
   the presence dot) — shown wherever a vacationing teammate's avatar appears. */
.av-wrap .vac-ovl {
  position: absolute; right: -5px; top: -5px;
  font-size: 11px; line-height: 1; pointer-events: none;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 1px #fff;
}
.av-wrap:has(.avatar.xs) .vac-ovl, .av-wrap:has(.avatar.tiny) .vac-ovl,
.me-row .vac-ovl { font-size: 9px; right: -4px; top: -4px; }
.rail .av-wrap .vac-ovl, .sidebar .av-wrap .vac-ovl {
  text-shadow: 0 0 2px var(--bg-darker), 0 0 2px var(--bg-darker), 0 0 1px var(--bg-darker);
}

.avatar.xs { width: 20px; height: 20px; border-radius: 6px; font-size: 9px; }
.gdm-pile { display: flex; flex-shrink: 0; }
.gdm-pile .avatar.xs:nth-child(2) { margin-left: -7px; box-shadow: 0 0 0 2px var(--bg-dark); }
.gdm-row { cursor: pointer; }
.gdm-row input { accent-color: var(--ua-teal); }

.sidebar-footer { padding: 10px 12px; border-top: 1px solid #2c2c2a; }
.footer-btn {
  width: 100%; text-align: left; background: none; border: none;
  color: var(--sidebar-text); padding: 7px 9px; border-radius: 8px; font-size: 13.5px;
  display: flex; align-items: center; gap: 9px;
}
.footer-btn:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.footer-btn .ic { opacity: 0.75; }

/* ---------- Main ---------- */

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 18px; border-bottom: 1px solid var(--border); gap: 16px;
}
.channel-info { min-width: 0; }
.channel-info h2 { font-size: 18px; display: flex; align-items: center; gap: 7px; }
.channel-info h2 .ic { color: var(--text-dim); }
.topic-btn {
  background: none; border: none; color: var(--text-dim); font-size: 13px;
  padding: 0; max-width: 60ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; text-align: left;
}
.topic-btn:hover { color: var(--text); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.search-wrap { position: relative; display: flex; align-items: center; }
.search-ic {
  position: absolute; left: 11px; color: var(--text-dim); display: flex; pointer-events: none;
}
#search {
  width: 250px; padding: 7px 14px 7px 33px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-hover); outline: none; font-size: 13.5px;
  transition: border-color 0.13s ease, background 0.13s ease, box-shadow 0.13s ease;
}
#search:focus {
  border-color: var(--ua-teal); background: #fff;
  box-shadow: 0 0 0 3px rgba(18, 168, 157, 0.12);
}
#members-btn { display: flex; align-items: center; gap: 5px; color: var(--text-dim); }
#members-btn .mb-count { font-size: 12.5px; font-weight: 600; }

.content { flex: 1; display: flex; min-height: 0; }
.messages-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }

/* Birthday replay chip */
.bday-replay {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
  background: #fff; font-size: 12.5px; font-weight: 600; color: var(--text-dim);
}
.bday-replay:hover { border-color: var(--ua-teal); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

/* Birthday cascade — the 12 logo stones raining over the chat */
.stone-cascade { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; }
.stone-cascade img {
  position: absolute; top: -28px; opacity: 0;
  animation: stone-fall linear forwards;
}
@keyframes stone-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  6% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate(var(--drift, 0px), 105vh) rotate(var(--spin, 360deg)); opacity: 0; }
}

.messages { flex: 1; overflow-y: auto; padding: 18px 0 8px; }

.day-divider {
  display: flex; align-items: center; gap: 12px; margin: 14px 18px;
  color: var(--text-dim); font-size: 12px; font-weight: 600;
}
.day-divider::before, .day-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.day-divider span {
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 13px; background: #fff;
}

.msg { display: flex; gap: 10px; padding: 5px 18px; position: relative; }
.msg:not(.continued) { margin-top: 6px; } /* breathing room between message groups */
.msg:hover { background: var(--bg-hover); }
.msg.highlight { background: #FFF6E0; }
.msg.continued { padding-top: 2px; }
.msg.continued .avatar { visibility: hidden; height: 0; }

.avatar {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
  font-family: 'Varela Round', sans-serif; position: relative;
}
.avatar::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 45%, rgba(0,0,0,0.10));
}
img.avatar { object-fit: cover; border: 1px solid var(--border); }
img.avatar.bot-logo { background: #fff; object-fit: contain; padding: 4px; box-sizing: border-box; }
img.avatar.tiny.bot-logo, img.avatar.xs.bot-logo { padding: 2px; }
.avatar.pm-big { width: 64px; height: 64px; border-radius: 16px; font-size: 24px; }
.pm-avatar-row { display: flex; align-items: center; gap: 14px; margin: 14px 0 16px; }
.pc-avatar { width: 52px; height: 52px; font-size: 20px; border: 3px solid #fff; border-radius: 14px; }
.avatar.small { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }

.msg-body { min-width: 0; flex: 1; }
.msg-head { display: flex; align-items: baseline; gap: 8px; }
.msg-author { font-weight: 700; cursor: pointer; }
.msg-author:hover { text-decoration: underline; }
.msg-time { color: var(--text-dim); font-size: 11.5px; }
.msg-time, .dm-conv-top .when, .sr-meta { font-variant-numeric: tabular-nums; }
.msg-edited { color: var(--text-dim); font-size: 11px; }
.msg-pin-flag {
  font-size: 11px; color: var(--ua-orange); display: inline-flex; align-items: center; gap: 3px;
}

.msg-text {
  line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
  max-width: 72ch; /* cap line length — long lines are hard to track on wide monitors */
}
.msg-text code {
  background: var(--bg-hover); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 5px; font-size: 13px; color: var(--ua-red);
}
.msg-text pre {
  background: var(--bg-hover); border: 1px solid var(--border);
  padding: 10px 12px; border-radius: 8px; overflow-x: auto; margin: 4px 0;
}
.msg-text pre code { background: none; border: none; color: var(--text); }
.msg-text a { color: var(--ua-blue); }
.msg-text .quote {
  display: block; border-left: 3px solid #C9C7C3; padding-left: 10px;
  color: #4a4a47; margin: 1px 0;
}
.mention {
  background: rgba(37, 174, 210, 0.18); color: var(--ua-blue);
  border-radius: 4px; padding: 0 3px; font-weight: 600;
}
.mention.me { background: rgba(251, 178, 35, 0.3); color: var(--bg-dark); }

.msg-image { max-width: 360px; max-height: 280px; border-radius: 10px; margin-top: 6px; display: block; cursor: pointer; border: 1px solid var(--border); }

.reactions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.reaction {
  border: 1px solid var(--border); background: var(--bg-hover); border-radius: 999px;
  padding: 2px 9px; font-size: 13px; display: flex; gap: 5px; align-items: center;
}
.reaction.mine { border-color: var(--ua-teal); background: rgba(18, 168, 157, 0.1); }
.reaction:hover { border-color: var(--ua-teal); }
.reaction .count { font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
.reaction-add {
  border: 1px dashed var(--border); background: none; border-radius: 999px;
  padding: 3px 9px; color: var(--text-dim); opacity: 0; display: flex; align-items: center;
}
.reaction-add:hover { border-color: var(--ua-teal); color: var(--ua-teal); border-style: solid; }
.msg:hover .reaction-add { opacity: 1; }

/* Slack-style thread footer: replier avatars + count + last-reply time */
.thread-link {
  background: none; border: 1px solid transparent; border-radius: 8px;
  margin-top: 4px; padding: 3px 7px 3px 4px; display: flex; gap: 8px; align-items: center;
  max-width: 420px; text-align: left;
}
.thread-link:hover { background: #fff; border-color: var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.thread-link .facepile { display: flex; gap: 3px; }
.avatar.tiny {
  width: 22px; height: 22px; border-radius: 7px; font-size: 9px; cursor: default;
}
.thread-link .tl-count { color: var(--ua-deepteal); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.thread-link .tl-count:hover { text-decoration: underline; }
.thread-link .tl-last { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.thread-link .tl-view { display: none; color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.thread-link:hover .tl-last { display: none; }
.thread-link:hover .tl-view { display: inline; }

.msg-actions {
  position: absolute; top: -14px; right: 18px; display: none; gap: 2px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 3px; box-shadow: 0 4px 14px rgba(0,0,0,0.10); z-index: 5;
}
.msg:hover .msg-actions { display: flex; }
.msg-actions button {
  background: none; border: none; width: 28px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; color: var(--text-dim);
}
.msg-actions button:hover { background: var(--bg-hover); color: var(--text); }

.typing {
  min-height: 20px; padding: 0 18px 2px; font-size: 12px; color: var(--text-dim);
  font-style: italic; display: flex; align-items: center; gap: 7px;
}
/* three little stones, breathing in the channel's color */
.typing-stones { display: inline-flex; gap: 3px; }
.typing-stones i {
  width: 6px; height: 6px; border-radius: 2px; background: var(--ts, var(--ua-teal));
  animation: typing-pulse 1.2s ease-in-out infinite;
}
.typing-stones i:nth-child(2) { animation-delay: 0.2s; }
.typing-stones i:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-pulse {
  0%, 60%, 100% { transform: scale(0.7); opacity: 0.45; }
  30% { transform: scale(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .typing-stones i { animation: none; opacity: 0.7; }
}

/* ---------- Composer ---------- */

.composer { padding: 0 18px 14px; }
.composer-card {
  border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden;
  transition: border-color 0.13s ease, box-shadow 0.13s ease;
}
.composer-card:focus-within {
  border-color: var(--ua-teal);
  box-shadow: 0 0 0 3px rgba(18, 168, 157, 0.12);
}
.composer-toolbar {
  display: flex; align-items: center; gap: 2px; padding: 5px 8px;
  background: #FAFAF8; border-bottom: 1px solid var(--bg-hover);
}
.composer-toolbar button {
  background: none; border: none; width: 32px; height: 30px; border-radius: 6px;
  color: var(--text-dim); display: flex; align-items: center; justify-content: center;
  overflow: visible; padding: 0;
}
.composer-toolbar button .ic { overflow: visible; }
.composer-toolbar button:hover { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.07); }
.composer-toolbar .tb-sep { width: 1px; height: 16px; background: var(--border); margin: 0 5px; }
.composer-row {
  display: flex; align-items: flex-end; gap: 8px; padding: 9px 10px;
}
#input, #thread-input {
  flex: 1; border: none; outline: none; resize: none; max-height: 160px; line-height: 1.4;
  background: transparent;
}
/* Rich editors (contenteditable) — formatting shows live as you type */
.editor { overflow-y: auto; min-height: 22px; word-break: break-word; }
.editor:empty::before { content: attr(data-placeholder); color: var(--text-dim); pointer-events: none; }
.editor blockquote {
  border-left: 3px solid #C9C7C3; padding-left: 10px; margin: 2px 0; color: #4a4a47;
}
.editor code {
  background: var(--bg-hover); border: 1px solid var(--border); padding: 0 4px;
  border-radius: 5px; font-size: 13px; color: var(--ua-red);
}
.editor pre {
  background: var(--bg-hover); border: 1px solid var(--border); padding: 8px 10px;
  border-radius: 8px; margin: 3px 0; white-space: pre-wrap;
}
.editor a { color: var(--ua-blue); }
.editor ol, .editor ul { margin: 2px 0 2px 22px; }

/* Resource write-up editor */
.res-write-card {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  margin-bottom: 12px; background: #fff;
  transition: border-color 0.13s ease, box-shadow 0.13s ease;
}
.res-write-card:focus-within {
  border-color: var(--ua-teal);
  box-shadow: 0 0 0 3px rgba(18, 168, 157, 0.12);
}
.res-editor {
  padding: 10px 12px; min-height: 140px; max-height: 300px;
  outline: none; line-height: 1.55; font-size: 14px;
}
.send-btn {
  background: var(--ua-teal); border: none; color: #fff; border-radius: 10px;
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.send-btn:hover { background: var(--ua-deepteal); }
.send-btn .ic { margin: 1px 1px 0 0; }
.composer-hint { font-size: 11px; color: var(--text-dim); margin-top: 6px; padding-left: 6px; }

.icon-btn {
  background: none; border: none; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--text-dim);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.sidebar .icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.image-preview { position: relative; display: inline-block; margin-bottom: 8px; }
.image-preview img { max-height: 90px; border-radius: 8px; border: 1px solid var(--border); display: block; }
.image-preview .icon-btn {
  position: absolute; top: -8px; right: -8px; background: var(--bg-dark); color: #fff;
  border-radius: 50%; width: 22px; height: 22px; font-size: 11px; padding: 0;
}

/* ---------- Right panel (threads & pins) ---------- */

.content { position: relative; }
.panel {
  width: clamp(260px, 36vw, 360px); flex-shrink: 0; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; background: #fff;
}
/* On narrow windows the panel floats over the messages instead of crushing them */
@media (max-width: 860px) {
  .panel {
    position: absolute; right: 0; top: 0; bottom: 0; z-index: 40;
    width: min(340px, 86%); box-shadow: -8px 0 24px rgba(0,0,0,0.12);
  }
}
.panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border); gap: 10px;
}
.panel-header h3 {
  font-size: 15px; display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.panel-header h3 .ic { flex-shrink: 0; color: var(--text-dim); }
.panel-body { flex: 1; overflow-y: auto; padding: 12px 0; }
.panel-body .msg { padding: 5px 14px; }
.panel-body .msg-actions { right: 14px; }
.panel-divider {
  margin: 10px 14px; font-size: 12px; color: var(--text-dim); font-weight: 600;
  border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.panel-composer { padding: 10px 14px 14px; display: flex; gap: 8px; align-items: flex-end;
  border-top: 1px solid var(--border); }
.panel-composer textarea {
  flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
  outline: none; resize: none; max-height: 120px;
}
.panel-composer textarea:focus { border-color: var(--ua-teal); }
.panel-empty { text-align: center; color: var(--text-dim); padding: 40px 24px; font-size: 13.5px; line-height: 1.6; }
.panel-empty .ic { display: inline-block; vertical-align: -2px; }

/* ---------- Floating: emoji picker, mentions, search, profile ---------- */

.emoji-picker {
  position: fixed; z-index: 50; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,0.16); padding: 8px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; width: 230px;
}
.emoji-picker button { background: none; border: none; font-size: 19px; padding: 5px; border-radius: 8px; }
.emoji-picker button:hover { background: var(--bg-hover); }

.mention-menu {
  position: fixed; z-index: 110; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,0.16); overflow-y: auto;
  min-width: min(250px, calc(100vw - 16px)); max-width: calc(100vw - 16px); max-height: 50vh; padding: 3px;
}
.mention-menu .mm-item {
  padding: 6px 10px; cursor: pointer; display: flex; gap: 8px; align-items: center;
  font-size: 14px; border-radius: 8px;
}
.mention-menu .mm-item:hover, .mention-menu .mm-item.selected { background: var(--bg-hover); }
.mm-head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--text-dim); padding: 7px 10px 2px;
}
.mm-ic {
  width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center;
  justify-content: center; background: var(--bg-hover); color: var(--text-dim); flex-shrink: 0;
}
.mm-meta { margin-left: auto; font-size: 11.5px; color: var(--text-dim); padding-left: 10px; }

/* ---------- Tag chips (channels, teams, resources in message text) ---------- */

.tag-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 6px;
  border-radius: 999px; font-weight: 600; font-size: 0.88em; cursor: pointer;
  vertical-align: -1px; line-height: 1.45; white-space: nowrap;
}
.tag-chip .ic { flex-shrink: 0; }
.tag-channel { background: var(--bg-hover); color: var(--bg-dark); border: 1px solid var(--border); }
/* team pill: the off-black logo container with the team's gem inside */
.tag-team { background: var(--bg-dark); color: #fff; padding: 1px 10px 1px 7px; }
.tag-team .ic { color: #fff; }
.tag-team:hover { filter: none; background: #2E2E2C; }
.mm-ic.mm-ic-team { background: var(--bg-dark); }
.tag-resource { background: rgba(219, 119, 174, 0.16); color: var(--bg-dark); }
.tag-resource .ic, .mm-ic.tag-resource { color: var(--ua-pink); }
.mm-ic.tag-resource { background: rgba(219, 119, 174, 0.16); }
.tag-tool { background: rgba(241, 90, 45, 0.14); color: var(--bg-dark); }
.tag-tool .ic, .mm-ic.tag-tool { color: var(--ua-orange); }
.mm-ic.tag-tool { background: rgba(241, 90, 45, 0.14); }
.tag-unknown { opacity: 0.55; }
.tag-chip:hover { filter: brightness(0.93); }
.editor .tag-chip { cursor: default; margin: 0 1px; }

.search-results {
  position: fixed; top: 54px; right: 18px; z-index: 60; width: 420px; max-height: 70vh;
  overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.18);
}
.search-results .sr-head { padding: 10px 14px; font-size: 12.5px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.search-results .sr-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--bg-hover); }
.search-results .sr-item:hover { background: var(--bg-hover); }
.search-results .sr-meta { font-size: 11.5px; color: var(--text-dim); margin-bottom: 3px; font-weight: 600; }
.search-results .sr-text { font-size: 13.5px; line-height: 1.4; }
.search-results .sr-text mark { background: #FFE9B8; border-radius: 3px; }

.profile-card {
  position: fixed; z-index: 60; width: 260px; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 14px 44px rgba(0,0,0,0.18); overflow: hidden;
}
.profile-card .pc-top { height: 64px; }
.profile-card .pc-body { padding: 0 16px 16px; margin-top: -26px; }
.profile-card .avatar { width: 52px; height: 52px; font-size: 20px; border: 3px solid #fff; border-radius: 14px; }
.profile-card h4 { margin-top: 8px; font-size: 16px; }
.profile-card .pc-role { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.profile-card .pc-status { font-size: 13px; margin-top: 8px; }
.profile-card .pc-presence { font-size: 12px; margin-top: 8px; display: flex; align-items: center; gap: 6px; color: var(--text-dim); }
.profile-card button.pc-dm {
  width: 100%; margin-top: 12px; padding: 8px; border: none; border-radius: 9px;
  background: var(--ua-teal); color: #fff; font-weight: 600;
}
.profile-card button.pc-dm:hover { background: var(--ua-deepteal); }

/* ---------- Modal ---------- */

.modal {
  position: fixed; inset: 0; z-index: 80; background: rgba(16, 16, 16, 0.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.modal-card {
  width: 420px; max-width: 92vw; background: #fff; border-radius: 18px; padding: 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.32);
}
.modal-card h3 { font-size: 20px; }
.modal-sub { color: var(--text-dim); font-size: 13px; margin: 6px 0 16px; }
.modal-card input[type="text"], .modal-card input[type="tel"],
.modal-card input[type="email"], .modal-card input[type="url"] {
  width: 100%; padding: 11px 14px; margin-bottom: 10px; border-radius: 10px;
  border: 1px solid var(--border); outline: none; font-size: 14px; background: #fff;
}
.modal-card input[type="text"]:focus, .modal-card input[type="tel"]:focus,
.modal-card input[type="email"]:focus, .modal-card input[type="url"]:focus { border-color: var(--ua-teal); }
.cm-check {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 4px 0 14px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 13.5px;
}
.cm-check:hover { background: var(--bg-hover); }
.cm-check input { margin-top: 3px; }
.cm-check small { color: var(--text-dim); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn-primary {
  border: none; border-radius: 10px; padding: 9px 18px; background: var(--ua-teal);
  color: #fff; font-weight: 600;
}
.btn-primary:hover { background: var(--ua-deepteal); }
.btn-ghost {
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 18px; background: none;
}
.btn-ghost:hover { background: var(--bg-hover); }
.modal-error { color: var(--ua-red); font-size: 13px; margin-top: 10px; min-height: 1em; }

/* Birthday row + sign out in the profile modal */
.pm-opt { font-weight: 400; color: var(--text-dim); }
.pm-bday { display: flex; gap: 8px; margin-bottom: 10px; }
.pm-bday select, .pm-bday input[type="number"] {
  flex: 1; min-width: 0; padding: 11px 10px; border-radius: 10px;
  border: 1px solid var(--border); outline: none; font-size: 14px; background: #fff;
}
.pm-bday select:focus, .pm-bday input[type="number"]:focus { border-color: var(--ua-teal); }
.pm-actions { justify-content: space-between; }
.pm-signout { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); }
.pm-signout:hover { color: var(--ua-red); border-color: var(--ua-red); background: rgba(237, 42, 49, 0.05); }

/* ---------- Calendar modal ---------- */

.cal-label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.cal-help { display: block; font-weight: 400; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.cal-row { margin: 10px 0; font-size: 14px; }
.cal-row select {
  padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); font-size: 13.5px;
  background: #fff; margin: 0 2px;
}
.cal-status { font-size: 13px; margin: 12px 0; min-height: 1.2em; color: var(--text-dim); }
.cal-status.ok { color: var(--ua-green); }
.cal-status.err { color: var(--ua-red); }
.cal-webhook {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-dim); line-height: 1.6;
}
.cal-webhook code { background: var(--bg-hover); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }
.cal-webhook-url { display: block; margin-top: 6px; word-break: break-all; user-select: all; }

/* Star button (channel header) */
#star-btn.starred { color: var(--ua-yellow); }
#star-btn.starred .ic { fill: var(--ua-yellow); }

/* Directory rows */
.directory-row .label { line-height: 1.45; }
.directory-row .sub.status { font-style: italic; }

.cm-type { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 12px; }
.cm-type .cm-check { margin: 0 0 6px; }
.lvl-select {
  padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border);
  font-size: 12.5px; background: #fff; font-family: inherit;
}

/* Lock icon inside the private-channel checkbox label */
.cm-lock { display: inline-flex; vertical-align: -1px; }
.cm-lock .ic { display: inline-block; }

/* Calendar settings entry inside Manage workspace */
.admin-cal-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin: 4px 0 12px; padding: 10px 12px; font-size: 14px;
}

/* ---------- File attachments & Files panel ---------- */

.file-preview {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 10px; padding: 7px 8px 7px 12px;
  font-size: 13px; color: var(--text); background: var(--bg-hover);
}
.file-preview .icon-btn { width: 22px; height: 22px; }

.msg-file {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 6px;
  border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px;
  text-decoration: none; color: var(--text); background: #fff; max-width: 340px;
  transition: border-color 0.13s ease, box-shadow 0.13s ease;
}
.msg-file { cursor: pointer; }
.msg-file:hover { border-color: var(--ua-teal); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.msg-file .mf-ic {
  width: 34px; height: 34px; border-radius: 9px; background: rgba(18, 168, 157, 0.12);
  color: var(--ua-teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.msg-file .mf-main { min-width: 0; display: flex; flex-direction: column; }
.msg-file .mf-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-file .mf-size { font-size: 11.5px; color: var(--text-dim); }
.msg-file .mf-dl { color: var(--text-dim); margin-left: auto; }
.msg-file .mf-dl:hover { color: var(--ua-teal); }

.msg-video { max-width: 380px; max-height: 300px; border-radius: 10px; margin-top: 6px; display: block; border: 1px solid var(--border); }

/* ---------- Voice notes & audio ---------- */

.voice-preview audio { height: 32px; max-width: 240px; }

.voice-bar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px;
  font-size: 13px; background: var(--bg-hover);
}
.vb-dot {
  width: 9px; height: 9px; border-radius: 3px; background: var(--ua-red);
  animation: typing-pulse 1.2s ease-in-out infinite; flex-shrink: 0;
}
.vb-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.vb-hint { color: var(--text-dim); font-style: italic; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-btn {
  border: 1px solid var(--border); background: #fff; border-radius: 8px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer;
}
.vb-btn:hover { background: var(--bg-hover); }
.vb-done { background: var(--ua-teal); border-color: var(--ua-teal); color: #fff; }
.vb-done:hover { background: var(--ua-deepteal); border-color: var(--ua-deepteal); }

#mic-btn.rec-live { color: var(--ua-red); background: rgba(237, 42, 49, 0.1); }

.msg-audio {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
  border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px;
  background: #fff; width: 320px; max-width: 100%;
  transition: border-color 0.13s ease, box-shadow 0.13s ease;
}
.msg-audio.playing, .msg-audio:hover { border-color: var(--ua-teal); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.ma-play {
  width: 34px; height: 34px; border-radius: 9px; border: none; cursor: pointer; flex-shrink: 0;
  background: var(--ua-teal); color: #fff; display: flex; align-items: center; justify-content: center;
}
.ma-play:hover { background: var(--ua-deepteal); }
.ma-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ma-track { height: 5px; border-radius: 3px; background: var(--bg-hover); cursor: pointer; overflow: hidden; }
.ma-prog { height: 100%; width: 0%; border-radius: 3px; background: var(--ua-teal); transition: width 0.2s linear; }
.ma-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-dim); }
.ma-name {
  display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ma-time { font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ma-dl { color: var(--text-dim); flex-shrink: 0; }
.ma-dl:hover { color: var(--ua-teal); }

.files-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 14px 10px;
}
.files-cell {
  position: relative; aspect-ratio: 1; border-radius: 9px; overflow: hidden;
  cursor: pointer; border: 1px solid var(--border); background: var(--bg-hover);
}
.files-cell img, .files-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.files-cell .files-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; background: rgba(0, 0, 0, 0.25);
}
.files-cell:hover { border-color: var(--ua-teal); }

.file-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 14px;
  text-decoration: none; color: var(--text);
}
.file-row { cursor: pointer; }
.file-row:hover { background: var(--bg-hover); }
.file-row .fr-ic {
  width: 38px; height: 38px; border-radius: 10px; background: rgba(237, 42, 49, 0.1);
  color: var(--ua-red); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.file-row .fr-main { min-width: 0; flex: 1; }
.file-row .fr-name { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .fr-meta { font-size: 11.5px; color: var(--text-dim); }
.file-row .fr-dl { color: var(--text-dim); }
.file-row .fr-dl:hover { color: var(--ua-teal); }

/* ---------- Team directory (full screen) ---------- */

.dir-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px;
}
.dir-card {
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #fff;
  transition: box-shadow 0.13s ease, border-color 0.13s ease;
}
.dir-card:hover { border-color: #d4d2ce; box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.dir-photo { position: relative; aspect-ratio: 1; background: var(--bg-hover); }
.dir-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-initials {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'Varela Round', sans-serif; font-weight: 700; font-size: 52px;
}
.dir-photo .presence-dot.dir-dot {
  position: absolute; right: 10px; bottom: 10px; width: 14px; height: 14px;
  border-radius: 5px; box-shadow: 0 0 0 3px #fff; background: #B4B2A9; border: none;
}
.dir-photo .presence-dot.dir-dot.online { background: var(--ua-lime); }
.dir-info { padding: 12px 14px 14px; }
.dir-info h4 { font-size: 15.5px; font-family: 'Varela Round', 'Inter', sans-serif; }
.dir-info h4 .sub { font-size: 12px; color: var(--text-dim); font-family: 'Inter', sans-serif; }
.dir-role { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.dir-status { font-size: 12.5px; font-style: italic; color: var(--text-dim); margin-top: 5px; }
.dir-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; gap: 8px; }
.dir-contacts { display: flex; gap: 5px; }
.dir-contacts a {
  width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; color: var(--ua-deepteal); background: rgba(18, 96, 116, 0.09);
  transition: background 0.13s ease, color 0.13s ease;
}
.dir-contacts a:hover { background: var(--ua-deepteal); color: #fff; }

.pc-contacts { margin-top: 9px; display: flex; flex-direction: column; gap: 4px; }
.pc-contacts a {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--ua-deepteal); text-decoration: none;
}
.pc-contacts a:hover { text-decoration: underline; }

.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- Admin ---------- */

.dropdown {
  position: fixed; z-index: 70; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,0.16); overflow: hidden;
  min-width: 190px; padding: 4px;
}
.dropdown div {
  padding: 8px 11px; cursor: pointer; display: flex; gap: 9px; align-items: center;
  font-size: 13.5px; border-radius: 8px; color: var(--text);
}
.dropdown div:hover { background: var(--bg-hover); }
.dropdown div.danger { color: var(--ua-red); }
.dropdown div.danger:hover { background: rgba(224, 48, 32, 0.08); }
.dropdown .ic { color: var(--text-dim); }
.dropdown div.danger .ic { color: var(--ua-red); }

.modal-head { display: flex; justify-content: space-between; align-items: center; }
.admin-body { max-height: 50vh; overflow-y: auto; margin: 6px -10px 0; }
.admin-body .member-row { padding: 8px 10px; border-radius: 10px; }
.admin-body .member-row:hover { background: var(--bg-hover); }
.admin-body .member-row.removed { opacity: 0.55; }
.admin-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  color: var(--ua-deepteal); background: rgba(18, 168, 157, 0.12);
  border-radius: 999px; padding: 1px 8px; vertical-align: 1px;
}
.pc-role.admin-chip { display: inline-flex; margin-top: 6px; }
.dir-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.dir-badges:empty { display: none; }
/* Vacation toggle in the profile modal */
.pm-vac-row { display: flex; align-items: center; gap: 9px; margin: 4px 0 14px; cursor: pointer; }
.pm-vac-row input { width: 16px; height: 16px; accent-color: var(--ua-orange, #F15A2D); flex-shrink: 0; }
.pm-vac-text { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text); }
.pm-vac-text .ic { color: #B8461F; }
/* On-brand outline button (directory Message/Edit profile, etc.) */
.btn-add {
  border: 1px solid var(--ua-teal); color: var(--ua-teal); background: none;
  border-radius: 8px; padding: 7px 16px; font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.btn-add:hover { background: var(--ua-teal); color: #fff; }
.member-row .btn-add.danger { border-color: var(--ua-red); color: var(--ua-red); }
.member-row .btn-add.danger:hover { background: var(--ua-red); color: #fff; }

/* ---------- Members panel ---------- */

.member-row { display: flex; align-items: center; gap: 10px; padding: 7px 16px; }
.member-row .label { flex: 1; font-size: 14px; min-width: 0; }
.member-row .sub { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
/* stacked name + role keeps the row readable even with a badge and two buttons */
.member-row .mr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.member-row .mr-name { font-size: 14px; font-weight: 600; line-height: 1.25; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.member-row .mr-role { color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-row .admin-chip { font-size: 9.5px; letter-spacing: 0.3px; text-transform: uppercase; padding: 1px 7px; font-weight: 700; }

/* searchable account lists (members panel + new-message modal) */
.panel-search, .modal-search {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: #fff;
}
.panel-search { margin: 2px 16px 10px; }
.modal-search { margin: 0 0 10px; }
.panel-search .search-ic, .modal-search .search-ic { display: flex; color: var(--text-dim); flex-shrink: 0; }
.panel-search input, .modal-search input { border: none; background: none; outline: none; font: inherit; font-size: 13.5px; flex: 1; min-width: 0; }
.member-row .btn-add {
  border: 1px solid var(--ua-teal); color: var(--ua-teal); background: none;
  border-radius: 8px; padding: 4px 12px; font-size: 12.5px; font-weight: 600;
}
.member-row .btn-add:hover { background: var(--ua-teal); color: #fff; }

/* ---------- Rail (master menu) ---------- */

.rail {
  width: 76px; flex-shrink: 0; background: var(--bg-darker);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; gap: 6px; border-right: 1px solid #232321;
}
.rail-ws {
  width: 38px; height: 38px; object-fit: contain; margin-bottom: 12px;
  background: #fff; padding: 5px; border-radius: 11px; box-sizing: border-box;
}
.rail-btn {
  width: 62px; padding: 0 0 5px; border: none; background: none; border-radius: 12px;
  color: #9b9b97; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; font-family: inherit; position: relative;
}
.rail-tile {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.rail-btn:hover { color: #d6d6d2; }
.rail-btn:hover .rail-tile { background: rgba(255, 255, 255, 0.08); }
.rail-btn.active { color: #fff; }
.rail-btn.active .rail-tile { color: #fff; }
/* each section owns one logo color — the active tab becomes a logo tile */
.rail-btn[data-view="chats"].active .rail-tile { background: var(--ua-deepteal); }
.rail-btn[data-view="dms"].active .rail-tile { background: var(--ua-lightblue); }
.rail-btn[data-view="resources"].active .rail-tile { background: var(--ua-pink); }
.rail-btn[data-view="stories"].active .rail-tile { background: var(--ua-yellow); }
.rail-btn[data-view="tools"].active .rail-tile { background: var(--ua-orange); }
.rail-badge {
  position: absolute; top: -3px; right: 8px; background: var(--ua-red); color: #fff;
  border-radius: 5px; font-size: 9.5px; font-weight: 700; min-width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.rail-me {
  margin-top: auto; border: none; background: none; padding: 0; border-radius: 12px;
}
.rail-me .avatar { width: 34px; height: 34px; border-radius: 11px; font-size: 13px; }
.rail-me:hover { outline: 2px solid rgba(255, 255, 255, 0.25); }

/* ---------- Brand tiles ---------- */

/* the actual logo gems, used as identity marks */
.stone-img { object-fit: contain; flex-shrink: 0; display: inline-block; vertical-align: -2px; }
.chan-lock { color: var(--text-dim); display: flex; margin-left: 2px; }
.chan-team-ic { display: flex; }

/* faint gems for empty states — the canvas waiting to be filled */
.tile-row { display: flex; gap: 7px; justify-content: center; margin-bottom: 12px; }
.tile-row .stone-img { opacity: 0.3; }

/* resource category markers carry the section's pink gem */
.res-cat-title::before {
  content: ''; display: inline-block; width: 10px; height: 10px;
  background: url('/stones/stone-10.png') center / contain no-repeat;
  margin-right: 8px; opacity: 0.9;
}

/* ---------- DMs view sidebar ---------- */

.dm-conv { align-items: flex-start !important; padding: 8px 9px !important; }
.dm-conv .avatar.small { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; }
.dm-conv-main { flex: 1; min-width: 0; }
.dm-conv-top { display: flex; align-items: baseline; gap: 6px; }
.dm-conv-top .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.dm-conv-top .when { font-size: 10.5px; color: #8a8a86; flex-shrink: 0; }
.dm-conv .snippet {
  font-size: 12px; color: #9b9b97; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; margin-top: 1px;
}
.sidebar li.unread .snippet { color: #d6d6d2; }

/* ---------- Resources & Tools views ---------- */

.alt-view { flex: 1; overflow-y: auto; padding: 26px 30px; min-width: 0; }
.alt-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  margin-bottom: 22px;
}
.alt-head h2 { font-size: 24px; }
.alt-head p { color: var(--text-dim); font-size: 13.5px; margin-top: 4px; }
.alt-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: #C9C7C3; padding: 70px 0;
}
.alt-empty p { color: var(--text-dim); font-size: 14px; }

.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tool-card {
  border: 1px solid var(--border); border-radius: 14px; padding: 18px 16px;
  background: #fff; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  transition: box-shadow 0.13s ease, border-color 0.13s ease, transform 0.13s ease;
}
.tool-card:hover { border-color: #d4d2ce; box-shadow: 0 4px 16px rgba(0,0,0,0.07); transform: translateY(-1px); }
.tool-card .tool-emoji {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; font-size: 22px; margin-bottom: 12px;
}
.tool-card h4 { font-size: 14.5px; }
.tool-card p { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.5; }

.tool-frame-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #fff; }
.tool-frame-wrap.hidden { display: none; }
.tool-frame-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
}
.tool-frame-bar h3 { font-size: 14px; flex: 1; }
.tool-newtab { display: flex; align-items: center; color: var(--text-dim); }
.tool-newtab:hover { color: var(--text); }
#tool-frame { flex: 1; width: 100%; border: 0; }

.res-cat-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
  color: var(--text-dim); margin: 22px 0 10px;
}
.res-cat-title:first-child { margin-top: 0; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.res-card {
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px;
  position: relative; background: #fff; transition: box-shadow 0.13s ease, border-color 0.13s ease;
}
.res-card:hover { border-color: #d4d2ce; box-shadow: 0 3px 12px rgba(0,0,0,0.06); }
.res-card h4 { font-size: 14.5px; }
.res-card h4 a { color: var(--ua-deepteal); text-decoration: none; }
.res-card h4 a:hover { text-decoration: underline; }
.res-card .res-desc { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.5; }
.res-card .res-meta { font-size: 11px; color: #b0aeaa; margin-top: 10px; }
.res-card .res-tools {
  position: absolute; top: 8px; right: 8px; opacity: 0; display: flex; gap: 2px;
}
.res-card:hover .res-tools { opacity: 1; }
.res-card .res-tools button {
  background: #fff; border: 1px solid var(--border); color: var(--text-dim); border-radius: 7px;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.res-card .res-tools button:hover { color: var(--text); }
.res-card .res-tools .res-del:hover { color: var(--ua-red); border-color: var(--ua-red); }

.res-actions { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.res-actions a, .res-actions button {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 8px; font-size: 12.5px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--ua-teal); color: var(--ua-teal); background: none; cursor: pointer;
}
.res-actions a:hover, .res-actions button:hover { background: var(--ua-teal); color: #fff; }

.res-select, #res-body-input, #cat-new {
  width: 100%; padding: 10px 12px; margin-bottom: 10px; border-radius: 10px;
  border: 1px solid var(--border); outline: none; font-family: inherit; font-size: 14px;
  background: #fff;
}
#res-body-input { resize: vertical; line-height: 1.5; }
#res-body-input:focus, #cat-new:focus, .res-select:focus { border-color: var(--ua-teal); }
.res-dl-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.res-dl-row #cat-new { margin-bottom: 0; flex: 1; }
.res-file-name { font-size: 12.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; flex: 1; }

.cat-list { margin: 4px 0 14px; max-height: 40vh; overflow-y: auto; }
.cat-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 4px;
  border-bottom: 1px solid var(--bg-hover); font-size: 14px;
}
.cat-row .label { flex: 1; }
.cat-row .sub { color: var(--text-dim); font-size: 12px; }

.modal-card.reader { width: 640px; max-width: 94vw; max-height: 86vh; overflow-y: auto; }
.reader-meta { color: var(--text-dim); font-size: 12.5px; margin: 4px 0 16px; }
.reader-body { line-height: 1.65; white-space: pre-wrap; word-wrap: break-word; font-size: 15px; }
.reader-body a { color: var(--ua-blue); }
.reader-body .quote { display: block; border-left: 3px solid #C9C7C3; padding-left: 10px; color: #4a4a47; }
.reader-actions { margin-top: 20px; display: flex; gap: 10px; }
.reader-actions a {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px;
  background: var(--ua-teal); color: #fff; font-weight: 600; font-size: 13.5px; text-decoration: none;
}
.reader-actions a:hover { background: var(--ua-deepteal); }
.reader-actions a.ghost { background: none; border: 1px solid var(--border); color: var(--text); }
/* center (not stretch) so the search box + buttons all settle at one height
   instead of stretch distorting them to different sizes */
.alt-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.alt-actions > * { min-height: 40px; }
.alt-actions .btn-ghost, .alt-actions .btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; padding-top: 0; padding-bottom: 0;
}

/* ---------- Resources: header controls ---------- */
.res-search-wrap { position: relative; display: flex; align-items: stretch; }
.res-search-wrap .search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-dim); display: flex; pointer-events: none; }
#res-search, #story-search {
  width: 200px; padding: 0 12px 0 34px; border-radius: 10px; border: 1px solid var(--border);
  outline: none; font-family: inherit; font-size: 13.5px; background: #fff;
  align-self: stretch; box-sizing: border-box; /* fill the 40px row height, matching the buttons */
}
#res-search:focus, #story-search:focus { border-color: var(--ua-teal); width: 240px; }
.res-view-toggle { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.res-view-toggle button {
  width: 36px; align-self: stretch; display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--text-dim); border: none; cursor: pointer;
}
.res-view-toggle button + button { border-left: 1px solid var(--border); }
.res-view-toggle button:hover { color: var(--text); }
.res-view-toggle button.active { background: var(--ua-teal); color: #fff; }

/* Jump chips */
.res-jump { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 18px; }
.res-jump.hidden { display: none; }
.res-jchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 12.5px;
  font-weight: 500; cursor: pointer;
}
.res-jchip:hover { border-color: var(--ua-teal); }
.res-jchip .stone-img { display: block; flex-shrink: 0; }
.res-jchip .jn { color: var(--text-dim); font-size: 11px; }
.res-jchip svg { color: var(--ua-yellow); }
.res-jchip.active { background: var(--ua-deepteal); border-color: var(--ua-deepteal); color: #fff; }
.res-jchip.active .jn { color: rgba(255,255,255,0.72); }
.res-jchip.active svg { color: #fff; }

/* Sections */
.res-section { margin-bottom: 8px; }
.res-section-ess { background: rgba(19, 128, 185, 0.08); border-radius: 14px; padding: 2px 14px 14px; margin-bottom: 18px; }
.res-sec-head {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 12px 2px 10px;
  background: var(--bg-main); border: none; cursor: pointer; text-align: left;
  position: sticky; top: 0; z-index: 2;
}
.res-section-ess .res-sec-head { background: transparent; position: static; }
.res-sec-caret { color: var(--text-dim); display: flex; transition: transform 0.15s ease; }
.res-sec-caret.c { transform: rotate(-90deg); }
.res-sec-stone { display: flex; flex-shrink: 0; }
.res-sec-ic { display: flex; }
.res-sec-name { font-size: 13px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text); }
.res-section-ess .res-sec-name { color: #0E5E86; }
.res-sec-n { font-size: 12px; color: var(--text-dim); }

/* Tile cards (gallery view) */
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 14px; }
.res-card2 {
  position: relative; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: #fff; cursor: pointer; transition: box-shadow 0.13s ease, transform 0.13s ease, border-color 0.13s ease;
}
.res-card2:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.09); transform: translateY(-2px); border-color: #d4d2ce; }
.rc-cover { height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; }
.rc-cover .rc-type { font-size: 10px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; opacity: 0.92; }
.rc-cover-col { }
.rc-fan { display: flex; align-items: center; }
.rc-fan img {
  width: 46px; height: 62px; object-fit: cover; object-position: top; border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.85); background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.14); margin-left: -12px;
}
.rc-fan img:first-child { margin-left: 0; transform: rotate(-4deg); }
.rc-fan img:nth-child(2) { transform: translateY(-3px); z-index: 1; }
.rc-fan img:nth-child(3) { transform: rotate(4deg); }
.rc-count {
  position: absolute; bottom: 7px; right: 7px; background: rgba(0,0,0,0.4); color: #fff;
  font-size: 10px; font-weight: 500; border-radius: 999px; padding: 2px 8px;
}
.rc-info { padding: 9px 11px 11px; }
.rc-info h5 { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.rc-desc {
  font-size: 12px; color: var(--text-dim); margin-top: 4px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rc-meta { font-size: 11px; color: #a8a6a2; margin-top: 7px; }

/* Video embed covers */
.rc-cover-video { background: #1a1a1a; padding: 0; }
.rc-cover-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc-play, .rr-play {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff;
}
.rc-play svg { margin-left: 2px; } /* optically center the triangle */
.rr-cov-video { background: #1a1a1a; position: relative; }
.rr-cov-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rr-play { width: 24px; height: 24px; }
.rr-play svg { margin-left: 1px; }

/* Live "video detected" hint under the Link field */
.res-embed-hint {
  display: flex; align-items: center; gap: 6px; margin: -4px 0 12px;
  font-size: 12.5px; color: var(--ua-deepteal); font-weight: 500;
}
.res-embed-hint svg { color: var(--ua-teal); }

/* Paste-video-links textarea */
.video-urls {
  width: 100%; padding: 10px 12px; margin-bottom: 12px; border-radius: 10px;
  border: 1px solid var(--border); outline: none; font-family: inherit; font-size: 14px;
  background: #fff; resize: vertical; line-height: 1.6;
}
.video-urls:focus { border-color: var(--ua-teal); }

/* List rows (compact view) */
.res-list { display: flex; flex-direction: column; gap: 8px; }
.res-row {
  position: relative; display: flex; align-items: center; gap: 11px; background: #fff;
  border: 1px solid var(--border); border-left: 3px solid var(--c, var(--ua-teal)); border-radius: 10px;
  padding: 8px 12px; cursor: pointer; transition: background 0.12s ease, box-shadow 0.12s ease;
}
.res-row:hover { background: var(--bg-hover); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.rr-cov {
  width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.rr-cov-col img { width: 18px; height: 24px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(255,255,255,0.85); }
.rr-cov-col img + img { margin-left: -6px; }
.rr-main { flex: 1; min-width: 0; }
.rr-main h5 { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.rr-chip { font-size: 11px; font-weight: 500; border-radius: 7px; padding: 3px 9px; white-space: nowrap; flex-shrink: 0; }

/* Card tools (pin / edit / delete) — shared by tiles and rows */
.res-card2 .res-tools, .res-row .res-tools {
  display: flex; gap: 2px; opacity: 0; flex-shrink: 0;
}
.res-card2 .res-tools { position: absolute; top: 8px; right: 8px; z-index: 1; }
.res-card2:hover .res-tools, .res-row:hover .res-tools { opacity: 1; }
.res-tools button {
  background: #fff; border: 1px solid var(--border); color: var(--text-dim); border-radius: 7px;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.res-tools button:hover { color: var(--text); }
.res-tools .res-del:hover { color: var(--ua-red); border-color: var(--ua-red); }
.res-tools .res-pin.on { color: var(--ua-blue); border-color: var(--ua-blue); opacity: 1; }
.res-card2 .res-pin.on, .res-row .res-pin.on { opacity: 1; }

/* Essential checkbox in the add/edit modal */
.res-essential-row { display: flex; align-items: center; gap: 9px; margin: 4px 0 14px; font-size: 13.5px; cursor: pointer; }
.res-essential-row input { width: 16px; height: 16px; accent-color: var(--ua-blue); flex-shrink: 0; }
.res-essential-row strong { color: #0E5E86; font-weight: 600; }

@media (max-width: 760px) {
  .res-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
  #res-search { width: 130px; }
  #res-search:focus { width: 150px; }
  .res-card2 .res-tools, .res-row .res-tools { opacity: 1; }
}

/* ---------- Collections ---------- */

/* Type toggle in the add-resource modal */
.res-kind-btns { display: flex; gap: 8px; margin-bottom: 6px; }
.res-kind {
  flex: 1; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--border); background: #fff; color: var(--text-dim); cursor: pointer;
}
.res-kind.active { border-color: var(--ua-teal); color: var(--ua-deepteal); background: rgba(18, 168, 157, 0.08); }
#res-kind-row .cal-help { display: block; margin-bottom: 12px; }

/* Collection card on the Resources grid — a fan of covers */
.res-card-col { cursor: pointer; }
.col-fan { display: flex; height: 92px; margin-bottom: 12px; padding-left: 6px; align-items: flex-end; }
.col-fan img {
  width: 64px; height: 86px; object-fit: cover; object-position: top;
  border-radius: 6px; border: 1px solid var(--border); background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12); margin-left: -18px;
}
.col-fan img:first-child { margin-left: 0; transform: rotate(-4deg); }
.col-fan img:nth-child(2) { transform: translateY(-4px); z-index: 1; }
.col-fan img:nth-child(3) { transform: rotate(4deg); }
.col-fan-ph {
  width: 64px; height: 86px; border-radius: 6px; background: var(--bg-hover);
  display: flex; align-items: center; justify-content: center; color: var(--text-dim);
}

/* Inside a collection */
.col-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.col-head #col-back { flex-shrink: 0; white-space: nowrap; }
.col-title-wrap { flex: 1; min-width: 0; }
.col-title-wrap h2 { font-size: 21px; }
.col-title-wrap p { color: var(--text-dim); font-size: 13.5px; margin-top: 2px; }
.col-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
#col-search {
  width: 200px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border);
  outline: none; font-family: inherit; font-size: 13.5px; background: #fff;
}
#col-search:focus { border-color: var(--ua-teal); }
.col-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.col-tag {
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: var(--text-dim);
}
.col-tag:hover { border-color: var(--ua-teal); color: var(--ua-deepteal); }
.col-tag.active { background: var(--ua-deepteal); border-color: var(--ua-deepteal); color: #fff; }
.col-progress { font-size: 13px; color: var(--ua-deepteal); margin-bottom: 12px; }

.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.col-card {
  position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: #fff; cursor: pointer; transition: box-shadow 0.13s ease, transform 0.13s ease;
}
.col-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.1); transform: translateY(-2px); }
.col-cover { position: relative; aspect-ratio: 3 / 4; overflow: hidden; display: flex; align-items: flex-end; }
.col-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.col-cover-title {
  position: relative; color: #fff; font-weight: 700; font-size: 14px; line-height: 1.35;
  padding: 12px; word-wrap: break-word; max-width: 100%;
}
/* Play badge on a video item's cover (hidden under the hover overlay) */
.col-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff;
}
.col-play svg { margin-left: 2px; }
.col-card:hover .col-play { opacity: 0; }
.col-hover {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center; background: rgba(18, 24, 23, 0.55);
  opacity: 0; transition: opacity 0.13s ease; z-index: 2;
}
.col-card:hover .col-hover { opacity: 1; }
.col-hover .col-preview, .col-hover .col-dl {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: #fff; color: var(--ua-deepteal); font-size: 12.5px; font-weight: 700;
  border: none; cursor: pointer; text-decoration: none;
}
.col-hover .col-preview:hover, .col-hover .col-dl:hover { background: var(--ua-teal); color: #fff; }
.col-card-info { padding: 10px 12px 12px; }
.col-card-info h5 { font-size: 13.5px; line-height: 1.35; }
.col-card-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
.col-card .res-tools { position: absolute; top: 8px; right: 8px; opacity: 0; display: flex; gap: 2px; z-index: 1; }
.col-card:hover .res-tools { opacity: 1; }
.col-card .res-tools button {
  background: #fff; border: 1px solid var(--border); color: var(--text-dim); border-radius: 7px;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.col-card .res-tools button:hover { color: var(--text); }
.col-card .res-tools .res-del:hover { color: var(--ua-red); border-color: var(--ua-red); }

/* Link item cover — centered link glyph + hostname (no thumbnail to show) */
.col-cover-link-wrap { align-items: center; justify-content: center; }
.col-cover-link {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #fff; padding: 12px; text-align: center;
}
.col-cover-link .ccl-host { font-size: 11.5px; font-weight: 600; word-break: break-word; opacity: 0.95; }

/* Drag-to-reorder */
.col-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); margin: 0 0 12px; }
.col-draggable { cursor: grab; }
.col-card.dragging { opacity: 0.45; cursor: grabbing; box-shadow: 0 8px 22px rgba(0,0,0,0.18); }

/* Preview overlay */
.pv-card {
  width: min(880px, 94vw); height: 90vh; background: #fff; border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
}
.pv-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.pv-title-wrap { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; overflow: hidden; }
.pv-title-wrap h3 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-count { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.pv-head .icon-btn:disabled { opacity: 0.3; cursor: default; }
.pv-dl {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px;
  background: var(--ua-teal); color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none;
}
.pv-dl:hover { background: var(--ua-deepteal); }
.pv-body { flex: 1; background: #3a3a38; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pv-body iframe { width: 100%; height: 100%; border: 0; }
.pv-body .pv-embed { width: 100%; max-width: 1000px; height: auto; aspect-ratio: 16 / 9; align-self: center; }
.pv-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pv-body video { max-width: 100%; max-height: 100%; }
.pv-plain { color: #d6d4d0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; font-size: 14px; }

@media (max-width: 760px) {
  .col-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
  .col-head { flex-wrap: wrap; }
  /* touch screens have no hover — keep actions reachable via tap-to-preview */
  .col-card .res-tools, .col-hover { opacity: 1; }
  .col-hover { background: none; align-items: flex-end; justify-content: flex-end; flex-direction: row; padding: 8px; }
  .col-hover .col-preview { display: none; }
  .pv-card { height: 96vh; width: 100vw; border-radius: 0; }
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  :root { font-size: 16px; } /* comfortable reading size on phones */
  .mobile-only { display: flex !important; }

  /* Rail becomes a bottom tab bar (Slack mobile style) */
  .rail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%;
    height: calc(58px + env(safe-area-inset-bottom));
    flex-direction: row; justify-content: space-around; align-items: flex-start;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
    border-right: none; border-top: 1px solid #2c2c2a; z-index: 96;
  }
  .rail-ws, .rail-me { display: none; }
  .rail-btn { width: auto; flex: 1; max-width: 90px; padding: 0 0 2px; }
  .rail-tile { width: 38px; height: 32px; border-radius: 10px; }
  .main { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

  /* Sidebar becomes a slide-out drawer (above content, below the tab bar) */
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 95;
    bottom: calc(58px + env(safe-area-inset-bottom));
    width: min(82vw, 310px);
    transform: translateX(-103%);
    transition: transform 0.22s ease;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.35);
  }
  .alt-view { padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); }
  .app.drawer-open .sidebar { transform: translateX(0); }
  .drawer-scrim {
    display: block; position: fixed; inset: 0; z-index: 94;
    background: rgba(10, 10, 10, 0.45); opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .app.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }
  .workspace { padding-top: calc(16px + env(safe-area-inset-top)); }

  .topbar { padding: 8px 10px; gap: 8px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .channel-info { flex: 1; min-width: 0; }
  .channel-info h2 { font-size: 16.5px; }
  .topic-btn { max-width: 100%; }

  /* Search lives in the drawer on phones (moved there by app.js) */
  .sidebar .search-wrap { margin: 10px 12px 2px; }
  .sidebar .search-wrap #search {
    width: 100%; background: #242422; border-color: #3a3a38; color: #fff;
  }
  .sidebar .search-wrap #search:focus { background: #242422; border-color: var(--ua-teal); }
  .sidebar .search-ic { color: #8a8a86; }
  .search-results { left: 8px; right: 8px; width: auto; top: calc(env(safe-area-inset-top) + 96px); z-index: 200; }

  /* Bigger touch targets */
  .icon-btn { width: 38px; height: 38px; }
  .msg { padding: 7px 12px; }
  .msg-actions button { width: 40px; height: 36px; }
  .reaction { padding: 4px 11px; }
  .reaction-add { padding: 4px 11px; }

  /* iOS Safari auto-zooms when a focused control's font-size is under 16px — keep
     every editable control at 16 so tapping a field never zooms the layout.
     !important is deliberate: it must beat per-field rules (some are #id-scoped). */
  input, select, textarea, [contenteditable="true"] { font-size: 16px !important; }
  .cal-row select { padding: 8px 10px; }

  .composer { padding: 0 10px calc(10px + env(safe-area-inset-bottom)); }
  .composer-toolbar { overflow-x: auto; scrollbar-width: none; }
  .composer-toolbar::-webkit-scrollbar { display: none; }
  .composer-toolbar button { flex-shrink: 0; width: 40px; height: 38px; }
  .composer-hint { display: none; }
  .messages { padding-top: 10px; }

  /* Right panel goes full screen */
  .panel { width: 100%; box-shadow: none; }
  .panel-header { padding-top: calc(12px + env(safe-area-inset-top)); }

  /* Modals become bottom sheets — and must sit ABOVE the bottom rail (z 96) and
     drawer (z 95/94), or the rail overlaps the sheet's action buttons (taps on
     "Save" were landing on the nav). Stays below mention/popover menus (z 110). */
  .modal { align-items: flex-end; z-index: 100; }
  .modal-card {
    width: 100%; max-width: 100%; border-radius: 20px 20px 0 0;
    max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: calc(26px + env(safe-area-inset-bottom));
  }

  .msg-image { max-width: 100%; }
  .profile-card { width: min(300px, 92vw); }
}

/* Touch devices: hover doesn't exist — reveal actions on tap */
@media (hover: none) {
  .reaction-add { opacity: 1; }
  .msg-actions { display: none; }
  .msg.show-actions .msg-actions { display: flex; }
  .msg:hover .msg-actions { display: none; }
  .msg.show-actions:hover .msg-actions { display: flex; }
  /* Controls that otherwise only appear on hover — keep them reachable by touch */
  .task-row .task-del { opacity: 0.65; }
  .res-card .res-tools { opacity: 1; }
}

/* Scrollbars */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }
.sidebar ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); }

/* ============== Gatherings (team notes + action items) ============== */

/* the gathering tag chip — deep-teal, the "notebook" of the palette */
.tag-gathering { background: rgba(18, 96, 116, 0.14); color: var(--bg-dark); }
.tag-gathering .ic, .mm-ic.tag-gathering { color: var(--ua-deepteal); }
.mm-ic.tag-gathering { background: rgba(18, 96, 116, 0.14); }
.tag-story { background: rgba(251, 178, 35, 0.18); color: var(--bg-dark); }
.tag-story .ic, .mm-ic.tag-story { color: #B57A0E; }
.mm-ic.tag-story { background: rgba(251, 178, 35, 0.18); }

#view-gatherings { position: relative; } /* anchor for the completion stone cascade */
#gatherings-list .alt-head h2 .stone-img { vertical-align: -3px; margin-right: 4px; }

/* the wall of gatherings — each meeting a gem-topped tile */
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; }
.g-card {
  text-align: left; border: 1px solid var(--border); border-radius: 16px; background: #fff;
  padding: 15px 16px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 7px;
  transition: box-shadow 0.13s ease, border-color 0.13s ease, transform 0.13s ease;
}
.g-card:hover { border-color: #d4d2ce; box-shadow: 0 4px 16px rgba(0,0,0,0.07); transform: translateY(-2px); }
.g-card-top { display: flex; align-items: center; gap: 7px; }
.g-card-date { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.g-wrapped {
  margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ua-deepteal); background: rgba(18,96,116,0.12);
  padding: 2px 7px; border-radius: 6px;
}
.g-card h4 { font-size: 15.5px; line-height: 1.3; }
.g-card-meta { display: flex; gap: 12px; align-items: center; font-size: 12.5px; color: var(--text-dim); }
.g-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.g-card-meta .dim { opacity: 0.7; }
.g-progress { height: 5px; border-radius: 99px; background: var(--bg-hover); overflow: hidden; margin-top: 2px; }
.g-progress span { display: block; height: 100%; border-radius: 99px; transition: width 0.3s ease; }

.g-carry-banner {
  display: flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 11px 15px;
  background: rgba(37, 174, 210, 0.10); border: 1px solid rgba(37, 174, 210, 0.25);
  border-radius: 12px; font-size: 13px; color: var(--bg-dark);
}
.g-carry-banner .ic { color: var(--ua-lightblue); flex-shrink: 0; }

.g-empty { text-align: center; color: var(--text-dim); padding: 54px 20px; }
.g-empty p { margin-top: 4px; font-size: 14px; }

/* ----- gathering detail ----- */
.g-detail-head { align-items: flex-start; }
.g-head-left { min-width: 0; flex: 1; }
.g-back { margin-bottom: 10px; }
/* g-back-chat lives in the centered .alt-actions row beside the search + start
   buttons — any margin here knocks it out of vertical alignment with them. */
.alt-actions .g-back-chat { margin: 0; }
.g-title-input {
  display: block; width: 100%; border: none; background: none; padding: 2px 0;
  font-family: var(--font-display, inherit); font-size: 25px; font-weight: 700; color: var(--text);
}
.g-title-input:focus { outline: none; box-shadow: 0 2px 0 var(--ua-teal); }
.g-sub { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.g-date-wrap { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 13px; }
.g-date-wrap input { border: none; background: none; font: inherit; color: var(--text); cursor: pointer; }
.g-att-btn {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border);
  background: #fff; border-radius: 999px; padding: 3px 11px 3px 9px; font-size: 12.5px;
  color: var(--text-dim); cursor: pointer;
}
.g-att-btn:hover:not([disabled]) { border-color: #d4d2ce; }
.g-faces { display: inline-flex; }
.g-faces .avatar.tiny:not(:first-child), .task-assign .avatar.tiny:not(:first-child) { margin-left: -6px; }
.g-att-more { font-size: 11px; font-weight: 600; }
.g-detail-actions { gap: 8px; flex-shrink: 0; }
.g-delete { color: var(--text-dim); }
.g-delete:hover { color: var(--ua-red); }

.g-detail-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.85fr); gap: 26px; margin-top: 8px; }
.g-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-dim); margin: 0 0 9px 2px; display: flex; align-items: center; gap: 6px;
}
.g-body-card { padding: 0; }
.g-body { min-height: 320px; padding: 13px 15px; font-size: 14.5px; line-height: 1.6; }
.g-body:empty::before { content: attr(data-placeholder); color: var(--text-dim); opacity: 0.7; }

/* ----- action items ----- */
.g-carry { margin-bottom: 20px; }
.g-carry-label { color: var(--ua-lightblue); }
.g-carry-label .dim { color: var(--text-dim); font-weight: 500; text-transform: none; letter-spacing: 0; }
.g-carry-list { border-left: 2px solid rgba(37,174,210,0.3); padding-left: 4px; margin-left: 6px; }

.task-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 6px; border-radius: 10px;
}
.task-row:hover { background: var(--bg-hover); }
.task-row.carried { opacity: 0.92; }
.task-check {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; cursor: pointer; margin-top: 1px;
  border: 2px solid var(--stone, var(--ua-teal)); background: transparent; opacity: 0.5; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.15s ease, transform 0.12s ease;
}
.task-check:hover:not([disabled]) { opacity: 1; transform: scale(1.07); }
.task-check[disabled] { cursor: default; }
.task-row.done .task-check { opacity: 1; border-color: transparent; }
.task-check .stone-img { width: 26px; height: 26px; animation: stone-set 0.34s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes stone-set { 0% { transform: scale(0) rotate(-25deg); } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .task-check .stone-img { animation: none; } }

.task-main { flex: 1; min-width: 0; padding-top: 2px; }
.task-text, .task-text-input {
  width: 100%; font-size: 14px; line-height: 1.45; color: var(--text); word-break: break-word;
}
.task-text-input { border: none; background: none; padding: 2px 0; font-family: inherit; }
.task-text-input:focus { outline: none; box-shadow: 0 1.5px 0 var(--ua-teal); }
.task-row.done .task-text, .task-row.done .task-text-input { text-decoration: line-through; color: var(--text-dim); }
.task-origin {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 0;
  border: none; background: none; font-size: 11.5px; color: var(--ua-lightblue); cursor: pointer;
}
.task-origin:hover { text-decoration: underline; }
.task-side { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.task-assign, .task-due {
  display: inline-flex; align-items: center; gap: 4px; border: none; background: none;
  cursor: pointer; padding: 3px 6px; border-radius: 8px; color: var(--text-dim); font-size: 12px;
}
.task-assign:hover:not([disabled]), .task-due:hover:not([disabled]) { background: rgba(0,0,0,0.05); }
.task-assign-empty { display: inline-flex; opacity: 0.5; }
.task-due.empty .ic { opacity: 0.5; }
.task-due.overdue { color: var(--ua-red); font-weight: 600; }
.task-del { color: var(--text-dim); opacity: 0; transition: opacity 0.12s; }
.task-row:hover .task-del { opacity: 0.7; }
.task-del:hover { opacity: 1; color: var(--ua-red); }
.task-assign .avatar.tiny { pointer-events: none; }
.g-tasks-empty { color: var(--text-dim); font-size: 13px; padding: 6px 8px; }

.g-add { display: flex; align-items: center; gap: 9px; margin-top: 8px; padding: 8px 12px;
  border: 1px dashed var(--border); border-radius: 11px; }
.g-add:focus-within { border-color: var(--ua-teal); border-style: solid; }
.g-add-stone { display: flex; opacity: 0.5; }
.g-add:focus-within .g-add-stone { opacity: 1; }
.g-add-input { flex: 1; border: none; background: none; font: inherit; font-size: 14px; }
.g-add-input:focus { outline: none; }

.avatar.tiny { width: 20px; height: 20px; border-radius: 6px; font-size: 9px; box-shadow: 0 0 0 1.5px #fff; }

/* ----- shared floating popover (assignees / attendees / due date) ----- */
.people-pop {
  position: fixed; z-index: 90; background: #fff; border: 1px solid var(--border);
  border-radius: 13px; box-shadow: 0 14px 40px rgba(0,0,0,0.18); padding: 6px;
  min-width: 200px; max-height: 280px; overflow-y: auto;
}
.pp-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 9px;
  cursor: pointer; font-size: 13.5px;
}
.pp-row:hover { background: var(--bg-hover); }
.pp-row input[type=checkbox] { accent-color: var(--ua-teal); width: 15px; height: 15px; }
.pp-due { cursor: default; gap: 7px; }
.pp-due input[type=date] { border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font: inherit; }
.pp-empty { padding: 12px; color: var(--text-dim); font-size: 13px; text-align: center; }
.pp-clear {
  width: 100%; margin-top: 4px; border: none; background: none; color: var(--ua-red);
  font-size: 12.5px; padding: 7px; border-radius: 8px; cursor: pointer; text-align: left;
}
.pp-clear:hover { background: rgba(237,42,49,0.08); }

/* ----- My Tasks rollup ----- */
.mt-summary { font-size: 13.5px; color: var(--text-dim); margin-bottom: 18px; }
.mt-group { margin-bottom: 22px; }
.mt-group-head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.mt-group-head.dim { color: var(--text-dim); font-weight: 600; }
.mt-list { max-width: 720px; }
.mt-row { padding: 9px 6px; }
.mt-meta { display: flex; gap: 12px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
.mt-source { display: inline-flex; align-items: center; gap: 4px; border: none; background: none;
  font-size: 11.5px; color: var(--ua-deepteal); cursor: pointer; padding: 0; }
.mt-source:hover { text-decoration: underline; }
.mt-with { font-size: 11.5px; color: var(--text-dim); }

@media (max-width: 760px) {
  .g-detail-grid { grid-template-columns: 1fr; gap: 18px; }
  .g-body { min-height: 200px; }
  .g-detail-head { flex-direction: column; }
  .g-detail-actions { width: 100%; }
}

/* rendered notes (read view) — click to edit */
.g-body-rendered {
  min-height: 120px; padding: 13px 15px; font-size: 14.5px; line-height: 1.6;
  border: 1px solid var(--border); border-radius: 14px; background: #fff;
  white-space: pre-wrap; word-break: break-word;
}
.g-body-rendered.editable { cursor: text; }
.g-body-rendered.editable:hover { border-color: #d4d2ce; }
.g-body-rendered .tag-chip { white-space: normal; }
.g-body-empty { color: var(--text-dim); opacity: 0.75; }
.g-body-editbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--border); }
.g-body-hint { font-size: 11.5px; color: var(--text-dim); }
.g-body-done { padding: 6px 16px; }

/* decisions */
.g-actions-label { margin-top: 20px; }
.decision-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 6px; border-radius: 10px; }
.decision-row:hover { background: var(--bg-hover); }
.decision-bullet { display: flex; flex-shrink: 0; margin-top: 2px; }
.decision-text, .decision-text-input { width: 100%; font-size: 14px; line-height: 1.45; color: var(--text); word-break: break-word; }
.decision-text-input { border: none; background: none; padding: 2px 0; font-family: inherit; }
.decision-text-input:focus { outline: none; box-shadow: 0 1.5px 0 var(--ua-deepteal); }
.g-add-dec:focus-within { border-color: var(--ua-deepteal); }
.g-add-dec .g-add-input::placeholder { color: var(--text-dim); }

/* decisions log on the team's gatherings home */
.g-log { margin-top: 30px; border-top: 1px solid var(--border); padding-top: 20px; }
.g-log-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.g-log-head h3 { font-size: 16px; }
.g-log-search { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 10px; padding: 6px 11px; background: #fff; }
.g-log-search .search-ic { display: flex; color: var(--text-dim); }
.g-log-search input { border: none; background: none; font: inherit; font-size: 13px; width: 200px; }
.g-log-search input:focus { outline: none; }
.g-log-list { max-width: 760px; }
.g-log-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--bg-hover); }
.g-log-text { flex: 1; font-size: 14px; }
.g-log-src { border: none; background: none; color: var(--ua-deepteal); font-size: 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0; padding: 0; }
.g-log-src:hover { text-decoration: underline; }

/* completion — the UA logo assembling itself, stone by stone (unique to gatherings) */
.g-complete {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(circle at center, rgba(255,255,255,0.82), rgba(255,255,255,0.4) 46%, rgba(255,255,255,0) 72%);
}
.g-complete.in { opacity: 1; }
.g-complete.out { opacity: 0; }
.g-complete-logo {
  width: auto; height: min(62%, 460px); max-width: 78%; object-fit: contain;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,0.18));
}
.g-complete-logo.settled { animation: g-logo-settle 0.62s cubic-bezier(0.2, 1.3, 0.3, 1); }
@keyframes g-logo-settle { 0% { transform: scale(0.92); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .g-complete-logo.settled { animation: none; } }

/* wrap-up button: icon sits left of the label */
.g-wrap { display: inline-flex; align-items: center; gap: 6px; }
.g-wrap .ic { flex-shrink: 0; }

/* taggable inline editors (action items + add box) */
.task-text-edit, .g-add-edit { width: 100%; font-size: 14px; line-height: 1.45; color: var(--text); word-break: break-word; min-height: 20px; outline: none; }
.task-text-edit:empty::before, .g-add-edit:empty::before { content: attr(data-ph); color: var(--text-dim); opacity: 0.8; pointer-events: none; }
.task-text-edit .tag-chip, .g-add-edit .tag-chip { margin: 0 1px; }
.g-add-edit { padding: 1px 0; }
.task-row.done .task-text-edit { text-decoration: line-through; color: var(--text-dim); }

/* live presence facepile + soft-lock banner */
.g-presence { display: inline-flex; align-items: center; }
.g-pres-face { display: inline-flex; margin-left: -6px; border-radius: 7px; }
.g-pres-face:first-child { margin-left: 0; }
.g-pres-face.editing .avatar { box-shadow: 0 0 0 2px var(--ua-teal); animation: pres-pulse 1.6s ease-in-out infinite; }
@keyframes pres-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--ua-teal); } 50% { box-shadow: 0 0 0 2px rgba(18, 168, 157, 0.3); } }
.g-body-lock { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ua-teal); background: rgba(18, 168, 157, 0.08); border: 1px solid rgba(18, 168, 157, 0.25); border-radius: 9px; padding: 6px 11px; margin-bottom: 8px; }
.g-body-rendered.locked { cursor: default; }
.g-body-rendered.locked:hover { border-color: var(--border); }

/* search across all of a team's notes */
.g-search-box input { width: 200px; }
#g-search-results { margin-top: 4px; }
.g-search-head { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; }
.g-search-list { max-width: 760px; display: flex; flex-direction: column; gap: 8px; }
.g-search-row { text-align: left; border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 11px 14px; cursor: pointer; transition: border-color 0.13s ease, box-shadow 0.13s ease; }
.g-search-row:hover { border-color: #d4d2ce; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.g-search-row-top { display: flex; align-items: center; gap: 7px; font-size: 14px; margin-bottom: 3px; }
.g-search-row-top .dim { color: var(--text-dim); font-weight: 400; }
.g-search-snip { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.g-search-snip mark { background: rgba(251, 178, 35, 0.4); color: var(--text); border-radius: 3px; padding: 0 1px; }
@media (max-width: 760px) {
  .g-search-box, .g-search-box input { width: 100%; }
  /* Stack the page title and its action cluster so the actions (e.g. "New
     resource") can't get pushed off the right edge and clipped on a phone. */
  .alt-head { flex-wrap: wrap; }
  .alt-actions { flex-wrap: wrap; flex-shrink: 1; width: 100%; }
}

/* ========== Stories ========== */

/* Selection bar (appears when stories are checked for a compilation) */
.story-selbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px; margin: 0 0 18px; border-radius: 12px;
  background: linear-gradient(95deg, rgba(251,178,35,0.16), rgba(18,168,157,0.12));
  border: 1px solid rgba(251,178,35,0.5);
}
.story-selbar.hidden { display: none; }
.story-selcount { font-weight: 600; font-size: 14px; }
.story-selbar-actions { display: flex; gap: 8px; }
.story-selbar-actions .btn-primary { display: inline-flex; align-items: center; gap: 7px; }

/* Card grid */
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.story-card {
  position: relative; border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  background: #fff; cursor: pointer;
  display: flex; flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.story-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.10); transform: translateY(-3px); border-color: #d4d2ce; }
.story-card.selected { border-color: var(--ua-yellow); box-shadow: 0 0 0 3px rgba(251,178,35,0.3); }
/* Featured stories wear a clear gold ring so making one Featured is unmistakable */
.story-card.featured { border-color: var(--ua-yellow); box-shadow: 0 0 0 2px rgba(251,178,35,0.5), 0 8px 24px rgba(0,0,0,0.07); }
.story-card.featured:hover { box-shadow: 0 0 0 2px rgba(251,178,35,0.6), 0 12px 32px rgba(0,0,0,0.10); }
.sc-cover { height: 152px; background-size: cover; background-position: center; background-color: #f1efeb; }
.sc-cover-empty {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--sc) 16%, #fff), color-mix(in srgb, var(--sc) 5%, #fff));
}
.sc-cover-empty .stone-img { opacity: 0.92; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.12)); }

/* Selection checkbox (top-left) */
.sc-check {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92); border: 1.5px solid rgba(0,0,0,0.12); color: transparent; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18); opacity: 0; transition: opacity 0.13s ease;
}
.story-card:hover .sc-check, .sc-check.on { opacity: 1; }
.sc-check.on { background: var(--ua-yellow); border-color: var(--ua-yellow); color: #fff; }

/* Admin maintenance (edit/delete) on hover, top-right */
.sc-tools { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; gap: 3px; opacity: 0; transition: opacity 0.13s ease; }
.story-card:hover .sc-tools { opacity: 1; }
.sc-tools button {
  width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.94); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.14);
}
.sc-tools button:hover { color: var(--text); }
.sc-tools .sc-del:hover { color: var(--ua-red); border-color: var(--ua-red); }

.sc-info { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
/* Tags sit at the foot of the card; margin-top:auto keeps every card's tag row aligned to the bottom */
.sc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 12px; }
.sc-tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--ua-deepteal); background: rgba(18,96,116,0.09); border-radius: 999px; padding: 3px 9px;
}
.sc-info h4 { font-size: 16px; line-height: 1.3; }
.sc-snippet {
  font-size: 13px; color: var(--text-dim); margin-top: 6px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 11.5px; color: #a8a6a2; margin-top: 11px; }
.sc-meta svg { vertical-align: -2px; margin-right: 2px; }
.sc-dot { opacity: 0.6; }

/* A newly-published story settles in */
.story-card.story-new { animation: story-settle 1.1s ease; }
@keyframes story-settle {
  0% { transform: scale(0.96); box-shadow: 0 0 0 4px rgba(251,178,35,0.55); }
  60% { box-shadow: 0 0 0 4px rgba(251,178,35,0.4); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(251,178,35,0); }
}

/* Story editor modal */
.modal-card.story-editor { width: 580px; max-height: 90vh; overflow-y: auto; }
.story-row2 { display: flex; gap: 12px; }
.story-row2 > div { flex: 1; min-width: 0; }
.story-row2 input { width: 100%; }
.modal-card input[type="date"] {
  width: 100%; padding: 11px 14px; margin-bottom: 10px; border-radius: 10px;
  border: 1px solid var(--border); outline: none; font-size: 14px; font-family: inherit; background: #fff;
}
.modal-card input[type="date"]:focus { border-color: var(--ua-teal); }
.story-tag-pick { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.story-tag-empty { color: var(--text-dim); font-size: 13px; }
.story-tagchip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.story-tagchip:hover { border-color: var(--ua-teal); }
.story-tagchip.on { background: var(--ua-deepteal); border-color: var(--ua-deepteal); color: #fff; }
.res-dl-row #stag-new, .res-dl-row #story-newtag { margin-bottom: 0; flex: 1; }

.story-photo-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.story-photo-list.hidden { display: none; }
.story-photo { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-photo.is-cover { outline: 2px solid var(--ua-yellow); outline-offset: -2px; }
.story-photo .cover-badge {
  position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
  background: var(--ua-yellow); color: #1A1A1A; font-size: 10px; font-weight: 700; padding: 2px 0; letter-spacing: 0.3px;
}
.story-photo .photo-del, .story-photo .photo-cover {
  position: absolute; top: 4px; width: 22px; height: 22px; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border: none;
  background: rgba(26,26,26,0.66); color: #fff;
}
.story-photo .photo-del { right: 4px; }
.story-photo .photo-cover { left: 4px; }
.story-photo .photo-del:hover { background: var(--ua-red); }
.story-photo .photo-cover:hover { background: var(--ua-yellow); color: #1A1A1A; }
.story-editor-body { padding: 12px; min-height: 190px; resize: vertical; line-height: 1.6; border-top: 1px solid var(--border); }

/* Story reader */
.modal-card.story-read {
  width: 760px; max-width: 94vw; max-height: 92vh; overflow-y: auto; padding: 0; position: relative;
}
.story-read-x {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  background: rgba(255,255,255,0.9); border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.story-read-hero { height: 320px; background-size: cover; background-position: center; background-color: #f1efeb; }
.story-read-hero.hidden { display: none; }
.story-read-inner { padding: 30px 40px 36px; }
#story-read-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
#story-read-tags.hidden { display: none; }
#story-read-tags span {
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--ua-deepteal); background: rgba(18,96,116,0.09); border-radius: 999px; padding: 4px 11px;
}
.story-read-inner h2 { font-size: 28px; line-height: 1.22; }
.story-read-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text-dim); font-size: 13.5px; margin: 8px 0 22px; }
.story-read-meta svg { vertical-align: -2px; margin-right: 2px; }
.story-read-gallery-label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-dim); margin: 30px 0 14px; padding-top: 22px; border-top: 1px solid var(--border);
}
.story-read-gallery-label.hidden { display: none; }
.story-read-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 0; }
.story-read-gallery.hidden { display: none; }
.story-read-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; display: block; box-shadow: 0 2px 10px rgba(0,0,0,0.07); }
.story-read-gallery a,
.story-read-gallery .story-gallery-item { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 0.13s ease, box-shadow 0.13s ease; border-radius: 12px; }
.story-read-gallery a:hover,
.story-read-gallery .story-gallery-item:hover { transform: scale(1.02); }
.story-read-gallery a:hover img,
.story-read-gallery .story-gallery-item:hover img { box-shadow: 0 6px 18px rgba(0,0,0,0.14); }

/* Photo-count chip on a story card's cover (bottom-right) */
.sc-photocount {
  position: absolute; bottom: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  background: rgba(26,26,26,0.6); color: #fff; font-size: 11px; font-weight: 600;
  backdrop-filter: blur(2px);
}
.sc-cover { position: relative; }
.story-read-inner .reader-actions a { cursor: pointer; }

/* The remembrance moment — gentle, slow, reverent */
.story-remember { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; }
.story-remember img { position: absolute; top: -32px; opacity: 0; animation: story-drift linear forwards; }
@keyframes story-drift {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  12% { opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { transform: translate(var(--sway, 0px), 102vh) rotate(24deg); opacity: 0; }
}

@media (max-width: 760px) {
  .story-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .sc-check, .sc-tools { opacity: 1; }
  .sc-cover { height: 120px; }
  .story-read-inner { padding: 22px 18px 26px; }
  .story-read-hero { height: 220px; }
  .story-row2 { flex-direction: column; gap: 0; }
  .modal-card.story-editor { width: 100%; }
}

/* ---------- Onboarding: sign-in / invite / secure-account ---------- */

.auth-panel { text-align: center; }
.login-tagline { font-size: 15.5px; margin-top: 6px; }
.login-hint { color: #8d8d89; font-size: 12.5px; margin: 4px 0 0; line-height: 1.5; }
/* Secondary text links on the login card — override the full-width teal button rule */
.login-card .linkish {
  width: auto; display: inline-block; padding: 8px 4px; margin-top: 10px;
  background: none; color: var(--ua-sky); font-weight: 500; font-size: 13.5px;
}
.login-card .linkish:hover { background: none; color: #fff; text-decoration: underline; }

/* "Secure your account" nudge — sits at the bottom, never yanks focus */
#secure-banner {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9000;
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px);
  padding: 10px 10px 10px 16px; background: var(--ua-deepteal); color: #fff;
  border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.28); font-size: 13.5px;
  animation: update-banner-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.secure-banner-text { line-height: 1.4; }
.secure-banner-btn {
  border: 0; background: #fff; color: var(--ua-deepteal); font-weight: 600; font-size: 13px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.secure-banner-btn:hover { background: var(--ua-yellow); color: var(--text); }
.secure-banner-x {
  border: 0; background: rgba(255,255,255,0.14); color: #fff; cursor: pointer; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
}
.secure-banner-x:hover { background: rgba(255,255,255,0.26); }
/* On phones the nudge becomes a full-width bar riding above the bottom rail
   (never over the composer); its text flexes and wraps instead of collapsing.
   Placed after the base rule so it wins the same-specificity #id tie. */
@media (max-width: 760px) {
  #secure-banner {
    left: 12px; right: 12px; transform: none; max-width: none;
    bottom: calc(58px + env(safe-area-inset-bottom) + 12px);
  }
  #secure-banner .secure-banner-text { flex: 1; min-width: 0; }
}

/* Credential modal — match the other modals; password inputs aren't covered by default */
#cred-modal input[type="password"] {
  width: 100%; padding: 11px 13px; margin-top: 10px;
  border: 1px solid var(--line, #e3e2de); border-radius: 10px; background: #fff; outline: none; font-size: 15px;
}
#cred-modal input[type="email"] { margin-top: 4px; }
#cred-modal input[type="password"]:focus { border-color: var(--ua-teal); }

/* Invite modal */
.invite-create-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 6px; }
.invite-create-row .lvl-select { flex: 1; min-width: 160px; }
.invite-fresh { margin: 6px 0 14px; padding: 12px; background: rgba(18, 168, 157, 0.08); border-radius: 12px; }
.invite-link-row { display: flex; gap: 8px; }
#invite-link {
  flex: 1; padding: 10px 12px; border: 1px solid var(--line, #e3e2de); border-radius: 10px;
  background: #fff; font-size: 13px; color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.invite-note { margin: 8px 2px 0; font-size: 12px; color: var(--text-dim, #5C5C59); }
.invite-list { margin-top: 6px; max-height: 280px; overflow-y: auto; }
.invite-list-head { font-size: 12px; font-weight: 600; color: var(--text-dim, #5C5C59); text-transform: uppercase; letter-spacing: 0.4px; margin: 10px 2px 6px; }
.invite-empty { color: var(--text-dim, #5C5C59); font-size: 13px; padding: 8px 2px; }
.invite-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 4px;
  border-top: 1px solid var(--line, #ecebe7);
}
.invite-row-main { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.invite-row-who { font-weight: 500; font-size: 14px; }
.invite-row-meta { font-size: 12px; color: var(--text-dim, #5C5C59); }
.invite-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ua-lime); flex-shrink: 0; }
.invite-row.status-used .invite-status-dot { background: var(--ua-sky); }
.invite-row.status-revoked .invite-status-dot,
.invite-row.status-expired .invite-status-dot { background: #c9c8c4; }
.invite-row.status-used, .invite-row.status-revoked, .invite-row.status-expired { opacity: 0.7; }
.invite-new-btn { display: inline-flex; align-items: center; gap: 7px; margin: 2px 16px 8px; }

/* ---------- Browse channels ---------- */
.browse-link {
  display: flex; align-items: center; gap: 7px; width: calc(100% - 24px); margin: 4px 12px 2px;
  padding: 7px 10px; border: 0; background: none; color: var(--sidebar-text); opacity: 0.72;
  font-size: 13px; cursor: pointer; border-radius: 8px; text-align: left;
}
.browse-link:hover { opacity: 1; background: rgba(255,255,255,0.06); }
.browse-list { margin-top: 6px; max-height: 50vh; overflow-y: auto; }
.browse-empty { color: var(--text-dim, #5C5C59); font-size: 13px; padding: 10px 2px; }
.browse-row { display: flex; align-items: center; gap: 11px; padding: 10px 4px; border-top: 1px solid var(--line, #ecebe7); }
.browse-row:first-child { border-top: 0; }
.browse-hash { font-weight: 700; color: var(--ua-teal); font-size: 17px; width: 16px; text-align: center; flex-shrink: 0; }
.browse-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.browse-name { font-weight: 600; font-size: 14px; }
.browse-topic { font-size: 12.5px; color: var(--text-dim, #5C5C59); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browse-count { font-size: 11.5px; color: var(--text-dim, #8d8d89); }
.btn-add.joined { background: none; color: var(--ua-teal); border-color: var(--ua-teal); }
#browse-modal { z-index: 1200; }   /* sit above the welcome tutorial overlay when opened from it */

/* ---------- Welcome tutorial (onboarding wizard) ---------- */
.onboard {
  position: fixed; inset: 0; z-index: 1000;
  background: radial-gradient(1100px 760px at 50% 16%, #242422, var(--bg-darker));
  display: flex; align-items: center; justify-content: center; color: #fff;
  padding: 24px; overflow-y: auto;
}
.onboard-inner { width: 420px; max-width: 92vw; }
.onboard-card { text-align: center; display: flex; flex-direction: column; align-items: center; }
.onboard-stone-img { width: 46px; height: 46px; object-fit: contain; margin-bottom: 16px;
  animation: tile-in 0.4s ease both; }
.onboard-card h2 { font-size: 27px; margin: 0 0 8px; font-family: 'Varela Round','Inter',sans-serif; }
.onboard-sub { color: #b4b4af; line-height: 1.5; margin: 0 0 22px; max-width: 340px; }
.onboard-photo { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 26px; }
.onboard-avatar { width: 112px; height: 112px; font-size: 40px; }
.onboard-avatar.avatar { border-radius: 50%; }
.onboard-steps { text-align: left; color: #d6d6d2; line-height: 1.7; margin: 0 0 26px; padding-left: 22px; max-width: 320px; }
.onboard-steps strong { color: #fff; }
.onboard-note { background: rgba(255,255,255,0.06); border-radius: 12px; padding: 14px 16px; color: #d6d6d2;
  line-height: 1.5; margin-bottom: 26px; max-width: 340px; font-size: 14px; }
.onboard-note.ok { display: inline-flex; align-items: center; gap: 8px; color: var(--ua-lime); }
.onboard-note.ok .ic { stroke: var(--ua-lime); }
.onboard-chans { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
.onboard-chan { background: rgba(255,255,255,0.08); border-radius: 999px; padding: 6px 13px; font-size: 13px; color: #eee; }
.onboard-browse-btn { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 26px; }
.onboard-actions { display: flex; gap: 10px; justify-content: center; align-items: center; }
.onboard-next {
  border: 0; border-radius: 12px; background: var(--ua-teal); color: #fff; font-weight: 600;
  font-size: 15px; padding: 12px 22px; cursor: pointer; transition: background 0.15s;
}
.onboard-next:hover { background: var(--ua-deepteal); }
.onboard-next:disabled { opacity: 0.6; cursor: default; }
.onboard-skip { border: 0; background: none; color: #9b9b97; font-size: 14px; padding: 12px 14px; cursor: pointer; }
.onboard-skip:hover { color: #fff; }
.onboard-dots { display: flex; gap: 7px; justify-content: center; margin-top: 24px; }
.onboard-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.22); transition: background 0.2s; }
.onboard-dot.done { background: rgba(255,255,255,0.5); }
.onboard-dot.on { background: var(--ua-yellow); }
.onboard-fine { color: #7e7e7a; font-size: 12px; margin-top: 14px; }

/* "Use it on your other devices" — shared by the onboarding step (dark) and profile modal (light) */
.onboard-devices { max-width: 360px; text-align: left; margin-bottom: 20px; }
.dev-lead { color: #cfcfca; line-height: 1.5; margin: 0 0 14px; }
.dev-steps { margin-bottom: 12px; }
.dev-url-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
#dev-url {
  flex: 1; min-width: 0; padding: 9px 11px; border-radius: 9px; border: 1px solid #cdccc8;
  background: #fff; color: #1a1a1a; font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.dev-tip { color: #9b9b97; font-size: 12.5px; margin: 0; line-height: 1.5; }
.pm-devices-link {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin: 2px 0 14px; padding: 4px 0; border: 0; background: none;
  color: var(--ua-teal); font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.pm-devices-link:hover { color: var(--ua-deepteal); text-decoration: underline; }
.pm-devices-link .ic { stroke: currentColor; }
/* In the light profile-triggered modal, flip the shared text dark */
#device-body .dev-lead { color: var(--text); }
#device-body .onboard-steps, #device-body .onboard-steps strong { color: var(--text); }
#device-body .onboard-steps { max-width: none; }
#device-body .dev-tip { color: var(--text-dim, #5C5C59); }

/* ---------- Arrival cascade (step 6) ---------- */
.onboard-inner.arrival { width: auto; }
.arrival-stage { display: flex; flex-direction: column; align-items: center; }
.arrival-logo { position: relative; height: min(46vh, 340px); aspect-ratio: 0.6858; margin: 0 auto; }
.arrival-well {
  position: absolute; box-sizing: border-box; border: 1.5px solid rgba(255,255,255,0.13);
  border-radius: 24%; opacity: 1; transition: opacity 0.4s ease;
}
.arrival-well.filled { opacity: 0; } /* outline disappears once its stone lands → clean finished logo */
.arrival-stone {
  position: absolute; object-fit: contain; transform: translate(-50%, calc(-50% - 130px)) scale(1.06);
  opacity: 0; will-change: transform, opacity;
  transition: transform 0.52s cubic-bezier(0.18, 0.85, 0.26, 1.12), opacity 0.34s ease;
}
.arrival-stone.in { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.arrival-logo.arrived { animation: arrive-glow 1.2s ease; }
@keyframes arrive-glow {
  0% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  40% { filter: drop-shadow(0 0 22px rgba(255,255,255,0.55)); }
  100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}
.arrival-welcome { text-align: center; margin-top: 26px; opacity: 0; transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease; }
.arrival-stage.show-welcome .arrival-welcome { opacity: 1; transform: none; }
.aw-kicker { color: #b4b4af; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.aw-title { font-family: 'Varela Round','Inter',sans-serif; font-size: 30px; color: #fff; margin: 2px 0 6px; letter-spacing: 0.5px; }
.aw-name { font-family: 'Varela Round','Inter',sans-serif; font-size: 24px; color: var(--ua-yellow); }
.aw-sub { color: #cfcfca; margin-top: 8px; font-size: 15px; }
.arrival-actions { margin-top: 26px; opacity: 0; transition: opacity 0.5s ease 0.2s;
  display: flex; gap: 16px; align-items: center; justify-content: center; }
.arrival-stage.show-welcome .arrival-actions { opacity: 1; }
.linkish-light { border: 0; background: none; color: #9b9b97; font-size: 13.5px; cursor: pointer; }
.linkish-light:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .arrival-stone { transition: none; }
  .arrival-welcome, .arrival-actions { transition: none; }
}