/* ===============================
   ベース・変数定義
   =============================== */
:root {
  --bg: #0b0c10;
  --panel: #151820;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #7c93ff;
  --accent-muted: rgba(124,147,255,0.12);
  --border: #232633;
}

/* Light theme overrides applied when `body.theme-light` is set */
body.theme-light {
  --bg: #fffafa; /* very light warm background */
  --panel: #ffffff;
  --text: #0f172a; /* dark text */
  --muted: #8b8592;
  --accent: #ff5cad; /* nokakoi pink accent */
  --accent-muted: rgba(255,92,173,0.08);
  --border: #ffeaf5; /* very pale pink border */
  --accent-focus: rgba(255,92,173,0.2);
}

/* Make native checkbox/radio controls use the theme accent in light mode */
body.theme-light input[type="checkbox"],
body.theme-light input[type="radio"] {
  accent-color: var(--accent);
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  scroll-behavior: auto;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ===============================
   ヘッダー・トップバー
   =============================== */
.topbar {
  position: sticky;
  top: -50px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(11,12,16,.9);
  backdrop-filter: blur(6px);
}
/* light theme: make topbar lighter */
body.theme-light .topbar {
  background: rgba(255, 245, 250, 0.95);
}
.brand { display: flex; align-items: center; gap: 4px; font-weight: 600; }
/* brand uses accent in light theme */
body.theme-light .brand {
  color: var(--accent);
}
.brand-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: contain;
}
.brand-text { font-size: 0.82rem; font-weight: 600; }
.topbar .actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 0;
}

/* ===============================
   レイアウト・パネル
   =============================== */
.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: 220px;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 16px;
  /* subtle panel shadow in light theme */
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}

/* ===============================
   入力・ボタン
   =============================== */
textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 8px;
}
/* Ensure general text inputs and selects follow theme colors (fix postLink inputs staying white in dark theme) */
input[type="text"], input[type="password"], select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}
.modal input[type="text"], .modal input[type="password"] {
  width: 100%; padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-family: inherit;
}
button {
  background: var(--accent);
  color: #0b0c10;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* Primary buttons in light theme (explicit) */
body.theme-light #publishBtn,
body.theme-light #saveRelays,
body.theme-light #reactionSave,
body.theme-light #confirmYes,
body.theme-light #swUpdateYes {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Make interactive controls that were overly pink be muted by default in light theme.
   NOTE: .tab is intentionally excluded so notification blink animation can apply. */
body.theme-light .quick-reaction,
body.theme-light .event-actions-react button,
body.theme-light .event-actions-bottom button,
body.theme-light .actions button,
body.theme-light button.secondary {
  background: var(--panel) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}

/* Keep active tab using accent but slightly toned down */
body.theme-light .tab.active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* Ensure event action buttons (reply/repost) don't show accent color normally */
body.theme-light .event-actions-bottom .btn-reply,
body.theme-light .event-actions-bottom .btn-repost,
body.theme-light .actions .btn-repost,
body.theme-light .actions .btn-reply {
  color: var(--muted) !important;
}

/* Ensure quick-reaction doesn't scale or show accent by default */
body.theme-light .quick-reaction {
  transform: none !important;
  box-shadow: none !important;
}

button.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
button:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.muted { color: var(--muted); font-size: .9em; }

/* Ensure selects and combo boxes match theme */
select, select:focus {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}

/* Prevent iOS Safari from auto-zooming when focusing form controls.
   iOS Safari zooms in on inputs with font-size < 16px. Set 16px on
   inputs/textarea for small screens only to avoid layout changes
   on larger devices. Buttons are excluded to avoid enlarging tab labels.
*/
@media (max-width: 768px) {
  textarea, input[type="text"], input[type="password"], input[type="email"], select {
    font-size: 16px;
  }
  /* Ensure relay list inputs and post-link inputs also use16px even if inline styles exist */
  .relay-item input[type="text"],
  .candidate-item input[type="text"],
  #postLinkTitleInput,
  #postLinkUrlInput,
  #clientNameInput {
    font-size: 16px !important;
  }
}

/* Previously prevented wrapping to avoid tab labels breaking; user prefers wrapping over horizontal scrolling.
   Enable wrapping of the tabs container and allow tab text to wrap within each tab. */
.tabs { flex-wrap: wrap; }
.tab { white-space: normal; word-break: break-word; }
@media (max-width: 420px) {
  .tab { font-size: 0.85rem; padding: 6px 8px; }
}

/* ===============================
   タブ・フィード
   =============================== */
.tabs {
  display: flex;
  gap: 8px;
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 8px 0;
  /* lower z-index so composer (z-index:20) and modals remain above tabs */
  z-index: 10;
  border-bottom: 1px solid var(--border);
}
.tab {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 999px;
}
.tab.active {
  background: var(--accent);
  color: #0b0c10;
  border-color: var(--accent);
}
.feed { display: none; }
.feed.active { display: block; }

/* ===============================
   イベント表示
   =============================== */
.event {
  border-bottom: 1px solid var(--border);
  padding: 12px 4px;
  contain: layout;
}
.event-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.event-name {
  display: flex;
  align-items: center;
  gap: 4px;
}
.event-name .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border);
  flex-shrink: 0;
}
.event-actions-react button {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 4px 8px;
  font-size: 1.1em;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.event-actions-react button:hover {
  color: var(--text);
  background: var(--accent-muted);
}
.event-actions-react .btn-react[data-reacted="true"] {
  color: #fbbf24;
}
.event-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.event-time-kind {
  display: flex;
  align-items: center;
  gap: 8px;
}
.event-time-kind .time {
  font-size: 0.85em;
  color: var(--muted);
}
.event-time-kind .btn-kind {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.75em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  padding: 2px 6px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.event-time-kind .btn-kind:hover {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
  border-color: #fbbf24;
}
.event-actions-bottom {
  display: flex;
  gap: 6px;
}
.event-actions-bottom button {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 4px 8px;
  font-size: 1.1em;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.event-actions-bottom .btn-repost:hover {
  color: #4caf50;
  background: rgba(76, 175, 80, 0.12);
}
.event-actions-bottom .btn-reply:hover {
  color: var(--accent);
  background: var(--accent-muted);
}

/* ===============================
   名前・ユーザー名・PK
   =============================== */
evhead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.name {
  font-weight: 600;
  font-size: 0.95em;
  color: var(--accent);
  cursor: pointer;
  transition: color 0.2s;
}
.name:hover {
  color: #9fb0ff;
  text-decoration: underline;
}
.username {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--muted);
  margin-left: 4px;
}
.pk { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: .8em; color: var(--muted); }
.kind { font-size: .75em; color: var(--muted); margin-left: auto; }

/* ===============================
   投稿・返信・リポスト
   =============================== */
.content {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.3; /* reduced from 1.5 to tighten mixed lines */
  color: var(--text);
  margin-top: 4px;
  padding-left: 2px;
}

/* Icon sizing for reply/repost/reaction */
.icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  display: inline-block;
}
.icon-btn {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  display: inline-block;
}

/* Dark theme: if not in light theme, ensure monochrome (black) icons are visible on dark background by inverting them (no brightness change) */
body:not(.theme-light) img.icon,
body:not(.theme-light) img.icon-btn {
  filter: invert(1);
}

/* Light theme: keep original icon colors */
body.theme-light img.icon,
body.theme-light img.icon-btn {
  filter: none;
}

/* Ensure icon images inside action buttons do not cause large button sizes */
.event-actions-react button img.icon-btn,
.event-actions-bottom button img.icon-btn,
.actions button img.icon-btn {
  width: 18px;
  height: 18px;
  display: inline-block;
}

.reply-to {
  background: rgba(124, 147, 255, 0.1);
  border-left: 3px solid var(--accent);
  padding: 6px 8px;
  margin-bottom: 8px;
  font-size: 0.85em;
  color: var(--muted);
  border-radius: 4px;
}
.reply-to.repost {
  background: rgba(76, 175, 80, 0.1);
  border-left-color: #4caf50;
}
.reply-to-author {
  font-size: 0.9em;
  color: var(--text);
}
.reply-to-content {
  margin-top: 4px;
  font-size: 0.9em;
  opacity: 0.8;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
}
.reply-marker {
  display: inline-block;
  margin-right: 4px;
  color: var(--accent);
  font-size: 1.2em;
}
.repost .reply-marker {
  color: #4caf50;
}
.event[data-kind="7"] .reply-marker {
  font-size: 1.5em;
}

/* ===============================
   アクションボタン
   =============================== */
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.actions button {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 4px 8px;
  font-size: 1.1em;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.actions button:hover {
  color: var(--text);
  background: var(--accent-muted);
}
.actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.actions .btn-repost:hover {
  color: #4caf50;
  background: rgba(76, 175, 80, 0.12);
}
.actions .btn-reply:hover {
  color: var(--accent);
}
.actions .btn-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
}
.actions .btn-json:hover {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
}

/* ===============================
   フッター
   =============================== */
.footer { text-align: center; color: var(--muted); padding: 24px; }

/* ===============================
   投稿欄（下部固定）
   =============================== */
#composer.composer-floating,
#composer.floating {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: min(860px, calc(100% - 16px));
  margin: 0 auto 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-bottom: none;
  border-top-left-radius: 12px; border-top-right-radius: 12px;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px rgba(0,0,0,.5);
  z-index: 20;
  transform: translateY(0);
  transition: transform 0.3s ease-out;
}
#composer.composer-floating h2, #composer.floating h2 { margin: 0 0 6px; font-size: 1rem; }
#composer.composer-floating textarea, #composer.floating textarea { min-height: 80px; max-height: 40vh; resize: vertical; }
#composer.composer-floating .row, #composer.floating .row { justify-content: space-between; }

/* ===============================
   モーダル
   =============================== */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 200; }
.modal[hidden] { display: none; }
.modal-body { width: min(520px, calc(100% - 24px)); max-height: 80vh; overflow-y: auto; }
#swUpdateModal { z-index: 300; background: rgba(0,0,0,.8); }
#swUpdateModal .modal-body { border: 2px solid var(--accent); box-shadow: 0 8px 32px rgba(124, 147, 255, 0.3); }
/* light theme: modal and media container backgrounds */
body.theme-light .modal-body,
body.theme-light #mediaContainer {
  background: #f9fafb !important;
  color: #0f172a !important;
}
body.theme-light #mediaContainer {
  overflow: auto;
  max-width: 100%;
  max-height: 70vh;
  text-align: center;
  scrollbar-width: thin;
  scrollbar-color: #cfcfd6 #f0f0f4; /* thumb track */
}
body.theme-light #mediaContainer::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.theme-light #mediaContainer::-webkit-scrollbar-thumb {
  background: #cfcfd6;
  border-radius: 4px;
}
body.theme-light #mediaContainer::-webkit-scrollbar-track {
  background: #f0f0f4;
}

/* Make modal scrollbars less intrusive in light theme */
body.theme-light #eventModalContent,
body.theme-light #jsonContent,
body.theme-light #profileEvents,
body.theme-light #profileAbout,
body.theme-light #mediaContainer,
body.theme-light .modal-body {
  scrollbar-color: #cfcfd6 #f0f0f4; /* thumb track */
}
body.theme-light #eventModalContent::-webkit-scrollbar,
body.theme-light #jsonContent::-webkit-scrollbar,
body.theme-light #profileEvents::-webkit-scrollbar,
body.theme-light #profileAbout::-webkit-scrollbar,
body.theme-light #mediaContainer::-webkit-scrollbar,
body.theme-light .modal-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.theme-light #eventModalContent::-webkit-scrollbar-thumb,
body.theme-light #jsonContent::-webkit-scrollbar-thumb,
body.theme-light #profileEvents::-webkit-scrollbar-thumb,
body.theme-light #profileAbout::-webkit-scrollbar-thumb,
body.theme-light #mediaContainer::-webkit-scrollbar-thumb,
body.theme-light .modal-body::-webkit-scrollbar-thumb {
  background: #cfcfd6;
  border-radius: 4px;
}
body.theme-light #eventModalContent::-webkit-scrollbar-track,
body.theme-light #jsonContent::-webkit-scrollbar-track,
body.theme-light #profileEvents::-webkit-scrollbar-track,
body.theme-light #profileAbout::-webkit-scrollbar-track,
body.theme-light #mediaContainer::-webkit-scrollbar-track,
body.theme-light .modal-body::-webkit-scrollbar-track {
  background: #f0f0f4;
}

/* Ensure JSON/debug areas follow theme and override inline styles if present */
#jsonContent, #debugContent {
  background: var(--panel) !important;
  color: var(--text) !important;
}

/* ===============================
   ヘッダーボタン
   =============================== */
.topbar button, .topbar .secondary {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.85em;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  transition: all 0.2s;
  white-space: nowrap;
}
.topbar button:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.topbar .secondary {
  background: transparent;
  font-size: 0.8em;
}
.topbar .secondary:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* ===============================
   クイックリアクションボタン
   =============================== */
.quick-reaction {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 1.2em;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.quick-reaction:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.1);
}

/* ===============================
   リレーセレクター・リスト編集
   =============================== */
.relay-selector {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: var(--panel);
}
.relay-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}
.relay-option:hover {
  background: rgba(124, 147, 255, 0.1);
}
.relay-option input[type="radio"] { cursor: pointer; }
.relay-option span { font-size: 0.9em; word-break: break-all; }
.relay-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  background: var(--panel);
  /* allow the flex container to shrink in narrow viewports so children (like inputs) can shrink instead of overflowing */
  min-width: 0;
}
.relay-item input[type="text"] {
  flex: 1;
  /* Match general input styling used in display settings and modals */
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px;
  border-radius: 8px;
  font-size: 0.95em;
  font-family: inherit;
  min-width: 0;
}
/* Make remove button small on narrow screens to avoid overflow */
.relay-item .btn-remove {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 4px 6px;
  font-size: 1.1em;
  cursor: pointer;
  border-radius: 4px;
  flex: 0 0 auto;
}
.relay-item .btn-remove:hover {
  background: rgba(255, 0, 0, 0.2);
  color: #ff4444;
}

/* Make the candidate list items share the same layout and styles as relay-item */
.candidate-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  background: var(--panel);
}
.candidate-item input[type="text"] {
  flex: 1;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px;
  border-radius: 8px;
  font-size: 0.95em;
  font-family: inherit;
}
.btn-remove-cand {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 4px 8px;
  font-size: 1.1em;
  cursor: pointer;
  border-radius: 4px;
}
.btn-remove-cand:hover {
  background: rgba(255, 0, 0, 0.2);
  color: #ff4444;
}

/* ===============================
   メディアリンク・Nostrリンク
   =============================== */
.content a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.content a:hover { border-bottom-color: var(--accent); }
.content a.media-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-weight: 500;
  padding: 2px 0;
}
.content a.media-link:hover { color: #9fb0ff; }
.content a.nostr-link {
  color: #a78bfa;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
  font-weight: 500;
}
.content a.nostr-link:hover {
  color: #c4b5fd;
  border-bottom-color: #a78bfa;
}

/* ===============================
   Nostrイベント引用表示
   =============================== */
.event-quote {
  background: rgba(167, 139, 250, 0.1);
  border-left: 3px solid #a78bfa;
  padding: 8px 10px;
  margin: 8px 0;
  border-radius: 4px;
  font-size: 0.85em;
}
.event-quote-header { margin-bottom: 6px; }
.event-quote-label {
  font-size: 0.9em;
  color: var(--text);
  font-weight: normal;
  cursor: pointer;
  transition: none;
}
.event-quote-label:hover {
  color: var(--text);
  text-decoration: none;
}
.event-quote-content {
  font-size: 0.9em;
  opacity: 0.8;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
}
.nostr-quote {
  display: inline;
  color: var(--muted);
  font-size: 0.85em;
}
.nostr-event-json {
  color: #fbbf24;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  font-size: 0.9em;
  transition: border-color 0.2s;
}
.nostr-event-json:hover {
  border-bottom-color: #fbbf24;
  color: #fcd34d;
}

/* ===============================
   プロフィールモーダル
   =============================== */
#profileModal .modal-body { max-width: 600px; }
#profilePicture { display: block; }
#profilePicture[src=""], #profilePicture:not([src]) { display: none; }
#profileDisplayName { word-break: break-word; }
#profileAbout {
  color: var(--text);
  max-height: 120px;
  overflow-y: auto;
  margin-bottom: 8px;
  border-radius: 6px;
  background: rgba(124, 147, 255, 0.04);
}
#profileAbout:empty { display: none; }
#profileStats { padding-top: 12px; border-top: 1px solid var(--border); }
#profileEvents {
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 8px;
  border-radius: 6px;
  background: rgba(124, 147, 255, 0.04);
}

/* ===============================
   JSONモーダル
   =============================== */
#jsonModal .modal-body { max-width: 800px; }
#jsonContent {
  margin: 0;
  color: var(--text);
  white-space: pre;
  word-wrap: break-word;
  overflow-wrap: break-word;
  scrollbar-width: thin;
  scrollbar-color: #232633 #151820;
}
#jsonContent::-webkit-scrollbar { width: 6px; background: #151820; }
#jsonContent::-webkit-scrollbar-thumb { background: #232633; border-radius: 3px; }
#jsonContent::-webkit-scrollbar-thumb:hover { background: #444b5a; }

/* ===============================
   トップへ戻るボタン
   =============================== */
.scroll-to-top {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-muted);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 1.2em;
  font-weight: normal;
  cursor: move;
  box-shadow: none;
  transition: transform 0.12s, opacity 0.2s;
  z-index: 600; /* raised so it's above composer and other UI */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.scroll-to-top:hover {
  transform: translateX(-50%) scale(1.03);
}
.scroll-to-top:active {
  transform: translateX(-50%) scale(0.95);
}
.scroll-to-top[hidden] {
  opacity: 0;
  pointer-events: none;
}
.scroll-to-top.dragging {
  cursor: grabbing;
  transform: translateX(-50%) scale(1.15);
  box-shadow: 0 8px 20px rgba(124, 147, 255, 0.7);
  opacity: 0.9;
}
.scroll-to-top.dragging {
  transform: scale(1.15) !important;
}
@media (max-width: 768px) {
  .scroll-to-top {
    width: 45px;
    height: 45px;
    font-size: 1.3em;
    bottom: 16px;
  }
}

/* ===============================
   モーダルのZ-index
   =============================== */
#reactionModal, #confirmModal { z-index: 250; }
#eventModal { z-index: 200; }
#profileModal { z-index: 250; }
#jsonModal { z-index: 300; }
/* Ensure media modal is on top of other modals (opened from event detail) */
#mediaModal { z-index: 400; }

#eventModalContent {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #232633 #151820;
}
#eventModalContent::-webkit-scrollbar {
  width: 6px;
  background: #151820;
}
#eventModalContent::-webkit-scrollbar-thumb {
  background: #232633;
  border-radius: 3px;
}
#eventModalContent::-webkit-scrollbar-thumb:hover {
  background: #444b5a;
}

/* ===============================
   投稿・引用内リンク
   =============================== */
.reply-to-content a,
.event-quote-content a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.reply-to-content a:hover,
.event-quote-content a:hover {
  border-bottom-color: var(--accent);
}
.reply-to-content a.media-link,
.event-quote-content a.media-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-weight: 500;
  padding: 2px 0;
}
.reply-to-content a.media-link:hover,
.event-quote-content a.media-link:hover {
  color: #9fb0ff;
}
.reply-to-content a.nostr-link,
.event-quote-content a.nostr-link {
  color: #a78bfa;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
  font-weight: 500;
}
.reply-to-content a.nostr-link:hover,
.event-quote-content a.nostr-link:hover {
  color: #c4b5fd;
  border-bottom-color: #a78bfa;
}

/* ===============================
   画像ビューワ・プロフィールモーダルのスクロールバー
   =============================== */
#mediaContainer {
  overflow: auto;
  max-width: 100%;
  max-height: 70vh;
  text-align: center;
  scrollbar-width: thin;
  scrollbar-color: #232633 #151820;
}
#mediaContainer::-webkit-scrollbar { width: 6px; background: #151820; }
#mediaContainer::-webkit-scrollbar-thumb { background: #232633; border-radius: 3px; }
#mediaContainer::-webkit-scrollbar-thumb:hover { background: #444b5a; }
#mediaContainer img { max-width: 100%; max-height: 100%; display: block; }
#profileEvents, #profileAbout { scrollbar-width: thin; scrollbar-color: #232633 #151820; }
#profileEvents::-webkit-scrollbar, #profileAbout::-webkit-scrollbar { width: 6px; background: #151820; }
#profileEvents::-webkit-scrollbar-thumb, #profileAbout::-webkit-scrollbar-thumb { background: #232633; border-radius: 3px; }
#profileEvents::-webkit-scrollbar-thumb:hover, #profileAbout::-webkit-scrollbar-thumb:hover { background: #444b5a; }

/* ===============================
   画像・動画を開くボタン
   =============================== */
.open-media {
  /* use subdued secondary appearance so button does not draw too much attention */
  background: transparent;
  color: var(--muted);
  font-size: 0.85em;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  margin: 2px 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

/* make open-media button a soft accent outline in light theme */
body.theme-light .open-media {
  /* keep subdued/secondary appearance in light theme too */
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.open-media:hover {
  background: rgba(255,255,255,0.02);
  color: var(--text);
  border-color: var(--border);
}

/* kindボタン（タイムライン・モーダル共通） */
button.btn-kind {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.75em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  padding: 2px 6px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
button.btn-kind:hover {
  color: #fbbf24;
  background: var(--accent-muted);
  border-color: #fbbf24;
}

/* Theme select layout: don't force right alignment */
label > select#themeSelect {
  margin-left: 8px;
}

/* Light-theme adjustments for specific controls */
body.theme-light .open-media {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

/* Debug area scrollbar color in light theme */
body.theme-light #debugContent {
  scrollbar-color: #cfcfd6 #f0f0f4;
}
body.theme.light #debugContent::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body.theme-light #debugContent::-webkit-scrollbar-thumb {
  background: #cfcfd6;
  border-radius: 4px;
}
body.theme-light #debugContent::-webkit-scrollbar-track {
  background: #f0f0f4;
}

/* Debug area scrollbar in dark (default) theme: match other modal content */
#debugContent {
  scrollbar-width: thin;
  scrollbar-color: #232633 #151820;
}
#debugContent::-webkit-scrollbar { width: 6px; background: #151820; }
#debugContent::-webkit-scrollbar-thumb { background: #232633; border-radius: 3px; }
#debugContent::-webkit-scrollbar-thumb:hover { background: #444b5a; }

/* Load-more subdued button: reuse secondary appearance and center it */
.load-more-btn {
  display: inline-block;
  margin: 8px auto;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95em;
}
.load-more-btn:hover {
  background: var(--accent-muted);
  color: var(--text);
  border-color: var(--border);
}

/* center container for feed-bar-like elements */
.feed-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 0;
}
.feed-bar.feed-bar-bottom {
  margin-top: 8px;
}
/* Make secondary small variant used in muted fold expand button */
button.secondary.small {
  padding: 4px 8px;
  font-size: 12px;
}

/* mention blink animation for notification tab */
@keyframes mention-blink {
  0% { background: transparent; color: var(--text); }
  40% { background: var(--accent); color: #0b0c10; }
  60% { background: var(--accent); color: #0b0c10; }
  100% { background: transparent; color: var(--text); }
}

/* Blink only for non-active tabs to avoid overriding active state */
.tab.blink:not(.active) {
  animation: mention-blink 1.2s ease-in-out infinite;
  border-color: var(--accent);
}

/* Allow explicit control via blink-active class (keeps visual on while present) */
.tab.blink-active:not(.active) {
  /* use accent color for light/dark variants */
  box-shadow: 0 0 10px var(--accent, rgba(124,147,255,0.18));
}

/* Default custom emoji larger by default for better visual (unless overridden) */
/* Reset custom emoji baseline: allow context-specific sizing */
.custom-emoji {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding: 0;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  border: none;
  background: transparent;
  width: auto;
  height: auto;
}

/* Inline emoji group: match surrounding text height (no !important) */
.emoji-inline-group img.custom-emoji {
  height: 1.9rem; /* use rem so size is independent of parent font-size */
  max-height: 2.6rem;
  width: auto;
  display: inline-block;
  vertical-align: baseline;
}

/* Prevent huge initial emoji in content and reply boxes before JS sizing runs */
.content img.custom-emoji,
.reply-to img.custom-emoji,
.event-quote img.custom-emoji,
.emoji-line .emoji-wrap img.custom-emoji {
  margin: 0;
  padding: 0;
  display: block;
  vertical-align: middle;
  max-height: 36px;
}

/* Mixed-line: when a line contains both text and custom emoji, keep emoji tiled tight and text restored via .plain-text */
.mixed-line {
  display: inline-flex;
  align-items: center;
  line-height: 1; /* keep normal line height so images are visible */
  font-size: 0.85rem; /* restore readable text size (do not use 0) */
  vertical-align: middle;
  gap: 0;
  margin: 0;
  padding: 0;
}
/* restore text with proper size and vertical centering */
.mixed-line .plain-text {
  font-size: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}
.mixed-line .emoji-inline-group {
  display: inline-flex;
  gap: 0;
  align-items: center;
  vertical-align: middle;
  line-height: 0; /* collapse internal line-height so images tile without extra inline gaps */
}
.mixed-line .emoji-wrap {
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 0;
  vertical-align: middle;
}
/* Ensure inline emoji images align and remain visible */
.mixed-line img.custom-emoji,
.mixed-line .emoji-inline-group img.custom-emoji,
.emoji-line img.custom-emoji,
.emoji-wrap img.custom-emoji {
  display: inline-block; /* keep inline-block so inline measurement works */
  vertical-align: middle;
  line-height: 0;
  height: auto; /* allow JS sizing or intrinsic size */
  max-height: 36px; /* pixel cap so images render even if parent font-size changes */
  width: auto;
  margin: 0;
  padding: 0;
}
/* ensure emoji-only lines still tile tightly */
.emoji-line { line-height: 0; }

/* Ensure reaction buttons' text (including native emoji characters) don't appear larger than surrounding text.
   Use 'inherit' so button text matches context, and force custom-emoji inside reaction buttons to use em-based sizing. */
.btn-react,
.event-actions-react button {
  font-size: inherit !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  padding: 4px 6px !important;
}

/* Keep icon-btn images at their small icon size, but ensure custom emoji inside reaction buttons scale relative to text */
.btn-react img.custom-emoji,
.event-actions-react .btn-react img.custom-emoji,
.actions .btn-react img.custom-emoji {
  height: 1em !important;
  width: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
  max-height: 2.6em !important; /* cap to avoid huge images */
}

/* Also ensure text-only reaction buttons don't get inflated by .event-actions-react default font-size */
.event-actions-react button img.icon-btn { width: 18px; height: 18px; }

/* Reaction / reply-marker sizing: keep reaction markers (★ and inline emoji) same size as surrounding text */
.reply-marker {
  font-size: 1em !important; /* match surrounding text */
  line-height: 1; /* ensure vertical alignment */
  vertical-align: middle;
}
/* Some selectors previously enlarged reaction marker for kind:7 — reset it */
.event[data-kind="7"] .reply-marker {
  font-size: 1em !important;
}
/* Ensure any custom emoji inside reply-marker use em-based sizing to match text */
.reply-marker img.custom-emoji,
.reply-to .reply-marker img.custom-emoji,
.event[data-kind="7"] .reply-marker img.custom-emoji {
  height: 1em !important;
  width: auto !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

/* Also ensure reaction buttons (top-right) show emoji/text at normal size */
.event-actions-react button,
.event-actions-react .btn-react {
  font-size: 1em !important;
}
.event-actions-react button img.custom-emoji {
  height: 1em !important;
  width: auto !important;
}

/* Make quick-reaction slightly smaller on very narrow screens to avoid overflow */
@media (max-width: 420px) {
  .quick-reaction { font-size: 1.05em; padding: 6px 10px; min-width: 40px; height: 40px; }
}

/* end of stylesheet */