/*
 * Nito Chat call history, Element Web 1.12.29.
 * The upstream tombstone call tile uses this CSS-module selector. Check it
 * against the new bundle before upgrading Element Web.
 */
._container_1opqj_8 {
  width: fit-content;
  max-width: min(100%, 28rem);
  min-height: 0;
  margin: 6px 0;
  padding: 7px 11px;
  border-radius: 16px;
  gap: 8px;
}

._container_1opqj_8 ._title_1opqj_20 {
  flex: 0 1 auto;
  white-space: nowrap;
}

/* Element marks events sent by the current user on the timeline row. */
.mx_EventTile._stateOwnEvent_1eu7g_903 ._container_1opqj_8 {
  margin-left: auto;
  background: color-mix(in srgb, #61bd68 18%, var(--cpd-color-bg-canvas-default, white));
}

.mx_EventTile._stateOwnEvent_1eu7g_903 ._container_1opqj_8 ._title_1opqj_20::before {
  content: "↗︎ Outgoing ";
  color: #148a49;
}

.mx_EventTile:not(._stateOwnEvent_1eu7g_903) ._container_1opqj_8 ._title_1opqj_20::before {
  content: "↙︎ Incoming ";
  color: #148a49;
}

.cpd-theme-dark .mx_EventTile._stateOwnEvent_1eu7g_903 ._container_1opqj_8 {
  background: color-mix(in srgb, #61bd68 18%, #22252c);
}

.cpd-theme-dark ._container_1opqj_8 ._title_1opqj_20::before {
  color: #82d498;
}

._container_1opqj_8 ._time_1opqj_25 {
  flex: none;
  white-space: nowrap;
}

/* This is the event's clock time, not the length of the conversation. */
._container_1opqj_8 ._time_1opqj_25::before {
  content: "at ";
}

._container_1opqj_8 ._icon_1opqj_30 {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Keep the read-receipt avatar for call events inside the message viewport. */
.mx_EventTile:has(._container_1opqj_8) > [data-testid="event-tile-slot-receipt"] {
  inset-inline-end: -42px !important;
}

/* The live-call tile is a different component from a completed call tile.
   Keep its Join action visible, but stop it occupying the whole timeline. */
.mx_EventTile ._container_122d2_8 {
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  margin: 6px 0;
  padding: 7px 11px;
  border-radius: 16px;
}

.mx_EventTile._stateOwnEvent_1eu7g_903 ._container_122d2_8 {
  margin-left: auto;
  background: color-mix(in srgb, #61bd68 18%, var(--cpd-color-bg-canvas-default, white));
}

.cpd-theme-dark .mx_EventTile._stateOwnEvent_1eu7g_903 ._container_122d2_8 {
  background: color-mix(in srgb, #61bd68 18%, #22252c);
}

@media (max-width: 600px) {
  .mx_EventTile ._container_122d2_8 {
    flex-wrap: wrap;
  }
}

/* Nito's own repeating chat illustration, kept behind the message bubbles. */
.mx_RoomView:not(.mx_RoomView--local) .mx_RoomView_body {
  background: #b8d9be url('/nito-chat-pattern.svg') repeat center top / 360px 360px;
}
.mx_RoomView:not(.mx_RoomView--local) .mx_RoomView_timeline {
  background: transparent;
}
.mx_RoomView:not(.mx_RoomView--local) .mx_RoomView_messagePanel {
  background: transparent;
}
.cpd-theme-dark .mx_RoomView:not(.mx_RoomView--local) .mx_RoomView_body {
  background-color: #233b31;
  background-blend-mode: multiply;
}

/* Upstream's header hover color can be translucent over the patterned room.
   Keep the room title, presence and call controls on an opaque surface. */
.mx_RoomView:not(.mx_RoomView--local) .mx_RoomHeader {
  background-color: #fff;
}
.mx_RoomView:not(.mx_RoomView--local) .mx_RoomHeader:hover {
  background-color: #f0f5f1;
}
.cpd-theme-dark .mx_RoomView:not(.mx_RoomView--local) .mx_RoomHeader {
  background-color: #26352d;
}
.cpd-theme-dark .mx_RoomView:not(.mx_RoomView--local) .mx_RoomHeader:hover {
  background-color: #304239;
}

/* Element caps bubble timelines at 1200px, leaving large empty margins on
   desktop. Let the timeline and composer follow the available room width. */
.mx_RoomView:not(.mx_RoomView--local) .mx_RoomView_body[data-layout="bubble"] :is(.mx_RoomView_timeline, .mx_RoomView_statusArea, .mx_MessageComposer) {
  width: calc(100% - 32px);
  max-width: 2000px;
  margin-inline: auto;
}

@media (max-width: 700px) {
  .mx_RoomView:not(.mx_RoomView--local) .mx_RoomView_body[data-layout="bubble"] :is(.mx_RoomView_timeline, .mx_RoomView_statusArea, .mx_MessageComposer) {
    width: 100%;
  }
}

/* Keep the message actions, but remove Element's full-row hover rectangle. */
.mx_RoomView_timeline .mx_EventTile[class*="_layoutBubble_"]:hover::before {
  background: transparent !important;
}
/* Modern is still user-selectable. Keep it readable over the chat wallpaper. */
.mx_RoomView_timeline .mx_EventTile[class*="_layoutGroup_"]:is(:hover, :focus-within) > .mx_EventTile_line {
  background-color: transparent !important;
}
.mx_RoomView_timeline .mx_EventTile[class*="_layoutGroup_"] .mx_EventTile_line:has(.mx_MTextBody) .mx_MTextBody {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 12px;
  background: #f6fff4;
  box-shadow: 0 1px 2px #173d2824;
}
.mx_RoomView_timeline .mx_EventTile[class*="_layoutGroup_"][class*="_stateOwnEvent_"] .mx_EventTile_line:has(.mx_MTextBody) .mx_MTextBody {
  background: #e4f6da;
}
.mx_RoomView_timeline .mx_EventTile[class*="_layoutGroup_"] .mx_EventTile_line .mx_RedactedBody {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 12px;
  background: #eff2f2;
}
.cpd-theme-dark .mx_RoomView_timeline .mx_EventTile[class*="_layoutGroup_"] .mx_EventTile_line:has(.mx_MTextBody) .mx_MTextBody {
  background: #303933;
}
.cpd-theme-dark .mx_RoomView_timeline .mx_EventTile[class*="_layoutGroup_"][class*="_stateOwnEvent_"] .mx_EventTile_line:has(.mx_MTextBody) .mx_MTextBody {
  background: #294c3a;
}
.cpd-theme-dark .mx_RoomView_timeline .mx_EventTile[class*="_layoutGroup_"] .mx_EventTile_line .mx_RedactedBody {
  background: #303933;
}

/* Telegram-like service notices: short, readable chips above the wallpaper. */
.mx_RoomView_timeline .mx_EventTile[class*="_stateInfo_"]:has(.mx_TextualEvent) {
  display: block;
}
.mx_RoomView_timeline .mx_EventTile[class*="_stateInfo_"]:has(.mx_TextualEvent) > .mx_EventTile_line {
  width: fit-content;
  min-width: 0;
  max-width: calc(100% - 20px);
  margin-inline: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
}
.mx_RoomView_timeline .mx_EventTile[class*="_stateInfo_"][class*="_stateOwnEvent_"]:has(.mx_TextualEvent) > .mx_EventTile_line {
  /* Match the right edge of ordinary outgoing bubbles (Element reserves 48px). */
  margin-inline: auto 48px !important;
}
.mx_RoomView_timeline .mx_EventTile:has(.mx_cryptoEvent) .mx_cryptoEvent {
  margin-inline: 0 auto !important;
}
.mx_RoomView_timeline .mx_EventTile[class*="_stateOwnEvent_"]:has(.mx_cryptoEvent) .mx_cryptoEvent {
  margin-inline: auto 0 !important;
}
.mx_RoomView_timeline .mx_GenericEventListSummary[data-expanded="false"][data-own-only="true"] > .mx_EventTile_line {
  order: 9;
  margin-inline-start: auto;
  margin-inline-end: -12px;
}
.mx_RoomView_timeline .mx_GenericEventListSummary[data-expanded="false"][data-own-only="true"] > .mx_GenericEventListSummary_toggle {
  order: 0 !important;
}
/* Expanded service-event groups open beside the left-hand Expand control.
   Upstream moves Collapse and our own-event bubbles to the opposite edge. */
.mx_RoomView_timeline .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] {
  margin-block-end: 16px;
}
.mx_RoomView_timeline .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] > .mx_GenericEventListSummary_toggle {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}
.mx_RoomView_timeline .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile[class*="_stateInfo_"]:has(.mx_TextualEvent) > .mx_EventTile_line {
  margin-inline: 0 auto !important;
}
.mx_RoomView_timeline .mx_EventTile[class*="_stateInfo_"]:has(.mx_TextualEvent) [class*="_slotAvatar_"] {
  display: none;
}
.mx_RoomView_timeline .mx_EventTile[class*="_stateInfo_"] .mx_TextualEvent,
.mx_RoomView_timeline .mx_GenericEventListSummary_summary {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 4px 10px !important;
  border-radius: 12px;
  background: rgb(45 91 62 / 72%);
  color: white !important;
  font-size: 12px;
  line-height: 17px;
}
.mx_RoomView_timeline .mx_NewRoomIntro p {
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgb(255 255 255 / 88%);
  color: #202b22;
}
.mx_RoomView_timeline .mx_NewRoomIntro p:not(:last-child) {
  margin-block-end: 8px;
}

/* The day divider should be a legible label, not text on the wallpaper. */
.mx_RoomView_timeline .mx_TimelineSeparator > hr {
  visibility: visible;
  border: 0;
  height: 1px;
  background: rgb(42 86 59 / 48%);
}
.cpd-theme-dark .mx_RoomView_timeline .mx_TimelineSeparator > hr {
  background: rgb(212 237 216 / 42%);
}
.mx_RoomView_timeline .mx_TimelineSeparator > div {
  padding: 4px 12px !important;
  border-radius: 999px;
  background: rgb(45 91 62 / 72%);
}
.mx_RoomView_timeline .mx_TimelineSeparator h2 {
  color: white;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}
.mx_RoomView_timeline .mx_RedactedBody { color: #394b3e; }
.cpd-theme-dark .mx_RoomView_timeline .mx_RedactedBody { color: #e3eee5; }

/* A completed call is one bubble, with the caller on the right. */
.mx_EventTile .nito-call-card {
  width: fit-content;
  max-width: min(100%, 22rem);
  min-width: 16.5rem;
  min-height: 0;
  margin: 5px 0;
  padding: 26px 11px 11px;
  border: 0;
  border-radius: 14px;
  background: #f6fff4;
  box-shadow: 0 1px 2px #173d2824;
  gap: 10px;
  position: relative;
}
/* Separate the call's creation/edit time from its read receipt. */
.mx_RoomView_timeline .mx_EventTile[class*="_stateOwnEvent_"]:has(.nito-call-card) > [data-testid="event-tile-slot-receipt"] {
  inset-inline-start: auto !important;
  inset-inline-end: 7px !important;
  inset-block-end: 18px !important;
  width: max-content;
}
.mx_EventTile .nito-call-outgoing {
  margin-left: auto;
  background: #e4f6da;
  padding-block-end: 31px;
}
.mx_EventTile .nito-call-incoming {
  margin-right: auto;
}
.mx_EventTile .nito-call-card .nito-call-heading {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}
.mx_EventTile .nito-call-card .nito-call-detail {
  color: #168147;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}
.mx_EventTile .nito-call-missed .nito-call-detail { color: #c73342; }
.mx_EventTile .nito-call-card .nito-call-created-at {
  position: absolute;
  inset-block-start: 5px;
  inset-inline-end: 9px;
  align-self: auto;
  font-size: 11px;
  line-height: 17px;
  white-space: nowrap;
}
.mx_EventTile .nito-call-card [class*='_time_']::before { content: none; }
.mx_EventTile .nito-call-card [class*='_title_']::before { content: none !important; }
.cpd-theme-dark .mx_EventTile .nito-call-outgoing { background: #294c3a; }
.cpd-theme-dark .mx_EventTile .nito-call-incoming { background: #303933; }

.nito-message-checks {
  color: #168147;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -5px;
  padding-right: 5px;
}
.nito-read-status,
.nito-call-read-status,
.nito-message-read-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.nito-read-time {
  color: #226342;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: normal;
}
.cpd-theme-dark .nito-read-time { color: #a6deb7; }
/* A message has distinct top-right creation/edit time and bottom-right read time. */
.mx_RoomView_timeline .mx_EventTile .mx_EventTile_line:has(.nito-top-time) {
  min-width: 11rem;
  padding-block-start: 27px !important;
  padding-block-end: 11px !important;
  padding-inline-end: 12px !important;
}
.mx_RoomView_timeline .mx_EventTile[class*="_stateOwnEvent_"] .mx_EventTile_line:has(.nito-top-time) {
  min-width: 12rem;
}
.mx_RoomView_timeline .mx_EventTile .mx_EventTile_line:has(.nito-top-time) [data-testid="event-tile-slot-timestamp"] > .nito-top-time {
  inset-block-start: 4px !important;
  inset-block-end: auto !important;
  inset-inline-end: 8px !important;
  max-width: none;
  width: max-content;
  color: #526c5b;
  font-size: 11px;
  line-height: 17px;
  text-decoration: none;
  white-space: nowrap;
}
.mx_RoomView_timeline .mx_EventTile[class*="_stateOwnEvent_"] .mx_EventTile_line:has(.nito-top-time) {
  padding-block-end: 31px !important;
}
.mx_RoomView_timeline .mx_EventTile:has(.nito-top-time[data-edited="true"]) [data-textual-body-edited-marker] {
  display: none;
}
.mx_RoomView_timeline .mx_EventTile._stateOwnEvent_1eu7g_903:has(.nito-message-checks):not(:has(.nito-call-card)) > [data-testid="event-tile-slot-receipt"] {
  inset-inline-end: -4px !important;
  inset-block-end: 7px !important;
  z-index: 4;
}

/* The input must read as a separate control against the patterned wallpaper. */
.mx_RoomView:not(.mx_RoomView--local) .mx_MessageComposer_wrapper {
  background: #f4f6f4 !important;
  border: 1px solid #baccc0;
  border-radius: 14px;
  box-shadow: 0 2px 9px rgb(30 69 41 / 16%);
}
.mx_RoomView:not(.mx_RoomView--local) .mx_MessageComposer [contenteditable] {
  color: #233529 !important;
}
.mx_RoomView:not(.mx_RoomView--local) .mx_MessageComposer [contenteditable]:empty::before {
  color: #65746a !important;
}
.cpd-theme-dark .mx_RoomView:not(.mx_RoomView--local) .mx_MessageComposer_wrapper {
  background: #303a33 !important;
  border-color: #53685a;
}
.nito-last-seen {
  color: var(--cpd-color-text-secondary);
  font-size: 12px;
  line-height: 17px;
  white-space: nowrap;
}