/* =========================================================================
   FKweb Social — Camada 4: Componentes
   Peças reutilizáveis, independentes de página. Só consomem tokens.
   -------------------------------------------------------------------------
   1. Superfícies (cartão)          6. Selos
   2. Botões                        7. Alertas e mensagens
   3. Ações em pílula               8. Menus suspensos
   4. Campos de formulário          9. Carregamento
   5. Avatares                     10. Lightbox e sugestões
   ========================================================================= */

/* =========================================================================
   1. SUPERFÍCIES
   ========================================================================= */
.fk-card,
.fk-welcome,
.fk-composer,
.perfil-hero,
.perfil-bio,
.perfil-galeria-wrap,
.galeria-hero,
.galeria-upload,
.busca-form,
.auth-card,
.fk-card-form,
.pop-panel,
.post,
.user-card,
.trend-item,
.config-item {
  background: var(--fk-surface);
  border: 1px solid var(--fk-border);
  border-radius: var(--fk-radius-card);
  box-shadow: var(--fk-shadow-xs);
}

.fk-card { padding: var(--fk-space-6); }

/* =========================================================================
   2. BOTÕES
   ========================================================================= */

/* Primário em pílula — "Publicar", "Buscar", "Adicionar" */
.fkode-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fk-space-2);
  padding: 9px var(--fk-space-6);
  border: 1px solid var(--fk-accent-strong);
  border-radius: var(--fk-radius-chip);
  background: var(--fk-accent-strong);
  color: var(--fk-accent-contrast) !important;
  font-family: var(--fk-font-sans);
  font-size: var(--fk-ui-sm);
  font-weight: var(--fk-weight-semibold);
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none !important;
  transition:
    background-color var(--fk-duration-fast) var(--fk-ease),
    border-color var(--fk-duration-fast) var(--fk-ease),
    transform var(--fk-duration-fast) var(--fk-ease),
    box-shadow var(--fk-duration-fast) var(--fk-ease);
}
.fkode-button:hover {
  background: var(--fk-accent-strong-hover);
  border-color: var(--fk-accent-strong-hover);
  color: var(--fk-accent-contrast) !important;
}
.fkode-button:active { transform: translateY(1px); }
.fkode-button svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.fkode-button:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); }
.fkode-button[disabled] { opacity: .5; pointer-events: none; }

/* Secundário — contorno */
.fkode-button--ghost {
  background: transparent;
  border-color: var(--fk-border-strong);
  color: var(--fk-text) !important;
}
.fkode-button--ghost:hover {
  background: var(--fk-surface-inset);
  border-color: var(--fk-accent);
  color: var(--fk-text-brand) !important;
}

/* Botão de formulário em bloco — "Entrar", "Cadastrar", "Salvar" */
.fkweb-form > .button,
.fkweb-form .button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fk-space-3);
  padding: var(--fk-space-4) var(--fk-space-6);
  border: 1px solid var(--fk-accent-strong);
  border-radius: var(--fk-radius-field);
  background: var(--fk-accent-strong);
  color: var(--fk-accent-contrast);
  font-family: var(--fk-font-sans);
  font-size: var(--fk-ui-base);
  font-weight: var(--fk-weight-semibold);
  line-height: 1.3;
  transition:
    background-color var(--fk-duration-fast) var(--fk-ease),
    border-color var(--fk-duration-fast) var(--fk-ease),
    transform var(--fk-duration-fast) var(--fk-ease);
}
.fkweb-form > .button:hover,
.fkweb-form .button:hover { background: var(--fk-accent-strong-hover); border-color: var(--fk-accent-strong-hover); }
.fkweb-form > .button:active,
.fkweb-form .button:active { transform: translateY(1px); }
.fkweb-form .button:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); }

.auth-btn-full { width: 100%; justify-content: center; }

/* Botão destrutivo */
.button--perigo {
  background: var(--fk-danger-solid) !important;
  border-color: var(--fk-danger-solid) !important;
  color: var(--fk-danger-contrast) !important;
}
.button--perigo:hover { filter: brightness(.92); }

/* =========================================================================
   3. AÇÕES EM PÍLULA
   Curtir, responder, amigo/inimigo, anexar imagem. Mesma anatomia:
   contorno discreto, preenchimento suave no hover, cor só quando ativo.
   ========================================================================= */
.like-btn,
.resp-like-btn,
.reply-button,
.rel-btn,
.composer-img-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--fk-space-2);
  padding: 5px var(--fk-space-4);
  border: 1px solid var(--fk-border);
  border-radius: var(--fk-radius-chip);
  background: transparent;
  color: var(--fk-text-muted);
  font-family: var(--fk-font-sans);
  font-size: var(--fk-ui-sm);
  font-weight: var(--fk-weight-medium);
  line-height: 1.4;
  white-space: nowrap;
  user-select: none;
  transition:
    background-color var(--fk-duration-fast) var(--fk-ease),
    border-color var(--fk-duration-fast) var(--fk-ease),
    color var(--fk-duration-fast) var(--fk-ease);
}
.like-btn:hover,
.resp-like-btn:hover,
.reply-button:hover,
.composer-img-btn:hover {
  border-color: var(--fk-border-strong);
  background: var(--fk-surface-inset);
  color: var(--fk-text);
}
.like-btn:focus-visible,
.resp-like-btn:focus-visible,
.reply-button:focus-visible,
.rel-btn:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); }

.like-icon { font-size: var(--fk-ui-base); line-height: 1; }
.resp-like-btn .like-icon { font-size: var(--fk-ui-sm); }
.like-count { font-size: var(--fk-ui-xs); font-weight: var(--fk-weight-semibold); min-width: 8px; text-align: center; }

/* Curtir */
.like-btn:hover, .resp-like-btn:hover { border-color: var(--fk-danger); color: var(--fk-danger); }
.like-btn--ativo {
  border-color: var(--fk-danger);
  background: var(--fk-danger-bg);
  color: var(--fk-danger);
}
.like-btn--ativo .like-icon { display: inline-block; animation: fk-pop var(--fk-duration-slow) var(--fk-ease-spring); }
.like-btn:disabled, .resp-like-btn:disabled { opacity: .55; cursor: default; }

/* Responder */
.reply-button:hover,
.reply-button.reply-open {
  border-color: var(--fk-accent);
  background: var(--fk-accent-tint);
  color: var(--fk-text-brand);
}
.reply-button--link { text-decoration: none !important; color: var(--fk-text-muted) !important; }
.reply-button--link:hover { color: var(--fk-text-brand) !important; }
.reply-count { font-size: var(--fk-ui-xs); font-weight: var(--fk-weight-semibold); opacity: .8; }

/* Amigo / inimigo — discretos até você escolher um lado */
.rel-wrap {
  display: inline-flex;
  gap: var(--fk-space-2);
  align-items: center;
  margin-left: var(--fk-space-2);
  vertical-align: middle;
}
.rel-btn {
  padding: 2px var(--fk-space-3);
  font-size: var(--fk-ui-sm);
  color: var(--fk-text-subtle);
  opacity: .7;
}
.rel-btn:hover { opacity: 1; border-color: var(--fk-border-strong); background: var(--fk-surface-inset); }
.rel-cnt { font-size: var(--fk-ui-2xs); font-weight: var(--fk-weight-semibold); min-width: 8px; text-align: center; }

.rel-btn--amigo.rel-btn--ativo {
  opacity: 1;
  background: var(--fk-success-bg);
  border-color: var(--fk-success);
  color: var(--fk-success);
}
.rel-btn--inimigo.rel-btn--ativo {
  opacity: 1;
  background: var(--fk-danger-bg);
  border-color: var(--fk-danger);
  color: var(--fk-danger);
}

/* Ações terciárias — só texto */
.delete-button,
.reply-to-response,
.clear-quote {
  display: inline-flex;
  align-items: center;
  gap: var(--fk-space-2);
  padding: 3px var(--fk-space-3);
  border-radius: var(--fk-radius-chip);
  font-family: var(--fk-font-sans);
  font-size: var(--fk-ui-xs);
  color: var(--fk-text-subtle);
  transition: color var(--fk-duration-fast) var(--fk-ease), background-color var(--fk-duration-fast) var(--fk-ease);
}
.delete-button:hover { color: var(--fk-danger); background: var(--fk-danger-bg); }
.reply-to-response:hover { color: var(--fk-text-brand); background: var(--fk-accent-tint); }
.clear-quote { font-size: var(--fk-ui-md); line-height: 1; padding: 0 var(--fk-space-1); }
.clear-quote:hover { color: var(--fk-danger); }

/* Controle segmentado — abas do feed */
.feed-tabs {
  display: flex;
  gap: var(--fk-space-1);
  padding: var(--fk-space-1);
  margin-bottom: var(--fk-space-5);
  background: var(--fk-surface-inset);
  border: 1px solid var(--fk-border);
  border-radius: var(--fk-radius-chip);
}
.feed-tab {
  flex: 1;
  padding: 8px var(--fk-space-3);
  border: 0;
  border-radius: var(--fk-radius-chip);
  background: transparent;
  color: var(--fk-text-muted);
  font-family: var(--fk-font-sans);
  font-size: var(--fk-ui-sm);
  font-weight: var(--fk-weight-medium);
  text-align: center;
  transition:
    background-color var(--fk-duration-fast) var(--fk-ease),
    color var(--fk-duration-fast) var(--fk-ease),
    box-shadow var(--fk-duration-fast) var(--fk-ease);
}
.feed-tab:hover { color: var(--fk-text); }
.feed-tab--ativo {
  background: var(--fk-surface);
  color: var(--fk-text);
  font-weight: var(--fk-weight-semibold);
  box-shadow: var(--fk-shadow-xs);
}
.feed-tab--ativo:hover { color: var(--fk-text); }

/* =========================================================================
   4. CAMPOS DE FORMULÁRIO
   ========================================================================= */
.fkweb-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-5);
  color: var(--fk-text);
}

.fkweb-form > label {
  display: flex;
  flex-direction: column;
  gap: var(--fk-space-2);
  font-size: var(--fk-ui-sm);
  font-weight: var(--fk-weight-semibold);
  color: var(--fk-text);
}
.fkweb-form label small {
  font-weight: var(--fk-weight-regular);
  color: var(--fk-text-subtle);
}

.fkweb-form > label > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.fkweb-form .input-password-wrap > input,
.fkweb-form textarea,
.fkweb-form select,
.busca-input,
.adm-search,
.galeria-upload input[name="legenda"] {
  width: 100%;
  min-height: 42px;
  padding: var(--fk-space-4) var(--fk-space-5);
  border: 1px solid var(--fk-border-strong);
  border-radius: var(--fk-radius-field);
  background: var(--fk-surface);
  color: var(--fk-text);
  font-family: var(--fk-font-sans);
  font-size: var(--fk-ui-base);
  font-weight: var(--fk-weight-regular);
  line-height: var(--fk-leading-normal);
  transition:
    border-color var(--fk-duration-fast) var(--fk-ease),
    box-shadow var(--fk-duration-fast) var(--fk-ease),
    background-color var(--fk-duration-fast) var(--fk-ease);
}
.fkweb-form textarea { min-height: 84px; resize: vertical; }

.fkweb-form > label > input::placeholder,
.fkweb-form textarea::placeholder,
.busca-input::placeholder,
.adm-search::placeholder { color: var(--fk-text-subtle); }

/* Tira a decoração nativa do campo de busca (webkit) */
.busca-input { -webkit-appearance: none; appearance: none; }
.busca-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.fkweb-form > label > input:focus,
.fkweb-form .input-password-wrap > input:focus,
.fkweb-form textarea:focus,
.fkweb-form select:focus,
.busca-input:focus,
.adm-search:focus,
.galeria-upload input[name="legenda"]:focus {
  outline: none;
  border-color: var(--fk-accent);
  box-shadow: var(--fk-focus-ring);
}

/* Campo de arquivo — contorno tracejado, como uma área de soltar */
.fkweb-form input[type="file"] {
  width: 100%;
  min-height: auto;
  padding: var(--fk-space-3);
  border: 1px dashed var(--fk-border-strong);
  border-radius: var(--fk-radius-field);
  background: var(--fk-surface-inset);
  font-size: var(--fk-ui-sm);
  color: var(--fk-text-muted);
}
.fkweb-form input[type="file"]::file-selector-button {
  margin-right: var(--fk-space-4);
  padding: var(--fk-space-3) var(--fk-space-5);
  border: 1px solid var(--fk-border-strong);
  border-radius: var(--fk-radius-field);
  background: var(--fk-surface-inset);
  color: var(--fk-text);
  font-family: var(--fk-font-sans);
  font-size: var(--fk-ui-sm);
  font-weight: var(--fk-weight-semibold);
  cursor: pointer;
  transition: background-color var(--fk-duration-fast) var(--fk-ease), border-color var(--fk-duration-fast) var(--fk-ease);
}
.fkweb-form input[type="file"]::file-selector-button:hover {
  background: var(--fk-accent-tint);
  border-color: var(--fk-accent);
}

/* Senha com botão de olho */
.input-password-wrap { position: relative; width: 100%; }
.input-password-wrap input { padding-right: 46px; }
.input-password-toggle {
  position: absolute;
  right: var(--fk-space-4);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: var(--fk-space-1);
  border-radius: var(--fk-radius-sm);
  opacity: .45;
  transition: opacity var(--fk-duration-fast) var(--fk-ease);
}
.input-password-toggle:hover { opacity: 1; }

/* Caixa de seleção */
.fkweb-form__checkbox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--fk-space-3);
  font-size: var(--fk-ui-sm);
  font-weight: var(--fk-weight-regular);
  line-height: var(--fk-leading-normal);
  color: var(--fk-text-muted);
  cursor: pointer;
}
.fkweb-form__checkbox input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-height: auto;
  margin-top: 2px;
  accent-color: var(--fk-accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* =========================================================================
   5. AVATARES
   ========================================================================= */
.profile-pic,
.profile-pic-large,
.profile-pic--sm,
.fk-welcome__avatar,
.perfil-avatar,
.avatar-edit__img,
.pop-user__avatar,
.user-card__avatar,
.fkweb-notif__avatar,
.hash-context__avatar {
  border-radius: var(--fk-radius-full);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--fk-surface-inset);
  box-shadow: 0 0 0 1px var(--fk-avatar-ring);
}

.profile-pic        { width: 44px; height: 44px; }
.profile-pic-large  { width: 56px; height: 56px; }
.profile-pic--sm    { width: 32px; height: 32px; }
.fk-welcome__avatar { width: 56px; height: 56px; }
.perfil-avatar      { width: 88px; height: 88px; box-shadow: 0 0 0 3px var(--fk-surface), 0 0 0 4px var(--fk-avatar-ring); }
.avatar-edit__img   { width: 76px; height: 76px; }
.pop-user__avatar   { width: 36px; height: 36px; }
.user-card__avatar  { width: 48px; height: 48px; }
.fkweb-notif__avatar{ width: 36px; height: 36px; }
.hash-context__avatar { width: 18px; height: 18px; box-shadow: none; }

.post-avatar-link { flex-shrink: 0; display: block; }

/* =========================================================================
   6. SELOS
   ========================================================================= */
.fkweb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fk-space-2);
  padding: 2px var(--fk-space-3);
  border: 1px solid transparent;
  border-radius: var(--fk-radius-chip);
  background: var(--fk-surface-inset);
  color: var(--fk-text-muted);
  font-size: var(--fk-ui-xs);
  font-weight: var(--fk-weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
}
.fkweb-badge small { font-size: var(--fk-ui-2xs); font-weight: var(--fk-weight-regular); opacity: .8; }
.fkweb-badge--amigo   { background: var(--fk-success-bg); border-color: var(--fk-success-line); color: var(--fk-success); }
.fkweb-badge--inimigo { background: var(--fk-danger-bg);  border-color: var(--fk-danger-line);  color: var(--fk-danger); }
.fkweb-badge-inline { display: inline; vertical-align: middle; }

.fk-badge-slot { display: inline-flex; align-items: center; }
.fk-badge-slot .fkweb-badge { font-size: var(--fk-ui-xs); padding: 1px var(--fk-space-3); }

/* Hashtag no corpo do texto */
.fkweb-hashtag {
  color: var(--fk-text-brand) !important;
  font-weight: var(--fk-weight-semibold);
  text-decoration: none !important;
}
.fkweb-hashtag:hover { color: var(--fk-text-brand-hover) !important; text-decoration: underline !important; }
.fk-mencao { font-weight: var(--fk-weight-semibold); }

/* =========================================================================
   7. ALERTAS E MENSAGENS
   ========================================================================= */
.fk-flash,
.fkweb-error {
  display: flex;
  align-items: flex-start;
  gap: var(--fk-space-3);
  padding: var(--fk-space-4) var(--fk-space-5);
  border: 1px solid transparent;
  border-left-width: 3px;
  border-radius: var(--fk-radius-field);
  font-size: var(--fk-ui-sm);
  line-height: var(--fk-leading-normal);
  margin-bottom: var(--fk-space-5);
}
.fk-flash--erro,
.fkweb-error {
  background: var(--fk-danger-bg);
  border-color: var(--fk-danger-line);
  border-left-color: var(--fk-danger);
  color: var(--fk-danger);
}
.fk-flash--ok {
  background: var(--fk-success-bg);
  border-color: var(--fk-success-line);
  border-left-color: var(--fk-success);
  color: var(--fk-success);
}
.fk-flash a { color: inherit; text-decoration: underline; }

.char-counter--limite { color: var(--fk-danger) !important; font-weight: var(--fk-weight-semibold); }

/* =========================================================================
   8. MENUS SUSPENSOS
   ========================================================================= */
.fk-menu { position: relative; }

.fk-menu__btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  align-items: center;
  border-radius: var(--fk-radius-field);
  color: var(--fk-text-muted);
  transition: background-color var(--fk-duration-fast) var(--fk-ease), color var(--fk-duration-fast) var(--fk-ease);
}
.fk-menu__btn:hover { background: var(--fk-surface-inset); color: var(--fk-text); }
.fk-menu__btn span {
  display: block;
  width: 17px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--fk-duration-normal) var(--fk-ease), opacity var(--fk-duration-fast) var(--fk-ease);
}
.fk-menu__btn.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.fk-menu__btn.open span:nth-child(2) { opacity: 0; }
.fk-menu__btn.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.fk-menu__dropdown,
.fkweb-notif__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--fk-surface-raised);
  border: 1px solid var(--fk-border);
  border-radius: var(--fk-radius-lg);
  box-shadow: var(--fk-shadow-lg);
  z-index: 2000;
  overflow: hidden;
  animation: fk-fade-up var(--fk-duration-fast) var(--fk-ease-out) both;
}
.fk-menu__dropdown { display: none; min-width: 218px; padding: var(--fk-space-2); }
.fk-menu__dropdown.open { display: block; }

.fk-menu__item {
  display: flex;
  align-items: center;
  gap: var(--fk-space-4);
  padding: 9px var(--fk-space-4);
  border-radius: var(--fk-radius-md);
  font-size: var(--fk-ui-sm);
  font-weight: var(--fk-weight-medium);
  color: var(--fk-text) !important;
  text-decoration: none !important;
  transition: background-color var(--fk-duration-fast) var(--fk-ease), color var(--fk-duration-fast) var(--fk-ease);
}
.fk-menu__item:hover { background: var(--fk-surface-inset); color: var(--fk-text) !important; }
.fk-menu__item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--fk-text-subtle); }
.fk-menu__item:hover svg { color: var(--fk-text-brand); }
.fk-menu__item--danger { color: var(--fk-danger) !important; }
.fk-menu__item--danger svg { color: var(--fk-danger); }
.fk-menu__item--danger:hover { background: var(--fk-danger-bg); color: var(--fk-danger) !important; }
.fk-menu__item--danger:hover svg { color: var(--fk-danger); }

.fk-menu__divider {
  height: 1px;
  background: var(--fk-border);
  margin: var(--fk-space-2) var(--fk-space-3);
}

/* Notificações */
.fkweb-notif { position: relative; display: inline-flex; align-items: center; }

.fkweb-notif__bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--fk-radius-field);
  color: var(--fk-text-muted);
  transition: background-color var(--fk-duration-fast) var(--fk-ease), color var(--fk-duration-fast) var(--fk-ease);
}
.fkweb-notif__bell:hover { background: var(--fk-surface-inset); color: var(--fk-text); }

.fkweb-notif__badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--fk-appbar-solid);
  border-radius: var(--fk-radius-full);
  background: var(--fk-danger-solid);
  color: var(--fk-danger-contrast);
  font-size: 10px;
  font-weight: var(--fk-weight-bold);
  line-height: 1;
  pointer-events: none;
}

.fkweb-notif__dropdown {
  right: -6px;
  width: min(340px, calc(100vw - 24px));
  max-height: min(460px, 70vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fkweb-notif__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fk-space-3);
  padding: var(--fk-space-4) var(--fk-space-5);
  background: var(--fk-surface-raised);
  border-bottom: 1px solid var(--fk-border);
  font-family: var(--fk-font-brand);
  font-size: var(--fk-ui-md);
  letter-spacing: var(--fk-tracking-title);
  color: var(--fk-text);
}
.fkweb-notif__header button {
  padding: var(--fk-space-1) var(--fk-space-3);
  border-radius: var(--fk-radius-sm);
  font-family: var(--fk-font-sans);
  font-size: var(--fk-ui-xs);
  font-weight: var(--fk-weight-semibold);
  color: var(--fk-text-brand);
  transition: background-color var(--fk-duration-fast) var(--fk-ease);
}
.fkweb-notif__header button:hover { background: var(--fk-accent-tint); }

#notif-list { list-style: none; margin: 0; padding: 0; }

.fkweb-notif__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--fk-space-4);
  padding: var(--fk-space-4) var(--fk-space-5);
  border-bottom: 1px solid var(--fk-border);
  background: var(--fk-accent-tint);
  cursor: pointer;
  transition: background-color var(--fk-duration-fast) var(--fk-ease);
}
.fkweb-notif__item:last-child { border-bottom: 0; }
.fkweb-notif__item:hover { background: var(--fk-accent-soft); }
.fkweb-notif__item--lida { background: transparent; }
.fkweb-notif__item--lida:hover { background: var(--fk-surface-hover); }

.fkweb-notif__body { flex: 1; min-width: 0; }
.fkweb-notif__body p {
  font-size: var(--fk-ui-sm);
  line-height: var(--fk-leading-normal);
  color: var(--fk-text);
  word-break: break-word;
}
.fkweb-notif__body small {
  display: block;
  margin-top: 2px;
  font-size: var(--fk-ui-2xs);
  color: var(--fk-text-subtle);
}
.notif-tipo-icon { font-size: var(--fk-ui-xs); margin-right: 2px; }

.fkweb-notif__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--fk-radius-full);
  background: var(--fk-accent);
  flex-shrink: 0;
  align-self: center;
}
.fkweb-notif__empty {
  padding: var(--fk-space-10) var(--fk-space-6);
  text-align: center;
  color: var(--fk-text-subtle);
  font-size: var(--fk-ui-sm);
}

/* =========================================================================
   9. CARREGAMENTO
   ========================================================================= */
#loading-indicator,
#end-of-feed {
  display: none;
  text-align: center;
  padding: var(--fk-space-8) var(--fk-space-5);
  font-size: var(--fk-ui-sm);
  color: var(--fk-text-subtle);
}
#loading-indicator .spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: var(--fk-space-3);
  border: 2px solid var(--fk-border);
  border-top-color: var(--fk-accent);
  border-radius: var(--fk-radius-full);
  animation: fk-spin .7s linear infinite;
  vertical-align: -4px;
}

/* Barra de progresso */
.galeria-progress {
  width: 180px;
  max-width: 100%;
  height: 6px;
  background: var(--fk-surface-inset);
  border-radius: var(--fk-radius-full);
  overflow: hidden;
}
.galeria-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--fk-accent);
  transition: width var(--fk-duration-slow) var(--fk-ease);
}
.galeria-progress__fill--cheio { background: var(--fk-danger-solid); }

/* =========================================================================
   10. LIGHTBOX E SUGESTÕES
   ========================================================================= */
#fk-lightbox,
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--fk-space-5);
  background: var(--fk-scrim);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#fk-lightbox.open, #lightbox.open { display: flex; }
#fk-lightbox img, #lightbox img {
  max-width: min(94vw, 1200px);
  max-height: 84vh;
  border-radius: var(--fk-radius-lg);
  object-fit: contain;
  box-shadow: var(--fk-shadow-xl);
}
#fk-lightbox p, #lightbox p {
  margin-top: var(--fk-space-5);
  max-width: 68ch;
  text-align: center;
  font-size: var(--fk-ui-sm);
  color: rgba(255, 246, 242, .78);
}
#fk-lightbox-close, #lightbox-close {
  position: absolute;
  top: var(--fk-space-5);
  right: var(--fk-space-6);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fk-radius-full);
  background: rgba(255, 246, 242, .10);
  color: rgba(255, 246, 242, .82);
  font-size: 26px;
  line-height: 1;
  transition: background-color var(--fk-duration-fast) var(--fk-ease), color var(--fk-duration-fast) var(--fk-ease);
}
#fk-lightbox-close:hover, #lightbox-close:hover { background: rgba(255, 246, 242, .2); color: #fff; }

/* Sugestões de @usuário */
#fk-suggestions,
#user-suggestions {
  background: var(--fk-surface-raised);
  border: 1px solid var(--fk-border);
  border-radius: var(--fk-radius-lg);
  box-shadow: var(--fk-shadow-lg);
  overflow: hidden;
}
#fk-suggestions {
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  max-width: 300px;
  padding: var(--fk-space-2);
}
.suggestion {
  display: flex;
  align-items: center;
  gap: var(--fk-space-3);
  padding: var(--fk-space-3) var(--fk-space-4);
  border-radius: var(--fk-radius-md);
  font-size: var(--fk-ui-sm);
  color: var(--fk-text);
  cursor: pointer;
  transition: background-color var(--fk-duration-fast) var(--fk-ease);
}
.suggestion:hover { background: var(--fk-surface-inset); }
#fk-suggestions .suggestion img {
  width: 24px; height: 24px;
  border-radius: var(--fk-radius-full);
  object-fit: cover;
}