/* Media (T6): attachments in bubbles, blurred veil, voice player + recorder, lightbox, send preview,
   upload tray, sticker panel, forward sheet, room album / files, avatar crop.
   Colors come from the tokens in /styles.css so light and dark both work. */

/* ---------------------------------------------------------------- file-type tones */
.tone-red { --tone: var(--c01); } .tone-amber { --tone: var(--c03); } .tone-blue { --tone: var(--c10); }
.tone-green { --tone: var(--c06); } .tone-orange { --tone: var(--c02); } .tone-gray { --tone: #7d8a94; }
.tone-violet { --tone: var(--c12); } .tone-teal { --tone: var(--c07); }

/* ---------------------------------------------------------------- attachments in bubbles */
.att { display: block; border: 0; padding: 0; background: var(--surface-2); border-radius: 14px; overflow: hidden; position: relative; max-width: 100%; color: inherit; font: inherit; }
.att-wrap { position: relative; max-width: 100%; }
.att-visual { cursor: zoom-in; min-width: 120px; isolation: isolate; }
.att-visual img, .att-visual video { display: block; width: 100%; height: 100%; object-fit: cover; }
.att-ph { position: absolute; inset: 0; filter: blur(12px); transform: scale(1.12); }
.att-img { position: relative; opacity: 0; transition: opacity 0.18s ease-out; }
.att-image.loaded .att-img, .att-video .att-img { opacity: 1; }
.att-broken { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; color: var(--text-3); font-size: 12.5px; }
.att-badge {
  position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: #fff;
  background: rgba(0, 0, 0, 0.45); border-radius: 6px; padding: 1px 6px;
}

/* veiled (§7 模糊模式) */
.att-veiled { cursor: pointer; background: #8a949b; }
.att-blur { position: absolute; inset: 0; filter: blur(16px) saturate(1.15); transform: scale(1.2); }
.att-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.12); }
.att-veil-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 14px;
  background: rgba(20, 26, 31, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.att-veiled:hover .att-veil-pill, .lb-veil:hover .att-veil-pill { background: rgba(20, 26, 31, 0.66); }
.att-reveil, .att-expand {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; color: #fff; z-index: 2;
  background: rgba(0, 0, 0, 0.42); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.att-reveil:hover, .att-expand:hover { background: rgba(0, 0, 0, 0.6); }
@media (pointer: coarse) { .att-reveil, .att-expand { width: 36px; height: 36px; } }

/* video */
.att-video { cursor: pointer; background: #11171b; }
.att-video.playing { cursor: default; }
.att-video.playing video { object-fit: contain; background: #000; }
.att-play {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; color: #fff;
  background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding-left: 3px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: transform 0.15s;
}
.att-video:hover .att-play { transform: scale(1.06); }
.att-dur {
  position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; color: #fff; font-size: 12px; font-weight: 700;
  background: rgba(0, 0, 0, 0.5); border-radius: 8px; padding: 2px 7px; font-variant-numeric: tabular-nums;
}

/* file */
.att-file {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 10px; min-width: 230px; max-width: 300px; text-decoration: none !important;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent); border-radius: 14px; text-align: left; cursor: pointer; width: 100%;
}
.bubble-own .att-file { background: color-mix(in srgb, var(--surface) 45%, transparent); }
.att-file:hover { background: var(--surface-3); }
.att-file-icon {
  position: relative; width: 44px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--tone, var(--accent));
}
.att-file-icon b {
  position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); font-size: 9px; font-weight: 800; letter-spacing: 0.03em;
  color: #fff; background: var(--tone, var(--accent)); border-radius: 4px; padding: 0 3px; line-height: 14px; white-space: nowrap;
}
.att-file-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.att-file-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.bubble-own .att-file-name { color: var(--bubble-own-text); }
.att-meta { font-size: 12px; color: var(--text-2); }
.att-file-dl {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-text);
}
.bubble-media:has(.att-file), .bubble-media:has(.voice) { padding: 4px; }

/* ---------------------------------------------------------------- voice player */
.voice { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; min-width: 230px; max-width: 290px; }
.voice-btn {
  position: relative; width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; padding-left: 2px;
}
.voice.playing .voice-btn { padding-left: 0; }
.voice-spin { position: absolute; inset: -3px; border-radius: 50%; border: 2.5px solid transparent; border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.voice-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.voice-wave {
  height: 30px; display: flex; align-items: center; gap: 2px; cursor: pointer; touch-action: none; border-radius: 4px; padding: 0 1px;
}
.voice-wave i { flex: 1; min-width: 2px; max-width: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text-2) 38%, transparent); transition: background 0.1s; }
.voice-wave i.on { background: var(--accent); }
.voice-own .voice-wave i { background: color-mix(in srgb, var(--bubble-own-text) 30%, transparent); }
.voice-own .voice-wave i.on { background: var(--accent-text); }
.voice-wave:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.voice-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.voice-own .voice-meta { color: color-mix(in srgb, var(--bubble-own-text) 75%, transparent); }
.voice-time { font-variant-numeric: tabular-nums; }
.voice-new { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.voice-rate {
  margin-left: auto; border: 0; background: color-mix(in srgb, var(--text-2) 14%, transparent); color: inherit; font-weight: 800; font-size: 11.5px;
  border-radius: 999px; padding: 1px 8px; min-width: 38px; line-height: 18px; font-variant-numeric: tabular-nums;
}
.voice-rate:hover { background: color-mix(in srgb, var(--text-2) 24%, transparent); }

/* ---------------------------------------------------------------- voice recorder (composer) */
.voice-rec-wrap { display: contents; }
.voice-rec {
  position: absolute; left: calc(6px + var(--safe-l)); right: calc(56px + var(--safe-r)); bottom: calc(6px + var(--safe-b)); height: 44px; z-index: 6;
  display: flex; align-items: center; gap: 10px; padding: 0 14px 0 6px; border-radius: 22px; background: var(--surface);
  border: 1.5px solid var(--line-2); animation: pop 0.14s ease-out;
}
.kb-open .voice-rec { bottom: 6px; }
.voice-rec.hold { padding-left: 14px; }
.voice-rec.armed { border-color: var(--danger); background: var(--danger-soft); }
.voice-rec-cancel { width: 36px; height: 36px; color: var(--danger); }
.voice-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; flex: none; animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.voice-rec-time { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 40px; color: var(--text); }
.voice-rec-time.near { color: var(--danger); }
.voice-meter { flex: 1; min-width: 0; height: 26px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.voice-meter i { flex: 1; min-width: 2px; max-width: 4px; border-radius: 2px; background: var(--accent); transition: height 0.08s linear; }
.voice-rec.armed .voice-meter i { background: var(--danger); }
.voice-rec-hint { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.voice-rec.armed .voice-rec-hint { color: var(--danger); font-weight: 700; }
.voice-mic { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.voice-mic.rec { background: var(--accent); color: var(--accent-ink); }
.voice-mic.rec:hover { background: var(--accent); color: var(--accent-ink); filter: brightness(1.06); }
.voice-mic.rec:not(.armed) { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
.voice-mic.armed { background: var(--danger); color: #fff; }
@media (max-width: 420px) { .voice-rec-hint { font-size: 12px; } .voice-rec { gap: 8px; } }

/* ---------------------------------------------------------------- upload tray (composer) */
.up-tray { list-style: none; margin: 0 0 6px; padding: 0 4px; display: flex; flex-direction: column; gap: 6px; max-height: calc(var(--app-h, 100dvh) * 0.4); overflow-y: auto; }
.up-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
.up-item.failed { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger-soft) 70%, var(--surface)); }
.up-thumb {
  position: relative; width: 44px; height: 44px; flex: none; border-radius: 10px; overflow: hidden; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.up-thumb img, .up-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-thumb .blur { filter: blur(6px); transform: scale(1.15); }
.up-glyph { color: var(--tone, var(--accent-text)); font-size: 10px; font-weight: 800; }
.up-ring { position: absolute; inset: 4px; width: 36px; height: 36px; transform: rotate(-90deg); }
.up-ring-bg { fill: rgba(0, 0, 0, 0.32); stroke: rgba(255, 255, 255, 0.35); stroke-width: 3; }
.up-ring-fg { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.2s linear; }
.up-bad { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: color-mix(in srgb, var(--danger) 70%, transparent); }
.up-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.up-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-sub { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.up-item.failed .up-sub { color: var(--danger); white-space: normal; }
.up-retry { flex: none; }

/* ---------------------------------------------------------------- send preview sheet */
.pv-grid { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.pv-item { position: relative; min-width: 0; }
.pv-media {
  position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center;
}
.pv-media img, .pv-media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.15s; }
.pv-item.blurred .pv-media img, .pv-item.blurred .pv-media video { filter: blur(10px) saturate(1.1); transform: scale(1.15); }
.pv-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, 0.18); }
.pv-kind { position: absolute; left: 6px; bottom: 6px; color: #fff; background: rgba(0, 0, 0, 0.5); border-radius: 6px; padding: 2px 4px; display: flex; }
.pv-file { position: relative; color: var(--tone); display: flex; align-items: center; justify-content: center; }
.pv-file b { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 800; background: var(--tone); color: #fff; border-radius: 4px; padding: 0 3px; line-height: 14px; }
.pv-name { font-size: 12.5px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pv-item.bad .pv-name { color: var(--danger); white-space: normal; }
.pv-item.bad .pv-media { opacity: 0.5; }
.pv-sub { font-size: 11.5px; color: var(--text-3); }
.pv-x, .pv-blur {
  position: absolute; width: 28px; height: 28px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 20, 24, 0.62); color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.pv-x { top: 5px; right: 5px; }
.pv-blur { top: 5px; left: 5px; font-size: 15px; line-height: 1; filter: grayscale(0.6); opacity: 0.85; }
.pv-blur.on { background: var(--accent); filter: none; opacity: 1; }
@media (pointer: coarse) { .pv-x, .pv-blur { width: 34px; height: 34px; } }
.pv-options { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin: 0 -4px; padding-top: 4px; }
.pv-foot { display: flex; align-items: flex-end; gap: 8px; }
.pv-caption { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv-caption textarea {
  width: 100%; resize: none; min-height: 44px; max-height: 120px; border-radius: 22px !important; padding: 10px 14px !important; line-height: 22px; font-size: max(16px, var(--fs));
}
.pv-cap-note { font-size: 12px; color: var(--warn-text); padding: 0 12px; }
.pv-send { flex: none; min-height: 44px; border-radius: 22px; gap: 6px; padding: 0 16px; }

/* ---------------------------------------------------------------- lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 58; display: flex; flex-direction: column; color: #fff; touch-action: none;
  background: rgba(6, 9, 11, calc(0.97 * var(--lb-bg, 1))); animation: fade 0.16s ease-out; outline: none;
  -webkit-user-select: none; user-select: none;
}
.lb-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px;
  padding: calc(6px + var(--safe-t)) calc(8px + var(--safe-r)) 18px calc(8px + var(--safe-l));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent); transition: opacity 0.18s;
}
.lb-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.lb-who-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lb-name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-time { font-size: 12.5px; opacity: 0.8; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-count {
  position: absolute; left: 50%; top: calc(64px + var(--safe-t)); transform: translateX(-50%); z-index: 3; font-size: 12.5px; font-weight: 700;
  background: rgba(0, 0, 0, 0.45); border-radius: 999px; padding: 2px 10px; font-variant-numeric: tabular-nums; transition: opacity 0.18s; pointer-events: none;
}
.lb-actions { display: flex; gap: 2px; }
.lb-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.08); color: #fff; flex: none;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important;
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.2); }
.lb-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; cursor: grab; }
.lb-frame { position: relative; flex: none; will-change: transform; }
.lb-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; -webkit-user-drag: none; }
.lb-ph { filter: blur(2px); }
.lb-img { opacity: 0; transition: opacity 0.15s; }
.lb-img.loaded { opacity: 1; }
.lb-video { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; background: #000; }
.lb-veil { position: relative; border: 0; padding: 0; overflow: hidden; border-radius: 6px; background: #444; cursor: pointer; }
.lb-veil img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px); transform: scale(1.2); }
.lb-nav {
  position: absolute; top: 50%; z-index: 3; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, 0.12); color: #fff; display: none; align-items: center; justify-content: center; transition: opacity 0.18s;
}
.lb-nav:hover { background: rgba(255, 255, 255, 0.24); }
.lb-nav:disabled { opacity: 0.2; }
.lb-prev { left: calc(14px + var(--safe-l)); }
.lb-next { right: calc(14px + var(--safe-r)); }
@media (hover: hover) and (pointer: fine) { .lb-nav { display: flex; } }
.lb-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 22px calc(18px + var(--safe-r)) calc(16px + var(--safe-b)) calc(18px + var(--safe-l));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent); font-size: 15px; line-height: 1.45; white-space: pre-wrap;
  overflow-wrap: anywhere; max-height: 30vh; overflow-y: auto; text-align: center; transition: opacity 0.18s; touch-action: pan-y;
}
.lb-zoom-reset {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(18px + var(--safe-b)); z-index: 4; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 13px; font-weight: 700; padding: 7px 14px; backdrop-filter: blur(6px);
}
.lb-bare .lb-top, .lb-bare .lb-caption, .lb-bare .lb-nav, .lb-bare .lb-count { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .lightbox, .lb-img { animation: none; transition: none; } }

/* ---------------------------------------------------------------- stickers */
.sticker-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sticker-tabs { display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; flex: none; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.sticker-tabs::-webkit-scrollbar { display: none; }
.sticker-tab { flex: none; padding: 0 12px 0 8px; }
.sticker-tab span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.sticker-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; box-shadow: none; } /* keyboard focus only; a tapped tab shows just its selected border */
.sticker-tab img { object-fit: contain; }
.sticker-tab .icon { margin-left: 2px; }
.sticker-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
.sticker-grid { flex: none; overflow: visible; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 4px; padding: 8px; align-content: start; }
.sticker-slot { position: relative; }
.sticker-cell { width: 100%; aspect-ratio: 1; border: 0; background: transparent; border-radius: 14px; padding: 6px; display: flex; align-items: center; justify-content: center; }
.sticker-cell:hover { background: var(--surface-2); }
.sticker-cell img { width: 100%; height: 100%; object-fit: contain; }
.sticker-add {
  flex-direction: column; gap: 2px; color: var(--accent-text); font-size: 12.5px; font-weight: 700;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 50%, transparent);
}
.sticker-del {
  position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface);
  background: var(--danger); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0;
}
.sticker-slot:has(.sticker-del) .sticker-cell { animation: wiggle 0.3s ease-in-out infinite alternate; }
@keyframes wiggle { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .sticker-slot:has(.sticker-del) .sticker-cell { animation: none; } }
.sticker-mine-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 0 14px; min-height: 44px; }
.sticker-license { font-size: 11.5px; color: var(--text-3); padding: 4px 14px 12px; margin: 0; }
.sticker-up-preview {
  display: flex; align-items: center; justify-content: center; margin: 4px auto 12px; width: 200px; height: 200px; border-radius: 18px;
  background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50% / 20px 20px; overflow: hidden;
}
.sticker-up-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sticker-up-preview.square img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- forward */
.fwd-search { margin: 0 0 8px; background: var(--surface-2); }
.fwd-sheet .sheet-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- room info: album / files */
.album-cell { position: relative; cursor: zoom-in; }
.album-cell.veiled img { filter: blur(10px); transform: scale(1.25); }
.album-veil { position: absolute; right: 5px; bottom: 5px; color: #fff; background: rgba(0, 0, 0, 0.45); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.file-li { display: flex; align-items: center; gap: 2px; padding-right: 6px; }
.file-li .file-row { flex: 1; min-width: 0; text-decoration: none !important; color: var(--text-2); }
.file-li .file-row:hover { background: var(--surface-2); }
.file-ic {
  width: 40px; height: 40px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff; background: var(--tone, var(--accent));
}
.file-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.file-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- avatar crop */
.crop { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 4px 0 8px; }
.crop-box { position: relative; overflow: hidden; border-radius: 16px; background: var(--surface-2); touch-action: none; cursor: grab; }
.crop-box img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.crop-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.45); outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: -2px; }
.crop-zoom { display: flex; align-items: center; gap: 10px; width: min(320px, 100%); color: var(--text-2); }
.crop-zoom input { flex: 1; accent-color: var(--accent); }
.crop-fail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--text-2); margin: 0; }