/* Discord-style message rows for Hub chat + Messages (calm palette, no glows). */
.cx-msg{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);padding:4px 16px 4px 8px;margin:0;border-radius:6px;list-style:none;background:none!important}
.cx-msg:not(.cx-grouped){margin-top:14px}
.cx-msg:hover,.cx-msg:focus-within{background:rgba(255,255,255,.035)!important}
.cx-gutter{display:flex;justify-content:center;padding-top:2px}
.cx-avatar{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#232327;color:#c7c7cc;font-weight:600;font-size:15px;text-decoration:none;flex:none}
.cx-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s}.cx-avatar.has-img img{opacity:1}.cx-avatar.has-img .cx-ini{visibility:hidden}
.cx-ht{visibility:hidden;font-size:11px;color:var(--muted,#8e8e93);line-height:22px;white-space:nowrap}
.cx-msg.cx-grouped:hover .cx-ht,.cx-msg.cx-grouped:focus-within .cx-ht{visibility:visible}
.cx-main{min-width:0}
.cx-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;line-height:1.35;margin:0 0 1px}
.cx-name{color:var(--text,#f2f2f4)!important;text-decoration:none;font-weight:600}.cx-name strong{font-weight:600}.cx-name:hover{text-decoration:underline}
.cx-head .vexo-inline-badges{display:inline-flex;align-items:center;gap:3px;align-self:center}
.cx-head .ce-badge{margin-left:0;align-self:center}
.cx-time{font-size:12px;color:var(--muted,#8e8e93)}
.cx-ed,.cx-pin{font-size:11px;color:var(--muted,#8e8e93)}
.cx-msg .hb-body,.cx-text{margin:0;color:#dcdce0;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.cx-msg .hb-replyto{font-size:12.5px;color:var(--muted,#8e8e93);margin:0 0 2px;padding-left:2px}
.cx-msg .hb-reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.cx-msg .hb-react{min-height:24px!important;padding:1px 8px!important;font-size:13px;border-radius:8px!important;background:#1b1b1f!important;border:1px solid #26262b!important;color:#d1d1d6!important}
.cx-msg .hb-react.is-mine{background:rgba(61,123,245,.15)!important;border-color:#3d7bf5!important;color:#f2f2f4!important}
.cx-msg .hb-actions{top:-16px;right:12px;background:#141417!important;border:1px solid #26262b!important;border-radius:8px;box-shadow:none}
.cx-msg .hb-files img{max-width:min(420px,100%);border-radius:8px;margin-top:4px}
.cx-day{display:flex;align-items:center;gap:10px;margin:18px 16px 4px;color:var(--muted,#8e8e93);font-size:12px;font-weight:600;list-style:none}
.cx-day::before,.cx-day::after{content:"";flex:1;height:1px;background:#26262b}
.cx-list{list-style:none;margin:0;padding:0 0 8px}
/* Messages page: drop bubble look */
#chat-history .cx-msg{padding-right:12px}#chat-history .cx-msg.mine{background:none!important}
/* iPhone app: compact */
html.vexo-ios-app .cx-msg{grid-template-columns:46px minmax(0,1fr);padding:3px 10px 3px 4px}
html.vexo-ios-app .cx-avatar{width:36px;height:36px;font-size:14px}
html.vexo-ios-app .cx-msg:not(.cx-grouped){margin-top:12px}
html.vexo-ios-app .cx-day{margin:14px 10px 2px}
@media (max-width:640px){.cx-msg{grid-template-columns:46px minmax(0,1fr);padding:3px 10px 3px 4px}.cx-avatar{width:36px;height:36px}}
/* Calm palette for hub + inbox leftovers (default dark theme only; Light/Midnight themes keep their own colours). */
html:not([data-theme]) .hb-stats div{background:#1b1b1f!important;border-color:#26262b!important}
html:not([data-theme]) .hb-chan.is-active{background:#232327!important;color:#f2f2f4!important}
html:not([data-theme]) .hb-chan:hover{background:#1b1b1f}
html:not([data-theme]):not([data-accent]) .hb-banner{background:linear-gradient(120deg,#141417,#1e1e22)!important}
html:not([data-theme]) .hb-initial{background:#232327!important}
html:not([data-theme]) .chat-thread.selected,html:not([data-theme]) .chat-thread.active,html:not([data-theme]) .chat-thread[aria-current]{background:#1b1b1f!important;border-color:#323238!important}
html:not([data-theme]) .chat-inbox details,html:not([data-theme]) .chat-inbox summary{background:#1b1b1f!important;border-color:#26262b!important}
html:not([data-theme]) .chat-initial{background:#232327!important;color:#c7c7cc!important}
@media (max-width:760px){.cx-msg .hb-actions{grid-column:2;flex-direction:row!important;flex-wrap:wrap;gap:2px}}
html.vexo-ios-app .cx-msg .hb-actions{grid-column:2;flex-direction:row!important;flex-wrap:wrap;gap:2px}
/* Hub badges in lists: sized to the text */
.vx-hub-text .vx-hub-badges,.vh-hub .vx-hub-badges,.vx-ml .vx-hub-badges,#content a[href^="/hubs/"] .vx-hub-badges{display:inline-flex;align-items:center;gap:2px;margin-left:4px;vertical-align:-0.12em}
.vx-hub-text .vx-hub-badges :is(img,svg),.vh-hub .vx-hub-badges :is(img,svg),.vx-ml .vx-hub-badges :is(img,svg),#content a[href^="/hubs/"] .vx-hub-badges :is(img,svg){width:1em!important;height:1em!important}
/* Avatar decorations: 120% of the avatar, centered, never blocks clicks. */
.vx-deco-host{position:relative;overflow:visible!important}
.vx-deco-host>.vx-deco{position:absolute;left:-10%;top:-10%;width:120%;height:120%;max-width:none;pointer-events:none;z-index:2;border-radius:0!important;object-fit:contain;opacity:1!important}
.profile-avatar.vx-deco-host>img:not(.vx-deco),.session-avatar.vx-deco-host>img:not(.vx-deco){border-radius:50%}
.cx-avatar{overflow:visible}.cx-avatar>img:not(.vx-deco){border-radius:50%}
.vx-deco-panel{margin-top:18px;padding-top:16px;border-top:1px solid var(--border,#26262b)}
.vx-deco-row{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.vx-deco-prev{padding:16px}
.vx-deco-av{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:#232327}
.vx-deco-base{width:100%;height:100%;border-radius:50%;object-fit:cover}
.vx-deco-ini{color:#8e8e93;font-size:28px}
.vx-deco-ctl{flex:1;min-width:220px}.vx-deco-ctl h3{margin:0 0 6px;display:flex;gap:8px;align-items:center}
/* Decorated avatars: no own ring/border/background (decoration replaces it). */
.vx-deco-host.profile-avatar,.vx-deco-host.session-avatar,.vx-deco-host.cx-avatar,html[data-accent] .vx-deco-host.profile-avatar,html.vexo-ios-app .vx-deco-host.profile-avatar{border:0!important;box-shadow:none!important;outline:0!important;background:transparent!important;padding:0!important}
/* PRO/STUDIO pills inside headings keep their own colours (calm h1 span reset must not strip them). */
h1 .ce-badge.ce-studio,h2 .ce-badge.ce-studio,.ce-badge.ce-studio{background:#f2f2f4!important;color:#0b0b0d!important;-webkit-text-fill-color:#0b0b0d!important}
h1 .ce-badge.ce-pro,h2 .ce-badge.ce-pro,.ce-badge.ce-pro{background:var(--vx-accent,#3d7bf5)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
/* Decoration geometry v2: always 120% square, centered, never stretched or clipped (beats img width:100% rules incl. iOS). */
:is(.vx-deco-host,.vx-mu-av,.session-avatar,.profile-avatar,.cx-avatar):has(>.vx-deco){position:relative!important;overflow:visible!important;border:0!important;box-shadow:none!important;outline:0!important;background:transparent!important}
html body :is(.vx-deco-host,.vx-mu-av,.session-avatar,.profile-avatar,.cx-avatar)>img.vx-deco{position:absolute!important;inset:auto!important;left:-10%!important;top:-10%!important;width:120%!important;height:120%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;transform:none!important;object-fit:contain!important;aspect-ratio:1/1;border-radius:0!important;border:0!important;box-shadow:none!important;pointer-events:none!important;z-index:2!important;opacity:1!important}
:is(.vx-mu-av,.session-avatar,.profile-avatar,.cx-avatar):has(>.vx-deco)>img:not(.vx-deco){border-radius:50%!important}
/* Room for the 10% overhang so headers/menus/sidebars never cut the frame. */
.session-avatar:has(>.vx-deco){margin:4px!important;flex:none}.vx-mu-av:has(>.vx-deco){margin:5px!important;flex:none}
#session-link>span:not(.session-avatar){max-width:none!important;flex-shrink:0;white-space:nowrap;overflow:visible!important;text-overflow:clip!important}
.cx-msg:has(.cx-avatar>.vx-deco) .cx-gutter{padding-top:5px}
.vx-deco-prev{padding:20px}
.ce-badge,.vexo-inline-badges,[data-presence-user]{position:relative;z-index:3}
html body :is(h1,h2,h3) span.ce-badge.ce-studio{background:#f2f2f4!important;color:#0b0b0d!important;-webkit-text-fill-color:#0b0b0d!important;padding:2px 6px!important;border-radius:5px!important}
html body :is(h1,h2,h3) span.ce-badge.ce-pro{background:#3d7bf5!important;color:#fff!important;-webkit-text-fill-color:#fff!important;padding:2px 6px!important;border-radius:5px!important}
/* edit / delete / emoji */
.cx-msg{position:relative}
.cx-ed{color:var(--muted,#8e8e93);font-size:11px;font-weight:400}
.cx-deleted{color:var(--muted,#8e8e93)!important;font-style:italic;font-size:13px}
.cx-edit textarea{width:100%;min-height:38px;max-height:240px;resize:none;background:#1b1b1f;border:1px solid color-mix(in srgb,var(--vx-accent,#3d7bf5) 45%,#26262b);border-radius:10px;color:inherit;padding:8px 10px;font:inherit;font-size:14.5px;outline:none;box-sizing:border-box}
.cx-edit small{display:block;color:var(--muted,#8e8e93);font-size:11px;margin-top:4px}
.cx-confirm{position:absolute;right:12px;top:-14px;z-index:20;display:flex;align-items:center;gap:6px;background:#18181b;border:1px solid #2c2c31;border-radius:10px;padding:5px 6px 5px 10px;font-size:13px;color:#e5e5ea}
.cx-confirm button{border:0;border-radius:8px;padding:5px 10px;font-size:12.5px;cursor:pointer;min-height:0}.cx-yes{background:#b4383d;color:#fff}.cx-no{background:#26262b;color:#d1d1d6}
.chat-msg.mine:hover .hb-actions,.chat-msg.mine:focus-within .hb-actions,.chat-msg.mine:focus .hb-actions{display:flex}
.chat-msg .hb-actions{display:none;position:absolute}
.hb-msg:focus .hb-actions{display:flex}
.cx-emoji-btn{flex:none;width:40px;height:40px;display:grid;place-items:center;border:0;background:none;border-radius:12px;color:var(--muted,#8e8e93);cursor:pointer;padding:0;min-height:0!important}
.cx-emoji-btn:hover{color:#fff;background:#232327}.cx-emoji-btn svg{width:21px;height:21px}
.cx-emoji{position:fixed;z-index:200;width:320px;max-height:360px;display:flex;flex-direction:column;background:#141417;border:1px solid #2c2c31;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.45);padding:8px;box-sizing:border-box}
.cx-emoji.is-sheet{left:0!important;right:0;bottom:0;top:auto!important;width:auto;max-height:52vh;border-radius:18px 18px 0 0;padding:6px 10px calc(10px + env(safe-area-inset-bottom))}
.cx-emoji-grab{width:40px;height:4px;border-radius:2px;background:#3a3a40;margin:2px auto 8px}
.cx-emoji-q{height:34px;border-radius:10px;background:#1b1b1f;border:1px solid #26262b;color:inherit;padding:0 10px;font-size:14px;flex:none}
.cx-emoji.is-sheet .cx-emoji-q{font-size:16px;height:38px}
.cx-emoji-tabs{display:flex;gap:2px;margin:6px 0;flex:none}.cx-emoji-tabs button{flex:1;height:30px;border:0;border-radius:8px;background:none;font-size:16px;cursor:pointer;opacity:.6;min-height:0;padding:0}
.cx-emoji-tabs button.is-on,.cx-emoji-tabs button:hover{background:#232327;opacity:1}
.cx-emoji-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;overscroll-behavior:contain}
.cx-emoji-grid button{aspect-ratio:1;border:0;background:none;border-radius:8px;font-size:22px;cursor:pointer;padding:0;min-height:0;line-height:1}.cx-emoji-grid button:hover{background:#232327}
.cx-emoji.is-sheet .cx-emoji-grid{grid-template-columns:repeat(8,1fr)}.cx-emoji.is-sheet .cx-emoji-grid button{font-size:26px}
.cx-emoji-none{grid-column:1/-1;color:var(--muted,#8e8e93);font-size:13px;text-align:center;padding:16px 0}