fix(island): 重写常驻岛自适应界面与 ClassIsland 动画

packages/desktop-client/src/island/IslandApp.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-const props = defineProps<{ embedded?: boolean }>();
-import { computed, onMounted, ref } from 'vue';
+const props = defineProps<{ embedded?: boolean; suspended?: boolean }>();
+import { computed, onMounted, ref, watch } from 'vue';
 import {
   DEFAULT_ISLAND_APPEARANCE,
   ISLAND_SHADOW_PAD,
@@ -328,6 +328,14 @@ let morphFallbackTimer: number | null = null;
 const MORPH_FALLBACK_MS = 1200;
 
 function syncTargets(snap = false): void {
+  // 常驻岛有独立的 ClassIsland 过渡；旧胶囊不得在隐藏处继续形变、测量或发送命中。
+  if (props.suspended) {
+    if (rafHandle !== null) cancelAnimationFrame(rafHandle);
+    if (morphFallbackTimer !== null) clearTimeout(morphFallbackTimer);
+    rafHandle = null;
+    morphFallbackTimer = null;
+    return;
+  }
   const size = targetSize();
   const radius = targetRadius(size);
   if (snap || !appearance.value.animations) {
@@ -573,6 +581,7 @@ function updateInteractive(clientX: number, clientY: number): void {
  * 注意：关闭命中（穿透）不由这里下发，见 updateInteractive 的说明。
  */
 function refreshInteractive(): void {
+  if (props.suspended) return;
   const node = document.querySelector('.island-card') as HTMLElement | null;
   const fullyHidden = state.value?.mode === 'hidden' && !appearance.value.idleSliver;
   reportHitRect(node && !fullyHidden ? node.getBoundingClientRect() : null);
@@ -600,6 +609,10 @@ function applyAppearance(next: IslandAppearance | null | undefined): void {
   style.setProperty('--island-dur', `${Math.round(320 / Math.max(0.25, next.speed))}ms`);
 }
 
+watch(
+  () => props.suspended,
+  () => syncTargets(true),
+);
 onMounted(async () => {
   window.addEventListener('mousemove', (event) => updateInteractive(event.clientX, event.clientY));
   /**

packages/desktop-client/src/island/LayoutIslandApp.vue

@@ -2,17 +2,23 @@
 import { nextTick, onMounted, ref, shallowRef } from 'vue';
 import {
   defaultIslandLayouts,
+  DEFAULT_ISLAND_APPEARANCE,
+  type IslandAppearance,
   type IslandLayoutSettings,
   type IslandState,
   type ScheduleDto,
 } from '@classhelper/shared';
 import FixedIsland from './IslandApp.vue';
 import CustomIsland from './CustomIsland.vue';
+import ResidentIsland from './ResidentIsland.vue';
 const settings = ref(defaultIslandLayouts()),
   editing = ref(false),
   ready = ref(false);
 const schedules = ref<ScheduleDto[]>([]);
+const appearance = ref<IslandAppearance>({ ...DEFAULT_ISLAND_APPEARANCE });
+const nativeVisible = ref(false);
 const alertHost = shallowRef<HTMLElement | null>(null);
+const resident = () => settings.value.layout === 'custom' && settings.value.residentEnabled && !editing.value;
 const state = ref<IslandState>({
   mode: 'hidden',
   active: null,
@@ -38,6 +44,10 @@ onMounted(async () => {
     bridge.onEditing((value) => (editing.value = value));
     bridge.onSchedules((value) => (schedules.value = value));
     bridge.onState((value) => (state.value = value));
+    bridge.onAppearance((value) => (appearance.value = value));
+    bridge.onVisibility((value) => (nativeVisible.value = value));
+    nativeVisible.value = await bridge.getVisible();
+    appearance.value = await bridge.getAppearance();
     settings.value = await bridge.getLayout();
     state.value = await bridge.getState();
     editing.value = await bridge.getEditing();
@@ -47,8 +57,16 @@ onMounted(async () => {
 });
 </script>
 <template>
+  <ResidentIsland
+    v-if="resident()"
+    :settings="settings"
+    :state="state"
+    :schedules="schedules"
+    :appearance="appearance"
+    :native-visible="nativeVisible"
+  />
   <CustomIsland
-    v-if="settings.layout === 'custom'"
+    v-else-if="settings.layout === 'custom'"
     :settings="settings"
     :state="state"
     :editing="editing"
@@ -57,10 +75,15 @@ onMounted(async () => {
     @done="done"
     @host="alertHost = $event"
   />
-  <Teleport v-if="ready" :disabled="settings.layout === 'fixed' || !alertHost" :to="alertHost || 'body'">
+  <Teleport
+    v-if="ready"
+    :disabled="resident() || settings.layout === 'fixed' || !alertHost"
+    :to="alertHost || 'body'"
+  >
     <FixedIsland
-      v-show="settings.layout === 'fixed' || !!alertHost"
+      v-show="!resident() && (settings.layout === 'fixed' || !!alertHost)"
       :embedded="settings.layout === 'custom'"
+      :suspended="resident()"
     />
   </Teleport>
 </template>

packages/desktop-client/src/island/ResidentIsland.vue

@@ -0,0 +1,359 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch, type CSSProperties } from 'vue';
+import {
+  CLASSISLAND_ISLAND_METRICS as CI,
+  ISLAND_SHADOW_PAD,
+  PRIORITY_LABELS,
+  PRIORITY_RANK,
+  type IslandAppearance,
+  type IslandLayoutSettings,
+  type IslandState,
+  type ScheduleDto,
+} from '@classhelper/shared';
+import ComponentNode from './ComponentNode.vue';
+import ComponentIcon from './ComponentIcon.vue';
+
+const props = defineProps<{
+  settings: IslandLayoutSettings;
+  state: IslandState;
+  schedules: ScheduleDto[];
+  appearance: IslandAppearance;
+  nativeVisible: boolean;
+}>();
+const scheme = computed(() => props.settings.schemes.find((s) => s.id === props.settings.activeSchemeId)!);
+const expanded = computed(() => props.state.mode === 'expanded');
+const messages = computed(() => {
+  const unique = new Map(
+    [props.state.active, ...props.state.queued].filter((n) => n !== null).map((n) => [n.id, n]),
+  );
+  return [...unique.values()].sort(
+    (a, b) =>
+      PRIORITY_RANK[a.priority] - PRIORITY_RANK[b.priority] ||
+      Date.parse(b.createdAt) - Date.parse(a.createdAt),
+  );
+});
+const shell = ref<HTMLElement>();
+const compact = ref<HTMLElement>();
+const details = ref<HTMLElement>();
+const now = ref(Date.now());
+const visible = ref(!document.hidden);
+const motion = computed(() => props.appearance.animations && visible.value && props.nativeVisible);
+const available = ref({ width: 940, height: 620 });
+const natural = ref({ compact: { width: 40, height: 40 }, details: { width: 280, height: 80 } });
+const anchor = computed(() =>
+  props.appearance.position.endsWith('left')
+    ? 'left'
+    : props.appearance.position.endsWith('right')
+      ? 'right'
+      : 'center',
+);
+const capacity = computed(() =>
+  Math.max(1, Math.floor((available.value.height / scheme.value.scale - 130) / 104)),
+);
+const visibleMessages = computed(() =>
+  messages.value.slice(0, props.state.listExpanded ? capacity.value : Math.min(3, capacity.value)),
+);
+const remaining = computed(() => messages.value.length - visibleMessages.value.length);
+function fitted(size: { width: number; height: number }) {
+  // 以未变形内容测量；字体、配置缩放、行数和屏幕变化都参与适配，不从动画中的壳反推内容。
+  const scale = Math.min(
+    scheme.value.scale,
+    available.value.width / size.width,
+    available.value.height / size.height,
+  );
+  return { scale, width: Math.ceil(size.width * scale), height: Math.ceil(size.height * scale) };
+}
+const compactFit = computed(() => fitted(natural.value.compact));
+const detailsFit = computed(() => fitted(natural.value.details));
+const fit = computed(() => (expanded.value ? detailsFit.value : compactFit.value));
+const style = computed<CSSProperties>(() => ({
+  width: `${fit.value.width}px`,
+  height: `${fit.value.height}px`,
+  color: scheme.value.foreground,
+  '--resident-background': `${scheme.value.color}${Math.round(scheme.value.opacity * 255)
+    .toString(16)
+    .padStart(2, '0')}`,
+  '--resident-radius': `${scheme.value.radius * fit.value.scale}px`,
+  '--resident-scale': fit.value.scale,
+  '--custom-row-gap': `${scheme.value.spacing}px`,
+  '--resident-row-width': `${Math.max(60, available.value.width / scheme.value.scale - 58)}px`,
+  '--secondary': `${CI.secondaryFontSize}px`,
+  '--emphasized': `${CI.emphasizedFontSize}px`,
+  '--large': `${CI.largeFontSize}px`,
+  '--resident-duration': motion.value ? `${550 / props.appearance.speed}ms` : '0ms',
+  '--resident-fade-duration': motion.value ? `${200 / props.appearance.speed}ms` : '0ms',
+}));
+function action(value: 'expand' | 'collapse' | 'expand-list' | 'dismiss-all' | 'mark-all-read' | 'open-app') {
+  window.island?.sendAction(value);
+}
+function open(event: Event) {
+  if (!expanded.value && !(event.target as HTMLElement).closest('button')) action('expand');
+}
+function key(event: KeyboardEvent) {
+  if (event.target === event.currentTarget && ['Enter', ' '].includes(event.key)) {
+    event.preventDefault();
+    action(expanded.value ? 'collapse' : 'expand');
+  }
+  if (event.key === 'Escape') action('collapse');
+}
+function pointer(event: PointerEvent) {
+  if (event.pointerType !== 'mouse') window.island?.noteResidentTouch();
+}
+let observer: ResizeObserver | undefined;
+let clock: ReturnType<typeof setInterval>;
+let hitFrame = 0;
+let hitUntil = 0;
+let hitTimer: ReturnType<typeof setTimeout> | undefined;
+let lastHit = '';
+function reportHit() {
+  const r = shell.value?.getBoundingClientRect();
+  if (!r) return;
+  const payload = { x: r.x, y: r.y, width: r.width, height: r.height };
+  const key = Object.values(payload).map(Math.round).join(',');
+  if (key !== lastHit) {
+    lastHit = key;
+    window.island?.setHitRect(payload);
+  }
+  const bell = !expanded.value ? shell.value?.querySelector('.resident-bell')?.getBoundingClientRect() : null;
+  window.island?.reportResidentControl(
+    bell ? { x: bell.x, y: bell.y, width: bell.width, height: bell.height } : null,
+  );
+}
+function trackHit() {
+  // 几何动画只在合成/渲染层播放；主进程只接收限流命中矩形，绝不据此改窗口大小。
+  if (!motion.value) {
+    reportHit();
+    return;
+  }
+  hitUntil = performance.now() + 600 / props.appearance.speed;
+  clearTimeout(hitTimer);
+  hitTimer = setTimeout(reportHit, 650 / props.appearance.speed);
+  if (hitFrame) return;
+  let last = 0;
+  const frame = (time: number) => {
+    if (time - last >= 60) {
+      reportHit();
+      last = time;
+    }
+    if (time < hitUntil) hitFrame = requestAnimationFrame(frame);
+    else {
+      hitFrame = 0;
+      reportHit();
+    }
+  };
+  hitFrame = requestAnimationFrame(frame);
+}
+let measuring = false;
+function measure() {
+  if (measuring) return;
+  measuring = true;
+  void nextTick(() => {
+    measuring = false;
+    if (!compact.value || !details.value) return;
+    const read = (element: HTMLElement) => ({
+      width: Math.max(40, element.offsetWidth),
+      height: Math.max(40, element.offsetHeight),
+    });
+    natural.value = { compact: read(compact.value), details: read(details.value) };
+    void nextTick(() => {
+      window.island?.reportSize({ width: fit.value.width, height: fit.value.height });
+      trackHit();
+    });
+  });
+}
+function resize() {
+  available.value = {
+    width: Math.max(40, innerWidth - 2 * ISLAND_SHADOW_PAD - 4),
+    height: Math.max(40, innerHeight - 2 * ISLAND_SHADOW_PAD - 4),
+  };
+  measure();
+}
+function visibility() {
+  visible.value = !document.hidden;
+  void nextTick(reportHit);
+}
+// 不深度监听整份状态；只在目标内容/几何变化时测量，时钟每秒只改文本。
+watch([expanded, scheme, () => props.state.listExpanded, messages], measure, { deep: true, flush: 'post' });
+watch(fit, trackHit, { flush: 'post' });
+watch(
+  () => props.appearance.position,
+  () => void nextTick(trackHit),
+);
+onMounted(() => {
+  resize();
+  observer = new ResizeObserver(measure);
+  if (compact.value) observer.observe(compact.value);
+  if (details.value) observer.observe(details.value);
+  clock = setInterval(() => (now.value = Date.now()), 1000);
+  window.addEventListener('resize', resize);
+  document.addEventListener('visibilitychange', visibility);
+  void document.fonts.ready.then(measure);
+});
+onUnmounted(() => {
+  observer?.disconnect();
+  clearInterval(clock);
+  clearTimeout(hitTimer);
+  cancelAnimationFrame(hitFrame);
+  window.removeEventListener('resize', resize);
+  document.removeEventListener('visibilitychange', visibility);
+  window.island?.reportResidentControl(null);
+});
+</script>
+
+<template>
+  <div
+    class="resident-window"
+    :data-anchor="anchor"
+    :data-bottom="appearance.position.startsWith('bottom')"
+    @pointerdown.capture="pointer"
+  >
+    <section
+      ref="shell"
+      class="custom-card resident-card"
+      :class="{ 'resident-open': expanded, 'resident-separated': scheme.separated && !expanded }"
+      :style="style"
+      :role="expanded ? 'region' : 'button'"
+      tabindex="0"
+      :aria-label="
+        expanded ? '常驻岛内容' : messages.length ? `查看 ${messages.length} 条通知` : '展开常驻岛'
+      "
+      :aria-expanded="expanded"
+      @click="open"
+      @keydown="key"
+      @transitionend.self="reportHit"
+    >
+      <div
+        class="resident-page resident-compact-page"
+        :style="{ '--resident-scale': compactFit.scale }"
+        :class="{ 'page-active': !expanded }"
+        :inert="expanded"
+        :aria-hidden="expanded"
+      >
+        <div ref="compact" class="resident-source resident-compact">
+          <div class="layout-rows" :style="{ gap: `${scheme.spacing}px` }">
+            <section
+              v-for="row in scheme.rows"
+              :key="row.id"
+              class="layout-row"
+              :data-row="row.id"
+              :style="{ '--row-gap': `${row.gap}px` }"
+            >
+              <div class="row-components">
+                <ComponentNode
+                  v-for="node in row.nodes"
+                  :key="node.id"
+                  :node="node"
+                  :state="state"
+                  :now="now"
+                  :schedules="schedules"
+                  :editing="false"
+                  selected-id=""
+                  alert-node-id=""
+                />
+              </div>
+            </section>
+          </div>
+          <button
+            class="resident-bell"
+            :class="{ 'bell-empty': !messages.length }"
+            :aria-label="messages.length ? `查看 ${messages.length} 条通知` : '展开常驻岛'"
+            @click.stop="action('expand')"
+          >
+            <ComponentIcon v-if="messages.length" kind="notification" />
+            <svg
+              v-else
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.6"
+              aria-hidden="true"
+            >
+              <path d="m8 10 4 4 4-4" />
+            </svg>
+            <span v-if="messages.length" :key="messages.length">
+              {{ messages.length > 99 ? '99+' : messages.length }}
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        class="resident-page resident-detail-page"
+        :style="{ '--resident-scale': detailsFit.scale }"
+        :class="{ 'page-active': expanded }"
+        :inert="!expanded"
+        :aria-hidden="!expanded"
+      >
+        <div
+          ref="details"
+          class="resident-source resident-details"
+          :class="{ 'with-messages': messages.length }"
+          :style="
+            messages.length ? { width: `${Math.min(440, available.width / scheme.scale)}px` } : undefined
+          "
+        >
+          <header class="resident-panel-heading">
+            <span>{{ messages.length ? `通知 · ${messages.length}` : '常驻岛' }}</span>
+            <button class="icon-btn" aria-label="收起常驻岛" @click.stop="action('collapse')">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
+                <path d="m8 14 4-4 4 4" />
+              </svg>
+            </button>
+          </header>
+          <div v-if="messages.length" id="custom-alert-host" class="resident-messages">
+            <article
+              v-for="item in visibleMessages"
+              :key="item.id"
+              class="list-row"
+              :data-priority="item.priority"
+            >
+              <div class="resident-message-title">
+                <strong>{{ item.title }}</strong>
+                <span>{{ PRIORITY_LABELS[item.priority] }}</span>
+              </div>
+              <p>{{ item.content }}</p>
+              <small>{{ [item.teacherName, item.courseName].filter(Boolean).join(' · ') }}</small>
+            </article>
+            <button
+              v-if="remaining"
+              class="resident-more"
+              @click.stop="action(state.listExpanded ? 'open-app' : 'expand-list')"
+            >
+              {{
+                state.listExpanded ? `其余 ${remaining} 条在应用中查看` : `展开更多（还有 ${remaining} 条）`
+              }}
+            </button>
+            <footer class="resident-actions">
+              <button @click.stop="action('open-app')">查看完整内容</button>
+              <button @click.stop="action('mark-all-read')">标为已读</button>
+              <button class="solid-btn" @click.stop="action('dismiss-all')">知道了</button>
+            </footer>
+          </div>
+          <div v-else class="layout-rows resident-expanded-rows" :style="{ gap: `${scheme.spacing}px` }">
+            <section
+              v-for="row in scheme.expandedRows"
+              :key="row.id"
+              class="layout-row"
+              :data-row="row.id"
+              :style="{ '--row-gap': `${row.gap}px` }"
+            >
+              <div class="row-components">
+                <ComponentNode
+                  v-for="node in row.nodes"
+                  :key="node.id"
+                  :node="node"
+                  :state="state"
+                  :now="now"
+                  :schedules="schedules"
+                  :editing="false"
+                  selected-id=""
+                  alert-node-id=""
+                />
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<style src="./resident-island.css"></style>

packages/desktop-client/src/island/custom-island.css

@@ -6,7 +6,7 @@
 .custom-card {
   box-sizing: border-box;
   padding: 12px;
-  overflow: auto;
+  overflow: hidden;
   background: var(--custom-color);
   border-radius: var(--custom-radius);
   box-shadow:

packages/desktop-client/src/island/resident-island.css

@@ -0,0 +1,304 @@
+/* ClassIsland ClassicTheme: 40px 行高、12px 内边距、550ms 背景、200ms 内容淡入。 */
+.resident-window {
+  position: fixed;
+  inset: 10px;
+  overflow: visible;
+  pointer-events: none;
+}
+.resident-window .resident-card {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+  padding: 0;
+  min-width: 0;
+  min-height: 0;
+  max-width: none;
+  max-height: none;
+  overflow: hidden;
+  overflow: clip;
+  isolation: isolate;
+  pointer-events: auto;
+  background: var(--resident-background);
+  border-radius: var(--resident-radius);
+  font-size: 16px;
+  line-height: 1.4;
+  box-shadow: 0 2px 3px #0000001c;
+  transition:
+    width var(--resident-duration) cubic-bezier(0, 1, 0.5, 1.1),
+    height var(--resident-duration) cubic-bezier(0, 1, 0.5, 1.1),
+    border-radius var(--resident-fade-duration) ease;
+}
+.resident-window[data-anchor='left'] .resident-card {
+  left: 0;
+  transform: none;
+}
+.resident-window[data-anchor='right'] .resident-card {
+  left: auto;
+  right: 0;
+  transform: none;
+}
+.resident-window[data-bottom='true'] .resident-card {
+  top: auto;
+  bottom: 0;
+}
+.resident-card .resident-page {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: max-content;
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transition:
+    opacity var(--resident-fade-duration) cubic-bezier(0.47, 0, 0.745, 0.715),
+    visibility 0s var(--resident-fade-duration);
+}
+.resident-card .resident-page.page-active {
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible;
+  transition-delay: 0s;
+}
+.resident-card .resident-source {
+  width: max-content;
+  transform: scale(var(--resident-scale));
+  transform-origin: center top;
+}
+.resident-window[data-anchor='left'] .resident-page {
+  left: 0;
+  transform: none;
+}
+.resident-window[data-anchor='left'] .resident-source {
+  transform-origin: left top;
+}
+.resident-window[data-anchor='right'] .resident-page {
+  left: auto;
+  right: 0;
+  transform: none;
+}
+.resident-window[data-anchor='right'] .resident-source {
+  transform-origin: right top;
+}
+.resident-card .resident-compact {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  min-height: 40px;
+}
+.resident-window .resident-card.resident-separated {
+  background: transparent;
+  box-shadow: none;
+}
+.resident-separated .resident-compact {
+  padding: 0;
+}
+.resident-separated .resident-compact .layout-rows {
+  align-items: center;
+}
+.resident-separated .resident-compact .layout-row {
+  padding: 0 12px;
+  background: var(--resident-background);
+  border-radius: var(--resident-radius);
+}
+.resident-separated .resident-compact .resident-bell {
+  background: var(--resident-background);
+}
+.resident-card .layout-rows {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.resident-card .row-components {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  min-height: 40px;
+}
+.resident-card .resident-compact .component-node:not(.container) {
+  min-height: 40px;
+  max-height: 40px;
+  display: flex;
+  align-items: center;
+  padding: 0 calc(var(--row-gap, 12px) / 2);
+}
+.resident-card .resident-compact .component-node.container {
+  padding: 0;
+}
+.resident-card .resident-compact .component-node.text {
+  max-width: min(320px, max(80px, calc(var(--resident-row-width) - 112px)));
+}
+.resident-card .resident-compact .text > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.resident-card .resident-compact .schedule {
+  flex-direction: row;
+  gap: 12px;
+}
+.resident-card .resident-compact .schedule > div + div {
+  margin-top: 0;
+}
+.resident-card .separator > span {
+  height: 20px;
+}
+.resident-card .resident-bell {
+  align-self: center;
+  color: inherit;
+}
+.resident-card .resident-bell.bell-empty {
+  color: #ffffff80;
+}
+.resident-card .resident-bell span {
+  animation: resident-indicator-in 250ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.resident-card .resident-details {
+  min-width: 160px;
+  padding: 0 12px 12px;
+}
+.resident-card .resident-panel-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  height: 40px;
+  padding: 0 6px;
+  margin: 0;
+  border: 0;
+  color: #ffffff94;
+  font-size: 12px;
+}
+.resident-card .resident-panel-heading .icon-btn {
+  min-height: 28px;
+  width: 28px;
+  height: 28px;
+  padding: 4px;
+}
+.resident-card .icon-btn svg {
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+.resident-card .resident-expanded-rows {
+  border-top: 1px solid #ffffff1a;
+  padding-top: 8px;
+}
+.resident-card .resident-expanded-rows .row-components {
+  gap: var(--row-gap, 12px);
+}
+.resident-card #custom-alert-host {
+  width: 100%;
+  max-width: 100%;
+}
+.resident-card .resident-messages {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.resident-card .list-row {
+  display: block;
+  height: auto;
+  min-height: 0;
+  padding: 12px;
+  border: 1px solid #ffffff18;
+  border-radius: 6px;
+  background: #ffffff08;
+}
+.resident-card .resident-message-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.resident-card .resident-message-title strong {
+  flex: 1;
+  min-width: 0;
+  font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.resident-card .resident-message-title > span {
+  flex: none;
+  color: #ffffff80;
+  font-size: 11px;
+}
+.resident-card .list-row[data-priority='URGENT'] .resident-message-title > span {
+  color: #ff9c94;
+}
+.resident-card .list-row p {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  margin: 6px 0;
+  font-size: 14px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  white-space: pre-line;
+}
+.resident-card .list-row:only-of-type p {
+  -webkit-line-clamp: 5;
+}
+.resident-card .list-row small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: #ffffff80;
+}
+.resident-card .resident-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 4px;
+}
+.resident-card .resident-actions button:first-child {
+  margin-right: auto;
+}
+.resident-card .resident-actions button,
+.resident-card .resident-more {
+  border: 0;
+  border-radius: 6px;
+  padding: 8px 10px;
+  background: #ffffff0d;
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.resident-card .resident-actions .solid-btn {
+  background: #ffffffdd;
+  color: #202124;
+}
+.resident-card button:focus-visible {
+  outline: 2px solid #adc4ff;
+  outline-offset: -2px;
+}
+@media (hover: hover) and (pointer: fine) {
+  .resident-card button:hover {
+    filter: brightness(1.18);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .resident-window .resident-card,
+  .resident-card .resident-page {
+    transition-duration: 0ms;
+  }
+  .resident-card .resident-bell span {
+    animation: none;
+  }
+}
+@keyframes resident-indicator-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}