/* =========================================================

   NOMAD PARK PAD

   MESSAGES + MAP CHATS

   POLISHED MASTER FILE

========================================================= */

/* =========================================================

   BRAND VARIABLES

========================================================= */

:root {

  --message-forest: #0d3b2f;

  --message-forest-deep: #062f26;

  --message-forest-soft: #174f40;

  --message-cream: #fffaf2;

  --message-sand: #f3eadc;

  --message-orange: #f36b16;

  --message-gold: #d7ad4d;

  --message-gold-soft: #f0d798;

  --message-text: #173c31;

  --message-muted: #718079;

  --message-border: rgba(13, 59, 47, 0.12);

  --message-shadow:

    0 18px 45px rgba(13, 59, 47, 0.12);

}

/* =========================================================

   PAGE

========================================================= */

html {

  width: 100%;

  max-width: 100%;

  overflow-x: clip;

  -webkit-text-size-adjust: 100%;

  text-size-adjust: 100%;

}

body {

  width: 100%;

  max-width: 100%;

  margin: 0;

  overflow-x: clip;

  background:

    linear-gradient(

      180deg,

      #fffdf8 0%,

      #f8f2e9 100%

    );

  color: var(--message-text);

}

/* =========================================================

   MAIN SHELL

========================================================= */

main.conversation-shell {

  display: block;

  width: 100%;

  max-width: 760px;

  margin: 0 auto;

  padding: 12px 10px 34px;

  box-sizing: border-box;

}

.conversation-header,

.conversation-card,

#message-stream,

#real-message-form,

.message-composer,

#real-message-input {

  min-width: 0;

  max-width: 100%;

  box-sizing: border-box;

}

/* =========================================================

   STANDARD CONVERSATION HEADER

========================================================= */

.conversation-header {

  position: relative;

  width: 100%;

  min-height: 230px;

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  padding: 24px;

  border:

    2px solid var(--message-orange);

  border-radius: 30px;

  background:

    linear-gradient(

      90deg,

      rgba(255, 250, 242, 0.98) 0%,

      rgba(255, 250, 242, 0.86) 46%,

      rgba(255, 250, 242, 0.14) 100%

    ),

    url("hero.jpg")

    center / cover no-repeat;

  box-shadow:

    var(--message-shadow);

}

.conversation-header::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    linear-gradient(

      180deg,

      transparent 40%,

      rgba(13, 59, 47, 0.06) 100%

    );

}

.conversation-header > div {

  position: relative;

  z-index: 1;

}

/* =========================================================

   STATUS

========================================================= */

.conversation-header .status-pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 14px;

  padding: 8px 13px;

  border-radius: 999px;

  background:

    rgba(255, 255, 255, 0.9);

  color:

    var(--message-forest);

  font-weight: 800;

  box-shadow:

    0 8px 22px rgba(13, 59, 47, 0.09);

}

.conversation-header .status-pill::before {

  content: "";

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: #2bb673;

}

/* =========================================================

   STANDARD TITLE

========================================================= */

#conversation-title {

  margin: 0;

  max-width: 100%;

  color:

    var(--message-forest);

  font-size:

    clamp(34px, 7vw, 62px);

  line-height: 0.98;

  overflow-wrap: anywhere;

}

#conversation-subtitle {

  margin:

    14px 0 0;

  color: #4f625a;

  font-size: 18px;

  line-height: 1.5;

}

/* =========================================================

   CONVERSATION CARD

========================================================= */

.conversation-card {

  position: relative;

  width: 100%;

  margin-top: 12px;

  padding: 10px;

  border:

    2px solid var(--message-orange);

  border-radius: 30px;

  background:

    rgba(255, 255, 255, 0.96);

  box-shadow:

    var(--message-shadow);

  backdrop-filter:

    blur(18px);

  -webkit-backdrop-filter:

    blur(18px);

}

/* =========================================================

   MESSAGE STREAM

========================================================= */

#message-stream {

  display: flex;

  flex-direction: column;

  width: 100%;

  min-height: 340px;

  height: 42vh;

  max-height: 460px;

  overflow-y: auto;

  padding: 14px;

  border:

    1.5px solid rgba(243, 107, 22, 0.85);

  border-radius: 24px;

  background:

    radial-gradient(

      circle at top right,

      rgba(243, 107, 22, 0.06),

      transparent 32%

    ),

    linear-gradient(

      180deg,

      #fffdf9 0%,

      #fbf7f1 100%

    );

}

.message-stream {

  gap: 16px;

}

/* =========================================================

   MESSAGE BUBBLES

========================================================= */

.message-stream article {

  width: fit-content;

  max-width: 84%;

  padding: 12px 14px;

  border-radius: 18px;

  box-shadow:

    0 10px 24px rgba(13, 59, 47, 0.08);

}

.message-stream article.is-current-user {

  align-self: flex-end;

  border-bottom-right-radius: 7px;

  background:

    linear-gradient(

      145deg,

      #174f40,

      #0d3b2f

    );

  color: white;

}

.message-stream article:not(.is-current-user) {

  align-self: flex-start;

  border:

    1px solid rgba(13, 59, 47, 0.09);

  border-bottom-left-radius: 7px;

  background: white;

  color:

    var(--message-text);

}

.message-stream article strong {

  display: block;

  margin-bottom: 6px;

  font-size: 13px;

  opacity: 0.75;

}

.message-stream article p {

  margin: 0;

  font-size: 15px;

  line-height: 1.5;

  overflow-wrap: anywhere;

}

/* =========================================================

   EMPTY / LOADING

========================================================= */

.conversation-empty,

.conversation-loading {

  min-height: 300px;

  display: grid;

  place-items: center;

  padding: 30px;

  color:

    var(--message-muted);

  text-align: center;

}

.conversation-empty span {

  display: block;

  margin-bottom: 10px;

  font-size: 42px;

}

.conversation-empty h3 {

  margin:

    0 0 8px;

  color:

    var(--message-forest);

  font-size: 24px;

}

.conversation-empty p {

  max-width: 340px;

  margin: 0;

  line-height: 1.55;

}

/* =========================================================

   COMPOSER

========================================================= */

.message-composer,

#real-message-form {

  width: 100%;

  display: grid;

  grid-template-columns:

    minmax(0, 1fr) 52px;

  gap: 8px;

  align-items: center;

  box-sizing: border-box;

}

.message-composer {

  position: sticky;

  bottom: 6px;

  z-index: 10;

  margin-top: 14px;

  padding: 8px;

  border:

    1px solid rgba(243, 107, 22, 0.28);

  border-radius: 22px;

  background:

    rgba(255, 255, 255, 0.96);

  box-shadow:

    0 14px 34px rgba(13, 59, 47, 0.15);

  backdrop-filter:

    blur(16px);

  -webkit-backdrop-filter:

    blur(16px);

}

/* =========================================================

   MESSAGE INPUT

========================================================= */

#real-message-input {

  width: 100%;

  min-width: 0;

  height: 52px;

  min-height: 52px;

  max-height: 120px;

  margin: 0;

  padding: 14px 16px;

  resize: none;

  overflow-y: auto;

  border:

    1.5px solid rgba(243, 107, 22, 0.9);

  border-radius: 18px;

  background: #fffdf9;

  color:

    var(--message-text);

  font: inherit;

  font-size: 18px;

  line-height: 1.4;

  outline: none;

  appearance: none;

  -webkit-appearance: none;

}

#real-message-input:focus {

  border-color:

    var(--message-orange);

  box-shadow:

    0 0 0 4px rgba(243, 107, 22, 0.14);

}

#real-message-input::placeholder {

  color: #8b9691;

}

/* =========================================================

   SEND BUTTON

========================================================= */

#send-real-message,

.message-composer #send-real-message,

button#send-real-message.btn,

button#send-real-message.btn-accent {

  width: 52px !important;

  min-width: 52px !important;

  max-width: 52px !important;

  height: 52px !important;

  min-height: 52px !important;

  max-height: 52px !important;

  display: grid;

  place-items: center;

  margin: 0;

  padding: 0 !important;

  border: 0;

  border-radius: 50% !important;

  background:

    linear-gradient(

      145deg,

      #ff7a21,

      #df5410

    );

  color: white;

  font-size: 0 !important;

  box-shadow:

    0 10px 24px rgba(243, 107, 22, 0.3);

  cursor: pointer;

}

#send-real-message::before {

  content: "➤";

  display: block;

  font-size: 24px;

  color: white;

  transform:

    rotate(-25deg);

}

#send-real-message:active {

  transform:

    scale(0.95);

}

#send-real-message:disabled {

  opacity: 0.55;

  cursor: wait;

}

#message-form-message {

  grid-column:

    1 / -1;

  margin:

    0 8px;

  color: #b34219;

  font-size: 13px;

}

/* =========================================================

   GENERIC PROFILE PHOTO

========================================================= */

.conversation-profile-photo {

  width: 88px;

  height: 88px;

  margin:

    10px 0 8px;

  border:

    4px solid rgba(255, 255, 255, 0.92);

  border-radius: 50%;

  object-fit: cover;

  object-position: center;

  box-shadow:

    0 8px 24px rgba(12, 74, 56, 0.22);

}

/* =========================================================

   CONVERSATION LIST

========================================================= */

.conversation-list {

  display: grid;

  gap: 12px;

}

.direct-conversation-item {

  display: grid;

  gap: 4px;

  padding: 16px;

  border:

    1px solid #f36b16;

  border-radius: 18px;

  background: #fffaf4;

  color: #0f4b38;

  text-decoration: none;

  box-shadow:

    0 8px 24px rgba(15, 75, 56, 0.08);

}

.direct-conversation-item strong {

  font-size: 18px;

}

.direct-conversation-item span {

  overflow: hidden;

  color: #4f665d;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.direct-conversation-item small {

  color: #7b857f;

  font-size: 12px;

}

/* =========================================================

   MAP CHATS HEADER

========================================================= */

.map-chats-header {

  position: relative;

  display: block;

  width: 100%;

  aspect-ratio:

    1.95 / 1;

  min-height: 0;

  padding: 0;

  overflow: hidden;

  border:

    2px solid var(--message-orange);

  border-radius: 28px;

  background-image:

    linear-gradient(

      90deg,

      rgba(255, 250, 242, 0.94) 0%,

      rgba(255, 250, 242, 0.74) 27%,

      rgba(255, 250, 242, 0.27) 55%,

      rgba(255, 255, 255, 0.04) 100%

    ),

    url("map-chats-north-america-v2.png");

  background-size: cover;

  background-position:

    center center;

  background-repeat:

    no-repeat;

  box-shadow:

    0 12px 28px rgba(13, 59, 47, 0.08),

    inset 0 0 36px rgba(255, 255, 255, 0.16);

}

.map-chats-header::after {

  content: none;

}

.map-chats-header .status-pill {

  display:

    none !important;

}

/* =========================================================

   MAP CHATS COPY CONTAINER

========================================================= */

.map-chats-copy {

  position:

    static !important;

  z-index:

    5 !important;

  width:

    44% !important;

  max-width:

    none !important;

  padding: 0;

}

/* =========================================================

   MEMBER NAME

========================================================= */

.map-chats-header #conversation-title {

  position: absolute;

  top: 15%;

  left: 6.5%;

  margin: 0;

  color: #073e31;

  font-family:

    Georgia,

    "Times New Roman",

    serif;

  font-size:

    clamp(42px, 10vw, 72px);

  font-weight: 700;

  line-height: 0.9;

  letter-spacing:

    -0.045em;

  white-space: nowrap;

  text-shadow:

    0 2px 0 rgba(255, 255, 255, 0.68),

    0 7px 16px rgba(8, 65, 48, 0.08);

}

/* =========================================================

   NAME ORANGE SWEEP

========================================================= */

.map-chats-header #conversation-title::after {

  content: "";

  display: block;

  width: 63%;

  height: 4px;

  margin-top: 9px;

  margin-left: 16%;

  border-radius: 999px;

  background:

    linear-gradient(

      90deg,

      #f36b16 0%,

      #f36b16 62%,

      rgba(243, 107, 22, 0.4) 84%,

      rgba(243, 107, 22, 0) 100%

    );

  transform:

    rotate(-1deg);

}

/* =========================================================

   MAP CHATS LABEL

========================================================= */

.map-chats-header #conversation-subtitle {

  position: absolute;

  left: 7%;

  bottom: 22%;

  margin: 0;

  color: #103e34;

  font-size:

    clamp(18px, 5vw, 31px);

  font-weight: 700;

  line-height: 1;

  white-space: nowrap;

}

.map-chats-header #conversation-subtitle::before {

  content: "💬";

  display: inline-block;

  margin-right: 8px;

  font-size: 0.92em;

  vertical-align:

    -0.06em;

}

.map-chats-header #conversation-subtitle::after {

  content: none;

}

/* =========================================================

   TAGLINE

========================================================= */

.map-chats-copy::after {

  content:

    "Connect, share, and explore\A life on the road.";

  position: absolute;

  left: 7%;

  bottom: 7%;

  display: block;

  margin: 0;

  padding-left: 10px;

  border-left:

    3px solid var(--message-orange);

  color: #31443e;

  font-size:

    clamp(10px, 2.8vw, 16px);

  font-weight: 500;

  line-height: 1.25;

  white-space: pre;

}

/* =========================================================

   ROUTE DECORATION

========================================================= */

.map-route-decoration {

  position:

    absolute !important;

  inset: 0;

  z-index:

    3 !important;

  width:

    auto !important;

  max-width:

    none !important;

  pointer-events: none;

}

/* Edmonton is already visible in map artwork */

.map-edmonton-pin {

  display: none;

}

.map-pin-city {

  display: none;

}

/* =========================================================

   ROUTE LINE

========================================================= */

.map-route-line {

  position: absolute;

  left: 40%;

  top: 17%;

  width: 15%;

  height: 48%;

  border-right:

    1.5px dashed var(--message-orange);

  border-bottom:

    1.5px dashed var(--message-orange);

  border-radius:

    0 0 100% 0;

  transform:

    rotate(-8deg);

  opacity: 0.92;

}

.map-route-start {

  position: absolute;

  left: 39.4%;

  top: 61%;

  width:

    clamp(6px, 1.3vw, 10px);

  height:

    clamp(6px, 1.3vw, 10px);

  border-radius: 50%;

  background:

    var(--message-orange);

  box-shadow:

    0 0 0 3px rgba(255, 255, 255, 0.82);

}

/* =========================================================

   PREMIUM NOMAD PROFILE FRAME

========================================================= */

.map-chats-profile-frame {

  position:

    absolute !important;

  top:

    9% !important;

  right:

    4% !important;

  z-index:

    6 !important;

  width:

    27% !important;

  height:

    80% !important;

  max-width:

    none !important;

  max-height:

    none !important;

  margin:

    0 !important;

  padding:

    0 !important;

  overflow:

    visible !important;

  isolation: isolate;

  filter:

    drop-shadow(

      0 14px 16px

      rgba(0, 28, 20, 0.28)

    )

    drop-shadow(

      0 3px 5px

      rgba(0, 0, 0, 0.16)

    );

}

/* =========================================================

   IMPORTANT

   NO EXTRA CSS PIN BODY LAYERS

========================================================= */

.map-chats-profile-frame::before,

.map-chats-profile-frame::after {

  display:

    none !important;

}

/* =========================================================

   TRAVELLER PHOTO

   SITS UNDER THE REAL NOMAD FRAME

========================================================= */

.map-chats-profile-frame

.conversation-profile-photo {

  position:

    absolute !important;

  top:

    10.5% !important;

  left:

    13% !important;

  z-index:

    2 !important;

  width:

    70% !important;

  height:

    auto !important;

  aspect-ratio: 1;

  margin:

    0 !important;

  padding: 0;

  object-fit:

    cover !important;

  object-position:

    center 32% !important;

  border:

    0 !important;

  border-radius:

    50% !important;

  background:

    #fffdf8;

  box-shadow:

    0 0 0 3px #fffdf8,

    0 0 0 5px rgba(215, 173, 77, 0.94),

    0 0 0 7px rgba(6, 60, 47, 0.95),

    0 0 0 8px rgba(240, 215, 152, 0.55),

    0 8px 16px rgba(0, 0, 0, 0.20) !important;

}

/* =========================================================

   REAL NOMAD FRAME

   SITS ABOVE THE PHOTO

========================================================= */

.map-chats-profile-frame

.nomad-profile-frame-image {

  position:

    absolute !important;

  inset:

    0 !important;

  z-index:

    5 !important;

  display: block;

  width:

    100% !important;

  height:

    100% !important;

  max-width:

    none !important;

  max-height:

    none !important;

  margin: 0;

  padding: 0;

  object-fit:

    contain !important;

  opacity:

    1 !important;

  pointer-events:

    none !important;

  /*

    Dark Nomad brand finish.

    Keeps original artwork intact,

    but richer and deeper.

  */

  filter:

    brightness(0.74)

    contrast(1.24)

    saturate(1.16)

    drop-shadow(

      0 1px 0

      rgba(255, 255, 255, 0.09)

    )

    drop-shadow(

      0 4px 6px

      rgba(0, 30, 22, 0.22)

    ) !important;

}

/* =========================================================

   SUBTLE PREMIUM GLOW

   Uses frame container, NOT a second image.

========================================================= */

.map-chats-profile-frame {

  box-shadow:

    0 0 22px rgba(214, 174, 74, 0.08);

}

/* =========================================================

   MOBILE

========================================================= */

@media (max-width: 640px) {

  main.conversation-shell {

    max-width: none;

    padding:

      12px 10px 34px;

  }

  .conversation-header {

    min-height: 210px;

    padding: 20px;

    border-width: 1.5px;

    border-radius: 26px;

  }

  .conversation-card {

    border-width: 1.5px;

    border-radius: 26px;

  }

  .map-chats-header {

    min-height: 0;

    padding: 0;

    border-radius: 26px;

  }

  .map-chats-header

  #conversation-title {

    top: 15%;

    left: 6.5%;

    font-size:

      clamp(36px, 10vw, 58px);

  }

  .map-chats-header

  #conversation-title::after {

    margin-top: 7px;

  }

  .map-chats-header

  #conversation-subtitle {

    left: 7%;

    bottom: 22%;

    font-size:

      clamp(17px, 5vw, 26px);

  }

  .map-chats-copy::after {

    left: 7%;

    bottom: 7%;

    font-size:

      clamp(9px, 2.7vw, 14px);

  }

  .map-route-line {

    left: 40%;

    top: 21%;

    width: 16%;

    height: 43%;

    border-right-width: 1.5px;

    border-bottom-width: 1.5px;

  }

  .map-route-start {

    left: 39.4%;

    top: 61%;

  }

  .map-chats-profile-frame {

    top:

      9% !important;

    right:

      4% !important;

    width:

      27% !important;

    height:

      80% !important;

  }

  .map-chats-profile-frame

  .conversation-profile-photo {

    top:

      12.7% !important;

    left:

      14.8% !important;

    width:

      70.5% !important;

  }

}

/* =========================================================

   SMALL iPHONE

========================================================= */

@media (max-width: 420px) {

  .map-chats-header {

    border-radius: 24px;

  }

  .map-chats-header

  #conversation-title {

    font-size:

      clamp(33px, 10vw, 44px);

  }

  .map-chats-header

  #conversation-subtitle {

    font-size:

      clamp(15px, 4.9vw, 21px);

  }

  .map-chats-copy::after {

    padding-left: 8px;

    border-left-width: 2px;

    font-size:

      clamp(8px, 2.5vw, 11px);

  }

  .map-chats-profile-frame {

    right:

      3.5% !important;

    width:

      27% !important;

  }

}