/* Chat, cleaned up.
   The thread read like a log: a timestamp stamped inside every bubble, even
   gaps between everything, a tail on each one. Messages apps group a run of
   lines from the same person, tail only the last, and keep the clock out of
   the way. Styling only, so the message code is untouched. */

/* ---- the run of messages ---- */
.dmsoc-msgs { gap: 2px; padding: 10px 12px 4px; scroll-behavior: smooth; }

/* a new speaker starts a new group: more air above, less within */
.dmsoc-msgs .dmsoc-b { margin-top: 0; }
.dmsoc-msgs .dmsoc-b.me + .dmsoc-b:not(.me),
.dmsoc-msgs .dmsoc-b:not(.me) + .dmsoc-b.me { margin-top: 10px; }

/* ---- the bubbles ---- */
.dmsoc-b {
  max-width: 74%;
  padding: 8px 13px;
  font-size: 15px;
  line-height: 1.35;
  border-radius: 19px;
  box-shadow: none;
  transition: transform 140ms cubic-bezier(.23,1,.32,1);
}
.dmsoc-b:active { transform: scale(.985); }

/* only the last of a run keeps its tail, the way a spoken turn ends */
.dmsoc-b:not(.me) { border-radius: 19px 19px 19px 19px; background: rgba(255,255,255,.1); }
.dmsoc-b.me { border-radius: 19px 19px 19px 19px; }
.dmsoc-b:not(.me):last-child,
.dmsoc-b:not(.me):has(+ .dmsoc-b.me) { border-bottom-left-radius: 6px; }
.dmsoc-b.me:last-child,
.dmsoc-b.me:has(+ .dmsoc-b:not(.me)) { border-bottom-right-radius: 6px; }

/* ---- the clock ----
   Tried hiding all but the newest time; it misread which bubble was last and
   left a stray time floating above a message. Keep every time where the
   message code puts it, just quieter. */
.dmsoc-bt { display: block; margin-top: 3px; font-size: 10px; opacity: .45; text-align: right; }
.dmsoc-b:has(> .dmsoc-gif) .dmsoc-bt { display: none; }

/* ---- pictures ---- */
.dmsoc-gif { max-width: 220px; border-radius: 16px; margin: 0; }
.dmsoc-b:has(> .dmsoc-gif) { padding: 4px; background: transparent !important; }

/* ---- the composer ---- */
.dmsoc-inputbar {
  gap: 10px;
  padding: 8px 12px calc(var(--sab, 0px) + 10px);
  border-top: 1px solid rgba(255,255,255,.07);
  align-items: flex-end;
}
.dmsoc-inputbar input {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: 16px;
}
.dmsoc-inputbar input:focus {
  outline: none;
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.09);
}
.dmsoc-inputbar button[type=submit] {
  width: 40px; height: 40px; min-height: 40px;
  border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 140ms cubic-bezier(.23,1,.32,1), opacity 140ms ease;
}
.dmsoc-inputbar button[type=submit]:active { transform: scale(.9); }

/* ---- the gif control sits with the composer, not above the conversation ---- */
.dmx-bar { padding: 0 12px 6px; }
.dmx-gif { border-radius: 14px; letter-spacing: .06em; }

/* ---- a reply and the line it answers ----
   The quote sits inside the reply, dimmed and off to one side, with a rule
   down its edge: you can see what is being answered without it competing
   with the answer itself. */
.dmsoc-quote {
  display: block;
  margin: -2px -4px 6px;
  padding: 5px 9px;
  border-left: 2px solid currentColor;
  border-radius: 4px 10px 10px 4px;
  background: rgba(255,255,255,.1);
  font-size: 12px;
  line-height: 1.3;
  opacity: .72;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dmsoc-b.me .dmsoc-quote { background: rgba(0,0,0,.18); }
.dmsoc-b:not(.me) .dmsoc-quote { background: rgba(255,255,255,.08); }

/* the chip above the composer while you are writing the reply */
.dmx-reply {
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border-left: 2px solid var(--red,#e11d48);
}

/* ---- attachment buttons ----
   They were bare words floating above the input. Give them a surface so they
   read as things you press, sitting on the composer row rather than in the
   conversation. */
.dmx-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px 0; }
.dmx-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #C8D2E4 !important;
  font: 800 10px/1 Outfit, system-ui, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.23,1,.32,1), background 140ms ease;
}
.dmx-ico:active { transform: scale(.9); background: rgba(255,255,255,.14) !important; }
@media (hover:hover) { .dmx-ico:hover { background: rgba(255,255,255,.12) !important; } }
.dmx-photo svg { display: block; }

/* a photo in the thread sits bare, like a gif */
.dmsoc-b:has(> .dmsoc-gif) { padding: 3px; background: transparent !important; }

/* ---- picture preview in the conversation list ----
   A web address tells you nothing at a glance. Show the picture small, with
   the word GIF or Photo beside it. */
.dmsoc-rp { display: flex; align-items: center; gap: 6px; }
.dmsoc-thumb {
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 5px; object-fit: cover;
  background: rgba(255,255,255,.08);
}

/* ---- chat opens on your conversations (phone) ---- */
.dmh-tabs { display: flex; gap: 6px; padding: 2px 14px 10px; }
.dmh-tabs button {
  flex: 1; min-height: 36px; border-radius: 11px;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #8A97B4 !important;
  font: 800 13px/1 Outfit, system-ui, sans-serif;
  transition: background 160ms ease, color 160ms ease;
}
.dmh-tabs button.on {
  background: rgba(255,255,255,.13) !important;
  color: #F3F6FE !important;
  border-color: rgba(255,255,255,.22) !important;
}
.dmh-list { padding: 0 10px 8px; }
.dmh-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 10px; margin-bottom: 2px;
  border-radius: 14px; border: 0 !important;
  background: transparent !important; text-align: left;
  transition: background 140ms ease;
}
.dmh-row:active { background: rgba(255,255,255,.07) !important; }
.dmh-av {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); color: #E7ECF7;
  font: 800 16px/1 Outfit, system-ui, sans-serif;
}
.dmh-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dmh-mid b { font: 700 15px/1.2 Outfit, system-ui, sans-serif; color: #F3F6FE; }
.dmh-prev {
  display: flex; align-items: center; gap: 5px;
  font: 500 13px/1.3 Outfit, system-ui, sans-serif; color: #8A97B4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dmh-prev img { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; flex: 0 0 20px; }
.dmh-when { font: 600 11px/1 Outfit, system-ui, sans-serif; color: #66718A; flex: 0 0 auto; }
.dmh-empty { padding: 26px 16px; text-align: center; font: 600 13px/1.5 Outfit, system-ui, sans-serif; color: #7C8AA8; }

/* ---- who is around, and what you have not read ---- */
.dmh-av { position: relative; }
.dmh-on {
  position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #3FBF5F; border: 2px solid #0b0f17;
}
.dmh-when { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.dmh-dot { width: 9px; height: 9px; border-radius: 50%; background: #E63946; }
/* an unread line carries a little more weight, the way an unopened letter does */
.dmh-row.unread .dmh-mid b { color: #fff; }
.dmh-row.unread .dmh-prev { color: #C3CEE4; font-weight: 600; }
.dmh-row.unread .dmh-when { color: #E63946; }

/* ---- venue rooms, kept small under the conversations ---- */
.sec.dmh-venue h2 { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; opacity: .6; }
.sec.dmh-venue { padding-top: 6px; }
.hub-list.dmh-venue { display: flex; gap: 8px; overflow-x: auto; padding: 2px 12px 10px; scrollbar-width: none; }
.hub-list.dmh-venue::-webkit-scrollbar { display: none; }
.hub-list.dmh-venue .hub-room {
  flex: 0 0 auto; width: auto; min-height: 38px; padding: 0 14px;
  border-radius: 19px; background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  font: 700 13px/1 Outfit, system-ui, sans-serif;
}

/* ---- a picture arriving ----
   Hold the space with a quiet spinner and fade the picture in. Nobody should
   watch a web address sit there and then turn into an image. */
.dmsoc-imgwrap {
  position: relative; display: block;
  min-width: 150px; min-height: 110px;
  border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,.07);
}
.dmsoc-imgwrap:before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.6);
  animation: dmImgSpin 800ms linear infinite;
}
.dmsoc-imgwrap.rdy, .dmsoc-imgwrap.bad { min-width: 0; min-height: 0; background: transparent; }
.dmsoc-imgwrap.rdy:before, .dmsoc-imgwrap.bad:before { content: none; }
.dmsoc-imgwrap.bad:after {
  content: 'Picture unavailable'; display: block; padding: 14px 12px;
  font: 600 12px/1 Outfit, system-ui, sans-serif; color: #8A97B4;
}
.dmsoc-imgwrap .dmsoc-gif {
  opacity: 0; transition: opacity 220ms ease;
  display: block; max-width: 220px; width: 100%;
}
.dmsoc-imgwrap.rdy .dmsoc-gif { opacity: 1; }
@keyframes dmImgSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dmsoc-imgwrap:before { animation-duration: 2.4s; } }

/* Desktop docking removed.
   Pinning the conversation to the right edge fought the sheet it was built
   on: the panel appeared and then vanished again. The centred sheet works,
   so it stays until docking can be done in the message code itself rather
   than wrestled into place with styling. */
/* ================= layout pass =================
   Chat had grown by accretion: every addition brought its own spacing. These
   are the few rules that make it read as one thing. */

/* one rhythm: the header, the conversation and the composer share a gutter */
.dmsoc-sheet { --dm-gut: 14px; }
.dmsoc-msgs { padding-left: var(--dm-gut); padding-right: var(--dm-gut); }
.dmsoc-inputbar { padding-left: var(--dm-gut); padding-right: var(--dm-gut); }
.dmx-bar { padding-left: var(--dm-gut); padding-right: var(--dm-gut); }
.dmh-list, .dmh-tabs { padding-left: var(--dm-gut); padding-right: var(--dm-gut); }

/* the conversation scrolls; the header and composer stay put */
.dmsoc-sheet { display: flex; flex-direction: column; min-height: 0; }
.dmsoc-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.dmsoc-inputbar, .dmx-bar { flex: 0 0 auto; }

/* the name at the top sits on its own line, quiet and sticky */
.dmsoc-sheet > header, .dmsoc-sheet .dmsoc-head {
  position: sticky; top: 0; z-index: 3;
  backdrop-filter: blur(14px);
  background: rgba(11,15,23,.82);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

/* a thread that has only just started should not look broken */
.dmsoc-msgs:empty:after {
  content: 'Say something.';
  display: block; padding: 30px 6px; text-align: center;
  font: 600 13px/1 Outfit, system-ui, sans-serif; color: #66718A;
}

/* nothing should hide under a phone's home bar */
.dmsoc-inputbar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }

/* keep long words and pasted links inside their bubble */
.dmsoc-b { overflow-wrap: anywhere; word-break: break-word; }

/* a real face beats a letter in a circle */
.dmh-av { overflow: hidden; }
.dmh-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }