/* Utopia Talk web client: sign-in screens and chat. Colours come from /theme.css tokens (light + dark). */

/* ===== Converse variables mapped to our tokens ===== */
html body converse-root.conversejs[data-converse-theme],html body converse-bg[data-converse-theme]{
  --background-color:var(--bg);--background-color-rgb:var(--bg-rgb);--foreground-color:var(--text);
  --primary-color:var(--accent-text) !important;--primary-rgb:var(--accent-rgb);
  --secondary-color:var(--muted) !important;--secondary-rgb:var(--text-rgb);
  --chat-rgb:var(--accent-rgb);--muc-rgb:var(--accent-rgb);--chat-color:var(--accent-text);
  --green:var(--accent);--green-rgb:var(--accent-rgb);--orange:var(--accent);--orange-rgb:var(--accent-rgb);--cyan:var(--accent);
  --pink:var(--accent);--pink-rgb:var(--accent-rgb);--purple:var(--accent);--purple-rgb:var(--accent-rgb);--yellow:var(--accent);
  --success-color:var(--ok);--danger-color:var(--danger);
  --converse-link-color:var(--accent-text) !important;--converse-link-hover-color:var(--accent-hover) !important;
  --converse-body-bg:var(--bg);--converse-body-bg-rgb:var(--bg-rgb);--converse-body-color:var(--text) !important;
  --avatar-border-radius:50%;--message-avatar-width:36px;--message-avatar-height:36px;
  --controlbox-color:var(--muted);--heading-color:var(--muted);--brand-heading-color:var(--text);--headlines-color:var(--accent-text);
  --chat-color:var(--accent-text);--chat-color-hover:var(--accent-hover);--muc-color:var(--accent-text);--muc-color-hover:var(--accent-hover);
  --chat-header-bg-color:var(--surface);--chat-header-fg-color:var(--text);--muc-header-bg-color:var(--surface);--muc-header-fg-color:var(--text);
  --headlines-header-bg-color:var(--surface);--headlines-header-fg-color:var(--text);
  --link-color:var(--accent-text);--link-color-hover:var(--accent-hover);--subdued-color:var(--muted);--error-color:var(--danger);
  --focus-color:var(--accent);--disabled-color:var(--muted);--primary-color-hover:var(--accent-hover);--secondary-color-hover:var(--text);
  --chat-status-online:var(--ok);--chat-status-away:#E5A63B;--chat-status-busy:var(--danger);--chat-status-offline:var(--muted);
  --highlight-color:var(--accent-soft);--highlight-color-hover:var(--accent-soft);--selection-color:var(--accent);
}
converse-footer,.converse-footer{display:none !important}

/* ===== sign-in and registration screens ===== */
#login[hidden],#register[hidden]{display:none}
#login,#register{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:22px 16px 40px;background:radial-gradient(900px 460px at 50% -10%,var(--glow),transparent 70%),var(--bg)}
#login .back,#register .back{align-self:flex-start;display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-weight:700;letter-spacing:.14em;font-size:14px;margin:0 0 20px clamp(0px,3vw,40px)}
#login .back img,#register .back img{height:30px}
#login .panel,#register .panel{display:grid;grid-template-columns:1fr 1fr;max-width:900px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:28px;overflow:hidden;margin:auto 0;box-shadow:var(--shadow)}
#login .qr-side,#login .form-side,#register .form-side{padding:40px clamp(22px,4vw,48px)}
#login .form-side,#register .form-side{border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
#login h1,#login h2,#register h2{margin:0 0 18px;font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
#login h2,#register h2{font-size:20px}
#login ol{margin:0 0 24px;padding-left:20px;color:var(--muted);line-height:1.8;font-size:15px}
#login .qr-box{width:244px;max-width:100%;aspect-ratio:1;background:#fff;border-radius:20px;padding:8px;display:flex;align-items:center;justify-content:center;position:relative;border:1px solid var(--line)}
#login #qr,#login #qr svg{width:100%;height:100%;display:block}
#login #qr-msg{position:absolute;left:0;right:0;bottom:-30px;text-align:center;color:var(--accent-text);font-size:13px}
#login form,#register form{display:flex;flex-direction:column;gap:16px}
#login label,#register label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:550;color:var(--muted)}
#login input,#register input{background:var(--bg);border:1px solid var(--line);border-radius:12px;color:var(--text);padding:0 14px;height:48px;font:inherit;font-size:16px;width:100%;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
#login input:focus,#register input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#login .jid,#register .jid{display:flex;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:12px;transition:border-color .15s,box-shadow .15s}
#login .jid:focus-within,#register .jid:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#login .jid input,#register .jid input{border:0;background:none;box-shadow:none !important;min-width:0}
#login .jid i,#register .jid i{font-style:normal;color:var(--muted);padding-right:14px;font-size:13px;white-space:nowrap;font-weight:400}
#login .btn,#register .btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:12px;height:50px;font:inherit;font-weight:650;font-size:16px;cursor:pointer;transition:background .15s,box-shadow .15s}
#login .btn:hover,#register .btn:hover{background:var(--accent-hover);box-shadow:0 8px 24px rgba(var(--accent-rgb),.28)}
#login .btn:disabled,#register .btn:disabled{opacity:.6;cursor:wait}
#login #err,#register #rerr{color:var(--danger);font-size:14px;min-height:1em}
#register .panel.single{grid-template-columns:1fr;max-width:460px}
#register .single .form-side{border-left:0}
#login .alt,#register .alt{margin:20px 0 0;color:var(--muted);font-size:14px}
#login a,#register a{color:var(--accent-text);text-decoration:none;font-weight:600}
@media (max-width:760px){
  #login .panel{grid-template-columns:1fr}
  #login .qr-side{display:none}
  #login .form-side{border-left:0}
}

/* ===== chat shell ===== */
body.chat{background:var(--bg);color:var(--text);font-size:15px}
body.chat #theme-toggle{top:38px;right:auto;left:262px;width:36px;height:36px;border-color:transparent;background:none}
body.chat #theme-toggle:hover{background:var(--surface-2)}
body.chat .conversejs{background:var(--bg)}
body.chat converse-chats,body.chat .converse-chatboxes{background:var(--bg)}
body.chat svg,body.chat converse-icon svg{fill:currentColor !important}
body.chat converse-icon{color:inherit}
body.chat *{scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
@media (min-width:821px){
  body.chat converse-controlbox#controlbox{flex:0 0 360px !important;width:360px !important;max-width:360px !important}
  body.chat converse-chat.chatbox{flex:1 1 0 !important;width:auto !important;min-width:0 !important;max-width:none !important}
  body.chat converse-controlbox#controlbox .flyout,body.chat converse-controlbox#controlbox .box-flyout,
  body.chat converse-chat .flyout,body.chat converse-chat .box-flyout{width:100% !important;min-width:0 !important;max-width:none !important;position:relative !important;left:0 !important;right:0 !important;top:0 !important;height:100vh !important;min-height:0 !important}
}
@media (max-width:820px){ body.chat:has(converse-chat) #theme-toggle{display:none} body.chat #theme-toggle{left:auto;right:56px} }

/* ===== sidebar ===== */
body.chat converse-controlbox#controlbox{background:var(--surface);border-right:1px solid var(--line) !important}
body.chat converse-controlbox .flyout,body.chat converse-controlbox .box-flyout,body.chat converse-controlbox .controlbox-pane{background:var(--surface) !important;border:0 !important;box-shadow:none !important}
body.chat .controlbox-section{border:0 !important;background:none}
body.chat converse-controlbox hr{display:none}
body.chat .controlbox-section.profile{padding:20px 20px 6px;align-items:center;gap:12px}
body.chat .controlbox-section.profile .show-profile{display:flex;align-items:center;gap:12px;color:var(--text);font-weight:650;font-size:17px;text-decoration:none;min-width:0}
body.chat .controlbox-section.profile .show-profile span,body.chat .controlbox-section.profile .show-profile a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
body.chat .controlbox-section.profile converse-avatar,body.chat .controlbox-section.profile .avatar,body.chat .controlbox-section.profile .avatar-initials{width:44px !important;height:44px !important;line-height:44px !important;font-size:18px !important;border-radius:50% !important;object-fit:cover;flex:none}
body.chat .controlbox-heading__btn,body.chat .controlbox-section.profile .btn{color:var(--muted) !important;background:none !important;border:0 !important;width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;transition:background .15s,color .15s}
body.chat .controlbox-heading__btn:hover,body.chat .controlbox-section.profile .btn:hover{background:var(--surface-2) !important;color:var(--accent-text) !important}
body.chat .controlbox-section.profile .change-status{margin:2px 0 0 56px;color:var(--muted);font-size:13px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
body.chat .controlbox-section.profile .change-status:hover{color:var(--text)}
body.chat .controlbox-section.profile .xmpp-status,body.chat .controlbox-section.profile .chat-status{color:var(--ok) !important}
/* section headers */
body.chat .controlbox-padded{padding-left:20px;padding-right:20px}
body.chat .list-toggle,body.chat .roster-group .group-toggle,body.chat a.group-toggle{color:var(--muted) !important;text-transform:uppercase;letter-spacing:.09em;font-size:11px !important;font-weight:650;text-decoration:none;font-family:inherit !important}
body.chat .open-rooms-toggle,body.chat .toggle-roster{font-size:11px !important}
body.chat converse-controlbox .btn--transparent,body.chat converse-controlbox .dropdown-toggle{color:var(--muted) !important;background:none !important;border:0 !important;border-radius:50%;width:32px;height:32px;display:inline-grid;place-items:center}
body.chat converse-controlbox .btn--transparent:hover,body.chat converse-controlbox .dropdown-toggle:hover{background:var(--surface-2) !important;color:var(--accent-text) !important}
/* rows */
body.chat converse-controlbox .list-item{border-radius:14px;margin:2px 10px;padding:8px 10px;display:flex;align-items:center;transition:background .12s;border:0}
body.chat converse-controlbox .list-item:hover{background:var(--surface-2)}
body.chat converse-controlbox .list-item.open,body.chat converse-controlbox .list-item.open:hover{background:var(--accent-soft) !important}
body.chat converse-controlbox .list-item a,body.chat converse-controlbox .list-item .contact-name{color:var(--text) !important;text-decoration:none;font-size:15.5px;font-weight:550}
body.chat converse-controlbox .list-item.open a{color:var(--text) !important}
body.chat converse-controlbox .list-item .cbox-list-item{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
body.chat converse-controlbox .contact-name,body.chat converse-controlbox .open-room{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;min-width:0}
body.chat converse-controlbox .list-item converse-avatar,body.chat converse-controlbox .list-item .avatar,body.chat converse-controlbox .list-item .avatar-initials{width:46px !important;height:46px !important;line-height:46px !important;font-size:19px !important;border-radius:50% !important;object-fit:cover;flex:none}
body.chat converse-controlbox .list-item .avatar{position:relative}
body.chat .chat-status--avatar{border:2px solid var(--surface) !important;width:13px !important;height:13px !important;right:-2px !important;bottom:-2px !important}
body.chat .msgs-indicator{background:var(--accent) !important;color:var(--accent-ink) !important;border-radius:999px;font-weight:700;font-size:12px;padding:2px 8px}
body.chat converse-controlbox .list-item .contact-actions{opacity:0;transition:opacity .12s}
body.chat converse-controlbox .list-item:hover .contact-actions{opacity:1}
body.chat .self-contact{display:none !important}
body.chat .roster-group:not(:has(.list-item:not(.self-contact))){display:none}
body.chat .pending-xmpp-contact,body.chat .pending-xmpp-contact a{opacity:.75}
body.chat .controlbox-section .form-control,body.chat converse-roster-filter .form-control{background:var(--bg) !important;border:1px solid var(--line) !important;border-radius:12px !important;color:var(--text) !important;height:40px}

/* ===== avatars: one calm look instead of random bright colours ===== */
body.chat .avatar-initials{background:var(--accent-soft) !important;color:var(--accent-text) !important;font-family:inherit !important;font-weight:650 !important;display:grid !important;place-items:center;border-radius:50%}
body.chat converse-avatar img,body.chat converse-avatar svg.avatar,body.chat img.avatar{border-radius:50% !important;object-fit:cover}

/* ===== chat header ===== */
body.chat .chat-head{background:var(--surface) !important;border-bottom:1px solid var(--line) !important;padding:0 20px !important;min-height:68px;display:flex !important;align-items:center;font-size:16px}
body.chat .chat-head .chatbox-title{flex:1;min-width:0;color:var(--text)}
body.chat .chat-head .chatbox-title--row{display:flex;align-items:center;gap:12px}
body.chat .chat-head converse-avatar,body.chat .chat-head .avatar,body.chat .chat-head .avatar-initials{width:42px !important;height:42px !important;line-height:42px !important;font-size:18px !important;border-radius:50% !important;object-fit:cover}
body.chat .chat-head .chatbox-title__text,body.chat .chat-head .chatbox-title__text a{color:var(--text) !important;font-weight:650;font-size:17px;text-decoration:none;font-family:inherit !important}
body.chat .chat-head .chatbox-btn .btn,body.chat .chat-head .btn--transparent,body.chat converse-controlbox-navback{color:var(--muted) !important;background:none !important;border:0 !important;width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center}
body.chat .chat-head .btn--transparent:hover{background:var(--surface-2) !important;color:var(--accent-text) !important}

/* ===== messages ===== */
body.chat converse-chat.chatbox,body.chat converse-muc.chatbox{background:var(--bg)}
body.chat .chat-body,body.chat .chat-content{background:radial-gradient(800px 360px at 85% 0,var(--glow),transparent 70%),var(--bg) !important}
body.chat .chat-content{padding:18px clamp(14px,4vw,56px) 8px !important}
body.chat converse-message-history{display:block;max-width:none;margin:0}
body.chat .chat-content .message{display:flex;align-items:flex-end;gap:10px;padding:0 !important;border:0;margin:0;background:none !important}
body.chat .chat-content .message.chat-msg{margin-top:8px}
body.chat .chat-content .message.chat-msg--followup{margin-top:2px}
body.chat .chat-content .message:hover{background:none !important}
body.chat converse-chat .chat-content .message,body.chat converse-chat .chat-content .chat-msg__content{padding-left:0 !important;margin-left:0 !important}
body.chat .chat-content .chat-msg__content{max-width:min(640px,72%);flex:0 1 auto;padding:0 !important;display:flex;flex-direction:column;position:relative}
body.chat .chat-content .message:has(.chat-msg__content--me){justify-content:flex-end}
body.chat .chat-content .chat-msg__content--me{align-items:flex-end}
/* bubble */
body.chat .chat-content .chat-msg__body{background:var(--bubble-in);color:var(--bubble-in-text);border-radius:18px 18px 18px 5px;padding:8px 13px 7px;display:flow-root;width:fit-content;max-width:100%;position:relative;line-height:1.45;box-shadow:0 1px 0 var(--line)}
body.chat .chat-content .message:not(.chat-msg--followup) .chat-msg__content--them .chat-msg__body{border-top-left-radius:18px}
body.chat .chat-content .chat-msg--followup .chat-msg__content--them .chat-msg__body{border-top-left-radius:5px}
body.chat .chat-content .chat-msg__content--me .chat-msg__body{background:var(--bubble-out);color:var(--bubble-out-text);border-radius:18px 18px 5px 18px;align-self:flex-end;box-shadow:none}
body.chat .chat-content .chat-msg--followup .chat-msg__content--me .chat-msg__body{border-top-right-radius:5px}
body.chat .chat-content .chat-msg__message,body.chat .chat-content .chat-msg__text{color:inherit;font-size:15px;word-break:break-word;white-space:pre-wrap}
body.chat .chat-content .chat-msg__text a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
body.chat .chat-content .chat-msg__content--me .chat-msg__text a{color:inherit;font-weight:600}
/* time (and delivery tick) inside the bubble, set from ui.js as data-t */
body.chat .chat-content .chat-msg__body[data-t]::after{content:attr(data-t);float:right;margin:7px 0 -2px 12px;font-size:11px;line-height:1;color:var(--bubble-in-meta);font-variant-numeric:tabular-nums}
body.chat .chat-content .chat-msg__content--me .chat-msg__body[data-t]::after{color:var(--bubble-out-meta)}
body.chat .chat-content .chat-msg__content--me .chat-msg__body--received[data-t]::after{content:attr(data-t) "  ✓"}
body.chat .chat-content .chat-msg__body .fa-check,body.chat .chat-content .chat-msg__body converse-icon.fa-check,body.chat .chat-content .chat-msg__body--received converse-icon{display:none !important}
body.chat converse-chat .chat-msg__heading{display:none}
body.chat converse-muc .chat-msg__heading{margin:0 4px 3px !important;font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}
body.chat converse-muc .chat-msg__author a{font-weight:650;font-size:13px;text-decoration:none}
body.chat converse-muc .chat-msg__time{display:none}
/* avatars beside messages: only in group chats */
body.chat converse-chat .chat-content .message>a:has(converse-avatar),body.chat converse-chat .chat-content .message>.avatar{display:none}
body.chat converse-muc .chat-content converse-avatar,body.chat converse-muc .chat-content .avatar-initials{width:34px !important;height:34px !important;line-height:34px !important;font-size:14px !important;border-radius:50% !important}
/* message actions: icon bar beside the bubble on hover (touch screens keep Converse's menu button) */
@media (hover:hover){
body.chat .chat-content .chat-msg__body converse-message-actions{position:absolute;top:50%;margin-top:-18px;display:none;z-index:3}
body.chat .chat-content .chat-msg__content--me .chat-msg__body converse-message-actions{right:calc(100% + 8px)}
body.chat .chat-content .chat-msg__content--them .chat-msg__body converse-message-actions{left:calc(100% + 8px)}
body.chat .chat-content .message:hover converse-message-actions,body.chat .chat-content .message:focus-within converse-message-actions{display:block}
body.chat converse-message-actions converse-dropdown{display:block;position:static}
body.chat converse-message-actions .chat-msg__actions>.dropdown-toggle{display:none !important}
body.chat converse-message-actions .chat-msg__actions>.dropdown-menu{display:flex !important;flex-direction:row;position:static !important;transform:none !important;margin:0;padding:3px;gap:1px;min-width:0;background:var(--surface-3);border:1px solid var(--line);border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.18) !important;list-style:none;white-space:nowrap}
body.chat converse-message-actions .chat-msg__actions>.dropdown-menu>li{display:block;margin:0;padding:0}
body.chat converse-message-actions .dropdown-item{font-size:0 !important;width:30px;height:30px;padding:0 !important;border-radius:50% !important;display:grid;place-items:center;background:none !important;color:var(--muted) !important;border:0}
body.chat converse-message-actions .dropdown-item converse-icon,body.chat converse-message-actions .dropdown-item converse-icon svg{font-size:15px;color:var(--muted) !important;fill:currentColor !important}
body.chat .chat-content .chat-msg__body converse-message-actions .dropdown-item converse-icon{display:inline-block !important}
body.chat converse-message-actions .dropdown-item:hover converse-icon{color:var(--accent-text) !important}
body.chat converse-message-actions .chat-msg__action-retract:hover converse-icon{color:var(--danger) !important}
body.chat converse-message-actions .dropdown-item:hover{background:var(--accent-soft) !important;color:var(--accent-text) !important}
body.chat converse-message-actions .chat-msg__action-retract:hover{color:var(--danger) !important}
}
body.chat .chat-content .chat-msg__body{overflow:visible}
/* reply quote */
body.chat converse-reply-context,body.chat .chat-msg__body blockquote{border-left:3px solid var(--accent);background:rgba(var(--text-rgb),.06);border-radius:8px;padding:4px 10px;margin:0 0 6px;font-size:13.5px}
/* date separators */
body.chat .chat-content .message.date-separator,body.chat .chat-content .message.separator{justify-content:center;margin:18px 0 10px;display:flex}
body.chat .chat-content hr.separator,body.chat .chat-content .date-separator hr{display:none}
body.chat .chat-content .separator-text{background:var(--surface-2);color:var(--muted);border-radius:999px;padding:4px 14px;font-size:12px;font-weight:550}
/* unread marker */
body.chat .message.separator .separator-text{background:var(--accent-soft);color:var(--accent-text)}
/* old OMEMO messages */
body.chat .chat-msg__text.undecryptable{font-size:0 !important}
body.chat .chat-msg__text.undecryptable *{display:none}
body.chat .chat-msg__text.undecryptable::before{content:var(--undecryptable);font-size:13px;font-style:italic;color:var(--muted);line-height:1.4}
body.chat .chat-msg__content--them .chat-msg__body:has(.undecryptable){background:transparent;border:1px dashed var(--line-strong);box-shadow:none}
body.chat .message.undecryptable-info{display:flex !important;justify-content:center;margin:12px 0 !important;padding:0 !important;background:none !important;border:0 !important}
body.chat .message.undecryptable-info>*{display:none !important}
body.chat .message.undecryptable-info::before{content:var(--undecryptable);background:var(--surface-2);color:var(--muted);border-radius:999px;padding:6px 16px;font-size:12.5px;text-align:center}
body.chat converse-chat-message:has(.undecryptable-info)+converse-chat-message:has(.undecryptable-info){display:none}
/* other notices */
body.chat .chat-info,body.chat .chat-error{color:var(--muted);font-size:13px;text-align:center}

/* ===== composer ===== */
body.chat .bottom-panel{background:var(--surface) !important;border-top:1px solid var(--line) !important;padding:12px clamp(14px,4vw,56px) 16px}
body.chat form.chat-message-form{position:relative;border:0 !important;background:none !important;max-width:none;margin:0}
body.chat .bottom-panel .chat-toolbar{position:static;background:none !important;padding:0;margin:0;width:auto;display:block}
body.chat .bottom-panel .chat-toolbar .toolbar-buttons{position:absolute;left:8px;bottom:12px;display:flex;gap:0;z-index:3}
body.chat .bottom-panel .chat-toolbar .btn,body.chat .bottom-panel .chat-toolbar a{color:var(--muted) !important;background:none !important;border:0 !important;width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;font-size:18px;padding:0}
body.chat .bottom-panel .chat-toolbar .btn:hover{background:var(--surface-2) !important;color:var(--accent-text) !important}
body.chat .bottom-panel .chat-textarea{display:block;width:100%;background:var(--surface-2) !important;border:1px solid transparent !important;border-radius:26px !important;color:var(--text) !important;padding:19px 60px 19px 118px !important;font:inherit;font-size:15px;line-height:1.4;min-height:50px;max-height:180px;box-shadow:none !important;resize:none;transition:border-color .15s,background .15s}
body.chat .bottom-panel .chat-textarea:focus{border-color:rgba(var(--accent-rgb),.55) !important;outline:none;background:var(--surface-2) !important}
body.chat .bottom-panel .chat-textarea::placeholder{color:var(--muted)}
body.chat .bottom-panel .send-button,body.chat .bottom-panel button[type=submit]{position:absolute !important;right:7px;bottom:11px;width:38px;height:38px;border-radius:50% !important;background:var(--accent) !important;color:var(--accent-ink) !important;border:0 !important;display:grid;place-items:center;padding:0;cursor:pointer;z-index:3}
body.chat .bottom-panel .send-button:hover{background:var(--accent-hover) !important}
body.chat .bottom-panel .send-button svg{fill:currentColor !important}
body.chat converse-reply-preview{background:var(--surface-2);border-radius:12px;margin:0 0 8px}

/* ===== menus, modals, forms ===== */
body.chat .dropdown-menu,body.chat .modal-content,body.chat .popover,body.chat converse-emoji-picker{background:var(--surface) !important;color:var(--text) !important;border:1px solid var(--line) !important;border-radius:16px !important;box-shadow:var(--shadow) !important}
body.chat .dropdown-menu{padding:6px;min-width:200px}
body.chat .dropdown-item{color:var(--text) !important;border-radius:10px;padding:9px 12px;font-size:14.5px;display:flex;align-items:center;gap:10px}
body.chat .dropdown-item:hover,body.chat .dropdown-item:focus{background:var(--surface-2) !important;color:var(--text) !important}
body.chat .dropdown-item converse-icon{color:var(--muted)}
body.chat .modal-content{border-radius:22px !important;overflow:hidden}
body.chat .modal-header{background:transparent !important;color:var(--text) !important;border-bottom:1px solid var(--line) !important;padding:18px 22px}
body.chat .modal-title{color:var(--text) !important;font-size:18px;font-weight:700;font-family:inherit}
body.chat .modal-header .btn-close,body.chat .modal-header .close{filter:none;color:var(--muted) !important;opacity:.8;background:none}
body.chat .modal-header .btn-close svg,body.chat .modal-header converse-icon{color:var(--muted)}
body.chat .modal-body{padding:20px 22px;color:var(--text)}
body.chat .modal-footer{border-top:1px solid var(--line) !important;padding:14px 22px;background:transparent !important}
body.chat .modal-backdrop{background:rgba(5,5,12,.6) !important;opacity:1 !important;backdrop-filter:blur(4px)}
body.chat .nav-tabs,body.chat .nav-pills{border:0 !important;gap:4px;background:var(--surface-2);border-radius:14px;padding:4px;display:inline-flex;flex-wrap:wrap;margin-bottom:18px}
body.chat .nav-tabs .nav-link,body.chat .nav-pills .nav-link{border:0 !important;border-radius:10px !important;color:var(--muted) !important;font-weight:600;font-size:14px;padding:7px 16px;background:none}
body.chat .nav-tabs .nav-link.active,body.chat .nav-pills .nav-link.active{background:var(--surface) !important;color:var(--text) !important;box-shadow:0 1px 4px rgba(0,0,0,.18)}
body.chat label,body.chat .form-label{color:var(--muted);font-size:13px;font-weight:550;margin-bottom:6px}
body.chat .form-control,body.chat .form-select,body.chat select,body.chat textarea.form-control{background:var(--bg) !important;border:1px solid var(--line) !important;color:var(--text) !important;border-radius:12px !important;min-height:44px;padding:0 14px;box-shadow:none !important}
body.chat .form-control:focus,body.chat .form-select:focus{border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--accent-soft) !important}
body.chat .form-text,body.chat small{color:var(--muted)}
body.chat .btn{border-radius:12px !important;font-weight:600;font-family:inherit;border:0}
body.chat .btn-primary,body.chat .btn-success{background:var(--accent) !important;color:var(--accent-ink) !important}
body.chat .btn-primary:hover{background:var(--accent-hover) !important}
body.chat .btn-secondary{background:var(--surface-2) !important;color:var(--text) !important}
body.chat .btn-secondary:hover{background:var(--surface-3) !important}
body.chat .btn-danger{background:var(--danger) !important;color:#fff !important}
body.chat .profile-form .avatar,body.chat .modal-body converse-avatar{border-radius:50%}
body.chat .modal-body .avatar-initials{width:112px !important;height:112px !important;line-height:112px !important;font-size:44px !important}
body.chat .modal-body img.avatar,body.chat .modal-body converse-avatar img{width:112px;height:112px;object-fit:cover;border-radius:50%}

/* empty state when no chat is open (drawn on the chats container so modals stay on top) */
@media (min-width:821px){
  body.chat converse-chats:not(:has(converse-chat)):not(:has(converse-muc)){position:relative}
  body.chat converse-chats:not(:has(converse-chat)):not(:has(converse-muc))::before{content:"";position:absolute;left:360px;right:0;top:0;bottom:0;pointer-events:none;background:url(/logo.png) center 40%/120px no-repeat,radial-gradient(700px 360px at 50% 40%,var(--glow),transparent 70%),var(--bg)}
  body.chat converse-chats:not(:has(converse-chat)):not(:has(converse-muc))::after{content:var(--empty-text);position:absolute;left:360px;right:0;top:calc(40% + 88px);text-align:center;color:var(--muted);font-size:15px;pointer-events:none}
}
/* sidebar headings and icons stay quiet */
body.chat converse-controlbox .open-rooms-toggle,body.chat converse-controlbox .toggle-roster,body.chat converse-controlbox .list-toggle,body.chat converse-controlbox .group-toggle,
body.chat #controlbox .open-rooms-toggle,body.chat #controlbox .open-rooms-toggle converse-icon,body.chat #controlbox .list-toggle converse-icon{color:var(--muted) !important;font-size:11px}
body.chat converse-controlbox converse-icon{color:var(--muted)}
body.chat converse-controlbox .btn--transparent converse-icon,body.chat converse-controlbox .dropdown-toggle converse-icon{color:var(--muted) !important}
body.chat converse-controlbox .btn--transparent:hover converse-icon{color:var(--accent-text) !important}
body.chat converse-user-profile hr,body.chat converse-user-profile .controlbox-section+hr{display:none}
body.chat .controlbox-section.profile .change-status{color:var(--muted) !important}
body.chat #controlbox .open-contacts-toggle,body.chat #controlbox .open-contacts-toggle .fa,body.chat #controlbox .open-contacts-toggle converse-icon,body.chat #converse-roster .roster-contacts .group-toggle,body.chat #controlbox .group-toggle,body.chat #controlbox .group-toggle converse-icon{color:var(--muted) !important}
body.chat #controlbox converse-user-profile .change-status,body.chat #controlbox converse-user-profile .change-status converse-icon,body.chat #controlbox .xmpp-status{color:var(--muted) !important}
body.chat #controlbox converse-user-profile,body.chat #controlbox .controlbox-section.profile,body.chat #controlbox converse-user-profile .userinfo{border-left:0 !important;border-right:0 !important;border-top:0 !important;border-bottom:0 !important;box-shadow:none !important}
body.chat #controlbox converse-user-profile{display:block;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line) !important}

body.chat .chat-head .chatbox-title--row{display:flex !important;flex-direction:row !important;align-items:center !important;gap:12px}
body.chat .chat-head .chatbox-title{display:flex !important;align-items:center}
body.chat .chat-head .chatbox-title--row>*{flex:none}
body.chat .chat-head .chatbox-title__text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.chat .chat-toolbar converse-icon,body.chat .chat-toolbar .btn converse-icon{color:var(--muted) !important}
body.chat .chat-toolbar .btn:hover converse-icon{color:var(--accent-text) !important}
body.chat .chat-toolbar .send-button converse-icon{color:var(--accent-ink) !important}
body.chat .chat-toolbar .send-button{min-width:38px}
body.chat converse-icon svg,body.chat .chat-toolbar converse-icon svg{color:inherit !important;fill:currentColor !important}
body.chat .chat-head .chatbox-title{padding:0 !important}
body.chat .chat-head a.show-msg-author-modal:has(converse-avatar){display:block;width:42px;height:42px;flex:none;line-height:0}
body.chat .chat-head a.show-msg-author-modal:has(converse-avatar)>span{display:block;width:42px;height:42px}
body.chat .chat-head converse-avatar{display:block;width:42px;height:42px}
body.chat .bottom-panel .chat-toolbar .send-button,body.chat .bottom-panel .chat-toolbar button.send-button{position:absolute !important;right:7px;bottom:11px;width:38px !important;height:38px !important;border-radius:50% !important;background:var(--accent) !important;color:var(--accent-ink) !important;display:grid !important;place-items:center;padding:0 !important}
body.chat .bottom-panel .chat-toolbar .send-button:hover{background:var(--accent-hover) !important}
body.chat .chat-head .chatbox-title__text{align-self:center;height:42px;line-height:42px !important;margin:0 !important;padding:0 !important}
body.chat .modal .nav-tabs,body.chat .modal .nav-pills{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%}
body.chat .modal .nav-tabs .nav-link,body.chat .modal .nav-pills .nav-link{padding:7px 12px;font-size:13.5px;white-space:nowrap}
body.chat converse-controlbox .cbox-list-item>span:first-child{position:relative;flex:none;display:block;width:46px;height:46px;line-height:0}
body.chat converse-controlbox .cbox-list-item .contact-name{align-self:center;font-weight:550 !important;font-size:15.5px !important;line-height:1.3;margin:0}
body.chat converse-controlbox .pending-xmpp-contact .contact-name{color:var(--muted) !important}
body.chat converse-controlbox .list-item .chat-status--avatar{position:absolute !important}
body.chat converse-controlbox .list-item,body.chat converse-controlbox .list-item:hover{height:auto;min-height:62px}
body.chat .roster-group .group-toggle,body.chat .roster-group>a{padding:10px 20px 4px;display:flex;align-items:center;gap:6px}
body.chat converse-controlbox .cbox-list-item .contact-name{display:flex !important;align-items:center;height:46px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- round, cropped avatars everywhere (real photos and initials) ---- */
body.chat converse-avatar{display:block;flex:none;border-radius:50%;overflow:hidden}
body.chat converse-avatar img,body.chat converse-avatar svg,body.chat converse-avatar .avatar,body.chat converse-avatar .avatar-initials{width:100% !important;height:100% !important;border-radius:50% !important;object-fit:cover;display:block}
body.chat converse-controlbox .list-item converse-avatar{width:46px !important;height:46px !important}
body.chat .controlbox-section.profile converse-avatar{width:44px !important;height:44px !important}
body.chat .chat-head converse-avatar{width:42px !important;height:42px !important}
body.chat converse-muc .chat-content converse-avatar{width:34px !important;height:34px !important}
body.chat converse-avatar .avatar-initials{line-height:normal !important}
/* group rows and any other sidebar link line up like contact rows */
body.chat converse-controlbox .list-item a:not(.list-toggle){display:flex;align-items:center;gap:12px;min-width:0}
body.chat converse-controlbox .available-chatroom .open-room,body.chat converse-controlbox .available-chatroom .room-name{min-height:46px;display:flex;align-items:center}
/* pipe/separator artefact next to the own name */
body.chat converse-user-profile hr{display:none !important}
/* plain text messages: text and time share the line (time at the bottom right) */
body.chat .chat-content .chat-msg__body:not(:has(>:not(.chat-msg__message):not(converse-message-actions))){display:flex !important;flex-wrap:nowrap;align-items:flex-end;column-gap:12px}
body.chat .chat-content .chat-msg__body:not(:has(>:not(.chat-msg__message):not(converse-message-actions)))>.chat-msg__message{flex:0 1 auto;min-width:0}
body.chat .chat-content .chat-msg__body[data-t]::after{float:none;margin:0 0 1px;flex:none;white-space:nowrap;align-self:flex-end}
body.chat .chat-content .chat-msg__body:has(>:not(.chat-msg__message):not(converse-message-actions))[data-t]::after{float:right;margin:6px 0 -2px 12px}

/* ===== WhatsApp-style chat list ===== */
body.chat .controlbox-section.profile{padding:14px 16px 8px}
body.chat .chat-search{padding:6px 14px 4px}
body.chat .chat-search input{width:100%;box-sizing:border-box;height:40px;border-radius:999px;border:0;background:var(--surface-2);color:var(--text);padding:0 16px;font:inherit;font-size:14.5px;outline:none}
body.chat .chat-search input:focus{box-shadow:0 0 0 1.5px rgba(var(--accent-rgb),.55)}
body.chat .chat-search input::placeholder{color:var(--muted)}
body.chat .chat-filters{display:flex;gap:8px;margin:10px 0 4px}
body.chat .chat-filters button{border:1px solid var(--line);background:none;color:var(--muted);border-radius:999px;padding:5px 14px;font:inherit;font-size:13.5px;cursor:pointer}
body.chat .chat-filters button:hover{background:var(--surface-2)}
body.chat .chat-filters button.on{background:var(--accent-soft);color:var(--accent-text);border-color:transparent;font-weight:600}
/* contacts: no "Contacts / Ungrouped" headings, one list */
body.chat converse-controlbox .controlbox-pane{position:relative;display:flex;flex-direction:column}
body.chat converse-controlbox .controlbox-pane>.chat-search{order:0;padding-right:58px}
body.chat converse-controlbox .controlbox-pane>#converse-roster{order:1}
body.chat converse-controlbox .controlbox-pane>#chatrooms{order:3}
body.chat #converse-roster .controlbox-padded:has(.controlbox-heading--contacts){position:absolute;top:6px;right:12px;padding:0;width:auto;z-index:2}
body.chat #converse-roster .controlbox-heading--contacts{display:none !important}
body.chat converse-roster .roster-contacts{display:flex;flex-direction:column}
body.chat converse-roster .roster-group:not(:has(.requesting-xmpp-contact)){display:contents}
body.chat converse-roster .roster-group:not(:has(.requesting-xmpp-contact))>.group-toggle{display:none !important}
body.chat converse-roster .roster-group:has(.requesting-xmpp-contact){order:-999999999}
body.chat converse-roster .roster-group-contacts,body.chat converse-roster .roster-group-contacts.collapsed,body.chat converse-roster .roster-group-contacts.hidden{display:contents !important}
body.chat converse-controlbox .roster-contacts .list-item{margin:0;border-radius:0;padding:9px 16px;min-height:72px;height:auto;border-bottom:0}
body.chat converse-controlbox .roster-contacts .list-item .cbox-list-item{display:grid;grid-template-columns:49px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center}
body.chat converse-controlbox .roster-contacts .list-item .cbox-list-item>span:first-child{grid-row:1/3;grid-column:1;width:49px;height:49px}
body.chat converse-controlbox .roster-contacts .list-item .avatar-initials,body.chat converse-controlbox .roster-contacts .list-item converse-avatar,body.chat converse-controlbox .roster-contacts .list-item .avatar{width:49px !important;height:49px !important;line-height:49px !important}
body.chat converse-controlbox .roster-contacts .contact-name{margin:0;padding:0;grid-column:2;grid-row:1;align-self:end;font-size:16.5px;font-weight:500}
body.chat converse-controlbox .roster-contacts .cbox-list-item[data-preview=""] .contact-name{grid-row:1/3;align-self:center}
body.chat converse-controlbox .roster-contacts .cbox-list-item::before{content:attr(data-time);grid-column:3;grid-row:1;align-self:end;font-size:12px;font-weight:400;color:var(--muted)}
body.chat converse-controlbox .roster-contacts .cbox-list-item::after{content:attr(data-preview);grid-column:2;grid-row:2;align-self:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:400;color:var(--muted)}
body.chat converse-controlbox .roster-contacts .list-item:has(.msgs-indicator) .cbox-list-item::before{color:var(--accent-text)}
body.chat converse-controlbox .roster-contacts .contact-actions{display:none}
body.chat converse-controlbox .roster-contacts .list-item.open,body.chat converse-controlbox .roster-contacts .list-item.open:hover{background:var(--surface-3) !important}

/* ===== emoji / reaction pickers ===== */
body.chat converse-reaction-picker .reaction-picker{position:absolute !important;inset:auto auto calc(100% + 8px) 0 !important;display:flex;gap:2px;padding:5px 6px;background:var(--surface-3);border:1px solid var(--line);border-radius:999px;box-shadow:0 4px 18px rgba(0,0,0,.28);white-space:nowrap;transform:none !important;animation:none !important}
body.chat .chat-msg__content--me converse-reaction-picker .reaction-picker{inset:auto 0 calc(100% + 8px) auto !important}
body.chat converse-reaction-picker .reaction-item{width:34px;height:34px;border:0;background:none;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;color:var(--muted)}
body.chat converse-reaction-picker .reaction-item.more converse-icon{font-size:15px}
body.chat converse-reaction-picker .reaction-item:hover{background:var(--accent-soft)}
body.chat converse-emoji-picker-dropdown{position:static}
body.chat converse-reaction-picker converse-emoji-picker-dropdown .dropdown-menu{position:fixed !important;inset:auto auto 96px calc(50% + 180px) !important;transform:translateX(-50%) !important;margin:0;padding:0;z-index:50;list-style:none;width:344px;max-width:94vw}
body.chat converse-emoji-picker{display:block;width:344px;max-width:94vw;overflow:hidden}
body.chat converse-emoji-picker .emoji-picker__header{padding:10px 10px 0;background:none}
body.chat converse-emoji-picker .emoji-picker__header ul{display:flex;gap:2px;list-style:none;margin:8px 0 0;padding:0 0 6px;overflow-x:auto;border-bottom:1px solid var(--line)}
body.chat converse-emoji-picker .emoji-category .btn{padding:4px 6px;border-radius:8px;font-size:18px;text-decoration:none}
body.chat converse-emoji-picker .emoji-category.picked .btn{background:var(--accent-soft)}
body.chat converse-emoji-picker .emoji-search{width:100%;box-sizing:border-box;height:36px;border-radius:999px !important;background:var(--surface-2) !important;border:0 !important;color:var(--text) !important;padding:0 14px}
body.chat converse-emoji-picker .emoji-picker__lists{max-height:260px;overflow-y:auto;padding:6px 10px 8px}
body.chat converse-emoji-picker .emoji-picker__lists ul{display:flex;flex-wrap:wrap;list-style:none;margin:0 0 6px;padding:0}
body.chat converse-emoji-picker .emoji-picker__lists a.insert-emoji,body.chat converse-emoji-picker .emoji-picker__lists .emoji-item a{display:grid;place-items:center;width:36px;height:34px;border-radius:8px;font-size:21px;text-decoration:none}
body.chat converse-emoji-picker .emoji-picker__lists a:hover{background:var(--surface-2)}
body.chat converse-emoji-picker .emoji-category__heading,body.chat converse-emoji-picker .emoji-lists__container>*:is(h4,div.emoji-category__heading){color:var(--muted);font-size:12.5px;font-weight:600;margin:8px 0 4px}
body.chat converse-emoji-picker .emoji-skintone-picker{padding:8px 12px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
body.chat converse-emoji-picker .emoji-skintone-picker a{text-decoration:none}

/* ===== WhatsApp-style conversation ===== */
body.chat .chat-body,body.chat .chat-content{background:var(--bg) var(--chat-pattern) !important}
body.chat .chat-content .chat-msg__content--them .chat-msg__body{border-radius:12px 12px 12px 12px}
body.chat .chat-content .chat-msg__content--me .chat-msg__body{border-radius:12px 12px 12px 12px}
body.chat .chat-content .message:not(.chat-msg--followup) .chat-msg__content--them .chat-msg__body{border-top-left-radius:2px}
body.chat .chat-content .message:not(.chat-msg--followup) .chat-msg__content--me .chat-msg__body{border-top-right-radius:2px}
body.chat .chat-content .chat-msg--followup .chat-msg__content--them .chat-msg__body{border-top-left-radius:12px}
body.chat .chat-content .chat-msg--followup .chat-msg__content--me .chat-msg__body{border-top-right-radius:12px}
body.chat .chat-content .message{margin-bottom:2px}
body.chat .chat-content .message:not(.chat-msg--followup){margin-top:8px}
body.chat .bottom-panel{background:var(--surface-2) !important;border-top:0 !important;padding:10px clamp(14px,3vw,24px) 12px}
body.chat .bottom-panel .chat-textarea{background:var(--surface-3) !important}
body.chat{--chat-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%23808090' stroke-opacity='.07' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='24' cy='26' r='7'/%3E%3Cpath d='M92 18l8 14h-16z'/%3E%3Crect x='124' y='96' width='14' height='11' rx='3'/%3E%3Cpath d='M30 104c6-8 12 8 18 0'/%3E%3Cpath d='M96 128h14M103 121v14'/%3E%3Ccircle cx='132' cy='34' r='3'/%3E%3Cpath d='M58 66l10 10M68 66l-10 10'/%3E%3C/svg%3E")}

/* unread badge, WhatsApp style */
body.chat converse-controlbox .roster-contacts .msgs-indicator{grid-column:3;grid-row:2;justify-self:end;align-self:center;min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center;font-size:12px;line-height:1;background:var(--accent) !important;color:var(--accent-ink) !important;border-radius:999px;font-weight:700}

/* replies: one quote level, WhatsApp / Telegram look */
body.chat .chat-msg__text blockquote blockquote{display:none !important}
body.chat .chat-msg__text>blockquote{display:block;margin:0 0 -16px;padding:5px 10px 6px;border:0;border-left:3px solid var(--accent);border-radius:8px;background:rgba(var(--text-rgb),.07);font-size:13.5px;line-height:1.35;color:var(--text);opacity:.9;cursor:pointer;white-space:normal;max-height:4.2em;overflow:hidden;min-width:120px}
body.chat .chat-msg__content--me .chat-msg__text>blockquote{background:rgba(0,0,0,.14);border-left-color:rgba(255,255,255,.75)}
body.chat .chat-msg__text>blockquote[data-author]::before{content:attr(data-author);display:block;font-weight:650;font-size:13px;color:var(--accent-text);margin-bottom:1px}
body.chat .chat-msg__content--me .chat-msg__text>blockquote[data-author]::before{color:inherit}
body.chat .message.flash .chat-msg__body{animation:flash 1.3s ease}
@keyframes flash{0%,60%{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.7)}100%{box-shadow:none}}

/* in-chat search */
body.chat .chat-head{position:relative}
body.chat .chat-find-btn{position:absolute;right:64px;top:50%;margin-top:-19px;color:var(--muted);background:none;border:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
body.chat .chat-find-btn:hover{background:var(--surface-2);color:var(--accent-text)}
body.chat .chat-find-bar{padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
body.chat .chat-find-bar input{width:100%;box-sizing:border-box;height:38px;border-radius:999px;border:0;background:var(--surface-2);color:var(--text);padding:0 16px;font:inherit;outline:none}

/* reply preview above the composer (Converse renders it twice) and reply context inside bubbles */
body.chat converse-chat-bottom-panel>converse-reply-preview{display:none}
body.chat .reply-preview{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:8px 12px;background:var(--surface-3);border-radius:12px;border-left:4px solid var(--accent);font-size:13.5px}
body.chat .reply-preview__content{display:flex;flex-direction:column;min-width:0;flex:1}
body.chat .reply-preview__sender{color:var(--accent-text);font-weight:650}
body.chat .reply-preview__text{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.chat .reply-preview__cancel{border:0;background:none;color:var(--muted);width:30px;height:30px;border-radius:50%;cursor:pointer}
body.chat .reply-preview__cancel:hover{background:var(--surface-2);color:var(--text)}
body.chat .chat-msg__reply-context{display:flex;flex-direction:column;gap:1px;margin:0 0 6px;padding:5px 10px 6px;border-left:3px solid var(--accent);border-radius:8px;background:rgba(var(--text-rgb),.07);font-size:13.5px;line-height:1.35;cursor:pointer;max-width:100%}
body.chat .chat-msg__content--me .chat-msg__reply-context{background:rgba(0,0,0,.14);border-left-color:rgba(255,255,255,.75)}
body.chat .chat-msg__reply-context converse-icon{display:none}
body.chat .chat-msg__reply-sender{color:var(--accent-text);font-weight:650;font-size:13px}
body.chat .chat-msg__content--me .chat-msg__reply-sender{color:inherit}
body.chat .chat-msg__reply-text{color:inherit;opacity:.85;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

/* action bar: icons centred in the pill; Quote button only appears for selected text */
body.chat converse-message-actions .chat-msg__actions>.dropdown-menu{align-items:center}
body.chat converse-message-actions .chat-msg__actions>.dropdown-menu>li{display:flex;align-items:center}
body.chat converse-message-actions .chat-msg__actions>.dropdown-menu>li:has(.chat-msg__action-quote){display:none}
body.chat converse-message-actions .dropdown-item{display:flex !important;align-items:center;justify-content:center;line-height:0}
body.chat converse-message-actions .dropdown-item converse-icon{display:flex !important;align-items:center;justify-content:center;width:15px;height:15px;line-height:0}
body.chat converse-message-actions .dropdown-item converse-icon svg{display:block;width:15px !important;height:15px !important}
body.chat .quote-selection{position:fixed;z-index:100000;border:0;border-radius:999px;padding:7px 14px;background:var(--surface-3);color:var(--accent-text);font:inherit;font-size:13.5px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.3);cursor:pointer}
body.chat .quote-selection[hidden]{display:none}

/* profile photo in the contact details dialog */
body.chat .modal .centered{display:flex;justify-content:center}
body.chat .modal converse-avatar{display:block;width:140px;height:140px;flex:none}
body.chat .modal converse-avatar svg,body.chat .modal converse-avatar img{display:block;width:140px !important;height:140px !important;border-radius:50% !important;object-fit:cover}

/* sidebar header: UTOPIA TALK wordmark, avatar + settings on the right, no theme button on the main page */
body.chat #theme-toggle{display:none}
body.chat converse-controlbox .controlbox-section.profile{display:flex !important;align-items:center;justify-content:flex-start;gap:6px;padding:16px 14px 12px 18px}
body.chat .controlbox-section.profile .brand{flex:1;font-size:21px;font-weight:700;letter-spacing:.07em;color:var(--text);line-height:1}
body.chat .controlbox-section.profile .brand b{color:var(--accent);font-weight:800}
body.chat .controlbox-section.profile .show-profile{order:2;gap:0;margin:0}
body.chat .controlbox-section.profile .show-profile .username,body.chat .controlbox-section.profile .show-profile>span{display:none !important}
body.chat .controlbox-section.profile converse-avatar,body.chat .controlbox-section.profile .avatar,body.chat .controlbox-section.profile .avatar-initials{width:38px !important;height:38px !important;line-height:38px !important;font-size:16px !important}
body.chat .controlbox-section.profile converse-controlbox-buttons{order:3}
body.chat .controlbox-section.profile .change-status{display:none !important}
body.chat converse-controlbox .controlbox-pane>.chat-search{padding-top:4px}
body.chat #converse-roster .controlbox-padded:has(.controlbox-heading--contacts){top:4px}

/* theme switch inside Settings */
body.chat .theme-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 16px;margin-bottom:12px;border-bottom:1px solid var(--line);font-weight:600}
body.chat .theme-setting .seg{display:flex;background:var(--surface-2);border-radius:999px;padding:3px}
body.chat .theme-setting .seg button{border:0;background:none;color:var(--muted);font:inherit;font-size:14px;padding:6px 16px;border-radius:999px;cursor:pointer}
body.chat .theme-setting .seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:650}
body.chat converse-user-profile .xmpp-status{display:none !important}
body.chat converse-user-profile .userinfo{border-bottom:1px solid var(--line)}
body.chat converse-user-profile .userinfo{padding:0 !important;min-height:0 !important}
body.chat converse-controlbox .controlbox-section.profile{padding:16px 14px 14px 18px !important;margin:0 !important}
body.chat converse-user-profile{padding:0 !important;margin:0 !important;display:block}
body.chat converse-controlbox .controlbox-section.profile{height:68px;box-sizing:border-box;padding:0 14px 0 18px !important;min-height:0 !important}
body.chat converse-controlbox .controlbox-pane{padding-top:10px}
body.chat #converse-roster .controlbox-padded:has(.controlbox-heading--contacts){top:36px !important}