/* Messenger owns its layout: page/form styles must not alter message spacing. */
.member-app #message_box {
    position:fixed; inset:0; top:0 !important; width: min(570px, calc(100vw - 48px));
    min-width:0; max-width:570px !important; height:min(760px, calc(100dvh - 48px));
    max-height:calc(100dvh - 48px); margin:auto; padding:0; overflow:hidden;
    border:1px solid var(--ui-line); border-radius:7px; box-shadow:0 24px 80px #0006;
    background:var(--ui-surface); color:var(--ui-text); font-family:inherit;
}
#message_box *, #message_box *::before, #message_box *::after {box-sizing:border-box;}
#message_box > .modal-content {padding:0; height:100%;}
#message_box .msg_list, #message_box .chat_header,
#message_box .msg_list button, #message_box .msg_list input {font-family:inherit;}
#message_box .msg_header, #message_box .chat_header {
    flex:0 0 auto; min-height:72px; padding:12px 16px; gap:8px;
    background:var(--ui-surface); border-bottom:1px solid var(--ui-line); box-shadow:none;
}
#message_box .msg_header h2 {font-size:22px; font-weight:650; line-height:1.3; font-family:inherit; color:var(--ui-text);}
#message_box .msg_toolbar, #message_box .chat_toolbar {gap:4px; flex-shrink:0;}
#message_box .msg_toolbar .btn, #message_box .chat_toolbar .btn,
#message_box .chat_navigation .btn {
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:44px; height:44px; min-height:44px; line-height:1; margin:0; padding:0;
    border:0; border-radius:50%; background:transparent; box-shadow:none; color:var(--ui-muted);
}
#message_box .msg_toolbar .btn:hover, #message_box .chat_toolbar .btn:hover,
#message_box .chat_navigation .btn:hover {background:var(--ui-raised); color:var(--ui-text);}
#message_box .msg_toolbar .btn svg, #message_box .chat_toolbar .btn svg,
#message_box .chat_navigation .btn svg {display:block; margin:0; width:22px; height:22px;}
#message_box .chat_participant {min-width:0; width:auto; gap:10px;}
#message_box .chat_participant .c_avatar {width:40px; min-width:40px; height:40px; margin:0;}
#message_box .chat_participant .c_name {min-width:0; width:auto;}
#message_box .chat_participant .c_name span.name {display:block; font-size:15px; font-weight:600; color:var(--ui-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#message_box .chat_participant .c_name span.last_seen {font-size:11px; color:var(--ui-muted); line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#message_box .msg_container, #message_box .chat_container {flex:1 1 0; height:auto; min-height:0;}
#message_box .m_search {padding:12px 16px; background:var(--ui-surface); border-bottom:1px solid var(--ui-line);}
#message_box .m_search .search_input {padding:0;}
#message_box .m_search .search_input input {width:100%; min-width:0; height:44px; padding:10px 14px 10px 42px; margin:0; font-size:15px; background:var(--ui-raised); color:var(--ui-text); border:1px solid var(--ui-line); border-radius:12px;}
#message_box .m_search .search_input input::placeholder {color:var(--ui-muted); opacity:1;}
#message_box #chat_search:focus-visible {outline:none !important; border-color:var(--ui-accent); box-shadow:inset 0 0 0 1px var(--ui-accent);}
#message_box .m_body {min-height:0; background:var(--ui-surface);}
#message_box .m_body_content {overscroll-behavior:contain; scrollbar-width:thin;}
#message_box .msg_requests {padding:0; gap:6px; margin:12px 12px 6px; width:calc(100% - 24px); white-space:normal;}
#message_box .msg_requests span {display:flex; align-items:center; justify-content:center; gap:4px; flex:1; min-height:44px; height:auto; padding:8px; font-size:13px; font-weight:500; line-height:1.35; font-family:inherit; border-radius:10px;}
#message_box .msg_requests span b {font:inherit; font-weight:600; color:inherit;}
#message_box .m_conversation .m_con_item {margin:0 8px; padding:14px 12px 14px 74px; min-height:80px; border-radius:12px; transition:background-color .15s;}
#message_box .m_conversation .m_con_item .m_c_item_avatar {left:12px; width:48px; height:48px;}
#message_box .m_conversation .m_con_item .m_c_item_name {padding-top:0; max-width:calc(100% - 80px);}
#message_box .m_conversation .m_con_item .m_c_item_name span {font-size:15px; font-weight:600; line-height:1.5;}
#message_box .m_conversation .m_con_item .m_c_item_time {padding:3px 0 0 8px; color:var(--ui-muted); line-height:1.5;}
#message_box .m_conversation .m_con_item .m_c_item_snippet {margin:4px 0 0; line-height:1.4; color:var(--ui-muted);}
#message_box .m_conversation .m_con_item.active {background:#26a69a20;}
#message_box .m_conversation .m_con_item.active .m_c_item_time,
#message_box .m_conversation .m_con_item.active .m_c_item_snippet {color:var(--ui-text);}
#message_box .chat_body {min-height:0; background:var(--ui-bg);}
#message_box .chat_body_content {padding:20px 18px 10px; background:var(--ui-bg); overscroll-behavior:contain; scrollbar-width:thin;}
#message_box .chat_body_content .messages {margin:0 0 14px; padding:0;}
#message_box .chat_body_content .msg_r_combo .m_msg_part {margin-left:38px;}
#message_box .chat_body_content .msg_s_combo .m_msg_part {margin-right:22px;}
#message_box .chat_body_content .messages .message {
    margin:0 0 4px; padding:6px 12px; min-height:0; max-width:82%;
    font-family:inherit; font-size:15px; line-height:1.45; letter-spacing:normal;
    overflow-wrap:anywhere; white-space:normal; border-radius:15px;
}
#message_box .chat_body_content .message p {margin:0; padding:0; line-height:inherit;}
#message_box .chat_body_content .message a {color:inherit; text-decoration:underline; text-underline-offset:2px;}
#message_box .chat_body_content .messages--received .message {background:#263b43; color:#f1f4f5; border-bottom-left-radius:6px; border-top-left-radius:6px;}
#message_box .chat_body_content .messages--sent .message {background:#17665e; color:#fff; border-bottom-right-radius:6px; border-top-right-radius:6px;}
#message_box .chat_body_content .messages .message.image,
#message_box .chat_body_content .messages .message.gifimg {display:block; padding:0; width:auto; height:auto; max-width:min(75%, 260px); background:transparent; border-radius:12px !important; white-space:normal;}
#message_box .chat_body_content .message.image a, #message_box .chat_body_content .message.gifimg a {display:block;}
#message_box .chat_body_content .message.image img, #message_box .chat_body_content .message.gifimg img {display:block; width:auto; height:auto; max-width:100%; max-height:320px; object-fit:contain;}
#message_box .chat_body_content .unread_msg_line {margin:12px 0 20px; color:var(--ui-muted);}
#message_box .chat_body_content .unread_msg_line::before,
#message_box .chat_body_content .unread_msg_line::after {border-color:var(--ui-line);}
#message_box .dt_chat_lod_more {top:76px; height:auto; padding:6px 12px; line-height:1.4; border-radius:20px; color:var(--ui-text); background:var(--ui-raised); font-size:12px;}
#message_box .chat_foot {border-top:1px solid var(--ui-line); background:var(--ui-surface);}
#message_box .chat_f_text {padding:12px; min-height:0;}
#message_box #chat_message_form {display:flex; gap:10px; align-items:flex-end; margin:0;}
#message_box .chat_f_textarea {flex:1 1 0; min-width:0; max-width:none;}
#message_box .chat_f_write {height:auto; min-height:46px;}
#message_box .chat_f_write .emojionearea {min-height:46px; height:auto; border:1px solid var(--ui-line); border-radius:30px; background:var(--ui-raised); box-shadow:none;}
#message_box .chat_f_write .emojionearea.focused {border-color:var(--ui-accent); box-shadow:0 0 0 1px var(--ui-accent);}
#message_box .emojionearea-editor:focus-visible {outline:none !important;}
#message_box .chat_f_write .emojionearea .emojionearea-editor {
    min-height:44px; max-height:min(140px, 25dvh); height:auto;
    margin:0 !important; padding:11px 94px 11px 46px; line-height:21px; font-size:16px;
    background:transparent; color:var(--ui-text); font-family:inherit; overflow-wrap:anywhere; white-space:normal;
}
#message_box .chat_f_write .emojionearea-editor:empty::before {color:var(--ui-muted); display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#message_box .chat_f_write .emojionearea-button {top:auto; bottom:0; left:0; right:auto; width:44px; height:44px; margin:0; transform:none;}
#message_box .chat_f_write .emojionearea-button>div {left:11px; top:11px;}
#message_box .emojionearea .emojionearea-picker {top:auto; bottom:calc(100% + 10px); left:0; right:auto; margin:0; width:min(316px, calc(100vw - 24px)); height:min(276px, calc(100dvh - 220px)); max-height:none;}
#message_box .emojionearea .emojionearea-picker .emojionearea-wrapper {width:100%; height:100%;}
#message_box .emojionearea .emojionearea-picker .emojionearea-wrapper::after {display:none;}
#message_box .chat_f_attach {display:flex; align-items:center; gap:0; top:auto; bottom:1px; right:2px; transform:none; height:44px;}
#message_box .chat_f_attach button {display:inline-flex; justify-content:center; align-items:center; width:44px; height:44px; padding:0; margin:0; border:0; border-radius:10px; background:transparent; box-shadow:none; color:var(--ui-muted); cursor:pointer;}
#message_box .chat_f_attach button:hover {background:#ffffff0c; color:var(--ui-text);}
#message_box .chat_f_attach button svg {width:21px; height:21px; display:block; margin:0;}
#message_box .chat_f_send {margin:0 0 1px; flex:0 0 44px;}
#message_box .chat_f_send .btn-floating {display:flex; align-items:center; justify-content:center; width:44px; height:44px; line-height:1; padding:0; border:0; background:var(--ui-accent); color:#072e2b; box-shadow:none;}
#message_box .chat_f_send .btn-floating svg {display:block; width:22px; height:22px; margin:0;}
#message_box .dt_acc_dec_msg {display:flex; justify-content:center; gap:10px; margin:0 0 12px;}
#message_box .dt_acc_dec_msg .btn {display:inline-flex; align-items:center; justify-content:center; gap:6px; height:auto; min-height:44px; line-height:1.35; padding:10px 15px; margin:0; font-family:inherit;}
#message_box .dt_acc_dec_msg .btn svg {flex-shrink:0; margin:0;}
/* Materialize portals these menus to body, outside the clipped dialog. */
#cht_opts_dropdown, #cht_more_opts_dropdown {min-width:210px; max-width:calc(100vw - 24px); padding:6px; border:1px solid var(--ui-line); border-radius:8px; box-shadow:0 14px 42px #0006;}
#cht_opts_dropdown li, #cht_more_opts_dropdown li {min-height:44px; border-radius:8px;}
#cht_opts_dropdown li>a, #cht_more_opts_dropdown li>a {display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px; font-family:inherit; font-size:14px; line-height:1.4;}
#cht_opts_dropdown li>a svg, #cht_more_opts_dropdown li>a svg {flex-shrink:0; width:20px; height:20px; margin:0;}
/* The GIF tray opens below the composer, within the existing chat window. */
#message_box #gify_box {position:relative; inset:auto; width:100%; max-width:none; height:auto; max-height:min(320px, calc(100dvh - 205px)); margin:12px 0 0; overflow:auto; overscroll-behavior:contain; border:0; border-top:1px solid var(--ui-line); border-radius:0; background:var(--ui-surface); color:var(--ui-text); box-shadow:none;}
#message_box #gify_box[hidden] {display:none !important;}
#gify_box .chat-gif-content {padding:12px 4px 4px;}
#gify_box .chat-gif-heading {display:flex; align-items:center; justify-content:space-between; gap:12px;}
#gify_box .chat-gif-heading h5 {margin:0; font-size:1rem;}
#gify_box .chat-gif-close, #gify_box #reload_gifs {display:flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:0; border-radius:8px; background:var(--ui-raised); color:var(--ui-text); font-size:24px; cursor:pointer;}
#gify_box .chat-gif-search {display:flex; align-items:center; gap:8px; margin:4px 0 8px;}
#gify_box #gify_search {box-sizing:border-box; flex:1; min-width:0; height:36px; margin:0; padding:6px 10px; border:1px solid var(--ui-line); border-radius:8px; background:var(--ui-raised); color:var(--ui-text); font-size:14px;}
#gify_box #gify_search::placeholder {color:var(--ui-muted); opacity:1;}
/* Keep the focus indicator inside the field so the tray cannot clip it. */
#message_box #gify_search:focus {outline:none !important; border-color:var(--ui-accent); box-shadow:inset 0 0 0 1px var(--ui-accent);}
#gify_box #gifylist {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; height:auto; min-height:64px;}
#gify_box #gifylist p {grid-column:1/-1; color:var(--ui-muted); line-height:1.6; margin:12px 0;}
#gify_box #gifylist[aria-busy=true]::before {content:''; width:28px; height:28px; border:3px solid var(--ui-line); border-top-color:var(--ui-accent); border-radius:50%; animation:gif-loading .8s linear infinite;}
#gify_box .chat-gif-option {min-width:0; display:block; margin:0; padding:0; border:0; border-radius:8px; background:var(--ui-raised); overflow:hidden; cursor:pointer;}
#gify_box #gifylist img {display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; margin:0; border-radius:0;}
#gify_box button:focus-visible {outline:2px solid var(--ui-accent); outline-offset:2px;}
#gify_box .chat-gif-credit {margin:12px 0 0; font-size:.75rem; color:var(--ui-muted);}
@keyframes gif-loading {to {transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce) {#gify_box #gifylist[aria-busy=true]::before {animation:none;}}
@media(max-width:600px) {
    .member-app #message_box {width:100%; max-width:100% !important; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0;}
    #message_box .msg_header, #message_box .chat_header {min-height:64px; padding:8px; gap:4px; padding-top:calc(8px + env(safe-area-inset-top));}
    #message_box .chat_participant {gap:8px;}
    #message_box .chat_participant .c_avatar {width:34px; min-width:34px; height:34px;}
    #message_box .chat_body_content {padding:16px 12px 8px;}
    #message_box .chat_body_content .messages .message {max-width:88%;}
    #message_box .chat_f_text {padding:10px 10px calc(10px + env(safe-area-inset-bottom));}
    /* iOS must not zoom the chat when focusing this compact search field. */
    #gify_box #gify_search {font-size:16px;}
    #message_box .dt_chat_lod_more {top:68px;}
}