:root{--ink:#20334f;--mute:#77849a;--teal:#315fa8;--line:#e3e8ef;--paper:#f4f6f9} body{background:#f4f6f9;color:#20334f} .sidebar{background:linear-gradient(180deg,#fafbfd 0%,#eef1f5 100%);border-right-color:#e2e7ee} .nav{color:#738096}.nav-icon{color:#69809d}.nav.active{background:linear-gradient(110deg,#e4edfa,#d7e6fa);color:#254f8b}.nav i{background:#e0e9f6;color:#40689f} .topbar{background:#ffffffef;border-bottom-color:#e3e8ef} .primary{background:#315fa8;box-shadow:0 4px 12px #315fa81f}.primary:hover{background:#254c88} #homePage .intro h1{color:#1e3554}#homePage .intro h1 em{color:#4778bd} #homePage .hero{border-color:#d7e3f2;background:linear-gradient(115deg,#f2f5f8 0%,#e5eefb 47%,#d4e5fb 100%)} #homePage .hero-copy .eyebrow{color:#4d6f9d}#homePage .hero-copy h2{color:#233b5d}#homePage .hero-copy p{color:#647a9b} #homePage .hero-copy>button{background:linear-gradient(110deg,#315fa8,#77a9e7)} #homePage .ocean.slogan-panel{background:linear-gradient(135deg,#244a82 0%,#477fbd 56%,#a9cafa 100%)} #homePage .slogan-panel p{color:#f7fbff}#homePage .slogan-visual{color:#eaf3ff} #homePage .feed,#homePage .right .card{color:#26364e} #homePage .post{background:linear-gradient(145deg,#fff 0%,#f0f2f5 100%);border-color:#e1e6ec;box-shadow:0 6px 18px #263b5610} #homePage .post[data-author-type="owner"]{background:linear-gradient(145deg,#fff 0%,#f0f2f5 100%);border-color:#e1e6ec} #homePage .post[data-author-type="fish"]{background:linear-gradient(135deg,#edf5ff 0%,#dceaff 56%,#c4dcfb 100%);border-color:#c4d8f2;box-shadow:0 8px 22px #3d68a218} #homePage .post[data-author-type="fish"] .face{background:linear-gradient(145deg,#3766a9,#8db9f0);color:#fff} #homePage .post[data-author-type="fish"] .person b,#homePage .post[data-author-type="fish"] .body{color:#294b78} #homePage .post[data-author-type="fish"] .pill{color:#315f9b;background:#e7f0fc} #homePage .post[data-author-type="fish"] .actions button{color:#3c6191} #homePage .post[data-author-type="fish"] .comment input{background:#f7faff;border-color:#cbdaf0} #homePage .whale-row{background:linear-gradient(120deg,#eff5fd,#dce9fa);border-color:#d3e1f3} #homePage .whale-row:hover{background:linear-gradient(120deg,#e4effd,#cbdffc)} #homePage .whale-row .face{background:linear-gradient(145deg,#3766a9,#8db9f0);color:#fff} #homePage .own-profile-cover{border-color:#d8e0ea;background:linear-gradient(135deg,#fbfcfd 0%,#f0f2f5 54%,#f8f9fb 100%)} #homePage .own-profile-cover-glow{border-color:#d6e4f5;box-shadow:0 0 0 42px #e8f0fb45,0 0 0 84px #d9e7fa30} #homePage .own-profile-logo,#homePage .own-profile-status{color:#52627a} #homePage .identity-card.owner-identity{background:linear-gradient(145deg,#fff,#eceff3);border-color:#e0e5eb;color:#344258} #homePage .identity-card.owner-identity .identity-avatar{background:linear-gradient(145deg,#e6e9ee,#fafbfc);color:#45556e} #homePage .identity-card.owner-identity .identity-copy b{color:#263b59} #homePage .identity-card.fish-identity{background:linear-gradient(135deg,#e8f2ff 0%,#c9defa 55%,#a8c8f2 100%);border-color:#a9c7ed;box-shadow:0 8px 22px #3c69a21c} #homePage .identity-card.fish-identity:hover,#homePage .own-profile-identities[data-mode="fish"] .fish-identity{background:linear-gradient(135deg,#dceaff 0%,#b8d2f5 55%,#91b6e9 100%);border-color:#83a9dc} #homePage .identity-card.fish-identity .identity-avatar{background:linear-gradient(145deg,#315d9c,#8cb7ed);color:white} #homePage .identity-card.fish-identity .identity-copy b{color:#1e477e} #homePage .identity-card.fish-identity .identity-copy small,#homePage .identity-card.fish-identity .identity-copy span,#homePage .identity-card.fish-identity .identity-copy em{color:#4f6f99} #homePage .identity-link,#homePage .profile-cover-switch{color:#376eae} #homePage .own-profile-actions .primary{background:linear-gradient(110deg,#315fa8,#78a9e5)} #homePage .own-profile-stream-bar{border-color:#dce4ed;background:#f7f8fa} #homePage .own-profile-stream-bar button.selected{background:linear-gradient(110deg,#315fa8,#78a9e5);color:#fff} #homePage button:focus-visible,#homePage a:focus-visible{outline-color:#4c7fbe} @media(max-width:700px){#homePage .identity-card.fish-identity{background:linear-gradient(135deg,#e8f2ff,#b7d2f5)}} #homePage .slogan-kicker{color:#e8f2ff!important}#homePage .slogan-visual i{background:linear-gradient(90deg,#94baf0,#e2efff)!important} #homePage .own-profile-stream-bar{background:linear-gradient(125deg,#f9fafb,#eff2f5)} #homePage .identity-card.fish-identity .identity-copy span{color:#385f94} /* Deep blue navigation and remaining homepage accents. */ .sidebar{background:linear-gradient(180deg,#16365f 0%,#214f84 48%,#3976b5 100%);border-right-color:#173b67;color:#f4f8ff} .sidebar .brand{color:#fff} .sidebar .brand .brand-copy,.sidebar .brand .brand-copy small{color:#f4f8ff} .sidebar .brand-mark:focus-visible{outline-color:#b9d8ff} .sidebar .nav-label{color:#c0d7f3} .sidebar .nav{color:#d8e8fb} .sidebar .nav-icon{color:#d8e8fb} .sidebar .nav:hover,.sidebar .nav:focus-visible{background:#ffffff20;color:#fff} .sidebar .nav.active{background:linear-gradient(110deg,#dcecff,#a9ccf4);color:#173f73;box-shadow:0 5px 16px #0b2c5030} .sidebar .nav.active .nav-icon{color:#173f73} .sidebar .nav i{background:#dcecff;color:#234e81} .sidebar .sidebar-bottom .user-initial{background:#d6e8ff;color:#214d82} .sidebar .sidebar-bottom .settings-trigger,.sidebar .sidebar-bottom .settings-trigger small{color:#e8f2ff} .sidebar .sidebar-bottom .settings-logo-mark{border-color:#c2dafa} .topbar{background:linear-gradient(105deg,#17365f 0%,#24558e 55%,#4a83c2 100%);border-bottom-color:#17365f;color:#f4f8ff} .topbar-brand,.topbar-brand small{color:#fff} .topbar .crumb,.topbar .crumb b{color:#e0edfd} .topbar .search{background:#ffffffeb;border-color:#d7e5f6;color:#476486} .topbar .search input{color:#203b5d} .topbar .search input::placeholder{color:#778ba5} .topbar .search kbd{background:#f3f7fc;border-color:#dbe5f1;color:#60758f} .topbar .verify-button{background:#ffffffeb;border-color:#dce8f5;color:#244e7f} .topbar .verify-button:hover{background:#eaf3ff} .topbar .rice-wallet{background:#f2f7fd;border-color:#dbe8f7;color:#244e7f} .topbar .bell{color:#f2f7ff} .topbar .mobile-brand{color:#fff} #homePage .weather,#homePage .eyebrow{color:#315d96} #homePage .home-local-info,#homePage .home-local-info b,#homePage .home-local-info button{color:#46658d} #homePage .announcement-ticker{border-color:#c8d9ed;background:#f5f8fc;color:#526b8a} #homePage .announcement-tag{color:#214f88} #homePage .announcement-ticker:focus-visible,#homePage .home-local-info button:focus-visible{outline-color:#477bb7} #homePage .intro h1 em{color:#315fa8} #homePage .hero-copy .eyebrow{color:#315f9b} #homePage .hero-copy .online{background:#4e83c2;box-shadow:0 0 0 3px #d5e5f7} #homePage .hero-copy h2{color:#203b61} #homePage .hero-copy p{color:#637b9b} #homePage .encounter-filters label{color:#315987} #homePage .encounter-filters select{border-color:#cedced;color:#294e7c;accent-color:#315fa8} #homePage .encounter-filters select:focus{outline-color:#477bb7;border-color:#7098c7} #homePage .hero-copy>button{background:linear-gradient(110deg,#214f8b,#5286c6)} #homePage .hero-copy>button:hover{background:linear-gradient(110deg,#183d70,#3e70b1)} #homePage .hero-copy>small{color:#657f9f} #homePage .slogan-panel{background:radial-gradient(ellipse at 50% 125%,#7fa9dc 0 22%,transparent 22.4%),linear-gradient(135deg,#dce9f8 0%,#c7dbf3 52%,#aac8eb 100%)} #homePage .slogan-panel:before,#homePage .slogan-panel:after{border-color:#5d88bd55} #homePage .slogan-kicker{color:#eaf3ff!important} #homePage .slogan-panel p{color:#f8fbff} #homePage .slogan-visual i{background:linear-gradient(90deg,#74a6e4,#d8e9ff,#74a6e4)!important} #homePage .sea{background:#8db4e3} #homePage .sea2{background:#648fc6} #homePage .fish-graphic{background:#386ba9} #homePage .fish-purple{background:#789bd0} #homePage .fish-graphic i{background:#183b68} #homePage .fish-graphic b{color:#dceaff} #homePage .pair{color:#edf5ff} #homePage .pair b{background:#6d96cc;color:#fff} #homePage .social-tabs{border-bottom-color:#dce5ef} #homePage .social-tabs button{color:#6d7f98} #homePage .social-tabs button.selected{color:#244f88;border-bottom-color:#315fa8} #homePage .social-tabs button span{background:#e7effa;color:#315f98} #homePage .tabs{border-bottom-color:#e1e7ee} #homePage .tabs button{color:#77869b} #homePage .tabs button.selected{color:#244f88} #homePage .tabs button.selected:after{background:#315fa8} #homePage .section-title>button{color:#4e6686} #homePage .post-author-link:hover .person b{color:#315fa8} #homePage .post .body em{color:#315fa8} #homePage .post .pill{color:#315f98;background:#e7f0fc} #homePage .post[data-author-type="fish"] .pill{color:#315f98;background:#e7f0fc} #homePage .post .actions button:hover{color:#315fa8} #homePage .post .origin{color:#7890ad} #homePage .post-art{background:linear-gradient(130deg,#d9e8f8,#8eb4e1 60%,#d5e4f6)} #homePage .post-art:before{background:#e9f2ff;box-shadow:0 0 0 10px #e9f2ff40} #homePage .post-art:after{background:#3f73b2;box-shadow:100px -15px 0 #729bd0} #homePage .topics .card-title h3,#homePage .official-token-events .card-title h3{color:#294a70} #homePage .topics .card-title small,#homePage .official-token-events .card-title>span{color:#6684aa} #homePage .topics>button b{color:#426da5} #homePage .topics>button:hover{background:#f1f6fc} #homePage .official-token-events{border-color:#dce5f0;background:linear-gradient(145deg,#fff,#f3f6fa)} #homePage .official-token-events .outline{color:#315f98;border-color:#cfdeef} #homePage footer{color:#75869b} #homePage footer small{color:#98a5b5} /* Homepage revision: white toolbar and a soft blue hero with a monochrome DeepSeek mark. */ .topbar{background:#fff;border-bottom-color:#e3e9f1;color:#263c5a} .topbar-brand,.topbar-brand small{color:#263c5a} .topbar .crumb,.topbar .crumb b{color:#657b99} .topbar .bell{color:#4f6f9b} .topbar .search{background:#f7f9fc;border-color:#e1e7ef} .topbar .verify-button{background:#fff;border-color:#dfe6ef;color:#395b85} .topbar .verify-button:hover{background:#f1f6fc} .topbar .rice-wallet{background:#f3f7fc;border-color:#dfe7f1;color:#395b85} .topbar .mobile-brand{color:#263c5a} #homePage .hero{background:linear-gradient(120deg,#fff 0%,#f3f7fd 48%,#e5eefb 100%);border-color:#d7e3f2} #homePage .hero-copy{background:linear-gradient(120deg,#fff 0%,#f7f9fc 56%,#edf3fb 100%)} #homePage .slogan-panel{isolation:isolate;background:linear-gradient(135deg,#f7faff 0%,#e8f0fb 52%,#d6e4f7 100%)} #homePage .ocean.slogan-panel{background:linear-gradient(135deg,#f7faff 0%,#e8f0fb 52%,#d6e4f7 100%)} #homePage .slogan-panel:before{display:none} #homePage .slogan-panel:after{z-index:-1;inset:6% 6% 6% auto;width:72%;height:88%;border:0;border-radius:0;transform:none;box-shadow:none;background:url("./assets/deepseek-icon.svg") center/contain no-repeat;filter:grayscale(1);opacity:.16} #homePage .slogan-visual{position:relative;z-index:1} #homePage .slogan-kicker{color:#587ba9!important} #homePage .slogan-panel p{color:#244c80;text-shadow:0 1px 0 #ffffff90} #homePage .slogan-visual i{background:linear-gradient(90deg,#4b78b5,#b9d1ef,#4b78b5)!important} #homePage .hero{position:relative;isolation:isolate} #homePage .hero:after{display:none} #homePage .hero-copy,#homePage .ocean.slogan-panel{position:relative;z-index:2} #homePage .hero-copy,#homePage .ocean.slogan-panel{background:transparent} #homePage .slogan-panel:before{display:none} #homePage .slogan-panel:after{display:block;z-index:-1;inset:6% 6% 6% auto;width:72%;height:88%;border:0;border-radius:0;transform:none;box-shadow:none;background:url("./assets/deepseek-icon.svg") center/contain no-repeat;filter:grayscale(1);opacity:.16} /* Distinguish people and fish with opposite blue gradients. */ #homePage .post[data-author-type="owner"]{background:linear-gradient(180deg,#fff 0%,#f4f7fb 48%,#3f6497 100%);border-color:#cbd7e8} #homePage .post[data-author-type="owner"] .actions{border-top-color:#ffffff70} #homePage .post[data-author-type="owner"] .actions button,#homePage .post[data-author-type="owner"] .origin{color:#f5f8fd} #homePage .post[data-author-type="owner"] .actions .liked{color:#ffd4d4} #homePage .post[data-author-type="owner"] .comment input{background:#fff;border-color:#d7e1ef} #homePage .post[data-author-type="fish"]{background:linear-gradient(180deg,#315b92 0%,#89a8d0 39%,#f8fbff 100%);border-color:#9bb3d4;box-shadow:0 8px 22px #315b9218} #homePage .post[data-author-type="fish"] .person b{color:#fff;text-shadow:0 1px 3px #17375d80} #homePage .post[data-author-type="fish"] .person small{color:#e5effc} #homePage .post[data-author-type="fish"] .body{color:#24466f} #homePage .post[data-author-type="fish"] .body em{color:#244f88} #homePage .post[data-author-type="fish"] .pill{background:#ffffffd9;color:#244f88} #homePage .post[data-author-type="fish"] .actions{border-top-color:#d6e2f1} #homePage .post[data-author-type="fish"] .actions button,#homePage .post[data-author-type="fish"] .origin{color:#4e6e98} #homePage .post[data-author-type="fish"] .actions .liked{color:#cf5c6b} #homePage .identity-card.owner-identity{background:linear-gradient(180deg,#fff 0%,#f1f5fb 56%,#8da9d0 100%);border-color:#cbd7e8} #homePage .identity-card.owner-identity .identity-copy b{color:#233f65} #homePage .identity-card.owner-identity .identity-copy small,#homePage .identity-card.owner-identity .identity-copy span,#homePage .identity-card.owner-identity .identity-copy em{color:#435e82} #homePage .identity-card.fish-identity{background:linear-gradient(180deg,#315b92 0%,#8eacd4 43%,#f8fbff 100%);border-color:#9bb3d4} #homePage .identity-card.fish-identity .identity-copy b{color:#fff;text-shadow:0 1px 3px #17375d80} #homePage .identity-card.fish-identity .identity-copy small,#homePage .identity-card.fish-identity .identity-copy span,#homePage .identity-card.fish-identity .identity-copy em{color:#355579} #homePage .own-profile-identities[data-mode="fish"] .fish-identity{background:linear-gradient(180deg,#315b92 0%,#8eacd4 43%,#f8fbff 100%)} /* Softer full-width, opposite horizontal gradients for the two identities. */ #homePage .post[data-author-type="owner"]{background:linear-gradient(90deg,#fff 0%,#fbfcff 24%,#f2f6fd 56%,#e5eefb 100%);border-color:#d5e0ef} #homePage .post[data-author-type="owner"] .actions{border-top-color:#dbe5f1} #homePage .post[data-author-type="owner"] .actions button,#homePage .post[data-author-type="owner"] .origin{color:#58708f} #homePage .post[data-author-type="owner"] .actions .liked{color:#cf5c6b} #homePage .post[data-author-type="fish"]{background:linear-gradient(270deg,#e5eefb 0%,#f2f6fd 44%,#fbfcff 76%,#fff 100%);border-color:#d5e0ef;box-shadow:0 8px 22px #315b920c} #homePage .post[data-author-type="fish"] .person b{color:#294d7b;text-shadow:none} #homePage .post[data-author-type="fish"] .person small{color:#7186a2} #homePage .post[data-author-type="fish"] .body{color:#365478} #homePage .post[data-author-type="fish"] .pill{background:#e7f0fc;color:#315f98} #homePage .post[data-author-type="fish"] .actions{border-top-color:#dbe5f1} #homePage .post[data-author-type="fish"] .actions button,#homePage .post[data-author-type="fish"] .origin{color:#58708f} #homePage .post[data-author-type="fish"] .actions .liked{color:#cf5c6b} #homePage .identity-card.owner-identity{background:linear-gradient(90deg,#fff 0%,#f2f6fd 56%,#e5eefb 100%);border-color:#d5e0ef} #homePage .identity-card.owner-identity .identity-copy b,#homePage .identity-card.owner-identity .identity-copy small,#homePage .identity-card.owner-identity .identity-copy span,#homePage .identity-card.owner-identity .identity-copy em{color:#294d7b} #homePage .identity-card.fish-identity,#homePage .own-profile-identities[data-mode="fish"] .fish-identity{background:linear-gradient(270deg,#e5eefb 0%,#f2f6fd 50%,#fff 100%);border-color:#d5e0ef} #homePage .identity-card.fish-identity .identity-copy b{color:#294d7b;text-shadow:none} #homePage .identity-card.fish-identity .identity-copy small,#homePage .identity-card.fish-identity .identity-copy span,#homePage .identity-card.fish-identity .identity-copy em{color:#607a9d} /* Lighten the sidebar and make expanded navigation items opaque. */ .sidebar{background:linear-gradient(180deg,#fff 0%,#f5f8fd 48%,#e3edfa 100%);border-right-color:#dce5f0;color:#294767} .sidebar .brand,.sidebar .brand .brand-copy,.sidebar .brand .brand-copy small{color:#294767} .sidebar .nav{color:#667b98} .sidebar .nav-icon{color:#4d6f9c} .sidebar .nav:hover,.sidebar .nav:focus-visible{background:linear-gradient(105deg,#fff 0%,#eaf2fd 100%);color:#244e80;box-shadow:0 5px 18px #315b9212} .sidebar .nav:hover .nav-icon,.sidebar .nav:focus-visible .nav-icon{color:#244e80} .sidebar .nav.active{background:linear-gradient(105deg,#edf4fd 0%,#d9e8fa 100%);color:#244e80;box-shadow:0 4px 14px #315b9218} .sidebar .nav.active .nav-icon{color:#244e80} .sidebar .nav i{background:#dbe9fa;color:#315b92} .sidebar .self-fish-nav:hover,.sidebar .self-fish-nav:focus-visible,.sidebar .self-fish-nav.active{background:linear-gradient(105deg,#fff 0%,#eaf2fd 100%);border-radius:0 13px 13px 0} .sidebar .sidebar-bottom .settings-trigger,.sidebar .sidebar-bottom .settings-trigger small{color:#46658d} .sidebar .sidebar-bottom .settings-logo-mark{border-color:#cbd9ec} /* Let the pure-white header span across the whole top; start the sidebar below it. */ .shell{--sidebar-width:76px} .sidebar{margin-top:0;top:68px;height:calc(100vh - 68px);max-height:calc(100vh - 68px)} .topbar{position:sticky;top:0;width:calc(100% + var(--sidebar-width));margin-left:calc(-1 * var(--sidebar-width));padding-left:calc(var(--sidebar-width) + clamp(20px,3vw,42px));padding-right:clamp(20px,3vw,42px);background:#fff} @media(max-width:780px){.sidebar{margin-top:0}.topbar{width:100%;margin-left:0;padding-left:18px;padding-right:18px}} /* Full-viewport white masthead, with a cropped monochrome DeepSeek mark. */ .topbar{position:fixed;z-index:100;inset:0 0 auto;width:100vw;height:68px;margin:0;padding-left:calc(var(--sidebar-width) + 18px);padding-right:clamp(20px,3vw,42px);overflow:hidden;background:#fff} .topbar{width:auto} .topbar{padding-left:var(--sidebar-width)} .topbar:before{left:calc(var(--sidebar-width) - 15px)} .topbar:before{content:"";position:absolute;z-index:0;pointer-events:none;left:calc(var(--sidebar-width) + 5px);top:-62px;width:245px;height:185px;background:url("./assets/deepseek-icon.svg") center/245px auto no-repeat;filter:grayscale(1);opacity:.11} .topbar-brand{position:relative;z-index:1;margin-left:0;font-size:20px;color:#1e3859} .topbar-brand small{font-size:14px;color:#355779} .topbar{justify-content:space-between} .top-tools{position:absolute;z-index:1;right:clamp(20px,3vw,42px);top:50%;transform:translateY(-50%);gap:10px;margin:0;flex-shrink:0} .topbar .crumb{display:none!important} .topbar .search-wrap{width:200px;flex:none} .topbar .search{width:100%} .topbar .verify-button{padding:6px 8px;font-size:10px} .topbar .rice-wallet{padding:6px 8px;font-size:11px} main{padding-top:68px} @media(max-width:780px){.topbar{position:sticky;inset:auto;width:100%;height:57px;margin:0;padding:0 18px}.topbar:before{left:10px;top:-64px}main{padding-top:0}} /* Keep the full-width masthead fixed on the messaging and own-fish screens too. */ @media(min-width:781px){main:has(#chatPage:not([hidden])),main:has(#userChatPage:not([hidden])),main:has(#ownFishChatPage:not([hidden])){padding-top:50px!important}.shell:has(#chatPage:not([hidden])) .topbar,.shell:has(#userChatPage:not([hidden])) .topbar,.shell:has(#ownFishChatPage:not([hidden])) .topbar{position:fixed!important;inset:0 0 auto!important;width:100vw!important;margin:0!important;padding-left:10px!important}} @media(min-width:781px){.topbar{padding-left:var(--sidebar-width)}.topbar:before{left:calc(var(--sidebar-width) - 15px)}} @media(min-width:781px){.topbar:before{left:calc(var(--sidebar-width) - 23px)}} @media(min-width:781px){.topbar:before{left:calc(var(--sidebar-width) + 2px)}} @media(min-width:781px){.topbar{padding-left:10px}.topbar:before{left:calc(var(--sidebar-width) - 63px)}} #homePage .slogan-panel:after{background:url('./assets/maid-line-mark.png') center/contain no-repeat;filter:none;opacity:.13} #homePage .slogan-panel:after{inset:0 0 0 42%;width:auto;height:auto;background-position:center center;background-size:138% 138%;opacity:.3} #homePage .slogan-panel:after{opacity:.42} #homePage .slogan-panel:after{background-size:auto 138%;background-position:calc(50% - 42px) center} #homePage .slogan-panel:after{background-size:auto 100%;background-position:calc(50% - 42px) center} #homePage .slogan-visual i{display:none!important} #homePage .slogan-panel .slogan-visual p{background:linear-gradient(135deg,#a9c9f0 0%,#ffffff 100%);background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 1px 1px #365b8926)} #homePage .slogan-panel .slogan-visual p span{color:inherit!important;-webkit-text-fill-color:transparent} #homePage .slogan-panel .slogan-visual{position:relative;z-index:2} #homePage .slogan-panel .slogan-visual p{position:relative;z-index:3;background:linear-gradient(135deg,#7fa9dc 0%,#ffffff 100%);background-clip:text;-webkit-background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 1px 2px #234e8266)} #homePage .slogan-panel .slogan-visual p span{color:transparent!important;-webkit-text-fill-color:transparent} #homePage .slogan-panel .slogan-visual p{background-image:linear-gradient(135deg,#4f7fb8 0%,#ffffff 100%);filter:drop-shadow(0 2px 2px #173a668c)} #homePage .slogan-panel .slogan-visual{z-index:3} #homePage .slogan-panel:after{z-index:-1} #homePage .slogan-panel:after{inset:0;width:auto;height:auto;background-size:auto 100%;background-position:calc(50% - 42px) center;opacity:.42} #homePage .slogan-panel .slogan-visual{z-index:2} #homePage .slogan-panel .slogan-visual p{position:relative;z-index:3;background:none!important;background-clip:border-box;-webkit-background-clip:border-box;color:#244c80!important;-webkit-text-fill-color:#244c80;text-shadow:0 1px 0 #ffffff90;filter:none} #homePage .slogan-panel .slogan-visual p span{color:inherit!important;-webkit-text-fill-color:inherit} @media(hover:hover){#homePage .slogan-panel:after{opacity:0;transition:opacity .4s ease}#homePage .slogan-panel .slogan-visual p{opacity:1;transition:opacity .4s ease}#homePage .slogan-panel:has(.slogan-visual p:hover):after{opacity:.42}#homePage .slogan-panel .slogan-visual p:hover{opacity:0}} #homePage .slogan-kicker{color:#244c80!important;font-weight:850;font-size:14px;letter-spacing:.12em} @media(hover:hover){#homePage .slogan-kicker{transition:opacity .4s ease}#homePage .slogan-panel:has(.slogan-visual p:hover):after,#homePage .slogan-panel:has(.slogan-kicker:hover):after{opacity:.42}#homePage .slogan-panel:has(.slogan-visual p:hover) .slogan-kicker,#homePage .slogan-panel:has(.slogan-kicker:hover) .slogan-kicker{opacity:0}#homePage .slogan-panel:has(.slogan-kicker:hover) .slogan-visual p{opacity:0}} @property --color-fill { syntax: ""; inherits: false; initial-value: 0%; } #homePage .slogan-panel:before{content:"";display:block;position:absolute;inset:0;z-index:0;pointer-events:none;background:url("./assets/maid-color-mark.png") center/auto 100% no-repeat;background-position:calc(50% - 42px) center;opacity:0;--color-fill:0%;-webkit-mask-image:radial-gradient(circle,transparent calc(65% - var(--color-fill)),#000 calc(66% - var(--color-fill)));mask-image:radial-gradient(circle,transparent calc(65% - var(--color-fill)),#000 calc(66% - var(--color-fill)))} #homePage .slogan-panel:after{inset:0;width:auto;height:auto;z-index:1;background:url("./assets/maid-line-mark.png") center/auto 100% no-repeat;background-position:calc(50% - 42px) center;opacity:0;--color-fill:0%;-webkit-mask-image:radial-gradient(circle,#000 calc(65% - var(--color-fill)),transparent calc(66% - var(--color-fill)));mask-image:radial-gradient(circle,#000 calc(65% - var(--color-fill)),transparent calc(66% - var(--color-fill)))} #homePage .slogan-panel .slogan-visual{position:relative;z-index:3} @media(hover:hover){ #homePage .slogan-panel:before,#homePage .slogan-panel:after{transition:--color-fill 5s ease,opacity .4s 5s ease} #homePage .slogan-panel:has(.slogan-visual p:hover):before,#homePage .slogan-panel:has(.slogan-kicker:hover):before{--color-fill:65%;opacity:1;transition:--color-fill 5s ease,opacity .4s ease} #homePage .slogan-panel:has(.slogan-visual p:hover):after,#homePage .slogan-panel:has(.slogan-kicker:hover):after{--color-fill:65%;opacity:.42;transition:--color-fill 5s ease,opacity .4s ease} } #homePage .slogan-panel:before{--color-fill:0%;-webkit-mask-image:radial-gradient(circle,transparent calc(100% - var(--color-fill)),#000 calc(101% - var(--color-fill)));mask-image:radial-gradient(circle,transparent calc(100% - var(--color-fill)),#000 calc(101% - var(--color-fill)))} #homePage .slogan-panel:after{--color-fill:0%;-webkit-mask-image:radial-gradient(circle,#000 calc(100% - var(--color-fill)),transparent calc(101% - var(--color-fill)));mask-image:radial-gradient(circle,#000 calc(100% - var(--color-fill)),transparent calc(101% - var(--color-fill)))} @media(hover:hover){ #homePage .slogan-panel:before,#homePage .slogan-panel:after{transition:--color-fill 5s ease,opacity .4s ease 5s} #homePage .slogan-panel:has(.slogan-visual p:hover):before,#homePage .slogan-panel:has(.slogan-kicker:hover):before{--color-fill:100%;opacity:1;transition:--color-fill 5s ease,opacity .4s ease} #homePage .slogan-panel:has(.slogan-visual p:hover):after,#homePage .slogan-panel:has(.slogan-kicker:hover):after{--color-fill:100%;opacity:.42;transition:--color-fill 5s ease,opacity .4s ease} #homePage .slogan-visual p,#homePage .slogan-kicker{transition:opacity .4s ease 5s} #homePage .slogan-panel:has(.slogan-visual p:hover) .slogan-visual p,#homePage .slogan-panel:has(.slogan-kicker:hover) .slogan-visual p,#homePage .slogan-panel:has(.slogan-visual p:hover) .slogan-kicker,#homePage .slogan-panel:has(.slogan-kicker:hover) .slogan-kicker{transition:opacity .4s ease;opacity:0} } /* Refine the line-art-to-color reveal: show full line art first, then wipe color inward. */ @media(hover:hover){ #homePage .slogan-panel:has(.slogan-visual p:hover):before,#homePage .slogan-panel:has(.slogan-kicker:hover):before{--color-fill:100%;opacity:1;transition:--color-fill 5s ease .25s,opacity .2s ease} #homePage .slogan-panel:has(.slogan-visual p:hover):after,#homePage .slogan-panel:has(.slogan-kicker:hover):after{--color-fill:100%;opacity:1;transition:--color-fill 5s ease .25s,opacity .2s ease} } /* Compact settings control: gear only, no avatar or caption. */ .sidebar .sidebar-bottom .settings-trigger{gap:0} .sidebar .sidebar-bottom .settings-logo-mark{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:12px;background:linear-gradient(145deg,#ffffff,#eaf3ff);color:#376eae;overflow:visible} .sidebar .sidebar-bottom .settings-logo-mark svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .sidebar .sidebar-bottom .settings-trigger small{display:none} /* Use one full-color illustration in the original line-art position. */ #homePage .slogan-panel:before{display:none!important} #homePage .slogan-panel:after{background-image:url(./assets/maid-color-mark.png)!important;background-size:auto 100%!important;background-position:calc(50% - 42px) center!important;mask-image:none!important;-webkit-mask-image:none!important;opacity:0!important;transition:opacity .4s ease!important} @media(hover:hover){#homePage .slogan-panel:has(.slogan-visual p:hover):after,#homePage .slogan-panel:has(.slogan-kicker:hover):after{opacity:1!important}} /* Match the slogan and illustration fade timing. */ #homePage .slogan-panel:after{transition:opacity 2s ease!important} #homePage .slogan-panel .slogan-visual p,#homePage .slogan-panel .slogan-kicker{transition:opacity 2s ease!important} @media(hover:hover){#homePage .slogan-panel:has(.slogan-visual p:hover):after,#homePage .slogan-panel:has(.slogan-kicker:hover):after{transition:opacity 2s ease!important}#homePage .slogan-panel:has(.slogan-visual p:hover) .slogan-visual p,#homePage .slogan-panel:has(.slogan-kicker:hover) .slogan-visual p,#homePage .slogan-panel:has(.slogan-visual p:hover) .slogan-kicker,#homePage .slogan-panel:has(.slogan-kicker:hover) .slogan-kicker{transition:opacity 2s ease!important}} /* Nudge the replacement illustration slightly right. */ #homePage .slogan-panel:after{background-position:calc(50% - 18px) center!important} #homePage .slogan-panel:after{background-position:calc(50% - 6px) center!important} /* Crossfade the colored art into the existing line art on hover. */ #homePage .slogan-panel:before{content:''!important;display:block!important;position:absolute!important;inset:0!important;z-index:2!important;pointer-events:none!important;background:url('./assets/maid-line-mark.png') center/auto 100% no-repeat!important;background-position:calc(50% - 6px) center!important;-webkit-mask-image:none!important;mask-image:none!important;opacity:0!important;transition:opacity 2s ease!important} #homePage .slogan-panel:after{z-index:1!important;opacity:0!important;transition:opacity 2s ease!important} @media(hover:hover){#homePage .slogan-panel:has(.slogan-visual p:hover):after,#homePage .slogan-panel:has(.slogan-kicker:hover):after{opacity:1!important;transition:opacity 2s ease!important}#homePage .slogan-panel:has(.slogan-visual p:hover):before,#homePage .slogan-panel:has(.slogan-kicker:hover):before{opacity:1!important;transition:opacity 5s ease!important}} /* Show only the line-art image in the existing hover slot. */ #homePage .slogan-panel:before{display:none!important} #homePage .slogan-panel:after{background-image:url('./assets/maid-line-mark.png')!important;background-size:auto 100%!important;background-position:calc(50% - 6px) center!important;-webkit-mask-image:none!important;mask-image:none!important;opacity:0!important;transition:opacity 2s ease!important} @media(hover:hover){#homePage .slogan-panel:has(.slogan-visual p:hover):after,#homePage .slogan-panel:has(.slogan-kicker:hover):after{opacity:1!important;transition:opacity 2s ease!important}} /* Move the My page entry to the bottom and use the recent line-art portrait. */ .sidebar-bottom{width:100%;display:flex;justify-content:center} .sidebar-bottom .profile{width:100%;justify-content:center} .sidebar-bottom .profile>button.bottom-me-nav{margin:0!important} .sidebar-bottom .bottom-me-icon{width:42px;height:42px;border-radius:11px;overflow:hidden} .sidebar-bottom .bottom-me-icon img{display:block;width:100%;height:100%;object-fit:contain} .sidebar-bottom .bottom-me-nav{background:transparent!important;box-shadow:none!important} .sidebar-bottom .bottom-me-nav:hover,.sidebar-bottom .bottom-me-nav:focus-visible{background:linear-gradient(105deg,#fff 0%,#eaf2fd 100%)!important;box-shadow:0 5px 18px #315b9212!important} .sidebar-bottom .profile>button.bottom-me-nav{display:flex!important;flex:none;width:50px;height:50px;align-items:center;justify-content:center;margin:0!important} .sidebar-bottom .profile>.bottom-me-nav{position:fixed!important;left:15px!important;bottom:12px!important;z-index:1000;display:flex!important;width:50px;height:50px;margin:0!important;border-radius:13px;background:linear-gradient(145deg,#fff 0%,#eaf3ff 100%)!important;box-shadow:0 4px 14px #315b9218!important} .sidebar-bottom .bottom-me-icon{width:46px;height:46px} .sidebar-bottom .bottom-me-icon img{filter:contrast(1.6) saturate(1.35)} .sidebar-bottom .bottom-me-nav:hover,.sidebar-bottom .bottom-me-nav:focus-visible{background:linear-gradient(145deg,#fff 0%,#dceaff 100%)!important} .sidebar-bottom>.bottom-me-nav{display:flex!important;position:fixed!important;left:15px!important;bottom:12px!important;z-index:1000;width:50px;height:50px;align-items:center;justify-content:center;border-radius:13px;background:linear-gradient(145deg,#fff 0%,#eaf3ff 100%)!important;box-shadow:0 4px 14px #315b9218!important} /* Keep only the line-art portrait; remove its tile background. */ .sidebar-bottom>.bottom-me-nav,.sidebar-bottom>.bottom-me-nav:hover,.sidebar-bottom>.bottom-me-nav:focus-visible,.sidebar-bottom>.bottom-me-nav.active{background:transparent!important;box-shadow:none!important;border-radius:0!important} /* The old settings-only selector hid the replacement “Me” button. */ #bottomMeNav:not(#settingsToggle){display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;position:fixed!important;left:13px!important;bottom:8px!important;z-index:1002!important;width:50px!important;height:50px!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important} #bottomMeNav .bottom-me-icon{display:block!important;width:46px!important;height:46px!important;overflow:visible!important} #bottomMeNav .bottom-me-icon img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important} /* Keep the Me control compact: no hover expansion or tooltip, with a label under its mark. */ #bottomMeNav,#bottomMeNav:hover,#bottomMeNav:focus-visible,#bottomMeNav.active{position:fixed!important;left:max(0px,calc((100vw - 1600px)/2))!important;bottom:2px!important;width:76px!important;height:82px!important;min-width:76px!important;max-width:76px!important;justify-content:center!important;align-items:center!important;flex-direction:column!important;gap:0!important;padding:0!important;overflow:visible!important;white-space:normal!important;transform:translate(-12px,-18px)!important;transition:none!important;background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important} #bottomMeNav .bottom-me-icon{width:54px!important;height:54px!important;flex:none!important} #bottomMeNav .nav-text{display:none!important} #bottomMeNav .bottom-me-brand{display:block!important;width:100%;height:16px;color:#6e91bd;font-size:10px;line-height:16px;font-weight:600;text-align:center;letter-spacing:0;opacity:1;transform:none} /* Local media-cache controls in the account's System Settings tab. */ .system-settings-panel{max-width:900px} .system-settings-panel .memory-panel-heading{margin-bottom:16px} .system-cache-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px;border:1px solid #d6e3f2;border-radius:14px;background:linear-gradient(135deg,#f9fbff,#eef4fc);color:#294767} .system-cache-copy .eyebrow{margin-bottom:7px;color:#5a7eac} .system-cache-copy h3{margin:0 0 7px;color:#234a7c;font-size:17px} .system-cache-copy p{max-width:650px;margin:0 0 10px;color:#607895;font-size:12px;line-height:1.7} .system-cache-copy small{color:#7890ad;font-size:11px} .system-cache-actions{display:flex;justify-content:flex-end} .system-cache-actions button{white-space:nowrap} .system-cache-actions .danger{border-color:#e4c6ca!important;background:#fff8f8!important;color:#a54855!important} .system-cache-status{grid-column:1/-1;margin:0;color:#607895;font-size:11px;line-height:1.5} @media(max-width:620px){.system-cache-card{grid-template-columns:1fr;padding:15px}.system-cache-actions{justify-content:flex-start}} /* Compact the full-width desktop masthead to the height marked in the reference. */ @media(min-width:781px){.topbar{height:50px!important}.sidebar{top:50px!important;height:calc(100vh - 50px)!important;max-height:calc(100vh - 50px)!important}main{padding-top:50px!important}} /* Size the header search to the marked width and hide its keyboard hint. */ @media(min-width:781px){.topbar .search-wrap{width:210px!important}.topbar .search{width:100%;box-sizing:border-box}.topbar .search kbd{display:none!important}} @media(min-width:781px){.topbar .search-wrap{width:226px!important}} /* Extend the homepage user-white / fish-blue palette to messages and profile cards. */ .chat-thread-tabs{border-color:#d9e5f3!important;background:linear-gradient(120deg,#f8fafc,#edf3fb)!important} .chat-thread-tabs button{color:#718096!important} .chat-thread-tabs button[data-chat-list-filter="user"][aria-selected="true"]{background:#fff!important;color:#334155!important;box-shadow:0 1px 5px #1e3a5f12!important} .chat-thread-tabs button[data-chat-list-filter="fish"][aria-selected="true"]{background:linear-gradient(115deg,#315fa8,#77a8e4)!important;color:#fff!important;box-shadow:0 3px 9px #315fa826!important} .chat-thread-row{color:#27476f!important} .chat-thread-row:hover{background:#f5f7fa!important} .chat-thread-panel:has([data-chat-list-filter="user"][aria-selected="true"]) .chat-thread-row.active{background:#fff!important;box-shadow:inset 0 0 0 1px #e1e7ef!important} .chat-thread-panel:has([data-chat-list-filter="fish"][aria-selected="true"]) .chat-thread-row.active{background:linear-gradient(115deg,#e8f1ff,#d8e8fc)!important;box-shadow:inset 0 0 0 1px #c4d9f5!important} .chat-thread-avatar{background:#eef2f7!important;color:#52647d!important} .chat-thread-avatar.blue{background:#deebfc!important;color:#315fa8!important} .chat-thread-row[data-thread-type="user"] .chat-thread-avatar{background:#f1f3f6!important;color:#52647d!important} .chat-thread-row[data-thread-type="fish"] .chat-thread-avatar{background:#dceafb!important;color:#315fa8!important} .chat-thread-meta b{color:#203e66!important} .chat-thread-panel{background:#f8fafc!important;border-color:#e1e7ef!important} #messagesPage .inbox-tabs button[data-inbox="user"].selected{background:#fff!important;color:#334155!important;border-color:#e1e7ef!important} #messagesPage .inbox-tabs button[data-inbox="fish"].selected{background:linear-gradient(115deg,#315fa8,#77a8e4)!important;color:#fff!important;border-color:#315fa8!important} #messagesPage .message-row[data-conversation-type="user"]{background:#fff!important;border-color:#e2e8f0!important} #messagesPage .message-row[data-conversation-type="user"]:hover{background:#f8fafc!important} #messagesPage .message-row[data-conversation-type="fish"]{background:linear-gradient(115deg,#fff,#e8f1ff)!important;border-color:#cbdcf3!important} #messagesPage .message-row[data-conversation-type="fish"]:hover{background:linear-gradient(115deg,#f5f9ff,#dfebfc)!important} #messagesPage .message-row[data-conversation-type="user"] .message-summary strong{color:#334155!important} #messagesPage .message-row[data-conversation-type="fish"] .message-summary strong{color:#234a7c!important} /* Fish interaction conversations: fish replies are blue; the user's own bubbles stay white. */ #chatPage .conversation-log{background:linear-gradient(135deg,#f8fbff 0%,#edf4fd 100%)!important;border-color:#d7e4f4!important} #chatPage .chat-slogan{background:#e4edf9!important;color:#5d78a0!important} #chatPage .chat-message-row.theirs .chat-message-avatar{background:#dceafb!important;color:#315fa8!important} #chatPage .chat-message-row.theirs .chat-bubble{background:linear-gradient(135deg,#e8f2ff,#d5e6fb)!important;border:1px solid #c8dcf5!important;color:#23466f!important} #chatPage .chat-message-row.theirs .chat-bubble>b,#chatPage .chat-message-row.theirs .chat-bubble>p{color:#23466f!important} #chatPage .chat-message-row.mine .chat-message-avatar{background:#f1f3f6!important;color:#52647d!important} #chatPage .chat-message-row.mine .chat-bubble{background:#fff!important;border:1px solid #e2e8f0!important;color:#334155!important} #chatPage .chat-message-row.mine .chat-bubble>b,#chatPage .chat-message-row.mine .chat-bubble>p{color:#334155!important} #chatPage .fish-chat-fish-card{border-color:#c5d9f1!important;background:linear-gradient(120deg,#eef5ff,#dceafb)!important;box-shadow:0 5px 15px #315fa812!important} #chatPage .fish-chat-fish-card .fish-chat-identity-copy b{color:#234a7c!important} #chatPage .fish-chat-owner-card{border-color:#e1e7ef!important;background:#fff!important} #chatPage .conversation-compose .chat-footer .outline{border-color:#cbdcf3!important;background:#f4f8ff!important;color:#315fa8!important} #userChatPage .conversation-log{background:#f8fafc!important;border-color:#e2e8f0!important} #userChatPage .chat-slogan{background:#f1f3f6!important;color:#778397!important} #userChatPage .chat-message-row .chat-message-avatar{background:#f1f3f6!important;color:#52647d!important} #userChatPage .chat-message-row .chat-bubble,#userChatPage .chat-message-row.mine .chat-bubble{background:#fff!important;border:1px solid #e2e8f0!important;color:#334155!important} #userChatPage .chat-message-row .chat-bubble>b,#userChatPage .chat-message-row .chat-bubble>p{color:#334155!important} /* My fish chat follows the same owner-white / fish-blue distinction. */ #ownFishChatPage .own-chat-stage{background:radial-gradient(ellipse at 50% 20%,#f8fbff 0%,#eaf2fc 68%,#dfeafb 100%)!important;border-color:#d3e2f5!important} #ownFishChatPage .own-chat-stage .orbit-one,#ownFishChatPage .own-chat-stage .orbit-two{border-color:#c7d9f1!important} #ownFishChatPage .own-chat-fish-name{color:#234a7c!important} #ownFishChatPage .own-chat-persona{border-color:#c6d9f2!important;background:#f4f8ff!important;color:#315fa8!important} #ownFishChatPage .own-chat-log{background:#f8fbff!important} #ownFishChatPage .own-chat-message.theirs .own-chat-message-avatar{background:#dceafb!important;color:#315fa8!important} #ownFishChatPage .own-chat-message.theirs>div{border-color:#c8dcf5!important;background:linear-gradient(135deg,#e8f2ff,#d5e6fb)!important} #ownFishChatPage .own-chat-message.theirs b,#ownFishChatPage .own-chat-message.theirs p{color:#23466f!important} #ownFishChatPage .own-chat-message.mine .own-chat-message-avatar{background:#f1f3f6!important;color:#52647d!important} #ownFishChatPage .own-chat-message.mine>div{border-color:#e2e8f0!important;background:#fff!important} #ownFishChatPage .own-chat-message.mine b,#ownFishChatPage .own-chat-message.mine p{color:#334155!important} #ownFishChatPage .own-chat-composer{border-color:#e1e7ef!important;background:#fff!important} #ownFishChatPage .own-fish-memory-bubble{box-shadow:0 6px var(--bubble-glow,14px) #315fa81c,0 1px 3px #ffffffaa inset!important} #ownFishChatPage .own-fish-memory-bubble.persona{border-width:2px!important} /* Ranking and discussion accents use the same blue fish palette. */ #rankPage .rank-kind-tabs button.selected{color:#315fa8!important;border-bottom-color:#4f82c4!important} #rankPage .period-tabs button.selected{background:#e7f0fc!important;border-color:#cbdcf3!important;color:#315fa8!important} #rankPage .rank-num,#rankPage .rank-value b{color:#4f82c4!important} #rankPage .fish-discussion h3,#rankPage .discussion-item b{color:#315fa8!important} #rankPage .discussion-item,#rankPage .discussion-empty{background:#f1f6fd!important;color:#627996!important} #rankPage .discussion-compose input{border-color:#d9e4f2!important} /* User profile stays neutral; the fish area and interaction actions turn blue. */ .profile-modal .profile-hero .profile-avatar{background:#f1f3f6!important;color:#334155!important} .profile-modal .profile-social-stats,.profile-modal .profile-hero .muted{color:#718096!important} .profile-modal .profile-actions .outline{border-color:#dce3ec!important;background:#fff!important;color:#52647d!important} .profile-modal .profile-actions .outline:hover{background:#f5f7fa!important} .profile-modal .profile-actions .profile-home-link{border-color:#315fa8!important;background:#315fa8!important;color:#fff!important} .profile-modal .profile-actions .profile-home-link:hover{background:#274f90!important} .profile-modal .profile-fish{border-color:#cbdcf3!important;background:linear-gradient(140deg,#fff,#f1f6fd)!important} .profile-modal .profile-fish-memory-map{border-color:#cbdcf3!important;background:radial-gradient(ellipse at 50% 38%,#fff 0,#edf4fd 58%,#dceafb 100%)!important} .profile-modal .profile-map-orbit{border-color:#c6d9f2!important} .profile-modal .profile-map-orbit-two{border-color:#d6e4f7!important} .profile-modal .profile-map-center{color:#234a7c!important} .profile-modal .profile-map-center>small{border-color:#cbdcf3!important;background:#ffffffd9!important;color:#5279ad!important} .profile-modal .profile-map-bubble{border-color:var(--bubble-border,#7ca6d0)!important;background:radial-gradient(circle at 30% 24%,#fff,var(--bubble-fill,#d4e5f6))!important;color:var(--bubble-ink,#315fa8)!important;box-shadow:0 5px var(--bubble-glow,14px) #356b9c24!important} .profile-modal .profile-fish-actions .profile-payer-note{border-color:#cbdcf3!important;background:#eaf2fc!important;color:#315fa8!important} .profile-modal .profile-chat-button{border-color:#315fa8!important;background:linear-gradient(115deg,#315fa8,#77a8e4)!important;color:#fff!important} .profile-modal .profile-fish-subtitle,.profile-modal .profile-privacy{color:#718096!important} .profile-modal .profile-privacy{border:1px solid #e1e7ef!important;background:#f5f7fa!important} #chatPage .chat-thread-title b,#chatPage .conversation-heading h1{color:#203e66!important} #chatPage .chat-thread-title small,#chatPage .fish-chat-fish-card .fish-chat-identity-copy small{color:#7287a2!important} #rankPage .intro h1{color:#203e66!important} #rankPage .intro .weather{color:#6b84a5!important} #rankPage .rank-kind-tabs button{color:#718096!important} #rankPage .rank-card .rank-name strong,#rankPage .fish-discussion h3{color:#234a7c!important} .profile-modal .eyebrow,.profile-modal .profile-hero h2{color:#203e66!important} /* Match the user-private-message identity row to the fish-chat card order and sizing. */ #userChatPage .user-chat-identities{gap:12px!important} #userChatPage .user-chat-fish-card{order:0!important;flex:0 1 340px!important;min-height:70px!important;padding:9px 14px!important;border-color:#c5d9f1!important;background:linear-gradient(120deg,#eef5ff,#dceafb)!important;color:#234a7c!important;box-shadow:0 5px 15px #315fa812!important} #userChatPage .user-chat-owner-card{order:1!important;flex:0 1 220px!important;min-height:58px!important;padding:7px 11px!important;border-color:#e1e7ef!important;background:#fff!important;color:#334155!important} #userChatPage .user-chat-fish-card .user-chat-avatar{width:48px!important;height:48px!important;background:#dceafb!important;color:#315fa8!important;font-size:30px!important} #userChatPage .user-chat-owner-card .user-chat-avatar{width:34px!important;height:34px!important;background:#f1f3f6!important;color:#52647d!important;font-size:16px!important} #userChatPage .user-chat-fish-card .user-chat-identity-copy b{font-size:16px!important;color:#234a7c!important} #userChatPage .user-chat-owner-card .user-chat-identity-copy b{color:#334155!important} #userChatPage .user-chat-identity-copy small,#userChatPage .user-chat-identity-copy em{color:#7287a2!important} #userChatPage .user-chat-identity-card:hover,#userChatPage .user-chat-identity-card:focus-visible{border-color:#a9c4e7!important;box-shadow:0 4px 13px #315fa817!important} #userChatPage .conversation-heading h1{color:#203e66!important} #userChatPage #flowerTipToggle{border-color:#e1e7ef!important;background:#fff!important;color:#52647d!important} #userChatPage #flowerTipToggle:hover{background:#f5f7fa!important;border-color:#cbd5e1!important} #userChatPage .conversation-footnote{color:#718096!important} /* A quiet seabed behind the owner's fish and its memory bubbles. */ #ownFishChatPage,#ownFishChatPage .own-chat-stage{background:#d6e9f8!important} #ownFishChatPage .own-chat-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:url("./assets/own-chat-seabed.svg") center bottom / cover no-repeat;pointer-events:none} #ownFishChatPage .own-chat-stage .own-chat-orbit{border-color:#83add644!important;pointer-events:none} #ownFishChatPage .own-fish-memory-bubble{border-color:var(--bubble-border,#7ca6d0)!important;background:radial-gradient(circle at 29% 22%,#f5faff 0%,var(--bubble-fill,#d4e5f6) 46%,#aecce8 100%)!important;color:var(--bubble-ink,#244e7b)!important;box-shadow:0 8px var(--bubble-glow,14px) #356b9c24,0 0 0 2px #ffffff80 inset!important} #ownFishChatPage .own-fish-memory-bubble.persona{border-width:2px!important} @media(max-width:640px){#userChatPage .user-chat-fish-card{flex:1 1 58%!important;min-height:62px!important;padding:7px 9px!important}#userChatPage .user-chat-owner-card{flex:1 1 42%!important;min-height:54px!important;padding:6px 8px!important}#userChatPage .user-chat-fish-card .user-chat-avatar{width:40px!important;height:40px!important;font-size:26px!important}} /* Carry the homepage blue palette through the personal “Me” workspace. */ #myPage .weather{color:#6684aa!important} #myPage .intro h1{color:#203e66!important} #myPage .intro p,#myPage .my-fish-card>p{color:#718096!important} #myPage .my-tabs{border-bottom-color:#dce5ef!important} #myPage .my-tabs button{color:#718096!important} #myPage .my-tabs button.selected{color:#315fa8!important} #myPage .my-tabs button.selected:after{background:#315fa8!important} #myPage .my-panel{color:#334155} #myPage .my-fish-card,#myPage .interaction-memory-card{border-color:#dce5ef!important;background:linear-gradient(145deg,#fff,#f5f8fc)!important} #myPage .my-fish-card .profile-fish-head>span.my-fish-avatar{background-color:#dceafb!important;color:#315fa8!important} #myPage .fish-name-summary>small,#myPage .my-fish-card .profile-fish-head small{color:#718096!important} #myPage .fish-name-title>b,#myPage .fish-rename-link{color:#315fa8!important} #myPage .fish-rename-link:hover{color:#234a7c!important} #myPage .my-fish-card #myFishPersonaSummary{border-color:#cbdcf3!important;background:#eaf2fc!important;color:#315fa8!important} #myPage .my-fish-card button#myFishPersonaSummary:hover{border-color:#9bb9df!important;background:#dceafb!important;box-shadow:0 3px 10px #315fa81a!important} #myPage .my-fish-card .online{background:#4e83c2!important;box-shadow:0 0 0 3px #d5e5f7!important} #myPage .my-fish-actions .outline,#myPage .my-panel>.outline{border-color:#cbdcf3!important;background:#fff!important;color:#315fa8!important} #myPage .my-fish-actions .outline:hover,#myPage .my-panel>.outline:hover{border-color:#9bb9df!important;background:#f1f6fd!important;color:#234a7c!important} #myPage .compute-balance{border-color:#cbdcf3!important;background:linear-gradient(120deg,#f7faff,#eaf2fc)!important;color:#234a7c!important} #myPage .compute-balance strong,#myPage .compute-balance b{color:#315fa8!important} #myPage .compute-balance small{color:#7187a2!important} #myPage .wallet-total{border:1px solid #d6e3f2!important;background:linear-gradient(120deg,#f7faff,#eaf2fc)!important} #myPage .wallet-total span,#myPage .wallet-total small{color:#7187a2!important} #myPage .wallet-total b{color:#315fa8!important} #myPage .subhead{color:#234a7c!important} #myPage .pack-grid button{border-color:#d6e3f2!important;background:#fff!important} #myPage .pack-grid button b,#myPage .pack-grid button strong{color:#315fa8!important} #myPage .pack-grid button:hover{border-color:#9bb9df!important;background:#f3f7fd!important} #myPage .item-row{border-top-color:#e1e7ee!important;color:#52647d!important} #myPage .item-row button:not(.exchange-closed){background:#eaf2fc!important;color:#315fa8!important} #myPage .item-row button:not(.exchange-closed):hover{background:#dceafb!important} #myPage .compute-balance-grid .compute-balance-card{border-color:#d6e3f2!important;background:linear-gradient(140deg,#fff,#f1f6fd)!important} #myPage .compute-balance-grid .compute-balance-card.official{border-color:#cbdcf3!important;background:linear-gradient(140deg,#fff,#eaf2fc)!important} #myPage .compute-card-heading>span,#myPage .compute-balance-grid .official .compute-card-heading>span{background:#eaf2fc!important} #myPage .compute-balance-card>strong,#myPage .compute-balance-card.official>strong{color:#315fa8!important} #myPage .token-source-card{border-color:#dce5ef!important;background:#fff!important} #myPage .token-source-card .eyebrow,#myPage .token-source-card h2{color:#234a7c!important} #myPage .token-source-option:has(input:checked){border-color:#9bb9df!important;background:#f1f6fd!important} #myPage .token-source-option input{accent-color:#315fa8!important} #myPage .token-source-option small strong{color:#315fa8!important} #myPage .memory-panel-heading h2,#myPage .interaction-memory-card b{color:#234a7c!important} #myPage .memory-panel-heading p,#myPage .interaction-memory-card small,#myPage .interaction-memory-card p{color:#718096!important} #myPage .interaction-memory-card button{border-color:#cbdcf3!important;background:#f4f8ff!important;color:#315fa8!important} #myPage .memory-panel-heading .memory-back{border-color:#cbdcf3!important;background:#fff!important;color:#315fa8!important} #myPage .memory-panel-heading .memory-back:hover{background:#f1f6fd!important;border-color:#9bb9df!important} #myPage .memory-empty{border-color:#cbdcf3!important;background:#f7faff!important;color:#7187a2!important} #myPage .notice{border:1px solid #d6e3f2!important;background:#f1f6fd!important;color:#5f7695!important} #myPage .caption{color:#8293aa!important} #myPage .exchange-closed{border-color:#d6e3f2!important;background:#f1f5fa!important;color:#8293aa!important} #myPage .compute-balance-card .outline{border-color:#cbdcf3!important;background:#f4f8ff!important;color:#315fa8!important} #myPage .compute-balance-card .outline:hover{border-color:#9bb9df!important;background:#eaf2fc!important} /* Keep the owner's chat stage visibly blue and paint the seabed in the stage background itself. */ body:has(#ownFishChatPage:not([hidden])) #ownFishChatPage .own-chat-stage{background-color:#d6e9f8!important;background-image:url("./assets/own-chat-seabed.svg")!important;background-position:center bottom!important;background-size:cover!important;background-repeat:no-repeat!important} body:has(#ownFishChatPage:not([hidden])) #ownFishChatPage .own-chat-stage::before{content:none!important;display:none!important} /* The chat stage is a direct child of main in the current layout, so target it independently of #ownFishChatPage. */ body:has(#ownFishChatPage:not([hidden])) .own-chat-stage{background-color:#d6e9f8!important;background-image:url("./assets/own-chat-seabed.svg")!important;background-position:center bottom!important;background-size:cover!important;background-repeat:no-repeat!important} body:has(#ownFishChatPage:not([hidden])) .own-chat-stage .own-chat-orbit{border-color:#83add644!important} body:has(#ownFishChatPage:not([hidden])) .own-chat-stage .own-chat-fish-name{color:#234a7c!important} body:has(#ownFishChatPage:not([hidden])) .own-chat-stage .own-chat-persona{border-color:#c6d9f2!important;background:#f4f8ff!important;color:#315fa8!important} body:has(#ownFishChatPage:not([hidden])) .own-chat-stage .own-fish-memory-bubble{border-color:var(--bubble-border,#7ca6d0)!important;background:radial-gradient(circle at 29% 22%,#f5faff 0%,var(--bubble-fill,#d4e5f6) 46%,#aecce8 100%)!important;color:var(--bubble-ink,#244e7b)!important;box-shadow:0 8px var(--bubble-glow,14px) #356b9c24,0 0 0 2px #ffffff80 inset!important}body:has(#ownFishChatPage:not([hidden])) .own-chat-stage{box-sizing:border-box;flex:0 0 244px!important;height:244px!important;min-height:244px!important;max-height:244px!important} @media(max-width:780px){body:has(#ownFishChatPage:not([hidden])) .own-chat-stage{flex-basis:200px!important;height:200px!important;min-height:200px!important;max-height:200px!important}} /* Keep the chat and voice drawer side by side; fish messages use blue and owner messages stay white. */ body.own-voice-settings-open #ownFishChatPage.own-fish-chat-page{box-sizing:border-box;flex:1 1 0;min-width:0} body.own-voice-settings-open #ownFishChatPage .own-chat-shell{min-width:0} #ownFishChatPage .own-chat-log{background:#f8fbff!important} #ownFishChatPage .own-chat-message.theirs .own-chat-message-avatar{background:#dceafb!important;color:#315fa8!important} #ownFishChatPage .own-chat-message.theirs>div{border-color:#c8dcf5!important;background:linear-gradient(135deg,#e8f2ff,#d5e6fb)!important} #ownFishChatPage .own-chat-message.theirs b,#ownFishChatPage .own-chat-message.theirs p{color:#23466f!important} #ownFishChatPage .own-chat-message.mine .own-chat-message-avatar{background:#f1f3f6!important;color:#52647d!important} #ownFishChatPage .own-chat-message.mine>div{border-color:#e2e8f0!important;background:#fff!important} #ownFishChatPage .own-chat-message.mine b,#ownFishChatPage .own-chat-message.mine p{color:#334155!important} #ownFishChatPage .own-chat-welcome{border-color:#c8dcf5!important;background:#f1f6fd!important;color:#315fa8!important} #ownFishChatPage .own-chat-composer{border-color:#e1e7ef!important;background:#fff!important} #ownFishChatPage .own-chat-composer textarea{border-color:#d6e3f2!important;background:#fff!important;color:#334155!important} #ownFishChatPage .own-chat-composer textarea:focus{border-color:#9bb9df!important;box-shadow:0 0 0 3px #eaf2fc!important} #ownFishChatPage .own-chat-composer>small{color:#8293aa!important} body.own-voice-settings-open>#ownFishTtsDebugPanel:not([hidden]){border-left:1px solid #d6e3f2!important;background:#f7faff!important;box-shadow:-14px 0 36px #315fa81c!important} #ownFishTtsDebugPanel .own-tts-debug-heading b,#ownFishTtsDebugPanel .own-tts-provider-title{color:#234a7c!important} #ownFishTtsDebugPanel .own-astrbot-tts-status{border-color:#cbdcf3!important;background:#eaf2fc!important;color:#315fa8!important} #ownFishTtsDebugPanel .own-astrbot-tts-status[data-state="success"]{border-color:#b9d0ee!important;background:#e5effb!important;color:#315fa8!important} #ownFishTtsDebugPanel .own-chat-voice-controls:not([hidden]){border-color:#d6e3f2!important;background:linear-gradient(145deg,#f8fbff,#eef4fc)!important} #ownFishTtsDebugPanel .own-chat-voice-controls label,#ownFishTtsDebugPanel .own-tts-provider-card>label,#ownFishTtsDebugPanel .own-doubao-custom-voice-form label{color:#52647d!important} #ownFishTtsDebugPanel .own-chat-voice-controls select,#ownFishTtsDebugPanel .own-tts-provider-card input:not([type=range]),#ownFishTtsDebugPanel .own-doubao-custom-voice-form input{border-color:#d6e3f2!important;background:#fff!important;color:#334155!important} #ownFishTtsDebugPanel .own-tts-provider-card{border-color:#d6e3f2!important;background:#fff!important} #ownFishTtsDebugPanel .own-tts-provider-title span,#ownFishTtsDebugPanel .own-tts-debug-note,#ownFishTtsDebugPanel .own-tts-provider-card>small{color:#718096!important} #ownFishTtsDebugPanel .own-voice-detail-heading,#ownFishTtsDebugPanel .own-voice-detail-heading>b{color:#234a7c!important} #ownFishTtsDebugPanel .own-tts-debug-actions .primary,#ownFishTtsDebugPanel .own-doubao-custom-voice-actions .primary{border-color:#315fa8!important;background:#315fa8!important;color:#fff!important} #ownFishTtsDebugPanel .own-tts-debug-actions .outline,#ownFishTtsDebugPanel .own-doubao-custom-voice-actions .outline{border-color:#cbdcf3!important;background:#f4f8ff!important;color:#315fa8!important} #ownFishTtsDebugPanel a{color:#315fa8!important} /* Restore the previous solid chat bubble colors. */ #ownFishChatPage .own-chat-message.theirs>div{background:#d5e6fb!important;border-color:#c8dcf5!important;color:#23466f!important} #ownFishChatPage .own-chat-message.theirs b,#ownFishChatPage .own-chat-message.theirs p{color:#23466f!important;-webkit-text-stroke:0!important;text-shadow:none!important} #ownFishChatPage .own-chat-message.mine>div{background:#ffffff!important;border-color:#e2e8f0!important;color:#334155!important} #ownFishChatPage .own-chat-message.mine b,#ownFishChatPage .own-chat-message.mine p{color:#334155!important;-webkit-text-stroke:0!important;text-shadow:none!important} .local-media-expired{display:inline-flex;align-items:center;min-height:36px;padding:6px 10px;border:1px dashed #c5d6e9;border-radius:8px;background:#f7faff;color:#71849b;font-size:12px;line-height:1.5} /* Blue and white palette for the fish archive card. */ #ownFishModal{border:1px solid #cfdef3!important;background:#fff!important;color:#24466f!important;box-shadow:0 24px 80px rgba(34,73,125,.22)!important} #ownFishModal::backdrop{background:rgba(39,67,103,.34)!important;backdrop-filter:blur(5px)} #ownFishModal .own-fish-modal-head .profile-hero h2,#ownFishModal .own-fish-modal-head h2{color:#234a7c!important} #ownFishModal .own-fish-modal-head .muted,#ownFishModal .own-fish-description{color:#6d829e!important} #ownFishModal .own-fish-stats>div,#ownFishModal .own-fish-facts article{border:1px solid #e0eaf7!important;background:#f2f7ff!important} #ownFishModal .own-fish-stats b,#ownFishModal .own-fish-facts b,#ownFishModal .own-fish-stats small,#ownFishModal .own-fish-facts small{color:#315f98!important} #ownFishModal .fish-archive-identity{border-color:#dbe6f5!important;background:#f7faff!important;color:#4e6685!important} #ownFishModal .own-fish-bio{border-color:#dbe6f5!important;background:#fff!important} #ownFishModal .own-fish-bio>b{color:#315b8d!important} #ownFishModal .own-fish-bio p{color:#627894!important} #ownFishModal .own-feed-panel{border-color:#d9e5f4!important;background:#f6f9ff!important} #ownFishModal .own-feed-panel>div:first-child b{color:#315b8d!important} #ownFishModal .own-feed-panel>div:first-child small{color:#7c90aa!important} #ownFishModal .own-feed-options .feed-option{border-color:#d5e1f2!important;background:#fff!important;color:#315b8d!important} #ownFishModal .own-feed-options .feed-option:hover{border-color:#8fb1df!important;background:#edf4ff!important} #ownFishModal .close{color:#738bab!important} /* Keep all informational copy in the fish profile modal in dark blue ink. */ #ownFishModal .own-fish-modal-head .muted, #ownFishModal .own-fish-description, #ownFishModal .own-fish-stats b, #ownFishModal .own-fish-stats small, #ownFishModal .fish-archive-identity, #ownFishModal .fish-archive-identity *, #ownFishModal .own-fish-facts *, #ownFishModal .own-fish-bio>b, #ownFishModal .own-fish-bio p, #ownFishModal .own-feed-panel>div:first-child b, #ownFishModal .own-feed-panel>div:first-child small{color:#26384b!important} /* Expandable feed comments, with recent high-liked and newest comments. */ .post-comment-content{display:none;margin:10px 0 0 40px;padding-top:10px;border-top:1px solid #e1eaf5} .post-comment-content.open{display:grid;gap:10px} .post-comments{display:grid;gap:10px} .post-comment-group{display:grid;gap:7px} .post-comment-group-title{color:#55769e;font-size:10px;font-weight:700} .post-comment-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border:1px solid #e2eaf5;border-radius:9px;background:#f8faff;color:#355477} .post-comment-main{min-width:0;flex:1} .post-comment-main>b{font-size:11px;color:#31598a} .post-comment-main time{margin-left:8px;color:#91a2b8;font-size:9px} .post-comment-main p{margin:4px 0 0;color:#455f7e;font-size:11px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere} .post-comment-like{flex:none;border:1px solid #dbe6f4;border-radius:7px;background:#fff;color:#7890ad;padding:4px 7px;font-size:10px;cursor:pointer} .post-comment-like.liked{border-color:#f1c9d3;background:#fff5f7;color:#d46682} .post-comments-empty{margin:0;color:#8293a8;font-size:11px} .post-comment-content.open .comment{display:flex;margin:0} .post-comment-content .comment button{border:1px solid #d3e1f4;background:#eaf2ff;color:#315fa8} @media(max-width:620px){.post-comment-content{margin-left:0}.post-comment-item{padding:8px}} /* Shared underwater memory stage for the own-fish chat, fish chat, and fish profile. */ :is(#chatPage #chatFishMemoryMap,#profileFishMemoryMap,#ownFishChatPage .own-chat-stage){ position:relative; isolation:isolate; overflow:hidden; background-color:#d6e9f8!important; background-image:url("./assets/own-chat-seabed.svg?v=single-wave-20261030d")!important; background-position:center bottom!important; background-size:100% 100%!important; background-repeat:no-repeat!important; } :is(#chatPage #chatFishMemoryMap,#profileFishMemoryMap,#ownFishChatPage .own-chat-stage)::before, :is(#chatPage #chatFishMemoryMap,#profileFishMemoryMap,#ownFishChatPage .own-chat-stage)::after{ content:""; position:absolute; z-index:0; top:auto!important; right:auto!important; left:-12%; width:124%; height:62px; border-radius:50% 50% 0 0 / 40% 40% 0 0; pointer-events:none; } :is(#chatPage #chatFishMemoryMap,#profileFishMemoryMap,#ownFishChatPage .own-chat-stage)::before{ bottom:-45px; height:90px; background:linear-gradient(180deg,#b3d9edb5,#90bfdfc9); box-shadow:0 -2px 12px #ffffff42; clip-path:polygon(0 34%,8% 23%,16% 18%,24% 21%,32% 33%,40% 45%,48% 46%,56% 37%,64% 24%,72% 17%,80% 20%,88% 33%,96% 40%,100% 35%,100% 100%,0 100%); animation:memory-stage-wave-front 5s ease-in-out infinite; } :is(#chatPage #chatFishMemoryMap,#profileFishMemoryMap,#ownFishChatPage .own-chat-stage)::after{ display:none!important; } @keyframes memory-stage-wave-front{ 0%,100%{ clip-path:polygon(0 34%,8% 23%,16% 18%,24% 21%,32% 33%,40% 45%,48% 46%,56% 37%,64% 24%,72% 17%,80% 20%,88% 33%,96% 40%,100% 35%,100% 100%,0 100%); transform:translateX(-1.5%); } 50%{ clip-path:polygon(0 25%,8% 33%,16% 43%,24% 46%,32% 39%,40% 26%,48% 18%,56% 20%,64% 31%,72% 43%,80% 46%,88% 38%,96% 24%,100% 20%,100% 100%,0 100%); transform:translate3d(1.5%,-8px,0); } } :is(#chatPage #chatFishMemoryMap,#profileFishMemoryMap) .profile-map-bubble, body:has(#ownFishChatPage:not([hidden])) #ownFishChatPage .own-chat-stage .own-fish-memory-bubble{ border-color:var(--bubble-border,#7ca6d0)!important; background:radial-gradient(circle at 29% 22%,#f5faff 0%,var(--bubble-fill,#d4e5f6) 46%,#aecce8 100%)!important; color:var(--bubble-ink,#244e7b)!important; box-shadow:0 8px var(--bubble-glow,14px) #356b9c24,0 0 0 2px #ffffff80 inset!important; animation:memory-stage-bubble-float 4.5s ease-in-out infinite; } :is(#chatPage #chatFishMemoryMap,#profileFishMemoryMap) .profile-map-avatar, body:has(#ownFishChatPage:not([hidden])) #ownFishChatPage .own-chat-stage .own-chat-avatar{ animation:memory-stage-avatar-float 4.5s ease-in-out infinite; } @keyframes memory-stage-bubble-float{50%{transform:translateY(-4px) rotate(var(--bubble-tilt,0deg))}} @keyframes memory-stage-avatar-float{50%{transform:translateY(-5px)}} body:has(#ownFishChatPage:not([hidden])) #ownFishChatPage .own-chat-stage::before{content:""!important;display:block!important;z-index:0!important} @media(prefers-reduced-motion:reduce){ :is(#chatPage #chatFishMemoryMap,#profileFishMemoryMap,#ownFishChatPage .own-chat-stage)::before, :is(#chatPage #chatFishMemoryMap,#profileFishMemoryMap,#ownFishChatPage .own-chat-stage)::after, :is(#chatPage #chatFishMemoryMap,#profileFishMemoryMap) .profile-map-bubble, :is(#chatPage #chatFishMemoryMap,#profileFishMemoryMap) .profile-map-avatar, body:has(#ownFishChatPage:not([hidden])) #ownFishChatPage .own-chat-stage .own-fish-memory-bubble, body:has(#ownFishChatPage:not([hidden])) #ownFishChatPage .own-chat-stage .own-chat-avatar{animation:none!important} } .post-comment-item{background:#fff} .post-comment-content.open{padding:10px 12px 12px;border:1px solid #e0e9f5;border-radius:10px;background:#fff} /* Feed cards and comments follow one shared blue-white system. */ .own-profile-stream-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:18px;row-gap:9px} .own-profile-actions{grid-column:2;grid-row:1;gap:10px} .own-profile-stream-tabs{grid-column:1;grid-row:1} .own-profile-stream-tabs button.selected{background:#dceaff;color:#285b9b} .fish-auto-reply{grid-column:1/-1;grid-row:2;margin:0 0 0 2px;color:#53749b} .fish-auto-reply input{accent-color:#3265aa} #feedList[data-social-view="profile"][data-profile-stream="owner"] .post{background:#fff!important;border-color:#d6e3f3!important} #feedList[data-social-view="profile"][data-profile-stream="fish"] .post[data-author-type="fish"]{background:#e2efff!important;border-color:#c7daf4!important} .post-comment-content.open{padding:10px 12px 12px;border:1px solid #dce7f5;border-radius:10px;background:#fff} .post-comment-item.is-user-comment{background:#fff!important;color:#355477} .post-comment-item.is-fish-comment{background:#1f4e83!important;border-color:#1f4e83!important;color:#fff} .post-comment-item.is-fish-comment .post-comment-main>b,.post-comment-item.is-fish-comment .post-comment-main p{color:#fff} .post-comment-item.is-fish-comment .post-comment-main time{color:#c4d8f0} .post-comment-item.is-fish-comment .post-comment-like{background:#dceaff;border-color:#c5daf3;color:#24558f} .post-comment-content .comment input{background:#fff} @media(max-width:700px){.own-profile-stream-bar{grid-template-columns:1fr;row-gap:9px}.own-profile-stream-tabs,.own-profile-actions,.fish-auto-reply{grid-column:1;grid-row:auto}.own-profile-actions{justify-content:flex-start}} #homePage .own-profile-stream-bar .own-profile-stream-tabs button:not(.selected){background:#fff!important;border:1px solid #fff;color:#52749b} #homePage .own-profile-stream-bar .own-profile-stream-tabs button:not(.selected):hover{background:#f7faff!important;border-color:#dbe7f6;color:#315f9f} /* The combined profile feed distinguishes fish posts from owner posts. */ #feedList[data-social-view="profile"][data-profile-stream="all"] .post[data-author-type="owner"]{background:#fff!important;border-color:#d6e3f3!important} #feedList[data-social-view="profile"][data-profile-stream="all"] .post[data-author-type="fish"]{background:#e2efff!important;border-color:#c7daf4!important;box-shadow:0 8px 22px #315b9212} #feedList[data-social-view="profile"][data-profile-stream="all"] .post[data-author-type="fish"] .person b, #feedList[data-social-view="profile"][data-profile-stream="all"] .post[data-author-type="fish"] .body{color:#294d7b!important} #feedList[data-social-view="profile"][data-profile-stream="all"] .post[data-author-type="fish"] .person small, #feedList[data-social-view="profile"][data-profile-stream="all"] .post[data-author-type="fish"] .body em{color:#7186a2!important} #feedList[data-social-view="profile"][data-profile-stream="all"] .post[data-author-type="fish"] .pill{background:#d5e6fb!important;color:#315f98!important} #feedList[data-social-view="profile"][data-profile-stream="all"] .post[data-author-type="fish"] .actions{border-top-color:#c7d9ef!important} #feedList[data-social-view="profile"][data-profile-stream="all"] .post[data-author-type="fish"] .actions button, #feedList[data-social-view="profile"][data-profile-stream="all"] .post[data-author-type="fish"] .origin{color:#58708f!important} /* Latest profile palette: fish cards fade from blue on the left to white on the right. */ #feedList[data-social-view="profile"][data-profile-stream="all"] .post[data-author-type="fish"], #feedList[data-social-view="profile"][data-profile-stream="fish"] .post[data-author-type="fish"]{ background:linear-gradient(90deg,#d6e7ff 0%,#eef5ff 56%,#fff 100%)!important; border-color:#c9dcf5!important; } #feedList[data-social-view="profile"][data-profile-stream="all"] .post[data-author-type="owner"], #feedList[data-social-view="profile"][data-profile-stream="owner"] .post[data-author-type="owner"]{ background:#fff!important; border-color:#d6e3f3!important; } #homePage .identity-card.fish-identity, #homePage .identity-card.fish-identity:hover, #homePage .own-profile-identities[data-mode="fish"] .identity-card.fish-identity{ background:linear-gradient(90deg,#e5f0ff 0%,#f2f7ff 54%,#fff 100%)!important; border-color:#d4e2f3!important; } #homePage .identity-card.fish-identity .identity-copy b{color:#1e477e!important;text-shadow:none!important} /* Recommendation feed uses the same author-based palette as the personal feed. */ #feedList[data-social-view="pond"][data-post-filter="推荐"] .post[data-author-type="owner"]{ background:#fff!important; border-color:#d6e3f3!important; } #feedList[data-social-view="pond"][data-post-filter="推荐"] .post[data-author-type="fish"]{ background:linear-gradient(90deg,#d6e7ff 0%,#eef5ff 56%,#fff 100%)!important; border-color:#c9dcf5!important; } #feedList[data-social-view="pond"][data-post-filter="推荐"] .post-comment-item.is-user-comment{ background:#fff!important;border-color:#e0e9f5!important;color:#355477!important; } #feedList[data-social-view="pond"][data-post-filter="推荐"] .post-comment-item.is-fish-comment{ background:#1f4e83!important;border-color:#1f4e83!important;color:#fff!important; } #feedList[data-social-view="pond"][data-post-filter="推荐"] .post-comment-item.is-fish-comment .post-comment-main>b, #feedList[data-social-view="pond"][data-post-filter="推荐"] .post-comment-item.is-fish-comment .post-comment-main p{color:#fff!important} #feedList[data-social-view="pond"][data-post-filter="推荐"] .post-comment-item.is-fish-comment .post-comment-main time{color:#c4d8f0!important} /* Improve contrast and weight across feed entries while keeping metadata secondary. */ #homePage #feedList .post .person b{ color:#111!important; font-weight:800!important; } #homePage #feedList .post .person small{ color:#111!important; font-weight:650!important; } #homePage #feedList .post .body{ color:#111!important; font-weight:600!important; } #homePage #feedList .post .body em{ color:#111!important; font-weight:750!important; } #homePage #feedList .post .pill{ color:#111!important; font-weight:750!important; } #homePage #feedList .post .actions button, #homePage #feedList .post .origin{ color:#111!important; font-weight:650!important; } /* Feed typography: option A, Noto Sans SC with regular-weight entry text. */ #homePage #feedList .post, #homePage #feedList .post *{ font-family:"Noto Sans SC","Microsoft YaHei UI","PingFang SC",sans-serif!important; } #homePage #feedList .post .person b{ font-weight:700!important; } #homePage #feedList .post .person small{ font-weight:400!important; } #homePage #feedList .post .body, #homePage #feedList .post .body em, #homePage #feedList .post .pill, #homePage #feedList .post .actions button, #homePage #feedList .post .origin{ font-weight:400!important; } /* Home feed layout: put compose beside the pond title and give the feed full width. */ #homePage .columns{grid-template-columns:minmax(0,1fr)!important} #homePage .section-heading-row{display:flex;align-items:center;gap:16px;min-width:0} #homePage .section-heading-row h2{margin:0} #homePage .section-heading-row #compose{padding:8px 12px;white-space:nowrap} #homePage .section-title>div>p{margin:5px 0 0} #homePage .intro{align-items:center;gap:24px} #homePage .intro-reward{flex:none;width:min(300px,32%);margin:0;padding:14px 16px;border-radius:12px} #homePage .intro-reward .card-title{margin-bottom:6px} #homePage .intro-reward .card-title h3{font-size:15px} #homePage .intro-reward p{font-size:11px;line-height:1.55;margin:0 0 9px} #homePage .intro-reward .outline{font-size:11px;padding:7px 10px} .search-wrap .search{position:relative} .search-wrap .search input:not(:focus):placeholder-shown{color:transparent} .search-wrap .search input:not(:focus):placeholder-shown::placeholder{color:transparent} .search-topic-ticker{position:absolute;left:34px;right:10px;top:0;bottom:0;display:flex;align-items:center;gap:7px;overflow:hidden;pointer-events:none;color:#58739b;font-size:11px} .search-topic-ticker>b{flex:none;color:#315fa8;font-size:10px;font-weight:750} .search-topic-clip{min-width:0;overflow:hidden;white-space:nowrap} .search-topic-clip>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:transform .22s ease,opacity .22s ease} .search-topic-clip>span.is-leaving{transform:translateY(-8px);opacity:0} .search-topic-clip>span.is-entering{transform:translateY(8px);opacity:0} .search-wrap.is-active .search-topic-ticker,.search-wrap.has-query .search-topic-ticker{opacity:0} .search-trends-heading b{font-size:14px} @media(max-width:780px){#homePage .intro{align-items:flex-start}#homePage .intro-reward{width:min(240px,40%)}#homePage .section-heading-row{gap:10px}} @media(max-width:540px){#homePage .intro{display:block}#homePage .intro-reward{width:100%;margin-top:14px}#homePage .section-heading-row{flex-wrap:wrap}#homePage .section-heading-row #compose{padding:7px 10px;font-size:11px}} /* Keep the focused search and its topic menu above the hero and feed. */ .topbar{z-index:1000!important} .topbar .top-tools{z-index:1001!important} .topbar .search-wrap{z-index:1002!important} .topbar .search-trends{z-index:1003!important} /* Allow the search trend dropdown to extend below the fixed top bar. */ .topbar{overflow:visible!important} .topbar:before{clip-path:inset(62px 0 55px 0)} /* Keep trending topics within the search field width. */ .topbar .search-trends{width:100%;min-width:0;padding:8px;right:0} .topbar .search-trends-heading{align-items:flex-start;flex-direction:column;gap:3px;padding:4px 5px 7px} .topbar .search-trends-heading b{font-size:13px} .topbar .search-trends-heading small{font-size:10px} .topbar .search-trends>button{grid-template-columns:24px minmax(0,1fr);gap:4px 6px;padding:8px 5px} .topbar .search-trends>button strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px} .topbar .search-trends>button small{grid-column:2;font-size:10px;line-height:1} /* Topic dropdown lists only the ranked topic names. */ .topbar .search-trends-heading{align-items:flex-start;flex-direction:row;gap:0;padding:4px 5px 7px} .topbar .search-trends>button{grid-template-columns:24px minmax(0,1fr);row-gap:0} .topbar .search-trends-heading b,.topbar .search-trends>button .trend-rank,.topbar .search-trends>button strong{color:#315fa8} /* Make the pond/profile view switch clear and easy to spot. */ #homePage .social-tabs{gap:10px;padding:8px 2px;border-bottom-color:#d5dfec} #homePage .social-tabs button,#homePage .social-tabs button.selected{border:0;border-radius:9px;background:#315fa8;color:#fff;padding:11px 18px;font-size:16px;font-weight:750;box-shadow:0 3px 9px #244f8826} #homePage .social-tabs button.selected{background:#173b69;box-shadow:0 4px 11px #173b6940} #homePage .social-tabs button span{min-width:22px;height:22px;padding:0 7px;border-radius:12px;background:#ffffff29;color:#fff;font-size:12px;font-weight:750} /* Combine feed filters and social views into one navigation row. */ #homePage #postFilterTabs{align-items:center;gap:10px;margin-top:17px;padding:0 0 10px} #homePage #postFilterTabs>.social-tabs{display:contents;border:0;margin:0;padding:0} #homePage #postFilterTabs>button,#homePage #postFilterTabs .social-tabs button{border:0;border-radius:9px;background:#315fa8;color:#fff;padding:10px 15px;font-size:14px;font-weight:750;white-space:nowrap;box-shadow:0 3px 9px #244f8826} #homePage #postFilterTabs>button.selected,#homePage #postFilterTabs .social-tabs button.selected{background:#173b69;color:#fff;box-shadow:0 4px 11px #173b6940} #homePage #postFilterTabs button:after{display:none} #homePage #postFilterTabs .social-tabs button span{min-width:20px;height:20px;padding:0 6px;border-radius:12px;background:#ffffff29;color:#fff;font-size:11px;font-weight:750} @media(max-width:640px){#homePage #postFilterTabs{gap:7px;overflow-x:auto}#homePage #postFilterTabs>button,#homePage #postFilterTabs .social-tabs button{padding:9px 11px;font-size:12px}} /* Unified feed navigation: white idle tabs and a dark active tab. */ #homePage #postFilterTabs>button,#homePage #postFilterTabs .social-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 15px;border:1px solid #d4dfef;background:#fff;color:#315fa8;font-size:14px;line-height:22px;font-weight:750;box-shadow:none} #homePage #postFilterTabs>button.selected,#homePage #postFilterTabs .social-tabs button.selected{background:#173b69;border-color:#173b69;color:#fff;box-shadow:0 4px 11px #173b6940} #homePage #postFilterTabs .social-tabs button span{display:inline;min-width:0;height:auto;padding:0;border-radius:0;background:transparent;color:inherit;font-size:inherit;line-height:inherit;font-weight:inherit} #homePage #postFilterTabs #followingCount{font-size:12px;opacity:.8} /* Emphasize the active view with a larger background. */ #homePage #postFilterTabs{min-height:56px;gap:12px} #homePage #postFilterTabs>button,#homePage #postFilterTabs .social-tabs button{min-height:34px;padding:5px 11px;border-radius:8px;font-size:13px;line-height:22px;transition:background .18s ease,color .18s ease,padding .18s ease,box-shadow .18s ease} #homePage #postFilterTabs>button.selected,#homePage #postFilterTabs .social-tabs button.selected{min-height:46px;padding:11px 17px;border-radius:10px;font-size:14px;background:#173b69;border-color:#173b69;color:#fff;box-shadow:0 4px 12px #173b6938} /* Fish replies use a light blue surface across pond and profile comments. */ #homePage #feedList .post .post-comment-item.is-fish-comment{ background:#e2efff!important;border-color:#c9ddf7!important;color:#294d7b!important; } #homePage #feedList .post .post-comment-item.is-fish-comment .post-comment-main>b, #homePage #feedList .post .post-comment-item.is-fish-comment .post-comment-main p{color:#294d7b!important} #homePage #feedList .post .post-comment-item.is-fish-comment .post-comment-main time{color:#6b86a8!important} .comment-sort-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:#52749b;font-size:12px} .comment-sort-toolbar label{display:flex;align-items:center;gap:6px} .comment-sort-toolbar select{width:auto;padding:5px 9px;background:#fff;border:1px solid #d6e3f3;border-radius:7px;color:#355477} .comment-thread{margin-bottom:9px}.comment-thread-replies{padding-left:18px} .comment-thread-replies>button{display:block;margin:5px 0 8px auto;border:0;background:transparent;color:#4974aa;font-size:12px} .comment-reply-list[hidden]{display:none!important} .comment-reply-list .post-comment-item{margin-top:7px} #feedList .post-comment-item{position:relative;padding-right:65px;padding-bottom:28px} #feedList .comment-reply-trigger{position:absolute;right:12px;bottom:7px;border:0;background:transparent;color:#4974aa;font-size:12px;cursor:pointer} .thread-reply-composer{display:flex;gap:8px;margin:9px 0}.thread-reply-composer input{flex:1;min-width:0;background:#fff;border:1px solid #cfdef4;border-radius:7px;padding:8px;color:#294d7b} .thread-reply-composer button{background:#e2efff;border:1px solid #c9ddf7;border-radius:7px;color:#315f98;padding:6px 10px;cursor:pointer} /* Solid light blue fish cards throughout the social feed. */ #homePage #feedList[data-social-view] .post[data-author-type="fish"], #homePage .own-profile-identities .identity-card.fish-identity, #homePage .own-profile-identities .identity-card.fish-identity:hover, #homePage .own-profile-identities[data-mode="fish"] .identity-card.fish-identity{ background:#e2efff!important;background-image:none!important;border-color:#c9ddf7!important; } #homePage .fish-auto-reply{display:none!important} /* Owner cards stay solid white in every feed and profile view. */ #homePage #feedList[data-social-view] .post[data-author-type="owner"], #homePage .own-profile-identities .identity-card.owner-identity, #homePage .own-profile-identities .identity-card.owner-identity:hover, #homePage .own-profile-identities[data-mode="owner"] .identity-card.owner-identity{ background:#fff!important;background-image:none!important;border-color:#d6e3f3!important; } /* Keep uploaded cover visible above the default theme background. */ #homePage .own-profile-cover.has-custom-cover{ background-image:linear-gradient(90deg,rgba(245,249,255,.22),rgba(245,249,255,.12)),var(--profile-cover-image)!important; background-color:#edf4ff!important; background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important; } #homePage .own-profile-cover.has-custom-cover .own-profile-cover-glow{opacity:.18} /* Let the profile cover show through behind the stream controls. */ #homePage .own-profile-cover .own-profile-stream-bar{ background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important; } #homePage .own-profile-cover.has-custom-color{background:var(--profile-cover-color)!important} #homePage .own-profile-cover.has-custom-color .own-profile-cover-glow{display:none} .profile-cover-picker{width:min(380px,calc(100vw - 32px));box-sizing:border-box;padding:22px;border:1px solid #d3e1f4;border-radius:18px;background:#fff;color:#294d7b;box-shadow:0 18px 60px #193b662b} .profile-cover-picker::backdrop{background:#18345655} .cover-picker-heading{display:flex;justify-content:space-between;align-items:center;font-size:18px}.cover-picker-heading button{border:0;background:transparent;color:#6280a4;font-size:25px;cursor:pointer} .profile-cover-picker p{font-size:13px;margin:18px 0 12px}.cover-color-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.cover-color-swatches button{height:46px;border:1px solid #ccd9ea;border-radius:10px;cursor:pointer}.cover-color-swatches button[aria-pressed="true"]{outline:2px solid #376cb1;outline-offset:2px} .cover-custom-color{display:flex;align-items:center;justify-content:space-between;margin:20px 0;font-size:13px}.cover-custom-color input{width:68px;height:36px;border:1px solid #d3e1f4;border-radius:7px;padding:3px;background:#fff} .cover-picker-actions{display:flex;justify-content:space-between;gap:12px}.cover-picker-actions button{padding:9px 16px;background:#f3f7ff;border:1px solid #d3e1f4;border-radius:8px;color:#315f98;cursor:pointer}.cover-picker-actions [data-cover-upload]{background:#376cb1;color:#fff;border-color:#376cb1} /* Clip the decorative brand watermark to the top bar. */ .topbar:before{clip-path:inset(62px 0 70px 0)!important} /* Paint the watermark inside the header background, with no overflowing layer. */ .topbar:before{content:none!important;display:none!important} .topbar{background-image:linear-gradient(#ffffffe3,#ffffffe3),url("./assets/deepseek-icon.svg")!important;background-size:100% 100%,245px auto!important;background-position:center,left -61px!important;background-repeat:no-repeat!important} #homePage .intro #homeTitle,#homePage .intro #homeSubtitle{display:none!important} #homePage .intro .intro-reward{position:relative;min-height:0!important;padding:15px 17px!important;align-self:start;cursor:pointer} #homePage .intro .intro-reward .card-title{margin:0!important} #homePage .intro .intro-reward h3{margin:0!important;font-size:16px} #homePage .intro .intro-reward>p{margin:6px 0 0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px} #homePage .intro .intro-reward #officialTokenEvents{position:absolute;inset:0;width:100%;height:100%;margin:0!important;padding:0!important;opacity:0;cursor:pointer} #homePage .intro .intro-reward:focus-within{outline:2px solid #6899dc;outline-offset:2px} /* User private messages: prominent owner card and compact companion card. */ #userChatPage .user-chat-identities{display:grid!important;grid-template-columns:minmax(0,2fr) minmax(180px,1fr);gap:14px!important;align-items:stretch!important;width:100%} #userChatPage .user-chat-owner-card{order:0!important;min-height:112px!important;padding:18px!important;background:#fff!important;gap:15px!important} #userChatPage .user-chat-fish-card{order:1!important;min-height:112px!important;padding:14px!important;background:#e2efff!important;gap:12px!important} #userChatPage .user-chat-owner-card .user-chat-avatar{width:66px!important;height:66px!important;font-size:27px!important;border:0;overflow:hidden;border-radius:18px} #userChatPage .user-chat-fish-card .user-chat-avatar{width:48px!important;height:48px!important;font-size:29px!important;overflow:hidden;border-radius:14px} #userChatPage .user-chat-owner-card .user-chat-identity-copy b{font-size:20px!important;color:#234a7c!important} #userChatPage .user-chat-identity-copy{gap:5px} #userChatPage .user-chat-profile-bio,#userChatPage .user-chat-fish-bio{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;font-size:12px!important;line-height:1.6} #userChatPage .user-chat-avatar img{width:100%;height:100%;object-fit:cover} @media(max-width:640px){#userChatPage .user-chat-identities{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:8px!important}#userChatPage .user-chat-owner-card,#userChatPage .user-chat-fish-card{padding:10px!important;min-height:100px!important;flex-wrap:wrap}#userChatPage .user-chat-owner-card .user-chat-avatar{width:44px!important;height:44px!important}#userChatPage .user-chat-owner-card .user-chat-identity-copy b{font-size:16px!important}} #homePage .member-home-back{padding:9px 14px;margin-bottom:10px;background:#fff;border:1px solid #cdddf4;border-radius:9px;color:#315f98;font-size:13px;cursor:pointer} #homePage .member-home-back[hidden]{display:none!important} #userChatPage .user-chat-identities .user-chat-fish-card{align-self:end!important;min-height:74px!important;height:74px!important;padding:9px 12px!important;gap:10px!important} #userChatPage .user-chat-identities .user-chat-fish-card .user-chat-avatar{width:40px!important;height:40px!important;font-size:26px!important} #userChatPage .user-chat-fish-card .user-chat-identity-copy{gap:2px!important} #userChatPage .user-chat-fish-card .user-chat-identity-copy>small:first-child{display:none} @media(max-width:640px){#userChatPage .user-chat-identities .user-chat-fish-card{height:auto!important;min-height:74px!important;flex-wrap:nowrap}} .comment-conversation-dialog{width:min(680px,calc(100vw - 28px));max-height:85vh;padding:0;border:1px solid #cfdef2;border-radius:16px;color:#294d7b;background:#f5f8fd;box-shadow:0 20px 70px #18345640} .comment-conversation-dialog::backdrop{background:#18345666}.comment-conversation-dialog header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;border-bottom:1px solid #dce7f5}.comment-conversation-dialog header button{border:0;background:none;font-size:24px;color:#607fa4;cursor:pointer} .comment-conversation-log{height: min(55vh,520px);overflow:auto;padding:18px}.conversation-comment-row{display:flex;margin-bottom:15px}.conversation-comment-row.mine{justify-content:flex-end}.conversation-comment-bubble{max-width:85%;padding:12px 14px;border:1px solid #d5e3f6;border-radius:13px}.conversation-comment-bubble.user{background:#fff}.conversation-comment-bubble.fish{background:#e2efff}.conversation-comment-bubble b{font-size:13px}.conversation-comment-bubble time{display:block;font-size:10px;color:#8095af;margin-top:4px}.conversation-comment-bubble p{font-size:14px;line-height:1.7;white-space:pre-wrap;margin:8px 0}.conversation-comment-bubble button{display:block;margin-left:auto;background:none;border:0;color:#4974aa;font-size:12px;cursor:pointer} .comment-conversation-compose{padding:12px 18px 18px;background:#fff;border-top:1px solid #dce7f5}.conversation-reply-target{display:block;color:#7c91ac;margin-bottom:8px}.comment-conversation-compose>div{display:flex;gap:10px}.comment-conversation-compose input{min-width:0;flex:1;padding:10px;border:1px solid #cadbf4;border-radius:8px}.comment-conversation-compose button{background:#376cb1;color:#fff;border:0;border-radius:8px;padding:8px 16px;cursor:pointer} #feedList .comment-delete{position:absolute;left:12px;bottom:7px;border:0;background:transparent;color:#a17079;font-size:12px;cursor:pointer} #feedList .post-comment-item .comment-delete{left:auto!important;right:62px!important;bottom:7px!important;font-size:12px!important;line-height:normal;padding:2px 6px} #feedList .post-comment-item .comment-reply-trigger{font-size:12px!important;line-height:normal;padding:2px 6px} #feedList .post-comment-item:has([data-action="full-comment-dialog"]) .comment-delete{right:118px!important} #ownFishChatPage #clearOwnFishChat{flex:none;align-self:flex-end;border:1px solid #cad9ee;border-radius:9px;background:#fff;color:#315fa8;padding:12px 15px;font:600 13px inherit;cursor:pointer} #ownFishChatPage #clearOwnFishChat:hover{background:#eaf1fc} /* Remove the three secondary information blocks from the own-fish profile. */ #ownFishModal .own-fish-description, #ownFishModal .own-fish-facts{display:none!important} /* Keep the shared masthead and navigation rail fixed while views change. */ @media(min-width:781px){ .shell{--sidebar-width:76px} .topbar{position:fixed!important;inset:0 0 auto 0!important;width:100vw!important;height:50px!important;margin:0!important;border-bottom:0!important} .sidebar{position:fixed!important;left:0!important;top:50px!important;right:auto!important;bottom:0!important;width:76px!important;height:auto!important;min-height:0!important;max-height:none!important;border-right:0!important} main{grid-column:2;min-width:0;padding-top:50px!important} .topbar .top-tools{position:absolute!important;top:50%!important;right:clamp(12px,2vw,30px)!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:nowrap!important;gap:clamp(5px,.75vw,10px)!important;max-width:calc(100vw - 250px);margin:0!important;transform:translateY(-50%)!important} .topbar .search-wrap{flex:0 1 clamp(150px,15vw,226px)!important;width:clamp(150px,15vw,226px)!important;min-width:130px} .topbar .verify-button,.topbar .rice-wallet,.topbar .bell{flex:none!important;white-space:nowrap} } /* One consistent pale blue-grey surface across the full navigation rail. */ .sidebar{background:#eef4fb!important;background-image:none!important} @media(min-width:781px) and (max-width:980px){ .topbar .top-tools{right:10px!important;gap:5px!important;max-width:calc(100vw - 205px)} .topbar .search-wrap{flex-basis:140px!important;width:140px!important;min-width:125px} .topbar .topbar-brand{font-size:16px} .topbar .topbar-brand small{font-size:11px} } /* Desktop UI density: 125% appearance at browser 100%, with viewport compensation. */ @media(min-width:781px){ body{zoom:1.25;--client-ui-scale:1.25} .shell{width:100%;max-width:none;min-height:calc(100dvh / 1.25)} .topbar,.shell:has(#chatPage:not([hidden])) .topbar,.shell:has(#userChatPage:not([hidden])) .topbar,.shell:has(#ownFishChatPage:not([hidden])) .topbar{width:calc(100vw / 1.25)!important} .topbar .top-tools{max-width:calc(100vw / 1.25 - 250px)} body:has(#chatPage:not([hidden])),body:has(#userChatPage:not([hidden])),body:has(#ownFishChatPage:not([hidden])){--client-ui-scale:1.25;height:calc(100dvh / 1.25);min-height:0} .shell:has(#chatPage:not([hidden])),.shell:has(#userChatPage:not([hidden])),.shell:has(#ownFishChatPage:not([hidden])){height:calc(100dvh / 1.25);min-height:0} .sidebar{bottom:auto!important;height:calc(100dvh / 1.25 - 50px)!important} #bottomMeNav,#bottomMeNav:hover,#bottomMeNav:focus-visible,#bottomMeNav.active{left:0!important} } /* Current-page cue: deepen only the active rail icon for clearer wayfinding. */ .sidebar .nav.active .nav-icon{color:#10386d!important;filter:drop-shadow(0 1px 0 rgba(16,56,109,.16))} .sidebar .nav.active .nav-icon svg{stroke-width:2.2} .sidebar .nav.active{background:linear-gradient(110deg,#dce9f8,#c7dcf4);box-shadow:inset 0 0 0 1.5px #2b5f9e,0 4px 12px rgba(25,61,102,.12)} /* Slim, rounded scrollbars that fade out after scrolling stops. */ html,body,*{scrollbar-width:thin;scrollbar-color:transparent transparent} html.is-scrolling,body.is-scrolling,.is-scrolling{scrollbar-color:rgba(58,96,147,.72) transparent} *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background-color:transparent;background-clip:content-box;transition:background-color .2s ease} html.is-scrolling::-webkit-scrollbar-thumb,body.is-scrolling::-webkit-scrollbar-thumb,.is-scrolling::-webkit-scrollbar-thumb{background-color:rgba(58,96,147,.72)} *::-webkit-scrollbar-corner{background:transparent} @media(prefers-reduced-motion:reduce){*::-webkit-scrollbar-thumb{transition:none}} /* Keep desktop page controls clear of the overlaid native window buttons. */ @media(min-width:781px){ body.desktop-electron .topbar .top-tools{ right:clamp(128px,10vw,152px)!important; max-width:calc(100vw - 320px)!important; } body.desktop-electron .desktop-action-dock{ right:clamp(128px,10vw,152px)!important; } } /* Desktop top controls: calm white buttons and a shorter search field. */ @media(min-width:781px){ body.desktop-electron .topbar .search-wrap, body.desktop-electron .topbar .search-wrap .search{ height:36px!important;min-height:36px!important; } body.desktop-electron .topbar .search-wrap .search{ padding-top:4px!important;padding-bottom:4px!important; background:#fff!important;border-color:#dbe5f2!important; } body.desktop-electron #verifyButton, body.desktop-electron #walletButton, body.desktop-electron #announcementButton{ background:#fff!important;border:1px solid #d7e3f1!important; box-shadow:0 2px 8px rgba(28,64,108,.06)!important; } body.desktop-electron #announcementButton{ width:34px!important;height:34px!important;border-radius:11px!important; } } @media(min-width:781px){ html.desktop-electron #verifyButton, html.desktop-electron #walletButton, html.desktop-electron #announcementButton{ background:#fff!important;background-color:#fff!important;background-image:none!important; border-color:#d7e3f1!important;opacity:1!important; } } /* Desktop client titlebar: make all blank header space draggable, while controls stay interactive. */ body.desktop-electron .topbar{ -webkit-app-region:drag;app-region:drag; } body.desktop-electron .topbar :is(a,button,input,select,textarea,[role="button"],[contenteditable="true"]){ -webkit-app-region:no-drag;app-region:no-drag; } /* Force solid white across all button states, above the blue theme. */ body.desktop-electron .topbar #verifyButton, body.desktop-electron .topbar #walletButton, body.desktop-electron .topbar #announcementButton, body.desktop-electron .topbar #verifyButton:hover, body.desktop-electron .topbar #walletButton:hover, body.desktop-electron .topbar #announcementButton:hover{ background:#fff!important;background-color:#fff!important;background-image:none!important; border-color:#d3deec!important;color:#294f7f!important;opacity:1!important; } /* Desktop client: scroll the content viewport below the fixed masthead. */ @media(min-width:781px){ html:has(body.desktop-electron){height:100%;overflow:hidden!important} body.desktop-electron{ height:calc(100dvh / 1.25)!important;min-height:0!important; overflow:hidden!important; } body.desktop-electron .shell{ height:calc(100dvh / 1.25)!important;min-height:0!important;overflow:visible!important; } body.desktop-electron main{ position:fixed!important;top:50px!important;right:0!important;bottom:0!important;left:76px!important; width:auto!important;height:auto!important;min-height:0!important;max-height:none!important; margin:0!important;padding:0!important;overflow-x:hidden!important;overflow-y:auto!important; overscroll-behavior-y:contain;scrollbar-gutter:stable; scrollbar-width:thin;scrollbar-color:transparent transparent; } body.desktop-electron main.is-scrolling{scrollbar-color:rgba(58,96,147,.72) transparent} body.desktop-electron main::-webkit-scrollbar{width:5px!important;height:5px!important} body.desktop-electron main::-webkit-scrollbar-track{background:transparent} body.desktop-electron main::-webkit-scrollbar-thumb{border:1px solid transparent;border-radius:999px;background-color:transparent;background-clip:content-box} body.desktop-electron main.is-scrolling::-webkit-scrollbar-thumb{background-color:rgba(58,96,147,.72)} } @media(min-width:781px){ body.desktop-electron main::-webkit-scrollbar-thumb{ border-block:36px solid transparent!important; border-inline:1px solid transparent!important; border-radius:999px!important;background-clip:content-box!important; } } /* Desktop client: transparent top-right controls and a compact custom scroll thumb. */ @media(min-width:781px){ body.desktop-electron #verifyButton, body.desktop-electron #walletButton, body.desktop-electron #announcementButton, body.desktop-electron #verifyButton:hover, body.desktop-electron #walletButton:hover, body.desktop-electron #announcementButton:hover{ background:transparent!important;background-color:transparent!important;background-image:none!important; box-shadow:none!important; } body.desktop-electron main{scrollbar-width:none!important;scrollbar-color:transparent transparent!important} body.desktop-electron main::-webkit-scrollbar{display:none!important;width:0!important;height:0!important} body.desktop-electron .desktop-scroll-track{ position:fixed;top:50px;right:0;bottom:0;width:8px;z-index:1600; opacity:0;pointer-events:none;transition:opacity .18s ease;touch-action:none; } body.desktop-electron .desktop-scroll-track.visible{opacity:1;pointer-events:auto} body.desktop-electron .desktop-scroll-track[hidden]{display:none} body.desktop-electron .desktop-scroll-thumb{ position:absolute;left:2px;top:0;width:4px;height:48px; border-radius:999px;background:rgba(58,96,147,.78);cursor:grab; } body.desktop-electron .desktop-scroll-thumb:active{cursor:grabbing} } /* Desktop top-right controls: one aligned, transparent icon and search system. */ @media(min-width:781px){ body.desktop-electron .topbar .top-tools{gap:8px!important} body.desktop-electron .topbar .search-wrap, body.desktop-electron .topbar .search-wrap .search{ height:36px!important;min-height:36px!important; } body.desktop-electron .topbar .search-wrap .search{ display:flex!important;align-items:center!important;gap:8px!important; padding:0 10px!important;border:1px solid #d7e2ef!important;border-radius:11px!important; background:transparent!important;box-shadow:none!important; } body.desktop-electron .topbar .search-wrap .search input{ height:100%!important;padding:0!important;line-height:1.2!important; } body.desktop-electron .topbar #verifyButton, body.desktop-electron .topbar #walletButton, body.desktop-electron .topbar #announcementButton{ display:inline-flex!important;align-items:center!important;justify-content:center!important; box-sizing:border-box!important;height:36px!important;min-height:36px!important; padding:0 11px!important;border:1px solid #d7e2ef!important;border-radius:11px!important; background:transparent!important;background-color:transparent!important;background-image:none!important; box-shadow:none!important;color:#315783!important;line-height:1!important; } body.desktop-electron .topbar #verifyButton, body.desktop-electron .topbar #walletButton{font-size:11px!important;white-space:nowrap} body.desktop-electron .topbar #announcementButton{ width:36px!important;min-width:36px!important;padding:0!important; } body.desktop-electron .topbar #announcementButton svg{width:18px!important;height:18px!important} body.desktop-electron .topbar #verifyButton:hover, body.desktop-electron .topbar #walletButton:hover, body.desktop-electron .topbar #announcementButton:hover, body.desktop-electron .topbar .search-wrap .search:hover{ border-color:#a9c1df!important;background:transparent!important; } body.desktop-electron .topbar #verifyButton:focus-visible, body.desktop-electron .topbar #walletButton:focus-visible, body.desktop-electron .topbar #announcementButton:focus-visible, body.desktop-electron .topbar .search-wrap .search:focus-within{ outline:2px solid rgba(80,126,183,.35)!important;outline-offset:1px; } } /* Desktop: move account actions below native window controls, ordered announcement, rice, login. */ @media(min-width:781px){ body.desktop-electron .topbar .desktop-action-dock{ position:absolute!important;z-index:1005!important;top:32px!important;right:10px!important; display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important; margin:0!important;padding:0!important;transform:none!important; -webkit-app-region:no-drag;app-region:no-drag; } body.desktop-electron .topbar .top-tools{ right:clamp(190px,17vw,230px)!important; } body.desktop-electron .topbar .search-wrap{width:226px!important;} } /* Desktop client: align the search and compact account actions below the native titlebar. */ @media(min-width:781px){ body.desktop-electron .topbar .top-tools{ top:32px!important; transform:none!important; } body.desktop-electron .topbar .search-wrap, body.desktop-electron .topbar .search-wrap .search{ height:28px!important; min-height:28px!important; } body.desktop-electron .topbar .desktop-action-dock{ top:32px!important; gap:5px!important; } body.desktop-electron .topbar .desktop-action-dock :is(button,a){ height:28px!important; min-height:28px!important; padding:0 8px!important; border-radius:8px!important; font-size:10px!important; } body.desktop-electron .topbar .desktop-action-dock #announcementButton{ width:28px!important; min-width:28px!important; padding:0!important; } body.desktop-electron .topbar .desktop-action-dock #announcementButton svg{ width:14px!important; height:14px!important; } } /* Desktop client: align the search and compact account actions to the marked second row. */ @media(min-width:781px){ body.desktop-electron .topbar .top-tools{ top:23px!important; right:150px!important; transform:none!important; } body.desktop-electron .topbar .search-wrap, body.desktop-electron .topbar .search-wrap .search{ width:166px!important; min-width:0!important; height:25px!important; min-height:25px!important; flex:none!important; } body.desktop-electron .topbar .desktop-action-dock{ top:23px!important; right:6px!important; gap:4px!important; } body.desktop-electron .topbar .desktop-action-dock :is(button,a){ height:25px!important; min-height:25px!important; padding:0 6px!important; border-radius:7px!important; font-size:9px!important; } body.desktop-electron .topbar .desktop-action-dock #announcementButton{ width:30px!important; min-width:30px!important; padding:0!important; } body.desktop-electron .topbar .desktop-action-dock #announcementButton svg{ width:13px!important; height:13px!important; } } /* Match the user's marked desktop toolbar bounds. */ @media(min-width:781px){ body.desktop-electron .topbar .top-tools{ top:8px!important; right:150px!important; transform:none!important; } body.desktop-electron .topbar .search-wrap, body.desktop-electron .topbar .search-wrap .search{ box-sizing:border-box!important; width:174px!important; min-width:174px!important; height:35px!important; min-height:35px!important; flex:none!important; } body.desktop-electron .topbar .search-wrap .search{ padding:0 10px!important; border:1px solid #d7e2ef!important; border-radius:10px!important; background:#fff!important; box-shadow:none!important; } body.desktop-electron .topbar .desktop-action-dock{ top:23px!important; right:6px!important; gap:1px!important; } body.desktop-electron .topbar .desktop-action-dock :is(button,a){ display:inline-flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; height:25px!important; min-height:25px!important; margin:0!important; padding:0 5px!important; overflow:hidden!important; border:1px solid #d7e2ef!important; border-radius:7px!important; background:#fff!important; background-color:#fff!important; background-image:none!important; box-shadow:none!important; font-size:9px!important; line-height:1!important; white-space:nowrap!important; } body.desktop-electron .topbar .desktop-action-dock #announcementButton{ width:30px!important; min-width:30px!important; padding:0!important; } body.desktop-electron .topbar .desktop-action-dock #walletButton{ width:52px!important; min-width:52px!important; } body.desktop-electron .topbar .desktop-action-dock #verifyButton{ width:54px!important; min-width:54px!important; } body.desktop-electron .topbar .desktop-action-dock #announcementButton svg{ width:13px!important; height:13px!important; } } /* Keep each desktop action button inside the 50px masthead. */ @media(min-width:781px){ body.desktop-electron .topbar .desktop-action-dock #announcementButton, body.desktop-electron .topbar .desktop-action-dock #walletButton, body.desktop-electron .topbar .desktop-action-dock #verifyButton{ box-sizing:border-box!important; height:25px!important; min-height:25px!important; max-height:25px!important; margin:0!important; align-self:center!important; line-height:1!important; overflow:hidden!important; box-shadow:none!important; } } /* Latest user-marked desktop toolbar positions and colors. */ @media(min-width:781px){ body.desktop-electron .topbar .top-tools{ top:13px!important; right:192px!important; transform:none!important; } body.desktop-electron .topbar .search-wrap, body.desktop-electron .topbar .search-wrap .search{ box-sizing:border-box!important; width:202px!important; min-width:202px!important; height:34px!important; min-height:34px!important; flex:none!important; } body.desktop-electron .topbar .search-wrap .search{ background:#fff!important; border-color:#d7e2ef!important; } body.desktop-electron .topbar .desktop-action-dock{ gap:6px!important; } body.desktop-electron .topbar .desktop-action-dock #announcementButton, body.desktop-electron .topbar .desktop-action-dock #walletButton, body.desktop-electron .topbar .desktop-action-dock #verifyButton{ background:#eaf3ff!important; background-color:#eaf3ff!important; border-color:#cfe0f4!important; color:#294f7f!important; } body.desktop-electron .topbar .desktop-action-dock #announcementButton:hover, body.desktop-electron .topbar .desktop-action-dock #walletButton:hover, body.desktop-electron .topbar .desktop-action-dock #verifyButton:hover{ background:#deecfb!important; background-color:#deecfb!important; } } @media(min-width:781px){ body.desktop-electron .topbar .top-tools{top:8px!important;transform:none!important} } /* Align the desktop brand watermark in a dedicated clipped layer, and enlarge the announcement control. */ @media(min-width:781px){ body.desktop-electron .topbar{ isolation:isolate!important; background:#fff!important; background-image:none!important; } body.desktop-electron .topbar:before{ content:""!important; display:block!important; position:absolute!important; z-index:0!important; pointer-events:none!important; left:0!important; top:0!important; width:216px!important; height:50px!important; clip-path:inset(0)!important; background:url("./assets/deepseek-icon.svg") left -61px/245px auto no-repeat!important; filter:grayscale(1)!important; opacity:.11!important; } body.desktop-electron .topbar .topbar-brand{ position:relative!important; z-index:1!important; } body.desktop-electron .topbar .top-tools{ z-index:1!important; } body.desktop-electron .topbar .desktop-action-dock{ z-index:1005!important; gap:9px!important; } body.desktop-electron .topbar .desktop-action-dock #announcementButton{ position:relative!important; top:-15px!important; width:46px!important; min-width:46px!important; height:35px!important; min-height:35px!important; max-height:35px!important; border-radius:10px!important; } body.desktop-electron .topbar .desktop-action-dock #announcementButton svg{ width:16px!important; height:16px!important; } } /* Keep the left brand image within the title area and fit the two right actions. */ @media(min-width:781px){ body.desktop-electron .topbar:before{ width:196px!important; height:50px!important; overflow:hidden!important; clip-path:inset(0)!important; opacity:.08!important; } body.desktop-electron .topbar .desktop-action-dock #walletButton, body.desktop-electron .topbar .desktop-action-dock #verifyButton{ box-sizing:border-box!important; position:relative!important; top:0!important; height:22px!important; min-height:22px!important; max-height:22px!important; padding-top:0!important; padding-bottom:0!important; line-height:1!important; overflow:hidden!important; } } @media(min-width:781px){ body.desktop-electron .topbar:before{ filter:none!important; opacity:.12!important; } body.desktop-electron .topbar .desktop-action-dock #walletButton, body.desktop-electron .topbar .desktop-action-dock #verifyButton{ top:-4px!important; } } @media(min-width:781px){ body.desktop-electron .topbar:before{left:8px!important} body.desktop-electron .topbar .desktop-action-dock #walletButton, body.desktop-electron .topbar .desktop-action-dock #verifyButton{ background:#fff!important; background-color:#fff!important; background-image:none!important; border-color:#d7e2ef!important; } } @media(min-width:781px){ body.desktop-electron .topbar .desktop-action-dock #walletButton{ display:none!important; } } @media(min-width:781px){ body.desktop-electron .topbar .desktop-action-dock{ right:138px!important; } body.desktop-electron .topbar .desktop-action-dock #verifyButton{ display:none!important; } } /* Keep the own-fish dialog backdrop tint, but never blur account or page text behind it. */ #ownFishModal::backdrop{ -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }