/* >>>>>>>>>> MODULE: iMessage (start) >>>>>>>>>> */

/* ==========================================================
   MODULE: IMESSAGE   (classes: imsg)
   iMessage: <div class="mob imsg theme-auto">
   Needs the CORE block.
   ========================================================== */

#workskin .imsg {
  background: #ffffff;
  color: #000000;
  border: 1px solid #d8d8dc;
  border-radius: 14px;
}

#workskin .imsg .mob-head {
  background: #f6f6f8;
  color: #000000;
  border-bottom: 1px solid #d8d8dc;
  font-size: 0.85em;
}

#workskin .imsg .mob-head span {
  display: block;
  font-weight: normal;
  color: #8e8e93;
  font-size: 0.85em;
}

#workskin .imsg .msg {
  display: table;
  max-width: 75%;
  margin: 0.18em 0;
  padding: 0.45em 0.8em;
  border-radius: 18px;
}

#workskin .imsg .out {
  margin-left: auto;
  background: #0a84ff;
  color: #ffffff;
  border-bottom-right-radius: 5px;
}

#workskin .imsg .in {
  margin-right: auto;
  background: #e9e9eb;
  color: #000000;
  border-bottom-left-radius: 5px;
}

/* green bubble: a sent message that went as a text instead of an iMessage (only sent messages turn green) */
#workskin .imsg .out.sms { background: #30d158; color: #ffffff; }

/* sender name above a bubble in group chats */
#workskin .imsg .who {
  display: block;
  font-size: 0.72em;
  color: #8e8e93;
  margin: 0.5em 0 0 0.9em;
}

/* "Delivered" / "Read 9:42" */
#workskin .imsg .imsg-status {
  display: block;
  text-align: right;
  font-size: 0.7em;
  color: #8e8e93;
  margin: 0.1em 0.4em 0.4em 0;
}

/* "Edited" under an edited message: blue, on the same side as the bubble */
#workskin .imsg .imsg-edited, #workskin .imsg .imsg-edited-in {
  display: block;
  text-align: right;
  font-size: 0.7em;
  color: #0a84ff;
  margin: 0.1em 0.4em 0.4em 0;
}

#workskin .imsg .imsg-edited-in { text-align: left; margin: 0.1em 0 0.4em 0.4em; }

/* tapbacks: a reaction bubble on the top corner of a message.
   <p class="msg in tapped">message<span class="imsg-tap me">&#128077;</span></p>
   "tapped" makes room above the message; "me" makes it blue (your own reaction),
   without "me" it's grey (someone else's). Any emoji works - one per person. */
#workskin .imsg .msg.tapped {
  position: relative;
  margin-top: 1.7em;
}

/* in a group, keep the sender's name right above a message with a tapback:
   the room for the tapback goes above the name instead of between the name and the message */
#workskin .imsg .who + .msg.tapped { margin-top: 0.18em; }

#workskin .imsg .who:has(+ .msg.tapped) { margin-top: 1.5em; }

#workskin .imsg .imsg-tap {
  position: absolute;
  top: -1.75em;
  right: -0.95em;
  min-width: 2.15em;
  height: 2.15em;
  padding: 0 0.35em;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: 1.075em;
  background: #e9e9eb;
  color: #8e8e93;
  font-size: 1em;
  line-height: 1.9em;
  text-align: center;
  white-space: nowrap;
}

/* the two little tail dots, trailing off the outside corner */
#workskin .imsg .imsg-tap::before,
#workskin .imsg .imsg-tap::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #e9e9eb;
}

#workskin .imsg .imsg-tap::before {
  right: -0.2em;
  bottom: -0.2em;
  width: 0.5em;
  height: 0.5em;
  border: 2px solid #ffffff;
}

#workskin .imsg .imsg-tap::after {
  right: -0.55em;
  bottom: -0.5em;
  width: 0.25em;
  height: 0.25em;
}

/* on your own messages it sits on the left corner instead, with the tail on the left */
#workskin .imsg .out .imsg-tap { right: auto; left: -0.95em; }

#workskin .imsg .out .imsg-tap::before { right: auto; left: -0.2em; }

#workskin .imsg .out .imsg-tap::after { right: auto; left: -0.55em; }

/* your own reaction is blue */
#workskin .imsg .imsg-tap.me { background: #0a84ff; color: #ffffff; }

#workskin .imsg .imsg-tap.me::before,
#workskin .imsg .imsg-tap.me::after { background: #0a84ff; }

/* several people reacting: put the imsg-tap spans one after another and they stack,
   each one stepping in from the corner, with the tail only on the first */
#workskin .imsg .imsg-tap { z-index: 4; }

#workskin .imsg .imsg-tap + .imsg-tap { z-index: 3; }

#workskin .imsg .imsg-tap + .imsg-tap + .imsg-tap { z-index: 2; }

#workskin .imsg .imsg-tap + .imsg-tap + .imsg-tap + .imsg-tap { z-index: 1; }

#workskin .imsg .imsg-tap + .imsg-tap { right: 0.5em; }

#workskin .imsg .imsg-tap + .imsg-tap + .imsg-tap { right: 1.95em; }

#workskin .imsg .imsg-tap + .imsg-tap + .imsg-tap + .imsg-tap { right: 3.4em; }

#workskin .imsg .out .imsg-tap + .imsg-tap { right: auto; left: 0.5em; }

#workskin .imsg .out .imsg-tap + .imsg-tap + .imsg-tap { right: auto; left: 1.95em; }

#workskin .imsg .out .imsg-tap + .imsg-tap + .imsg-tap + .imsg-tap { right: auto; left: 3.4em; }

#workskin .imsg .imsg-tap + .imsg-tap::before,
#workskin .imsg .imsg-tap + .imsg-tap::after { display: none; }

#workskin .imsg .mob-sys { color: #8e8e93; opacity: 1; }

/* a picture sent in a message: <p class="msg out pic"><img src="..."></p>
   or, for a description instead: <p class="msg out pic text">[A photo of the rink]</p> */
#workskin .imsg .msg.pic { width: 55%; padding: 0.2em; overflow: hidden; }

#workskin .imsg .msg.pic img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;
}

#workskin .imsg .msg.pic.text { padding: 2.5em 1em; font-style: italic; text-align: center; }

/* the three typing dots: <p class="typing-indicator"><span></span><span></span><span></span></p> */
#workskin .imsg .typing-indicator {
  display: table;
  margin: 0.3em 0;
  padding: 0.6em 0.8em;
  border-radius: 18px;
  border-bottom-left-radius: 5px;
  background: #e9e9eb;
}

#workskin .imsg .typing-indicator span {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.25em;
  border-radius: 50%;
  background: #8e8e93;
  opacity: 0.5;
}

#workskin .imsg .typing-indicator span:nth-child(2) { opacity: 0.7; }

#workskin .imsg .typing-indicator span:nth-child(3) { opacity: 1; margin-right: 0; }

/* the message bar at the bottom: goes after the mob-body, inside the chat, all on one line
   <p class="imsg-input"><span class="imsg-plus">+</span><span class="hide"> </span><span class="imsg-field">iMessage<span class="hide"> </span><span class="imsg-mic">&#127908;</span></span></p>
   The hide spans keep a space between the parts for readers with the workskin off. */
#workskin .imsg .imsg-input {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.45em 0.7em 0.65em 0.7em;
}

/* the round + button on the left, with a grey outline */
#workskin .imsg .imsg-plus {
  flex: none;
  width: 1.55em;
  height: 1.55em;
  margin-right: 0.35em;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid #8e8e93;
  background: #ffffff;
  color: #000000;
  font-size: 1.3em;
  font-weight: 300;
  line-height: 1.45em;
  text-align: center;
}

/* the grey box with the word in it */
#workskin .imsg .imsg-field {
  flex: 1;
  position: relative;
  padding: 0.45em 2.4em 0.45em 0.9em;
  border: 1px solid #8e8e93;
  border-radius: 1.3em;
  background: #f0f0f2;
  color: #6c6c70;
}

/* the microphone on the right of the box */
#workskin .imsg .imsg-mic {
  position: absolute;
  right: 0.7em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95em;
}

/* a half-typed message in the box: black text instead of grey */
#workskin .imsg .imsg-field.typed { color: #000000; }

/* the blue send arrow that replaces the microphone while typing */
#workskin .imsg .imsg-send {
  position: absolute;
  right: 0.3em;
  bottom: 0.3em;
  width: 1.7em;
  height: 1.7em;
  line-height: 1.7em;
  border-radius: 50%;
  background: #0a84ff;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

/* ---------- iMessage: Links ---------- */

#workskin .imsg .in .fake-link, #workskin .imsg .in a:not(.tl) { color: #0a84ff; }

#workskin .imsg .out .fake-link, #workskin .imsg .out a:not(.tl) { color: #ffffff; }

/* ---------- iMessage: Dark theme (theme-dark) ---------- */

#workskin .imsg.theme-dark { background: #000000; color: #ffffff; border-color: #2c2c2e; }

#workskin .imsg.theme-dark .mob-head { background: #1c1c1e; color: #ffffff; border-bottom-color: #2c2c2e; }

#workskin .imsg.theme-dark .in,
#workskin .imsg.theme-dark .typing-indicator {
  background: #262628;
  color: #ffffff;
}

#workskin .imsg.theme-dark .imsg-tap,
#workskin .imsg.theme-dark .imsg-tap::before,
#workskin .imsg.theme-dark .imsg-tap::after { border-color: #000000; background: #3a3a3c; color: #aeaeb2; }

#workskin .imsg.theme-dark .imsg-tap.me,
#workskin .imsg.theme-dark .imsg-tap.me::before,
#workskin .imsg.theme-dark .imsg-tap.me::after { background: #0a84ff; color: #ffffff; }

#workskin .imsg.theme-dark .imsg-plus { border-color: #757579; background: #2c2c2e; color: #ffffff; }

#workskin .imsg.theme-dark .imsg-field { border-color: #757579; background: #1c1c1e; color: #8e8e93; }

#workskin .imsg.theme-dark .imsg-field.typed { color: #ffffff; }

/* ---------- iMessage: Auto theme (theme-auto): light, switching to dark when the reader's device is in dark mode ---------- */

@media (prefers-color-scheme: dark) {
  #workskin .imsg.theme-auto { background: #000000; color: #ffffff; border-color: #2c2c2e; }

  #workskin .imsg.theme-auto .mob-head { background: #1c1c1e; color: #ffffff; border-bottom-color: #2c2c2e; }

  #workskin .imsg.theme-auto .in,
    #workskin .imsg.theme-auto .typing-indicator {
      background: #262628;
      color: #ffffff;
    }

  #workskin .imsg.theme-auto .imsg-tap,
    #workskin .imsg.theme-auto .imsg-tap::before,
    #workskin .imsg.theme-auto .imsg-tap::after { border-color: #000000; background: #3a3a3c; color: #aeaeb2; }

  #workskin .imsg.theme-auto .imsg-tap.me,
    #workskin .imsg.theme-auto .imsg-tap.me::before,
    #workskin .imsg.theme-auto .imsg-tap.me::after { background: #0a84ff; color: #ffffff; }

  #workskin .imsg.theme-auto .imsg-plus { border-color: #757579; background: #2c2c2e; color: #ffffff; }

  #workskin .imsg.theme-auto .imsg-field { border-color: #757579; background: #1c1c1e; color: #8e8e93; }

  #workskin .imsg.theme-auto .imsg-field.typed { color: #ffffff; }
}

/* <<<<<<<<<< MODULE: iMessage (end) <<<<<<<<<< */