<script lang="ts">
  import { onMount } from 'svelte';
  import Modal from '../components/Modal.svelte';
  import {
    app,
    applyLinkResult,
    confirmDeleteAccount,
    handleError,
    logout,
    refreshProfile,
    requestDeleteAccount,
    showToast,
  } from '../lib/app.svelte';
  import { GatewayError } from '../lib/client';
  import { connection } from '../lib/connection.svelte';
  import { gateway } from '../lib/gateway';
  import { insideTelegram, loginWidgetAvailable, requestTelegramLogin } from '../lib/telegram';
  import { insideVK } from '../lib/vk';
  import { kickDictPreload } from '../lib/offline.svelte';
  import { startVKLink, vkWebLinkAvailable } from '../lib/vkid';
  import { t } from '../lib/i18n/index.svelte';
  import {
    awayDurationOk,
    awayHours,
    awayMinutes,
    browserOffset,
    isOffsetZone,
    timezoneOffsets,
    validDisplayName,
    validEmail,
  } from '../lib/profileValidation';
  import { ALL_VARIANTS, VARIANT_RULES } from '../lib/variants';
  import type { Variant } from '../lib/model';

  let dn = $state('');
  let tz = $state('+00:00');
  // Away start/end as hour + 10-minute parts, so the picker is a <select> like every
  // other profile control (consistent native control across iOS / desktop).
  let startH = $state('00');
  let startM = $state('00');
  let endH = $state('07');
  let endM = $state('00');
  let blockChat = $state(false);
  let blockFriendRequests = $state(false);
  let notificationsInAppOnly = $state(true);
  let variantPrefs = $state<Variant[]>([]);
  let emailInput = $state('');
  let codeInput = $state('');
  let emailSent = $state(false);
  // A pending irreversible merge surfaced after the code/widget was verified; the
  // dialog confirms it. tgData holds the Telegram widget payload for the merge step.
  let pendingMerge = $state<null | { kind: 'email' | 'telegram' | 'vk'; name: string; games: number; friends: number }>(null);
  let tgData = '';
  // The change-email sub-form is open (a new address is being entered/confirmed).
  let changingEmail = $state(false);
  // A pending unlink awaiting the confirmation dialog (email is never unlinked).
  let confirmUnlink = $state<null | { kind: 'telegram' | 'vk'; label: string }>(null);
  // The account-deletion step-up dialog: null when closed, else the required proof method.
  let deleting = $state<null | { method: 'email' | 'phrase' }>(null);
  let deleteCode = $state('');
  let deletePhrase = $state('');
  const telegramLinkable = loginWidgetAvailable();
  const vkLinkable = vkWebLinkAvailable();
  // Inside a host Mini App the current platform's own identity must not be managed from the
  // profile — unlinking the very platform you are signed in through is meaningless — so that
  // provider's linked-account row is hidden here (the web / native builds still show both).
  const hostTelegram = insideTelegram();
  const hostVK = insideVK();

  function defaultTz(): string {
    const b = browserOffset();
    return timezoneOffsets.includes(b) ? b : '+00:00';
  }
  function splitTime(hhmm: string): [string, string] {
    const m = /^(\d{2}):(\d{2})$/.exec(hhmm);
    if (!m) return ['00', '00'];
    return [m[1], awayMinutes.includes(m[2]) ? m[2] : '00'];
  }

  // populate loads the editable form from the current profile. The profile screen is
  // edited inline (no edit/cancel toggle), so this runs on mount and after a
  // link/merge swaps the active account.
  function populate() {
    const p = app.profile;
    if (!p) return;
    dn = p.displayName;
    tz = isOffsetZone(p.timeZone) && timezoneOffsets.includes(p.timeZone) ? p.timeZone : defaultTz();
    [startH, startM] = splitTime(p.awayStart);
    [endH, endM] = splitTime(p.awayEnd);
    blockChat = p.blockChat;
    blockFriendRequests = p.blockFriendRequests;
    notificationsInAppOnly = p.notificationsInAppOnly;
    variantPrefs = [...p.variantPreferences];
  }
  onMount(() => {
    populate();
    // A VK ID web-link callback captured on boot (app.vkLinkPending) is finished here, since
    // the redirect back from VK lost the in-app route and lands the app on a fresh mount.
    if (app.vkLinkPending) void processVKLink();
  });

  const awayStart = $derived(`${startH}:${startM}`);
  const awayEnd = $derived(`${endH}:${endM}`);
  const nameOk = $derived(validDisplayName(dn));
  const awayOk = $derived(awayDurationOk(awayStart, awayEnd));
  const formValid = $derived(nameOk && awayOk && variantPrefs.length >= 1);
  const emailOk = $derived(validEmail(emailInput));
  // Count the account's confirmed sign-in methods, to hide an Unlink that would remove the
  // last identity (the backend also refuses it — this is a UX guard, not the enforcement).
  const linkedCount = $derived(
    app.profile
      ? (app.profile.email ? 1 : 0) + (app.profile.telegramLinked ? 1 : 0) + (app.profile.vkLinked ? 1 : 0)
      : 0,
  );
  const canUnlink = $derived(linkedCount >= 2);

  // While an add-email confirmation is pending, the address may be confirmed out of band — the
  // one-tap link in the email confirms in another browser/session. A backgrounded Mini App drops
  // the single-shot live stream and misses the 'profile' event (there is no replay), so poll the
  // profile as a fallback until the address lands; the live push still updates it instantly while
  // the app stays foregrounded. Scoped to the add-email wait (a code sent, no email yet).
  const awaitingEmailConfirm = $derived(emailSent && !app.profile?.email);
  $effect(() => {
    if (!awaitingEmailConfirm) return;
    const poll = (): void => void refreshProfile();
    const id = setInterval(poll, 4000);
    // Re-check the moment the Mini App returns to the foreground, where the missed event landed.
    const onVisible = (): void => {
      if (document.visibilityState === 'visible') poll();
    };
    document.addEventListener('visibilitychange', onVisible);
    return () => {
      clearInterval(id);
      document.removeEventListener('visibilitychange', onVisible);
    };
  });

  // toggleVariant flips a variant in the preference set, refusing to remove the last one —
  // the player must allow themselves at least one variant.
  function toggleVariant(id: Variant) {
    if (variantPrefs.includes(id)) {
      if (variantPrefs.length > 1) variantPrefs = variantPrefs.filter((v) => v !== id);
    } else {
      variantPrefs = [...variantPrefs, id];
    }
  }

  async function save() {
    if (!formValid) return;
    try {
      app.profile = await gateway.profileUpdate({
        displayName: dn.trim(),
        preferredLanguage: app.profile!.preferredLanguage, // language lives in Settings
        timeZone: tz,
        awayStart,
        awayEnd,
        blockChat,
        blockFriendRequests,
        notificationsInAppOnly,
        variantPreferences: variantPrefs,
      });
      // A variant-preference change may enable a variant whose dictionary is not yet cached; warm
      // it in the background for offline readiness (quietly — no in-lobby notice for a top-up).
      kickDictPreload(app.profile, false);
      showToast(t('profile.saved'));
    } catch (e) {
      handleError(e);
    }
  }

  function resetEmail() {
    emailSent = false;
    emailInput = '';
    codeInput = '';
  }

  async function requestEmail() {
    if (!emailOk) return;
    try {
      await gateway.linkEmailRequest(emailInput.trim());
      emailSent = true;
      showToast(t('profile.emailSent', { email: emailInput.trim() }));
    } catch (e) {
      handleError(e);
    }
  }

  async function confirmEmail() {
    try {
      const r = await gateway.linkEmailConfirm(emailInput.trim(), codeInput.trim());
      if (r.status === 'merge_required') {
        pendingMerge = { kind: 'email', name: r.secondaryDisplayName, games: r.secondaryGames, friends: r.secondaryFriends };
        return;
      }
      await applyLinkResult(r);
      populate();
      resetEmail();
      showToast(t('profile.linked'));
    } catch (e) {
      handleError(e);
    }
  }

  async function linkTelegram() {
    try {
      const data = await requestTelegramLogin();
      if (!data) return;
      const r = await gateway.linkTelegram(data);
      if (r.status === 'merge_required') {
        tgData = data;
        pendingMerge = { kind: 'telegram', name: r.secondaryDisplayName, games: r.secondaryGames, friends: r.secondaryFriends };
        return;
      }
      await applyLinkResult(r);
      populate();
      showToast(t('profile.linked'));
    } catch (e) {
      handleError(e);
    }
  }

  // addVK starts VK ID web login for linking: it redirects the whole tab to VK's hosted login,
  // returning to the app with an auth code that boot hands back to processVKLink.
  function addVK() {
    void startVKLink('link');
  }

  // processVKLink finishes a VK ID web-link callback captured on boot: it exchanges the code via
  // the gateway and either completes the link or opens the merge dialog. VK's authorization code
  // is single-use, so a required merge re-authorizes for a fresh code (see confirmMerge); that
  // returning 'merge' callback lands back here and completes.
  async function processVKLink() {
    const cb = app.vkLinkPending;
    app.vkLinkPending = null;
    if (!cb) return;
    try {
      if (cb.mode === 'merge') {
        await applyLinkResult(await gateway.linkVKMerge(cb.code, cb.deviceId, cb.verifier));
        populate();
        showToast(t('profile.merged'));
        return;
      }
      const r = await gateway.linkVK(cb.code, cb.deviceId, cb.verifier);
      if (r.status === 'merge_required') {
        pendingMerge = { kind: 'vk', name: r.secondaryDisplayName, games: r.secondaryGames, friends: r.secondaryFriends };
        return;
      }
      await applyLinkResult(r);
      populate();
      showToast(t('profile.linked'));
    } catch (e) {
      handleError(e);
    }
  }

  async function confirmMerge() {
    if (!pendingMerge) return;
    // A VK merge cannot reuse VK's single-use authorization code, so it re-authorizes for a fresh
    // one; the returning callback completes it (processVKLink). Email/Telegram re-send their proof.
    if (pendingMerge.kind === 'vk') {
      void startVKLink('merge');
      return;
    }
    try {
      const r =
        pendingMerge.kind === 'email'
          ? await gateway.linkEmailMerge(emailInput.trim(), codeInput.trim())
          : await gateway.linkTelegramMerge(tgData);
      await applyLinkResult(r);
      populate();
      pendingMerge = null;
      tgData = '';
      resetEmail();
      showToast(t('profile.merged'));
    } catch (e) {
      handleError(e);
    }
  }

  // startChangeEmail opens the change-email sub-form on a clean slate (a new address then a
  // code), independent of any half-finished add-email attempt.
  function startChangeEmail() {
    changingEmail = true;
    emailSent = false;
    emailInput = '';
    codeInput = '';
  }

  async function requestChangeEmail() {
    if (!emailOk) return;
    try {
      await gateway.changeEmailRequest(emailInput.trim());
      emailSent = true;
      showToast(t('profile.emailSent', { email: emailInput.trim() }));
    } catch (e) {
      handleError(e);
    }
  }

  async function confirmChangeEmail() {
    try {
      const r = await gateway.changeEmailConfirm(emailInput.trim(), codeInput.trim());
      await applyLinkResult(r);
      populate();
      changingEmail = false;
      resetEmail();
      showToast(t('profile.emailChanged'));
    } catch (e) {
      // A new address confirmed by another account is refused without disclosing it.
      if (e instanceof GatewayError && e.code === 'email_taken') {
        showToast(t('profile.emailChangeTaken'), 'error');
        return;
      }
      handleError(e);
    }
  }

  async function unlink(kind: 'telegram' | 'vk') {
    confirmUnlink = null;
    try {
      const r = await gateway.linkUnlink(kind);
      await applyLinkResult(r);
      populate();
      showToast(t('profile.unlinked'));
    } catch (e) {
      handleError(e);
    }
  }

  // startDelete opens the deletion dialog, asking the backend which step-up the account uses
  // (a mailed code for an email account, or a typed phrase for a platform-only one).
  async function startDelete() {
    try {
      const method = await requestDeleteAccount();
      deleteCode = '';
      deletePhrase = '';
      deleting = { method };
    } catch (e) {
      handleError(e);
    }
  }

  async function doDelete() {
    if (!deleting) return;
    try {
      // On success the app swaps to the terminal "account deleted" screen (app.accountDeleted).
      await confirmDeleteAccount(deleteCode.trim(), deletePhrase.trim());
    } catch (e) {
      handleError(e);
    }
  }
</script>

<div class="page">
  {#if app.profile}
    {@const p = app.profile}
    <div class="name">{p.displayName}</div>
    {#if p.isGuest}<span class="badge">{t('profile.guest')}</span>{/if}

    {#if p.isGuest}
      <p class="muted">{t('profile.guestLocked')}</p>
    {:else}
      <form class="edit" onsubmit={(e) => { e.preventDefault(); void save(); }}>
        <label>
          <span>{t('profile.displayName')}</span>
          <input class:invalid={!nameOk} bind:value={dn} maxlength="40" />
        </label>
        <label>
          <span>{t('profile.timezone')}</span>
          <select bind:value={tz}>
            {#each timezoneOffsets as o (o)}<option value={o}>{o}</option>{/each}
          </select>
        </label>
        <fieldset class="away" class:invalid={!awayOk}>
          <legend>{t('profile.awayWindow')}</legend>
          <div class="times">
            <span class="tlabel">{t('profile.from')}</span>
            <select bind:value={startH}>{#each awayHours as h (h)}<option>{h}</option>{/each}</select>
            <span class="colon">:</span>
            <select bind:value={startM}>{#each awayMinutes as m (m)}<option>{m}</option>{/each}</select>
          </div>
          <div class="times">
            <span class="tlabel">{t('profile.to')}</span>
            <select bind:value={endH}>{#each awayHours as h (h)}<option>{h}</option>{/each}</select>
            <span class="colon">:</span>
            <select bind:value={endM}>{#each awayMinutes as m (m)}<option>{m}</option>{/each}</select>
          </div>
          <p class="muted">{t('profile.awayHint')}</p>
        </fieldset>
        <label class="check">
          <input type="checkbox" bind:checked={blockChat} />
          <span>{t('profile.blockChat')}</span>
        </label>
        <label class="check">
          <input type="checkbox" bind:checked={blockFriendRequests} />
          <span>{t('profile.blockFriendRequests')}</span>
        </label>
        <label class="check">
          <input type="checkbox" bind:checked={notificationsInAppOnly} />
          <span>{t('profile.notificationsInAppOnly')}</span>
        </label>
        <fieldset class="prefs">
          <legend>{t('profile.preferences')}</legend>
          <p class="muted">{t('profile.preferencesHint')}</p>
          {#each ALL_VARIANTS as v (v.id)}
            <label class="check pref">
              <input
                type="checkbox"
                checked={variantPrefs.includes(v.id)}
                disabled={variantPrefs.length === 1 && variantPrefs.includes(v.id)}
                onchange={() => toggleVariant(v.id)}
              />
              <span class="pname">{t(v.label)}</span>
              <span class="prule">{t(VARIANT_RULES[v.id])}</span>
            </label>
          {/each}
        </fieldset>
        <div class="formacts">
          <button type="submit" class="btn" disabled={!formValid || !connection.online}>{t('common.save')}</button>
        </div>
      </form>
    {/if}

    <!-- Sign-in methods: bind/change an email and link/unlink providers. A returning email
         (add) triggers the merge dialog below. On the web an account can add Telegram via the
         login widget or VK via VK ID web login (a full-page redirect); inside a Mini App the
         host provider is already linked, so its own row is hidden — the platform you are signed
         in through cannot be unlinked from here (the other provider's row still shows). Email is
         never unlinked — it is changed. Unlink is offered only when another identity remains
         (the backend also refuses the last one). -->
    <section class="accounts">
      <h3>{t('profile.accountsTitle')}</h3>

      {#if p.email}
        <div class="acctrow">
          <span class="prov"><span class="ic">✉️</span>{p.email}</span>
          {#if !changingEmail}
            <button class="ghost" onclick={startChangeEmail} disabled={!connection.online}>{t('profile.changeEmail')}</button>
          {/if}
        </div>
        {#if changingEmail}
          {#if !emailSent}
            <div class="addrow">
              <input
                class:invalid={emailInput.length > 0 && !emailOk}
                bind:value={emailInput}
                placeholder={t('profile.newEmailPlaceholder')}
                type="email"
              />
              <button class="ghost" onclick={requestChangeEmail} disabled={!emailOk || !connection.online}>{t('login.sendCode')}</button>
            </div>
          {:else}
            <div class="addrow">
              <input class="codein" bind:value={codeInput} placeholder={t('profile.emailCode')} inputmode="numeric" maxlength="6" />
              <button class="btn" onclick={confirmChangeEmail} disabled={!connection.online}>{t('common.ok')}</button>
            </div>
          {/if}
          <button class="linklike" onclick={() => { changingEmail = false; resetEmail(); }}>{t('common.cancel')}</button>
        {/if}
      {:else if !emailSent}
        <div class="addrow">
          <input
            class:invalid={emailInput.length > 0 && !emailOk}
            bind:value={emailInput}
            placeholder={t('login.emailPlaceholder')}
            type="email"
          />
          <button class="ghost" onclick={requestEmail} disabled={!emailOk || !connection.online}>{t('login.sendCode')}</button>
        </div>
      {:else}
        <div class="addrow">
          <input class="codein" bind:value={codeInput} placeholder={t('profile.emailCode')} inputmode="numeric" maxlength="6" />
          <button class="btn" onclick={confirmEmail} disabled={!connection.online}>{t('common.ok')}</button>
        </div>
      {/if}

      {#if p.telegramLinked && !hostTelegram}
        <div class="acctrow">
          <span class="prov"><img src="telegram-logo.svg" alt="" width="18" height="18" />Telegram</span>
          {#if canUnlink}
            <button class="ghost danger" onclick={() => (confirmUnlink = { kind: 'telegram', label: 'Telegram' })} disabled={!connection.online}>{t('profile.unlink')}</button>
          {/if}
        </div>
      {:else if telegramLinkable}
        <button class="ghost tg" onclick={linkTelegram} disabled={!connection.online}>
          <img src="telegram-logo.svg" alt="" width="18" height="18" />{t('profile.linkTelegram')}
        </button>
      {/if}

      {#if p.vkLinked && !hostVK}
        <div class="acctrow">
          <span class="prov"><img src="vk-logo.svg" alt="" width="18" height="18" />VK</span>
          {#if canUnlink}
            <button class="ghost danger" onclick={() => (confirmUnlink = { kind: 'vk', label: 'VK' })} disabled={!connection.online}>{t('profile.unlink')}</button>
          {/if}
        </div>
      {:else if vkLinkable}
        <button class="ghost tg" onclick={addVK} disabled={!connection.online}>
          <img src="vk-logo.svg" alt="" width="18" height="18" />{t('profile.linkVK')}
        </button>
      {/if}
    </section>

    {#if !p.isGuest}
      <button class="deletebtn" onclick={startDelete} disabled={!connection.online}>{t('profile.deleteAccount')}</button>
    {/if}

    <!-- Logout is hidden for now but kept wired — drop `hidden` to re-enable
         once its entry point is decided; logout() also still runs on an invalid session. -->
    <button class="logout" hidden onclick={() => logout()}>{t('login.title')} / logout</button>
  {/if}
</div>

{#if pendingMerge}
  <Modal title={t('profile.mergeTitle')} onclose={() => (pendingMerge = null)}>
    <p>{t('profile.mergeBody', { name: pendingMerge.name, games: pendingMerge.games, friends: pendingMerge.friends })}</p>
    <p class="warn">{t('profile.mergeIrreversible')}</p>
    <div class="addrow end">
      <button class="ghost" onclick={() => (pendingMerge = null)}>{t('common.cancel')}</button>
      <button class="btn" onclick={confirmMerge} disabled={!connection.online}>{t('profile.mergeConfirm')}</button>
    </div>
  </Modal>
{/if}

{#if confirmUnlink}
  {@const cu = confirmUnlink}
  <Modal title={t('profile.unlinkTitle')} onclose={() => (confirmUnlink = null)}>
    <p>{t('profile.unlinkBody', { provider: cu.label })}</p>
    <div class="addrow end">
      <button class="ghost" onclick={() => (confirmUnlink = null)}>{t('common.cancel')}</button>
      <button class="btn danger" onclick={() => unlink(cu.kind)} disabled={!connection.online}>{t('profile.unlink')}</button>
    </div>
  </Modal>
{/if}

{#if deleting}
  {@const d = deleting}
  <Modal title={t('profile.deleteTitle')} onclose={() => (deleting = null)}>
    <p class="warn">{t('profile.deleteWarn')}</p>
    {#if d.method === 'email'}
      <p class="muted">{t('profile.deleteEmailPrompt')}</p>
      <div class="addrow">
        <input class="codein" bind:value={deleteCode} placeholder={t('profile.emailCode')} inputmode="numeric" maxlength="6" />
      </div>
    {:else}
      <p class="muted">{t('profile.deletePhrasePrompt')}</p>
      <div class="addrow">
        <input bind:value={deletePhrase} placeholder={t('profile.deletePhrasePlaceholder')} autocapitalize="characters" />
      </div>
    {/if}
    <div class="addrow end">
      <button class="ghost" onclick={() => (deleting = null)}>{t('common.cancel')}</button>
      <button class="btn danger" onclick={doDelete} disabled={!connection.online}>{t('profile.deleteConfirm')}</button>
    </div>
  </Modal>
{/if}

<style>
  .page {
    padding: var(--pad);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .name {
    font-size: 1.4rem;
    font-weight: 700;
  }
  .badge {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.8rem;
  }
  .muted {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
  }
  .edit {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .edit > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9rem;
    color: var(--text-muted);
  }
  .edit input:not([type='checkbox']),
  .edit select {
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
  }
  .invalid {
    border-color: var(--danger, #c0392b) !important;
  }
  .away {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .away legend {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 0 4px;
  }
  .times {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .tlabel {
    min-width: 2.5em;
    color: var(--text-muted);
    font-size: 0.85rem;
  }
  .colon {
    font-weight: 700;
  }
  .check {
    flex-direction: row !important;
    align-items: center;
    gap: 10px !important;
    color: var(--text) !important;
  }
  .prefs {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .prefs legend {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 0 4px;
  }
  .pref {
    align-items: baseline;
  }
  .pname {
    font-weight: 600;
  }
  .prule {
    color: var(--text-muted);
    font-size: 0.8rem;
  }
  .formacts {
    display: flex;
    gap: 10px;
  }
  .btn:disabled {
    opacity: 0.5;
  }
  .accounts {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .accounts h3 {
    margin: 0 0 2px;
    font-size: 0.95rem;
    color: var(--text-muted);
  }
  .acctrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }
  .prov {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .prov .ic {
    width: 18px;
    text-align: center;
  }
  .tg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
  }
  .ghost.danger {
    border-color: var(--danger, #c0392b);
    color: var(--danger, #c0392b);
  }
  .btn.danger {
    background: var(--danger, #c0392b);
    border-color: var(--danger, #c0392b);
    color: #fff;
  }
  .linklike {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 2px 0;
    color: var(--text-muted);
    text-decoration: underline;
    font-size: 0.85rem;
    cursor: pointer;
  }
  .addrow {
    display: flex;
    gap: 8px;
  }
  /* When a button row sits below its own field (the change-email and delete dialogs),
     separate them and keep the actions right-aligned. */
  .addrow.end {
    margin-top: 14px;
    justify-content: flex-end;
  }
  .addrow input {
    flex: 1;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
  }
  .addrow input.codein {
    letter-spacing: 0.3em;
    font-size: 1.1rem;
  }
  .btn {
    align-self: flex-start;
    padding: 9px 14px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-text);
    border-radius: var(--radius-sm);
  }
  .ghost {
    padding: 9px 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
  }
  .ghost:disabled {
    opacity: 0.5;
  }
  .deletebtn {
    margin-top: 8px;
    align-self: flex-start;
    padding: 8px 14px;
    border: 1px solid var(--danger, #c0392b);
    background: transparent;
    color: var(--danger, #c0392b);
    border-radius: var(--radius-sm);
  }
  .deletebtn:disabled {
    opacity: 0.5;
  }
  .logout {
    margin-top: 8px;
    align-self: flex-start;
    padding: 8px 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
  }
</style>
