.imessage {
    background-color: #fff;
    /*border: 1px solid #e5e5ea;*/
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    /*max-width: 600px;*/
    padding: 0.5rem 1.5rem;
}
.from-them table td {
    font-size: 16px !important;
}

/* iOS-Messages-style send-time: centred and muted, sitting above its bubble.
   #8a8a8e is legible on both the white and dark message backgrounds */
.message-timestamp {
    text-align: center;
    color: #8a8a8e;
    font-size: 1.2rem;
    line-height: 1.2;
    margin: 0.9rem 0 0.15rem;
}

/* the bubble carries its own top margin, which doubles up under a timestamp */
.message-timestamp + div[class^="from-"] {
    margin-top: 0;
}

.imessage div.from-me, .imessage div.from-them {
    border-radius: 1.15rem;
    line-height: 1.25;
    max-width: 75%;
    padding: 0.5rem .875rem;
    position: relative;
    word-wrap: break-word;
}

.imessage div.from-me::before, .imessage div.from-me::after, 
.imessage div.from-them::before, .imessage div.from-them::after
 {
    bottom: -0.1rem;
    content: "";
    height: 1rem;
    position: absolute;
}

/* Light green + dark text (WhatsApp-style), not iOS's saturated #34C759 with white
   text: that pairing is only ~2.2:1 contrast, and it also swallowed the maroon inline
   links teachers paste into replies. This is ~16:1, and maroon links stay ~5.1:1 on it. */
div.from-me {
    align-self: flex-end;
    background-color: #dcf8c6;
    color: #111;
}

div.from-me::before {
    border-bottom-left-radius: 0.8rem 0.7rem;
    border-right: 1rem solid #dcf8c6;
    right: -0.35rem;
    transform: translate(0, -0.1rem);
}

div.from-me::after {
    background-color: #fff;
    border-bottom-left-radius: 0.5rem;
    right: -40px;
    transform:translate(-30px, -2px);
    width: 10px;
}

div[class^="from-"],  p[class^="from-"] {
    margin: 0.5rem 0;
    width: fit-content;
}

div.from-me ~ div.from-me {
    margin: 0.25rem 0 0;
}

div.from-me ~ div.from-me:not(:last-child) {
    margin: 0.25rem 0 0;
}

div.from-me ~ div.from-me:last-child {
    margin-bottom: 0.5rem;
}

div.from-them, p.from-them{
    align-items: flex-start;
    background-color: #e5e5ea;
    color: #000;
}

div.from-them:before, p.from-them:before {
    border-bottom-right-radius: 0.8rem 0.7rem;
    border-left: 1rem solid #e5e5ea;
    left: -0.35rem;
    transform: translate(0, -0.1rem);
}

div.from-them::after, p.from-them::after {
    background-color: #fff;
    border-bottom-right-radius: 0.5rem;
    left: 20px;
    transform: translate(-30px, -2px);
    width: 10px;
}

div[class^="from-"].emoji, p[class^="from-"].emoji {
    background: none;
    font-size: 2.5rem;
}

div[class^="from-"].emoji::before, p[class^="from-"].emoji::before {
    content: none;
}

.no-tail::before {
    display: none;
}

.margin-b_none {
    margin-bottom: 0 !important;
}

.margin-b_one {
    margin-bottom: 1rem !important;
}

.margin-t_one {
    margin-top: 1rem !important;
}


@media screen and (max-width: 800px) {

    .imessage {
        /*font-size: 1.05rem;*/
        margin: 0 auto 1rem;
        max-width: 600px;
        padding: 0.25rem 0.875rem;
    }

    .imessage p, .imessage div.from-me, .imessage div.from-them {
        margin: 0.5rem 0;
    }
}

/* ---------------------------------------------------------------------------
   show_class FAQ variants.

   The FAQ borrows the bubble layout but is not a conversation, so it gets its
   own colours rather than inheriting the green/grey "who sent this" signal.
   `from-me` is the question, `from-them` is the answer.

   These modifiers carry an extra class, so they outrank the base rules on
   specificity and do not depend on being declared after them.
   --------------------------------------------------------------------------- */

/* Marketplace: on brand, but as tints rather than fills. A saturated bubble with
   white text is indistinguishable from .btn-success (#b42d67) and its hover state
   (#9b305e) — and the FAQ sits directly under a real .btn-primary accordion opener.
   Tint + dark ink reads as a surface, so nothing here competes with the Book CTA.
   The question carries the stronger tint and a weight bump because it is the short
   half; that keeps total colour weight low across a long stack of FAQs. */
.imessage--qna div.from-me {
    background-color: #F8DAE4;
    color: #331520;
    font-weight: 600;
}
.imessage--qna div.from-me::before {
    border-right: 1rem solid #F8DAE4;
}
.imessage--qna div.from-them {
    background-color: #ECECF0;
    color: #111;
}
.imessage--qna div.from-them:before {
    border-left: 1rem solid #ECECF0;
}

/* Widget referral (the class page served under a teacher's own brand): neutral
   greys, so our maroon does not fight whatever palette their site uses. Kept as
   tints for the same reason as above — we cannot know what a filled pill collides
   with on someone else's site. */
.imessage--qna-neutral div.from-me {
    background-color: #D9D9DE;
    color: #1B1B1E;
    font-weight: 600;
}
.imessage--qna-neutral div.from-me::before {
    border-right: 1rem solid #D9D9DE;
}
.imessage--qna-neutral div.from-them {
    background-color: #F0F0F3;
    color: #111;
}
.imessage--qna-neutral div.from-them:before {
    border-left: 1rem solid #F0F0F3;
}