/* Circlique messenger layout: scoped to messaging, keeps existing controls and handlers. */
#messagesView .screenIntro{margin-bottom:12px}
#messagesView .screenIntro h2{font-size:28px;margin:4px 0}
#messagesView .messagePlanCard{padding:12px;margin-bottom:12px}
#messagesView #msgTopV3{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
#messagesView #msgTopV3 .btn{width:auto;min-height:44px;margin:0;padding:9px 14px}
#messagesView .msgTabsV3{display:flex;gap:6px}
#messagesView .msgInboxSearchV27{order:5;flex-basis:100%;border-radius:18px;font-size:16px;min-height:46px;margin:0}
#messagesView .msgCardV3{display:flex;align-items:center;gap:12px;padding:13px 10px;border-radius:16px;background:#160f1d;border:1px solid #38273f;margin:0 0 7px;cursor:pointer;min-height:82px}
#messagesView .msgCardV3:focus-visible{outline:2px solid #da7ae8;outline-offset:2px}
#messagesView .msgCardV3.unread{background:#24122d;border-color:#79438b}
#messagesView .msgInboxAvatarV17{width:54px;height:54px;flex:0 0 54px;border-radius:50%;overflow:hidden}
#messagesView .msgInboxAvatarV17 img{width:100%;height:100%;object-fit:cover}
#messagesView .msgCardMainV3{min-width:0;flex:1}
#messagesView .msgTitleV3{font-size:16px;font-weight:650;overflow-wrap:anywhere}
#messagesView .unread .msgTitleV3{font-weight:800;color:#fff}
#messagesView .msgTitleV3 .pill{display:block;width:fit-content;font-size:10px;margin:3px 0}
#messagesView .msgPreviewV3{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#b8aabd;margin-top:4px}
#messagesView .msgMetaV3{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:11px;color:#b8aabd}
#messagesView .msgUnreadV3{background:#c648df;color:white;border-radius:20px;min-width:22px;text-align:center;padding:2px 6px;font-weight:800}
#messagesView .msgMenuV3{width:36px;min-height:30px;border-radius:10px}
#chatPane .chatHeader{display:flex;align-items:center;gap:9px;padding:10px;position:relative;min-height:68px}
#chatPane .chatBack{min-height:44px;padding:6px 12px;width:auto}
#chatPane .msgHeaderIdentityV1{min-width:0}
#chatPane .msgHeaderV3{display:flex;align-items:center;gap:9px}
#chatPane .msgHeaderV3 .msgAvatarV3{width:42px;height:42px;flex:0 0 42px}
#chatPane .msgHeaderV3>div:last-child{min-width:0}
#chatPane .msgHeaderV3 b{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chatPane .msgHeaderV3 .muted{font-size:12px}
#chatPane .msgHeaderOptionsV1{position:relative;flex:0 0 44px}
#chatPane .msgHeaderOptionsV1 summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid #60406e;border-radius:13px;font-size:25px;cursor:pointer}
#chatPane summary::-webkit-details-marker{display:none}
#chatPane .msgHeaderOptionsV1[open]{z-index:30}
#chatPane .msgHeaderOptionsV1[open]>button,#chatPane .msgHeaderOptionsV1[open]>.msgChatToolsV3{display:flex;width:180px;margin:6px 0 0;padding:10px;background:#21132b;border:1px solid #60406e;border-radius:12px}
#chatPane .msgHeaderOptionsV1[open]{position:absolute;right:10px;top:10px;padding:0 0 10px 10px;background:#160d1d;border-radius:14px;box-shadow:0 8px 30px #0008}
#chatPane .msgHeaderOptionsV1[open] summary{margin-left:auto}
#chatPane .chatBox{padding:12px 10px}
#chatPane .bubbleRow{margin:5px 0}
#chatPane .bubble{padding:11px 13px;border-radius:19px;max-width:86%;font-size:16px;line-height:1.4;overflow-wrap:anywhere}
#chatPane .bubble.mine{background:linear-gradient(135deg,#512260,#733181)}
#chatPane .bubbleTime{font-size:10px;line-height:1.4;margin-top:5px;color:#bba7c4}
#chatPane .msgSenderV3{font-size:12px;font-weight:700;margin-bottom:4px;color:#dda4eb}
#chatPane .msgReactionRowV3:empty{display:none}
#chatPane .msgActionsDisclosureV1 summary{list-style:none;cursor:pointer;width:44px;min-height:30px;margin-left:auto;text-align:center;font-size:20px;color:#c7acd0}
#chatPane .msgActionsDisclosureV1 .msgActionsV3{display:flex;flex-wrap:wrap;gap:8px}
#chatPane .msgActionsV3 button{min-height:36px;padding:6px 10px}
#chatPane .msgDateSeparatorV29{display:flex;align-items:center;gap:12px;font-size:11px;padding:16px 0 10px}
#chatPane .msgDateSeparatorV29:before,#chatPane .msgDateSeparatorV29:after{content:'';flex:1;height:1px;background:#41284b}
body.chatOpen #betaFeedbackFabV2{display:none!important}
@media(max-width:600px){
 body.chatOpen #chatPane>.tiny{font-size:10px;line-height:1.3;padding:5px 8px calc(6px + env(safe-area-inset-bottom))!important}
 body.chatOpen #chatPane>#chatQuotaBar{font-size:10px;padding:5px 10px;margin-top:4px}
 #chatPane .chatHeader{border-radius:0 0 16px 16px}
 #chatPane .bubble{max-width:88%}
}

#chatPane .msgSystemActivityV1{text-align:center;padding:10px 18px;color:#bba6c3;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
#chatPane .msgSystemActivityV1 span{display:inline-block;padding:5px 12px;background:#23172b;border-radius:16px}

/* Personal conversation appearance: no shared theme changes. */
#chatPane{--chat-bg:#0c0811;--chat-in:#1a1121;--chat-out:linear-gradient(135deg,#512260,#733181);--chat-ink:#fff;--chat-time:#d2bddc;--chat-line:#41284b;--chat-note:#23172b}
#chatPane[data-chat-theme="midnight"]{--chat-bg:#080f19;--chat-in:#182435;--chat-out:linear-gradient(135deg,#183c67,#245a85);--chat-ink:#f6faff;--chat-time:#bfd3e8;--chat-line:#314b66;--chat-note:#182a3c}
#chatPane[data-chat-theme="amber"]{--chat-bg:#171009;--chat-in:#332519;--chat-out:linear-gradient(135deg,#6d3b10,#895017);--chat-ink:#fff8ee;--chat-time:#ecd5b8;--chat-line:#664b30;--chat-note:#362617}
#chatPane .chatBox{background:var(--chat-bg)}
#chatPane .bubble{background:var(--chat-in);color:var(--chat-ink)}
#chatPane .bubble.mine{background:var(--chat-out);color:var(--chat-ink)}
#chatPane .bubbleTime,#chatPane .msgSenderV3,#chatPane .msgActionsDisclosureV1 summary{color:var(--chat-time)}
#chatPane .msgDateSeparatorV29:before,#chatPane .msgDateSeparatorV29:after{background:var(--chat-line)}
#chatPane .msgSystemActivityV1 span{background:var(--chat-note);color:var(--chat-time)}
#chatPane .msgHeaderOptionsV1 .msgChatToolsV3{flex-wrap:wrap;gap:8px}
#chatPane .msgHeaderOptionsV1 .msgChatToolsV3 button{min-height:44px}
.msgThemeChoicesV1{display:grid;gap:10px}
.msgThemeChoiceV1{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 14px;border:1px solid #62406e;border-radius:15px;background:#1a1022;color:white;text-align:left;font-size:16px}
.msgThemeChoiceV1[aria-pressed="true"]{border:2px solid #df8ded}
.msgThemeSwatchV1{width:38px;height:38px;border-radius:50%;flex:0 0 38px;border:1px solid #ffffff55}
.msgThemeSwatchV1.purple{background:linear-gradient(135deg,#512260,#733181)}
.msgThemeSwatchV1.midnight{background:linear-gradient(135deg,#183c67,#245a85)}
.msgThemeSwatchV1.amber{background:linear-gradient(135deg,#6d3b10,#895017)}

body.chatOpen #chatPane>.messageComposerCompactV4{border-radius:22px;padding:8px!important;gap:6px!important;background:#1a1021;border-color:#50305c}
body.chatOpen #chatPane>.messageComposerCompactV4>#messageInput{border-radius:15px;background:#0e0913;border-color:#4c2d57;line-height:1.4!important}
body.chatOpen #chatPane>.messageComposerCompactV4>#messageSendBtn{border-radius:16px}
body.chatOpen #chatPane>.messageComposerCompactV4>#msgPhotoBtnV3,body.chatOpen #chatPane>.messageComposerCompactV4>#msgVoiceBtnV15{border-radius:14px}

/* Member picker lives outside #messagesView. */
#msgModalV3 #msgAdminResultsV3{display:grid;gap:8px}
#msgModalV3 .msgPickRowV3{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;box-sizing:border-box;padding:12px 14px;border:1px solid #60406e;border-radius:15px;background:#21132b;color:#fff;text-align:left;font:inherit;cursor:pointer}
#msgModalV3 .msgPickRowV3:hover{background:#321b40}
#msgModalV3 .msgPickRowV3:focus-visible{outline:2px solid #e39aef;outline-offset:2px}
#msgModalV3 .msgPickRowV3>div:last-child{min-width:0;overflow-wrap:anywhere}
#msgModalV3 .msgPickRowV3 b{color:#fff}
#msgModalV3 .msgPickRowV3 .muted{color:#c7b3cf}
#msgModalV3 .msgPickRowV3 .msgAvatarV3{flex:0 0 42px;border-radius:50%;display:grid;place-items:center;background:#492354;color:#fff}

/* Message updates explicitly own scroll position; prevent browser anchoring fighting them. */
#chatPane #chatMessages{overflow-anchor:none;scroll-behavior:auto}

/* Shared custom appearance keeps message text on solid contrasting bubbles. */
#chatPane .chatBox{background-image:var(--chat-image,none);background-size:cover;background-position:center}
#chatPane .bubble.mine{color:var(--chat-out-ink,var(--chat-ink))}
#chatPane[data-chat-theme="custom"] .bubbleTime,#chatPane[data-chat-theme="custom"] .msgSenderV3,#chatPane[data-chat-theme="custom"] .msgActionsDisclosureV1 summary{color:inherit;opacity:.8}
#chatPane[data-chat-theme="custom"] .msgDateSeparatorV29{color:var(--chat-time);background:var(--chat-bg);border-radius:12px}
.msgThemeEditorV2{display:grid;gap:14px;margin-top:20px}
.msgThemeEditorV2 label{display:flex;justify-content:space-between;align-items:center;gap:12px}
.msgThemeEditorV2 input[type=color]{width:64px;height:44px;padding:3px;flex:0 0 64px}
.msgThemeEditorV2 input[type=file]{max-width:65%;font-size:14px}
.msgThemePreviewV2{display:flex;justify-content:space-between;gap:12px;padding:18px;border-radius:16px}
.msgThemePreviewV2 span{padding:10px 14px;border-radius:16px}

#msgModalV3 .msgThemePhotoChooserV3{position:relative;display:flex;justify-content:center;min-height:48px;overflow:hidden;cursor:pointer}
#msgModalV3 .msgThemePhotoChooserV3 input[type=file]{position:absolute;inset:0;max-width:none;width:100%;height:100%;opacity:0;cursor:pointer}
#msgModalV3 #msgThemeStatusV2:not(:empty){position:sticky;top:0;z-index:2;padding:12px;background:#291333;border:1px solid #c077d5;border-radius:12px;color:#fff}
#msgModalV3 .msgThemePreviewV2{background-size:cover;background-position:center;min-height:110px;align-items:center}

/* Override the legacy luxury skin's important background shorthand. */
body.chatOpen #chatPane #chatMessages.chatBox{background-color:var(--chat-bg)!important;background-image:var(--chat-image,none)!important;background-size:cover!important;background-position:center!important}
body.chatOpen #chatPane .bubble{background:var(--chat-in)!important;color:var(--chat-ink)!important}
body.chatOpen #chatPane .bubble.mine{background:var(--chat-out)!important;color:var(--chat-out-ink,var(--chat-ink))!important}

/* Circlique default artwork; saved alternative and custom themes keep their own backgrounds. */
#chatPane[data-chat-theme="purple"]{--chat-image:url("/messaging/circlique-default-theme.svg?v=2");--chat-in:#1a1121;--chat-out:linear-gradient(135deg,#512260,#6b287d)}
.msgThemeSwatchV1.purple{background-image:url("/messaging/circlique-default-theme.svg?v=2");background-size:cover;background-position:center}

/* Keep the complete default logo visible across phone and desktop chat shapes. */
body.chatOpen #chatPane[data-chat-theme="purple"] #chatMessages.chatBox{background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}

/* Consent request cards use the messenger's readable dark palette. */
#msgModalV3 .msgConsentListV1{display:grid;gap:14px;margin-top:16px}
#msgModalV3 .msgConsentCardV1{background:#21132b;border:1px solid #60406e;border-radius:18px;padding:18px;color:#fff;overflow-wrap:anywhere}
#msgModalV3 .msgConsentCardV1>b{font-size:19px;color:#fff}
#msgModalV3 .msgConsentActionsV1{display:flex;flex-wrap:wrap;gap:10px}
#msgModalV3 .msgConsentActionsV1 button{min-height:44px;color:#fff;background:#351c43;border:1px solid #80528e;border-radius:14px;padding:10px 16px;font:inherit}
#msgModalV3 .msgConsentActionsV1 button[data-request-answer="accept"],#msgModalV3 .msgConsentActionsV1 button[data-consent-answer="accept"]{background:linear-gradient(135deg,#8423a6,#c52fdc)}
#msgModalV3 .msgConsentNoticeV1:not(:empty),#msgModalV3 #msgConsentStatusV1:not(:empty){padding:12px;border:1px solid #a86aba;border-radius:12px;color:#fff;background:#291333}
