/* MEO 角色与聊天只在自身区域生效，沿用子比主题色与深浅色变量。 */
.meo-root {
  --meo-bg: var(--main-bg-color, #fff);
  --meo-page: var(--body-bg-color, #f5f6f8);
  --meo-text: var(--main-color, #303441);
  --meo-muted: var(--muted-color, #727887);
  --meo-accent: var(--focus-color, #7867df);
  --meo-line: color-mix(in srgb, var(--meo-text) 11%, transparent);
  --meo-soft: color-mix(in srgb, var(--meo-accent) 7%, var(--meo-bg));
  --meo-dur: 180ms;
  --meo-panel-dur: 320ms;
  --meo-ease: cubic-bezier(0, 0, .2, 1);
  box-sizing: border-box;
  color: var(--meo-text);
  font-size: 14px;
  line-height: 1.65;
}
.meo-root *, .meo-root *::before, .meo-root *::after { box-sizing: border-box; }
.meo-root [hidden] { display: none !important; }
.meo-root h1, .meo-root h2, .meo-root h3, .meo-root p { color: inherit; margin: 0; }
.meo-root button, .meo-root input, .meo-root textarea { font: inherit; }
.meo-root button, .meo-root a { -webkit-tap-highlight-color: transparent; }
.meo-root button { cursor: pointer; }
.meo-root button:disabled { cursor: not-allowed; opacity: .55; }
.meo-root :focus-visible { outline: 2px solid var(--meo-accent); outline-offset: 4px; }
.meo-root a { text-decoration: none; }
.meo-muted { color: var(--meo-muted) !important; }
.meo-eyebrow { color: var(--meo-accent); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.meo-button, .meo-icon-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 10px 18px;
  border: 1px solid var(--meo-line); border-radius: 10px;
  color: var(--meo-text); background: var(--meo-bg); font-weight: 600;
  transition: transform var(--meo-dur) var(--meo-ease), opacity var(--meo-dur) var(--meo-ease);
}
.meo-button--primary { color: #fff !important; border-color: transparent; background: var(--meo-accent); }
.meo-button--quiet { background: transparent; border-color: transparent; }
.meo-icon-button { padding: 10px; }
/* 按压反馈来自按钮本身，避免依赖颜色变化。 */
.meo-button:active, .meo-icon-button:active { transform: scale(.97); }
@media (hover: hover) {
  .meo-button:hover, .meo-icon-button:hover { opacity: .82; color: var(--meo-text); }
}
.meo-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.meo-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: cover; background: var(--meo-soft); }
.meo-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; color: var(--meo-accent); font-size: 20px; font-weight: 700; }
.meo-role-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 26px; margin: 16px 0 28px; padding: 22px; border: 1px solid var(--meo-line); border-radius: 14px; background: var(--meo-bg); }
.meo-role-cover { width: 100%; height: 100%; min-height: 230px; object-fit: cover; border-radius: 10px; background: var(--meo-soft); }
.meo-role-cover--fallback { display: flex; align-items: center; justify-content: center; color: var(--meo-accent); font-size: 70px; }
.meo-role-info { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.meo-role-info h2 { font-size: 25px; font-weight: 700; line-height: 1.3; }
.meo-role-intro { color: var(--meo-muted) !important; font-size: 14px; overflow-wrap: anywhere; }
.meo-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.meo-tag { font-size: 12px; color: var(--meo-muted); padding: 2px 8px; border-radius: 5px; background: var(--meo-page); }
.meo-role-greeting { border-left: 2px solid var(--meo-accent); padding: 1px 0 1px 12px; font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
.meo-role-action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding-top: 5px; }
.meo-role-action small { color: var(--meo-muted); font-size: 12px; }
.meo-role-footnote { font-size: 11px; color: var(--meo-muted) !important; }
.meo-mobile-play { display: none; }
/* Follow Zibll's resolved mode and palette; chat has no separate appearance setting. */
.meo-chat-body {
  --meo-chat-tint: color-mix(in srgb, var(--focus-color, #7867df) 3%, var(--body-bg-color, #f5f6f8));
  --meo-chat-scrim: rgba(15, 19, 28, .38);
  --meo-chat-shadow: rgba(20, 25, 40, .1);
  margin: 0; padding: 0 !important; background: var(--body-bg-color, #f5f6f8); overflow: hidden; color-scheme: light;
}
.meo-chat-body.dark-theme {
  --meo-chat-scrim: rgba(0, 0, 0, .58);
  --meo-chat-shadow: rgba(0, 0, 0, .28);
  color-scheme: dark;
}
.meo-chat-shell { display: flex; height: var(--meo-vh, 100dvh); max-height: 100dvh; width: 100%; position: fixed; top: var(--meo-vtop, 0); left: 0; background: var(--meo-page); }
.meo-chat-sidebar { width: 272px; flex: none; background: var(--meo-bg); border-right: 1px solid var(--meo-line); display: flex; flex-direction: column; padding: max(22px, env(safe-area-inset-top)) 18px 20px; min-height: 0; }
.meo-sidebar-brand { display: flex; align-items: center; gap: 9px; margin: 0 10px 30px; font-size: 21px; font-weight: 800; letter-spacing: .02em; color: var(--meo-text); }
.meo-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--meo-accent); color: white; border-radius: 10px; font-size: 16px; }
.meo-sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding-left: 10px; }
.meo-sidebar-top h2 { font-size: 13px; font-weight: 500; color: var(--meo-muted); }
.meo-session-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.meo-session { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 10px; min-height: 64px; border: 0; border-radius: 9px; margin-bottom: 4px; color: var(--meo-text); background: transparent; }
.meo-session[aria-current="true"] { background: var(--meo-soft); }
.meo-session > span { display: flex; flex-direction: column; overflow: hidden; }
.meo-session strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meo-session small { color: var(--meo-muted); font-size: 11px; }
.meo-sidebar-bottom { border-top: 1px solid var(--meo-line); padding: 16px 6px max(0px, env(safe-area-inset-bottom)); margin-top: 16px; }
.meo-sidebar-note { display: block; color: var(--meo-muted); font-size: 11px; text-align: center; padding-top: 9px; }
.meo-chat-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.meo-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 82px; padding: max(14px, env(safe-area-inset-top)) 28px 14px; background: var(--meo-bg); border-bottom: 1px solid var(--meo-line); }
.meo-chat-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.meo-chat-heading h1 { font-size: 17px; font-weight: 650; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meo-chat-heading p { font-size: 12px; color: var(--meo-muted); }
.meo-chat-actions { display: flex; align-items: center; gap: 8px; }
.meo-balance-button { white-space: nowrap; font-size: 12px; }
.meo-chat-menu { display: none; }
.meo-chat-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 24px max(24px, calc((100% - 800px) / 2)); }
.meo-chat-welcome { text-align: center; padding: 12px 18px 28px; }
.meo-chat-welcome .meo-avatar { width: 64px; height: 64px; font-size: 28px; margin-bottom: 8px; }
.meo-chat-welcome h2 { font-size: 20px; font-weight: 650; }
.meo-chat-welcome p { color: var(--meo-muted); font-size: 12px; margin-top: 6px; }
.meo-message { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.meo-message .meo-avatar { width: 32px; height: 32px; font-size: 14px; }
.meo-message-content { max-width: min(84%, 640px); min-width: 0; }
.meo-message-label { display: block; font-size: 11px; color: var(--meo-muted); margin-bottom: 5px; }
.meo-message-text { padding: 12px 16px; border-radius: 2px 12px 12px; background: var(--meo-bg); border: 1px solid var(--meo-line); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; font-size: 14px; }
.meo-message--user { justify-content: flex-end; }
.meo-message--user .meo-message-text { background: var(--meo-soft); border-color: transparent; border-radius: 12px 2px 12px 12px; }
.meo-message--user .meo-message-label { text-align: right; }
.meo-message-status { font-size: 11px; color: var(--meo-muted); margin-top: 5px; }
.meo-thinking { display: flex; align-items: center; gap: 5px; min-height: 24px; }
.meo-thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--meo-muted); animation: meo-think 600ms ease-in-out alternate infinite; }
.meo-thinking i:nth-child(2) { animation-delay: 120ms; }
.meo-thinking i:nth-child(3) { animation-delay: 240ms; }
@keyframes meo-think { from { opacity: .3; transform: translateY(1px); } to { opacity: .9; transform: translateY(-2px); } }
.meo-message--new { animation: meo-message-in 200ms var(--meo-ease) both; }
@keyframes meo-message-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.meo-chat-composer { flex: none; padding: 10px max(24px, calc((100% - 800px) / 2)) max(16px, env(safe-area-inset-bottom)); }
.meo-compose-box { display: flex; align-items: flex-end; gap: 12px; border: 1px solid var(--meo-line); background: var(--meo-bg); border-radius: 14px; padding: 10px 10px 10px 16px; box-shadow: 0 2px 8px rgba(20, 25, 40, .025); }
.meo-compose-box:focus-within { border-color: var(--meo-accent); }
.meo-compose-box textarea { flex: 1; min-width: 0; max-height: 160px; min-height: 44px; line-height: 24px; padding: 10px 0; resize: none; border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--meo-text); }
.meo-compose-box textarea:focus { outline: 0; }
.meo-compose-note { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; font-size: 10px; margin-top: 8px; color: var(--meo-muted); }
.meo-feedback { margin-bottom: 10px; padding: 10px 14px; border-radius: 8px; font-size: 12px; background: var(--meo-soft); overflow-wrap: anywhere; }
.meo-feedback button { margin-left: 8px; color: var(--meo-accent); background: transparent; border: 0; min-height: 32px; }
.meo-error { border-left: 3px solid #bd5858; }
.meo-login-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 16px; padding: 30px; text-align: center; }
.meo-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.meo-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 19, 28, .38); }
.meo-dialog { display: flex; flex-direction: column; width: min(100%, 560px); max-height: 85dvh; background: var(--meo-bg); border-radius: 18px; box-shadow: 0 12px 35px rgba(15, 19, 28, .13); overflow: hidden; animation: meo-panel-in var(--meo-panel-dur) var(--meo-ease); }
.meo-chat-body .meo-overlay { background: var(--meo-chat-scrim); }
.meo-chat-body .meo-dialog { border: 1px solid var(--meo-line); box-shadow: 0 12px 35px var(--meo-chat-shadow); }
@keyframes meo-panel-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.meo-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px 24px; border-bottom: 1px solid var(--meo-line); }
.meo-dialog-header h2 { font-size: 18px; font-weight: 650; }
.meo-dialog-content { overflow-y: auto; overscroll-behavior: contain; padding: 24px; }
.meo-preferences-form { display: grid; gap: 14px; }
#meo-preferences-overlay { top: var(--meo-preferences-vtop, 0px); height: var(--meo-preferences-vh, 100dvh); bottom: auto; }
#meo-preferences-dialog { max-height: min(85dvh, calc(var(--meo-preferences-vh, 100dvh) - 32px)); }
.meo-preferences-form label { margin: 0; font-weight: 600; }
.meo-preferences-help { margin: 0; color: var(--meo-muted); font-size: 13px; line-height: 1.8; }
.meo-preferences-input { display: block; width: 100%; min-height: 150px; max-height: 40dvh; resize: vertical; padding: 12px; border: 1px solid var(--meo-line); border-radius: 10px; background: var(--meo-bg); color: var(--meo-text); font-size: 16px !important; line-height: 1.65; }
.meo-preferences-input:focus { border-color: var(--meo-accent); outline: 2px solid var(--meo-soft); outline-offset: 1px; }
.meo-preferences-input:disabled { opacity: .65; }
.meo-preferences-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: var(--meo-muted); font-size: 12px; }
.meo-preferences-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.meo-preferences-actions .meo-button { flex: 1; min-height: 44px; }
.meo-preferences-status { margin: 0; font-size: 13px; line-height: 1.7; color: var(--meo-muted); }
.meo-preferences-status .meo-button { margin-top: 8px; }
/* Fullscreen chat has no document scrollbar. Bootstrap can still measure the
   entering bottom sheet as overflowing and add a one-sided 15px gutter.
   Clear only that compensation; keep Zibll's widths, margins and safe area. */
@media (max-width: 768px) {
  body.meo-chat-body .modal.bottom { padding-left: 0 !important; padding-right: 0 !important; }
}
/* Wallet uses Zibll's native modal shell and native buttons, not the custom overlay. */
.meo-wallet-sheet { --meo-muted: var(--muted-color); --meo-line: var(--main-border-color, rgba(128,128,128,.15)); color: var(--main-color); font-size: 14px; }
.meo-wallet-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.meo-wallet-header .modal-title { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.meo-wallet-header .close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px; padding: 6px; position: relative; }
.meo-wallet-header .close::after { content: ''; position: absolute; inset: -6px; }
.meo-wallet-scroll { max-height: min(66dvh, 540px); overscroll-behavior: contain; }
.meo-wallet-balance { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; border-radius: var(--main-radius, 8px); }
.meo-wallet-amount { font-size: 30px; line-height: 1.3; font-weight: 650; letter-spacing: -.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.meo-wallet-amount small { font-size: 12px; margin-left: 6px; color: var(--muted-color); font-weight: 400; letter-spacing: 0; }
.meo-wallet-pricing { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.meo-wallet-pricing .badg { padding: 4px 8px; font-size: 12px; }
.meo-wallet-sheet .but { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
.meo-wallet-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--meo-line); }
.meo-wallet-section h3 { font-size: 13px; margin: 0 0 10px; font-weight: 600; }
.meo-wallet-explain { font-size: 12px; color: var(--muted-color); margin: 8px 0; }
.meo-memberships { display: grid; gap: 8px; }
.meo-membership { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; border-radius: var(--main-radius, 8px); background: var(--muted-bg-color); }
.meo-membership h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; }
.meo-membership p { font-size: 12px; color: var(--muted-color); margin: 0; }
.meo-membership strong { color: var(--main-color); font-weight: 500; }
.meo-membership-action .but { font-size: 12px; flex: none; }
.meo-wallet-section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.meo-wallet-section-heading h3 { margin: 0; }
.meo-wallet-section-heading .but { font-size: 12px; padding: 3px 10px; }
.meo-ledger { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.meo-ledger li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--meo-line); margin: 0; font-size: 12px; }
.meo-ledger li:last-child { border-bottom: 0; }
.meo-ledger small { display: block; font-size: 11px; color: var(--muted-2-color); margin-top: 2px; }
.meo-ledger b { white-space: nowrap; font-size: 14px; font-variant-numeric: tabular-nums; background: transparent; }
.meo-wallet-more summary { font-size: 12px; padding: 8px 0; cursor: pointer; }
.meo-payment { margin-top: 14px; }
.meo-payment a, .meo-payment button { min-height: 44px; }
@media (max-width: 700px) {
  .meo-wallet-sheet .but { min-height: 44px; }
  .meo-wallet-scroll { max-height: 64dvh; }
}
.meo-sidebar-scrim { display: none; }
@media (max-width: 960px) {
  .meo-chat-sidebar { width: 230px; }
  .meo-chat-header { padding-inline: 18px; }
  .meo-chat-scroll, .meo-chat-composer { padding-inline: 20px; }
}
@media (max-width: 700px) {
  .meo-role-card { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .meo-role-cover { min-height: 170px; }
  .meo-role-info h2 { font-size: 21px; }
  .meo-role-info { gap: 10px; }
  .meo-role-greeting { font-size: 12px; }
  .meo-role-intro { font-size: 13px; }
  .meo-role-action { gap: 7px; }
  .meo-role-action .meo-button { width: 100%; }
  .meo-chat-menu { display: inline-flex; }
  .meo-chat-sidebar { position: absolute; z-index: 30; inset: 0 auto 0 0; width: min(86vw, 290px); transform: translateX(-100%); transition: transform var(--meo-panel-dur) var(--meo-ease); padding-top: max(20px, env(safe-area-inset-top)); }
  .meo-chat-shell[data-sidebar-open="true"] .meo-chat-sidebar { transform: translateX(0); }
  .meo-chat-shell[data-sidebar-open="true"] .meo-sidebar-scrim { display: block; position: absolute; z-index: 29; inset: 0; background: rgba(15, 19, 28, .35); border: 0; }
  .meo-sidebar-brand { margin-bottom: 20px; }
  .meo-chat-header { min-height: 74px; padding: max(9px, env(safe-area-inset-top)) 12px 9px; gap: 8px; }
  .meo-chat-heading { gap: 8px; }
  .meo-chat-heading .meo-avatar { width: 36px; height: 36px; }
  .meo-chat-heading h1 { font-size: 15px; max-width: 28vw; }
  .meo-chat-heading p { font-size: 10px; }
  .meo-chat-actions { gap: 4px; }
  .meo-chat-actions .meo-detail-link { display: none; }
  .meo-balance-button { padding: 8px 10px; font-size: 11px; gap: 5px; }
  .meo-chat-scroll { padding: 20px 14px; }
  .meo-chat-welcome { padding-bottom: 24px; }
  .meo-chat-composer { padding: 8px 12px max(12px, env(safe-area-inset-bottom)); }
  .meo-compose-box { gap: 8px; padding-left: 12px; }
  .meo-compose-box textarea { font-size: 16px; }
  .meo-message { gap: 8px; }
  .meo-message-content { max-width: 85%; }
  .meo-message-text { padding: 10px 13px; font-size: 14px; }
  .meo-overlay { align-items: flex-end; padding: 0; }
  .meo-dialog { border-radius: 18px 18px 0 0; max-height: 85dvh; width: 100%; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .meo-dialog-content { padding: 20px; }
}
@media (max-width: 400px) {
  .meo-role-card { grid-template-columns: 1fr; }
  .meo-role-cover { max-height: 220px; aspect-ratio: 4/3; object-position: center 30%; }
  .meo-role-info h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .meo-root *, .meo-root *::before, .meo-root *::after { animation: none !important; transition-duration: 100ms !important; scroll-behavior: auto !important; }
}

/* Role detail: a compact play panel over a cover fading into the page surface. */
body.meo-role-detail-body.nav-fixed { padding-top: var(--meo-detail-header-height, 68px); }
body.meo-role-detail-body:not(.nav-fixed) .header { margin-bottom: 0; }
.meo-role-detail {
  --meo-detail-accent: #655b98;
  --meo-detail-border: #e9e8ef;
  --meo-detail-surface: #fff;
  --meo-detail-muted: #83828e;
  --meo-detail-ink: #292833;
  --meo-detail-dur: 180ms;
  --meo-detail-ease: cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--meo-detail-ink); background: var(--meo-page-solid, #fff);
}
.dark-theme .meo-role-detail {
  --meo-detail-accent: #b8afe5; --meo-detail-border: #303037;
  --meo-detail-surface: #1b1b20; --meo-detail-muted: #9c9ba8; --meo-detail-ink: #eeeef4;
}
.meo-detail-hero { position: relative; height: clamp(440px, 38vw, 550px); isolation: isolate; overflow: hidden; background: var(--meo-page-solid, #fff); }
.meo-detail-art, .meo-detail-art-soft {
  position: absolute; inset: 0; width: 100%; height: 100%; max-height: none;
  object-fit: cover; object-position: center 30%; pointer-events: none;
}
.meo-detail-art {
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 22%, rgba(0,0,0,.9) 40%, rgba(0,0,0,.28) 72%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 22%, rgba(0,0,0,.9) 40%, rgba(0,0,0,.28) 72%, transparent 97%);
}
.meo-detail-art-soft {
  z-index: 1; filter: blur(24px); transform: scale(1.06);
  -webkit-mask-image: linear-gradient(to bottom, transparent 28%, rgba(0,0,0,.7) 52%, rgba(0,0,0,.28) 72%, transparent 97%);
  mask-image: linear-gradient(to bottom, transparent 28%, rgba(0,0,0,.7) 52%, rgba(0,0,0,.28) 72%, transparent 97%);
}
.meo-detail-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, transparent 36%, color-mix(in srgb, var(--meo-page-solid, #fff) 38%, transparent) 62%, var(--meo-page-solid, #fff) 100%);
}
.meo-detail-hero--empty { background: linear-gradient(150deg, color-mix(in srgb, var(--meo-detail-accent) 22%, var(--meo-page-solid, #fff)), var(--meo-page-solid, #fff) 85%); }
.meo-detail-hero-inner {
  position: relative; z-index: 3; width: min(100%, 1048px); height: 100%;
  padding: 24px 24px 42px; margin: auto; display: flex; flex-direction: column; align-items: flex-start;
}
.meo-detail-back {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex: none; gap: 4px; height: 32px; min-height: 32px; padding: 0 8px;
  border-radius: 8px; color: #fff !important; background: rgba(20,24,32,.24);
  border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(12px); font-size: 12px;
}
.meo-detail-back::before { content: ''; position: absolute; inset: -8px; border-radius: 8px; }
.meo-role-detail .meo-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.meo-detail-heading { margin-top: auto; max-width: min(100%, 780px); color: var(--meo-detail-ink); }
.meo-detail-kicker { display: block; font-size: 10px; line-height: 1.4; font-weight: 600; letter-spacing: .08em; color: var(--meo-detail-ink); }
.meo-detail-heading h1 { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.25; font-weight: 700; margin: 5px 0 5px; color: var(--meo-detail-ink); overflow-wrap: anywhere; }
.meo-detail-author-row { display: flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px; font-size: 12px; }
.meo-detail-author-row > a:first-child { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; min-height: 44px; margin: -7px -2px -7px -8px; }
.meo-detail-author-row .meo-detail-author-avatar { --this-size: 27px; width: var(--this-size); height: var(--this-size); }
.meo-detail-author-name { display: flex; align-items: center; min-width: 0; }
.meo-detail-author-link { display: block; line-height: 30px; padding: 7px 0; margin: -7px 0; color: var(--meo-detail-ink) !important; }
.meo-detail-author-row .meo-detail-follow { position: relative; flex: none; min-width: 64px; margin: 0 0 0 2px; padding: 0 10px; min-height: 30px; line-height: 30px; font-size: 11px; border-radius: 99px; }
.meo-detail-follow::before { content: ''; position: absolute; inset: -7px 0; }
.meo-detail-follow count { position: relative; }
.meo-detail-column { position: relative; z-index: 4; width: min(100% - 48px, 1000px); margin: -30px auto 48px; }
.meo-role-detail .meo-detail-play {
  padding: 20px 24px; margin-bottom: 20px; border: 1px solid var(--meo-detail-border); border-radius: 18px;
  background: var(--meo-detail-surface); box-shadow: 0 8px 26px rgba(20,24,36,.045), 0 1px 3px rgba(20,24,36,.025);
}
.meo-detail-play-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; margin-bottom: 12px; }
.meo-detail-play-heading h2 { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 650; color: var(--meo-detail-ink); }
.meo-detail-play-heading h2 .meo-icon { width: 17px; height: 17px; }
.meo-detail-status { font-size: 11px; color: var(--meo-detail-muted); }
.meo-detail-costs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; }
.meo-detail-cost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 4px 10px; border-radius: 99px;
  border: 1px solid #e9d7b2; background: #fffcf6; font-size: 11px; white-space: nowrap;
}
.meo-detail-cost-label { color: #9b7741; padding-right: 6px; border-right: 1px solid #eadcc4; }
.meo-detail-cost-value { display: inline-flex; align-items: center; gap: 3px; color: #806034; font-weight: 600; }
.meo-detail-cost-value .meo-icon { width: 15px; height: 15px; }
.meo-detail-cost-unit { font-size: 10px; color: #9b7741; }
.meo-detail-cost--pending { color: var(--meo-detail-muted); border-color: var(--meo-detail-border); background: transparent; }
.meo-detail-cost--pending .meo-detail-cost-label { color: var(--meo-detail-muted); border-color: var(--meo-detail-border); }
.dark-theme .meo-detail-cost:not(.meo-detail-cost--pending) { border-color: #584b35; background: #28241e; }
.dark-theme .meo-detail-cost:not(.meo-detail-cost--pending) .meo-detail-cost-label { color: #cbb28b; border-color: #584b35; }
.dark-theme .meo-detail-cost-value, .dark-theme .meo-detail-cost-unit { color: #e3c89e; }
.meo-detail-play .meo-detail-start {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px;
  padding: 10px 18px; font-size: 14px; font-weight: 600; border: 1px solid rgba(255,255,255,.12); border-radius: 11px;
  color: #fff; background: linear-gradient(110deg, #586780, #77648a);
  box-shadow: 0 4px 12px rgba(92,83,127,.15);
  transition: transform var(--meo-detail-dur) var(--meo-detail-ease), opacity var(--meo-detail-dur) var(--meo-detail-ease);
}
.meo-detail-start .meo-icon { width: 18px; height: 18px; }
.meo-detail-categories { margin-top: 10px; }
.meo-detail-categories > .article-tags { margin: 0; }
.meo-detail-actions { display: flex; gap: 8px; margin-top: 12px; }
.meo-detail-actions .meo-detail-action { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 8px 6px; border: 1px solid var(--meo-detail-border); border-radius: 10px; background: transparent; color: var(--meo-detail-ink); font-size: 12px; margin: 0; white-space: nowrap; }
.meo-detail-action .icon, .meo-detail-action .meo-icon { width: 16px; height: 16px; margin: 0; }
.meo-detail-note { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; padding: 0; color: var(--meo-detail-muted); font-size: 11px; line-height: 1.8; }
.meo-detail-note .meo-icon { width: 14px; height: 14px; margin-top: 3px; }
.meo-detail-introduction, .meo-detail-discussion { scroll-margin-top: calc(var(--meo-detail-header-height, 68px) + 16px); }
.meo-detail-introduction > .breadcrumb, .meo-detail-introduction > .single-head-cover, .meo-detail-introduction .article > .article-header { display: none; }
.meo-detail-introduction > .article { padding: 24px; margin-bottom: 20px; border: 1px solid var(--meo-detail-border); border-radius: 18px; background: var(--meo-detail-surface); box-shadow: none; }
/* Zibll hardcodes these footer nodes; keep its content/payment hooks and native actions. */
.meo-detail-introduction .article > .article-content > .separator,
.meo-detail-introduction .article > .article-content > .article-tags { display: none; }
.meo-introduction-title { margin: 0 0 16px; font-size: 16px; font-weight: 650; color: var(--meo-detail-ink); }
.meo-detail-public-intro { margin-bottom: 20px; }
.meo-detail-intro-text { line-height: 1.95; font-size: 14px; overflow-wrap: anywhere; color: var(--meo-detail-ink); }
.meo-detail-intro-more summary { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: var(--meo-detail-accent); font-size: 12px; list-style: none; cursor: pointer; }
.meo-detail-intro-more summary::-webkit-details-marker { display: none; }
.meo-detail-intro-more summary .meo-icon { width: 16px; height: 16px; transition: transform var(--meo-detail-dur) var(--meo-detail-ease); }
.meo-detail-intro-collapse, .meo-detail-intro-more[open] .meo-detail-intro-expand { display: none; }
.meo-detail-intro-more[open] .meo-detail-intro-collapse { display: inline; }
.meo-detail-intro-more[open] summary .meo-icon { transform: rotate(180deg); }
.meo-detail-introduction .wp-posts-content { min-height: 0; line-height: 1.95; }
.meo-detail-introduction .wp-posts-content p { margin-bottom: 1.4em; }
.meo-detail-discussion { margin-top: 24px; }
.meo-detail-back, .meo-detail-action { transition: transform var(--meo-detail-dur) var(--meo-detail-ease), opacity var(--meo-detail-dur) var(--meo-detail-ease); }
.meo-detail-start:active, .meo-detail-action:active, .meo-detail-back:active { transform: scale(.98); }
.meo-role-detail a:focus-visible, .meo-detail-intro-more summary:focus-visible { outline: 2px solid var(--meo-detail-accent) !important; outline-offset: 3px; }
@media (hover: hover) {
  .meo-detail-start:hover { transform: translateY(-1px); }
  .meo-detail-action:hover, .meo-detail-back:hover { opacity: .85; }
}
@media (max-width: 767px) {
  body.meo-role-detail-body.nav-fixed { padding-top: var(--meo-detail-header-height, 50px); }
  .meo-role-detail-body .float-right { display: none; }
  .meo-detail-hero { height: 430px; }
  .meo-detail-art, .meo-detail-art-soft { object-position: center 25%; }
  .meo-detail-hero-inner { padding: 16px 22px 38px; }
  .meo-detail-heading h1 { font-size: 28px; }
  .meo-detail-column { width: calc(100% - 28px); margin-top: -26px; }
  .meo-role-detail .meo-detail-play, .meo-detail-introduction > .article { padding: 17px; border-radius: 17px; }
  .meo-detail-play-heading { gap: 6px; margin-bottom: 10px; }
  .meo-detail-costs { gap: 6px; margin-bottom: 13px; }
  .meo-detail-cost { padding: 4px 8px; }
  .meo-detail-play .meo-detail-start { min-height: 44px; }
  .meo-detail-action .icon { width: 14px; height: 14px; }
  .meo-detail-actions .meo-detail-action { font-size: 11px; gap: 4px; }
  .meo-introduction-title { font-size: 15px; }
  .meo-detail-intro-text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .meo-role-detail *, .meo-role-detail *::before, .meo-role-detail *::after { transition: none !important; animation: none !important; }
  .meo-detail-start:hover, .meo-detail-start:active, .meo-detail-action:active, .meo-detail-back:active { transform: none; }
}

/* UU reference: uninterrupted chat canvas, compact header, floating composer. */
.meo-chat-shell { --meo-chat-font: 16px; background-color: var(--meo-bg); background-image: none; --meo-line: color-mix(in srgb, var(--meo-text) 10%, transparent); }
.meo-chat-main { background-color: var(--meo-page); background-image: linear-gradient(135deg, var(--meo-chat-tint, var(--meo-page)), var(--meo-page) 65%, var(--meo-bg)); position: relative; isolation: isolate; }
.meo-chat-main::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: none; }
.meo-chat-header { min-height: 76px; padding: max(12px, env(safe-area-inset-top)) max(24px, calc((100% - 1100px) / 2)) 12px; background: color-mix(in srgb, var(--meo-bg) 88%, transparent); border-bottom: 1px solid var(--meo-line); gap: 16px; }
.meo-chat-heading { gap: 14px; flex: 1; min-width: 0; }
.meo-chat-header .meo-icon-button { background: transparent; border: 0; border-radius: 50%; color: var(--meo-muted); flex: none; }
.meo-role-heading { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; color: var(--meo-text); cursor: pointer; }
.meo-role-heading > span { min-width: 0; }
.meo-role-heading .meo-avatar { width: 42px; height: 42px; }
.meo-chat-heading h1 { font-size: 17px; font-weight: 650; max-width: none; line-height: 1.5; }
.meo-role-subtitle { color: var(--meo-muted); font-size: 12px; white-space: nowrap; }
.meo-chat-actions { gap: 8px; flex: none; }
.meo-chat-actions .meo-balance-button { border: 1px solid color-mix(in srgb, var(--meo-accent) 12%, transparent); background: var(--meo-bg); color: var(--meo-accent); border-radius: 24px; min-height: 40px; padding: 8px 16px; box-shadow: 0 3px 12px color-mix(in srgb, var(--meo-accent) 6%, transparent); }
.meo-chat-scroll { padding: 26px max(24px, calc((100% - 1000px) / 2)) 32px; scrollbar-gutter: auto; }
.meo-conversation-start { text-align: center; color: var(--meo-muted); font-size: 11px; margin: 4px 0 32px; opacity: .75; }
.meo-message { gap: 12px; margin-bottom: 26px; }
.meo-message .meo-avatar { width: 40px; height: 40px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.meo-message-content { max-width: min(75%, 720px); }
.meo-message-label { margin: 0 0 6px 2px; font-size: 11px; }
.meo-message-text { font-size: var(--meo-chat-font); line-height: 1.85; padding: 13px 18px; background: var(--meo-bg); border-radius: 4px 18px 18px; border: 1px solid color-mix(in srgb, var(--meo-text) 10%, transparent); box-shadow: 0 2px 3px rgba(25,35,50,.035); }
.meo-message--user .meo-message-text { background: color-mix(in srgb, var(--meo-accent) 12%, var(--meo-bg)); border: 1px solid color-mix(in srgb, var(--meo-accent) 12%, transparent); border-radius: 18px 4px 18px 18px; }
.meo-message-copy { font-size: 11px; min-height: 32px; padding: 4px 8px; border: 0; background: transparent; color: var(--meo-muted); font-weight: 400; margin-top: 2px; }
.meo-message--user .meo-message-copy { float: right; }
.meo-chat-composer { flex: none; width: 100%; margin: 0; padding: 10px 20px max(8px, env(safe-area-inset-bottom)); background: var(--meo-bg); border-top: 1px solid var(--meo-line); }
.meo-compose-box { width: min(100%, 1008px); margin: 0 auto; gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.meo-compose-input { display: flex; align-items: flex-end; flex: 1; min-width: 0; padding: 0 4px 0 12px; border: 1px solid transparent; border-radius: 13px; background: var(--meo-page); }
.meo-compose-input:focus-within { border-color: var(--meo-accent); }
.meo-compose-tools { display: flex; gap: 2px; align-items: center; flex: none; padding-bottom: 1px; }
.meo-compose-tools .meo-icon-button { border: 0; border-radius: 50%; background: transparent; color: var(--meo-text); }
.meo-compose-box .meo-icon-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; flex: none; padding: 10px; }
.meo-compose-box > .meo-composer-toggle { border: 0; border-radius: 50%; background: transparent; color: var(--meo-text); }
.meo-compose-box > .meo-composer-toggle .meo-icon, .meo-compose-tools .meo-icon { width: 28px; height: 28px; flex: none; stroke-width: 1.65; }
.meo-compose-tools .meo-icon { width: 25px; height: 25px; }
.meo-compose-box .meo-composer-toggle[aria-expanded="true"] { color: var(--meo-text); background: transparent; }
.meo-composer-toggle[data-meo-action="more"] .meo-icon { transition: transform var(--meo-dur) var(--meo-ease); }
.meo-composer-toggle[data-meo-action="more"][aria-expanded="true"] .meo-icon { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .meo-composer-toggle[data-meo-action="more"] .meo-icon { transition: none; } }
.meo-composer-toggle:focus-visible, .meo-composer-panel button:focus-visible { outline: 2px solid var(--meo-accent); outline-offset: 2px; }
.meo-composer-panel { width: min(100%, 1008px); height: clamp(180px, 32dvh, 300px); max-height: max(90px, calc(var(--meo-vh, 100dvh) - 260px)); margin: 8px auto 0; padding: 8px 6px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; }
.meo-emoji-tabs { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.meo-emoji-tabs button { min-height: 44px; padding: 6px 0; border: 0; border-radius: 0; background: transparent; color: var(--meo-muted); font-size: 13px; }
.meo-emoji-tabs button[aria-selected="true"] { color: var(--meo-text); background: transparent; }
.meo-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.meo-emoji-grid .meo-emoji-choice { min-width: 44px; min-height: 44px; padding: 6px; border: 0; border-radius: 10px; background: transparent; font-size: 24px; }
.meo-emoji-grid .meo-emoji-choice:hover:not(:disabled) { background: var(--meo-soft); }
.meo-sticker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; align-items: center; }
.meo-emoji-grid .meo-sticker-choice { min-width: 0; height: 64px; padding: 4px; }
.meo-sticker-choice img { width: auto; height: auto; max-width: 52px; max-height: 52px; object-fit: contain; }
.meo-sticker-grid .meo-sticker-add { position: relative; justify-self: center; width: 56px; height: 56px; min-width: 0; min-height: 0; padding: 0; border: 1px dashed color-mix(in srgb, var(--meo-text) 28%, transparent); border-radius: 14px; background: transparent; color: var(--meo-muted); }
.meo-sticker-add::before, .meo-sticker-add::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 1.7px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); }
.meo-sticker-add::after { transform: translate(-50%, -50%) rotate(90deg); }
.meo-sticker-add:hover:not(:disabled) { color: var(--meo-accent); border-color: currentColor; background: var(--meo-soft); }
.meo-composer-panel .meo-sticker-status { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: var(--meo-soft); color: var(--meo-text); font-size: 12px; line-height: 1.6; }
.meo-sticker-image-error { font-size: 11px; color: var(--meo-muted); }
.meo-composer-panel .meo-composer-panel-note { margin: 12px 0 2px; font-size: 11px; line-height: 1.7; color: var(--meo-muted); }
.meo-emoji-grid > .meo-composer-panel-note { grid-column: 1 / -1; }
.meo-attachment-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 12px; padding: 14px 0; }
.meo-attachment-option { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0; border: 0; background: transparent; color: var(--meo-muted); font-size: 13px; cursor: not-allowed; }
.meo-attachment-icon { display: grid; place-items: center; width: 60px; height: 60px; border: 0; border-radius: 16px; background: var(--meo-page); }
.meo-attachment-icon .meo-icon { width: 24px; height: 24px; }
.meo-attachment-option small { font-size: 10px; }
.meo-user-sticker { display: inline-block; width: auto; height: auto; max-width: min(120px, 100%); max-height: 120px; object-fit: contain; vertical-align: middle; }
.meo-user-sticker--native { max-width: 40px; max-height: 40px; }
.meo-compose-box textarea { min-height: 44px; padding: 10px 0; font-size: 16px; }
.meo-compose-box textarea::placeholder { color: var(--meo-muted); opacity: .65; }
.meo-compose-box textarea:disabled { opacity: .7; cursor: not-allowed; }
.meo-compose-input #meo-send { border: 0; border-radius: 8px; background: transparent; color: var(--meo-accent); flex: none; width: 36px; min-width: 36px; height: 44px; min-height: 44px; padding: 8px; }
.meo-compose-input #meo-send:disabled { background: transparent; color: var(--meo-muted); opacity: .55; }
.meo-compose-input .meo-chat-login { border: 0; background: transparent; color: var(--meo-accent); min-width: 44px; padding: 8px; }
.meo-compose-note { font-size: 10px; opacity: .8; margin-top: 6px; }
.meo-feedback { width: fit-content; max-width: 100%; margin: 0 auto 12px; background: color-mix(in srgb, var(--meo-bg) 92%, transparent); border: 1px solid var(--meo-line); border-radius: 12px; padding: 9px 14px; color: var(--meo-muted); }
.meo-feedback.meo-error { border-left: 3px solid #bd5858; }
.meo-chat-sidebar { position: absolute; z-index: 30; inset: 0 auto 0 0; width: min(86vw, 330px); transform: translateX(-100%); transition: transform var(--meo-panel-dur) var(--meo-ease); padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); border-right: 1px solid var(--meo-line); box-shadow: 8px 0 40px var(--meo-chat-shadow, rgba(20,30,50,.06)); }
.meo-chat-shell[data-sidebar-open="true"] .meo-chat-sidebar { transform: translateX(0); }
.meo-chat-shell[data-sidebar-open="true"] .meo-sidebar-scrim { display: block; position: absolute; z-index: 29; inset: 0; background: var(--meo-chat-scrim, rgba(15,19,28,.25)); border: 0; }
.meo-sidebar-title { display: flex; align-items: center; justify-content: space-between; }
.meo-sidebar-title h2 { font-size: 19px; font-weight: 650; }
.meo-sidebar-title button { border: 0; background: transparent; }

.meo-new-conversation { margin: 12px 0 20px; width: 100%; background: var(--meo-soft); color: var(--meo-accent); border: 0; font-size: 13px; }
.meo-session-list > p { font-size: 12px; padding: 16px 8px; }
@media (max-width: 700px) {
  .meo-chat-header { min-height: 68px; padding: max(9px, env(safe-area-inset-top)) 12px 9px; gap: 8px; }
  .meo-chat-heading { gap: 6px; }
  .meo-header-back { min-width: 32px; padding-inline: 5px; }
  .meo-role-heading { gap: 9px; }
  .meo-role-heading .meo-avatar { width: 36px; height: 36px; }
  .meo-chat-heading h1 { font-size: 16px; max-width: 30vw; }
  .meo-role-subtitle { display: block; max-width: 29vw; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
  .meo-chat-actions { gap: 0; }
  .meo-chat-actions .meo-balance-button { padding-inline: 10px; gap: 5px; min-width: 50px; min-height: 36px; font-size: 12px; }
  .meo-chat-actions .meo-icon-button { min-width: 40px; padding: 8px; }
  .meo-chat-scroll { padding: 20px 14px 24px; }
  .meo-conversation-start { margin: 0 0 24px; font-size: 10px; }
  .meo-message { gap: 9px; margin-bottom: 22px; }
  .meo-message .meo-avatar { width: 34px; height: 34px; }
  .meo-message-content { max-width: 82%; }
  .meo-message-text { padding: 10px 14px; font-size: var(--meo-chat-font); }
  .meo-chat-composer { padding: 10px 8px max(8px, env(safe-area-inset-bottom)); }
  .meo-compose-box { padding: 0; gap: 4px; }
  .meo-compose-tools { gap: 0; }
  .meo-compose-tools .meo-icon-button { padding: 10px; min-width: 44px; }
  .meo-compose-note { font-size: 10px; margin-top: 6px; }
}
.meo-chat-shell .meo-avatar { object-position: center top; }
.meo-copy-status { font-size: 11px; color: var(--meo-muted); margin-left: 5px; }

.meo-chat-name { display: block; font-size: 17px; font-weight: 650; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .meo-chat-name { font-size: 16px; max-width: 30vw; } }
/* Conversation tools share the theme's existing modal shell and color tokens. */
.meo-native-dialog .modal-content{overflow:hidden}
.meo-native-sheet .meo-dialog-header{padding:0 0 14px;border-bottom:1px solid var(--meo-line);gap:12px}
.meo-native-sheet .meo-dialog-header h2{font-size:17px;font-weight:600}
.meo-native-sheet .meo-dialog-header .meo-icon-button{flex:none;border:0;background:transparent;margin:-6px -6px -6px 0}
.meo-native-sheet .meo-dialog-content{padding:18px 0 2px;max-height:min(66dvh,calc(var(--meo-sheet-vh,100dvh) - 155px));overflow:auto;overscroll-behavior:contain}
.meo-native-sheet .meo-preferences-form{margin-top:16px}
.meo-native-sheet .meo-confirm-description{margin:0 0 20px;line-height:1.85;color:var(--meo-muted)}
.meo-memory-switch{display:flex;gap:10px;align-items:center;min-height:44px}
.meo-memory-switch input{width:18px;height:18px;flex:none;accent-color:var(--meo-accent)}
.meo-memory-clear-confirm{display:grid;gap:14px;padding:14px;border:1px solid color-mix(in srgb,#d34b4b 30%,var(--meo-line));border-radius:10px;background:color-mix(in srgb,#d34b4b 5%,var(--meo-bg))}
.meo-memory-clear-confirm p{font-size:13px;line-height:1.8}
.meo-button--danger{background:#b83535;color:#fff;border-color:#b83535}
.meo-memory-clear{color:var(--meo-muted);justify-self:start}
.meo-recording-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px;margin-bottom:10px;background:var(--meo-soft);border:1px solid var(--meo-line);border-radius:12px}
.meo-recording-bar>span{flex:1 1 180px;font-size:13px;line-height:1.7}
.meo-recording-bar .meo-button{padding:8px 12px;font-size:12px}
.meo-message-sticker{display:block;width:auto;height:auto;max-width:min(160px,100%);max-height:160px;object-fit:contain;margin-top:10px;border-radius:12px}
.meo-message-sticker--native{max-width:min(40px,100%);max-height:40px;margin-top:8px;border-radius:0}
.meo-message--streaming .meo-message-text::after{content:'';display:inline-block;width:2px;height:1em;margin-left:3px;background:var(--meo-accent);vertical-align:-.12em;animation:meo-stream-caret 700ms ease-in-out infinite alternate}
@keyframes meo-stream-caret{from{opacity:.25}to{opacity:1}}
@media(max-width:700px){.meo-native-sheet .meo-dialog-content{max-height:calc(var(--meo-sheet-vh,100dvh) - 160px);padding-bottom:max(8px,env(safe-area-inset-bottom))}.meo-message-copy{min-height:44px;min-width:44px}.meo-native-sheet .meo-preferences-actions{gap:10px}}
@media(prefers-reduced-motion:reduce){.meo-message--streaming .meo-message-text::after{animation:none;opacity:.7}}
@media(min-width:641px){.modal-dialog.meo-editor-dialog{width:560px;max-width:calc(100vw - 32px)}}
.meo-editor-dialog .meo-preferences-input{height:140px;min-height:140px;max-height:30dvh}
.meo-editor-dialog .meo-preferences-help{font-size:12px;line-height:1.65}
.meo-editor-dialog .meo-preferences-form{gap:10px}
.meo-editor-actions{position:sticky;bottom:0;z-index:1;background:var(--meo-bg);padding:10px 0 6px;border-top:1px solid var(--meo-line)}
/* Public character profile and account-backed options use Zibll's native sheets. */
.meo-panel-actions{display:flex;gap:8px;align-items:center}
.meo-native-sheet .meo-panel-actions .meo-icon-button{margin:-6px 0;min-width:44px;min-height:44px;padding:12px}
.meo-native-sheet .meo-panel-actions .meo-icon{width:18px;height:18px}
.meo-profile-summary{display:flex;align-items:center;gap:14px}
.meo-profile-summary .meo-profile-avatar{width:64px;height:64px;border-radius:12px;object-position:center top}
.meo-profile-identity{min-width:0;flex:1}
.meo-profile-identity h3{font-size:18px;line-height:1.45;font-weight:600;overflow-wrap:anywhere;margin:0 0 6px}
.meo-profile-author{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--meo-muted);min-height:24px}
.meo-profile-author-name{min-width:0;max-width:100%;display:flex}
.meo-profile-author a{max-width:100%;color:var(--meo-muted)}
.meo-profile-categories{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.meo-profile-categories .but{font-size:12px;padding:5px 10px;min-height:32px;display:inline-flex;align-items:center}
.meo-profile-section{border-top:1px solid var(--meo-line);margin-top:20px;padding-top:18px}
.meo-profile-section h4{font-size:13px;font-weight:600;margin:0 0 9px;color:var(--meo-text)}
.meo-profile-section p{font-size:13px;line-height:1.85;color:var(--meo-muted);white-space:pre-wrap;overflow-wrap:anywhere}
.meo-options-form{display:grid;gap:0}
.meo-option-model{display:grid;gap:10px;padding-bottom:18px}
.meo-option-model>label{margin:0;font-weight:500}
.meo-options-form .form-control{font:inherit;font-size:14px;color:var(--meo-text);background:var(--meo-page);border:1px solid var(--meo-line);border-radius:8px;min-height:44px;padding:8px 12px;width:100%;box-shadow:none}
.meo-options-form .form-control:disabled{opacity:.55;cursor:not-allowed}
.meo-option-group{border-top:1px solid var(--meo-line);padding:7px 0}
.meo-option-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;margin:0;font-weight:400;cursor:pointer}
.meo-option-row>span{line-height:1.5}
.meo-option-row small{display:block;color:var(--meo-muted);font-size:11px;font-weight:400;margin-top:3px}
.meo-option-row small:empty{display:none}
.meo-option-row input[role="switch"]{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:38px;height:22px;margin:0;background:color-mix(in srgb,var(--meo-muted) 32%,var(--meo-bg));border:0;border-radius:20px;cursor:pointer;transition:background-color 180ms}
.meo-option-row input[role="switch"]::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0002;transition:transform 180ms}
.meo-option-row input[role="switch"]:checked{background:var(--meo-accent)}
.meo-option-row input[role="switch"]:checked::after{transform:translateX(16px)}
.meo-option-row input[role="switch"]:disabled{opacity:.4;cursor:not-allowed}
.meo-option-context{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 0 9px;color:var(--meo-muted);font-size:12px}
.meo-option-context label{font-weight:400;margin:0}
.meo-option-context .form-control{width:142px;font-size:12px}
.meo-option-link{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;border:0;background:transparent;padding:5px 0;color:var(--meo-muted);font-size:12px}
.meo-option-link .meo-icon{width:16px;height:16px}
.meo-options-status{font-size:12px;margin:10px 0 0;max-width:100%}
.meo-options-form .meo-editor-actions{margin-top:10px;padding-top:14px}
.meo-options-form #meo-options-save{width:100%}
.meo-chat-actions .meo-header-settings{min-width:44px;min-height:44px;flex:none}
.meo-chat-actions .meo-header-settings .meo-icon{width:18px;height:18px}
@media(min-width:641px){.modal-dialog.meo-profile-dialog{width:480px;max-width:calc(100vw - 32px)}}
@media(max-width:700px){.meo-chat-header{padding-inline:8px}.meo-chat-heading{min-width:0;flex:1}.meo-chat-actions{gap:4px}.meo-chat-actions>.meo-icon-button{min-width:44px}.meo-chat-actions .meo-balance-button{padding-inline:8px;min-width:44px;min-height:44px}.meo-role-heading .meo-avatar{width:32px;height:32px}.meo-chat-name{max-width:100%;font-size:14px}.meo-role-heading{gap:7px;overflow:hidden}.meo-chat-heading .meo-header-back{min-width:44px}.meo-profile-categories .but{min-height:44px;padding:8px 12px}.meo-native-sheet .meo-profile-content{max-height:min(62dvh,calc(var(--meo-sheet-vh,100dvh) - 150px))}}
@media(prefers-reduced-motion:reduce){.meo-option-row input[role="switch"],.meo-option-row input[role="switch"]::after{transition:none}}
.meo-chat-body:has(.modal.in .meo-profile-dialog) .meo-chat-shell,
.meo-chat-body:has(.modal.in .meo-options-dialog) .meo-chat-shell { filter: blur(3px); }

/* Quick settings reuse Zibll's modal lifecycle, with one full-height right drawer. */
.meo-chat-header .meo-header-settings { color: var(--meo-text); width: 44px; height: 44px; }
.meo-chat-actions .meo-header-settings .meo-icon { width: 27px; height: 27px; stroke-width: 1.8; }
.meo-chat-body .modal.meo-drawer-modal { top: var(--meo-sheet-top, 0); height: var(--meo-sheet-vh, 100dvh); bottom: auto; padding: 0 !important; justify-content: flex-end; align-items: stretch; overflow: hidden; }
.meo-chat-body .meo-drawer-modal .modal-dialog.meo-side-dialog { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(280px, 74vw, 420px); max-width: calc(100vw - 48px); height: 100%; margin: 0; transform: translateX(100%); transition: transform 280ms cubic-bezier(0, 0, .2, 1); }
.meo-chat-body .meo-drawer-modal.in .modal-dialog.meo-side-dialog { transform: translateX(0); }
.meo-chat-body .meo-side-dialog .modal-content { height: 100% !important; max-height: none !important; border: 0; border-radius: 0; overflow: hidden !important; background: var(--body-bg-color, #f5f6f8); box-shadow: -10px 0 45px rgba(0,0,0,.08); }
.meo-chat-body .meo-side-dialog .modal-body { height: 100%; padding: 0; }
.meo-side-dialog .meo-native-sheet { height: 100%; display: flex; flex-direction: column; min-height: 0; background: var(--meo-page); }
.meo-side-dialog .meo-dialog-header { flex: none; min-height: 76px; padding: max(16px, env(safe-area-inset-top)) 16px 16px; border: 0; gap: 8px; }
.meo-side-dialog .meo-dialog-header h2 { flex: 1; font-size: 17px; white-space: nowrap; }
.meo-side-dialog .meo-dialog-header .meo-icon-button { width: 36px; min-width: 36px; height: 44px; margin: 0; padding: 8px; }
.meo-side-dialog .meo-dialog-content { flex: 1; min-height: 0; max-height: none; padding: 0 16px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.meo-side-dialog .meo-quick-header { min-height: 86px; gap: 10px; }
.meo-quick-wallet { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 55%; padding: 4px 5px 4px 7px; border: 0; border-radius: 24px; background: var(--meo-bg); color: var(--meo-text); }
.meo-quick-wallet > [data-balance] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.meo-quick-wallet > .meo-icon { width: 23px; height: 23px; }
.meo-quick-topup { display: grid; place-items: center; width: 25px; height: 25px; flex: none; border-radius: 50%; background: #ffbb24; color: #fff; }
.meo-quick-topup .meo-icon { width: 17px; height: 17px; stroke-width: 2.4; }
.meo-quick-card { background: var(--meo-bg); border-radius: 18px; overflow: hidden; margin-bottom: 16px; }
.meo-quick-profile { padding: 16px 14px 10px; }
.meo-quick-identity { width: 100%; display: flex; align-items: center; gap: 10px; padding: 0 0 16px; border: 0; background: transparent; color: var(--meo-text); text-align: left; }
.meo-quick-identity .meo-avatar { width: 49px; height: 49px; object-position: center top; }
.meo-quick-identity > span { min-width: 0; flex: 1; }
.meo-quick-identity strong { display: block; font-size: 15px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.meo-quick-identity small { display: block; margin-top: 5px; font-size: 10px; color: var(--meo-muted); }
.meo-quick-identity > .meo-icon { width: 15px; height: 15px; color: var(--meo-muted); }
.meo-quick-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 12px; border-top: 1px solid var(--meo-line); }
.meo-quick-shortcuts button { display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 70px; padding: 8px 0; border: 0; background: transparent; color: var(--meo-muted); font-size: 12px; }
.meo-quick-shortcuts .meo-icon { width: 25px; height: 25px; color: var(--meo-accent); stroke-width: 1.8; }
.meo-quick-row { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 15px 14px; border: 0; background: transparent; color: var(--meo-text); text-align: left; }
.meo-quick-row + .meo-quick-row { border-top: 1px solid var(--meo-line); }
.meo-quick-row > span:first-child { flex: none; font-size: 14px; }
.meo-quick-value { min-width: 0; margin-left: auto; color: var(--meo-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.meo-quick-row > .meo-icon { width: 17px; height: 17px; margin-left: auto; color: var(--meo-muted); }
.meo-quick-row > .meo-quick-value + .meo-icon { margin-left: 0; }
.meo-quick-close { width: 100%; margin-top: 0; font-size: 12px; font-weight: 400; color: var(--meo-muted); }
.meo-quick-row:hover, .meo-quick-shortcuts button:hover { background: var(--meo-soft); }
.meo-side-dialog .meo-options-form, .meo-side-dialog .meo-preferences-form, .meo-side-dialog .meo-profile-content { font-size: 13px; }
.meo-side-dialog .meo-option-group { padding: 7px 14px; }
.meo-side-dialog .meo-option-model, .meo-side-dialog .meo-option-group { background: var(--meo-bg); border: 0; border-radius: 14px; }
.meo-side-dialog .meo-option-model { padding: 14px; }
.meo-side-dialog .meo-option-model select { width: 100%; max-width: 100%; }
.meo-side-dialog .meo-option-row { gap: 12px; }
.meo-side-dialog .meo-preferences-input { height: 180px; min-height: 120px; max-height: 40dvh; }
.meo-side-dialog .meo-editor-actions { background: var(--meo-page); }
.meo-side-dialog .meo-preferences-meta { flex-wrap: wrap; gap: 4px; }
.meo-side-dialog .meo-preferences-actions { flex-wrap: wrap; }
.meo-side-dialog .meo-session-list { overflow: visible; }
.meo-side-dialog .meo-profile-content { max-height: none; }
@media (min-width: 641px) {
  .meo-side-dialog .meo-dialog-header { padding-inline: 22px; }
  .meo-side-dialog .meo-dialog-content { padding-inline: 22px; }
  .meo-quick-profile { padding: 20px 18px 12px; }
  .meo-quick-row { min-height: 64px; padding-inline: 18px; }
  .meo-quick-row > span:first-child { font-size: 15px; }
  .meo-quick-card { border-radius: 20px; margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) { .meo-chat-body .meo-drawer-modal .modal-dialog.meo-side-dialog { transition: none; } }

/* Account-owned background stays behind messages; controls keep native readable surfaces. */
.meo-chat-main.meo-has-background::before { background-image: linear-gradient(var(--meo-background-shade, #ffffff24), var(--meo-background-shade, #ffffff24)), var(--meo-background-image); background-position: center; background-size: cover; background-repeat: no-repeat; }
.dark-theme .meo-chat-main.meo-has-background { --meo-background-shade: #00000040; }
.meo-has-background .meo-conversation-start > span, .meo-has-background .meo-message-label, .meo-has-background .meo-message-copy { display: inline-block; padding: 3px 8px; border-radius: 8px; background: color-mix(in srgb, var(--meo-bg) 90%, transparent); }
.meo-background-form { display: grid; gap: 14px; margin-top: 16px; }
.meo-background-help { font-size: 12px; line-height: 1.8; color: var(--meo-muted) !important; }
.meo-background-preview { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-height: 270px; padding: 16px; border: 1px solid var(--meo-line); border-radius: 16px; background-color: var(--meo-soft); background-size: cover; background-position: center; overflow: hidden; }
.meo-background-preview > span:first-child { align-self: center; margin-bottom: 25px; padding: 3px 10px; border-radius: 20px; font-size: 10px; color: var(--meo-muted); background: var(--meo-bg); }
.meo-background-bubble { padding: 8px 12px; font-size: 12px; border-radius: 3px 12px 12px; color: var(--meo-text); background: var(--meo-bg); box-shadow: 0 1px 4px #0001; }
.meo-background-bubble--mine { align-self: flex-end; border-radius: 12px 3px 12px 12px; }
.meo-background-name { font-size: 12px; overflow-wrap: anywhere; color: var(--meo-muted) !important; }
.meo-background-actions { display: grid; gap: 6px; }
.meo-background-status { width: 100%; font-size: 12px; margin: 0; }
.meo-background-status .meo-button { margin-top: 8px; }
@media (max-height: 580px) { .meo-background-preview { min-height: 185px; } }