/* Networking module — shared styles (registration, restore, chat). */

/* Both clear the site header's `fixed-top` positioning — same reasoning as
   `.page-title-section` elsewhere (90px desktop, more on mobile where the
   header stacks into several rows), needed here because the registration
   form / chat shell is the first thing under the header with nothing else
   providing that clearance (the flag banner used to double as this on the
   chat page, back when it was a standalone top strip instead of living
   behind the message list). */
/* 200px matches .page-title-section's own desktop clearance elsewhere on
   the site (about.php etc.) — this file's earlier 90px/110px guesses were
   never actually checked against that real, working value, and were
   nowhere near enough: the header here is 3 stacked rows (top bar, main
   nav with the region dropdown, and the Events/Summits/.../About sub-nav),
   taller than a generic .section assumes. */
.network-register-section {
  padding-top: 200px;
}
.network-chat-section {
  padding-top: 220px;
}
@media (max-width: 767px) {
  .network-register-section,
  .network-chat-section {
    padding-top: 300px;
  }
}

/* Animated African-flags theme: small CSS-gradient flag chips (see
   networkFlagBanner() in includes/identity.php — deliberately not Unicode
   flag emoji, which have a well-known rendering gap on Windows) scrolling
   behind the message text itself — a faint, moving layer under the
   (opaque) message list, not a separate banner competing for space above
   the chat. Four vertical lanes side by side, alternating scroll direction
   (odd lanes drift down, even lanes drift up) rather than one horizontal
   strip. */
.network-flag-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  overflow: hidden;
  opacity: 0.16;
  pointer-events: none;
}
.network-flag-lane {
  flex: 1 1 0;
  overflow: hidden;
}
.network-flag-lane__track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.network-flag-lane--down .network-flag-lane__track {
  animation: network-flag-scroll-down 30s linear infinite;
}
.network-flag-lane--up .network-flag-lane__track {
  animation: network-flag-scroll-up 30s linear infinite;
}
.network-flag {
  display: block;
  flex: none;
  width: 40px;
  height: 26px;
  border-radius: 3px;
}
/* Content is doubled (see networkFlagBanner()), so the track is exactly
   2x one copy's height — animating between translateY(0) and
   translateY(-50%) shifts by precisely one copy-height, at which point
   the (identical) second copy sits exactly where the first started, and
   the loop repeats with no visible seam or jump. */
@keyframes network-flag-scroll-down {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}
@keyframes network-flag-scroll-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .network-flag-lane__track {
    animation: none;
  }
}

/* Chat shell */
.network-chat-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 260px);
  min-height: 420px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  overflow: hidden;
  background: #f7f7fb;
}
.network-chat-messages {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
}
.network-message {
  max-width: 75%;
  margin-bottom: 14px;
  clear: both;
}
.network-message--mine {
  float: right;
  text-align: right;
}
.network-message--theirs {
  float: left;
  text-align: left;
}
.network-message__bubble {
  position: relative;
  display: inline-block;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  text-align: left;
  /* Otherwise inherits the site's default body text color (a grayish
     #5c5c77, not black) — message text should read as real black. */
  color: #000;
}
/* The classic chat-bubble "cornered" shape — one corner squared off near
   where the tail would be (bottom-right for your own messages, since they
   sit against the right edge; bottom-left for everyone else's), rounded
   everywhere else, instead of a plain uniformly-rounded rectangle. */
.network-message--mine .network-message__bubble {
  border-bottom-right-radius: 3px;
}
.network-message--theirs .network-message__bubble {
  border-bottom-left-radius: 3px;
}
.network-message--mine .network-message__bubble {
  background: #dcf8c6;
}
/* The meta line (sender name + status badge, received messages only) and
   the options-menu toggle are flex siblings on one row — real layout, not
   one absolutely-positioned over the other, so they can never visually
   collide or steal each other's taps. */
.network-message__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.network-message__meta {
  font-size: 11px;
  color: #8585a4;
  min-width: 0;
}
.network-message__read-status {
  font-size: 11px;
  color: #8585a4;
  margin-top: 4px;
  text-align: right;
}
.network-message__status-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #29abe2;
  color: #fff;
  margin-left: 6px;
  vertical-align: middle;
}
.network-message__quote {
  border-left: 3px solid #2fb44b;
  padding: 4px 8px;
  margin-bottom: 6px;
  background: rgba(0,0,0,.03);
  font-size: 13px;
  color: #555;
  border-radius: 4px;
}
.network-message__quote--deleted {
  font-style: italic;
  color: #999;
}
.network-message--deleted .network-message__bubble {
  font-style: italic;
  color: #999;
}
/* Brief flash for a message someone was linked directly to (a "Share
   to..." link), so it's obvious which one they were actually sent instead
   of just landing somewhere in the middle of the chat with no indication. */
.network-message--highlighted .network-message__bubble {
  animation: network-message-highlight-flash 2.5s ease-out;
}
@keyframes network-message-highlight-flash {
  0%   { box-shadow: 0 0 0 3px #ede32b; }
  100% { box-shadow: 0 1px 2px rgba(0,0,0,.08); }
}
.network-message__forwarded-label {
  font-size: 11px;
  color: #8585a4;
  font-style: italic;
  margin-bottom: 2px;
}
.network-message__media img,
.network-message__media video {
  max-width: 100%;
  border-radius: 8px;
  display: block;
}
.network-message__image {
  cursor: zoom-in;
}

/* Full-screen image viewer opened by tapping a shared image (see
   openImageViewer() in chat.php) — dark backdrop, image scaled to fit, a
   close button and an explicit save/download button, matching WhatsApp's
   own tap-to-view-full-size behavior. */
.network-media-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 2200;
  display: flex;
  flex-direction: column;
}
.network-media-viewer-toolbar {
  flex: none;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
}
.network-media-viewer-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}
.network-media-viewer-btn:hover,
.network-media-viewer-btn:focus {
  background: rgba(255,255,255,.3);
  color: #fff;
  text-decoration: none;
}
.network-media-viewer-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 16px 16px;
}
.network-media-viewer-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}
/* Per-message options menu: a small caret in the bubble's corner (matching
   the standard chat-app affordance) that opens a dropdown, replacing what
   used to be a permanent row of "Reply / Forward / Delete for me / Delete
   for everyone" text under every single message. */
.network-message__menu-toggle {
  flex: none;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border: 0;
  background: transparent;
  color: #8585a4;
  font-size: 12px;
  padding: 0;
  cursor: pointer;
}
.network-message__menu-toggle:hover,
.network-message__menu-toggle:focus {
  color: #333;
  outline: none;
}
/* Positioning made explicit here rather than relying on Bootstrap's own
   .dropdown rule (this build's dropdown.js needs Popper.js for its JS
   toggle, which isn't loaded anywhere in this theme — confirmed by the
   literal "Popper is required" string baked into bootstrap.min.js — so
   Bootstrap's own toggle silently no-ops on every click. The .dropdown-menu/
   .dropdown-item CSS classes themselves are plain CSS with no Popper
   involvement at all, so they're kept; only the show/hide is now a small
   dependency-free click handler in chat.php instead of data-toggle). */
.network-message__menu {
  position: relative;
}
.network-message__menu .dropdown-menu {
  font-size: 13px;
  min-width: 160px;
}
.network-message__menu .dropdown-item {
  cursor: pointer;
}
.network-chat-composer {
  border-top: 1px solid #e5e5ea;
  padding: 12px;
  background: #fff;
}
.network-reply-preview {
  background: #f0f0f5;
  border-left: 3px solid #2fb44b;
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: 13px;
  display: none;
}

/* Composer: a plain flex row (not Bootstrap's grid columns, which were
   squeezing the text field down to almost nothing on narrow phone screens
   once a text-labelled Send button and an attach button both claimed
   fixed-width columns) — attach/send are fixed-size circular icon buttons
   that never shrink, the text field takes all remaining width and grows
   with its content (see autoGrowTextarea() in chat.php) instead of a
   single fixed-height line, matching how WhatsApp's own input behaves. */
.network-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.network-composer-icon-btn,
.network-composer-send-btn {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
}
.network-composer-icon-btn {
  background: #f0f0f5;
  color: #555;
}
.network-composer-send-btn {
  background: #2fb44b;
  color: #fff;
}
.network-composer-text-wrap {
  flex: 1 1 auto;
  min-width: 0;
}
.network-composer-text-wrap textarea {
  resize: none;
  overflow-y: auto;
  max-height: 120px;
  line-height: 1.4;
}

/* Toast (brief, non-blocking confirmation — "Copied", etc.) and modal
   (replaces window.alert/confirm/prompt entirely — this page never uses
   the browser's own native dialogs, only its own UI, matching the rest of
   the site's look instead of an OS-styled popup). */
.network-toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.8);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  z-index: 2000;
  pointer-events: none;
}
.network-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2100;
  padding: 20px;
}
.network-modal {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.network-modal p {
  margin-bottom: 16px;
  color: #000;
}
.network-modal input {
  margin-bottom: 16px;
}
.network-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}