/* Current Opalia contract: accessible controls and non-flashing surfaces. */
:root {
  --ui-primary-bg: #3a6d9c; --ui-primary-hover: #315e88; --ui-primary-active: #284d70; --ui-primary-fg: #ffffff;
  --ui-danger: #a52822; --ui-danger-hover: #86201c;
  --ui-surface-duration: 360ms; --ui-theme-duration: 600ms; --ui-control-duration: 140ms; --ui-radius-control: 10px;
}
html[data-ui-theme="night"], html[data-ui-theme="night"] body { background: #090f16 !important; color-scheme: dark; }
.sc-host { --color-neutral-600: #66666a; }
.roleplay-world-connecting { position: fixed; z-index: 20; inset: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 32px 24px 132px; background-color: #ffffff; color: #294e70; font-family: system-ui, sans-serif; pointer-events: none; transition: background-color 600ms linear, color 600ms linear; }
.roleplay-world-connecting[data-world-theme="night"] { background-color: #090f16; color: #dcecff; }
.roleplay-world-orbit { position: relative; display: grid; place-items: center; width: 156px; height: 156px; color: #6aaff5; }
.roleplay-world-orbit::before, .roleplay-world-orbit::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #6aaff5 0deg, #afd8ff 60deg, #edf7ff 120deg, #ffffff 170deg, #e0f0ff 220deg, #a0cefb 285deg, #6aaff5 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 4px), #000 calc(100% - 1px), transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 4px), #000 calc(100% - 1px), transparent 100%); animation: roleplay-world-rotate 5.5s linear infinite; }
.roleplay-world-orbit::after { inset: 24px; animation: roleplay-world-rotate 8s linear infinite reverse, roleplay-world-inner-breathe 3.4s ease-in-out infinite; animation-delay: var(--world-inner-spin, 0ms), var(--world-inner-breath, -1100ms); }
.roleplay-world-orbit::before { animation: roleplay-world-rotate 5.5s linear infinite, roleplay-world-breathe 4.6s ease-in-out infinite; animation-delay: var(--world-outer-spin, 0ms), var(--world-outer-breath, 0ms); }
.roleplay-world-orbit span { font-size: 48px; animation: roleplay-world-glow 2.4s ease-in-out infinite; animation-delay: var(--world-glow, 0ms); }
.roleplay-world-label { margin: 0; font-size: 18px; line-height: 1.5; letter-spacing: .14em; text-align: center; }
@keyframes roleplay-world-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes roleplay-world-breathe { 0%, 100% { scale: .88; opacity: .65; } 50% { scale: 1; opacity: 1; } }
@keyframes roleplay-world-inner-breathe { 0%, 100% { scale: .93; opacity: .7; } 50% { scale: 1; opacity: .95; } }
@keyframes roleplay-world-glow { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
/* One body scale across roleplay Info, Sessions and Settings. Inline heading
   and metadata sizes remain independent; do not resize the chat transcript. */
.sc-host [data-ui-surface="roleplay-panel"] { --roleplay-panel-body-size: 13px; }
.sc-host .roleplay-panel-body { font-size: var(--roleplay-panel-body-size); }
.sc-host .roleplay-panel-body :is(p, label, button, [role="status"]) { font-size: var(--roleplay-panel-body-size) !important; }
.sc-host .roleplay-panel-body :is(p, label) { line-height: 1.6; }
/* Placeholder copy shares the same body scale. */
.sc-host .roleplay-panel-body :is(input, textarea)::placeholder { font-size: var(--roleplay-panel-body-size) !important; }
.sc-host .roleplay-settings :is(input, textarea, select, .roleplay-item-title) { font-size: var(--roleplay-panel-body-size) !important; }
@media (min-width: 768px) {
  html.roleplay-standalone .roleplay-panel-body :is(input, textarea, select) { font-size: var(--roleplay-panel-body-size) !important; }
}
.sc-host .btn-primary, .sc-host .ui-primary { background: var(--ui-primary-bg) !important; color: var(--ui-primary-fg) !important; border-color: var(--ui-primary-bg) !important; }
.sc-host .btn-primary:hover:not(:disabled), .sc-host .ui-primary:hover:not(:disabled) { background: var(--ui-primary-hover) !important; }
.sc-host .btn-primary:active:not(:disabled), .sc-host .ui-primary:active:not(:disabled) { background: var(--ui-primary-active) !important; }
.sc-host .btn-danger { background: var(--ui-danger) !important; border-color: var(--ui-danger) !important; color: #fff !important; }
.sc-host .btn-danger:hover:not(:disabled) { background: var(--ui-danger-hover) !important; }
.sc-host button { transition: background-color var(--ui-control-duration), color var(--ui-control-duration), border-color var(--ui-control-duration), box-shadow var(--ui-control-duration); }
.sc-host button:disabled { opacity: .45; cursor: not-allowed !important; }
.sc-host button:not(.btn-primary):not(.ui-primary):not(.btn-danger):not(.roleplay-more-dismiss):not(.ui-overlay-dismiss):hover:not(:disabled) { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--color-accent-700) 9%, transparent); }
.sc-host button:not(.btn-primary):not(.ui-primary):not(.btn-danger):not(.roleplay-more-dismiss):not(.ui-overlay-dismiss):active:not(:disabled) { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--color-accent-700) 17%, transparent); }
.sc-host .roleplay-more-dismiss { box-shadow: none; transition: none; }
.sc-host .ui-overlay-dismiss { box-shadow: none; transition: none; }
.sc-host :is(button,a,input,textarea,select,[tabindex],[contenteditable]):focus-visible { outline: 2px solid var(--color-accent-700) !important; outline-offset: 2px; }
.sc-host #opalia_chat_input_container:focus-within { border-color: var(--color-accent-700); }
.sc-host .tile-foot { min-height: 32px; }
.sc-host .dashboard-masonry-column > .tile { min-width: 0; }
.sc-host .card-tile-meta { position: absolute; inset: 9px 8px auto 8px; display: flex; flex-wrap: wrap; align-items: start; gap: 4px 8px; }
.sc-host .card-tile-status { flex: none; padding: 2px 6px; background: var(--color-neutral-200); color: var(--color-neutral-800); font-size: 10px; }
.sc-host .card-tile-date { min-width: 0; flex: 1; text-align: right; overflow-wrap: anywhere; font-size: 10px; color: var(--color-neutral-700); }
.sc-host .card-edit,.sc-host .card-delete { min-height: 36px !important; min-width: 30px; border-radius: 5px; }
.sc-host .character-card-cover-upload:not(.has-image) { width: 100%; height: min(220px, 30dvh); min-height: 160px; aspect-ratio: auto; }
.sc-host .character-card-editor-actions { display: flex; align-items: stretch; flex: none; gap: 10px; }
.sc-host .character-card-editor-actions .character-card-import { position: relative; flex: none; min-height: 0; padding: 0 7px; font-size: 10px; line-height: 1; white-space: nowrap; }
/* Keep the compact visible badge height without shrinking its touch target. */
.sc-host .character-card-import::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: max(100%, 28px); transform: translateY(-50%); }
.sc-host .dialog { max-height: calc(100dvh - 32px); overflow: auto; }
.sc-host .ui-layer { animation: op-ui-surface-in var(--ui-surface-duration) linear both !important; }
.sc-host .ui-layer-closing { animation: op-ui-surface-out var(--ui-surface-duration) linear both !important; pointer-events: none; }
.sc-host .ui-layer > [role="dialog"] { animation: none !important; }
.ui-navigation-veil { position: fixed; inset: 0; z-index: 2147483646; animation: op-ui-surface-in var(--ui-surface-duration) linear both; }
@keyframes op-ui-surface-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes op-ui-surface-out { from { opacity: var(--ui-exit-opacity, 1); } to { opacity: 0; } }
.sc-host .roleplay-toast { animation: op-ui-toast-in 180ms ease-out !important; }
@keyframes op-ui-toast-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* Interpolate surfaces; do not flash a white/black sheet over the new theme. */
.sc-host .roleplay-page, .sc-host .roleplay-page *, .sc-host .roleplay-viewport-lock,
html.roleplay-standalone, html.roleplay-standalone body { transition-property: background-color, color, border-color, box-shadow; transition-duration: var(--ui-theme-duration); transition-timing-function: linear; }
.sc-host .roleplay-page { transition: background-color var(--ui-theme-duration) linear, color var(--ui-theme-duration) linear, grid-template-columns 240ms ease !important; }
.sc-host .roleplay-page[data-theme-from]::after { content: none !important; animation: none !important; }
.sc-host #opalia_background_overlay { transition: filter var(--ui-theme-duration) linear !important; }
.sc-host #opalia_background_overlay * { transition: none !important; }
.sc-host .notification-backdrop.is-closing { animation: op-ui-surface-out var(--ui-surface-duration) linear both !important; }
.sc-host .notification-backdrop.is-closing .notification-panel { animation: none !important; }
@media (max-width: 359px) {
  .sc-host .dashboard-masonry { grid-template-columns: minmax(0, 1fr) !important; }
  .sc-host .dashboard-masonry-column { display: contents; }
  .sc-host .dashboard-masonry-column > .tile { order: 0; }
  .sc-host [data-dashboard-tile="01"] { order: 1 !important; }
  .sc-host [data-dashboard-tile="02"] { order: 2 !important; }
  .sc-host [data-dashboard-tile="03"] { order: 3 !important; }
  .sc-host [data-dashboard-tile="04"] { order: 4 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-host *, .sc-host *::before, .sc-host *::after { scroll-behavior: auto !important; }
  .sc-host .roleplay-more-menu, .sc-host .cover, .sc-host [style*="op-pulse"], .sc-host [style*="op-spin"], .sc-host [style*="op-rise"], .sc-host .notification-trigger svg { animation: none !important; }
  .sc-host .roleplay-toast { animation: none !important; transform: translateX(-50%) !important; }
  .sc-host .roleplay-page { transition: background-color var(--ui-theme-duration) linear, color var(--ui-theme-duration) linear !important; }
  .sc-host .opalia-theater-frame { transition: none !important; }
  /* Retain luminance fades intentionally; remove spatial motion, not this safeguard. */
  .sc-host .ui-layer { animation: op-ui-surface-in var(--ui-surface-duration) linear both !important; }
  .sc-host .ui-layer-closing { animation: op-ui-surface-out var(--ui-surface-duration) linear both !important; }
  .sc-host .notification-panel { animation: none !important; }
}
.archive-list-row { position: relative; isolation: isolate; }
.archive-open-button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.archive-open-button:focus-visible { outline: none; }
.archive-open-button:focus-visible::after { outline: 2px solid var(--color-accent-500); outline-offset: 2px; }
.archive-open-button:not(:disabled):hover::after { background: color-mix(in srgb, var(--color-accent-500) 5%, transparent); }
.archive-session-title { min-width: 0; padding: 0; border: 0; background: transparent; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.archive-icon-button { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--color-neutral-600); cursor: pointer; }
.archive-icon-button:not(:disabled):hover { background: color-mix(in srgb, var(--color-accent-500) 10%, transparent); color: var(--color-accent-800); }
.archive-delete-button:not(:disabled):hover { color: #b43b48; background: color-mix(in srgb, #b43b48 8%, transparent); }
.archive-icon-button:focus-visible { outline: 2px solid var(--color-accent-500); outline-offset: 2px; }
.archive-icon-button:disabled, .archive-open-button:disabled { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .roleplay-world-orbit::before, .roleplay-world-orbit::after, .roleplay-world-orbit span { animation: none; } }