geo/apps/admin-web/src/components/PublishArticleModal.vue

<script setup lang="ts">
import { MinusCircleFilled } from "@ant-design/icons-vue";
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
import { message, notification } from "ant-design-vue";
import type { ArticleDetail, DesktopAccountInfo, MediaPlatform } from "@geo/shared-types";
import { computed, ref, watch, watchEffect } from "vue";
import { useI18n } from "vue-i18n";

import CoverPickerModal from "@/components/CoverPickerModal.vue";
import { articlesApi, mediaApi, publishJobsApi, resolveApiURL, tenantAccountsApi } from "@/lib/api";
import { coverUploadRequired, deriveCoverFileName } from "@/lib/cover-requirements";
import { formatDateTime } from "@/lib/display";
import { formatError } from "@/lib/errors";
import { getPublishPlatformMeta, normalizePublishPlatformId, normalizePublishPlatformIds } from "@/lib/publish-platforms";

type PublishState = "immediate" | "queued" | "unavailable";

interface PublishAccountCard {
  id: string;
  platformId: string;
  platformName: string;
  platformShortName: string;
  platformAccent: string;
  displayName: string;
  platformUid: string;
  avatarUrl: string | null;
  health: DesktopAccountInfo["health"];
  clientId: string | null;
  clientOnline: boolean | null;
  clientDeviceName: string | null;
  clientLastSeenAt: string | null;
  publishState: PublishState;
  selectable: boolean;
  statusText: string;
}

const props = defineProps<{
  open: boolean;
  articleId: number | null;
}>();

const emit = defineEmits<{
  "update:open": [value: boolean];
  published: [];
}>();

const { t } = useI18n();
const queryClient = useQueryClient();

const selectedAccountIds = ref<string[]>([]);
const coverEnabled = ref(false);
const coverAssetUrl = ref("");
const coverFileName = ref("");
const coverImageAssetId = ref<number | null>(null);
const coverPickerOpen = ref(false);
const selectionHydrated = ref(false);
const coverHydrated = ref(false);

const detailQuery = useQuery({
  queryKey: computed(() => ["articles", "detail", props.articleId, "publish-modal"]),
  enabled: computed(() => props.open && Boolean(props.articleId)),
  queryFn: () => articlesApi.detail(props.articleId as number),
});

const accountsQuery = useQuery({
  queryKey: ["tenant", "desktop-accounts", "publish-modal"],
  enabled: computed(() => props.open),
  queryFn: () => tenantAccountsApi.list(),
});

const platformsQuery = useQuery({
  queryKey: ["media", "platforms", "publish-modal"],
  enabled: computed(() => props.open),
  queryFn: () => mediaApi.platforms(),
});

watch(
  () => props.open,
  async (open) => {
    if (!open) {
      selectedAccountIds.value = [];
      coverAssetUrl.value = "";
      coverFileName.value = "";
      coverImageAssetId.value = null;
      coverEnabled.value = false;
      selectionHydrated.value = false;
      coverHydrated.value = false;
      return;
    }

    selectionHydrated.value = false;
    coverHydrated.value = false;

    await Promise.allSettled([
      props.articleId ? detailQuery.refetch() : Promise.resolve(),
      accountsQuery.refetch(),
      platformsQuery.refetch(),
    ]);
  },
  { immediate: true },
);

const platformMap = computed(() => {
  return new Map(
    (platformsQuery.data.value ?? []).map((platform: MediaPlatform) => [
      normalizePublishPlatformId(platform.platform_id),
      platform,
    ]),
  );
});

const rawAccountMap = computed(() => {
  return new Map((accountsQuery.data.value ?? []).map((account) => [account.id, account]));
});

const articlePlatformIds = computed(() => normalizePublishPlatformIds(detailQuery.data.value?.platforms ?? []));

const accountCards = computed<PublishAccountCard[]>(() => {
  const preferredPlatforms = new Set(articlePlatformIds.value);

  return [...(accountsQuery.data.value ?? [])]
    .filter((account) => !account.deleted_at)
    .map((account) => {
      const platformId = normalizePublishPlatformId(account.platform);
      const platform = platformMap.value.get(platformId);
      const fallback = getPublishPlatformMeta(platformId);
      const publishState = resolvePublishState(account);

      return {
        id: account.id,
        platformId,
        platformName: platform?.name || fallback.name,
        platformShortName: platform?.short_name || fallback.shortName,
        platformAccent: platform?.accent_color || fallback.accent,
        displayName: account.display_name,
        platformUid: normalizePlatformUid(account.platform_uid),
        avatarUrl: resolveApiURL(account.avatar_url),
        health: account.health,
        clientId: account.client_id,
        clientOnline: account.client_online,
        clientDeviceName: account.client_device_name,
        clientLastSeenAt: account.client_last_seen_at,
        publishState,
        selectable: publishState !== "unavailable",
        statusText: resolveStatusText(account, publishState),
      };
    })
    .sort((left, right) => {
      const preferredGap =
        Number(preferredPlatforms.has(right.platformId)) - Number(preferredPlatforms.has(left.platformId));
      if (preferredGap !== 0) {
        return preferredGap;
      }

      const publishGap = publishRank(left.publishState) - publishRank(right.publishState);
      if (publishGap !== 0) {
        return publishGap;
      }

      const leftVerifiedAt = Date.parse(rawAccountMap.value.get(left.id)?.verified_at ?? "") || 0;
      const rightVerifiedAt = Date.parse(rawAccountMap.value.get(right.id)?.verified_at ?? "") || 0;
      return rightVerifiedAt - leftVerifiedAt;
    });
});

watch(
  accountCards,
  (cards) => {
    const selectableIds = new Set(cards.filter((card) => card.selectable).map((card) => card.id));
    selectedAccountIds.value = selectedAccountIds.value.filter((id) => selectableIds.has(id));
  },
  { immediate: true },
);

watchEffect(() => {
  if (!props.open) {
    return;
  }

  if (!coverHydrated.value && !detailQuery.isPending.value && !detailQuery.isFetching.value) {
    const initialUrl = resolveApiURL(detailQuery.data.value?.cover_asset_url);
    coverAssetUrl.value = initialUrl;
    coverFileName.value = deriveCoverFileName(initialUrl);
    coverImageAssetId.value = detailQuery.data.value?.cover_image_asset_id ?? null;
    coverEnabled.value = Boolean(initialUrl);
    coverHydrated.value = true;
  }

  if (selectionHydrated.value) {
    return;
  }

  if (
    detailQuery.isPending.value ||
    detailQuery.isFetching.value ||
    accountsQuery.isPending.value ||
    accountsQuery.isFetching.value ||
    platformsQuery.isPending.value ||
    platformsQuery.isFetching.value
  ) {
    return;
  }

  const preferredPlatforms = new Set(articlePlatformIds.value);
  selectedAccountIds.value = accountCards.value
    .filter((card) => card.selectable && preferredPlatforms.has(card.platformId))
    .map((card) => card.id);
  selectionHydrated.value = true;
});

const selectedCards = computed(() => {
  const selected = new Set(selectedAccountIds.value);
  return accountCards.value.filter((card) => selected.has(card.id));
});

const modalTitle = computed(() => detailQuery.data.value?.title || t("article.untitled"));
const selectedPlatformIds = computed(() => Array.from(new Set(selectedCards.value.map((card) => card.platformId))));
const selectedImmediateCount = computed(() => selectedCards.value.filter((card) => card.publishState === "immediate").length);
const selectedQueuedCount = computed(() => selectedCards.value.filter((card) => card.publishState === "queued").length);
const publishModalVisible = computed(() => props.open && !coverPickerOpen.value);
const coverRequired = computed(() => coverUploadRequired(selectedPlatformIds.value));
const effectiveCoverEnabled = computed(() => coverRequired.value || coverEnabled.value);
const normalizedCoverValue = computed(() => (effectiveCoverEnabled.value ? coverAssetUrl.value.trim() : ""));

watch(
  coverRequired,
  (required) => {
    if (required) {
      coverEnabled.value = true;
    }
  },
  { immediate: true },
);

const publishMutation = useMutation({
  mutationFn: async () => {
    if (!props.articleId || !detailQuery.data.value) {
      throw new Error("missing_article");
    }
    if (!selectedAccountIds.value.length) {
      throw new Error("no_accounts_selected");
    }
    if (coverRequired.value && !normalizedCoverValue.value) {
      throw new Error("cover_required_for_selected_platforms");
    }

    const article = await persistCoverIfNeeded(detailQuery.data.value);
    return publishJobsApi.create({
      title: article.title?.trim() || t("article.untitled"),
      content_ref: {
        article_id: article.id,
      },
      accounts: selectedAccountIds.value.map((accountId) => ({
        account_id: accountId,
      })),
    });
  },
  onSuccess: async () => {
    notification.success({
      message: "已提交发布任务",
      description: successDescription(),
      placement: "topRight",
      duration: 5,
    });

    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ["articles"] }),
      queryClient.invalidateQueries({ queryKey: ["workspace"] }),
      queryClient.invalidateQueries({ queryKey: ["tenant", "desktop-accounts"] }),
      queryClient.invalidateQueries({ queryKey: ["articles", "detail", props.articleId] }),
      queryClient.invalidateQueries({ queryKey: ["articles", "detail", props.articleId, "publish-modal"] }),
      queryClient.invalidateQueries({ queryKey: ["articles", "publish-records", props.articleId] }),
    ]);

    emit("published");
    emit("update:open", false);
  },
  onError: (error) => {
    const normalized = error instanceof Error ? error.message : "";
    if (normalized === "no_accounts_selected") {
      message.warning("请先选择至少一个可发布账号");
      return;
    }
    if (normalized === "cover_required_for_selected_platforms") {
      message.warning(t("media.publish.messages.coverRequired"));
      return;
    }
    message.error(formatError(error));
  },
});

async function persistCoverIfNeeded(detail: ArticleDetail): Promise<ArticleDetail> {
  const currentUrl = resolveApiURL(detail.cover_asset_url).trim();
  const nextUrl = normalizedCoverValue.value.trim();
  const currentAssetId = detail.cover_image_asset_id ?? null;

  if (currentUrl === nextUrl && currentAssetId === coverImageAssetId.value) {
    return detail;
  }

  return articlesApi.update(detail.id, {
    title: detail.title?.trim() || t("article.untitled"),
    markdown_content: detail.markdown_content ?? "",
    platforms: normalizePublishPlatformIds(detail.platforms ?? []),
    cover_asset_url: nextUrl || null,
    cover_image_asset_id: coverImageAssetId.value,
  });
}

function successDescription(): string {
  const total = selectedCards.value.length;
  if (total === 0) {
    return "任务已进入发布队列。";
  }
  if (selectedQueuedCount.value === 0) {
    return `共 ${total} 个账号，在线客户端会立即开始消费。`;
  }
  if (selectedImmediateCount.value === 0) {
    return `共 ${total} 个账号已进入离线队列，客户端上线后会自动继续发布。`;
  }
  return `共 ${total} 个账号：${selectedImmediateCount.value} 个立即发布，${selectedQueuedCount.value} 个离线排队。`;
}

function toggleAccount(accountId: string, selectable: boolean): void {
  if (!selectable || publishMutation.isPending.value) {
    return;
  }

  if (selectedAccountIds.value.includes(accountId)) {
    selectedAccountIds.value = selectedAccountIds.value.filter((id) => id !== accountId);
    return;
  }

  selectedAccountIds.value = [...selectedAccountIds.value, accountId];
}

function isSelected(accountId: string): boolean {
  return selectedAccountIds.value.includes(accountId);
}

function handleCoverToggle(checked: boolean): void {
  if (coverRequired.value) {
    coverEnabled.value = true;
    return;
  }
  coverEnabled.value = checked;
}

function handleCoverPicked(payload: { url: string; fileName: string; assetId?: number | null }): void {
  coverAssetUrl.value = payload.url;
  coverFileName.value = payload.fileName;
  coverImageAssetId.value = payload.assetId ?? null;
  coverEnabled.value = true;
}

function handleRemoveCover(): void {
  coverAssetUrl.value = "";
  coverFileName.value = "";
  coverImageAssetId.value = null;
}

function resolvePublishState(account: DesktopAccountInfo): PublishState {
  if (account.health !== "live") {
    return "unavailable";
  }
  if (!account.client_id) {
    return "unavailable";
  }
  return account.client_online === true ? "immediate" : "queued";
}

function resolveStatusText(account: DesktopAccountInfo, publishState: PublishState): string {
  if (publishState === "immediate") {
    return "客户端在线，RabbitMQ 会立即唤醒桌面端开始发布。";
  }
  if (publishState === "queued") {
    return "客户端当前离线，任务会先落库排队，等桌面端上线后自动继续发布。";
  }
  if (account.health !== "live") {
    return "该账号授权状态异常，请先在桌面端重新校验或重新授权。";
  }
  return "该账号还没有绑定桌面客户端，当前不能进入发布队列。";
}

function publishRank(state: PublishState): number {
  switch (state) {
    case "immediate":
      return 0;
    case "queued":
      return 1;
    default:
      return 2;
  }
}

function publishStateLabel(state: PublishState): string {
  switch (state) {
    case "immediate":
      return "立即发布";
    case "queued":
      return "离线排队";
    default:
      return "不可发布";
  }
}

function healthLabel(health: DesktopAccountInfo["health"]): string {
  switch (health) {
    case "live":
      return "授权正常";
    case "captcha":
      return "待处理";
    case "risk":
      return "风险观察";
    default:
      return "授权异常";
  }
}

function healthColor(health: DesktopAccountInfo["health"]): string {
  switch (health) {
    case "live":
      return "green";
    case "captcha":
      return "orange";
    case "risk":
      return "gold";
    default:
      return "red";
  }
}

function clientStatusLabel(card: PublishAccountCard): string {
  if (!card.clientId) {
    return "未绑定客户端";
  }
  return card.clientOnline ? "客户端在线" : "客户端离线";
}

function clientStatusColor(card: PublishAccountCard): string {
  if (!card.clientId) {
    return "default";
  }
  return card.clientOnline ? "green" : "gold";
}

function accountInitial(card: PublishAccountCard): string {
  const trimmed = card.displayName.trim();
  return trimmed ? trimmed.slice(0, 1).toUpperCase() : card.platformShortName;
}

function normalizePlatformUid(value?: string | null): string {
  let normalized = String(value ?? "").trim();
  while (normalized.toLowerCase().startsWith("platform:")) {
    normalized = normalized.slice("platform:".length).trim();
  }
  return normalized || "--";
}
</script>

<template>
  <a-modal
    :open="publishModalVisible"
    title="发布"
    :width="980"
    :confirm-loading="publishMutation.isPending.value"
    ok-text="提交发布"
    :cancel-text="t('common.cancel')"
    @ok="publishMutation.mutate()"
    @cancel="emit('update:open', false)"
  >
    <div class="publish-modal">
      <section class="publish-modal__hero">
        <div>
          <span class="publish-modal__eyebrow">发布标题</span>
          <h3>{{ modalTitle }}</h3>
          <p>在线账号会立即消费，离线账号会自动排队；数据库保留任务真相，RabbitMQ 负责唤醒在线客户端。</p>
        </div>

        <div class="publish-modal__hero-metrics">
          <div class="publish-modal__metric">
            <strong>{{ selectedCards.length }}</strong>
            <span>已选账号</span>
          </div>
          <div class="publish-modal__metric">
            <strong>{{ selectedImmediateCount }}</strong>
            <span>立即发布</span>
          </div>
          <div class="publish-modal__metric">
            <strong>{{ selectedQueuedCount }}</strong>
            <span>离线排队</span>
          </div>
        </div>
      </section>

      <a-alert
        type="info"
        show-icon
        message="发布调度规则"
        description="客户端在线时会立即开始消费；客户端离线时也允许提交，任务会先写入 SaaS 队列，客户端恢复在线后继续执行。"
      />

      <section class="publish-modal__section">
        <div class="publish-modal__section-header">
          <h3><span class="required-star">*</span> 目标账号</h3>
          <p class="muted">优先预选文章里已经勾选的平台账号。支持同平台多账号；授权异常或未绑定桌面客户端的账号不可选。</p>
        </div>

        <div v-if="accountsQuery.isPending.value || platformsQuery.isPending.value" class="publish-modal__loading">
          <a-skeleton active :paragraph="{ rows: 5 }" />
        </div>

        <div v-else-if="accountCards.length" class="publish-modal__list">
          <button
            v-for="account in accountCards"
            :key="account.id"
            type="button"
            class="publish-modal__list-item"
            :class="{
              'publish-modal__list-item--active': isSelected(account.id),
              'publish-modal__list-item--disabled': !account.selectable,
            }"
            @click="toggleAccount(account.id, account.selectable)"
          >
            <div class="publish-modal__identity">
              <span class="publish-modal__check">
                <span v-if="isSelected(account.id)" class="publish-modal__check-inner"></span>
              </span>

              <span class="publish-modal__avatar" :style="{ background: account.platformAccent }">
                <img v-if="account.avatarUrl" :src="account.avatarUrl" :alt="account.displayName" />
                <span v-else>{{ accountInitial(account) }}</span>
              </span>

              <div class="publish-modal__identity-copy">
                <strong>{{ account.displayName }}</strong>
                <span>{{ account.platformName }} · {{ account.platformUid }}</span>
              </div>
            </div>

            <div class="publish-modal__meta-group">
              <div class="publish-modal__tags">
                <a-tag :color="healthColor(account.health)">{{ healthLabel(account.health) }}</a-tag>
                <a-tag :color="clientStatusColor(account)">{{ clientStatusLabel(account) }}</a-tag>
              </div>

              <a-tooltip :title="account.statusText" placement="top">
                <span class="publish-modal__state-pill" :class="`publish-modal__state-pill--${account.publishState}`">
                  {{ publishStateLabel(account.publishState) }}
                </span>
              </a-tooltip>
            </div>
          </button>
        </div>

        <a-empty v-else description="当前还没有可用的桌面媒体账号，请先在桌面端绑定。" />
      </section>

      <section class="publish-modal__section">
        <div class="publish-modal__section-header publish-modal__section-header--inline">
          <h3>封面图</h3>
          <a-switch :checked="effectiveCoverEnabled" :disabled="coverRequired" @change="handleCoverToggle" />
        </div>
        <p class="muted">
          {{ coverRequired ? t("media.publish.messages.coverRequired") : "默认关闭。需要时可在这里单独指定发布封面，并先写回文章。" }}
        </p>

        <div v-if="effectiveCoverEnabled" class="publish-modal__cover-body">
          <div class="publish-modal__cover-preview-wrap">
            <button type="button" class="publish-modal__cover-preview" @click="coverPickerOpen = true">
              <template v-if="coverAssetUrl">
                <img :src="coverAssetUrl" alt="cover preview" />
              </template>
              <template v-else>
                <span class="publish-modal__cover-plus">+</span>
                <span>{{ t("media.publish.coverUpload") }}</span>
              </template>
            </button>

            <button
              v-if="coverAssetUrl"
              type="button"
              class="publish-modal__cover-remove"
              :aria-label="t('article.editor.coverRemove')"
              :title="t('article.editor.coverRemove')"
              @click.stop="handleRemoveCover"
            >
              <MinusCircleFilled />
            </button>
          </div>
        </div>
      </section>
    </div>
  </a-modal>

  <CoverPickerModal
    v-model:open="coverPickerOpen"
    :article-id="detailQuery.data.value?.id ?? null"
    :platform-ids="selectedPlatformIds"
    :current-url="coverAssetUrl"
    :current-file-name="coverFileName"
    :current-asset-id="coverImageAssetId"
    @confirmed="handleCoverPicked"
  />
</template>

<style scoped>
.publish-modal {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.publish-modal__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid #dce6f4;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(30, 64, 175, 0.08), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.publish-modal__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #1d4ed8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.publish-modal__hero h3 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
}

.publish-modal__hero p {
  margin: 10px 0 0;
  color: #526072;
  font-size: 13px;
  line-height: 1.7;
}

.publish-modal__hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  gap: 12px;
  min-width: 300px;
}

.publish-modal__metric {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e5edf8;
}

.publish-modal__metric strong {
  display: block;
  color: #0f172a;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.publish-modal__metric span {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
}

.publish-modal__section {
  display: flex;
  flex-direction: column;
}

.publish-modal__section-header {
  margin-bottom: 12px;
}

.publish-modal__section-header--inline {
  display: flex;
  align-items: center;
  gap: 12px;
}

.publish-modal__section-header h3 {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
}

.publish-modal__section-header--inline h3 {
  margin: 0;
}

.required-star {
  color: #ff4d4f;
  margin-right: 4px;
}

.muted {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.7;
}

.publish-modal__loading {
  padding: 8px 0;
}

.publish-modal__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 6px;
}

/* Custom scrollbar for list */
.publish-modal__list::-webkit-scrollbar {
  width: 6px;
}
.publish-modal__list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.publish-modal__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.publish-modal__list-item:hover:not(.publish-modal__list-item--disabled) {
  border-color: #94a3b8;
  background: #f8fafc;
}

.publish-modal__list-item--active {
  border-color: #355dff;
  background: #f0f4ff;
}

.publish-modal__list-item--disabled {
  cursor: not-allowed;
  opacity: 0.65;
  background: #f8fafc;
}

.publish-modal__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.publish-modal__meta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.publish-modal__check {
  width: 18px;
  height: 18px;
  border: 1px solid #c7d4e5;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  flex-shrink: 0;
}

.publish-modal__list-item--active .publish-modal__check {
  background: #355dff;
  border-color: #355dff;
}

.publish-modal__check-inner {
  width: 7px;
  height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
}

.publish-modal__avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}

.publish-modal__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.publish-modal__identity-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.publish-modal__identity-copy strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.publish-modal__identity-copy span {
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
}

.publish-modal__state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.publish-modal__state-pill--immediate {
  background: #edfdf2;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.publish-modal__state-pill--queued {
  background: #fff7e6;
  color: #b45309;
  border: 1px solid #fef08a;
}

.publish-modal__state-pill--unavailable {
  background: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
}

.publish-modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.publish-modal__cover-body {
  display: flex;
  margin-top: 12px;
}

.publish-modal__cover-preview-wrap {
  position: relative;
  width: 176px;
  flex: 0 0 176px;
}

.publish-modal__cover-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 124px;
  padding: 0;
  border: 1px dashed #d3dceb;
  border-radius: 20px;
  background:
    radial-gradient(circle at top, rgba(70, 102, 255, 0.08), transparent 45%),
    #fbfcff;
  color: #687588;
  font-size: 13px;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.publish-modal__cover-preview:hover {
  border-color: #90a7ff;
  box-shadow: 0 14px 34px rgba(67, 87, 255, 0.12);
  transform: translateY(-1px);
}

.publish-modal__cover-preview img {
  display: block;
  width: 100%;
  height: 124px;
  object-fit: cover;
}

.publish-modal__cover-plus {
  font-size: 24px;
  line-height: 1;
}

.publish-modal__cover-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: rgba(20, 30, 50, 0.68);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.publish-modal__cover-remove:hover {
  background: rgba(20, 30, 50, 0.82);
}

@media (max-width: 900px) {
  .publish-modal__hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .publish-modal__hero-metrics {
    min-width: 0;
  }
}
</style>