/* Site-wide polish: a clearer city image with readable foreground surfaces. */
body, body.creators-page, body.guide-page { background-image: url('/city-background-shaheen.png'); background-size: cover; background-position: center; background-attachment: fixed; animation: none; }
body::before { background: linear-gradient(180deg, #07111f70 0%, #07111fb8 55%, #07111fd9 100%); pointer-events: none; }
:where(.staff-header, .guide-header, .section-header, .page-header) { text-wrap: balance; }
:where(.staff-card, .partner-card, .poll-card, .review-card, .store-card, .product-card) { border-radius: 18px; border-color: #a8cce430; box-shadow: 0 10px 28px #0003; }
:where(.staff-title, .section-title, .page-title) { text-shadow: 0 2px 12px #0006; }
:where(.staff-subtitle, .section-subtitle, .page-subtitle) { color: #d0dce9; }
.btn, .creator-link-btn, .site-discord-link { transition: background-color .2s, border-color .2s, transform .2s; }
@media (hover: hover) { .btn:hover, .site-discord-link:hover { transform: translateY(-2px); } }
/* Assistant */
#chatbot { font-family: inherit; direction: rtl; }
#chatbot .chatbot-bubble { position: fixed; inset: auto auto 24px 24px; width: 58px; height: 58px; padding: 0; border-radius: 18px; background: linear-gradient(140deg, #30cce7, #057d9d); border: 1px solid #b1f4ff88; color: #fff; box-shadow: 0 8px 28px #0005; cursor: pointer; z-index: 1200; }
#chatbot .chatbot-window { position: fixed; inset: auto auto 24px 24px; display: none; width: min(400px, calc(100vw - 32px)); height: min(610px, calc(100dvh - 110px)); max-height: calc(100dvh - 110px); max-width: calc(100vw - 32px); flex-direction: column; margin: 0; padding: 0; border: 1px solid #83cfe64d; border-radius: 22px; background: #0c192a; box-shadow: 0 24px 80px #0008; overflow: hidden; z-index: 1201; transform: none; }
#chatbot .chatbot-window.open:not([hidden]) { display: flex; animation: assistantEnter .22s ease-out; }
#chatbot .chatbot-window[hidden] { display: none; }
#chatbot .chatbot-header { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; padding: 18px; background: #142b40; border-bottom: 1px solid #a8cce41a; gap: 8px; }
#chatbot .chatbot-header-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
#chatbot .chatbot-avatar { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #67e8f94a; border-radius: 12px; background: #00d4ff12; color: #67e8f9; flex-shrink: 0; }
#chatbot .chatbot-header-title { font-size: 15px; font-weight: 700; color: #f0f7ff; }
#chatbot .chatbot-header-status { font-size: 11px; color: #a5c2d5; margin-top: 2px; }
.assistant-tools { display: flex; gap: 3px; }
.assistant-tools button { width: 36px; height: 38px; border: 0; border-radius: 9px; background: transparent; color: #b6cfdf; cursor: pointer; }
.assistant-tools button:hover { background: #ffffff0c; color: #fff; }
.assistant-context { flex: 0 0 auto; padding: 9px 18px; font-size: 11px; color: #9ab9ce; background: #091522; border-bottom: 1px solid #ffffff0a; }
#chatbot .chatbot-messages { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; gap: 14px; padding: 18px 14px; }
#chatbot .chatbot-message { display: flex; margin: 0; max-width: 100%; animation: assistantEnter .18s ease-out; }
#chatbot .chatbot-message-bot { align-self: flex-start; }
#chatbot .chatbot-message-user { align-self: flex-end; }
#chatbot .chatbot-message-content { max-width: 100%; padding: 12px 14px; border-radius: 14px; background: #1a2c40; color: #d4e2ef; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.85; font-size: 13px; border: 1px solid #b4d3ee0d; }
#chatbot .chatbot-message-user .chatbot-message-content { background: #10546a; color: #effbff; border-color: #42cce32e; }
#chatbot .chatbot-link { color: #7ce2f3; text-decoration: underline; text-underline-offset: 3px; }
#chatbot .chatbot-suggestions { display: flex; flex: 0 0 auto; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid #ffffff0a; background: transparent; }
#chatbot .chatbot-suggestion { font: inherit; font-size: 11px; min-height: 34px; padding: 6px 10px; color: #bddeeb; border: 1px solid #82c4df2e; border-radius: 8px; background: #152a3d; cursor: pointer; }
#chatbot .chatbot-input-area { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; padding: 10px 14px; margin: 0; background: #0c192a; border-top: 1px solid #ffffff0a; }
#chatbot .chatbot-input { flex: 1; min-width: 0; width: auto; min-height: 44px; padding: 10px 12px; border: 1px solid #a8cce42b; border-radius: 11px; background: #071321; color: #edf6ff; font-size: 16px; }
#chatbot .chatbot-send { width: 44px; height: 44px; min-width: 44px; display: grid; place-items: center; border: 1px solid #67e8f947; border-radius: 11px; background: #1684a0; color: #fff; cursor: pointer; }
#chatbot .chatbot-send:disabled { opacity: .45; cursor: wait; }
.assistant-note { flex: 0 0 auto; font-size: 10px; text-align: center; color: #8ba4b9; margin: 0; padding: 0 10px 10px; }
.assistant-typing { font-size: 12px; color: #8bcbdc; padding: 0 8px; }
.assistant-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes assistantEnter { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 600px) {
    body, body.creators-page, body.guide-page { background-attachment: scroll; }
    #chatbot .chatbot-bubble { inset: auto auto 18px 16px; width: 52px; height: 52px; border-radius: 16px; }
    #chatbot .chatbot-window { inset: auto auto 12px 12px; width: calc(100vw - 24px); max-width: calc(100vw - 24px); height: min(580px, calc(100dvh - 96px)); max-height: calc(100dvh - 96px); border-radius: 18px; }
    #chatbot .chatbot-header { padding: 12px; }
    .assistant-tools button { width: 38px; height: 44px; }
    #chatbot .chatbot-suggestion { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { #chatbot *, .btn { animation: none !important; transition: none !important; } }
/* Shared public-page rhythm, without changing forms or administration controls. */
.public-page :is(.staff-section, .rules-section, .store-section, .content-section) > .container { max-width: 1240px; width: 100%; }
.public-page :is(.section-header, .staff-header, .rules-header) { margin-bottom: 36px; }
.public-page :is(.section-title, .staff-title, .rules-title) { font-size: clamp(28px, 4vw, 42px); color: #f1f7ff; line-height: 1.5; }
.public-page :is(.section-subtitle, .staff-subtitle, .rules-subtitle) { font-size: 16px; color: #d1deea; line-height: 1.9; }
.public-page :is(.partner-card, .poll-card, .rule-card, .server-faq, .store-card) { background: linear-gradient(145deg, #15293eed, #0b192bed); border: 1px solid #92b9d52b; border-radius: 18px; box-shadow: 0 10px 30px #0003; }
.public-page .rule-card-header { background: #14283ce8; }
.public-page .rule-card-header:hover { background: #19354ce8; }
.public-page :is(.partner-description, .poll-description, .card-description) { color: #c1d1e1; line-height: 1.9; }
.public-page .staff-avatar img { border-width: 3px; box-shadow: 0 0 0 6px #67e8f90a; }
.public-page .staff-name { text-shadow: none; }
.public-page .staff-grid { gap: 22px; }
.public-page :is(.review-username, .partner-name, .poll-title) { overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .public-page :is(.staff-section, .rules-section, .store-section, .content-section) > .container { padding-inline: 18px; }
    .public-page :is(.section-header, .staff-header, .rules-header) { margin-bottom: 26px; }
    .public-page :is(.partner-card, .poll-card) { padding: 22px 18px; }
}
/* Move only the scenery layer so content and page layout remain steady. */
body::before {
    inset: -3%; width: 106%; height: 106%;
    background-image: linear-gradient(180deg, #07111f70 0%, #07111fb8 55%, #07111fd9 100%), url('/city-background-shaheen.png');
    background-size: cover; background-position: center;
    transform-origin: center; animation: legacyScenery 18s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes legacyScenery {
    from { transform: translate3d(-2%, -1%, 0) scale(1.07); }
    to { transform: translate3d(2%, 1%, 0) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none !important; transform: none; will-change: auto; }
    }
.assistant-modes { display: flex; gap: 8px; padding: 9px 14px; background: #0e2032; flex: 0 0 auto; border-bottom: 1px solid #ffffff0a; }
.assistant-modes button { flex: 1; min-height: 36px; padding: 6px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #91aebf; font: inherit; font-size: 12px; cursor: pointer; }
.assistant-modes button[aria-pressed="true"] { color: #b7f1fa; border-color: #67e8f938; background: #00d4ff12; }
.rule-card { scroll-margin-top: 108px; }
.rule-card:target { border-color: #67e8f9; box-shadow: 0 0 0 2px #67e8f91c; }
.rule-card-header[role="button"]:focus-visible { outline: 3px solid #67e8f9; outline-offset: -4px; }
@media (max-width: 600px) { .assistant-modes button { min-height: 40px; } }
/* Resize immediately when switching device sizes; animate only entrance. */
#chatbot .chatbot-window { transition: none; }
/* A single visible scenery layer; no static duplicate or saved pause state. */
body, body.creators-page, body.guide-page { isolation: isolate; background-image: none; background-color: #07111f; }
body::before { position: fixed; z-index: -1; pointer-events: none; }
.site-footer.footer { padding: 24px 0 16px; }
.site-footer-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding-bottom: 18px; }
.site-footer-brand { font-size: 20px; margin-bottom: 4px; }
.site-footer-about { max-width: 600px; }
.site-footer-about p { font-size: 13px; }
.site-footer .site-discord-link { margin-top: 0; min-height: 42px; }
.site-footer-legal { padding-top: 12px; }
.site-footer-legal p { font-size: 12px; }
@media (max-width: 768px) {
    .site-footer-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
    .site-footer-about { grid-column: auto; }
}
@media (max-width: 480px) {
    .site-footer.footer { padding: 22px 0 16px; }
    .site-footer-grid { grid-template-columns: 1fr; gap: 14px; padding-bottom: 16px; }
    .site-footer-legal { gap: 4px; }
}