<script setup lang="ts">
// Subscription & invoices. Real data: the plan hero (plan, seats, spend,
// renewal), billing details (tenant.billingInfo) and the invoice history
// (/api/tenants/:slug/invoices) all come from platform-api.
//
// No real source yet → shown as "coming soon": the stored payment method
// (Stripe doesn't expose it to platform-api). Plan-change, pause and add-seats
// still toast-stub their mutations — subscription writes are operator-only, so
// a customer admin can't commit them yet. Figures shown are the real numbers.

import type { InvoiceDoc, PaymentMethodCard, TenantUserDoc } from '~/types/workspace'

const toast = useToast()
const { request } = useApiFetch()

const { fetchMe } = useMe()
await fetchMe()
const { tenant, subscription, planLabel, currency, seatLimit, perSeatMonthly, monthlySpend, renewsAt } = useTenant()
const slug = computed(() => tenant.value?.slug ?? '')

const { data: users } = await useFetch<TenantUserDoc[]>(
  () => `/api/tenants/${slug.value}/users`,
  { key: 'billing-users', default: () => [], immediate: !!slug.value, watch: [slug] },
)
const { data: invoices } = await useFetch<InvoiceDoc[]>(
  () => `/api/tenants/${slug.value}/invoices`,
  { key: 'billing-invoices', default: () => [], immediate: !!slug.value, watch: [slug] },
)
const { data: paymentMethod } = await useFetch<PaymentMethodCard | null>(
  () => `/api/tenants/${slug.value}/payment-method`,
  { key: 'billing-pm', default: () => null, immediate: !!slug.value, watch: [slug] },
)

const pmOpen = ref(false)
function onCardSaved(card: PaymentMethodCard | null) {
  paymentMethod.value = card
  toast.ok('Payment method updated')
}

// ── Edit billing details ─────────────────────────────────────────────────
const detailsOpen = ref(false)
const savingDetails = ref(false)
const det = reactive({ companyName: '', vatId: '', country: '', contactEmail: '' })
function openDetails() {
  const b = billingInfo.value
  det.companyName = b.companyName ?? ''
  det.vatId = b.vatId ?? ''
  det.country = b.country ?? ''
  det.contactEmail = b.contactEmail ?? ''
  detailsOpen.value = true
}
async function saveDetails() {
  savingDetails.value = true
  try {
    await request(`/api/tenants/${slug.value}/billing-info`, { method: 'PATCH', body: { ...det } })
    await fetchMe(true) // refresh cached /me so the displayed billingInfo updates
    detailsOpen.value = false
    toast.ok('Billing details saved')
  } catch (e: unknown) {
    const msg = (e as { data?: { message?: string } })?.data?.message
    toast.bad('Could not save billing details', Array.isArray(msg) ? msg.join(', ') : msg)
  } finally {
    savingDetails.value = false
  }
}
function pmExpiry(c: PaymentMethodCard): string {
  return `${String(c.expMonth).padStart(2, '0')}/${c.expYear}`
}

const seatsUsed = computed(() => (users.value ?? []).filter((u) => u.active !== false).length)
const billingInfo = computed(() => tenant.value?.billingInfo ?? {})

const moneyFmt = computed(
  () => new Intl.NumberFormat('da-DK', { style: 'currency', currency: currency.value, maximumFractionDigits: 0 }),
)
function fmtDate(d: Date | null, opts: Intl.DateTimeFormatOptions = { day: '2-digit', month: 'short', year: 'numeric' }): string {
  return d ? d.toLocaleDateString('da-DK', opts) : '—'
}
const cycleLabel = computed(() => {
  const c = subscription.value?.cycle
  return c === 'quarterly' ? 'quarterly' : c === 'yearly' ? 'yearly' : 'monthly'
})

// Invoice amounts carry their own currency and are in minor units.
function fmtMinor(minor: number, cur: string): string {
  return new Intl.NumberFormat('da-DK', { style: 'currency', currency: cur, maximumFractionDigits: 0 }).format(
    Math.round(minor / 100),
  )
}
function invDate(inv: InvoiceDoc): string {
  const iso = inv.periodStart ?? inv.createdAt
  return iso ? new Date(iso).toLocaleDateString('da-DK', { day: '2-digit', month: 'short', year: 'numeric' }) : '—'
}
const invStatusTone = (s: string): 'ok' | 'warn' | 'bad' | 'neutral' =>
  s === 'paid' ? 'ok' : s === 'past_due' || s === 'uncollectible' ? 'bad' : s === 'void' ? 'neutral' : 'warn'

// ── Action modals (mutations not wired — stubs) ──────────────────────────
const seatsOpen = ref(false)
const pauseOpen = ref(false)
const planOpen = ref(false)

// Add-seats math, fed by the real subscription. perSeatMonthly is already
// cycle-normalized + in major units.
const extra = ref(5)
const pricePerSeat = computed(() => perSeatMonthly.value)
const daysUntilRenewal = computed(() => {
  if (!renewsAt.value) return 30
  return Math.max(0, Math.round((renewsAt.value.getTime() - Date.now()) / 86_400_000))
})
const totalSeats = computed(() => seatLimit.value + extra.value)
const monthly = computed(() => extra.value * pricePerSeat.value)
const prorated = computed(() => Math.round(monthly.value * (daysUntilRenewal.value / 30)))
function quickSet(n: number) { extra.value = n }

function exportInvoices(format: 'OIOUBL' | 'CSV') {
  toast.info(`Exporting invoices as ${format}…`, format === 'OIOUBL' ? 'B2B · Nemhandel' : 'comma-separated · UTF-8')
}
function openInvoice(inv: InvoiceDoc) {
  if (inv.pdfUrl || inv.hostedInvoiceUrl) {
    window.open(inv.pdfUrl ?? inv.hostedInvoiceUrl, '_blank', 'noopener')
  } else {
    toast.info('Invoice document not available yet', inv.number ?? '')
  }
}
function confirmPause() {
  pauseOpen.value = false
  toast.ok('Subscription paused', renewsAt.value ? `Resumes on ${fmtDate(renewsAt.value)}` : undefined)
}
</script>

<template>
  <div>
    <PageHeader
      eyebrow="Billing"
      title="Subscription & invoices"
      subtitle="Manage your plan, payment method, and tax-compliant invoices."
    />

    <div class="content">
      <div class="top-row">
        <!-- Hero plan card -->
        <Card :pad="0">
          <div class="hero">
            <div class="hero-head">
              <div>
                <div class="kicker">// current plan</div>
                <div class="hero-title">{{ planLabel }}</div>
                <div class="hero-sub">{{ seatLimit }} seats · invoiced {{ cycleLabel }}</div>
              </div>
              <Badge tone="accent">{{ renewsAt ? `Renews ${fmtDate(renewsAt)}` : (subscription?.status ?? '—') }}</Badge>
            </div>
            <div class="hero-stats">
              <div><div class="hero-label">Seats used</div><div class="hero-num">{{ seatsUsed }} / {{ seatLimit }}</div></div>
              <div><div class="hero-label">Per month</div><div class="hero-num">{{ moneyFmt.format(monthlySpend) }}</div></div>
              <div><div class="hero-label">Next invoice</div><div class="hero-num">{{ fmtDate(renewsAt, { day: '2-digit', month: 'short' }) }}</div></div>
            </div>
          </div>
          <div class="hero-actions">
            <UiButton variant="primary" @click="planOpen = true">Change plan</UiButton>
            <UiButton variant="secondary" @click="seatsOpen = true">Add seats</UiButton>
            <div class="spacer" />
            <UiButton variant="ghost" @click="pauseOpen = true">Pause subscription</UiButton>
          </div>
        </Card>

        <!-- Payment (coming soon) + business details (real) -->
        <Card>
          <div class="card-head">
            <div>
              <Eyebrow>Payment</Eyebrow>
              <div class="card-title">Payment method</div>
            </div>
            <UiButton size="sm" variant="ghost" @click="pmOpen = true">{{ paymentMethod ? 'Update' : 'Add card' }}</UiButton>
          </div>
          <div v-if="paymentMethod" class="pm-row">
            <div class="pm-chip">{{ paymentMethod.brand.toUpperCase() }}</div>
            <div class="pm-meta">
              <div class="pm-num">•••• •••• •••• {{ paymentMethod.last4 }}</div>
              <div class="pm-sub">Expires {{ pmExpiry(paymentMethod) }}</div>
            </div>
          </div>
          <div v-else class="soon-box">
            <UiIcon name="card" :size="16" stroke="var(--text-mute)" />
            <div>No card on file. Add one to pay invoices automatically — handled securely by Stripe.</div>
          </div>

          <div class="card-head">
            <div>
              <Eyebrow>Business</Eyebrow>
              <div class="card-title">Billing details</div>
            </div>
            <UiButton size="sm" variant="ghost" @click="openDetails">Edit</UiButton>
          </div>
          <dl class="def">
            <div><dt>Company</dt><dd>{{ billingInfo.companyName || tenant?.name || '—' }}</dd></div>
            <div><dt>VAT</dt><dd>{{ billingInfo.vatId || '—' }}</dd></div>
            <div><dt>Country</dt><dd>{{ billingInfo.country || '—' }}</dd></div>
            <div><dt>Invoice email</dt><dd>{{ billingInfo.contactEmail || '—' }}</dd></div>
            <div><dt>Currency</dt><dd>{{ currency }}</dd></div>
          </dl>
        </Card>
      </div>

      <!-- Invoices table -->
      <Card :pad="0">
        <div class="invoices-head">
          <div>
            <Eyebrow>History</Eyebrow>
            <div class="card-title">Invoices</div>
          </div>
          <div class="invoices-actions">
            <UiButton size="sm" variant="secondary" :disabled="invoices.length === 0" @click="exportInvoices('OIOUBL')">OIOUBL (B2B)</UiButton>
            <UiButton size="sm" variant="secondary" :disabled="invoices.length === 0" @click="exportInvoices('CSV')">CSV</UiButton>
          </div>
        </div>
        <table class="inv-table">
          <thead>
            <tr>
              <th>Invoice</th><th>Date</th><th>Amount</th><th>Status</th><th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="inv in invoices" :key="inv._id">
              <td><Mono>{{ inv.number || inv._id.slice(-8) }}</Mono></td>
              <td>{{ invDate(inv) }}</td>
              <td><span class="amount">{{ fmtMinor(inv.amountDue, inv.currency) }}</span></td>
              <td><Badge :tone="invStatusTone(inv.status)" dot>{{ inv.status }}</Badge></td>
              <td class="right">
                <UiButton size="sm" variant="ghost" @click="openInvoice(inv)"><template #leading><UiIcon name="external" :size="13" /></template>View</UiButton>
              </td>
            </tr>
            <tr v-if="invoices.length === 0" class="no-hover">
              <td colspan="5" class="empty-row">
                <Mono dim>No invoices yet. They'll appear here after your first billing cycle.</Mono>
              </td>
            </tr>
          </tbody>
        </table>
      </Card>
    </div>

    <!-- Pause subscription confirmation -->
    <ConfirmDialog
      :open="pauseOpen"
      eyebrow="Billing · subscription"
      title="Pause subscription?"
      confirm-label="Pause subscription"
      tone="danger"
      @close="pauseOpen = false"
      @confirm="confirmPause"
    >
      Members keep access until the end of the current billing cycle{{ renewsAt ? ` (${fmtDate(renewsAt)})` : '' }}, after
      which sign-ins are blocked and data is held in cold storage. You can resume any time
      to restore full access.
    </ConfirmDialog>

    <!-- Plan-change flow stub -->
    <Modal :open="planOpen" eyebrow="Billing · plan" title="Change plan" size="md" @close="planOpen = false">
      <div class="plan-stack">
        <div class="lead">Pick a new tier. We'll prorate the difference and apply it on your next invoice.</div>
        <div class="plan-options">
          <button v-for="p in [
            { id: 'mvp',        name: 'Starter',    d: 'Mail · Drev · 50 GB', current: planLabel === 'Starter' },
            { id: 'pro',        name: 'Business',   d: 'Everything in Starter + Møder + Chat · 200 GB', current: planLabel === 'Business' },
            { id: 'enterprise', name: 'Enterprise', d: 'SSO contracts · audit log retention · 1 TB', current: planLabel === 'Enterprise' },
          ]" :key="p.id" :class="['plan-card', { active: p.current }]">
            <div class="plan-name">{{ p.name }}{{ p.current ? ' · current' : '' }}</div>
            <div class="plan-d">{{ p.d }}</div>
          </button>
        </div>
      </div>
      <template #footer>
        <UiButton variant="ghost" @click="planOpen = false">Cancel</UiButton>
        <UiButton variant="primary" @click="planOpen = false; toast.ok('Plan change scheduled', 'Takes effect on next invoice')">
          <template #leading><UiIcon name="check" :size="13" /></template>
          Schedule change
        </UiButton>
      </template>
    </Modal>

    <!-- Add seats modal -->
    <Modal :open="seatsOpen" eyebrow="Billing · seats" title="Add seats" size="md" @close="seatsOpen = false">
      <div class="seats">
        <div class="seats-3col">
          <div><Eyebrow>Active users</Eyebrow><div class="big">{{ seatsUsed }}</div></div>
          <div><Eyebrow>Current seats</Eyebrow><div class="big">{{ seatLimit }}</div></div>
          <div><Eyebrow>After change</Eyebrow><div class="big ok">{{ totalSeats }}</div></div>
        </div>

        <div>
          <Eyebrow>How many seats to add</Eyebrow>
          <div class="stepper">
            <button class="step-btn" @click="extra = Math.max(1, extra - 1)"><span class="minus" /></button>
            <input type="number" :value="extra" @input="(e) => (extra = Math.max(1, Math.min(500, parseInt((e.target as HTMLInputElement).value || '0') || 1)))" />
            <button class="step-btn" @click="extra = Math.min(500, extra + 1)"><UiIcon name="plus" :size="14" /></button>
          </div>
          <div class="presets">
            <button v-for="n in [5, 10, 25, 50]" :key="n" :class="{ active: extra === n }" @click="quickSet(n)">+{{ n }}</button>
          </div>
        </div>

        <div class="bill-box">
          <Eyebrow>What you'll pay</Eyebrow>
          <div class="bb-row"><span>{{ extra }} new seat{{ extra === 1 ? '' : 's' }} × {{ moneyFmt.format(pricePerSeat) }} / month</span><Mono>{{ moneyFmt.format(monthly) }} / mo</Mono></div>
          <div class="bb-row sep"><span class="dim">Prorated for current cycle ({{ daysUntilRenewal }} days until renewal)</span><Mono dim>{{ moneyFmt.format(prorated) }}</Mono></div>
          <div class="bb-row total"><span>Charged today</span><span class="hero-amount">{{ moneyFmt.format(prorated) }}</span></div>
          <div class="bb-row"><span class="dim"><template v-if="renewsAt">Next invoice on {{ fmtDate(renewsAt) }}</template><template v-else>Next invoice</template></span><Mono dim>{{ moneyFmt.format(monthlySpend + monthly) }}</Mono></div>
        </div>

        <div class="trust">
          <UiIcon name="card" :size="14" stroke="var(--text-mute)" />
          <div>Seats are added instantly — invitations can be sent right away.</div>
        </div>
      </div>
      <template #footer>
        <UiButton variant="ghost" @click="seatsOpen = false">Cancel</UiButton>
        <UiButton variant="primary" @click="seatsOpen = false; toast.ok(`${extra} seats added · charged ${moneyFmt.format(prorated)}`)">
          <template #leading><UiIcon name="plus" :size="13" /></template>
          Add {{ extra }} seat{{ extra === 1 ? '' : 's' }}
        </UiButton>
      </template>
    </Modal>

    <!-- Update payment method (Stripe Elements) -->
    <PaymentMethodModal :open="pmOpen" :slug="slug" @close="pmOpen = false" @saved="onCardSaved" />

    <!-- Edit billing details -->
    <Modal :open="detailsOpen" eyebrow="Billing · business details" title="Edit billing details" size="md" @close="detailsOpen = false">
      <div class="form-stack">
        <label class="field"><Eyebrow>Company name</Eyebrow><input class="input" v-model="det.companyName" placeholder="Baslund ApS" /></label>
        <label class="field"><Eyebrow>VAT / CVR number</Eyebrow><input class="input" v-model="det.vatId" placeholder="DK12345678" /></label>
        <label class="field"><Eyebrow>Country</Eyebrow><CountrySelect v-model="det.country" placeholder="Select country" /></label>
        <label class="field"><Eyebrow>Invoice email</Eyebrow><input class="input" v-model="det.contactEmail" placeholder="billing@company.com" /></label>
        <div class="note">
          <Mono dim>// VAT</Mono>
          <div class="note-body">For Danish customers the CVR + VAT must match. EU B2B customers outside Denmark are reverse-charged (we won't add VAT; you self-account).</div>
        </div>
      </div>
      <template #footer>
        <UiButton variant="ghost" @click="detailsOpen = false">Cancel</UiButton>
        <UiButton variant="primary" :disabled="savingDetails" @click="saveDetails">
          <template #leading><UiIcon name="check" :size="13" /></template>
          {{ savingDetails ? 'Saving…' : 'Save details' }}
        </UiButton>
      </template>
    </Modal>
  </div>
</template>

<style scoped>
.content { padding: 24px 40px 64px 40px; max-width: 1200px; }
.top-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 16px; }

/* Hero plan card */
.hero { padding: 28px; background: var(--text); color: var(--bg); border-radius: 8px 8px 0 0; }
.hero-head { display: flex; justify-content: space-between; align-items: flex-start; }
.kicker { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.1em; }
.hero-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-top: 10px;
}
.hero-sub { font-size: 13px; opacity: 0.6; margin-top: 4px; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-label { font-family: var(--font-mono); font-size: 10px; opacity: 0.5; letter-spacing: 0.12em; text-transform: uppercase; }
.hero-num { font-family: var(--font-display); font-size: 28px; font-weight: 600; margin-top: 6px; }
.hero-actions { padding: 24px; display: flex; gap: 8px; align-items: center; }
.spacer { flex: 1; }

/* Payment + business sub-cards inside one Card */
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head + .card-head { margin-top: 16px; }
.card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.soon-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  background: var(--bg);
  border: 1px dashed var(--border-hi, var(--border));
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

.pm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg);
  border-radius: 6px;
  margin-bottom: 16px;
}
.pm-chip {
  height: 28px;
  min-width: 44px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--text);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.pm-meta { flex: 1; }
.pm-num { font-family: var(--font-mono); font-size: 13px; }
.pm-sub { font-size: 11px; color: var(--text-mute); margin-top: 2px; }

.def { margin: 0; display: grid; grid-template-columns: 140px 1fr; row-gap: 12px; column-gap: 16px; }
.def > div { display: contents; }
.def dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.def dd { margin: 0; font-size: 13px; color: var(--text); }

/* Invoices table */
.invoices-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.invoices-actions { display: flex; gap: 8px; }
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.inv-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.inv-table tr:last-child td { border-bottom: none; }
.inv-table .right { text-align: right; display: flex; gap: 6px; justify-content: flex-end; }
.inv-table tr.no-hover td { cursor: default; }
.amount { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.empty-row { text-align: center; padding: 40px 16px; }

.trust {
  padding: 12px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* Add seats */
.seats { display: flex; flex-direction: column; gap: 18px; }
.seats-3col {
  padding: 16px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.seats-3col > div { padding: 0 12px; border-right: 1px solid var(--border); }
.seats-3col > div:first-child { padding-left: 0; }
.seats-3col > div:last-child { padding-right: 0; border-right: none; }
.big { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin-top: 4px; }
.big.ok { color: var(--ok); }
.stepper { display: flex; align-items: center; gap: 12px; margin: 12px 0 10px; }
.step-btn { width: 36px; height: 36px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.step-btn .minus { width: 12px; height: 2px; background: var(--text); display: block; }
.stepper input {
  flex: 1;
  height: 56px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  outline: none;
}
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.presets button { padding: 4px 10px; border-radius: 4px; cursor: pointer; background: var(--surface); color: var(--text); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; }
.presets button.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.bill-box { padding: 16px; background: var(--surface); border-radius: 8px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.bb-row { display: flex; justify-content: space-between; font-size: 13px; align-items: baseline; }
.bb-row.sep { padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.bb-row.total { font-weight: 600; }
.bb-row .dim { color: var(--text-mute); }
.hero-amount { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; }

/* Plan-change modal */
.plan-stack { display: flex; flex-direction: column; gap: 14px; }
.lead { font-size: 13px; color: var(--text-mute); line-height: 1.55; }
.plan-options { display: flex; flex-direction: column; gap: 8px; }
.plan-card {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.plan-card.active { border-color: var(--text); background: var(--bg); }
.plan-name { font-size: 14px; font-weight: 500; }
.plan-d { font-size: 12px; color: var(--text-mute); margin-top: 6px; }

/* Edit billing details modal */
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.input { height: 36px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 13px; color: var(--text); outline: none; }
.input:focus { border-color: var(--text); }
.note { padding: 12px; background: var(--bg); border-radius: 6px; border: 1px solid var(--border); font-size: 12px; color: var(--text-dim); line-height: 1.55; }
.note-body { margin-top: 6px; }
</style>
