/* =========================================================
   FOX Messenger
   UI System v1
   ========================================================= */

:root {
  --fox-orange: #ff6b2c;
  --fox-orange-hover: #f45c1c;
  --fox-orange-soft: #fff0e8;

  --fox-bg: #f5f6f8;
  --fox-surface: #ffffff;
  --fox-surface-soft: #f8f9fb;
  --fox-surface-hover: #f1f3f6;

  --fox-text: #17191d;
  --fox-text-soft: #69707d;
  --fox-text-muted: #9ba1ab;

  --fox-border: #e8eaee;

  --fox-green: #28c76f;
  --fox-blue: #3984ff;
  --fox-red: #ef4444;

  --fox-sidebar-width: 360px;

  --fox-radius-xs: 8px;
  --fox-radius-sm: 12px;
  --fox-radius-md: 16px;
  --fox-radius-lg: 22px;
  --fox-radius-xl: 28px;

  --fox-shadow-sm:
    0 1px 2px rgba(18, 24, 40, .03),
    0 4px 12px rgba(18, 24, 40, .04);

  --fox-shadow:
    0 8px 30px rgba(18, 24, 40, .08);

  --fox-font:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

/* ---------------------------------------------------------
   GLOBAL
   --------------------------------------------------------- */

html,
body {
  background: var(--fox-bg) !important;
}

body {
  font-family: var(--fox-font) !important;
  color: var(--fox-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

button,
input,
textarea,
select {
  font-family: var(--fox-font) !important;
}

button {
  transition:
    transform .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    opacity .15s ease,
    box-shadow .15s ease;
}

button:active {
  transform: scale(.97);
}

/* ---------------------------------------------------------
   APP SURFACES
   --------------------------------------------------------- */

#mountPoint {
  background: var(--fox-bg) !important;
}

.content {
  background: var(--fox-bg);
}

/* ---------------------------------------------------------
   LEFT / SIDE PANELS
   --------------------------------------------------------- */

.side-panel,
.left-panel {
  background: var(--fox-surface) !important;
  border-right: 1px solid var(--fox-border) !important;
}

.panel-title {
  background: var(--fox-surface) !important;
  color: var(--fox-text) !important;
  border-bottom: 1px solid var(--fox-border) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
}

.panel-form {
  background: var(--fox-surface) !important;
}

.scrollable-panel {
  background: var(--fox-surface) !important;
}

/* ---------------------------------------------------------
   CONTACT / CHAT LIST
   --------------------------------------------------------- */

.contact-box {
  padding: 8px !important;
  background: var(--fox-surface) !important;
}

.contact-box > li {
  min-height: 68px;
  margin: 2px 0 !important;
  padding: 9px 10px !important;

  border: 0 !important;
  border-radius: var(--fox-radius-md) !important;

  background: transparent !important;

  transition:
    background-color .15s ease,
    transform .15s ease !important;
}

.contact-box > li:hover {
  background: var(--fox-surface-hover) !important;
}

.contact-box > li.selected {
  background: var(--fox-orange-soft) !important;
}

.contact-box > li.selected:hover {
  background: #ffe8dc !important;
}

.contact-box .avatar-box {
  margin-right: 11px !important;
}

.contact-box .avatar {
  border-radius: 50% !important;
  object-fit: cover;
}

.contact-box .contact-title {
  color: var(--fox-text) !important;
  font-weight: 650 !important;
  font-size: .96rem !important;
  letter-spacing: -.01em;
}

.contact-box .contact-comment {
  color: var(--fox-text-soft) !important;
  font-size: .84rem !important;
  margin-top: 3px !important;
}

.contact-box .contact-comment b {
  color: var(--fox-text) !important;
}

.avatar-box {
  position: relative;
}

.avatar-box .online {
  background: var(--fox-green) !important;
  border: 2px solid var(--fox-surface) !important;
  box-shadow: none !important;
}

.avatar-box .offline {
  border: 2px solid var(--fox-surface) !important;
}

/* ---------------------------------------------------------
   SEARCH
   --------------------------------------------------------- */

.search {
  margin: 8px 12px !important;
}

.search input,
input[type="search"] {
  background: var(--fox-surface-soft) !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;

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

  min-height: 42px;
  padding-left: 14px !important;

  outline: none !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.search input:focus,
input[type="search"]:focus {
  background: var(--fox-surface) !important;
  border-color: rgba(255, 107, 44, .35) !important;
  box-shadow: 0 0 0 4px rgba(255, 107, 44, .09) !important;
}

/* ---------------------------------------------------------
   CHAT AREA
   --------------------------------------------------------- */

.chat-box {
  padding: 22px 5% 26px !important;
}

.chat-box > li {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

/* incoming */

.left .bubble {
  background: var(--fox-surface) !important;
  color: var(--fox-text) !important;

  border: 1px solid var(--fox-border) !important;
  border-radius:
    18px 18px 18px 6px !important;

  box-shadow: var(--fox-shadow-sm) !important;
}

/* outgoing */

.right .bubble {
  background:
    linear-gradient(
      135deg,
      #ff783e 0%,
      var(--fox-orange) 100%
    ) !important;

  color: #fff !important;

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

  box-shadow:
    0 5px 16px rgba(255, 107, 44, .18) !important;
}

.bubble {
  padding: 9px 12px !important;
  max-width: min(620px, 76vw) !important;
  line-height: 1.38 !important;
}

.bubble div.message-content {
  font-size: .95rem !important;
  line-height: 1.42 !important;
}

.right .bubble div.message-content,
.right .bubble .timestamp,
.right .bubble .author {
  color: #fff !important;
}

.left .bubble .timestamp {
  color: var(--fox-text-muted) !important;
}

.chat-box .timestamp {
  opacity: .78;
  font-size: .7rem !important;
}

/* remove old speech-bubble triangles */

.left .bubble.tip::before,
.right .bubble.tip::before {
  display: none !important;
}

/* date separators */

.meta .bubble.date,
.chat-box .meta .bubble {
  background: rgba(255,255,255,.86) !important;
  color: var(--fox-text-soft) !important;

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

  box-shadow: none !important;

  padding: 5px 11px !important;

  font-size: .72rem !important;
  font-weight: 650 !important;

  backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------
   MESSAGE COMPOSER / FOOTER
   --------------------------------------------------------- */

.footer {
  background: rgba(255,255,255,.94) !important;
  border-top: 1px solid var(--fox-border) !important;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.footer textarea,
.footer input[type="text"],
.footer [contenteditable="true"] {
  background: var(--fox-surface-soft) !important;

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

  border: 1px solid var(--fox-border) !important;
  border-radius: 18px !important;

  min-height: 44px;

  outline: none !important;

  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.footer textarea:focus,
.footer input[type="text"]:focus,
.footer [contenteditable="true"]:focus {
  background: #fff !important;
  border-color: rgba(255,107,44,.4) !important;

  box-shadow:
    0 0 0 4px rgba(255,107,44,.08) !important;
}

/* ---------------------------------------------------------
   AVATARS
   --------------------------------------------------------- */

img.avatar {
  border-radius: 50% !important;
}

#self-avatar.avatar-box {
  border-radius: 50%;
}

/* ---------------------------------------------------------
   ICONS
   --------------------------------------------------------- */

.material-icons {
  transition:
    color .15s ease,
    opacity .15s ease,
    transform .15s ease;
}

.material-icons:hover {
  color: var(--fox-orange);
}

/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

a {
  color: var(--fox-orange);
}

a:hover {
  color: var(--fox-orange-hover);
}

/* ---------------------------------------------------------
   FORMS
   --------------------------------------------------------- */

.panel-form input:not([type="checkbox"]):not([type="radio"]),
.panel-form textarea,
.panel-form select {
  border-radius: 12px !important;
}

.panel-form input:focus,
.panel-form textarea:focus,
.panel-form select:focus {
  border-color: var(--fox-orange) !important;
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

button.primary,
button[type="submit"],
.panel-form button.primary {
  background:
    linear-gradient(
      135deg,
      #ff7a3d,
      var(--fox-orange)
    ) !important;

  color: #fff !important;

  border: 0 !important;
  border-radius: 12px !important;

  box-shadow:
    0 5px 14px rgba(255,107,44,.18) !important;
}

button.primary:hover,
button[type="submit"]:hover {
  background:
    linear-gradient(
      135deg,
      #ff6b2c,
      #f45c1c
    ) !important;
}

/* ---------------------------------------------------------
   SELECTION
   --------------------------------------------------------- */

::selection {
  background: rgba(255,107,44,.22);
}

/* ---------------------------------------------------------
   SCROLLBARS
   --------------------------------------------------------- */

* {
  scrollbar-width: thin;
  scrollbar-color: #cfd3da transparent;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #ccd1d8;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #adb4be;
}

/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width: 961px) {

  .side-panel,
  .left-panel {
    width: var(--fox-sidebar-width) !important;
  }

  .chat-box {
    padding-left: max(5%, 34px) !important;
    padding-right: max(5%, 34px) !important;
  }
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 960px) {

  :root {
    --fox-sidebar-width: 320px;
  }

  .bubble {
    max-width: 80vw !important;
  }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {

  html,
  body {
    background: var(--fox-surface) !important;
  }

  .contact-box {
    padding: 5px 7px !important;
  }

  .contact-box > li {
    min-height: 66px;
    border-radius: 14px !important;
  }

  .chat-box {
    padding:
      14px 10px
      calc(18px + env(safe-area-inset-bottom))
      !important;
  }

  .bubble {
    max-width: 84vw !important;
    padding: 8px 11px !important;
  }

  .left .bubble {
    border-radius:
      17px 17px 17px 5px !important;
  }

  .right .bubble {
    border-radius:
      17px 17px 5px 17px !important;
  }

  .footer {
    padding-bottom:
      env(safe-area-inset-bottom) !important;
  }

  .panel-title {
    padding-top:
      env(safe-area-inset-top) !important;
  }
}

/* ---------------------------------------------------------
   DARK MODE FOUNDATION
   --------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

  :root {
    --fox-bg: #0d0f12;
    --fox-surface: #15181d;
    --fox-surface-soft: #1b1f25;
    --fox-surface-hover: #20252c;

    --fox-text: #f4f5f7;
    --fox-text-soft: #a7adb7;
    --fox-text-muted: #777f8b;

    --fox-border: #262b33;

    --fox-orange-soft: rgba(255,107,44,.14);
  }

  .contact-box > li.selected:hover {
    background: rgba(255,107,44,.19) !important;
  }

  .footer {
    background: rgba(21,24,29,.94) !important;
  }

  .meta .bubble.date,
  .chat-box .meta .bubble {
    background: rgba(21,24,29,.88) !important;
  }

  ::-webkit-scrollbar-thumb {
    background: #343a44;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #454c58;
  }
}


/* =========================================================
   FOX MESSENGER — UI V2
   ========================================================= */

:root {
  --fox-v2-bg: #f4f5f7;
  --fox-v2-sidebar: #ffffff;
  --fox-v2-chat: #f7f7f8;

  --fox-v2-text: #17181b;
  --fox-v2-secondary: #7a8089;
  --fox-v2-border: rgba(19, 23, 31, .07);

  --fox-v2-accent: #ff6b2c;
  --fox-v2-accent-dark: #ef581b;
  --fox-v2-accent-soft: rgba(255, 107, 44, .10);

  --fox-v2-sidebar-width: 360px;

  --fox-v2-header-height: 72px;

  --fox-v2-shadow:
    0 10px 35px rgba(18, 22, 33, .08);
}


/* =========================================================
   APP FRAME
   ========================================================= */

#app-container {
  background: var(--fox-v2-bg) !important;
}

#topic-view.fox-topic-view {
  background: var(--fox-v2-chat) !important;
  position: relative;
}


/* =========================================================
   LEFT SIDEBAR
   ========================================================= */

#side-panel {
  width: var(--fox-v2-sidebar-width) !important;

  background: var(--fox-v2-sidebar) !important;

  border-right:
    1px solid var(--fox-v2-border) !important;

  box-shadow:
    8px 0 30px rgba(20, 24, 35, .025);

  position: relative;
  z-index: 10;
}


/* =========================================================
   FOX SIDE HEADER
   ========================================================= */

#side-caption-panel.fox-side-header {
  height: var(--fox-v2-header-height) !important;
  min-height: var(--fox-v2-header-height) !important;

  padding: 0 16px !important;

  display: flex !important;
  align-items: center !important;

  gap: 10px;

  background:
    rgba(255, 255, 255, .94) !important;

  border-bottom:
    1px solid var(--fox-v2-border) !important;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow: none !important;
}


#side-caption-panel #self-avatar {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;

  margin: 0 2px 0 0 !important;
}


#side-caption-panel #self-avatar img,
#side-caption-panel #self-avatar .lettertile {
  width: 42px !important;
  height: 42px !important;

  border-radius: 14px !important;
}


#sidepanel-title.fox-side-title {
  flex: 1;

  background: transparent !important;

  border: 0 !important;

  padding: 0 !important;

  color: var(--fox-v2-text) !important;

  font-size: 1rem !important;
  font-weight: 750 !important;

  letter-spacing: -.025em;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


#side-caption-panel a {
  width: 38px;
  height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  color: var(--fox-v2-secondary) !important;

  transition:
    background .16s ease,
    color .16s ease,
    transform .16s ease;
}


#side-caption-panel a:hover {
  background: #f2f3f5 !important;
  color: var(--fox-v2-accent) !important;
}


/* =========================================================
   CHAT LIST
   ========================================================= */

.contact-box {
  background: var(--fox-v2-sidebar) !important;

  padding:
    10px 10px 18px !important;
}


.contact-box > li {
  position: relative;

  min-height: 74px !important;

  margin: 3px 0 !important;

  padding:
    10px 11px !important;

  border: none !important;

  border-radius: 18px !important;

  background:
    transparent !important;

  transition:
    background .16s ease,
    transform .16s ease,
    box-shadow .16s ease !important;
}


.contact-box > li:hover {
  background:
    #f5f6f7 !important;
}


.contact-box > li.selected {
  background:
    var(--fox-v2-accent-soft) !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(255, 107, 44, .04) !important;
}


.contact-box > li.selected::before {
  content: "";

  position: absolute;

  left: 0;
  top: 18px;
  bottom: 18px;

  width: 3px;

  border-radius:
    0 4px 4px 0;

  background:
    var(--fox-v2-accent);
}


.contact-box .avatar-box {
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;

  margin-right: 12px !important;
}


.contact-box .avatar {
  width: 52px !important;
  height: 52px !important;

  border-radius: 17px !important;
}


.contact-box .contact-title {
  color:
    var(--fox-v2-text) !important;

  font-size:
    .96rem !important;

  font-weight:
    680 !important;

  letter-spacing:
    -.018em;
}


.contact-box .contact-comment {
  margin-top:
    4px !important;

  color:
    var(--fox-v2-secondary) !important;

  font-size:
    .82rem !important;
}


/* =========================================================
   CHAT HEADER
   ========================================================= */

#topic-caption-panel.fox-chat-header {
  height:
    var(--fox-v2-header-height) !important;

  min-height:
    var(--fox-v2-header-height) !important;

  padding:
    0 20px !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    12px;

  background:
    rgba(255,255,255,.94) !important;

  border-bottom:
    1px solid var(--fox-v2-border) !important;

  box-shadow:
    0 1px 0 rgba(15,20,30,.02) !important;

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  position:
    relative;

  z-index:
    15;
}


#topic-caption-panel .avatar-box {
  width:
    44px !important;

  min-width:
    44px !important;

  height:
    44px !important;

  margin:
    0 !important;
}


#topic-caption-panel .avatar-box img,
#topic-caption-panel .avatar-box .lettertile {
  width:
    44px !important;

  height:
    44px !important;

  border-radius:
    14px !important;
}


#topic-caption-panel .avatar-box .online {
  width:
    11px !important;

  height:
    11px !important;

  right:
    -1px !important;

  bottom:
    -1px !important;

  border:
    3px solid white !important;

  background:
    #29c46d !important;
}


#topic-title-group.fox-chat-identity {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    2px;
}


#topic-title {
  background:
    transparent !important;

  border:
    0 !important;

  padding:
    0 !important;

  color:
    var(--fox-v2-text) !important;

  font-size:
    .98rem !important;

  font-weight:
    720 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    -.018em;
}


#topic-last-seen.fox-presence {
  color:
    #27a85f !important;

  font-size:
    .76rem !important;

  line-height:
    1.2;

  font-weight:
    550;
}


#topic-caption-panel > div:last-child a {
  width:
    40px;

  height:
    40px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    13px;

  color:
    var(--fox-v2-secondary) !important;

  transition:
    background .16s ease,
    color .16s ease;
}


#topic-caption-panel > div:last-child a:hover {
  background:
    #f1f2f4;

  color:
    var(--fox-v2-text) !important;
}


/* =========================================================
   CHAT BACKGROUND
   ========================================================= */

#messages-container.fox-messages-container {
  background:
    var(--fox-v2-chat) !important;
}


#messages-panel.fox-messages-panel {
  background:
    var(--fox-v2-chat) !important;

  background-image:
    none !important;
}


#messages-panel::before {
  content: "";

  position:
    fixed;

  pointer-events:
    none;

  width:
    520px;

  height:
    520px;

  right:
    8%;

  top:
    16%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(255,107,44,.035),
      transparent 68%
    );
}


#scroller.chat-box {
  background:
    transparent !important;

  background-image:
    none !important;

  padding:
    28px clamp(20px, 5vw, 72px)
    34px !important;
}


/* =========================================================
   MESSAGES
   ========================================================= */

.chat-box .bubble {
  max-width:
    min(560px, 68vw) !important;

  padding:
    9px 13px !important;

  font-size:
    .94rem;

  line-height:
    1.42;

  box-shadow:
    none !important;
}


.chat-box .left .bubble {
  background:
    #ffffff !important;

  color:
    #202126 !important;

  border:
    1px solid rgba(20,25,35,.065) !important;

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

  box-shadow:
    0 2px 8px rgba(20,24,34,.035) !important;
}


.chat-box .right .bubble {
  background:
    linear-gradient(
      145deg,
      #ff793e,
      #ff6426
    ) !important;

  color:
    white !important;

  border:
    none !important;

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

  box-shadow:
    0 5px 16px
    rgba(255, 100, 38, .16) !important;
}


.chat-box .right .bubble a {
  color:
    white !important;
}


.chat-box .meta .bubble.date {
  padding:
    6px 12px !important;

  background:
    rgba(255,255,255,.78) !important;

  color:
    #8a9099 !important;

  border:
    1px solid rgba(20,25,35,.055) !important;

  border-radius:
    999px !important;

  box-shadow:
    none !important;

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  font-size:
    .69rem !important;

  font-weight:
    650 !important;

  text-transform:
    uppercase;

  letter-spacing:
    .025em;
}


/* =========================================================
   COMPOSER
   ========================================================= */

#topic-view > .send-message,
#topic-view .send-message {
  margin:
    0 18px 18px !important;

  min-height:
    58px;

  background:
    rgba(255,255,255,.96) !important;

  border:
    1px solid rgba(18,23,33,.07) !important;

  border-radius:
    20px !important;

  box-shadow:
    0 12px 35px rgba(19,24,34,.10) !important;

  overflow:
    hidden;

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}


/* Generic Tinode composer containers */

#topic-view form,
#topic-view .footer {
  background:
    rgba(255,255,255,.96) !important;

  border-top:
    1px solid rgba(18,23,33,.06) !important;
}


#topic-view textarea,
#topic-view [contenteditable="true"] {
  color:
    var(--fox-v2-text) !important;

  background:
    transparent !important;

  border:
    none !important;

  box-shadow:
    none !important;

  outline:
    none !important;
}


#topic-view textarea::placeholder {
  color:
    #a3a8b0 !important;
}


#topic-view .footer .material-icons {
  color:
    #8b919b;
}


#topic-view .footer .material-icons:hover {
  color:
    var(--fox-v2-accent);
}


/* =========================================================
   FLOATING ACTION
   ========================================================= */

#go-to-latest {
  width:
    42px !important;

  height:
    42px !important;

  border:
    1px solid var(--fox-v2-border) !important;

  border-radius:
    50% !important;

  background:
    white !important;

  color:
    var(--fox-v2-text) !important;

  box-shadow:
    var(--fox-v2-shadow) !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

@media (prefers-color-scheme: dark) {

  :root {
    --fox-v2-bg:
      #0d0f12;

    --fox-v2-sidebar:
      #12151a;

    --fox-v2-chat:
      #0f1216;

    --fox-v2-text:
      #f5f6f8;

    --fox-v2-secondary:
      #8e959f;

    --fox-v2-border:
      rgba(255,255,255,.065);

    --fox-v2-accent-soft:
      rgba(255,107,44,.13);
  }


  #side-caption-panel.fox-side-header,
  #topic-caption-panel.fox-chat-header {
    background:
      rgba(18,21,26,.94) !important;
  }


  .contact-box {
    background:
      var(--fox-v2-sidebar) !important;
  }


  .contact-box > li:hover {
    background:
      #191d23 !important;
  }


  .chat-box .left .bubble {
    background:
      #1b1f25 !important;

    color:
      #f0f2f5 !important;

    border-color:
      rgba(255,255,255,.055) !important;
  }


  .chat-box .meta .bubble.date {
    background:
      rgba(27,31,37,.86) !important;

    color:
      #969da7 !important;

    border-color:
      rgba(255,255,255,.05) !important;
  }


  #topic-view form,
  #topic-view .footer,
  #topic-view > .send-message,
  #topic-view .send-message {
    background:
      rgba(20,23,28,.96) !important;

    border-color:
      rgba(255,255,255,.06) !important;
  }


  #go-to-latest {
    background:
      #1b1f25 !important;

    color:
      white !important;
  }


  #topic-caption-panel .avatar-box .online {
    border-color:
      #12151a !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  :root {
    --fox-v2-header-height:
      64px;
  }


  #side-panel {
    width:
      100% !important;
  }


  #side-caption-panel.fox-side-header {
    padding-left:
      max(12px, env(safe-area-inset-left)) !important;

    padding-right:
      max(12px, env(safe-area-inset-right)) !important;
  }


  #topic-caption-panel.fox-chat-header {
    padding-left:
      max(10px, env(safe-area-inset-left)) !important;

    padding-right:
      max(10px, env(safe-area-inset-right)) !important;
  }


  #topic-caption-panel .avatar-box {
    width:
      40px !important;

    min-width:
      40px !important;

    height:
      40px !important;
  }


  #topic-caption-panel .avatar-box img,
  #topic-caption-panel .avatar-box .lettertile {
    width:
      40px !important;

    height:
      40px !important;

    border-radius:
      13px !important;
  }


  #scroller.chat-box {
    padding:
      18px 10px
      calc(24px + env(safe-area-inset-bottom))
      !important;
  }


  .chat-box .bubble {
    max-width:
      82vw !important;
  }


  .contact-box > li {
    min-height:
      70px !important;

    border-radius:
      16px !important;
  }


  #topic-view > .send-message,
  #topic-view .send-message {
    margin:
      0 8px
      calc(8px + env(safe-area-inset-bottom))
      !important;

    border-radius:
      18px !important;
  }
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1440px) {

  :root {
    --fox-v2-sidebar-width:
      380px;
  }


  #scroller.chat-box {
    padding-left:
      clamp(50px, 7vw, 110px) !important;

    padding-right:
      clamp(50px, 7vw, 110px) !important;
  }
}

#messages-container,
#messages-panel,
#scroller,
.chat-box {
  background-image: none !important;
}

#messages-panel {
  background-color:
    var(--fox-v2-chat) !important;
}



/* =========================================================
   FOX MESSENGER V3
   ========================================================= */

:root {
  --fox3-orange: #ff6b2c;
  --fox3-orange-hover: #f45d20;
  --fox3-orange-soft: #fff0e9;

  --fox3-bg: #f5f6f8;
  --fox3-sidebar: #ffffff;
  --fox3-surface: #ffffff;

  --fox3-text: #15171a;
  --fox3-muted: #858b95;

  --fox3-line: rgba(18, 24, 32, .075);

  --fox3-green: #2ac769;

  --fox3-sidebar-width: 368px;

  --fox3-radius: 20px;
}


/* =========================================================
   FORCE CLEAN FOX CANVAS
   ========================================================= */

html,
body,
#app-container {
  background: var(--fox3-bg) !important;
}

#app-container {
  overflow: hidden;
}

#side-panel {
  width: var(--fox3-sidebar-width) !important;
  min-width: var(--fox3-sidebar-width) !important;

  background: var(--fox3-sidebar) !important;

  border-right: 1px solid var(--fox3-line) !important;

  box-shadow: none !important;
}

#topic-view.fox-v3-topic-view,
#messages-container,
#messages-panel,
#scroller,
.chat-box {
  background-color: var(--fox3-bg) !important;
  background-image: none !important;
}

#messages-panel::before,
#messages-container::before,
.chat-box::before {
  display: none !important;
  content: none !important;
}


/* =========================================================
   FOX SIDEBAR HEADER
   ========================================================= */

#side-caption-panel.fox-v3-sidebar-head {
  box-sizing: border-box !important;

  width: 100% !important;
  height: auto !important;
  min-height: 150px !important;

  padding: 18px 18px 14px !important;

  display: grid !important;

  grid-template-columns: 1fr auto;

  grid-template-areas:
    "brand actions"
    "profile profile";

  align-items: center !important;

  gap: 16px 10px !important;

  background: #ffffff !important;

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

  box-shadow: none !important;
}


.fox-v3-brand {
  grid-area: brand;

  display: flex;
  align-items: center;

  min-width: 0;

  gap: 11px;
}


.fox-v3-brand-logo {
  width: 43px;
  height: 43px;

  flex: 0 0 43px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      #ff843f 0%,
      #ff6427 55%,
      #f4511e 100%
    );

  color: #fff;

  font-size: 21px;
  font-weight: 850;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  box-shadow:
    0 7px 20px rgba(255, 101, 39, .22);
}


.fox-v3-brand-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  justify-content: center;

  gap: 1px;
}


.fox-v3-brand-name {
  color: var(--fox3-text);

  font-size: 19px;
  font-weight: 800;

  line-height: 1.05;

  letter-spacing: -.04em;
}


.fox-v3-brand-subtitle {
  color: var(--fox3-muted);

  font-size: 11px;
  font-weight: 520;

  line-height: 1.3;

  letter-spacing: .01em;
}


.fox-v3-sidebar-actions {
  grid-area: actions;

  display: flex;
  align-items: center;

  gap: 3px;
}


.fox-v3-sidebar-actions a,
.fox-v3-sidebar-actions button {
  width: 39px !important;
  height: 39px !important;

  min-width: 39px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;

  border-radius: 12px !important;

  background: #f4f5f7 !important;

  color: #656b74 !important;

  box-shadow: none !important;

  transition:
    background .16s ease,
    color .16s ease,
    transform .16s ease !important;
}


.fox-v3-sidebar-actions a:hover,
.fox-v3-sidebar-actions button:hover {
  background: var(--fox3-orange-soft) !important;

  color: var(--fox3-orange) !important;
}


/* =========================================================
   PROFILE STRIP
   ========================================================= */

.fox-v3-profile-strip {
  grid-area: profile;

  min-width: 0;

  display: flex;
  align-items: center;

  gap: 11px;

  padding: 10px 12px;

  border-radius: 16px;

  background: #f7f8fa;
}


#side-caption-panel .fox-v3-self-avatar {
  width: 39px !important;
  height: 39px !important;

  min-width: 39px !important;

  margin: 0 !important;
}


#side-caption-panel .fox-v3-self-avatar img,
#side-caption-panel .fox-v3-self-avatar .lettertile {
  width: 39px !important;
  height: 39px !important;

  border-radius: 12px !important;
}


.fox-v3-self-avatar-placeholder {
  width: 39px;
  height: 39px;

  flex: 0 0 39px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: var(--fox3-orange-soft);

  color: var(--fox3-orange);

  font-size: 15px;
  font-weight: 800;
}


.fox-v3-profile-copy {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


#sidepanel-title.fox-v3-profile-name {
  padding: 0 !important;

  background: transparent !important;

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

  border: 0 !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  line-height: 1.2 !important;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.fox-v3-profile-status {
  color: var(--fox3-muted);

  font-size: 11px;

  line-height: 1.2;
}


/* =========================================================
   CONTACT LIST
   ========================================================= */

.scrollable-panel {
  background: var(--fox3-sidebar) !important;
}


.contact-box {
  padding: 9px 10px 18px !important;

  background: var(--fox3-sidebar) !important;
}


.contact-box > li {
  min-height: 70px !important;

  margin: 2px 0 !important;

  padding: 9px 10px !important;

  border: 0 !important;

  border-radius: 16px !important;

  background: transparent !important;

  box-shadow: none !important;
}


.contact-box > li:hover {
  background: #f6f7f9 !important;
}


.contact-box > li.selected {
  background: var(--fox3-orange-soft) !important;

  box-shadow: none !important;
}


.contact-box > li.selected::before {
  display: none !important;
}


.contact-box .avatar-box {
  width: 50px !important;
  min-width: 50px !important;
  height: 50px !important;

  margin-right: 11px !important;
}


.contact-box .avatar,
.contact-box .avatar-box img,
.contact-box .avatar-box .lettertile {
  width: 50px !important;
  height: 50px !important;

  border-radius: 16px !important;
}


.contact-box .contact-title {
  color: var(--fox3-text) !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  letter-spacing: -.012em;
}


.contact-box .contact-comment {
  margin-top: 4px !important;

  color: var(--fox3-muted) !important;

  font-size: 12px !important;
}


/* =========================================================
   MODERN CHAT HEADER
   ========================================================= */

#topic-caption-panel.fox-v3-chat-header {
  box-sizing: border-box !important;

  height: 70px !important;
  min-height: 70px !important;

  padding: 0 18px !important;

  display: flex !important;

  align-items: center !important;

  gap: 11px;

  background: rgba(255, 255, 255, .96) !important;

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

  box-shadow: none !important;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  z-index: 20;
}


#topic-caption-panel.fox-v3-chat-header .avatar-box {
  width: 43px !important;
  min-width: 43px !important;
  height: 43px !important;

  margin: 0 !important;
}


#topic-caption-panel.fox-v3-chat-header .avatar-box img,
#topic-caption-panel.fox-v3-chat-header .avatar-box .lettertile {
  width: 43px !important;
  height: 43px !important;

  border-radius: 14px !important;
}


#topic-caption-panel .avatar-box .online {
  width: 11px !important;
  height: 11px !important;

  right: -1px !important;
  bottom: -1px !important;

  background: var(--fox3-green) !important;

  border: 3px solid #fff !important;
}


#topic-title-group {
  min-width: 0;

  display: flex !important;

  flex-direction: column;

  justify-content: center;

  gap: 3px;
}


#topic-title {
  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

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

  font-size: 14px !important;
  font-weight: 720 !important;

  line-height: 1.15 !important;

  letter-spacing: -.015em;
}


#topic-last-seen {
  color: var(--fox3-muted) !important;

  font-size: 11px !important;
  font-weight: 500 !important;

  line-height: 1.2 !important;
}


#topic-last-seen:not(:empty) {
  color: #6f7680 !important;
}


.fox-v3-chat-actions {
  display: flex;

  align-items: center;

  gap: 4px;
}


.fox-v3-header-action {
  width: 39px !important;
  height: 39px !important;

  min-width: 39px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;

  border: 0 !important;

  border-radius: 12px !important;

  background: transparent !important;

  color: #7b818a !important;

  text-decoration: none !important;

  cursor: pointer;

  transition:
    background .15s ease,
    color .15s ease,
    transform .15s ease;
}


.fox-v3-header-action:hover {
  background: #f3f4f6 !important;

  color: var(--fox3-orange) !important;
}


.fox-v3-header-action .material-icons {
  font-size: 21px !important;
}


/* =========================================================
   MESSAGE AREA
   ========================================================= */

#messages-container {
  background: #f5f6f8 !important;
}


#messages-panel {
  background: #f5f6f8 !important;
  background-image: none !important;
}


#scroller.chat-box {
  box-sizing: border-box;

  padding:
    28px clamp(28px, 5vw, 76px)
    34px !important;

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


.chat-box .bubble {
  max-width: min(560px, 70%) !important;

  padding: 9px 13px !important;

  font-size: 13px !important;

  line-height: 1.43 !important;

  border: 0 !important;

  box-shadow: none !important;
}


.chat-box .left .bubble {
  background: #ffffff !important;

  color: #202226 !important;

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

  box-shadow:
    0 1px 2px rgba(20, 25, 35, .06) !important;
}


.chat-box .right .bubble {
  background:
    linear-gradient(
      145deg,
      #ff7a3c 0%,
      #ff6427 100%
    ) !important;

  color: #ffffff !important;

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

  box-shadow:
    0 5px 15px rgba(255, 101, 39, .14) !important;
}


.chat-box .right .bubble * {
  color: inherit;
}


.chat-box .meta .bubble.date {
  padding: 5px 11px !important;

  border-radius: 999px !important;

  background: rgba(255,255,255,.9) !important;

  color: #8c929b !important;

  border: 1px solid rgba(20,25,35,.06) !important;

  box-shadow: none !important;

  font-size: 10px !important;
  font-weight: 650 !important;
}


/* =========================================================
   REMOVE OLD WALLPAPER COMPLETELY
   ========================================================= */

#topic-view,
#messages-container,
#messages-panel,
#scroller,
.chat-box,
#write-only-background {
  background-image: none !important;
}


/* =========================================================
   COMPOSER SURFACE
   ========================================================= */

#topic-view .footer {
  box-sizing: border-box !important;

  margin: 0 !important;

  padding: 10px 16px 14px !important;

  background: #f5f6f8 !important;

  border: 0 !important;
}


#topic-view .footer > div,
#topic-view .footer form {
  border-radius: 20px !important;

  background: #ffffff !important;

  border: 1px solid rgba(20,25,35,.07) !important;

  box-shadow:
    0 7px 24px rgba(20,25,35,.075) !important;
}


#topic-view textarea,
#topic-view [contenteditable="true"],
#topic-view input[type="text"] {
  background: transparent !important;

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

  border: 0 !important;

  outline: 0 !important;

  box-shadow: none !important;
}


#topic-view textarea::placeholder,
#topic-view input[type="text"]::placeholder {
  color: #a0a5ad !important;
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

#messages-panel::-webkit-scrollbar,
.scrollable-panel::-webkit-scrollbar {
  width: 6px;
}


#messages-panel::-webkit-scrollbar-thumb,
.scrollable-panel::-webkit-scrollbar-thumb {
  background: rgba(100,105,115,.18);

  border-radius: 10px;
}


/* =========================================================
   MOBILE FOX
   ========================================================= */

@media (max-width: 640px) {

  :root {
    --fox3-sidebar-width: 100%;
  }


  #side-panel {
    width: 100% !important;
    min-width: 100% !important;
  }


  #side-caption-panel.fox-v3-sidebar-head {
    min-height: 142px !important;

    padding:
      calc(12px + env(safe-area-inset-top))
      14px
      12px !important;
  }


  .fox-v3-brand-logo {
    width: 40px;
    height: 40px;

    flex-basis: 40px;

    border-radius: 13px;
  }


  .fox-v3-brand-name {
    font-size: 18px;
  }


  #topic-caption-panel.fox-v3-chat-header {
    height:
      calc(62px + env(safe-area-inset-top)) !important;

    min-height:
      calc(62px + env(safe-area-inset-top)) !important;

    padding:
      env(safe-area-inset-top)
      10px
      0 !important;
  }


  .fox-v3-chat-actions {
    gap: 0;
  }


  .fox-v3-chat-actions
  .fox-v3-header-action:first-child {
    display: none !important;
  }


  .fox-v3-header-action {
    width: 36px !important;
    height: 36px !important;

    min-width: 36px !important;
  }


  #scroller.chat-box {
    padding:
      18px 10px
      22px !important;
  }


  .chat-box .bubble {
    max-width: 82vw !important;

    font-size: 13px !important;
  }


  #topic-view .footer {
    padding:
      7px 8px
      calc(7px + env(safe-area-inset-bottom))
      !important;
  }


  #topic-view .footer > div,
  #topic-view .footer form {
    border-radius: 18px !important;
  }
}


/* =========================================================
   FOX DARK THEME
   ========================================================= */

@media (prefers-color-scheme: dark) {

  :root {
    --fox3-bg: #101215;
    --fox3-sidebar: #15181d;
    --fox3-surface: #191c21;

    --fox3-text: #f5f6f7;
    --fox3-muted: #9298a1;

    --fox3-line: rgba(255,255,255,.065);

    --fox3-orange-soft: rgba(255,107,44,.13);
  }


  html,
  body,
  #app-container,
  #side-panel,
  .scrollable-panel,
  .contact-box {
    background: var(--fox3-sidebar) !important;
  }


  #topic-view.fox-v3-topic-view,
  #messages-container,
  #messages-panel,
  #scroller.chat-box {
    background: var(--fox3-bg) !important;
    background-image: none !important;
  }


  #side-caption-panel.fox-v3-sidebar-head,
  #topic-caption-panel.fox-v3-chat-header {
    background: rgba(21,24,29,.97) !important;
  }


  .fox-v3-profile-strip {
    background: #1c2026;
  }


  .fox-v3-sidebar-actions a,
  .fox-v3-sidebar-actions button {
    background: #1d2127 !important;

    color: #9ba1aa !important;
  }


  .contact-box > li:hover {
    background: #1b1f24 !important;
  }


  .contact-box > li.selected {
    background: rgba(255,107,44,.13) !important;
  }


  #topic-caption-panel .avatar-box .online {
    border-color: #15181d !important;
  }


  .fox-v3-header-action:hover {
    background: #1d2127 !important;
  }


  .chat-box .left .bubble {
    background: #1d2127 !important;

    color: #f2f3f5 !important;
  }


  .chat-box .meta .bubble.date {
    background: rgba(29,33,39,.92) !important;

    color: #9298a1 !important;

    border-color: rgba(255,255,255,.055) !important;
  }


  #topic-view .footer {
    background: var(--fox3-bg) !important;
  }


  #topic-view .footer > div,
  #topic-view .footer form {
    background: #1b1f24 !important;

    border-color: rgba(255,255,255,.065) !important;
  }
}


/* =========================================================
   FOX MESSENGER V4
   ========================================================= */

:root {
  --fox4-orange: #ff6b2c;
  --fox4-orange-2: #ff7c43;
  --fox4-orange-soft: rgba(255, 107, 44, .12);

  --fox4-app: #0c0f13;
  --fox4-sidebar: #11151a;
  --fox4-sidebar-hover: #181d23;
  --fox4-sidebar-selected: #241a17;

  --fox4-chat: #0d1115;
  --fox4-surface: #171c22;
  --fox4-surface-2: #1c2229;

  --fox4-text: #f5f7fa;
  --fox4-muted: #8d959f;
  --fox4-muted-2: #646c76;

  --fox4-border: rgba(255, 255, 255, .065);

  --fox4-sidebar-width: 350px;

  --fox4-header-height: 72px;
}


/* =========================================================
   APP
   ========================================================= */

html,
body,
#app-container {
  background: var(--fox4-app) !important;
}

#app-container {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Segoe UI",
    sans-serif !important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

#side-panel {
  width: var(--fox4-sidebar-width) !important;
  min-width: var(--fox4-sidebar-width) !important;

  background: var(--fox4-sidebar) !important;

  border-right: 1px solid var(--fox4-border) !important;
}


/* =========================================================
   BRAND HEADER
   ========================================================= */

#side-caption-panel.fox-v3-sidebar-head {
  min-height: 0 !important;

  padding: 15px 16px 13px !important;

  display: grid !important;

  grid-template-columns: 1fr auto !important;

  grid-template-areas:
    "brand actions"
    "heading heading"
    "profile profile" !important;

  gap: 12px 8px !important;

  background: var(--fox4-sidebar) !important;

  border-bottom: 0 !important;
}


.fox-v3-brand {
  grid-area: brand;
}


.fox-v3-brand-logo {
  width: 42px;
  height: 42px;

  flex-basis: 42px;

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      #ff8848,
      #ff6426
    );

  box-shadow:
    0 8px 25px rgba(255, 100, 38, .25);
}


.fox-v3-brand-name {
  color: #fff !important;

  font-size: 18px;
}


.fox-v3-brand-subtitle {
  color: var(--fox4-muted) !important;
}


.fox-v3-sidebar-actions {
  grid-area: actions;
}


.fox-v3-sidebar-actions a,
.fox-v3-sidebar-actions button {
  background: var(--fox4-surface) !important;

  color: #a1a8b1 !important;

  border-radius: 12px !important;
}


/* =========================================================
   CHATS TITLE
   ========================================================= */

.fox-v4-sidebar-heading {
  grid-area: heading;

  display: flex;

  align-items: center;
  justify-content: space-between;

  min-width: 0;

  margin-top: 3px;
}


.fox-v4-sidebar-heading > span {
  color: #fff;

  font-size: 21px;
  font-weight: 760;

  letter-spacing: -.035em;
}


.fox-v4-new-chat {
  width: 36px;
  height: 36px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;

  border-radius: 11px;

  background: var(--fox4-orange);

  color: white;

  cursor: pointer;

  box-shadow:
    0 6px 18px rgba(255, 107, 44, .20);
}


.fox-v4-new-chat:hover {
  background: #ff7b42;
}


.fox-v4-new-chat .material-icons {
  font-size: 19px;
}


/* =========================================================
   PROFILE
   ========================================================= */

.fox-v3-profile-strip {
  grid-area: profile;

  padding: 9px 10px !important;

  background: var(--fox4-surface) !important;

  border: 1px solid rgba(255,255,255,.035);

  border-radius: 15px !important;
}


#sidepanel-title.fox-v3-profile-name {
  color: #f4f6f8 !important;
}


.fox-v3-profile-status {
  color: var(--fox4-muted) !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

.fox-v4-dialog-tools {
  padding: 10px 12px 5px;

  background: var(--fox4-sidebar);
}


.fox-v4-search {
  box-sizing: border-box;

  width: 100%;
  height: 42px;

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 0 11px;

  border-radius: 13px;

  background: var(--fox4-surface);

  border: 1px solid rgba(255,255,255,.04);

  color: var(--fox4-muted);
}


.fox-v4-search > .material-icons {
  font-size: 19px;

  color: #737b85;
}


.fox-v4-search input {
  flex: 1;

  min-width: 0;

  height: 100%;

  padding: 0;

  border: 0;

  outline: 0;

  background: transparent;

  color: #f4f6f8;

  font-size: 13px;
}


.fox-v4-search input::placeholder {
  color: #737b85;
}


.fox-v4-search-static > span:nth-child(2) {
  flex: 1;

  font-size: 13px;
}


.fox-v4-search-shortcut {
  margin-left: auto;

  padding: 3px 6px;

  border-radius: 6px;

  background: #242a31;

  color: #707883;

  font-size: 9px;
  font-weight: 600;
}


/* =========================================================
   CONTACTS
   ========================================================= */

.scrollable-panel,
.contact-box {
  background: var(--fox4-sidebar) !important;
}


.contact-box {
  padding: 6px 9px 20px !important;
}


.contact-box > li {
  min-height: 68px !important;

  margin: 2px 0 !important;

  padding: 9px !important;

  border-radius: 15px !important;

  background: transparent !important;

  transition:
    background .14s ease,
    transform .14s ease !important;
}


.contact-box > li:hover {
  background: var(--fox4-sidebar-hover) !important;
}


.contact-box > li.selected {
  background:
    linear-gradient(
      90deg,
      rgba(255,107,44,.18),
      rgba(255,107,44,.09)
    ) !important;
}


.contact-box > li.selected::after {
  content: "";

  position: absolute;

  left: 0;
  top: 16px;
  bottom: 16px;

  width: 3px;

  border-radius: 0 5px 5px 0;

  background: var(--fox4-orange);
}


.contact-box .contact-title {
  color: #f2f4f7 !important;

  font-size: 13px !important;
  font-weight: 650 !important;
}


.contact-box .contact-comment {
  color: var(--fox4-muted) !important;

  font-size: 11px !important;
}


.contact-box .avatar-box {
  width: 48px !important;
  height: 48px !important;

  min-width: 48px !important;
}


.contact-box .avatar,
.contact-box .avatar-box img,
.contact-box .avatar-box .lettertile {
  width: 48px !important;
  height: 48px !important;

  border-radius: 15px !important;
}


/* =========================================================
   CHAT
   ========================================================= */

#topic-view.fox-v3-topic-view {
  background: var(--fox4-chat) !important;
}


/* =========================================================
   CHAT HEADER
   ========================================================= */

#topic-caption-panel.fox-v3-chat-header {
  height: var(--fox4-header-height) !important;
  min-height: var(--fox4-header-height) !important;

  padding: 0 18px !important;

  background:
    rgba(17, 21, 26, .95) !important;

  border-bottom:
    1px solid var(--fox4-border) !important;

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}


#topic-caption-panel.fox-v3-chat-header .avatar-box {
  width: 45px !important;
  height: 45px !important;

  min-width: 45px !important;
}


#topic-caption-panel.fox-v3-chat-header .avatar-box img,
#topic-caption-panel.fox-v3-chat-header .avatar-box .lettertile {
  width: 45px !important;
  height: 45px !important;

  border-radius: 15px !important;
}


#topic-title {
  color: #f5f6f8 !important;

  font-size: 14px !important;
  font-weight: 680 !important;
}


#topic-last-seen {
  color: var(--fox4-muted) !important;

  font-size: 11px !important;
}


.fox-v3-header-action {
  background: transparent !important;

  color: #8b939d !important;
}


.fox-v3-header-action:hover {
  background: var(--fox4-surface) !important;

  color: var(--fox4-orange) !important;
}


/* =========================================================
   CHAT AMBIENT BACKGROUND
   ========================================================= */

#messages-container.fox-v4-messages-container {
  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 72% 20%,
      rgba(255, 107, 44, .025),
      transparent 31%
    ),
    radial-gradient(
      circle at 35% 80%,
      rgba(82, 110, 255, .018),
      transparent 30%
    ),
    var(--fox4-chat) !important;
}


.fox-v4-chat-ambient {
  position: absolute;

  inset: 0;

  pointer-events: none;

  overflow: hidden;
}


.fox-v4-orb {
  position: absolute;

  display: block;

  border-radius: 50%;

  filter: blur(90px);

  opacity: .18;
}


.fox-v4-orb-one {
  width: 300px;
  height: 300px;

  right: 7%;
  top: 8%;

  background: rgba(255, 107, 44, .10);
}


.fox-v4-orb-two {
  width: 340px;
  height: 340px;

  left: 8%;
  bottom: 4%;

  background: rgba(71, 100, 255, .05);
}


#messages-panel {
  position: relative;

  z-index: 1;

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


#scroller.chat-box {
  box-sizing: border-box;

  width: min(100%, 1060px);

  margin: 0 auto !important;

  padding:
    30px
    clamp(18px, 4vw, 58px)
    38px !important;

  background: transparent !important;
}


/* =========================================================
   DATE
   ========================================================= */

.chat-box .meta .bubble.date {
  padding: 5px 11px !important;

  background: rgba(27, 32, 38, .88) !important;

  border: 1px solid rgba(255,255,255,.055) !important;

  border-radius: 999px !important;

  color: #9299a2 !important;

  backdrop-filter: blur(12px);

  font-size: 10px !important;
}


/* =========================================================
   MESSAGE BUBBLES
   ========================================================= */

.chat-box .bubble {
  max-width: min(520px, 68%) !important;

  padding: 9px 12px !important;

  font-size: 13px !important;

  line-height: 1.42 !important;
}


.chat-box .left .bubble {
  background: #1b2026 !important;

  color: #f0f2f5 !important;

  border: 1px solid rgba(255,255,255,.04) !important;

  border-radius:
    17px 17px 17px 5px !important;

  box-shadow:
    0 3px 12px rgba(0,0,0,.08) !important;
}


.chat-box .right .bubble {
  background:
    linear-gradient(
      145deg,
      #ff7b40,
      #ff6226
    ) !important;

  color: white !important;

  border-radius:
    17px 17px 5px 17px !important;

  box-shadow:
    0 7px 22px rgba(255, 95, 31, .16) !important;
}


/* =========================================================
   FLOATING COMPOSER
   ========================================================= */

#topic-view .footer {
  box-sizing: border-box !important;

  width: 100% !important;

  padding:
    9px
    clamp(14px, 4vw, 54px)
    15px !important;

  background:
    linear-gradient(
      to top,
      var(--fox4-chat) 68%,
      rgba(13,17,21,0)
    ) !important;

  border: 0 !important;
}


#topic-view .footer > div,
#topic-view .footer form {
  box-sizing: border-box;

  width: min(100%, 940px);

  min-height: 54px;

  margin: 0 auto !important;

  border-radius: 18px !important;

  background:
    rgba(27, 32, 38, .96) !important;

  border:
    1px solid rgba(255,255,255,.07) !important;

  box-shadow:
    0 15px 40px rgba(0,0,0,.20) !important;

  backdrop-filter: blur(22px);

  -webkit-backdrop-filter: blur(22px);
}


#topic-view textarea,
#topic-view input[type="text"],
#topic-view [contenteditable="true"] {
  color: #f2f4f6 !important;

  caret-color: var(--fox4-orange) !important;

  font-size: 13px !important;
}


#topic-view textarea::placeholder,
#topic-view input[type="text"]::placeholder {
  color: #69717b !important;
}


#topic-view .footer .material-icons {
  color: #8b939d !important;

  transition:
    color .15s ease,
    transform .15s ease;
}


#topic-view .footer a:hover .material-icons,
#topic-view .footer button:hover .material-icons {
  color: var(--fox4-orange) !important;
}


/* =========================================================
   GO TO LATEST
   ========================================================= */

#go-to-latest {
  width: 42px !important;
  height: 42px !important;

  border-radius: 14px !important;

  background: var(--fox4-surface-2) !important;

  border: 1px solid var(--fox4-border) !important;

  color: #a3aab3 !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,.18) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  :root {
    --fox4-sidebar-width: 100%;
    --fox4-header-height: 64px;
  }


  #side-panel {
    width: 100% !important;
    min-width: 100% !important;
  }


  #side-caption-panel.fox-v3-sidebar-head {
    padding:
      calc(11px + env(safe-area-inset-top))
      13px
      11px !important;
  }


  .fox-v4-sidebar-heading > span {
    font-size: 20px;
  }


  .fox-v4-dialog-tools {
    padding:
      8px 10px 4px;
  }


  #topic-caption-panel.fox-v3-chat-header {
    padding:
      env(safe-area-inset-top)
      9px
      0 !important;

    height:
      calc(
        var(--fox4-header-height) +
        env(safe-area-inset-top)
      ) !important;

    min-height:
      calc(
        var(--fox4-header-height) +
        env(safe-area-inset-top)
      ) !important;
  }


  #scroller.chat-box {
    width: 100%;

    padding:
      18px 9px
      25px !important;
  }


  .chat-box .bubble {
    max-width: 84vw !important;
  }


  #topic-view .footer {
    padding:
      6px 7px
      calc(
        7px +
        env(safe-area-inset-bottom)
      ) !important;
  }


  #topic-view .footer > div,
  #topic-view .footer form {
    min-height: 50px;

    border-radius: 17px !important;
  }


  .fox-v4-search-shortcut {
    display: none;
  }
}


/* =========================================================
   WIDE DESKTOP
   ========================================================= */

@media (min-width: 1500px) {

  :root {
    --fox4-sidebar-width: 370px;
  }


  #scroller.chat-box {
    width: min(100%, 1120px);
  }
}


/* =========================================================
   FOX MESSENGER V5
   ========================================================= */

:root {
  --fox5-accent: #ff6b2c;
  --fox5-accent-hover: #ff7a3d;
  --fox5-accent-soft: rgba(255, 107, 44, .14);

  --fox5-bg: #0b0e12;
  --fox5-sidebar: #101419;
  --fox5-chat: #0d1116;

  --fox5-surface: #171c22;
  --fox5-surface-hover: #1c2229;
  --fox5-surface-strong: #20262e;

  --fox5-border: rgba(255,255,255,.065);
  --fox5-border-strong: rgba(255,255,255,.09);

  --fox5-text: #f5f7f9;
  --fox5-text-soft: #c9ced5;
  --fox5-muted: #858e99;
  --fox5-muted-dark: #616a75;

  --fox5-sidebar-width: 380px;
  --fox5-header-height: 72px;

  --fox5-radius-xs: 10px;
  --fox5-radius-sm: 13px;
  --fox5-radius-md: 17px;
  --fox5-radius-lg: 21px;
}


/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
  background: #080b0f !important;
}

body {
  overflow: hidden;
}

#app-container {
  background: var(--fox5-bg) !important;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "SF Pro Display",
    "Segoe UI",
    sans-serif !important;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* =========================================================
   DESKTOP LAYOUT
   ========================================================= */

#side-panel {
  width: var(--fox5-sidebar-width) !important;
  min-width: var(--fox5-sidebar-width) !important;
  max-width: var(--fox5-sidebar-width) !important;

  background: var(--fox5-sidebar) !important;

  border-right: 1px solid var(--fox5-border) !important;

  box-shadow: none !important;
}

#topic-view {
  min-width: 0;

  background: var(--fox5-chat) !important;
}


/* =========================================================
   SIDEBAR HEADER
   ========================================================= */

#side-caption-panel.fox-v3-sidebar-head {
  box-sizing: border-box;

  padding: 18px 18px 13px !important;

  display: grid !important;

  grid-template-columns: minmax(0, 1fr) auto !important;

  grid-template-areas:
    "brand actions"
    "heading heading" !important;

  align-items: center !important;

  gap: 16px 10px !important;

  background: var(--fox5-sidebar) !important;

  border: 0 !important;
}

.fox-v3-brand {
  grid-area: brand;

  display: flex !important;
  align-items: center !important;

  min-width: 0;
}

.fox-v3-brand-logo {
  width: 46px !important;
  height: 46px !important;

  min-width: 46px !important;

  border-radius: 15px !important;

  background:
    linear-gradient(
      145deg,
      #ff8747 0%,
      #ff6426 70%
    ) !important;

  box-shadow:
    0 8px 28px rgba(255, 99, 35, .22) !important;
}

.fox-v3-brand-logo,
.fox-v3-brand-logo * {
  color: white !important;
}

.fox-v3-brand-copy {
  margin-left: 12px !important;
}

.fox-v3-brand-name {
  color: var(--fox5-text) !important;

  font-size: 19px !important;
  line-height: 1.05 !important;
  font-weight: 760 !important;

  letter-spacing: -.035em !important;
}

.fox-v3-brand-subtitle {
  margin-top: 4px;

  color: var(--fox5-muted) !important;

  font-size: 11px !important;
  font-weight: 500 !important;
}

.fox-v3-sidebar-actions {
  grid-area: actions;

  display: flex !important;

  gap: 7px !important;
}

.fox-v3-sidebar-actions a,
.fox-v3-sidebar-actions button {
  width: 39px !important;
  height: 39px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;

  border: 1px solid var(--fox5-border) !important;

  border-radius: 13px !important;

  background: var(--fox5-surface) !important;

  color: var(--fox5-muted) !important;

  transition:
    background .15s ease,
    color .15s ease,
    transform .15s ease !important;
}

.fox-v3-sidebar-actions a:hover,
.fox-v3-sidebar-actions button:hover {
  background: var(--fox5-surface-hover) !important;

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

  transform: translateY(-1px);
}


/* =========================================================
   CHATS HEADING
   ========================================================= */

.fox-v4-sidebar-heading {
  grid-area: heading;

  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;

  margin-top: 2px !important;
}

.fox-v4-sidebar-heading > span {
  color: var(--fox5-text) !important;

  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 760 !important;

  letter-spacing: -.045em !important;
}

.fox-v4-new-chat {
  width: 42px !important;
  height: 42px !important;

  border: 0 !important;

  border-radius: 14px !important;

  background:
    linear-gradient(
      145deg,
      #ff8042,
      var(--fox5-accent)
    ) !important;

  color: #fff !important;

  box-shadow:
    0 9px 24px rgba(255,107,44,.23) !important;

  transition:
    transform .15s ease,
    box-shadow .15s ease !important;
}

.fox-v4-new-chat:hover {
  transform: translateY(-1px) scale(1.025);

  box-shadow:
    0 12px 30px rgba(255,107,44,.29) !important;
}

.fox-v4-new-chat .material-icons {
  font-size: 20px !important;
}


/* =========================================================
   REMOVE DUPLICATE PROFILE CARD
   ========================================================= */

.fox-v3-profile-strip {
  display: none !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

.fox-v4-dialog-tools {
  padding: 5px 14px 10px !important;

  background: var(--fox5-sidebar) !important;
}

.fox-v4-search {
  box-sizing: border-box;

  width: 100% !important;
  height: 46px !important;

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  padding: 0 13px !important;

  border: 1px solid var(--fox5-border) !important;

  border-radius: 15px !important;

  background: var(--fox5-surface) !important;

  color: var(--fox5-muted) !important;

  transition:
    border-color .15s ease,
    background .15s ease !important;
}

.fox-v4-search:focus-within {
  border-color: rgba(255,107,44,.40) !important;

  background: #191f25 !important;
}

.fox-v4-search > .material-icons {
  color: #78818c !important;

  font-size: 20px !important;
}

.fox-v4-search input {
  flex: 1 !important;

  min-width: 0 !important;

  border: 0 !important;

  outline: 0 !important;

  background: transparent !important;

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

  font-family: inherit !important;
  font-size: 13px !important;
}

.fox-v4-search input::placeholder {
  color: #6f7883 !important;
}

.fox-v4-search-shortcut {
  padding: 4px 7px !important;

  border-radius: 7px !important;

  background: #242a31 !important;

  color: #747d87 !important;

  font-size: 9px !important;
}


/* =========================================================
   CONTACT LIST
   ========================================================= */

.scrollable-panel {
  background: var(--fox5-sidebar) !important;
}

.contact-box {
  box-sizing: border-box;

  margin: 0 !important;

  padding: 2px 10px 22px !important;

  background: var(--fox5-sidebar) !important;
}

.contact-box > li {
  position: relative !important;

  box-sizing: border-box;

  min-height: 76px !important;

  margin: 2px 0 !important;

  padding: 11px !important;

  border: 1px solid transparent !important;

  border-radius: 17px !important;

  background: transparent !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease !important;
}

.contact-box > li:hover {
  background: var(--fox5-surface) !important;
}

.contact-box > li.selected {
  background:
    linear-gradient(
      90deg,
      rgba(255,107,44,.17),
      rgba(255,107,44,.075)
    ) !important;

  border-color:
    rgba(255,107,44,.08) !important;
}

.contact-box > li.selected::after {
  content: "";

  position: absolute;

  left: 0 !important;
  top: 17px !important;
  bottom: 17px !important;

  width: 3px !important;

  border-radius: 0 5px 5px 0 !important;

  background: var(--fox5-accent) !important;

  box-shadow:
    0 0 13px rgba(255,107,44,.45);
}

.contact-box .avatar-box {
  width: 54px !important;
  height: 54px !important;

  min-width: 54px !important;

  margin-right: 11px !important;
}

.contact-box .avatar,
.contact-box .avatar-box img,
.contact-box .avatar-box .lettertile {
  width: 54px !important;
  height: 54px !important;

  border-radius: 17px !important;
}

.contact-box .contact-title {
  color: var(--fox5-text) !important;

  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 680 !important;

  letter-spacing: -.015em;
}

.contact-box .contact-comment {
  margin-top: 5px !important;

  color: var(--fox5-muted) !important;

  font-size: 12px !important;
  line-height: 1.25 !important;
}

.contact-box .unread {
  min-width: 20px !important;
  height: 20px !important;

  padding: 0 6px !important;

  border-radius: 999px !important;

  background: var(--fox5-accent) !important;

  color: white !important;

  font-size: 10px !important;
  font-weight: 700 !important;
}


/* =========================================================
   CHAT HEADER
   ========================================================= */

#topic-caption-panel.fox-v3-chat-header {
  box-sizing: border-box;

  height: var(--fox5-header-height) !important;
  min-height: var(--fox5-header-height) !important;

  padding: 0 20px !important;

  display: flex !important;

  align-items: center !important;

  background:
    rgba(16,20,25,.92) !important;

  border-bottom:
    1px solid var(--fox5-border) !important;

  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}

#topic-caption-panel .avatar-box {
  width: 48px !important;
  height: 48px !important;

  min-width: 48px !important;

  margin-right: 11px !important;
}

#topic-caption-panel .avatar-box img,
#topic-caption-panel .avatar-box .lettertile {
  width: 48px !important;
  height: 48px !important;

  border-radius: 16px !important;
}

#topic-title-group {
  min-width: 0;
}

#topic-title {
  color: var(--fox5-text) !important;

  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;

  letter-spacing: -.018em !important;
}

#topic-last-seen {
  margin-top: 3px !important;

  color: var(--fox5-muted) !important;

  font-size: 11px !important;
  line-height: 1.2 !important;
}

.fox-v3-chat-actions {
  display: flex !important;

  align-items: center !important;

  gap: 6px !important;
}

.fox-v3-header-action {
  width: 40px !important;
  height: 40px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;

  border: 0 !important;

  border-radius: 13px !important;

  background: transparent !important;

  color: #858e99 !important;

  transition:
    background .15s ease,
    color .15s ease !important;
}

.fox-v3-header-action:hover {
  background: var(--fox5-surface) !important;

  color: var(--fox5-text) !important;
}


/* =========================================================
   CHAT CANVAS
   ========================================================= */

#messages-container.fox-v4-messages-container {
  position: relative !important;

  min-height: 0 !important;

  background:
    radial-gradient(
      circle at 78% 14%,
      rgba(255,107,44,.035),
      transparent 25%
    ),
    radial-gradient(
      circle at 24% 85%,
      rgba(83,112,255,.025),
      transparent 30%
    ),
    var(--fox5-chat) !important;

  background-image:
    radial-gradient(
      circle at 78% 14%,
      rgba(255,107,44,.035),
      transparent 25%
    ),
    radial-gradient(
      circle at 24% 85%,
      rgba(83,112,255,.025),
      transparent 30%
    ) !important;
}

#messages-panel {
  background: transparent !important;

  background-image: none !important;
}

#scroller.chat-box {
  box-sizing: border-box;

  width: min(100%, 1080px) !important;

  margin: 0 auto !important;

  padding:
    30px
    clamp(24px, 5vw, 72px)
    32px !important;

  background: transparent !important;
}


/* =========================================================
   DATE PILL
   ========================================================= */

.chat-box .meta .bubble.date {
  padding: 6px 12px !important;

  border: 1px solid var(--fox5-border) !important;

  border-radius: 999px !important;

  background: rgba(27,32,38,.88) !important;

  color: #929aa4 !important;

  box-shadow: none !important;

  backdrop-filter: blur(16px);

  font-size: 10px !important;
  font-weight: 650 !important;

  letter-spacing: .025em !important;
}


/* =========================================================
   MESSAGE ROWS
   ========================================================= */

.chat-box > li {
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}

.chat-box .bubble {
  box-sizing: border-box;

  max-width: min(560px, 72%) !important;

  padding: 10px 13px 8px !important;

  font-size: 13.5px !important;
  line-height: 1.43 !important;

  letter-spacing: -.005em !important;
}

.chat-box .left .bubble {
  border:
    1px solid rgba(255,255,255,.045) !important;

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

  background:
    #1a2026 !important;

  color:
    #f1f3f5 !important;

  box-shadow:
    0 5px 18px rgba(0,0,0,.08) !important;
}

.chat-box .right .bubble {
  border: 0 !important;

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

  background:
    linear-gradient(
      145deg,
      #ff7b40 0%,
      #ff6427 100%
    ) !important;

  color: #fff !important;

  box-shadow:
    0 8px 26px rgba(255,96,32,.17) !important;
}

.chat-box .bubble div.message-content {
  color: inherit !important;
}

.chat-box .bubble div.content-meta {
  margin-top: 3px !important;
}

.chat-box .bubble .timestamp {
  opacity: .68 !important;

  font-size: 9.5px !important;
}


/* =========================================================
   REAL SEND MESSAGE COMPOSER
   ========================================================= */

#send-message-panel.fox-v5-composer-panel {
  position: relative !important;

  z-index: 20 !important;

  box-sizing: border-box !important;

  width: 100% !important;

  flex: 0 0 auto !important;

  padding:
    10px
    clamp(18px, 4.5vw, 58px)
    16px !important;

  border: 0 !important;

  background:
    linear-gradient(
      to top,
      var(--fox5-chat) 72%,
      rgba(13,17,22,0)
    ) !important;
}

#send-message-wrapper.fox-v5-composer {
  box-sizing: border-box !important;

  width: min(100%, 960px) !important;
  min-height: 58px !important;

  margin: 0 auto !important;

  padding: 7px 8px !important;

  display: flex !important;

  align-items: flex-end !important;

  gap: 3px !important;

  border:
    1px solid var(--fox5-border-strong) !important;

  border-radius: 20px !important;

  background:
    rgba(26,31,37,.96) !important;

  box-shadow:
    0 16px 44px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025) !important;

  backdrop-filter:
    blur(24px)
    saturate(135%);

  -webkit-backdrop-filter:
    blur(24px)
    saturate(135%);
}

#send-message-wrapper > a {
  width: 42px !important;
  height: 42px !important;

  min-width: 42px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  align-self: flex-end !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 14px !important;

  color: #89929d !important;

  text-decoration: none !important;

  transition:
    color .15s ease,
    background .15s ease,
    transform .15s ease !important;
}

#send-message-wrapper > a:hover {
  background:
    rgba(255,255,255,.055) !important;

  color:
    var(--fox5-text) !important;
}

#send-message-wrapper > a:last-of-type {
  background:
    linear-gradient(
      145deg,
      #ff8042,
      var(--fox5-accent)
    ) !important;

  color: white !important;

  box-shadow:
    0 7px 20px rgba(255,107,44,.20) !important;
}

#send-message-wrapper > a:last-of-type:hover {
  background:
    linear-gradient(
      145deg,
      #ff8b50,
      #ff7133
    ) !important;

  transform:
    translateY(-1px) !important;
}

#send-message-panel .material-icons {
  color: inherit !important;

  font-size: 22px !important;
}

#send-message-panel .material-icons.secondary {
  color: inherit !important;
}

#send-message-input.fox-v5-message-input {
  box-sizing: border-box !important;

  flex: 1 1 auto !important;

  width: auto !important;
  min-width: 0 !important;

  min-height: 42px !important;
  max-height: 150px !important;

  margin: 0 !important;

  padding: 11px 10px 9px !important;

  resize: none !important;

  border: 0 !important;
  outline: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

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

  caret-color:
    var(--fox5-accent) !important;

  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.45 !important;

  box-shadow: none !important;
}

#send-message-input.fox-v5-message-input::placeholder {
  color: #68727d !important;

  opacity: 1 !important;
}

#writing-disabled {
  flex: 1;

  padding: 12px;

  color: var(--fox5-muted) !important;
}


/* =========================================================
   REPLY PREVIEW
   ========================================================= */

#send-message-panel #reply-quote-preview {
  box-sizing: border-box;

  width: min(100%, 960px) !important;

  margin:
    0 auto 7px !important;

  border-radius:
    15px !important;

  background:
    var(--fox5-surface) !important;

  border:
    1px solid var(--fox5-border) !important;

  overflow: hidden;
}

#send-message-panel #reply-quote-preview .reply-quote {
  background:
    transparent !important;

  border-left-color:
    var(--fox5-accent) !important;
}


/* =========================================================
   ONLINE DOT
   ========================================================= */

.avatar-box .online {
  border:
    2px solid var(--fox5-sidebar) !important;

  background:
    #36c879 !important;

  box-shadow:
    0 0 0 2px rgba(54,200,121,.10) !important;
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

#messages-panel,
.scrollable-panel {
  scrollbar-width: thin;

  scrollbar-color:
    #2a3037 transparent;
}

#messages-panel::-webkit-scrollbar,
.scrollable-panel::-webkit-scrollbar {
  width: 6px;
}

#messages-panel::-webkit-scrollbar-track,
.scrollable-panel::-webkit-scrollbar-track {
  background: transparent;
}

#messages-panel::-webkit-scrollbar-thumb,
.scrollable-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background: #2a3037;
}


/* =========================================================
   RESPONSIVE DESKTOP
   ========================================================= */

@media (max-width: 1100px) and (min-width: 641px) {

  :root {
    --fox5-sidebar-width: 330px;
  }

  #scroller.chat-box {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  #send-message-panel.fox-v5-composer-panel {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* =========================================================
   MOBILE APP MODE
   ========================================================= */

@media (max-width: 640px) {

  :root {
    --fox5-sidebar-width: 100%;
    --fox5-header-height: 64px;
  }

  body {
    overscroll-behavior: none;
  }

  #side-panel {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    border-right: 0 !important;
  }

  #side-caption-panel.fox-v3-sidebar-head {
    padding:
      calc(12px + env(safe-area-inset-top))
      14px
      10px !important;

    gap: 13px 8px !important;
  }

  .fox-v3-brand-logo {
    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;

    border-radius: 14px !important;
  }

  .fox-v3-brand-name {
    font-size: 18px !important;
  }

  .fox-v4-sidebar-heading > span {
    font-size: 23px !important;
  }

  .fox-v4-dialog-tools {
    padding:
      4px 10px 8px !important;
  }

  .fox-v4-search {
    height: 44px !important;
  }

  .contact-box {
    padding:
      1px 7px
      calc(20px + env(safe-area-inset-bottom))
      !important;
  }

  .contact-box > li {
    min-height: 72px !important;

    padding: 9px !important;

    border-radius: 16px !important;
  }

  .contact-box .avatar-box,
  .contact-box .avatar,
  .contact-box .avatar-box img,
  .contact-box .avatar-box .lettertile {
    width: 52px !important;
    height: 52px !important;

    min-width: 52px !important;
  }

  #topic-caption-panel.fox-v3-chat-header {
    box-sizing: border-box;

    height:
      calc(
        var(--fox5-header-height) +
        env(safe-area-inset-top)
      ) !important;

    min-height:
      calc(
        var(--fox5-header-height) +
        env(safe-area-inset-top)
      ) !important;

    padding:
      env(safe-area-inset-top)
      9px
      0 !important;
  }

  #topic-caption-panel .avatar-box {
    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;
  }

  #topic-caption-panel .avatar-box img,
  #topic-caption-panel .avatar-box .lettertile {
    width: 42px !important;
    height: 42px !important;

    border-radius: 14px !important;
  }

  #topic-title {
    font-size: 14px !important;
  }

  .fox-v3-header-action {
    width: 36px !important;
    height: 36px !important;
  }

  #scroller.chat-box {
    width: 100% !important;

    padding:
      18px 8px
      22px !important;
  }

  .chat-box .bubble {
    max-width: 84vw !important;

    font-size: 14px !important;
  }

  #send-message-panel.fox-v5-composer-panel {
    padding:
      6px 7px
      calc(
        7px +
        env(safe-area-inset-bottom)
      ) !important;

    background:
      linear-gradient(
        to top,
        var(--fox5-chat) 82%,
        rgba(13,17,22,0)
      ) !important;
  }

  #send-message-wrapper.fox-v5-composer {
    min-height: 52px !important;

    padding: 5px 6px !important;

    border-radius: 18px !important;
  }

  #send-message-wrapper > a {
    width: 40px !important;
    height: 40px !important;

    min-width: 40px !important;

    border-radius: 13px !important;
  }

  #send-message-input.fox-v5-message-input {
    min-height: 40px !important;

    padding:
      10px 7px 8px !important;

    font-size: 16px !important;
  }

  .fox-v4-search-shortcut {
    display: none !important;
  }
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1500px) {

  :root {
    --fox5-sidebar-width: 400px;
  }

  #scroller.chat-box {
    width: min(100%, 1160px) !important;
  }

  #send-message-wrapper.fox-v5-composer,
  #send-message-panel #reply-quote-preview {
    width: min(100%, 1020px) !important;
  }
}


/* =========================================================
   FOX MESSENGER V6
   DESKTOP POLISH
   ========================================================= */

:root {
  --fox6-sidebar-width: 360px;
  --fox6-chat-column: 860px;
  --fox6-composer-width: 820px;

  --fox6-orange: #f86b32;
  --fox6-orange-hover: #ff7940;
  --fox6-orange-deep: #ee5e28;

  --fox6-bg: #0c1014;
  --fox6-sidebar: #10151a;
  --fox6-surface: #171d23;
  --fox6-surface-hover: #1c232a;

  --fox6-border: rgba(255,255,255,.065);
  --fox6-text: #f4f6f8;
  --fox6-muted: #838d98;
}


/* =========================================================
   MAIN PROPORTIONS
   ========================================================= */

@media (min-width: 641px) {

  #side-panel {
    width: var(--fox6-sidebar-width) !important;
    min-width: var(--fox6-sidebar-width) !important;
    max-width: var(--fox6-sidebar-width) !important;

    flex:
      0 0 var(--fox6-sidebar-width) !important;
  }

  #topic-view {
    min-width: 0 !important;

    overflow: hidden !important;
  }

}


/* =========================================================
   SIDEBAR
   ========================================================= */

#side-caption-panel.fox-v3-sidebar-head {
  padding:
    18px 16px
    12px !important;
}

.fox-v3-brand-logo {
  width: 44px !important;
  height: 44px !important;

  min-width: 44px !important;

  border-radius: 14px !important;
}

.fox-v3-brand-name {
  font-size: 18px !important;
}

.fox-v3-brand-subtitle {
  font-size: 10.5px !important;

  color: #77818c !important;
}

.fox-v4-sidebar-heading {
  margin-top: 1px !important;
}

.fox-v4-sidebar-heading > span {
  font-size: 23px !important;

  letter-spacing: -.035em !important;
}

.fox-v4-new-chat {
  width: 40px !important;
  height: 40px !important;

  border-radius: 13px !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

.fox-v4-dialog-tools {
  padding:
    5px 12px
    9px !important;
}

.fox-v4-search {
  height: 44px !important;

  padding:
    0 12px !important;

  border-radius: 14px !important;

  background:
    #171d23 !important;
}

.fox-v4-search input {
  font-size: 12.5px !important;
}


/* =========================================================
   CONTACTS
   ========================================================= */

.contact-box {
  padding:
    2px 9px
    22px !important;
}

.contact-box > li {
  min-height: 72px !important;

  margin:
    2px 0 !important;

  padding:
    9px 10px !important;

  border-radius:
    16px !important;
}

.contact-box .avatar-box {
  width: 52px !important;
  height: 52px !important;

  min-width: 52px !important;
}

.contact-box .avatar,
.contact-box .avatar-box img,
.contact-box .avatar-box .lettertile {
  width: 52px !important;
  height: 52px !important;

  border-radius:
    16px !important;
}

.contact-box .contact-title {
  font-size:
    13.5px !important;

  font-weight:
    680 !important;
}

.contact-box .contact-comment {
  margin-top:
    4px !important;

  font-size:
    11.5px !important;

  color:
    #7e8893 !important;
}


/* =========================================================
   PUSH ERROR
   Make development push failure unobtrusive
   ========================================================= */

#side-panel .error,
#side-panel .error-box,
#side-panel .alert-error,
#side-panel .error-message {
  margin:
    4px 12px
    8px !important;

  padding:
    9px 11px !important;

  border:
    1px solid rgba(255,104,104,.14) !important;

  border-radius:
    12px !important;

  background:
    rgba(126,46,46,.16) !important;

  color:
    #d69393 !important;

  box-shadow:
    none !important;

  font-size:
    11px !important;
}


/* =========================================================
   CHAT HEADER
   ========================================================= */

#topic-caption-panel.fox-v3-chat-header {
  height:
    68px !important;

  min-height:
    68px !important;

  padding:
    0 18px !important;

  background:
    rgba(15,20,25,.94) !important;
}

#topic-caption-panel .avatar-box {
  width:
    44px !important;

  height:
    44px !important;

  min-width:
    44px !important;

  margin-right:
    10px !important;
}

#topic-caption-panel .avatar-box img,
#topic-caption-panel .avatar-box .lettertile {
  width:
    44px !important;

  height:
    44px !important;

  border-radius:
    14px !important;
}

#topic-title {
  font-size:
    14px !important;

  font-weight:
    700 !important;
}

#topic-last-seen {
  margin-top:
    2px !important;

  font-size:
    10px !important;

  color:
    #7d8792 !important;
}

.fox-v3-chat-actions {
  gap:
    4px !important;
}

.fox-v3-header-action {
  width:
    38px !important;

  height:
    38px !important;

  border-radius:
    12px !important;
}


/* =========================================================
   CHAT BACKGROUND
   ========================================================= */

#messages-container.fox-v4-messages-container {
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(248,107,50,.027),
      transparent 26%
    ),
    radial-gradient(
      circle at 28% 80%,
      rgba(76,106,150,.018),
      transparent 30%
    ),
    var(--fox6-bg) !important;
}


/* =========================================================
   MESSAGE COLUMN
   ========================================================= */

#scroller.chat-box {
  box-sizing:
    border-box !important;

  width:
    min(
      calc(100% - 32px),
      var(--fox6-chat-column)
    ) !important;

  max-width:
    var(--fox6-chat-column) !important;

  margin:
    0 auto !important;

  padding:
    28px 10px
    30px !important;
}


/* =========================================================
   MESSAGE ROW SPACING
   ========================================================= */

.chat-box > li {
  margin-top:
    2px !important;

  margin-bottom:
    2px !important;
}

.chat-box > li + li {
  margin-top:
    3px !important;
}


/* =========================================================
   BUBBLES
   ========================================================= */

.chat-box .bubble {
  max-width:
    min(480px, 72%) !important;

  padding:
    9px 12px
    7px !important;

  font-size:
    13px !important;

  line-height:
    1.42 !important;

  box-shadow:
    none !important;
}

.chat-box .right .bubble {
  border:
    1px solid rgba(255,255,255,.035) !important;

  border-radius:
    17px 17px
    6px 17px !important;

  background:
    linear-gradient(
      145deg,
      var(--fox6-orange) 0%,
      var(--fox6-orange-deep) 100%
    ) !important;

  box-shadow:
    0 6px 18px
    rgba(238,94,40,.12) !important;
}

.chat-box .left .bubble {
  border:
    1px solid rgba(255,255,255,.045) !important;

  border-radius:
    17px 17px
    17px 6px !important;

  background:
    #1a2026 !important;

  box-shadow:
    0 4px 14px
    rgba(0,0,0,.08) !important;
}


/* =========================================================
   MESSAGE METADATA
   ========================================================= */

.chat-box .bubble .timestamp {
  font-size:
    9px !important;

  opacity:
    .66 !important;
}

.chat-box .bubble .material-icons {
  font-size:
    12px !important;
}


/* =========================================================
   DATE
   ========================================================= */

.chat-box .meta .bubble.date {
  padding:
    5px 11px !important;

  border-radius:
    999px !important;

  background:
    rgba(27,33,39,.90) !important;

  color:
    #8d97a2 !important;

  font-size:
    9px !important;

  letter-spacing:
    .035em !important;
}


/* =========================================================
   COMPOSER AREA
   ========================================================= */

#send-message-panel.fox-v5-composer-panel {
  box-sizing:
    border-box !important;

  padding:
    8px 22px
    20px !important;

  background:
    linear-gradient(
      to top,
      var(--fox6-bg) 76%,
      rgba(12,16,20,0)
    ) !important;
}


/* =========================================================
   COMPOSER
   ========================================================= */

#send-message-wrapper.fox-v5-composer {
  width:
    min(
      calc(100% - 12px),
      var(--fox6-composer-width)
    ) !important;

  min-height:
    54px !important;

  margin:
    0 auto !important;

  padding:
    6px 7px !important;

  gap:
    2px !important;

  border:
    1px solid rgba(255,255,255,.085) !important;

  border-radius:
    18px !important;

  background:
    rgba(24,30,36,.97) !important;

  box-shadow:
    0 12px 34px
    rgba(0,0,0,.20),
    inset 0 1px 0
    rgba(255,255,255,.025) !important;
}


/* =========================================================
   COMPOSER BUTTONS
   ========================================================= */

#send-message-wrapper > a {
  width:
    40px !important;

  height:
    40px !important;

  min-width:
    40px !important;

  border-radius:
    12px !important;
}

#send-message-wrapper > a:hover {
  background:
    rgba(255,255,255,.055) !important;

  color:
    #eef1f4 !important;
}

#send-message-wrapper > a:last-of-type {
  background:
    transparent !important;

  color:
    var(--fox6-orange) !important;

  box-shadow:
    none !important;
}

#send-message-wrapper > a:last-of-type:hover {
  background:
    rgba(248,107,50,.10) !important;

  color:
    var(--fox6-orange-hover) !important;

  transform:
    none !important;
}

#send-message-panel .material-icons {
  font-size:
    21px !important;
}


/* =========================================================
   INPUT
   ========================================================= */

#send-message-input.fox-v5-message-input {
  min-height:
    40px !important;

  max-height:
    130px !important;

  padding:
    10px 8px
    8px !important;

  font-size:
    13px !important;

  line-height:
    1.45 !important;
}

#send-message-input.fox-v5-message-input::placeholder {
  color:
    #69737e !important;
}


/* =========================================================
   REPLY
   ========================================================= */

#send-message-panel #reply-quote-preview {
  width:
    min(
      calc(100% - 12px),
      var(--fox6-composer-width)
    ) !important;

  margin:
    0 auto
    7px !important;

  border-radius:
    14px !important;
}


/* =========================================================
   GO TO LATEST
   ========================================================= */

#go-to-latest {
  width:
    38px !important;

  height:
    38px !important;

  border-radius:
    12px !important;

  background:
    #1b2127 !important;

  border:
    1px solid
    rgba(255,255,255,.07) !important;

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.18) !important;
}


/* =========================================================
   DESKTOP HEIGHT TUNING
   ========================================================= */

@media (min-width: 641px) and (min-height: 800px) {

  #send-message-panel.fox-v5-composer-panel {
    padding-bottom:
      24px !important;
  }

}


/* =========================================================
   VERY LARGE DESKTOP
   ========================================================= */

@media (min-width: 1500px) {

  :root {
    --fox6-sidebar-width: 370px;
    --fox6-chat-column: 900px;
    --fox6-composer-width: 860px;
  }

}


/* =========================================================
   ULTRAWIDE
   ========================================================= */

@media (min-width: 1900px) {

  :root {
    --fox6-sidebar-width: 380px;
    --fox6-chat-column: 940px;
    --fox6-composer-width: 900px;
  }

}


/* =========================================================
   MOBILE V6
   ========================================================= */

@media (max-width: 640px) {

  #side-panel {
    width:
      100% !important;

    min-width:
      100% !important;

    max-width:
      100% !important;
  }

  #scroller.chat-box {
    width:
      100% !important;

    max-width:
      none !important;

    padding:
      17px 8px
      20px !important;
  }

  .chat-box .bubble {
    max-width:
      84vw !important;

    font-size:
      14px !important;
  }

  #send-message-panel.fox-v5-composer-panel {
    padding:
      6px 7px
      calc(
        8px +
        env(safe-area-inset-bottom)
      ) !important;
  }

  #send-message-wrapper.fox-v5-composer {
    width:
      100% !important;

    min-height:
      52px !important;

    border-radius:
      17px !important;
  }

  #send-message-input.fox-v5-message-input {
    font-size:
      16px !important;
  }

  #send-message-panel #reply-quote-preview {
    width:
      100% !important;
  }

}


/* =========================================================
   FOX MESSENGER V7
   BRAND + UNIFIED CHAT GRID
   ========================================================= */

:root {
  --fox7-sidebar: 366px;
  --fox7-chat-grid: 780px;

  --fox7-orange: #f36a32;
  --fox7-orange-bright: #ff7940;
  --fox7-orange-dark: #e95b27;

  --fox7-bg: #0c1014;
  --fox7-panel: #10151a;
  --fox7-surface: #171d23;
  --fox7-surface-2: #1c232a;

  --fox7-border: rgba(255,255,255,.065);
  --fox7-border-strong: rgba(255,255,255,.085);

  --fox7-text: #f4f6f8;
  --fox7-muted: #818b96;
}


/* =========================================================
   DESKTOP FRAME
   ========================================================= */

@media (min-width: 641px) {

  #side-panel {
    width: var(--fox7-sidebar) !important;
    min-width: var(--fox7-sidebar) !important;
    max-width: var(--fox7-sidebar) !important;

    flex: 0 0 var(--fox7-sidebar) !important;
  }

}


/* =========================================================
   FOX BRAND
   ========================================================= */

.fox-v3-brand-logo {
  position: relative;

  width: 46px !important;
  height: 46px !important;

  min-width: 46px !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: hidden;

  border-radius: 15px !important;

  background:
    linear-gradient(
      145deg,
      #ff8247 0%,
      #f3652d 55%,
      #e95424 100%
    ) !important;

  box-shadow:
    0 9px 26px rgba(238,91,38,.20),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.fox-v7-logo-svg {
  width: 31px;
  height: 31px;

  display: block;
}

.fox-v7-logo-head {
  fill: rgba(255,255,255,.97);
}

.fox-v7-logo-face {
  fill: rgba(243,106,50,.95);
}

.fox-v7-logo-muzzle {
  fill: #28211e;
}

.fox-v3-brand-name {
  font-size: 18px !important;

  font-weight: 760 !important;

  letter-spacing: -.025em !important;
}

.fox-v3-brand-subtitle {
  margin-top: 3px !important;

  color: #76808b !important;
}


/* =========================================================
   SIDEBAR HEADING
   ========================================================= */

.fox-v4-sidebar-heading > span {
  font-size: 22px !important;

  font-weight: 750 !important;

  letter-spacing: -.035em !important;
}


/* =========================================================
   NEW CHAT BUTTON
   ========================================================= */

.fox-v4-new-chat {
  width: 39px !important;
  height: 39px !important;

  border-radius: 13px !important;

  background:
    rgba(243,106,50,.14) !important;

  border:
    1px solid rgba(243,106,50,.20) !important;

  color:
    var(--fox7-orange-bright) !important;

  box-shadow:
    none !important;
}

.fox-v4-new-chat:hover {
  background:
    rgba(243,106,50,.21) !important;

  border-color:
    rgba(243,106,50,.30) !important;

  transform:
    none !important;

  box-shadow:
    none !important;
}

.fox-v4-new-chat .material-icons {
  color:
    var(--fox7-orange-bright) !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

.fox-v4-search {
  border:
    1px solid rgba(255,255,255,.055) !important;

  background:
    #161c22 !important;
}

.fox-v4-search:focus-within {
  border-color:
    rgba(243,106,50,.32) !important;

  background:
    #181e24 !important;
}


/* =========================================================
   SELECTED CONVERSATION
   ========================================================= */

.contact-box > li.selected {
  border:
    1px solid rgba(243,106,50,.12) !important;

  background:
    linear-gradient(
      90deg,
      rgba(243,106,50,.145),
      rgba(243,106,50,.055)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018) !important;
}

.contact-box > li.selected::after {
  left: 0 !important;

  top: 16px !important;
  bottom: 16px !important;

  width: 3px !important;

  border-radius:
    0 4px 4px 0 !important;

  background:
    var(--fox7-orange) !important;

  box-shadow:
    0 0 12px rgba(243,106,50,.35) !important;
}

.contact-box > li:hover:not(.selected) {
  background:
    rgba(255,255,255,.027) !important;
}


/* =========================================================
   CHAT HEADER
   ========================================================= */

#topic-caption-panel.fox-v3-chat-header {
  height: 66px !important;
  min-height: 66px !important;

  padding:
    0 17px !important;

  background:
    rgba(15,20,25,.95) !important;

  border-bottom:
    1px solid rgba(255,255,255,.055) !important;
}

#topic-title {
  font-size:
    13.5px !important;

  font-weight:
    690 !important;
}

#topic-last-seen {
  color:
    #76818c !important;
}

.fox-v3-header-action {
  color:
    #78838e !important;
}

.fox-v3-header-action:hover {
  background:
    rgba(255,255,255,.04) !important;

  color:
    #e8ebee !important;
}


/* =========================================================
   CHAT CANVAS
   ========================================================= */

#messages-container.fox-v4-messages-container {
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255,255,255,.008),
      transparent 38%
    ),
    var(--fox7-bg) !important;
}


/* =========================================================
   UNIFIED CHAT GRID
   Messages and composer use the same horizontal grid.
   ========================================================= */

#scroller.chat-box {
  box-sizing: border-box !important;

  width:
    min(
      calc(100% - 40px),
      var(--fox7-chat-grid)
    ) !important;

  max-width:
    var(--fox7-chat-grid) !important;

  margin:
    0 auto !important;

  padding:
    27px 0
    28px !important;
}

#send-message-wrapper.fox-v5-composer {
  box-sizing: border-box !important;

  width:
    min(
      calc(100% - 40px),
      var(--fox7-chat-grid)
    ) !important;

  max-width:
    var(--fox7-chat-grid) !important;

  margin:
    0 auto !important;
}

#send-message-panel #reply-quote-preview {
  box-sizing: border-box !important;

  width:
    min(
      calc(100% - 40px),
      var(--fox7-chat-grid)
    ) !important;

  max-width:
    var(--fox7-chat-grid) !important;

  margin:
    0 auto 7px !important;
}


/* =========================================================
   MESSAGE GROUPING
   ========================================================= */

.chat-box > li {
  margin-top:
    2px !important;

  margin-bottom:
    2px !important;
}

.chat-box > li + li {
  margin-top:
    3px !important;
}


/* =========================================================
   BUBBLES
   ========================================================= */

.chat-box .bubble {
  max-width:
    min(470px, 72%) !important;

  padding:
    9px 12px
    7px !important;

  font-size:
    13px !important;

  line-height:
    1.42 !important;

  letter-spacing:
    -.004em !important;
}

.chat-box .right .bubble {
  border:
    1px solid rgba(255,255,255,.035) !important;

  border-radius:
    17px 17px
    6px 17px !important;

  background:
    linear-gradient(
      145deg,
      var(--fox7-orange) 0%,
      var(--fox7-orange-dark) 100%
    ) !important;

  box-shadow:
    0 5px 16px
    rgba(233,91,39,.11) !important;
}

.chat-box .left .bubble {
  border:
    1px solid rgba(255,255,255,.045) !important;

  border-radius:
    17px 17px
    17px 6px !important;

  background:
    #1a2026 !important;

  box-shadow:
    0 4px 14px
    rgba(0,0,0,.075) !important;
}


/* =========================================================
   MESSAGE META
   ========================================================= */

.chat-box .bubble .timestamp {
  font-size:
    8.5px !important;

  font-weight:
    500 !important;

  opacity:
    .64 !important;
}

.chat-box .right .bubble .timestamp {
  color:
    rgba(255,255,255,.82) !important;
}

.chat-box .right .bubble .material-icons {
  color:
    rgba(255,255,255,.76) !important;
}


/* =========================================================
   DATE CHIP
   ========================================================= */

.chat-box .meta .bubble.date {
  padding:
    5px 11px !important;

  border:
    1px solid rgba(255,255,255,.06) !important;

  background:
    rgba(27,33,39,.90) !important;

  color:
    #8b959f !important;

  box-shadow:
    none !important;
}


/* =========================================================
   COMPOSER ZONE
   ========================================================= */

#send-message-panel.fox-v5-composer-panel {
  padding:
    8px 0
    18px !important;

  background:
    linear-gradient(
      to top,
      var(--fox7-bg) 72%,
      rgba(12,16,20,0)
    ) !important;
}

#send-message-wrapper.fox-v5-composer {
  min-height:
    54px !important;

  padding:
    6px !important;

  border:
    1px solid rgba(255,255,255,.075) !important;

  border-radius:
    18px !important;

  background:
    rgba(23,29,35,.97) !important;

  box-shadow:
    0 10px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.022) !important;
}


/* =========================================================
   COMPOSER ACTIONS
   ========================================================= */

#send-message-wrapper > a {
  width:
    39px !important;

  height:
    39px !important;

  min-width:
    39px !important;

  border-radius:
    12px !important;

  color:
    #7e8994 !important;
}

#send-message-wrapper > a:hover {
  background:
    rgba(255,255,255,.045) !important;

  color:
    #e6e9ec !important;
}

#send-message-wrapper > a:last-of-type {
  color:
    var(--fox7-orange-bright) !important;

  background:
    rgba(243,106,50,.075) !important;
}

#send-message-wrapper > a:last-of-type:hover {
  color:
    #ff8954 !important;

  background:
    rgba(243,106,50,.13) !important;
}


/* =========================================================
   INPUT
   ========================================================= */

#send-message-input.fox-v5-message-input {
  padding:
    10px 8px
    8px !important;

  font-size:
    13px !important;

  color:
    #edf0f2 !important;
}

#send-message-input.fox-v5-message-input::placeholder {
  color:
    #626d78 !important;
}


/* =========================================================
   AVATARS
   ========================================================= */

.contact-box .avatar-box,
#topic-caption-panel .avatar-box {
  position: relative;
}

.contact-box .avatar-box img,
#topic-caption-panel .avatar-box img {
  object-fit: cover;
}


/* =========================================================
   ONLINE
   ========================================================= */

.avatar-box .online {
  width:
    10px !important;

  height:
    10px !important;

  right:
    0 !important;

  bottom:
    0 !important;

  border:
    2px solid #10151a !important;

  border-radius:
    50% !important;

  background:
    #39c97b !important;

  box-shadow:
    0 0 0 2px
    rgba(57,201,123,.08) !important;
}


/* =========================================================
   RESPONSIVE DESKTOP
   ========================================================= */

@media (max-width: 1100px) and (min-width: 641px) {

  :root {
    --fox7-sidebar: 330px;
    --fox7-chat-grid: 680px;
  }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1500px) {

  :root {
    --fox7-sidebar: 370px;
    --fox7-chat-grid: 820px;
  }

}


/* =========================================================
   ULTRAWIDE
   ========================================================= */

@media (min-width: 1900px) {

  :root {
    --fox7-sidebar: 380px;
    --fox7-chat-grid: 860px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  :root {
    --fox7-sidebar: 100%;
    --fox7-chat-grid: 100%;
  }

  .fox-v3-brand-logo {
    width:
      42px !important;

    height:
      42px !important;

    min-width:
      42px !important;

    border-radius:
      14px !important;
  }

  .fox-v7-logo-svg {
    width:
      28px;

    height:
      28px;
  }

  #scroller.chat-box {
    width:
      100% !important;

    max-width:
      none !important;

    padding:
      17px 8px
      20px !important;
  }

  #send-message-panel.fox-v5-composer-panel {
    padding:
      6px 7px
      calc(
        8px +
        env(safe-area-inset-bottom)
      ) !important;
  }

  #send-message-wrapper.fox-v5-composer {
    width:
      100% !important;

    max-width:
      none !important;
  }

  #send-message-panel #reply-quote-preview {
    width:
      100% !important;

    max-width:
      none !important;
  }

  .chat-box .bubble {
    max-width:
      84vw !important;

    font-size:
      14px !important;
  }

  #send-message-input.fox-v5-message-input {
    font-size:
      16px !important;
  }

}


/* =========================================================
   FOX MESSENGER V8
   CHAT WALLPAPER
   ========================================================= */

:root {
  --fox8-wallpaper:
    url("../img/fox/chat-wallpaper.jpg");

  --fox8-overlay:
    rgba(5, 10, 16, .43);

  --fox8-glass:
    rgba(14, 20, 27, .78);

  --fox8-glass-strong:
    rgba(16, 22, 29, .91);
}


/* =========================================================
   CHAT CANVAS
   ========================================================= */

#messages-container.fox-v4-messages-container {
  position:
    relative !important;

  isolation:
    isolate !important;

  overflow:
    hidden !important;

  background:
    #071019 !important;
}


/* =========================================================
   WALLPAPER
   ========================================================= */

#messages-container.fox-v4-messages-container::before {
  content:
    "" !important;

  position:
    absolute !important;

  inset:
    0 !important;

  z-index:
    -3 !important;

  pointer-events:
    none !important;

  background-image:
    var(--fox8-wallpaper) !important;

  background-position:
    center center !important;

  background-repeat:
    no-repeat !important;

  background-size:
    cover !important;

  transform:
    scale(1.015);

  filter:
    saturate(.88)
    brightness(.76)
    contrast(1.04) !important;
}


/* =========================================================
   DARK OVERLAY
   ========================================================= */

#messages-container.fox-v4-messages-container::after {
  content:
    "" !important;

  position:
    absolute !important;

  inset:
    0 !important;

  z-index:
    -2 !important;

  pointer-events:
    none !important;

  background:
    linear-gradient(
      180deg,
      rgba(5,10,16,.46) 0%,
      rgba(5,10,16,.34) 30%,
      rgba(5,10,16,.31) 62%,
      rgba(5,10,16,.48) 100%
    ),
    radial-gradient(
      circle at 72% 30%,
      rgba(0,70,130,.07),
      transparent 42%
    ),
    radial-gradient(
      circle at 18% 72%,
      rgba(243,106,50,.025),
      transparent 38%
    ) !important;
}


/* =========================================================
   MESSAGE LAYER
   ========================================================= */

#messages-panel {
  position:
    relative !important;

  z-index:
    1 !important;

  background:
    transparent !important;
}

#scroller.chat-box {
  position:
    relative !important;

  z-index:
    2 !important;

  background:
    transparent !important;
}


/* =========================================================
   DATE CHIP ON WALLPAPER
   ========================================================= */

.chat-box .meta .bubble.date {
  border:
    1px solid rgba(255,255,255,.10) !important;

  background:
    rgba(12,18,25,.72) !important;

  color:
    rgba(229,235,241,.76) !important;

  -webkit-backdrop-filter:
    blur(14px) saturate(120%);

  backdrop-filter:
    blur(14px) saturate(120%);

  box-shadow:
    0 5px 20px rgba(0,0,0,.13) !important;
}


/* =========================================================
   OUTGOING MESSAGE
   ========================================================= */

.chat-box .right .bubble {
  background:
    linear-gradient(
      145deg,
      rgba(247,108,49,.97) 0%,
      rgba(229,83,32,.97) 100%
    ) !important;

  border:
    1px solid rgba(255,255,255,.07) !important;

  box-shadow:
    0 7px 24px rgba(0,0,0,.17),
    0 3px 14px rgba(232,87,34,.11) !important;
}


/* =========================================================
   INCOMING MESSAGE GLASS
   ========================================================= */

.chat-box .left .bubble {
  background:
    rgba(17,24,32,.84) !important;

  border:
    1px solid rgba(255,255,255,.08) !important;

  -webkit-backdrop-filter:
    blur(14px) saturate(118%);

  backdrop-filter:
    blur(14px) saturate(118%);

  box-shadow:
    0 7px 24px rgba(0,0,0,.17) !important;
}


/* =========================================================
   COMPOSER GRADIENT ZONE
   ========================================================= */

#send-message-panel.fox-v5-composer-panel {
  position:
    relative !important;

  z-index:
    5 !important;

  background:
    linear-gradient(
      to top,
      rgba(6,11,17,.94) 0%,
      rgba(6,11,17,.72) 54%,
      rgba(6,11,17,0) 100%
    ) !important;
}


/* =========================================================
   GLASS COMPOSER
   ========================================================= */

#send-message-wrapper.fox-v5-composer {
  background:
    rgba(15,21,28,.80) !important;

  border:
    1px solid rgba(255,255,255,.105) !important;

  -webkit-backdrop-filter:
    blur(22px) saturate(135%);

  backdrop-filter:
    blur(22px) saturate(135%);

  box-shadow:
    0 16px 42px rgba(0,0,0,.31),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}


/* =========================================================
   CHAT HEADER GLASS
   ========================================================= */

#topic-caption-panel.fox-v3-chat-header {
  position:
    relative !important;

  z-index:
    20 !important;

  background:
    rgba(12,17,23,.94) !important;

  -webkit-backdrop-filter:
    blur(18px) saturate(120%);

  backdrop-filter:
    blur(18px) saturate(120%);
}


/* =========================================================
   GO TO LATEST GLASS
   ========================================================= */

#go-to-latest {
  background:
    rgba(18,25,33,.82) !important;

  border:
    1px solid rgba(255,255,255,.09) !important;

  -webkit-backdrop-filter:
    blur(16px);

  backdrop-filter:
    blur(16px);
}


/* =========================================================
   MOBILE WALLPAPER
   ========================================================= */

@media (max-width: 640px) {

  #messages-container.fox-v4-messages-container::before {
    background-position:
      center center !important;

    transform:
      scale(1.02);

    filter:
      saturate(.84)
      brightness(.68)
      contrast(1.05) !important;
  }

  #messages-container.fox-v4-messages-container::after {
    background:
      linear-gradient(
        180deg,
        rgba(5,10,16,.50) 0%,
        rgba(5,10,16,.34) 34%,
        rgba(5,10,16,.37) 68%,
        rgba(5,10,16,.58) 100%
      ) !important;
  }

  #send-message-wrapper.fox-v5-composer {
    background:
      rgba(15,21,28,.88) !important;
  }

}


/* =========================================================
   REDUCED TRANSPARENCY FALLBACK
   ========================================================= */

@media (prefers-reduced-transparency: reduce) {

  .chat-box .left .bubble {
    background:
      #151d25 !important;
  }

  #send-message-wrapper.fox-v5-composer {
    background:
      #111820 !important;
  }

}


/* =========================================================
   FOX MESSENGER V8.1
   WALLPAPER VISIBILITY FIX
   ========================================================= */


/* =========================================================
   REMOVE OLD V8 PSEUDO WALLPAPER
   ========================================================= */

#messages-container.fox-v4-messages-container::before,
#messages-container.fox-v4-messages-container::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   REAL VISIBLE CHAT WALLPAPER
   ========================================================= */

#messages-container.fox-v4-messages-container {
  position: relative !important;

  isolation: auto !important;

  overflow: hidden !important;

  background-color: #071019 !important;

  background-image:
    linear-gradient(
      180deg,
      rgba(3,8,14,.18) 0%,
      rgba(3,8,14,.08) 42%,
      rgba(3,8,14,.20) 100%
    ),
    url("../img/fox/chat-wallpaper.jpg") !important;

  background-position:
    center center,
    center center !important;

  background-repeat:
    no-repeat,
    no-repeat !important;

  background-size:
    cover,
    cover !important;

  background-attachment:
    local,
    local !important;
}


/* =========================================================
   REMOVE TINODE INNER BACKGROUNDS
   ========================================================= */

#messages-panel {
  position: relative !important;

  z-index: 1 !important;

  background:
    transparent !important;

  background-color:
    transparent !important;
}

#scroller.chat-box {
  position: relative !important;

  z-index: 2 !important;

  background:
    transparent !important;

  background-color:
    transparent !important;
}

#topic-view #messages-panel,
#topic-view #messages-container,
#topic-view #scroller {
  background-color:
    transparent !important;
}


/* =========================================================
   WALLPAPER READABILITY LAYER
   This layer is ABOVE the photo but BELOW messages.
   ========================================================= */

#messages-panel::before {
  content:
    "" !important;

  position:
    absolute !important;

  inset:
    0 !important;

  z-index:
    -1 !important;

  pointer-events:
    none !important;

  background:
    linear-gradient(
      180deg,
      rgba(4,9,15,.22) 0%,
      rgba(4,9,15,.10) 30%,
      rgba(4,9,15,.12) 66%,
      rgba(4,9,15,.30) 100%
    ) !important;
}


/* =========================================================
   MESSAGE BUBBLES ON IMAGE
   ========================================================= */

.chat-box .right .bubble {
  background:
    linear-gradient(
      145deg,
      #f87336 0%,
      #ed5b27 100%
    ) !important;

  border:
    1px solid rgba(255,255,255,.08) !important;

  box-shadow:
    0 8px 25px rgba(0,0,0,.23),
    0 4px 18px rgba(238,91,39,.14) !important;
}

.chat-box .left .bubble {
  background:
    rgba(12,20,29,.82) !important;

  border:
    1px solid rgba(255,255,255,.10) !important;

  -webkit-backdrop-filter:
    blur(16px) saturate(125%);

  backdrop-filter:
    blur(16px) saturate(125%);

  box-shadow:
    0 8px 25px rgba(0,0,0,.22) !important;
}


/* =========================================================
   DATE CHIP
   ========================================================= */

.chat-box .meta .bubble.date {
  background:
    rgba(8,15,23,.70) !important;

  border:
    1px solid rgba(255,255,255,.12) !important;

  color:
    rgba(238,243,247,.84) !important;

  -webkit-backdrop-filter:
    blur(18px) saturate(125%);

  backdrop-filter:
    blur(18px) saturate(125%);
}


/* =========================================================
   COMPOSER OVER WALLPAPER
   ========================================================= */

#send-message-panel.fox-v5-composer-panel {
  background:
    linear-gradient(
      to top,
      rgba(4,9,15,.88) 0%,
      rgba(4,9,15,.55) 55%,
      rgba(4,9,15,0) 100%
    ) !important;
}

#send-message-wrapper.fox-v5-composer {
  background:
    rgba(9,17,25,.78) !important;

  border:
    1px solid rgba(255,255,255,.13) !important;

  -webkit-backdrop-filter:
    blur(24px) saturate(140%);

  backdrop-filter:
    blur(24px) saturate(140%);

  box-shadow:
    0 18px 46px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  #messages-container.fox-v4-messages-container {
    background-image:
      linear-gradient(
        180deg,
        rgba(3,8,14,.24) 0%,
        rgba(3,8,14,.11) 44%,
        rgba(3,8,14,.28) 100%
      ),
      url("../img/fox/chat-wallpaper.jpg") !important;

    background-position:
      center center,
      center center !important;

    background-size:
      cover,
      cover !important;
  }

  #send-message-wrapper.fox-v5-composer {
    background:
      rgba(9,17,25,.86) !important;
  }

}


/* =========================================================
   FOX MESSENGER V9
   NEW CHAT EXPERIENCE
   ========================================================= */

.fox-v9-new-chat {
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 82% -10%,
      rgba(247, 101, 43, .09),
      transparent 34%
    ),
    #0e1319;
  color: #f5f7f9;
}


/* =========================================================
   HERO
   ========================================================= */

.fox-v9-new-chat-hero {
  display: flex;
  align-items: center;
  gap: 14px;

  padding: 22px 22px 16px;
}

.fox-v9-new-chat-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 46px;

  width: 46px;
  height: 46px;

  border-radius: 15px;

  color: #fff;

  background:
    linear-gradient(
      145deg,
      #ff7b3e,
      #ed5726
    );

  box-shadow:
    0 10px 28px rgba(239, 88, 37, .23);
}

.fox-v9-new-chat-icon .material-icons {
  font-size: 22px;
}

.fox-v9-new-chat-copy {
  min-width: 0;
}

.fox-v9-new-chat-title {
  color: #f5f7f9;

  font-size: 21px;
  line-height: 1.15;
  font-weight: 720;

  letter-spacing: -.35px;
}

.fox-v9-new-chat-subtitle {
  margin-top: 5px;

  color: #7f8995;

  font-size: 12.5px;
  line-height: 1.35;
}


/* =========================================================
   TABS
   ========================================================= */

.fox-v9-tabs {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 5px;

  margin:
    0 16px 17px;

  padding: 4px;

  border:
    1px solid rgba(255,255,255,.055);

  border-radius: 14px;

  background:
    rgba(255,255,255,.027);
}

.fox-v9-tabs > a {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  min-width: 0;
  height: 38px;

  padding: 0 8px;

  border-radius: 10px;

  color: #737e89 !important;

  text-decoration: none !important;

  font-size: 11.5px;
  font-weight: 650;

  transition:
    color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.fox-v9-tabs > a .material-icons {
  font-size: 17px;
}

.fox-v9-tabs > a:hover {
  color: #cbd1d7 !important;

  background:
    rgba(255,255,255,.035);
}

.fox-v9-tabs > a.active {
  color: #fff !important;

  background:
    linear-gradient(
      145deg,
      rgba(247,105,48,.98),
      rgba(222,75,26,.98)
    );

  box-shadow:
    0 7px 20px rgba(224,79,29,.18);
}


/* =========================================================
   CONTENT
   ========================================================= */

.fox-v9-new-chat-content {
  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;

  padding-bottom: 20px;
}

.fox-v9-find-section {
  min-height: 100%;
}


/* =========================================================
   SEARCH INTRO
   ========================================================= */

.fox-v9-search-heading {
  padding:
    1px 20px 10px;
}

.fox-v9-search-title {
  color: #e9edf1;

  font-size: 14px;
  font-weight: 680;
}

.fox-v9-search-description {
  margin-top: 4px;

  color: #697581;

  font-size: 11.5px;
  line-height: 1.4;
}


/* =========================================================
   SEARCH
   ========================================================= */

.fox-v9-search-form.panel-form {
  margin: 0 !important;
  padding: 0 16px 14px !important;

  background: transparent !important;
}

.fox-v9-search-box.panel-form-row {
  display: flex !important;
  align-items: center !important;

  gap: 8px !important;

  min-height: 48px !important;

  margin: 0 !important;
  padding: 0 13px !important;

  border:
    1px solid rgba(255,255,255,.075) !important;

  border-radius: 14px !important;

  background:
    #151b22 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018);

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.fox-v9-search-box.panel-form-row:focus-within {
  border-color:
    rgba(246,103,46,.55) !important;

  background:
    #171e26 !important;

  box-shadow:
    0 0 0 3px rgba(244,96,39,.08);
}

.fox-v9-search-icon {
  flex: 0 0 auto;

  color: #65717d !important;

  font-size: 20px !important;
}

.fox-v9-search-input {
  flex: 1 1 auto !important;

  min-width: 0 !important;
  height: 46px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  color:
    #eef2f5 !important;

  font-size:
    13.5px !important;
}

.fox-v9-search-input::placeholder {
  color:
    #596570 !important;
}

.fox-v9-search-box > a,
.fox-v9-search-box > span {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 26px;

  width: 26px;
  height: 26px;

  color: #68737e !important;

  text-decoration: none !important;
}

.fox-v9-search-box > a .material-icons,
.fox-v9-search-box > span .material-icons {
  font-size: 18px !important;
}


/* =========================================================
   RESULTS
   ========================================================= */

.fox-v9-results-label {
  padding:
    0 20px 8px;

  color:
    #59646f;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .7px;

  text-transform:
    uppercase;
}

.fox-v9-results {
  padding:
    0 9px;
}

.fox-v9-results .scrollable-panel {
  overflow:
    visible !important;
}

.fox-v9-results ul.contact-box {
  padding:
    0 !important;
}

.fox-v9-results ul.contact-box > li {
  margin:
    2px 0 !important;

  border-radius:
    14px !important;

  border:
    1px solid transparent;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.fox-v9-results ul.contact-box > li:hover {
  background:
    rgba(255,255,255,.035) !important;

  border-color:
    rgba(255,255,255,.045);

  transform:
    translateY(-1px);
}


/* =========================================================
   GROUP / ID CARDS
   ========================================================= */

.fox-v9-new-chat-section {
  margin:
    0 16px;

  padding:
    18px;

  border:
    1px solid rgba(255,255,255,.06);

  border-radius:
    18px;

  background:
    rgba(255,255,255,.025);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018);
}

.fox-v9-section-heading {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom:
    18px;
}

.fox-v9-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 40px;

  width: 40px;
  height: 40px;

  border-radius:
    13px;

  color:
    #ff7135;

  background:
    rgba(244,96,40,.105);

  border:
    1px solid rgba(244,96,40,.13);
}

.fox-v9-section-icon .material-icons {
  font-size:
    20px;
}

.fox-v9-section-title {
  color:
    #e9edf1;

  font-size:
    14px;

  font-weight:
    700;
}

.fox-v9-section-description {
  margin-top:
    3px;

  color:
    #697581;

  font-size:
    11px;

  line-height:
    1.35;
}


/* =========================================================
   LEGACY FORMS INSIDE FOX V9
   ========================================================= */

.fox-v9-new-chat-section .panel-form {
  margin:
    0 !important;

  padding:
    0 !important;

  background:
    transparent !important;
}

.fox-v9-new-chat-section .panel-form-row {
  margin-bottom:
    12px !important;
}

.fox-v9-new-chat-section input[type="text"],
.fox-v9-new-chat-section input[type="email"],
.fox-v9-new-chat-section textarea {
  box-sizing:
    border-box !important;

  width:
    100% !important;

  min-height:
    46px !important;

  padding:
    0 13px !important;

  border:
    1px solid rgba(255,255,255,.075) !important;

  border-radius:
    13px !important;

  outline:
    none !important;

  background:
    #151b22 !important;

  color:
    #eef2f5 !important;

  box-shadow:
    none !important;
}

.fox-v9-new-chat-section input:focus,
.fox-v9-new-chat-section textarea:focus {
  border-color:
    rgba(246,103,46,.55) !important;

  box-shadow:
    0 0 0 3px rgba(244,96,39,.08) !important;
}

.fox-v9-new-chat-section .dialog-buttons button.primary {
  min-height:
    42px !important;

  padding:
    0 17px !important;

  border:
    0 !important;

  border-radius:
    12px !important;

  color:
    #fff !important;

  background:
    linear-gradient(
      145deg,
      #ff7338,
      #e95222
    ) !important;

  box-shadow:
    0 8px 22px rgba(232,82,32,.18);
}

.fox-v9-id-section .qr-code {
  display: flex;

  justify-content:
    center;

  margin-top:
    10px;

  padding:
    16px;

  border-radius:
    16px;

  background:
    #fff;

  width:
    fit-content;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .fox-v9-new-chat-hero {
    padding:
      18px 15px 14px;
  }

  .fox-v9-new-chat-icon {
    width:
      42px;

    height:
      42px;

    flex-basis:
      42px;

    border-radius:
      13px;
  }

  .fox-v9-new-chat-title {
    font-size:
      19px;
  }

  .fox-v9-new-chat-subtitle {
    font-size:
      11.5px;
  }

  .fox-v9-tabs {
    margin:
      0 11px 15px;
  }

  .fox-v9-tabs > a {
    height:
      40px;

    font-size:
      11px;
  }

  .fox-v9-tabs > a .material-icons {
    font-size:
      16px;
  }

  .fox-v9-search-heading {
    padding:
      0 15px 9px;
  }

  .fox-v9-search-form.panel-form {
    padding:
      0 11px 13px !important;
  }

  .fox-v9-results-label {
    padding-left:
      15px;

    padding-right:
      15px;
  }

  .fox-v9-new-chat-section {
    margin:
      0 11px;

    padding:
      15px;

    border-radius:
      16px;
  }

}


/* =========================================================
   FOX MESSENGER V10
   NEW CHAT POLISH
   ========================================================= */


/* ---------------------------------------------------------
   REMOVE LEGACY CONTACT-LIST SEARCH INSIDE NEW CHAT

   SearchContacts above is now the only search field.
   --------------------------------------------------------- */

.fox-v9-results .fox-v4-search-shell,
.fox-v9-results .fox-v4-search,
.fox-v9-results .fox-search-shell,
.fox-v9-results .contact-search,
.fox-v9-results .search-contacts,
.fox-v9-results > .search-box {
  display: none !important;
}


/* Tinode/FOX contact list may contain the V4 search as
   the first direct block before the contact list. */

.fox-v9-results .scrollable-panel > .fox-v4-search-shell,
.fox-v9-results .scrollable-panel > .fox-v4-search,
.fox-v9-results .scrollable-panel > div:has(> input.search) {
  display: none !important;
}


/* ---------------------------------------------------------
   FIND PEOPLE
   --------------------------------------------------------- */

.fox-v9-find-section {
  position: relative;
}

.fox-v9-search-heading {
  padding-top: 2px;
}

.fox-v9-search-title {
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -.12px;
}

.fox-v9-search-description {
  max-width: 260px;
}


/* ---------------------------------------------------------
   MAIN SEARCH FIELD
   --------------------------------------------------------- */

.fox-v9-search-box.panel-form-row {
  position: relative;

  min-height: 50px !important;

  border-color:
    rgba(255,255,255,.075) !important;

  background:
    rgba(23,29,36,.94) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 8px 24px rgba(0,0,0,.08);
}

.fox-v9-search-box.panel-form-row:hover {
  border-color:
    rgba(255,255,255,.11) !important;
}

.fox-v9-search-box.panel-form-row:focus-within {
  border-color:
    rgba(247,104,46,.75) !important;

  box-shadow:
    0 0 0 3px rgba(247,104,46,.09),
    0 10px 28px rgba(0,0,0,.10);
}

.fox-v9-search-input {
  font-size:
    13px !important;

  font-weight:
    450;
}

.fox-v9-search-input::placeholder {
  opacity:
    1;

  color:
    #59636e !important;
}


/* ---------------------------------------------------------
   RESULTS TITLE
   --------------------------------------------------------- */

.fox-v9-results-label {
  margin-top:
    2px;

  padding-top:
    2px;

  color:
    #626d78;

  font-size:
    9.5px;

  letter-spacing:
    .8px;
}


/* ---------------------------------------------------------
   CONTACT RESULTS
   --------------------------------------------------------- */

.fox-v9-results {
  padding:
    0 10px 18px;
}

.fox-v9-results ul.contact-box {
  margin:
    0 !important;

  padding:
    0 !important;

  list-style:
    none !important;
}

.fox-v9-results ul.contact-box > li {
  position:
    relative;

  overflow:
    hidden;

  min-height:
    64px;

  margin:
    3px 0 !important;

  padding:
    0 !important;

  border:
    1px solid transparent !important;

  border-radius:
    15px !important;

  background:
    transparent !important;
}

.fox-v9-results ul.contact-box > li:hover {
  border-color:
    rgba(255,255,255,.055) !important;

  background:
    rgba(255,255,255,.035) !important;

  transform:
    none;
}

.fox-v9-results ul.contact-box > li:active {
  background:
    rgba(247,104,46,.07) !important;
}


/* Orange accent on hover */

.fox-v9-results ul.contact-box > li::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    14px;

  bottom:
    14px;

  width:
    2px;

  border-radius:
    0 3px 3px 0;

  background:
    #f7682e;

  opacity:
    0;

  transform:
    scaleY(.5);

  transition:
    opacity .15s ease,
    transform .15s ease;
}

.fox-v9-results ul.contact-box > li:hover::before {
  opacity:
    1;

  transform:
    scaleY(1);
}


/* ---------------------------------------------------------
   EMPTY RESULT / EMPTY CONTACT LIST
   --------------------------------------------------------- */

.fox-v9-results .empty-list,
.fox-v9-results .empty-list-message,
.fox-v9-results .no-contacts,
.fox-v9-results .placeholder {
  color:
    #626d78 !important;

  font-size:
    12px !important;

  line-height:
    1.45 !important;
}


/* ---------------------------------------------------------
   RIGHT SIDE WHILE NEW CHAT IS OPEN
   --------------------------------------------------------- */

body:has(.fox-v9-new-chat) #topic-view {
  position:
    relative !important;

  overflow:
    hidden !important;

  background:
    linear-gradient(
      rgba(3,10,17,.34),
      rgba(3,10,17,.48)
    ),
    url("../img/fox/chat-wallpaper.jpg")
    center center / cover no-repeat !important;
}


/* Hide the previously opened conversation only while
   New Chat is active. */

body:has(.fox-v9-new-chat) #topic-view > * {
  visibility:
    hidden !important;

  pointer-events:
    none !important;
}


/* ---------------------------------------------------------
   FOX EMPTY STATE
   --------------------------------------------------------- */

body:has(.fox-v9-new-chat) #topic-view::before {
  content:
    "FOX";

  visibility:
    visible !important;

  position:
    absolute;

  z-index:
    100;

  left:
    50%;

  top:
    calc(50% - 36px);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    66px;

  height:
    66px;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:
    22px;

  transform:
    translate(-50%, -50%);

  color:
    #fff;

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    1px;

  background:
    linear-gradient(
      145deg,
      rgba(255,119,57,.98),
      rgba(229,77,27,.98)
    );

  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    0 8px 30px rgba(237,84,31,.16);

  pointer-events:
    none;
}


body:has(.fox-v9-new-chat) #topic-view::after {
  content:
    "Найдите человека и начните общение";

  visibility:
    visible !important;

  position:
    absolute;

  z-index:
    101;

  left:
    50%;

  top:
    calc(50% + 28px);

  width:
    min(360px, 80%);

  transform:
    translateX(-50%);

  color:
    rgba(237,242,246,.86);

  font-size:
    14px;

  font-weight:
    570;

  line-height:
    1.4;

  text-align:
    center;

  text-shadow:
    0 2px 12px rgba(0,0,0,.55);

  pointer-events:
    none;
}


/* Soft vignette for the new-chat empty state */

body:has(.fox-v9-new-chat) #topic-view {
  box-shadow:
    inset 0 0 140px rgba(0,0,0,.28);
}


/* ---------------------------------------------------------
   SIDEBAR NEW CHAT LAYOUT
   --------------------------------------------------------- */

body:has(.fox-v9-new-chat) .fox-v9-new-chat {
  animation:
    foxV10PanelIn .18s ease-out;
}

@keyframes foxV10PanelIn {
  from {
    opacity: .5;
    transform: translateX(-5px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ---------------------------------------------------------
   TABS POLISH
   --------------------------------------------------------- */

.fox-v9-tabs > a {
  overflow:
    hidden;

  white-space:
    nowrap;
}

.fox-v9-tabs > a.active {
  box-shadow:
    0 8px 22px rgba(229,79,28,.20),
    inset 0 1px 0 rgba(255,255,255,.12);
}


/* ---------------------------------------------------------
   BACK BUTTON POLISH
   --------------------------------------------------------- */

body:has(.fox-v9-new-chat) #side-caption-panel button,
body:has(.fox-v9-new-chat) #side-caption-panel a {
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}


/* ---------------------------------------------------------
   MOBILE NEW CHAT
   --------------------------------------------------------- */

@media (max-width: 640px) {

  body:has(.fox-v9-new-chat) #topic-view {
    display:
      none !important;
  }

  .fox-v9-new-chat {
    width:
      100% !important;

    max-width:
      none !important;
  }

  .fox-v9-tabs {
    gap:
      4px;
  }

  .fox-v9-tabs > a {
    padding:
      0 6px;
  }

  .fox-v9-search-box.panel-form-row {
    min-height:
      52px !important;

    border-radius:
      15px !important;
  }

  .fox-v9-results {
    padding-left:
      7px;

    padding-right:
      7px;
  }

}


/* =========================================================
   END FOX V10
   ========================================================= */