:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #1a1a1a);
  --hint: var(--tg-theme-hint-color, #8a8a8a);
  --accent: var(--tg-theme-button-color, #2481cc);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --field: var(--tg-theme-secondary-bg-color, #f4f4f5);

  --privacy-community: #7c6df0;
  --privacy-close: #d97a4a;
  --privacy-private: #5a5a5a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--field);
  z-index: 10;
}

.tabs {
  display: flex;
}

.tab {
  flex: 1;
  background: transparent;
  color: var(--hint);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 14px 0;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border-radius: 0;
}

.tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

main {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel[hidden] { display: none; }

/* The Communities and My-facts tabs nest two sub-views inside the panel.
   The outer .panel only has one direct flex child at a time, so its gap
   can't space the header/status/list — re-establish flex+gap inside each
   wrapper. #community-invite-section piggy-backs on this rule so the
   hint, input row, and Replace button get the same 12px rhythm as the
   rest of the detail view. */
#communities-list-view,
#community-detail-view,
#list-view,
#fact-detail-view,
#friends-list-view,
#friend-detail-view,
#friend-shared-communities,
#community-invite-section,
#community-invite-active {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Adds 6px on top of the parent's 12px flex gap so the visual gap
   between the row-actions links above and the "Shared communities"
   title below is ~1.5x the standard 12px rhythm. */
#friend-shared-communities {
  margin-top: 6px;
}

#communities-list-view[hidden],
#community-detail-view[hidden],
#list-view[hidden],
#fact-detail-view[hidden],
#friends-list-view[hidden],
#friend-detail-view[hidden],
#community-invite-section[hidden],
#community-invite-active[hidden] { display: none; }

.privacy-selector {
  display: flex;
  gap: 4px;
  background: var(--field);
  padding: 4px;
  border-radius: 999px;
}

.privacy-option {
  flex: 1;
  padding: 6px 8px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--hint);
  cursor: pointer;
  transition: background 120ms, color 120ms;
  white-space: nowrap;
}

.privacy-option.is-selected { color: #ffffff; }
.privacy-option.is-selected[data-value="All"]        { background: var(--accent); color: var(--accent-text); }
.privacy-option.is-selected[data-value="Community"]  { background: var(--privacy-community); }
.privacy-option.is-selected[data-value="Close ones"] { background: var(--privacy-close); }
.privacy-option.is-selected[data-value="Private"]    { background: var(--privacy-private); }
.privacy-option:disabled { opacity: 0.6; cursor: default; }

.facts-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.facts-filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hint);
}

.facts-filter-chip {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--field);
  background: transparent;
  color: var(--hint);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  white-space: nowrap;
}

.facts-filter-chip.is-active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
}

.privacy-descriptions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--hint);
  font-size: 13px;
  line-height: 1.4;
}

.privacy-descriptions strong {
  color: var(--text);
  font-weight: 600;
}

.fact-detail-body {
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

#fact-detail-deactivate {
  align-self: flex-start;
  margin-top: 16px;
}

/* Without align-self, the .link-btn would stretch to fill the invite
   section's flex column and its centered text would look centered.
   Pull it back to its natural width so it sits flush left, matching
   the link-style appearance elsewhere. */
#community-invite-replace {
  align-self: flex-start;
}

label {
  font-weight: 600;
  font-size: 17px;
}

.hint {
  color: var(--hint);
  font-size: 14px;
  margin: 0;
}

.members-subtitle {
  margin-top: 12px;
  font-weight: 500;
}

textarea {
  flex: 1;
  min-height: 180px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  resize: none;
  outline: none;
}

textarea:focus {
  border-color: var(--accent);
}

.counter {
  color: var(--hint);
  font-size: 13px;
  text-align: right;
  margin: 0;
}

button {
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.error {
  color: #d33;
  font-size: 14px;
  margin: 0;
  min-height: 1em;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.list-header h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.list-header-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.link-btn {
  background: transparent;
  color: var(--accent);
  padding: 4px 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  width: auto;
}

.list-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fact-row {
  background: var(--field);
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  word-wrap: break-word;
  white-space: pre-wrap;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fact-row-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.fact-row-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fact-type-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--hint);
  line-height: 1.2;
}

.fact-type-label.is-pending {
  font-style: italic;
  opacity: 0.7;
}

.pill {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.pill-privacy-community  { background: var(--privacy-community); color: #ffffff; }
.pill-privacy-close-ones { background: var(--privacy-close);     color: #ffffff; }
.pill-privacy-private    { background: var(--privacy-private);   color: #ffffff; }

.pill-member-count { flex: 0 0 auto; background: var(--bg);     color: var(--hint); }
.pill-close-friend { flex: 0 0 auto; background: var(--accent); color: #ffffff;    }
.pill-admin        { flex: 0 0 auto; background: var(--accent); color: #ffffff;    }

.community-row {
  background: var(--field);
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.community-name {
  font-weight: 500;
  word-wrap: break-word;
  min-width: 0;
}

.row-left {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}

.row-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 0 0 auto;
}

.friend-link {
  background: transparent;
  color: var(--accent);
  padding: 0;
  border: none;
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  width: auto;
  word-wrap: break-word;
  min-width: 0;
}

.add-friend {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.add-friend input {
  flex: 1;
  min-width: 0;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  outline: none;
}

.add-friend input:focus {
  border-color: var(--accent);
}

.add-friend button {
  flex: 0 0 auto;
  padding: 12px 16px;
}