/* Tubblur */
MARQUEE {
    filter: blur(100px);
    transform: translate3d(0, 0, 0);
}

MARQUEE:hover {
    filter: blur(0);
}

/* Dir listing elements are NOT contained in a wrapper div; style them like code */
body> :not(div) {
    font-family: monospace;
}

/* <pre> is required to keep poem spacing, but shouldn't look like code */
body,
pre.poetry {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* The rest is generated by https://github.com/ReagentX/imessage-exporter */
.messages p {
    margin: 0px;
}

.messages xmp {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    white-space: pre-wrap;
    margin: 0px;
}

.messages svg {
    width: 100vw;
    max-width: 100%;
    height: auto;
}

.messages a[href^="#"] {
    text-decoration: none;
    color: darkblue;
}

.messages .message {
    margin: 1%;
    overflow-wrap: break-word;
}

.messages .message .sent.iMessage {
    background-color: #1982FC;
}

.messages .message .sent.sms {
    background-color: #65c466
}

.messages .message .sent {
    color: white;
    border-radius: 25px;
    padding: 15px;
    margin-left: auto;
    margin-right: 0;
    max-width: 60%;
    width: fit-content;
}

.messages .message .received {
    background-color: #d8d8d8;
    color: black;
    border-radius: 25px;
    padding: 15px;
    margin-right: auto;
    margin-left: 0;
    max-width: 60%;
    width: fit-content;
}

.messages .message .sent .replies .reply .message .sent {
    border-style: solid;
    border-color: white;
    border-width: thin;
}

.messages .message .received .replies .reply .message .received {
    border-style: solid;
    border-color: darkgray;
    border-width: thin;
}

.messages .message .received .replies {
    border-left: dotted dimgray;
    border-bottom: dotted dimgray;
    border-bottom-left-radius: 25px;
}

.messages .message .sent .replies {
    border-left: dotted white;
    border-bottom: dotted white;
    border-bottom-left-radius: 25px;
}

.messages .received .replies {
    margin-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
}

.messages .sent .replies {
    margin-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
}

.messages .reply .received {
    max-width: 85%;
    padding: 15px;
}

.messages .reply .sent {
    max-width: 85%;
    padding: 15px;
}

.messages .app {
    background: white;
    border-radius: 25px;
}

.messages .app a {
    text-decoration: none;
}

.messages .app_header {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    color: black;
}


.messages .app_header img {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.messages .app_header audio {
    padding-bottom: 2%;
}


.messages .app_header .image_title {
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 15px;
    padding-right: 15px;
    overflow: auto;
}


.messages .app_header .image_subtitle {
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 15px;
    padding-right: 15px;
    overflow: auto;
}

.messages .app_header .ldtext {
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 15px;
    padding-right: 15px;
    overflow: auto;
}

.messages .app_header .name {
    color: black;
    font-weight: 600;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 15px;
    padding-right: 15px;
    overflow: auto;
}

.messages .app_footer {
    display: grid;
    grid-template-areas:
        'caption trailing_caption'
        'subcaption trailing_subcaption';
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;

    border-bottom-style: solid;
    border-bottom-color: darkgray;

    border-left-style: solid;
    border-left-color: darkgray;

    border-right-style: solid;
    border-right-color: darkgray;

    border-width: thin;
    color: black;
    background: lightgray;
    padding-bottom: 1%;
}

.messages .app_footer .caption {
    grid-area: caption;
    margin-top: 1%;
    padding-left: 15px;
    padding-right: 15px;
    overflow: auto;
}

.messages .app_footer .subcaption {
    grid-area: subcaption;
    margin-top: 1%;
    padding-left: 15px;
    padding-right: 15px;
    overflow: auto;
}

.messages .app_footer .trailing_caption {
    grid-area: trailing_caption;
    text-align: right;
    margin-top: 1%;
    padding-left: 15px;
    padding-right: 15px;
    overflow: auto;
}

.messages .app_footer .trailing_subcaption {
    grid-area: trailing_subcaption;
    text-align: right;
    margin-top: 1%;
    padding-left: 15px;
    padding-right: 15px;
    overflow: auto;
}

.messages span.timestamp {
    opacity: 60%;
}

.messages span.unsent {
    opacity: 75%;
}

.messages span.reply_anchor {
    opacity: 100%;
}

.messages span.sender {
    opacity: 100%;
}

.messages span.deleted {
    opacity: 60%;
}

.messages span.subject {
    font-weight: 600;
}

.messages span.bubble {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.messages span.reply_context {
    opacity: 60%;
}

.messages span.expressive {
    opacity: 60%;
}

.messages span.tapbacks {
    opacity: 60%;
}

.messages div.tapbacks img {
    max-width: 5em;
    padding-right: 1em;
}

.messages div.tapback {
    display: flex;
    align-items: center;
}

.messages span[class^="animation"] {
    text-shadow: #000 0 0 10px;
}

.messages div.sticker_effect {
    opacity: 60%;
}

.messages div.sticker img {
    max-width: 5em;
}

.announcement {
    text-align: center;
    padding: 2vh 1vw 2vh 1vw;
    word-wrap: break-word;
}

.messages img {
    max-width: 100%;
    max-height: 90vh;
}

.messages video {
    max-width: 100%;
    max-height: 90vh;
}

.messages audio {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.messages .sent table {
    color: white;
}

.messages .received table {
    color: black;
}

.messages .received .sent table {
    color: white;
}

.messages table {
    border-collapse: collapse;
    text-align: left;
}

.messages thead {
    border-bottom: 2px solid white;
}

.messages td {
    padding: 2px 5px;
}

.messages .sent tbody {
    color: rgba(256, 256, 256, 0.7)
}

.messages .received .sent tbody {
    color: rgba(256, 256, 256, 0.7)
}

.messages .received tbody {
    color: rgba(0, 0, 0, 0.7)
}

.messages .received .announcement {
    color: black;
}

.messages .sent .announcement {
    color: white;
}