/* Comment V2 inline controls (Memory Wall + Status Detail).
 *
 * Idle:  [avatar] Write a comment...
 * Focus: [avatar] Write a comment... [Send]
 *                  🥰 ❤️ 😊 😁 😂 😮 😏 @
 *
 * Visibility is class/focus driven, NOT the `hidden` attribute, so a state can
 * never stay visible after it should be gone (the Phase 1 lesson).
 */

.kv2-facebook-composer__send {
  display: none;
}

.kv2-comment-composer--active .kv2-facebook-composer__send,
.kv2-facebook-composer:focus-within .kv2-facebook-composer__send {
  display: inline-flex;
}

.kv2-facebook-composer__extras {
  display: none;
}

.kv2-comment-composer--active .kv2-facebook-composer__extras,
.kv2-facebook-composer:focus-within .kv2-facebook-composer__extras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.kv2-facebook-composer__emoji-row {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.kv2-facebook-composer__emoji,
.kv2-facebook-composer__mention {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 18px;
}

.kv2-facebook-composer__mention {
  font-size: 16px;
  font-weight: 700;
}

.kv2-facebook-composer__emoji:hover,
.kv2-facebook-composer__mention:hover {
  background: rgba(255, 255, 255, 0.08);
}

.kv2-facebook-composer__feedback {
  margin: 6px 0 0;
  font-size: 13px;
}

.kv2-facebook-composer__feedback[hidden] {
  display: none !important;
}

/* The inline Memory Wall section is toggled with the `hidden` attribute; the
   explicit rule keeps it authoritative over any display declaration. */
.kv2-status-comment-section[hidden] {
  display: none !important;
}

.kv2-profile-status-toggle[data-kv2-comment-more] {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
}

/* Status composer: one calm input row and one secondary tools row. */
.kv2-status-comment-section .kv2-facebook-composer__bar { grid-template-columns: 34px minmax(0, 1fr); }

.kv2-status-comment-section .kv2-facebook-composer__extras { margin-left: 42px; justify-content: flex-start; }
.kv2-status-comment-section .kv2-profile-status-comment-form.kv2-facebook-composer .kv2-facebook-composer__emoji-row { flex: 1; min-width: 0; flex-wrap: wrap; }
.kv2-status-comment-section .kv2-profile-status-comment-form.kv2-facebook-composer .kv2-facebook-composer__send {
  flex-shrink: 0;
  box-shadow: none;
  background: var(--theme-surface-raised, #252b27);
  color: var(--color-text-primary, #e6ebe7);
  border: 1px solid var(--theme-border, rgba(255,255,255,.15));
}
.kv2-status-comment-section .kv2-profile-status-comment-form.kv2-facebook-composer .kv2-facebook-composer__send:disabled { color: var(--color-text-muted, #89918b); opacity: .6; }
.kv2-status-comment-section .kv2-profile-status-comment-form.kv2-facebook-composer .kv2-facebook-composer__send:not(:disabled) { color: color-mix(in srgb, var(--kv2-kelibatmu-green, #134D37) 60%, var(--color-text-primary, #e6ebe7) 40%); }
.kv2-status-comment-guest { text-align: center; padding: 16px; color: var(--color-text-secondary, #abb5ad); }
.kv2-status-comment-guest a { color: var(--color-text-primary, #e6ebe7); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* The shared bubble's inline-block rule must not override empty-state hiding. */
.kv2-status-comment-section [data-kv2-comment-empty][hidden] {
  display: none;
}