/* VIBE MOBILE MESSENGER V3 */

@media (max-width: 640px) {

  .vibe-chat-open {
    --vm-bg: #f7f3ed;
    --vm-surface: #fffdf9;
    --vm-surface-soft: #f1ece5;
    --vm-text: #24332e;
    --vm-muted: #92958f;
    --vm-line: rgba(36, 51, 46, .09);
    --vm-accent: #e88968;
    --vm-accent-dark: #d37253;
    --vm-accent-soft: #fae2d7;

    background: var(--vm-bg) !important;
    color: var(--vm-text) !important;
  }

  .vibe-chat-open #sidepanel {
    background: var(--vm-bg) !important;
    color: var(--vm-text) !important;
  }

  .vibe-chat-open #sidepanel > div,
  .vibe-chat-open #sidepanel .scrollable-panel,
  .vibe-chat-open #sidepanel .panel-form {
    background: var(--vm-bg) !important;
  }

  .vibe-chat-open #side-caption-panel,
  .vibe-chat-open #sidepanel .caption-panel {
    background: var(--vm-surface) !important;
    background-image: none !important;
    color: var(--vm-text) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--vm-line) !important;
    box-shadow: none !important;
  }

  .vibe-chat-open #side-caption-panel *,
  .vibe-chat-open #sidepanel .caption-panel * {
    color: var(--vm-text) !important;
  }

  .vibe-chat-open #side-caption-panel button,
  .vibe-chat-open #side-caption-panel .round {
    background: var(--vm-accent-soft) !important;
    color: var(--vm-accent-dark) !important;
    border-color: transparent !important;
  }

  .vibe-chat-open #sidepanel .fox-v9-search-box,
  .vibe-chat-open #sidepanel .fox-v9-search-box.panel-form-row {
    margin: 10px 12px 12px !important;
    min-height: 48px !important;
    padding: 0 12px !important;

    background: var(--vm-surface) !important;
    background-image: none !important;

    border: 1px solid var(--vm-line) !important;
    border-radius: 16px !important;

    box-shadow: 0 3px 14px rgba(35, 39, 36, .04) !important;
  }

  .vibe-chat-open #sidepanel .fox-v9-search-box input {
    background: transparent !important;
    color: var(--vm-text) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .vibe-chat-open #sidepanel .fox-v9-search-box input::placeholder {
    color: #a4a69f !important;
  }

  .vibe-chat-open #sidepanel .fox-v9-search-box .material-icons {
    color: #687771 !important;
  }

  .vibe-chat-open #sidepanel ul.contact-box {
    background: transparent !important;
    padding: 0 8px 105px !important;
  }

  .vibe-chat-open #sidepanel ul.contact-box > li {
    margin: 3px 0 !important;
    padding: 10px !important;
    min-height: 72px !important;

    background: transparent !important;
    background-image: none !important;

    border: 1px solid transparent !important;
    border-radius: 18px !important;

    box-shadow: none !important;
  }

  .vibe-chat-open #sidepanel ul.contact-box > li.selected {
    background: var(--vm-accent-soft) !important;
    border-color: rgba(232, 137, 104, .35) !important;
  }

  .vibe-chat-open #sidepanel ul.contact-box > li.selected::after {
    display: none !important;
  }

  .vibe-chat-open #sidepanel .contact-title,
  .vibe-chat-open #sidepanel .contact-title *,
  .vibe-chat-open #sidepanel ul.contact-box > li.selected .contact-title,
  .vibe-chat-open #sidepanel ul.contact-box > li.selected .contact-title * {
    color: var(--vm-text) !important;
  }

  .vibe-chat-open #sidepanel .contact-title {
    font-weight: 700 !important;
  }

  .vibe-chat-open #sidepanel .contact-comment,
  .vibe-chat-open #sidepanel .fox-contact-time {
    color: var(--vm-muted) !important;
  }

  .vibe-chat-open #messages-container,
  .vibe-chat-open #messages-panel,
  .vibe-chat-open #scroller {
    background: var(--vm-bg) !important;
    background-color: var(--vm-bg) !important;
  }

  .vibe-chat-open #messages-container::before {
    background: var(--vm-bg) !important;
    background-image: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .vibe-chat-open #topic-caption-panel,
  .vibe-chat-open #topic-caption-panel.fox-v3-chat-header {
    background: var(--vm-surface) !important;
    background-color: var(--vm-surface) !important;
    background-image: none !important;

    color: var(--vm-text) !important;

    border: 0 !important;
    border-bottom: 1px solid var(--vm-line) !important;

    box-shadow: none !important;
  }

  .vibe-chat-open #topic-title {
    color: var(--vm-text) !important;
    font-weight: 750 !important;
  }

  .vibe-chat-open #topic-last-seen {
    color: var(--vm-muted) !important;
  }

  .vibe-chat-open #topic-caption-panel a,
  .vibe-chat-open #topic-caption-panel .material-icons {
    color: #53655f !important;
  }

  .vibe-chat-open .chat-box li.left > .bubble,
  .vibe-chat-open .chat-box .left > .bubble,
  .vibe-chat-open .chat-box .left .bubble {
    background: var(--vm-surface) !important;
    background-color: var(--vm-surface) !important;
    background-image: none !important;

    color: var(--vm-text) !important;

    border: 1px solid rgba(36, 51, 46, .055) !important;
    border-radius: 18px 18px 18px 6px !important;

    box-shadow: 0 3px 12px rgba(42, 39, 35, .055) !important;
    filter: none !important;
  }

  .vibe-chat-open .chat-box li.left > .bubble .message-content,
  .vibe-chat-open .chat-box li.left > .bubble .message-content *,
  .vibe-chat-open .chat-box .left .bubble .message-content,
  .vibe-chat-open .chat-box .left .bubble .message-content * {
    color: var(--vm-text) !important;
  }

  .vibe-chat-open .chat-box .left .timestamp {
    color: #999b95 !important;
  }

  .vibe-chat-open .chat-box li.right > .bubble,
  .vibe-chat-open .chat-box .right > .bubble,
  .vibe-chat-open .chat-box .right .bubble {
    background: var(--vm-accent) !important;
    background-color: var(--vm-accent) !important;
    background-image: none !important;

    color: #fff !important;

    border: 0 !important;
    border-radius: 18px 18px 6px 18px !important;

    box-shadow: 0 5px 16px rgba(211, 114, 83, .14) !important;
    filter: none !important;
  }

  .vibe-chat-open .chat-box li.right > .bubble .message-content,
  .vibe-chat-open .chat-box li.right > .bubble .message-content *,
  .vibe-chat-open .chat-box .right .bubble .message-content,
  .vibe-chat-open .chat-box .right .bubble .message-content * {
    color: #fff !important;
  }

  .vibe-chat-open .chat-box .right .timestamp {
    color: rgba(255, 255, 255, .72) !important;
  }

  .vibe-chat-open .chat-box .left .bubble.tip::before,
  .vibe-chat-open .chat-box .right .bubble.tip::before {
    display: none !important;
  }

  .vibe-chat-open .chat-box .right .audio-player {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    color: #fff !important;

    border: 0 !important;
    box-shadow: none !important;
  }

  .vibe-chat-open .chat-box .right .audio-player * {
    color: #fff !important;
  }

  .vibe-chat-open .chat-box .left .audio-player {
    background: var(--vm-surface-soft) !important;
    background-color: var(--vm-surface-soft) !important;
    background-image: none !important;

    color: var(--vm-text) !important;

    border: 0 !important;
    border-radius: 14px !important;
  }

  .vibe-chat-open .chat-box .left .audio-player * {
    color: var(--vm-text) !important;
  }

  .vibe-chat-open .chat-box .meta .bubble.date {
    background: var(--vm-surface) !important;
    background-color: var(--vm-surface) !important;
    background-image: none !important;

    color: #888b85 !important;

    border: 1px solid var(--vm-line) !important;
    border-radius: 999px !important;

    box-shadow: 0 3px 10px rgba(42, 39, 35, .04) !important;
  }

  .vibe-chat-open #send-message-wrapper {
    background:
      linear-gradient(
        to top,
        var(--vm-bg) 72%,
        rgba(247, 243, 237, 0)
      ) !important;

    box-shadow: none !important;
  }

  .vibe-chat-open #send-message-panel,
  .vibe-chat-open #send-message-panel.fox-v5-composer-panel {
    background: var(--vm-surface) !important;
    background-color: var(--vm-surface) !important;
    background-image: none !important;

    border: 1px solid var(--vm-line) !important;
    border-radius: 20px !important;

    box-shadow: 0 8px 25px rgba(42, 39, 35, .075) !important;
  }

  .vibe-chat-open #send-message-input {
    background: transparent !important;
    color: var(--vm-text) !important;
  }

  .vibe-chat-open #send-message-input::placeholder {
    color: #aaaca6 !important;
  }

  .vibe-chat-open #send-message-panel .primary {
    background: var(--vm-accent) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .vibe-chat-open #send-message-panel .primary *,
  .vibe-chat-open #send-message-panel .primary .material-icons {
    color: #fff !important;
  }

  .vibe-chat-open:has(#topic-view) .vibe-nav {
    display: none !important;
  }
}


/* Mobile viewport and keyboard comfort. */
@media (max-width: 640px) {
  body, input, textarea, button { font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif; }
  input, textarea, #send-message-input { font-size: 16px; }
  #app-container { height: var(--fox-viewport-height, 100dvh); }
  #send-message-wrapper { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  #app-container.vibe-shell #side-caption-panel { background: #fffdf9 !important; color: #24332e !important; }
  #app-container.vibe-shell #side-caption-panel .panel-title,
  #app-container.vibe-shell #side-caption-panel .title { color: #24332e !important; }
  #app-container.vibe-shell #side-caption-panel .subtitle { color: #626e68 !important; }
}

/* Messenger light palette: override legacy dark Social selectors. */
#app-container.vibe-shell.vibe-messenger-only #sidepanel {
  color: #24332e !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .contact-box .contact-title {
  color: #24332e !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .contact-box .contact-comment,
#app-container.vibe-shell.vibe-messenger-only #sidepanel .contact-box .contact-comment span {
  color: #5a6861 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .contact-box .fox-contact-time,
#app-container.vibe-shell.vibe-messenger-only #sidepanel .contact-box .menuTrigger a {
  color: #626e68 !important;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .fox-v4-search {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  margin: 8px 12px 12px !important;
  padding: 0 14px !important;
  min-height: 48px !important;
  background: #fffdf9 !important;
  border: 1px solid #d5dcd5 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .panel-form-row:has(> .fox-v4-search) {
  background: transparent !important;
  padding: 0 !important;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .fox-v4-search input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 46px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #24332e !important;
  font-size: 16px !important;
  box-shadow: none !important;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .fox-v4-search input::placeholder {
  color: #626e68 !important;
  opacity: 1;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .fox-v4-search .material-icons {
  color: #5a6861 !important;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .fox-moments-strip {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 16px 10px !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 108px !important;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow-x: auto;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .fox-moment-person {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 0 0 76px !important;
  width: 76px !important;
  height: auto !important;
  min-height: 84px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #24332e !important;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .fox-moment-avatar {
  position: relative !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50%;
  background: #243b35 !important;
  color: #fffdf9 !important;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .fox-moment-person-name {
  position: static !important;
  color: #43564d !important;
  font-size: 12px !important;
  line-height: 18px !important;
  white-space: nowrap;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .fox-moments-all {
  flex: 0 0 auto !important;
  min-height: 60px !important;
  height: auto !important;
  padding: 12px 16px !important;
  gap: 12px !important;
  border: 1px solid #d5dcd5 !important;
  border-radius: 18px !important;
  background: #fffdf9 !important;
  color: #24332e !important;
  box-shadow: none !important;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .fox-moments-all strong {
  display: block;
  color: #24332e !important;
  font-size: 14px !important;
  line-height: 20px !important;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .fox-moments-all small {
  display: block;
  color: #5a6861 !important;
  font-size: 12px !important;
  line-height: 18px !important;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .fox-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 12px 8px !important;
  padding: 0 !important;
  flex-shrink: 0;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .fox-moment-person-name {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: center;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .contact-box .text-box {
  flex: 1;
  min-width: 0;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .contact-box .text-box > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .contact-box .contact-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app-container.vibe-shell.vibe-messenger-only #sidepanel .contact-box .fox-contact-time {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px !important;
}
/* Keep photos and initials visible at consistent sizes. */
#app-container.vibe-messenger-only .avatar-box > img.avatar,
#app-container.vibe-messenger-only .avatar-box > .lettertile {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover;
}
#app-container.vibe-messenger-only .avatar-box > .lettertile {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #dce9e1 !important;
  color: #244b3e !important;
  font-size: 18px !important;
  font-weight: 700;
}
#app-container.vibe-messenger-only .avatar-box > .lettertile > div {
  position: static !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: 1 !important;
  transform: none !important;
}
#app-container.vibe-shell.vibe-messenger-only #topic-caption-panel > .avatar-box {
  display: block !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  margin-right: 10px !important;
}

.vibe-messenger-only .vibe-updates-card {padding:16px; margin:16px 0; border:1px solid #e6e4f1; border-radius:18px; background:#f8f7ff; color:#29263f;}
.vibe-messenger-only .vibe-updates-card h3 {margin:0 0 10px;}
.vibe-messenger-only .vibe-updates-card p {line-height:1.5;}