[xmpp_Msg] { display: flex; flex-direction: row; align-items: flex-start; padding: .5rem 1rem; gap: .5rem; } [xmpp_Msg_avatar] { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--mol_theme_back); flex-shrink: 0; } [xmpp_Msg_content] { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 0; } [xmpp_Msg_from] { font-size: .75rem; opacity: .6; font-weight: bold; } [xmpp_Msg_body] { padding: .4rem .7rem; border-radius: .5rem; background: var(--mol_theme_card, #f0f0f0); max-width: 80%; word-break: break-word; } [xmpp_Compose_input] { flex: 1; } /* media */ [xmpp_Msg_media]:empty { display: none; } [xmpp_Msg_image] { display: block; max-width: min(320px, 80%); max-height: 240px; border-radius: .5rem; object-fit: contain; cursor: pointer; } [xmpp_Msg_audio] { max-width: min(320px, 80%); display: block; } [xmpp_Msg_link] { font-size: .85rem; opacity: .8; } [xmpp_Msg_status] { align-self: flex-end; font-size: .75rem; opacity: .6; color: var(--mol_theme_focus, #4a9eff); line-height: 1; } [xmpp_Msg_status]:empty { display: none; } [xmpp_My_avatar], [xmpp_Contact_avatar], [xmpp_Chat_avatar] { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--mol_theme_back); flex-shrink: 0; } [xmpp_Chat_avatar] { margin-right: .5rem; } [xmpp_Roster_contact] { display: flex; flex-direction: row; align-items: center; gap: .5rem; } [xmpp_Contact_label] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } [xmpp_Room_join_form] { margin-top: 1rem; } [xmpp_Toasts] { position: fixed; top: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 1000; pointer-events: none; max-width: 360px; } [xmpp_Toast] { position: relative; pointer-events: auto; cursor: pointer; flex-direction: column; align-items: stretch; text-align: left; background: var(--mol_theme_card); border-left: 3px solid var(--mol_theme_focus, #4a9eff); padding: .6rem 2rem .6rem .9rem; box-shadow: 0 4px 12px rgba(0,0,0,0.18); min-width: 240px; animation: xmpp_toast_in .2s ease-out; } [xmpp_Toast_close] { position: absolute; top: .2rem; right: .35rem; width: 1.4rem; height: 1.4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; opacity: .5; font-size: 1.1rem; line-height: 1; user-select: none; } [xmpp_Toast_close]:hover { opacity: 1; background: rgba(0,0,0,0.1); } @keyframes xmpp_toast_in { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } [xmpp_Toast_title] { font-weight: bold; font-size: .9rem; margin-bottom: .2rem; } [xmpp_Toast_body] { font-size: .85rem; opacity: .8; word-break: break-word; max-height: 4em; overflow: hidden; }