/**
 * SeekQuarry/Yioop --
 * Open Source Pure PHP Search Engine, Crawler, and Indexer
 *
 * Copyright (C) 2009 - 2026  Chris Pollett chris@pollett.org
 *
 * LICENSE:
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 * END LICENSE
 *
 * @author Chris Pollett
 * @license https://www.gnu.org/licenses/ GPL3
 * @link https://www.seekquarry.com/
 * @copyright 2009 - 2026
 * @filesource
 */
/*
    messages.css
    Stylesheet for User messages
 */

.messages-container,
.mail-container
{
    /* a content panel sits on the page in the foreground color, the same
       as the rest of the site's content areas, rather than showing the
       page background color through it */
    background-color: var(--color-foreground);
    border: 1px solid #CDE;
    display: flex;
    height: 42rem;
    /* the top nav bar is a 65px fixed .top-container; keep the
       container's top border a few px clear of it */
    margin-top: 72px;
    width: 100%;
}

.contacts-arrow
{
    color: var(--gray-50);
    font-size: 1.6667rem;
    padding: 10px;
    text-decoration: none;
}
.user-contacts,
.user-accounts
{
    overflow-y: scroll;
    overflow-x: auto;
    width: 28%;
    /* floor wide enough for the full six-icon socialcontrols row
       (six ~38px buttons + gaps, the reserved scrollbar, and the
       wrap padding) plus headroom so it never wraps on desktop;
       28% still applies once the viewport is wider, and the
       split-adjuster can resize from here */
    min-width: 18.6rem;
}

.socialcontrols-wrap
{
    margin: 9px auto 5px auto;
    padding: 0 4px;
    box-sizing: border-box;
    max-width: 100%;
}
.contact-detail
{
    border: 1px solid #CDE;
    width: 100%;
}
.selected-contact
{
    background: #F5F5DC;
}
.contact-detail-inner
{
    padding: 10px;
    position: relative;
}
.contact-detail a,
.contact-detail span
{
    color: var(--gray-0);
    font-size: var(--font-size-6);
    position: absolute;
    text-decoration: none;
    top: 17px;
}
/* A contact row places its parts by hand, so the name and the call
   controls are wrapped together and that wrapper is what gets placed.
   Inside it they lay out in a line, which keeps the buttons reachable
   however long the name is, and the right edge stops the line running
   under the row's own menu. */
.html-ltr .contact-detail span.contact-detail-line,
.html-rtl .contact-detail span.contact-detail-line
{
    align-items: center;
    display: flex;
    gap: 0.5rem;
    inset-inline-end: 2.75rem;
    inset-inline-start: 60px;
    top: 17px;
}
.contact-detail span.contact-detail-line a,
.contact-detail span.contact-detail-line span
{
    inset-inline-end: auto;
    inset-inline-start: auto;
    position: static;
    top: auto;
}
.contact-detail span.contact-detail-line a#contact-id-,
.contact-detail span.contact-detail-line > a
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.contact-detail span.contact-detail-line span.contact-ringing-answer
{
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
}
.html-ltr .contact-detail span.contact-ringing-answer div,
.html-rtl .contact-detail span.contact-ringing-answer div,
.html-ltr .contact-detail span.contact-ringing-answer a,
.html-rtl .contact-detail span.contact-ringing-answer a
{
    left: auto;
    position: static;
    right: auto;
    top: auto;
}
.contact-detail-request
{
    margin-left:5px;
    margin-right:5px;
    position:relative;
    top:-45px;
}
/* A contact's row lays its parts out along a line, so the marks that
   open what can be done stand at the end of the row itself rather than
   dropping below it. The name inside the row is placed by hand, so the
   part holding it is given the space left over. */
.contact-detail
{
    align-items: center;
    display: flex;
}
.contact-detail .contact-detail-inner
{
    flex: 1;
    min-width: 0;
}
.contact-detail .unread-messages
{
    flex: none;
    order: 1;
}
/* What can be done to a conversation sits behind three marks standing
   one above the other, at the end of the row. The marks are drawn
   rather than written as a letter, since a letter for them is missing
   from some of the faces a browser has to hand. */
.contact-detail-options
{
    flex: none;
    margin-left: 5px;
    margin-right: 5px;
    order: 2;
}
.contact-detail-options ul.link-dropdown > li
{
    border: 0;
}
/* A contact's name is placed by hand inside the row, and the rule
   that does it would take the words in this list with it, leaving
   them a few pixels tall, so they are set back in the ordinary flow. */
.contact-detail-options a,
.contact-detail-options span
{
    font-size: var(--font-size-7);
    position: static;
    top: auto;
}
/* The list of what can be done stands clear of the row and wide
   enough to read, since the panel it opens in is a narrow one. */
.contact-options ul.link-dropdown li ul
{
    background-color: var(--color-background);
    inset-inline-end: 0;
    min-width: 11rem;
    z-index: 6;
}
.contact-options ul.link-dropdown li ul li
{
    float: none;
    text-align: start;
    white-space: nowrap;
}
.contact-options-dots
{
    align-items: center;
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 8px;
    row-gap: 3px;
    text-decoration: none;
}
.contact-options-dots span
{
    background-color: var(--gray-33);
    border-radius: 50%;
    display: block;
    height: 4px;
    width: 4px;
}
.contact-options-dots:hover span
{
    background-color: var(--gray-0);
}
.html-ltr .contact-detail a,
.html-ltr .contact-detail span,
.html-rtl .contact-detail a,
.html-rtl .contact-detail span
{
    inset-inline-start: 60px;
}
.contact-detail a:hover
{
    text-decoration: underline;
}
.contact-detail:hover
{
    background: #E9F5DC;
}
.contact-actions button
{
    display: none;
}
/* The box and the mark beside it share one line, the box taking what
   room is left over so the mark keeps its own width at any screen
   size. Without this the box took the whole width and pushed the mark
   onto a line of its own. */
.contact-actions
{
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
}
.contact-actions input
{
    border-radius: 5px;
    flex: 1 1 auto;
    font-size: 2rem;
    font-weight: bold;
    margin: 4px;
    min-width: 0;
}
/* The mark matches the box it stands beside. The box is set larger
   than ordinary text, so the mark takes the same text size and the same
   room above and below rather than a height of its own, which held it
   at a third of the box whatever the text size was. */
.contact-actions:focus-within button
{
    background-color: #F0F0F6;
    border:1px solid var(--gray-50);
    border-radius:5px;
    color:var(--gray-0);
    display: inline-block;
    font-size: 2rem;
    font-weight:bold;
    margin: 4px;
    padding: 1px 0.5rem;
    vertical-align: middle;
}

.split-adjuster
{
    background-color: #CDE;
    cursor: ew-resize;
    height: 100%;
    width: 2px;
}
/* The conversation and the row a message is written in stand in one
   column of a settled height, so the row keeps its place at the foot and
   the conversation above it scrolls. Without this the row grew downward
   past the border of the chat as a message got longer. */
.contact-messages,
.account-messages
{
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}
.contact-messages > #conversation,
.account-messages > #conversation
{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* With no conversation yet the warning stands where the message list
   would, so it takes the same growing space and the box to write in
   stays at the foot of the panel rather than floating up under a short
   warning. */
/* With a conversation open but no messages yet, the writing box sits
   below the notice, so the notice takes the growing space and the box
   stays at the foot. Where no box follows -- nothing picked, or a
   contact that is gone -- the notice keeps its own size and sits as a
   small centered card rather than a tall panel. */
.contact-messages > .user-messages-warning:has(~ #new-message-container)
{
    flex: 1 1 auto;
    min-height: 0;
}
#new-message-container
{
    flex: none;
}
/* A message stands in its own space so the mark that takes it back can
   sit at its corner. The mark is a ring with a cross in it, kept faint
   until the message is under the pointer. */
.message-detail
{
    position: relative;
}
.message-delete
{
    align-items: center;
    background-color: var(--color-background);
    border: 1px solid var(--gray-67);
    border-radius: 50%;
    color: var(--gray-33);
    display: flex;
    font-size: 0.7rem;
    height: 1.1rem;
    inset-block-start: -0.55rem;
    inset-inline-end: -0.55rem;
    justify-content: center;
    line-height: 1;
    opacity: 0;
    position: absolute;
    text-decoration: none;
    transition: opacity 0.15s;
    width: 1.1rem;
}
.message-detail:hover .message-delete,
.message-delete:focus
{
    opacity: 1;
}
.message-delete:hover
{
    background-color: var(--gray-67);
    color: var(--color-background);
}
.selected-conversation-header
{
    background-color: #FED;
    height: 50px;
    width: 100%;
}
.selected-conversation-header .call-controls
{
    min-width: 70px;
    padding-left:10px;
    padding-right:10px;
    position: relative;
    top:3px;
}

.selected-conversation-header h2
{
    padding-left:20px;
    padding-right:20px;
    position: relative;
    top:5px;
    width: fit-content;
}

.selected-conversation-header h2 span
{
    position: relative;
    top:-10px;
}
.conversation
{
    display: flex;
    flex-direction: column-reverse;
    height: calc(100% - 110px);
    overflow-y: scroll;
}
#av-call
{
    background: var(--gray-0);
    color: var(--gray-100);
    display: none;
    height: calc(100% - 49px);
}
#av-call-div
{
    background: var(--gray-100);
    border-radius: 20%;
    font-size: 6rem;
    height: 8.4rem;
    left: 55%;
    padding-top: 15px;
    position: absolute;
    text-align: center;
    top: 40%;
    width: 9rem;
}

#local-av
{
    display: block;
    height: 20%;
    position: relative;
    left: 80%;
    top: -8px;
    width: 20%;
    z-index: 20;
}

#remote-av
{
    display:block;
    margin:0;
    padding: 0;
    position: relative;
    top: calc(-13% - 8px);
    width: 100%;
    z-index: 1;
}
.video-call
{
    background-color: #8FA;
}
.selected-conversation-header .call-controls .icon-button-container
{
    height: var(--control-height);
    padding: 0;
    width: var(--control-height);
}
#video-end
{
    display: none;
}
.video-call-end
{
    background-color: #F55;
}
.message-detail-outer
{
    display: inline-block;
    max-width: 50%;
    overflow-wrap: anywhere;
    text-align: justify;
}
.message-detail-outer img
{
    max-width: 100%;
}

.message-icon
{
    border: 2px solid lightblue;
    border-radius: 17px;
    width:35px;
}
.message-other-time,
.message-user-time
{
    color: var(--gray-73);
    font-size: var(--font-size-1);
}
.html-ltr .message-user-time,
.html-rtl .message-user-time
{
    margin-inline-end:3rem;
}
.html-ltr .message-other-time,
.html-rtl .message-other-time
{
    margin-inline-start:0.48rem;
}
.message-detail
{
    padding: 7px;
    margin: 5px 3rem 5px 3rem;
    width: fit-content;
}
.message-detail.message-mine
{
    background-color: var(--color-topbar);
    border: 1px solid var(--gray-80);
    color: var(--gray-0);
}
.message-detail.message-theirs
{
    background-color: var(--gray-93);
    border: 1px solid var(--gray-80);
    color: var(--gray-0);
}
/* The square corner is on the bottom on the side the message is anchored
   to, which flips with direction, so the corners are named logically:
   the block-end inline-end corner is the squared one. */
.html-ltr .message-detail,
.html-rtl .message-detail
{
    border-start-start-radius: 7px;
    border-start-end-radius: 7px;
    border-end-end-radius: 0;
    border-end-start-radius: 7px;
}
/* The squared corner is the block-start inline-start one, which flips
   with direction; named logically it is one rule for both. */
.html-ltr .top-corner,
.html-rtl .top-corner
{
    border-start-start-radius: 0;
    border-start-end-radius: 7px;
    border-end-end-radius: 7px;
    border-end-start-radius: 7px;
}
.user-messages-warning,
.user-mail-warning
{
    background-color: #FED;
    border-color: #FEB;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #860;
    /* the panel is a flex column, so auto margins center the notice
       both ways; it sits in the middle of the pane rather than low
       down, which a downward offset had made it do */
    margin: auto;
    padding: 10px;
    text-align: center;
    width: fit-content;
}
#new-message-container
{
    box-sizing: border-box;
    left: 0;
    margin:auto;
    position: relative;
    text-align: center;
    width: 100%;
}
#new-message
{
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    color: var(--gray-0);
    flex: 1;
    font-family: inherit;
    font-size: var(--font-size-7);
    line-height: 1.3;
    max-height: 6rem;
    min-width: 0;
    outline: none;
    overflow-y: auto;
    padding: 6px 0;
    resize: none;
}

#attach-new-file
{
    align-items: center;
    background-color: var(--color-topbar);
    border-radius: 50%;
    border: solid 1px var(--gray-50);
    color: var(--gray-0);
    cursor: pointer;
    display: inline-flex;
    flex: none;
    font-size: 28px;
    font-weight: bold;
    height: 44px;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    width: 44px;
}
#send-message
{
    background-color: transparent;
    border: none;
    color: var(--gray-0);
    cursor: pointer;
    font-size: 22px;
    height: 40px;
    padding: 0 4px;
}
#contact-filter
{
    width: 11.4rem;
}

#user-input-container
{
    align-items: flex-end;
    background-color: var(--gray-93);
    border-radius: 20px;
    border: solid 1px var(--gray-80);
    color: var(--gray-0);
    display: inline-flex;
    flex: 1;
    gap: 2px;
    min-height: 44px;
    min-width: 0;
    padding-block: 2px;
    padding-inline: 6px;
    text-align: start;
}
#emoji-picker-button
{
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 22px;
    height: 40px;
    padding: 0 4px;
}
.emoji-picker-container
{
    display: none;
    border: solid 1px var(--gray-50);
    border-radius: 5px;
    width: 400px;
    position: absolute;
    bottom: 105%;
    height: 350px;
    background-color: var(--gray-100);
    z-index: 1;
}

.emoji
{
    border: none;
    display: inline-block;
    font-size: 22px;
    cursor: pointer;
    font-size: 35px;
    padding: 2px;
    margin: 2px;
}
.emoji-group-navigator
{
    position: absolute;
    bottom: 0;
    height: 15%;
    border-top: 1px solid var(--gray-50);
    text-align: center;
    z-index: 2;
    width: 100%;
}
.emoji-group-container
{
    display: none;
    text-align: left;
    height: 85%;
    position: absolute;
    width: 100%;
}
.emoji-container
{
    width: 100%;
    height: 90%;
    overflow-y: scroll;
    position: relative;
    padding: 10px;
}
#emoji-group-name
{
    font-size: 10px;
    text-transform: uppercase;
    color: var(--gray-50);
    margin: 5px;
}
.active-emoji-group
{
    display: flex;
    flex-direction: column;
}
.emoji-group-tab
{
    margin: 5px;
    font-size: 22px;
    cursor: pointer;
    display: inline-block;
    padding: 5px;
}

.active-emoji-group-tab
{
    background-color: gainsboro;
    border: 1px solid var(--gray-50);
    border-radius: 10%;
}
#new-message-container form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
}
.audio-control {
    background-color: transparent;
    border: none;
    color: var(--gray-0);
    cursor: pointer;
    font-size: 22px;
    height: 40px;
    padding: 0 4px;
}
#audio-controls {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
#audio-controls.none {
    display: none;
}
#mic-icon,
#play-audio-btn,
#delete-audio-btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}
.recording {
    color: red;
}
.ai-summary-hidden {
    display: none;
    margin-left: 65px;
}
/* Audio transcription styles */
.audio-message-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin: 8px 0;
    width: 300px;
    max-width: 100%;
}
.audio-player-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: -4px;
}
.audio-message-container audio,
.audio-message-container video {
    width: 100%;
    border-radius: 4px;
}
/* The mark that shows what was said sits at the lower corner of the
   recording it belongs to, over the picture the recording has nothing
   to fill, where it is out of the way of the play controls. */
.transcribe-btn {
    position: absolute;
    bottom: 6px;
    inset-inline-end: 6px;
    background-color: transparent;
    border: none;
    color: var(--gray-0);
    cursor: pointer;
    font-size: 16px;
    padding: 2px;
    height: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    z-index: 1;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
}
.transcribe-btn:hover {
    transform: scale(1.2);
    text-shadow: 0 0 5px rgba(255, 255, 255, 1);
}
.transcribe-btn:active {
    transform: scale(0.95);
}
.transcript-container {
    display: none;
    padding: 8px;
    background-color: var(--gray-100);
    border: 1px solid var(--gray-88);
    border-radius: 4px;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    font-size: 14px;
    color: var(--gray-20);
    line-height: 1.4;
    max-height: 200px;
    overflow-y: auto;
    word-spacing: -0.1em;
}
.transcript-container.show {
    display: block;
}
.transcript-container.loading {
    color: var(--gray-40);
    font-style: italic;
}
.transcript-container.error {
    color: #d32f2f;
    font-style: italic;
}

@media (max-width: 600px)
{
    .inner-bar h1 span
    {
        top: -15px;
    }
    .sub-top-container
    {
        margin-top: 3rem;
    }
    .messages-container, .mail-container
    {
        height: 30rem;
        margin-top: 66px;
    }
    .user-contacts, .user-accounts
    {
        width: 100%;
        min-width: 0;
    }
    .contact-actions:focus-within button
    {
        font-size: 2rem;
        height: unset;
        z-index: 1000;
    }
    .selected-conversation-header h2
    {
        min-width: 200px;
        overflow: hidden;
        text-wrap: nowrap;
    }
    #av-call-div
    {
        left: 33%;
        top: 37%;
    }
    #local-av
    {
        float: right;
        left: initial;
        right:5px;
        top: 0;
    }
    .message-detail-outer
    {
        display: inline-block;
        max-width: 90%;
        overflow-wrap: anywhere;
        text-align: justify;
    }
    #contact-filter
    {
        width: 340px;
    }
    .emoji-picker-container
    {
        display: none;
        border: solid 1px var(--gray-50);
        border-radius: 5px;
        width: 250px;
        position: absolute;
        bottom: 105%;
        height: 300px;
        background-color: var(--gray-100);
        z-index: 1;
    }
    .emoji-group-tab
    {
        margin: 2% 0 0 0;
        font-size: 100%;
        display: inline-block;
        padding: 2%;
    }
    .messages-container.no-selection .contact-messages
    {
        display: none;
    }
    .messages-container.has-selection .user-contacts
    {
        display: none;
    }
    .user-contacts,
    .contact-messages
    {
        width: 100%;
    }
}

/* How lately a contact was at their own messages screen is shown by the
   border around their icon, greenest when they are there now and cooling
   through yellow and orange to red as the last sighting recedes. Color
   alone cannot carry the fact, so the icon also says in words how lately
   they were seen, which the alt text and the title both hold, and the
   border thickness falls with each step for a reader who cannot tell
   those colors apart. A contact not seen at all keeps the plain icon. */
.message-icon.contact-seen-here
{
    border: 4px solid light-dark(#177245, #4ade80);
}
.message-icon.contact-seen-lately
{
    border: 3px solid light-dark(#ca8a04, #fde047);
}
.message-icon.contact-seen-a-while
{
    border: 3px solid light-dark(#ea580c, #fb923c);
}
.message-icon.contact-seen-long
{
    border: 2px solid light-dark(#b91c1c, #f87171);
}
/* The words and buttons for a call are drawn for every contact and
   kept out of the way until that contact calls, so a call arriving on
   an open screen needs no markup built in the browser and the controls
   keep the place the page gives them. */
.call-trouble
{
    color: light-dark(#b91c1c, #f87171);
    font-weight: bold;
    margin: 8px 0;
    text-align: center;
}
/* A contact whose call is waiting has their name pulse, and the two
   buttons for picking the call up or turning it down stand beside it. */
.contact-ringing
{
    animation: contact-ringing-pulse 1.2s ease-in-out infinite;
    font-weight: bold;
}
@keyframes contact-ringing-pulse
{
    0%, 100%
    {
        opacity: 1;
    }
    50%
    {
        opacity: 0.35;
    }
}
/* What the pulse means, said in words, kept out of sight but left where
   a screen reader still reads it. */
.contact-ringing-said
{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.contact-ringing-said.hidden-until-ringing,
.contact-ringing-answer.hidden-until-ringing,
.html-ltr .contact-detail span.contact-ringing-answer.hidden-until-ringing,
.html-rtl .contact-detail span.contact-ringing-answer.hidden-until-ringing
{
    display: none;
}
.contact-ringing-answer
{
    display: inline-flex;
    gap: 4px;
    margin-left: 8px;
    vertical-align: middle;
}
/* Where someone has asked for less movement the pulse is not run;
   the bold weight and the words beside it still say a call waits. */
@media (prefers-reduced-motion: reduce)
{
    .contact-ringing
    {
        animation: none;
    }
}
