:root { /* Tell the browser the app is dark-themed so native widgets (form * controls, scrollbars, text-selection highlights, browser chrome) * render dark by default. Without this, Chrome/Android Safari paint * these in light mode even on a dark app, which can flash light when * inputs focus or the keyboard appears. */ color-scheme: dark; /* Background */ --color-bg: #060d10; --color-bg-chat: #0a1014; --color-bg-elevated: #141e26; /* Text */ --color-text-primary: #f0f4f8; /* Accent */ --color-accent: #00e5a0; --color-accent-dark: #00b87e; --color-accent-hover: #33f0ba; --color-accent-sky: #38bdf8; /* Semantic */ --color-danger: #f43f5e; --color-danger-dark: #d4293e; --color-warning: #fbbf24; --color-warning-dark: #d97706; /* Neutrals */ --color-white: #FFFFFF; --color-black: #000000; /* UI */ --color-nav-inactive: #C6C6C6; --color-border: #DEDEDE; --color-row-alt: #EFEFEF; --color-badge: #ff0000; --color-dev: #818cf8; --color-night: #818cf8; /* Message time backgrounds */ --color-msg-time-right: #092a25; --color-msg-time-left: #11191f; /* Toast */ --color-toast-error: #ffd8df; --color-toast-warn: #ffeed1; --color-toast-info: #d9fff0; } * { scrollbar-width: none; -ms-overflow-style: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; font-family: 'Montserrat', sans-serif; touch-action: pan-y; } *:focus { outline: none; } *::-webkit-scrollbar { display: none; } html, body { margin: 0px; padding: 0px; border: 0px; box-sizing: border-box; position: relative; vertical-align:top; font-family: 'Montserrat', sans-serif; overflow:hidden; background-color: var(--color-bg); -webkit-overscroll-behavior: none; overscroll-behavior: none; touch-action: none; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } html { height: 100%; width: 100%; } body { position:absolute; top:env(safe-area-inset-top, 0); left:0px; width:100%; height:100%; height:calc(100% - env(safe-area-inset-bottom, 0)); } /* ===== Safe-area fill ================================================ * is offset by env(safe-area-inset-top/bottom) so the page * gradient doesn't spill into the notch / home-indicator zones on * iPhone. The zones themselves then fall through to 's solid * background. On iOS Safari PWA that can still visually leak (WebKit * paints body's gradient slightly outside its box around transitions / * translucent status bar). * * Paint opaque strips directly over both safe-area zones so nothing * leaks regardless of platform. On devices with no safe-area insets * (most Androids, desktop PWA) env() resolves to 0 and the strips * collapse to zero height — inert. * * Base colour is --color-bg (#060d10) which matches the near-opaque * rgba(6,13,16,0.97) used by the top bar / bottom nav on every page, * and the rgba(6,13,16,0.9) composer bar on the chat page. */ body::before, body::after { content: ''; position: fixed; left: 0; right: 0; background: var(--color-bg); pointer-events: none; /* Above the top bar (z:10) / bottom nav (z:9) so even if a background ever bleeds into the strip, this still covers it. Below the loading bar (z:999999) and modals so overlays remain on top. */ z-index: 100; } body::before { top: 0; height: env(safe-area-inset-top, 0); } body::after { bottom: 0; height: env(safe-area-inset-bottom, 0); } a { text-decoration:none; color:inherit; } pre { margin:0px; padding:0px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } img { -webkit-transition: opacity 342ms ease; transition: opacity 342ms ease; } img[data-src] { opacity: 0; pointer-events: none; min-width: 1px; min-height: 1px; } img.img_loaded { opacity: 1; pointer-events: auto !important; } .pending_invites_cont { margin-bottom:20px !important; } .hb_button { color: var(--color-bg); font-size: 16px; width: 30px; height: 30px; border-radius: 10px; background-color: var(--color-white); display: flex; align-items: center; justify-content: center; text-align: center; margin: 0px; padding: 0px; border: 0px; } .hbbm_cont { display:flex; } .hb_button_multi { color: var(--color-bg); font-size: 16px; width: 30px; height: 30px; border-radius: 10px; background-color: var(--color-white); display: flex; align-items: center; justify-content: center; text-align: center; margin: 0px; padding: 0px; border: 0px; } #mop_wrap { position:absolute; top:0px; left:0px; width:100%; height:100%; display:none; z-index:999; } #message_options_popup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:20px; width:60%; height:auto; background-color:var(--color-bg-elevated); color:var(--color-text-primary); border-radius:20px; display:none; z-index:9999; align-items: center; justify-content: center; text-align: center; flex-direction: column; } .mop_title { font-size:20px; text-align:center; font-weight:bold; } #attachments_wrap { position:absolute; top:0px; left:0px; width:100%; height:100%; display:none; z-index:999; } #attachments_popup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:20px; width:60%; height:auto; background-color:var(--color-bg-elevated); color:var(--color-text-primary); border-radius:20px; display:none; align-items: center; justify-content: center; text-align: center; flex-direction: column; z-index:9999; } #mop_message { border:0px; background-color:var(--color-bg-elevated); color:var(--color-bg); width:100%; margin:0px; padding:0px; opacity:0; height:20px; } .mop_button { border-radius:10px; border:0px; background-color:var(--color-white); color:var(--color-bg); width:100px; margin:0px; padding:10px 10px; font-weight:bold; font-size:14px; } .mop_buttons_cont { display:flex; justify-content: center; text-align: center; align-items: center; } #delete_message { margin-left:30px; } #chats_list_cont, #getContacts_API { contain: layout style; } .cm_finder { contain: layout style paint; } .chat_cont { display:flex; align-items: center; position:relative; margin-bottom:20px; padding-top:20px; border-top:1px solid var(--color-border); content-visibility: auto; contain-intrinsic-size: auto 80px; } .chat_cont_first { border-top:0px; padding-top:0px; } .chat_cont_picture { width:60px; height:60px; } .chat_cont_picture img { object-fit:cover; object-position: center; border-radius: 14px; width:100%; height:100%; } .contact_pic { width:150px; height:150px; margin-left:auto; margin-right:auto; margin-bottom:20px; } .contact_pic img { width:100%; height:100%; border-radius: 14px; object-fit:cover; object-position: center; } .contact_name { text-align:center; font-size:24px; font-weight:bold; width:100%; height:auto; } .fr_list_title { font-weight:bold; } .fr_list_cont { margin-top:20px; margin-bottom:20px; } .pending_fr_banner { background-color:var(--color-bg-elevated); color:var(--color-text-primary); display:flex; justify-content: space-between; align-items: center; height:auto; border-radius:14px; font-weight:bold; padding:10px 20px; margin-bottom:20px; } .contact_options { display:flex; justify-content: center; align-items: center; text-align: center; margin-top:30px; margin-bottom:20px; width:100%; gap:40px; } .contact_option_indv { text-align: center; background-color:var(--color-bg-elevated); color:var(--color-text-primary); padding:10px 20px; border-radius:14px; border:0px; height:100px; width:100px; display:flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; } .option_icon { font-size:30px; text-align: center; } .single_co { margin-right:0px !important; } .option_title { font-size:12px; text-align: center; font-weight:bold; margin-top:10px; } .chat_name_sub { font-size:12px; width:100%; font-weight:normal; margin: 0px; padding: 0px; word-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .chat_cont_name { margin-left:20px; width: calc(100% - 154px); } .chat_name_title { font-size:16px; font-weight:bold; width:100%; } .chat_unread_messages { border-radius:50%; background-color:var(--color-bg-elevated); width:25px; height:25px; display:flex; align-items: center; justify-content: center; text-align: center; color:var(--color-white); font-weight:bold; margin-top:5px; float:right; } .chat_right_info { position:absolute; right:0px; top:50%; transform: translateY(-50%); font-size:12px; text-align:right; } .chat_right_dt { color:var(--color-black); } .bottom_message { position:relative; bottom:0px; left:0px; min-height:30px; height:auto; padding:20px; width:calc(100% - 40px); background-color:var(--color-bg-elevated); display: flex; align-items: center; overflow-y:visible; overflow-x:visible; overscroll-behavior: none; touch-action: pan-y; z-index:8; } .message_process { position:absolute; top:0px; left:0px; width:100%; height:100%; display:flex; text-align: center; justify-content: center; align-items: center; z-index:1000000000; font-weight:bold; font-size:20px; color:var(--color-white); background-color:var(--color-bg-elevated); display:none; } .bottom_nav { height:70px; justify-content: center; font-weight:bold; background-color: var(--color-bg-elevated); color:var(--color-white); padding:0px; margin:0px; width:100% !important; z-index:9; } .bnm_inner { width:100%; height:100%; display: flex; align-items: center; justify-content: space-between; text-align: center; background-color: var(--color-bg-elevated); } .bnm_item { font-size:32px; width:100%; height:100%; display:flex; align-items: center; text-align: center; justify-content: center; background-color:var(--color-bg-elevated); color:var(--color-nav-inactive); } .bnm_item a { display:flex; align-items: center; text-align: center; justify-content: center; line-height: 1; position: relative; } .bnm_selected { color:var(--color-white); } .bottom_message #user_message { display: block; max-height:100px; overflow-x: hidden; overflow-y: hidden; width:calc(100% - 110px); resize:none; min-height: 20px; line-height: 20px; background-color:var(--color-white); color:var(--color-black); margin:0px; padding:5px; font-size:14px; height:20px; border:0px; border-radius:10px; margin-left:50px; /* NO overscroll-behavior — textarea has overflow:hidden so wheel events should bubble to the parent chat scroll container. Setting overscroll-behavior:none here captured wheels over the input strip and dropped them on the floor. */ touch-action: manipulation; -webkit-overflow-scrolling: touch; } .bottom_message button { position:absolute; bottom:20px; margin:0px; padding:0px; border:0px; height:30px; width:30px; background-color:var(--color-white); border-radius: 10px; color:var(--color-bg); font-size:16px; display:flex; align-items: center; justify-content: center; text-align: center; } .bottom_message #attach_message { left:20px; } .bottom_message #send_message { right:20px; font-size:24px; } .indv_message { border-radius:12px; margin-bottom:20px; padding:10px; padding-right:46px; width:auto; max-width:80%; position:relative; display:flex; flex-direction: column; clear:both; text-align:left; color:var(--color-white); overflow:hidden; font-size:14px; } .indv_message pre a { text-decoration: underline; } .indv_message_name { font-weight:bold; margin-bottom:5px; } .indv_message_hidden_st { display:none; } .date_line { height:auto; width:50%; text-align:center; padding:10px; font-size:14px; font-weight:bold; clear:both; margin-bottom:20px; background-color:var(--color-bg-elevated); color:var(--color-text-primary); border-radius:10px; margin-left:auto; margin-right:auto; } .system_line { width:80%; } .indv_message_info_cont { width:26px; height: calc(100% - 20px); position:absolute; top:10px; right:10px; text-align:right; } .indv_message_info { position:absolute; font-size:10px; text-align:right; bottom:0px; right:0px; z-index:2; min-height:20px; width:100%; display:flex; align-items: flex-end; justify-content: flex-end; } .indv_message_moreinfo { position:absolute; font-size:14px; font-weight:900; letter-spacing: 1.5px; line-height: 10px; text-align:right; top:0px; right:0px; z-index:1; width:100%; display:flex; align-items: flex-start; justify-content: flex-end; } .message_right { float:right; background-color:var(--color-bg-elevated); } .message_left { float:left; background-color:rgba(18, 26, 32, 0.92); } .chat_top_info { position:relative; top:0px; left:0px; height:24px; width:calc(100% - 40px); padding:20px; background-color:var(--color-bg-elevated); font-weight:bold; font-size:24px; z-index:10; display: flex; align-items: center; /* NO overflow / overscroll-behavior here — if we set overflow:hidden, browsers (Chromium especially) treat the header as a scroll container and capture wheel events over the top 60px strip. Combined with overscroll-behavior:none, wheel events die there instead of propagating to .chats_cont. Content fits by design (fixed 24px height + 20px padding), so overflow isn't needed. */ touch-action: pan-y; } .cti_cont { justify-content: space-between; } .cti_left { display:flex; align-items: center; } .cti_right { color: var(--color-bg); font-size:16px; width:30px; height:30px; border-radius: 10px; background-color: var(--color-white); display: flex; align-items: center; justify-content: center; text-align: center; margin: 0px; padding: 0px; border: 0px; } .cti_right a { display: flex; align-items: center; justify-content: center; text-align: center; } .header_top { justify-content: space-between; color:var(--color-white); } .header_text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .header_button { flex-shrink: 0; } .chat_other_name { color: var(--color-white); margin-left: 20px; margin-right: 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: calc(100vw - 140px); font-size:20px; } #chat_online_status { font-size:12px; font-weight:normal; } .chat_back_button { color: var(--color-bg); font-size:24px; width:30px; height:30px; border-radius: 10px; background-color: var(--color-white); display: flex; align-items: center; justify-content: center; text-align: center; margin: 0px; padding: 0px; border: 0px; } .chat_back_button a { display: flex; align-items: center; justify-content: center; text-align: center; } .chats_cont { position:relative; background-color: var(--color-white); padding:20px; width:calc(100% - 40px); overflow-y: scroll; overflow-x: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch; transform: translateZ(0); padding-top: 40px; padding-bottom: 40px; height: calc(100% - 214px); font-size: 18px; } .chat_page { padding-bottom:20px; height: calc(100% - 194px); } .settings_page { padding:20px; padding-top:40px; padding-bottom:40px; height:calc(100% - 214px); font-size:18px; } .contacts_page { padding-bottom:20px; height: calc(100% - 194px); } .settings_returnMessage { background-color:var(--color-bg-elevated); border-radius:14px; padding:20px; color:var(--color-text-primary); text-align:center; margin-bottom:20px; font-weight:bold; } .settings_item { margin-bottom:20px; } .settings_item form { display:flex; } .settings_item input { font-size:17px; margin:0px; padding:15px; width:calc(100% - 122px); margin-right:10px; border-radius:12px; border:1px solid rgba(255, 255, 255, 0.1); } .settings_item button { font-size:17px; font-weight:bold; padding:15px; text-align:center; height:auto; margin:0px; border:0px; border-radius:12px; background-color:var(--color-bg-elevated); border:1px solid rgba(255, 255, 255, 0.1); color:var(--color-text-primary); width:100px; } .uds_table { font-size:12px; border-radius:14px; border:1px solid rgba(255, 255, 255, 0.1); } .uds_table_row { text-align:left; padding:10px; border-bottom:1px solid rgba(255, 255, 255, 0.06); display:flex; justify-content: space-between; align-items:center; } .uds_table_row:last-child { border-bottom:0px; } .udstr_right { font-size:24px; margin-left:20px; } .udstr_right button { color: var(--color-text-primary); font-size:18px; width:32px; height:32px; border-radius: 10px; background-color: var(--color-bg-elevated); display: flex; align-items: center; justify-content: center; text-align: center; margin: 0px; padding: 0px; border: 0px; } .ld_buttons { display:block !important; text-align:center; margin-top:10px; } .ld_buttons button { width:100%; display:block; } .settings_item_title { font-weight:bold; margin-bottom:10px; font-size:20px; line-height:0.9; } .ap_inner { display:flex; align-items: center; } .ap_inner button { margin-left:10px; } .ap_inner img { border-radius: 12px; object-fit:cover; height:53px; width:53px; } .ap_choose_file { margin-bottom:0px; } .ap_choose_file .settings_item_title { margin-bottom:20px; } .ap_choose_file form { display:block; } .ap_choose_file input { display:block; border:0px; margin:0px; padding:0px; border-radius:0px; } .ap_choose_file button { display:block; margin-top:20px; width:100%; } .change_number form { display:block; } .change_number input { margin-top:5px; margin-right:0px; width:calc(100% - 12px); margin-bottom:20px; } .change_number button { width:100%; } .cn_subtext { font-size:14px; margin-bottom:20px; } #new_messages_button { position:absolute; top:-60px; right:20px; background-color:var(--color-bg-elevated); color:var(--color-text-primary); height:40px; width:40px; border-radius:10px; display: flex; align-items: center; text-align:center; justify-content: center; } #new_messages_button i { font-size:30px; line-height:1; } #chatbox { position:relative; padding:20px; padding-bottom:0px; width:calc(100% - 40px); height:calc(100% - 160px); min-height:calc(100% - 240px); max-height:calc(100% - 160px); overflow-y: scroll; overflow-x: hidden; overscroll-behavior: none; background-color:var(--color-white); background-repeat: no-repeat; background-position: center; background-size: cover; } .chatbox_long { height:calc(100% - 84px) !important; min-height:calc(100% - 84px) !important; max-height:calc(100% - 84px) !important; } .chatbox_loading { position:fixed; inset:0; top:env(safe-area-inset-top, 0); text-align: center; display:flex; vertical-align:middle; justify-content: center; align-items: center; background-color: var(--color-bg); z-index:9; font-size:24px; font-weight:bold; color:var(--color-white); } .chatbox_loading_inner { display:flex; flex-direction: column; justify-content: center; align-items: center; vertical-align: middle; text-align: center; } .cli_spin { display:flex; justify-content: center; align-items: center; vertical-align: middle; text-align: center; font-size:48px; } .cli_text { display:flex; justify-content: center; align-items: center; vertical-align: middle; text-align: center; margin-top:20px; } .chat_info_cont { position:relative; background-color: var(--color-white); padding:40px; padding-left:20px; padding-right:20px; width:calc(100% - 40px); height:calc(100% - 144px); overflow-y: scroll; overflow-x: hidden; overscroll-behavior: none; } /* ===== AUTH PAGE ===== */ .moo-auth { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; overflow-y: auto; overflow-x: hidden; overscroll-behavior: none; background: var(--color-bg); z-index: 1; } .moo-auth::before, .moo-auth::after { content: ''; flex: 1 0 24px; } .moo-auth__bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .moo-auth__orb { position: absolute; border-radius: 50%; will-change: transform; } .moo-auth__orb--1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(14, 165, 233, 0.5) 0%, transparent 70%); top: -10%; right: -5%; animation: mooOrb1 20s ease-in-out infinite; } .moo-auth__orb--2 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(99, 102, 241, 0.45) 0%, transparent 70%); bottom: -15%; left: -10%; animation: mooOrb2 25s ease-in-out infinite; } .moo-auth__orb--3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(244, 63, 94, 0.35) 0%, transparent 70%); top: 40%; left: 50%; margin-left: -200px; animation: mooOrb3 30s ease-in-out infinite; } @keyframes mooOrb1 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(80px, -120px) scale(1.1); } 50% { transform: translate(-40px, -60px) scale(0.9); } 75% { transform: translate(60px, 40px) scale(1.05); } } @keyframes mooOrb2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-100px, 80px) scale(1.15); } 66% { transform: translate(60px, -100px) scale(0.95); } } @keyframes mooOrb3 { 0%, 100% { transform: translate(0, 0) scale(1); } 20% { transform: translate(100px, 50px) scale(0.9); } 40% { transform: translate(-60px, 120px) scale(1.1); } 60% { transform: translate(-120px, -40px) scale(1.05); } 80% { transform: translate(40px, -80px) scale(0.95); } } .moo-auth__noise { position: absolute; inset: 0; opacity: 0.035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; } /* Glass card */ .moo-auth__card { position: relative; z-index: 2; width: 100%; max-width: 420px; flex-shrink: 0; padding: 48px 40px; box-sizing: border-box; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 24px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 24px 80px rgba(0, 0, 0, 0.4); animation: mooCardIn 0.6s ease-out forwards; } @keyframes mooCardIn { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Staggered entrance */ .moo-auth__card > * { opacity: 0; animation: mooFadeUp 0.5s ease-out forwards; } .moo-auth__card > *:nth-child(1) { animation-delay: 0.08s; } .moo-auth__card > *:nth-child(2) { animation-delay: 0.14s; } .moo-auth__card > *:nth-child(3) { animation-delay: 0.2s; } .moo-auth__card > *:nth-child(4) { animation-delay: 0.26s; } .moo-auth__card > *:nth-child(5) { animation-delay: 0.32s; } .moo-auth__card > *:nth-child(6) { animation-delay: 0.38s; } .moo-auth__card > *:nth-child(7) { animation-delay: 0.44s; } @keyframes mooFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Logo */ .moo-auth__logo { text-align: center; margin-bottom: 32px; } .moo-auth__logo a { display: inline-block; text-decoration: none; transition: transform 0.3s ease; } .moo-auth__logo a:hover { transform: scale(1.05); } .moo-auth__logo img { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 0 40px rgba(0, 229, 160, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.08); } /* Title + Subtitle */ .moo-auth__title { font-size: 28px; font-weight: 800; color: var(--color-text-primary); margin: 0 0 8px; letter-spacing: -0.5px; } .moo-auth__subtitle { font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, 0.45); margin: 0 0 32px; line-height: 1.5; } /* Form fields */ .moo-auth__field { position: relative; margin-bottom: 24px; } .moo-auth__field-icon { position: absolute; left: 0; bottom: 13px; color: rgba(255, 255, 255, 0.25); font-size: 15px; width: 20px; text-align: center; transition: color 0.3s; pointer-events: none; } .moo-auth__field input { width: 100%; background: transparent; border: none; border-bottom: 2px solid rgba(255, 255, 255, 0.1); color: var(--color-text-primary); padding: 22px 0 10px 32px; font-size: 16px; font-weight: 500; font-family: 'Montserrat', sans-serif; transition: border-color 0.3s; box-sizing: border-box; border-radius: 0; -webkit-appearance: none; user-select: text; -webkit-user-select: text; touch-action: manipulation; } .moo-auth__field input:focus { border-bottom-color: var(--color-accent); } .moo-auth__field label { position: absolute; left: 32px; top: 18px; color: rgba(255, 255, 255, 0.35); font-size: 16px; font-weight: 500; pointer-events: none; transition: top 0.25s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .moo-auth__field input:focus + label, .moo-auth__field input:not(:placeholder-shown) + label { top: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-accent); } .moo-auth__field:has(input:focus) .moo-auth__field-icon { color: var(--color-accent); } .moo-auth__field:has(input:not(:placeholder-shown)) .moo-auth__field-icon { color: rgba(255, 255, 255, 0.45); } /* Submit button */ .moo-auth__btn { width: 100%; padding: 16px 24px; margin-top: 8px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); border: none; border-radius: 14px; color: var(--color-bg); font-weight: 700; font-size: 16px; font-family: 'Montserrat', sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; touch-action: manipulation; } .moo-auth__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 229, 160, 0.25); } .moo-auth__btn:active { transform: translateY(0) scale(0.98); } .moo-auth__btn i { font-size: 14px; transition: transform 0.3s; } .moo-auth__btn:hover i { transform: translateX(3px); } .moo-auth__btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.6s ease; } .moo-auth__btn:hover::before { left: 100%; } .moo-auth__btn:disabled { opacity: 0.7; cursor: default; } .moo-auth__btn:disabled:hover { transform: none; box-shadow: none; } .moo-auth__btn:disabled::before { display: none; } /* Switch link (login <-> register) */ .moo-auth__switch { margin-top: 28px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.4); font-weight: 500; } .moo-auth__switch a { color: var(--color-accent); font-weight: 700; margin-left: 4px; transition: color 0.2s; text-decoration: none; } .moo-auth__switch a:hover { color: var(--color-accent-hover); } /* Account deleted banner */ .moo-auth__deleted-banner { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 14px; background: rgba(244, 63, 94, 0.08); border: 1px solid rgba(244, 63, 94, 0.15); color: rgba(244, 63, 94, 0.85); font-size: 14px; font-weight: 600; margin-bottom: 24px; } .moo-auth__deleted-banner i { font-size: 16px; flex-shrink: 0; } /* Invite-only notice */ .moo-auth__invite-note { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 14px; background: rgba(14, 22, 28, 0.90); border: 1px solid rgba(255, 255, 255, 0.06); margin-top: 24px; } .moo-auth__invite-note > i { color: rgba(255, 255, 255, 0.25); font-size: 14px; margin-top: 2px; flex-shrink: 0; } .moo-auth__invite-note strong { display: block; color: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 700; margin-bottom: 4px; } .moo-auth__invite-note p { margin: 0; color: rgba(255, 255, 255, 0.35); font-size: 13px; line-height: 1.5; } /* Auth mobile responsive */ @media (max-width: 480px) { .moo-auth::before, .moo-auth::after { flex: 1 0 16px; } .moo-auth__card { padding: 32px 24px; border-radius: 20px; max-width: calc(100% - 32px); } .moo-auth__title { font-size: 24px; } .moo-auth__field input { font-size: 15px; } .moo-auth__orb--1 { width: 300px; height: 300px; } .moo-auth__orb--2 { width: 350px; height: 350px; } .moo-auth__orb--3 { width: 250px; height: 250px; margin-left: -125px; } } /* ===== CONTACTS PAGE OVERHAUL ===== */ /* Page background — aurora gradient on body when contacts page is active */ html:has(.contacts_page) { background: var(--color-bg); } body:has(.contacts_page) { background: radial-gradient(ellipse at 75% 15%, rgba(14, 165, 233, 0.14) 0%, transparent 50%), radial-gradient(ellipse at 25% 85%, rgba(99, 102, 241, 0.11) 0%, transparent 50%), radial-gradient(ellipse at 55% 55%, rgba(244, 63, 94, 0.07) 0%, transparent 40%), var(--color-bg); } /* Header — dark glass */ body:has(.contacts_page) .chat_top_info.header_top { background: rgba(6, 13, 16, 0.97); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } body:has(.contacts_page) .hb_button { background: rgba(24, 32, 40, 0.92); color: var(--color-text-primary); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; } body:has(.contacts_page) .hb_button:hover { background: rgba(0, 229, 160, 0.15); border-color: rgba(0, 229, 160, 0.3); color: var(--color-accent); } /* Bottom nav — dark glass */ body:has(.contacts_page) .bottom_nav { background: rgba(6, 13, 16, 0.97); border-top: 1px solid rgba(255, 255, 255, 0.06); } body:has(.contacts_page) .bnm_inner, body:has(.contacts_page) .bnm_item { background: rgba(6, 13, 16, 0.85); } body:has(.contacts_page) .bnm_item { color: rgba(255, 255, 255, 0.3); } body:has(.contacts_page) .bnm_selected { color: var(--color-accent); } /* Content area — transparent so aurora shows through */ .contacts_page { background: transparent !important; color: var(--color-text-primary); padding-top: 20px !important; padding-bottom: 20px !important; height: calc(100% - 174px) !important; } /* Contact list items — glass cards */ .contacts_page .chat_cont { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 16px; padding: 16px !important; margin-bottom: 12px !important; transition: background 0.25s, border-color 0.25s; } .contacts_page .chat_cont:active { background: rgba(24, 32, 40, 0.92); } .contacts_page #getContacts_API > a:last-child .chat_cont, .contacts_page .fr_list_cont > a:last-child .chat_cont { margin-bottom: 0 !important; } .contacts_page .chat_cont_first { border: 1px solid rgba(255, 255, 255, 0.06) !important; padding-top: 16px !important; } .contacts_page .chat_cont_picture img { border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); } .contacts_page .chat_cont_name { width: calc(100% - 80px); } .contacts_page .chat_name_title { color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* "No contacts" empty state */ .contacts_page #getContacts_API:empty, .contacts_page #getContacts_API:not(:has(.chat_cont)) { color: rgba(255, 255, 255, 0.35); text-align: center; padding: 60px 0; font-size: 15px; } /* Pending friend requests banner — accent glass */ .contacts_page .pending_fr_banner { background: rgba(0, 229, 160, 0.08); border: 1px solid rgba(0, 229, 160, 0.15); border-radius: 16px; color: var(--color-text-primary); padding: 16px 20px; transition: background 0.25s; } .contacts_page .pending_fr_banner:active { background: rgba(0, 229, 160, 0.14); } .contacts_page .pending_fr_banner .pfr_number { background: var(--color-accent); color: var(--color-bg); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; } /* Friend request list titles */ .contacts_page .fr_list_title { color: rgba(255, 255, 255, 0.5); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; } /* ---- Profile card (individual contact & own profile) ---- */ .moo-profile-card { position: relative; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 24px; padding: 32px; text-align: center; margin-bottom: 8px; } .contacts_page .contact_pic { width: 110px; height: 110px; margin: 0 auto 20px; } .contacts_page .contact_pic img { border-radius: 24px; box-shadow: 0 0 40px rgba(0, 229, 160, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.08); } .contacts_page .contact_name { color: var(--color-text-primary); font-size: 24px; } .contacts_page .contact_mn_display { color: rgba(255, 255, 255, 0.4); font-size: 15px; margin-top: 4px; } .contacts_page .contact_real_name { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.35); margin-top: 2px; } .contacts_page .contact_last_online { color: rgba(255, 255, 255, 0.45); font-size: 13px; margin-top: 12px; } .contacts_page .contact_last_online b { color: rgba(255, 255, 255, 0.6); } .contacts_page .contact_timezone { color: rgba(255, 255, 255, 0.35); font-size: 13px; } .contacts_page .contact_timezone b { color: rgba(255, 255, 255, 0.5); } /* Contact action buttons */ .contacts_page .contact_options { gap: 12px; margin-top: 16px; margin-bottom: 0; } .contacts_page .contact_option_indv { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; color: var(--color-text-primary); width: 110px; height: 100px; cursor: pointer; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .contacts_page .contact_option_indv:hover { background: rgba(0, 229, 160, 0.08); border-color: rgba(0, 229, 160, 0.2); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } .contacts_page .contact_option_indv:active { transform: translateY(0); } .contacts_page .option_icon { font-size: 24px; color: var(--color-accent); } .contacts_page .option_title { color: rgba(255, 255, 255, 0.6); font-size: 11px; font-weight: 600; letter-spacing: 0.3px; } .contacts_page .moo-btn-danger:hover { background: rgba(244, 63, 94, 0.1) !important; border-color: rgba(244, 63, 94, 0.25) !important; } .contacts_page .moo-btn-danger .option_icon { color: var(--color-danger); } .contacts_page .moo-btn-success:hover { background: rgba(0, 229, 160, 0.12) !important; border-color: rgba(0, 229, 160, 0.25) !important; } .contacts_page .co_contact_form { gap: 12px; } .contacts_page .coy_form { gap: 12px; } /* ---- Form cards (add contact, create/join group) ---- */ .contacts_page .moo-form-card { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 24px; padding: 36px 32px; } .contacts_page .moo-form-icon { font-size: 32px; color: var(--color-accent); margin-bottom: 16px; } .contacts_page .moo-form-card .settings_item_title { color: var(--color-text-primary); font-size: 22px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; } .contacts_page .moo-form-card .cn_subtext { color: rgba(255, 255, 255, 0.4); font-size: 14px; line-height: 1.6; margin-bottom: 28px; } .contacts_page .moo-form-card .cn_input_title { color: rgba(255, 255, 255, 0.4); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .contacts_page .moo-form-card form { display: block; } .contacts_page .moo-form-card input { background: transparent !important; border: none !important; border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important; color: var(--color-text-primary) !important; padding: 14px 0 !important; font-size: 16px !important; font-weight: 500; font-family: 'Montserrat', sans-serif; width: 100% !important; margin: 0 0 24px 0 !important; border-radius: 0 !important; -webkit-appearance: none; transition: border-color 0.3s; user-select: text; -webkit-user-select: text; touch-action: manipulation; } .contacts_page .moo-form-card input:focus { border-bottom-color: var(--color-accent) !important; } .contacts_page .moo-form-card input[readonly] { color: rgba(255, 255, 255, 0.4) !important; border-bottom-color: rgba(255, 255, 255, 0.05) !important; } .contacts_page .moo-form-card button[type="submit"] { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important; color: var(--color-bg) !important; border: none !important; border-radius: 14px !important; padding: 16px 24px !important; font-weight: 700 !important; font-size: 16px !important; font-family: 'Montserrat', sans-serif; width: 100% !important; cursor: pointer; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; } .contacts_page .moo-form-card button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 229, 160, 0.25); } .contacts_page .moo-form-card button[type="submit"]:active { transform: translateY(0) scale(0.98); } .contacts_page .moo-form-card button[type="submit"] i { font-size: 14px; } /* Return/status messages */ .contacts_page .settings_returnMessage { background: rgba(0, 229, 160, 0.08); border: 1px solid rgba(0, 229, 160, 0.15); border-radius: 16px; color: var(--color-text-primary); padding: 18px 24px; font-size: 15px; font-weight: 600; text-align: left; display: flex; align-items: center; gap: 12px; margin-top: 20px; } .contacts_page .settings_returnMessage i { color: var(--color-accent); font-size: 18px; flex-shrink: 0; } /* Pending invites table */ .contacts_page .uds_table { border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; overflow: hidden; margin-top: 16px; } .contacts_page .uds_table_row { border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 14px 16px; color: rgba(255, 255, 255, 0.6); } .contacts_page .uds_table_row b { color: rgba(255, 255, 255, 0.4); } .contacts_page .udstr_right button { background: rgba(244, 63, 94, 0.1) !important; border: 1px solid rgba(244, 63, 94, 0.2) !important; color: var(--color-danger) !important; border-radius: 10px !important; width: 32px !important; height: 32px !important; padding: 0 !important; font-size: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: opacity 0.2s, background-color 0.2s; } .contacts_page .udstr_right button:hover { background: rgba(244, 63, 94, 0.2); } /* ---- Modal — frosted glass ---- */ body:has(.contacts_page) #chats_popup_wrap { background: rgba(6, 13, 16, 0.6); animation: mooOverlayIn 0.2s ease-out; } body:has(.contacts_page) #chats_popup { background: rgba(20, 30, 38, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 32px; width: min(320px, 80%); color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes mooOverlayIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mooModalIn { from { opacity: 0; transform: translate(-50%, -48%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @media (prefers-reduced-motion: reduce) { @keyframes mooOverlayIn { from, to { opacity: 1; } } @keyframes mooModalIn { from, to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } } .moo-modal__title { font-size: 18px; font-weight: 800; text-align: center; margin-bottom: 20px; color: var(--color-text-primary); letter-spacing: -0.3px; } .moo-modal__options { display: flex; flex-direction: column; gap: 8px; width: 100%; } .moo-modal__option { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; color: var(--color-text-primary); font-size: 15px; font-weight: 600; text-decoration: none; transition: opacity 0.2s, background-color 0.2s, border-color 0.2s; } .moo-modal__option:hover { background: rgba(0, 229, 160, 0.08); border-color: rgba(0, 229, 160, 0.2); } .moo-modal__option:active { background: rgba(0, 229, 160, 0.14); } .moo-modal__option i { color: var(--color-accent); font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; } /* Nickname form on contact page */ .contacts_page .moo-settings-card { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px; padding: 24px; } .contacts_page .moo-settings-card__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .contacts_page .moo-settings-card__icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(0, 229, 160, 0.1); border: 1px solid rgba(0, 229, 160, 0.15); display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: 14px; flex-shrink: 0; } .contacts_page .moo-settings-card .settings_item_title { color: var(--color-text-primary); font-size: 17px; font-weight: 700; margin-bottom: 0; line-height: 1; } .moo-nickname-form { display: flex; gap: 8px; } .moo-nickname-form input[type="text"] { flex: 1; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding: 12px 16px; font-size: 15px; font-weight: 500; font-family: 'Montserrat', sans-serif; width: auto; margin: 0; -webkit-appearance: none; user-select: text; -webkit-user-select: text; touch-action: manipulation; } .moo-nickname-form input[type="text"]:focus { border-color: rgba(0, 229, 160, 0.4); } .moo-nickname-form input[type="text"]::placeholder { color: rgba(255, 255, 255, 0.25); } .moo-nickname-form button { background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding: 12px 16px; font-size: 14px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; } .moo-nickname-form button:hover { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.25); color: var(--color-accent); } .moo-nickname-form .moo-btn-danger-outline { background: transparent; border: 1px solid rgba(244, 63, 94, 0.3); color: var(--color-danger); } .moo-nickname-form .moo-btn-danger-outline:hover { background: rgba(244, 63, 94, 0.1); border-color: rgba(244, 63, 94, 0.4); } /* Contacts page responsive */ @media (max-width: 480px) { .moo-profile-card { padding: 24px; border-radius: 20px; } .contacts_page .moo-form-card { padding: 28px 24px; border-radius: 20px; } .contacts_page .contact_option_indv { width: 90px; height: 90px; } .contacts_page .moo-settings-card { padding: 20px; border-radius: 16px; } .moo-nickname-form { flex-direction: column; } } /* ===== SETTINGS PAGE OVERHAUL ===== */ /* Page background */ html:has(.moo-settings) { background: var(--color-bg); } body:has(.moo-settings) { background: radial-gradient(ellipse at 70% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 30% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(244, 63, 94, 0.06) 0%, transparent 40%), var(--color-bg); } /* Header — dark glass */ body:has(.moo-settings) .chat_top_info.header_top { background: rgba(6, 13, 16, 0.97); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } body:has(.moo-settings) .hb_button { background: rgba(24, 32, 40, 0.92); color: var(--color-text-primary); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; } body:has(.moo-settings) .hb_button:hover { background: rgba(0, 229, 160, 0.15); border-color: rgba(0, 229, 160, 0.3); color: var(--color-accent); } /* Bottom nav — dark glass */ body:has(.moo-settings) .bottom_nav { background: rgba(6, 13, 16, 0.97); border-top: 1px solid rgba(255, 255, 255, 0.06); } body:has(.moo-settings) .bnm_inner, body:has(.moo-settings) .bnm_item { background: rgba(6, 13, 16, 0.85); } body:has(.moo-settings) .bnm_item { color: rgba(255, 255, 255, 0.3); } body:has(.moo-settings) .bnm_selected { color: var(--color-accent); } /* Section headers */ .moo-settings__section { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.3); padding: 0 4px; margin-bottom: 12px; } .moo-settings__section:not(:first-of-type) { margin-top: 28px; } /* Content area */ .moo-settings { background: transparent !important; color: var(--color-text-primary); padding-top: 20px !important; padding-bottom: 20px !important; height: calc(100% - 174px) !important; } /* Settings cards */ .moo-settings .moo-settings-card { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px; padding: 24px; margin-bottom: 16px; } .moo-settings .moo-settings-card:last-child, .moo-settings .moo-settings-card:last-of-type, .moo-settings .moo-form-card:last-child, .moo-settings .moo-form-card:last-of-type, .moo-settings .settings_item_last { margin-bottom: 0; } .moo-settings-card__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .moo-settings-card__icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(0, 229, 160, 0.1); border: 1px solid rgba(0, 229, 160, 0.15); display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: 14px; flex-shrink: 0; } .moo-settings .moo-settings-card .settings_item_title { color: var(--color-text-primary); font-size: 17px; font-weight: 700; margin-bottom: 0; line-height: 1; } /* Settings card forms (Name, Mobile Number) */ .moo-settings .moo-settings-card form:not(.ap_inner):not(.ld_buttons) { display: flex; gap: 10px; } .moo-settings .moo-settings-card input[type="text"], .moo-settings .moo-settings-card input[type="tel"] { flex: 1; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding: 12px 16px; font-size: 15px; font-weight: 500; font-family: 'Montserrat', sans-serif; width: auto; margin: 0; transition: border-color 0.3s; -webkit-appearance: none; user-select: text; -webkit-user-select: text; touch-action: manipulation; } .moo-settings .moo-settings-card input[type="text"]:focus, .moo-settings .moo-settings-card input[type="tel"]:focus { border-color: rgba(0, 229, 160, 0.4); } .moo-settings .moo-settings-card input[readonly] { color: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.05); } .moo-settings .moo-settings-card button[type="submit"] { background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding: 12px 20px; font-size: 14px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; width: auto; height: auto; margin: 0; } .moo-settings .moo-settings-card button[type="submit"]:hover { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.25); color: var(--color-accent); } /* Account picture */ .moo-settings .moo-settings-card .ap_inner { display: flex; align-items: center; gap: 16px; } .moo-settings .moo-settings-card .ap_inner img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); flex-shrink: 0; } .moo-settings .moo-ap-buttons { display: flex; gap: 8px; height: 56px; } .moo-settings .moo-ap-buttons button { margin-left: 0; height: 100% !important; } /* Danger outline button */ .moo-settings .moo-btn-danger-outline { background: transparent !important; border: 1px solid rgba(244, 63, 94, 0.3) !important; color: var(--color-danger) !important; } .moo-settings .moo-btn-danger-outline:hover { background: rgba(244, 63, 94, 0.1) !important; border-color: rgba(244, 63, 94, 0.4) !important; } /* Push notifications */ .moo-settings .push_box { margin-top: 0; } .moo-pn-status { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; margin-bottom: 14px; } .moo-pn-enabled { background: rgba(0, 229, 160, 0.08); border: 1px solid rgba(0, 229, 160, 0.15); color: var(--color-accent); } .moo-pn-disabled { background: rgba(14, 22, 28, 0.90); border: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.4); } .moo-settings .push_button { display: flex; gap: 8px; } .moo-settings .push_button button { flex: 1; background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding: 12px 20px; font-size: 14px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; width: auto; margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; } .moo-settings .push_button button:hover { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.25); color: var(--color-accent); } .moo-settings .push_button .moo-btn-danger-outline { background: transparent !important; border: 1px solid rgba(244, 63, 94, 0.3) !important; color: var(--color-danger) !important; } .moo-settings .push_button .moo-btn-danger-outline:hover { background: rgba(244, 63, 94, 0.1) !important; border-color: rgba(244, 63, 94, 0.4) !important; color: var(--color-danger) !important; } /* Account devices table */ .moo-settings .uds_table { border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; overflow: hidden; } .moo-settings .uds_table_row { border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 14px 16px; color: rgba(255, 255, 255, 0.6); font-size: 12px; } .moo-settings .uds_table_row:last-child { border-bottom: 0; } .moo-settings .uds_table_row b { color: rgba(255, 255, 255, 0.8); } .moo-settings .udstr_right button { background: rgba(244, 63, 94, 0.1) !important; border: 1px solid rgba(244, 63, 94, 0.2) !important; color: var(--color-danger) !important; border-radius: 10px !important; width: 32px !important; height: 32px !important; padding: 0 !important; font-size: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: opacity 0.2s, background-color 0.2s; cursor: pointer; } .moo-settings .udstr_right button:hover { background: rgba(244, 63, 94, 0.2) !important; } /* Log out everywhere button */ .moo-settings .ld_buttons { display: block !important; margin-top: 14px; } .moo-settings .ld_buttons button { width: 100% !important; background: rgba(244, 63, 94, 0.08) !important; border: 1px solid rgba(244, 63, 94, 0.2) !important; border-radius: 12px !important; color: var(--color-danger) !important; padding: 14px 20px !important; font-size: 14px !important; font-weight: 700 !important; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s; display: flex !important; align-items: center; justify-content: center; gap: 8px; } .moo-settings .ld_buttons button:hover { background: rgba(244, 63, 94, 0.15) !important; } /* Return messages */ .moo-settings .settings_returnMessage { background: rgba(0, 229, 160, 0.08); border: 1px solid rgba(0, 229, 160, 0.15); border-radius: 16px; color: var(--color-text-primary); padding: 18px 24px; font-size: 15px; font-weight: 600; text-align: left; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .moo-settings .settings_returnMessage i { color: var(--color-accent); font-size: 18px; flex-shrink: 0; } /* Privacy toggles */ .moo-privacy-toggles { display: flex; flex-direction: column; gap: 0; } .moo-privacy-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .moo-privacy-toggle:last-child { border-bottom: none; padding-bottom: 0; } .moo-privacy-toggle:first-child { padding-top: 0; } .moo-privacy-toggle__text { flex: 1; min-width: 0; } .moo-privacy-toggle__label { font-size: 14px; font-weight: 600; color: var(--color-text-primary); } .moo-privacy-toggle__desc { font-size: 12px; color: rgba(255, 255, 255, 0.3); margin-top: 2px; } /* Toggle switch */ .moo-toggle { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; cursor: pointer; } .moo-toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .moo-toggle__track { position: absolute; inset: 0; background: rgba(28, 36, 44, 0.92); border-radius: 13px; transition: background 0.25s; } .moo-toggle__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; transition: transform 0.25s, background 0.25s; } .moo-toggle input:checked + .moo-toggle__track { background: var(--color-accent); } .moo-toggle input:checked + .moo-toggle__track::after { transform: translateX(18px); background: var(--color-bg); } .moo-toggle input:disabled + .moo-toggle__track { opacity: 0.35; cursor: not-allowed; } .moo-toggle:has(input:disabled) { cursor: not-allowed; } /* Sub-pages (change picture, verify number) — reuse moo-form-card from contacts */ .moo-settings .moo-form-card { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 24px; padding: 36px 32px; } .moo-settings .moo-form-icon { font-size: 32px; color: var(--color-accent); margin-bottom: 16px; } .moo-settings .moo-form-card .settings_item_title { font-size: 22px; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.3px; line-height: 1.2; margin-bottom: 10px; } .moo-settings .moo-form-card .cn_subtext { color: rgba(255, 255, 255, 0.4); font-size: 14px; line-height: 1.6; margin-bottom: 28px; } .moo-settings .moo-form-card .cn_input_title { color: rgba(255, 255, 255, 0.4); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .moo-settings .moo-form-card form { display: block; } .moo-settings .moo-form-card input[type="text"], .moo-settings .moo-form-card input[type="tel"] { background: transparent !important; border: none !important; border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0 !important; color: var(--color-text-primary) !important; padding: 14px 0 !important; font-size: 16px !important; font-weight: 500; font-family: 'Montserrat', sans-serif; width: 100% !important; margin: 0 0 24px 0 !important; -webkit-appearance: none; transition: border-color 0.3s; user-select: text; -webkit-user-select: text; touch-action: manipulation; } .moo-settings .moo-form-card input[type="text"]:focus, .moo-settings .moo-form-card input[type="tel"]:focus { border-bottom-color: var(--color-accent) !important; } .moo-settings .moo-form-card input[readonly] { color: rgba(255, 255, 255, 0.4) !important; border-bottom-color: rgba(255, 255, 255, 0.05) !important; } .moo-settings .moo-form-card input[type="file"] { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: rgba(255, 255, 255, 0.6); padding: 14px; font-size: 14px; font-family: 'Montserrat', sans-serif; width: calc(100% - 30px); margin-bottom: 24px; cursor: pointer; } .moo-settings .moo-form-card button[type="submit"] { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important; color: var(--color-bg) !important; border: none !important; border-radius: 14px !important; padding: 16px 24px !important; font-weight: 700 !important; font-size: 16px !important; font-family: 'Montserrat', sans-serif; width: 100% !important; cursor: pointer; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; gap: 8px; } .moo-settings .moo-form-card button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 229, 160, 0.25); } .moo-settings .moo-form-card button[type="submit"]:active { transform: translateY(0) scale(0.98); } /* Bug report modal — frosted glass */ body:has(.moo-settings) #br_popup_wrap { background: rgba(6, 13, 16, 0.6); animation: mooOverlayIn 0.2s ease-out; } body:has(.moo-settings) #br_popup { background: rgba(20, 30, 38, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 32px; width: min(360px, 80%); color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } body:has(.moo-settings) .br_popup_title { color: var(--color-text-primary); font-size: 18px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 20px; } body:has(.moo-settings) .br_form { gap: 12px; } body:has(.moo-settings) .br_selectbox { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding: 14px 16px; font-size: 15px; font-weight: 500; font-family: 'Montserrat', sans-serif; } body:has(.moo-settings) .br_selectbox option { background: var(--color-bg-elevated); color: var(--color-text-primary); } body:has(.moo-settings) .br_textarea { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding: 14px 16px; font-size: 15px; font-weight: 500; font-family: 'Montserrat', sans-serif; min-height: 100px; user-select: text; -webkit-user-select: text; touch-action: manipulation; } body:has(.moo-settings) .br_textarea::placeholder { color: rgba(255, 255, 255, 0.3); font-weight: 400; } body:has(.moo-settings) .br_submit_button { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important; color: var(--color-bg) !important; border: none !important; border-radius: 14px !important; padding: 16px 24px !important; font-weight: 700 !important; font-size: 16px !important; font-family: 'Montserrat', sans-serif; width: 100% !important; cursor: pointer; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); } body:has(.moo-settings) .br_submit_button:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 229, 160, 0.25); } /* Styled file picker (replaces native file input) */ .moo-file-input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; overflow: hidden; } .moo-file-picker { display: flex; align-items: center; gap: 16px; padding: 20px; background: rgba(14, 22, 28, 0.90); border: 2px dashed rgba(255, 255, 255, 0.1); border-radius: 16px; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, border-color 0.2s; margin-bottom: 0; } .moo-file-picker:hover { background: rgba(0, 229, 160, 0.04); border-color: rgba(0, 229, 160, 0.2); } .moo-file-picker:active { background: rgba(0, 229, 160, 0.08); } .moo-file-picker__icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(0, 229, 160, 0.1); border: 1px solid rgba(0, 229, 160, 0.15); display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: 18px; flex-shrink: 0; } .moo-file-picker__text { flex: 1; min-width: 0; } .moo-file-picker__label { font-size: 15px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moo-file-picker__hint { font-size: 12px; color: rgba(255, 255, 255, 0.3); margin-top: 2px; } /* ===== IMAGE CROP MODAL ===== */ #moo_crop_wrap { position: fixed; inset: 0; background: rgba(6, 13, 16, 0.8); z-index: 100000; animation: mooOverlayIn 0.2s ease-out; } #moo_crop_modal { position: absolute; inset: 0; display: none; flex-direction: column; background: var(--color-bg); color: var(--color-text-primary); } .moo-crop__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; padding-top: calc(16px + env(safe-area-inset-top, 0)); flex-shrink: 0; } .moo-crop__title { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; } #moo_crop_cancel { width: 36px; height: 36px; border-radius: 10px; background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin: 0; } .moo-crop__stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; position: relative; touch-action: none; } .moo-crop__img-area { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } #moo_crop_img { position: absolute; user-select: none; -webkit-user-select: none; pointer-events: none; will-change: transform; opacity: 1 !important; } .moo-crop__frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 4px; box-shadow: 0 0 0 9999px rgba(6, 13, 16, 0.65); z-index: 2; pointer-events: none; } .moo-crop__corner { position: absolute; width: 20px; height: 20px; border-color: var(--color-accent); border-style: solid; border-width: 0; } .moo-crop__corner--tl { top: -2px; left: -2px; border-top-width: 3px; border-left-width: 3px; border-radius: 2px 0 0 0; } .moo-crop__corner--tr { top: -2px; right: -2px; border-top-width: 3px; border-right-width: 3px; border-radius: 0 2px 0 0; } .moo-crop__corner--bl { bottom: -2px; left: -2px; border-bottom-width: 3px; border-left-width: 3px; border-radius: 0 0 0 2px; } .moo-crop__corner--br { bottom: -2px; right: -2px; border-bottom-width: 3px; border-right-width: 3px; border-radius: 0 0 2px 0; } .moo-crop__controls { padding: 12px 24px; flex-shrink: 0; } .moo-crop__zoom { display: flex; align-items: center; gap: 14px; } .moo-crop__zoom button { width: 36px; height: 36px; border-radius: 10px; background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-text-primary); font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; } .moo-crop__zoom button:active { background: rgba(0, 229, 160, 0.15); border-color: rgba(0, 229, 160, 0.3); color: var(--color-accent); } .moo-crop__zoom-track { flex: 1; height: 4px; background: rgba(24, 32, 40, 0.92); border-radius: 2px; overflow: hidden; } .moo-crop__zoom-fill { height: 100%; width: 0%; background: var(--color-accent); border-radius: 2px; transition: width 0.15s ease; } .moo-crop__actions { display: flex; gap: 10px; padding: 16px 20px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)); flex-shrink: 0; } .moo-crop__btn-secondary { flex: 0.8; padding: 16px; background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; color: rgba(255, 255, 255, 0.6); font-weight: 600; font-size: 15px; font-family: 'Montserrat', sans-serif; cursor: pointer; } .moo-crop__btn-primary { flex: 1.2; padding: 16px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); border: none; border-radius: 14px; color: var(--color-bg); font-weight: 700; font-size: 15px; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s; } .moo-crop__btn-primary:disabled { opacity: 0.7; cursor: default; } /* Upload progress overlay */ #moo_crop_uploading { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.8); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; z-index: 5; } .moo-crop__upload-spinner { font-size: 36px; color: var(--color-accent); } .moo-crop__upload-text { font-size: 16px; font-weight: 600; color: var(--color-text-primary); } /* Crop upload error state — inline retry panel (no more alerts). Sits over * the crop stage exactly like #moo_crop_uploading but with danger-themed icon * and a retry button that reuses the already-cropped blob. */ .moo-crop__error { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.88); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px 28px; z-index: 6; text-align: center; } .moo-crop__error-icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(244, 63, 94, 0.12); border: 1px solid rgba(244, 63, 94, 0.3); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--color-danger); box-shadow: 0 10px 28px rgba(244, 63, 94, 0.15); } .moo-crop__error-text { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; color: var(--color-text-primary); max-width: 300px; line-height: 1.4; } .moo-crop__error-retry { margin-top: 4px; padding: 11px 22px; height: 42px; border-radius: 12px; border: none; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-bg); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.02em; box-shadow: 0 8px 24px rgba(0, 229, 160, 0.25); transition: transform 0.18s ease, box-shadow 0.18s ease; } .moo-crop__error-retry:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0, 229, 160, 0.35); } .moo-crop__error-retry:active { transform: translateY(0); } /* Settings responsive */ @media (max-width: 480px) { .moo-settings .moo-settings-card { padding: 20px; border-radius: 16px; } .moo-settings .moo-form-card { padding: 28px 24px; border-radius: 20px; } .moo-settings-card__icon { width: 32px; height: 32px; font-size: 13px; } } /* ===== TOOLS PAGE OVERHAUL ===== */ /* Page background */ html:has(.moo-tools) { background: var(--color-bg); } body:has(.moo-tools) { background: radial-gradient(ellipse at 65% 25%, rgba(14, 165, 233, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 35% 75%, rgba(99, 102, 241, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(244, 63, 94, 0.06) 0%, transparent 40%), var(--color-bg); } /* Header — dark glass */ body:has(.moo-tools) .chat_top_info.header_top { background: rgba(6, 13, 16, 0.97); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } body:has(.moo-tools) .hb_button { background: rgba(24, 32, 40, 0.92); color: var(--color-text-primary); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; } body:has(.moo-tools) .hb_button:hover { background: rgba(0, 229, 160, 0.15); border-color: rgba(0, 229, 160, 0.3); color: var(--color-accent); } body:has(.moo-tools) .hb_button_multi { background: rgba(24, 32, 40, 0.92); color: var(--color-text-primary); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; } body:has(.moo-tools) .hb_button_multi:hover { background: rgba(0, 229, 160, 0.15); border-color: rgba(0, 229, 160, 0.3); color: var(--color-accent); } /* Bottom nav — dark glass */ body:has(.moo-tools) .bottom_nav { background: rgba(6, 13, 16, 0.97); border-top: 1px solid rgba(255, 255, 255, 0.06); } body:has(.moo-tools) .bnm_inner, body:has(.moo-tools) .bnm_item { background: rgba(6, 13, 16, 0.85); } body:has(.moo-tools) .bnm_item { color: rgba(255, 255, 255, 0.3); } body:has(.moo-tools) .bnm_selected { color: var(--color-accent); } /* Content area */ .moo-tools { background: transparent !important; color: var(--color-text-primary); padding-top: 20px !important; padding-bottom: 20px !important; height: calc(100% - 174px) !important; } /* ---- Tools list items (main page) ---- */ .moo-tools__item { display: flex; align-items: center; gap: 16px; padding: 20px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 18px; color: var(--color-text-primary); text-decoration: none; margin-bottom: 12px; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .moo-tools__item:last-child, .moo-tools__item:last-of-type { margin-bottom: 0; } .moo-tools__item:active { background: rgba(24, 32, 40, 0.92); } .moo-tools__item-icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(0, 229, 160, 0.1); border: 1px solid rgba(0, 229, 160, 0.15); display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: 18px; flex-shrink: 0; } .moo-tools__item-icon--dev { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.2); color: var(--color-dev); } .moo-tools__item-info { flex: 1; min-width: 0; } .moo-tools__item-name { font-size: 17px; font-weight: 700; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moo-tools__item-desc { font-size: 13px; color: rgba(255, 255, 255, 0.35); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moo-tools__item-arrow { color: rgba(255, 255, 255, 0.15); font-size: 14px; flex-shrink: 0; } .moo-tools__empty { color: rgba(255, 255, 255, 0.35); text-align: center; padding: 60px 0; font-size: 15px; } /* ---- Medication list items ---- */ .moo-tools__med-item { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; color: var(--color-text-primary); text-decoration: none; margin-bottom: 10px; transition: opacity 0.25s, background-color 0.25s, border-color 0.25s; } .moo-tools__med-item:last-child, .moo-tools__med-item:last-of-type { margin-bottom: 0; } .moo-tools__med-item:active { background: rgba(24, 32, 40, 0.92); } .moo-tools__med-item.moo-med-due { border-color: rgba(0, 229, 160, 0.2); background: rgba(0, 229, 160, 0.04); } .moo-tools__med-info { flex: 1; min-width: 0; } .moo-tools__med-name { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moo-med-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .moo-med-due-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: var(--color-accent); color: var(--color-bg); text-transform: uppercase; letter-spacing: 0.5px; } .moo-tools__med-detail { font-size: 14px; color: rgba(255, 255, 255, 0.4); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Medication taken banner */ .moo-med-taken-banner { margin-bottom: 16px; } .moo-med-taken-banner button { width: 100%; padding: 16px 24px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); border: none; border-radius: 14px; color: var(--color-bg); font-weight: 700; font-size: 16px; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; gap: 8px; } .moo-med-taken-banner button:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 229, 160, 0.25); } .moo-med-taken-banner button:active { transform: translateY(0) scale(0.98); } /* Medication reorder banner */ .moo-med-reorder-banner { margin-bottom: 16px; background: rgba(251, 191, 36, 0.06); border: 1px solid rgba(251, 191, 36, 0.15); border-radius: 14px; padding: 16px 20px; } .moo-med-reorder-banner__label { color: var(--color-warning); font-size: 14px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .moo-med-reorder-banner button { width: 100%; padding: 12px 24px; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.25); border-radius: 10px; color: var(--color-warning); font-weight: 700; font-size: 15px; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; gap: 8px; } .moo-med-reorder-banner button:active { transform: scale(0.98); } /* Medication reorder list badges */ .moo-med-reorder-badge, .moo-med-reorder-badge--overdue { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; display: inline-block; } .moo-med-reorder-badge { background: rgba(251, 191, 36, 0.15); color: var(--color-warning); } .moo-med-reorder-badge--overdue { background: rgba(244, 63, 94, 0.15); color: var(--color-danger); } .moo-tools__med-item.moo-med-reorder-due { border-color: rgba(251, 191, 36, 0.2); background: rgba(251, 191, 36, 0.04); } /* Medication date input */ .moo-tools .moo-settings-card input[type="date"], .moo-tools .moo-form-card input[type="date"] { color-scheme: dark; } /* Medication custom date picker */ .moo-med-datepicker { margin-top: 12px; background: rgba(14, 22, 28, 0.90); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 12px; animation: mooCalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; box-sizing: border-box; } @keyframes mooCalIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .moo-med-datepicker__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .moo-med-datepicker__nav { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(14, 22, 28, 0.92); color: var(--color-text-primary); font-size: 13px; font-family: 'Montserrat', sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s; padding: 0; -webkit-tap-highlight-color: transparent; } .moo-med-datepicker__nav:active { background: rgba(0, 229, 160, 0.12); border-color: rgba(0, 229, 160, 0.25); transform: scale(0.92); } .moo-med-datepicker__nav--disabled { opacity: 0.15; pointer-events: none; } .moo-med-datepicker__title { font-size: 15px; font-weight: 700; color: var(--color-text-primary); } .moo-med-datepicker__weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 4px; } .moo-med-datepicker__weekday { text-align: center; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.25); text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 0; } .moo-med-datepicker__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-gap: 4px; gap: 4px; } .moo-med-datepicker__day { height: 36px; min-width: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: var(--color-text-primary); border-radius: 10px; cursor: pointer; transition: opacity 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; border: 1px solid transparent; background: none; padding: 0; font-family: 'Montserrat', sans-serif; -webkit-tap-highlight-color: transparent; } .moo-med-datepicker__day:active:not(.moo-med-datepicker__day--past):not(.moo-med-datepicker__day--empty) { transform: scale(0.88); background: rgba(0, 229, 160, 0.15); } .moo-med-datepicker__day--empty { cursor: default; } .moo-med-datepicker__day--past { color: rgba(255, 255, 255, 0.12); cursor: default; } .moo-med-datepicker__day--today { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.25); color: var(--color-accent); font-weight: 700; } .moo-med-datepicker__day--selected { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-bg); font-weight: 700; border-color: transparent; } /* Override generic button styles on datepicker day cells */ .moo-med-datepicker__day { padding: 0 !important; margin: 3px !important; height: 36px !important; } /* Medication detail cards — reuse settings card styles */ .moo-tools .moo-settings-card { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px; padding: 24px; margin-bottom: 16px; } .moo-tools .moo-settings-card:last-child, .moo-tools .moo-settings-card:last-of-type, .moo-tools .moo-form-card:last-child, .moo-tools .moo-form-card:last-of-type { margin-bottom: 0; } .moo-tools .moo-settings-card__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .moo-tools .moo-settings-card__icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(0, 229, 160, 0.1); border: 1px solid rgba(0, 229, 160, 0.15); display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: 14px; flex-shrink: 0; } .moo-tools .moo-settings-card .settings_item_title { color: var(--color-text-primary); font-size: 17px; font-weight: 700; margin-bottom: 0; line-height: 1; } .moo-tools .moo-settings-card__value { color: rgba(255, 255, 255, 0.5); font-size: 15px; } .moo-tools .moo-settings-card form { display: flex; gap: 10px; } .moo-tools .moo-settings-card input[type="text"], .moo-tools .moo-settings-card input[type="tel"], .moo-tools .moo-settings-card input[type="time"], .moo-tools .moo-settings-card input[type="date"] { flex: 1; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding: 12px 16px; font-size: 15px; font-weight: 500; font-family: 'Montserrat', sans-serif; width: auto; height: auto; margin: 0; transition: border-color 0.3s; -webkit-appearance: none; user-select: text; -webkit-user-select: text; touch-action: manipulation; } .moo-tools .moo-settings-card input:focus { border-color: rgba(0, 229, 160, 0.4); } .moo-tools .moo-settings-card select { flex: 1; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding: 12px 16px; font-size: 15px; font-weight: 500; font-family: 'Montserrat', sans-serif; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: auto; margin: 0; } .moo-tools .moo-settings-card select option { background: var(--color-bg-elevated); color: var(--color-text-primary); } .moo-tools .moo-settings-card button[type="submit"], .moo-tools .moo-settings-card button[type="button"] { background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding: 12px 20px; font-size: 14px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; width: auto; height: auto; margin: 0; } .moo-tools .moo-settings-card button[type="submit"]:hover, .moo-tools .moo-settings-card button[type="button"]:hover { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.25); color: var(--color-accent); } /* Form cards (new medication) — reuse pattern */ .moo-tools .moo-form-card { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 24px; padding: 36px 32px; } .moo-tools .moo-form-icon { font-size: 32px; color: var(--color-accent); margin-bottom: 16px; } .moo-tools .moo-form-card .settings_item_title { color: var(--color-text-primary); font-size: 22px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; } .moo-tools .moo-form-card .cn_subtext { color: rgba(255, 255, 255, 0.4); font-size: 14px; line-height: 1.6; margin-bottom: 28px; } .moo-tools .moo-form-card .cn_input_title { color: rgba(255, 255, 255, 0.4); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; margin-top: 20px; } .moo-tools .moo-form-card .cn_input_title:first-of-type { margin-top: 0; } .moo-tools .moo-form-card form { display: block; } .moo-tools .moo-form-card input[type="text"], .moo-tools .moo-form-card input[type="time"], .moo-tools .moo-form-card input[type="date"] { background: transparent !important; border: none !important; border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0 !important; color: var(--color-text-primary) !important; padding: 14px 0 !important; font-size: 16px !important; font-weight: 500; font-family: 'Montserrat', sans-serif; width: 100% !important; height: auto !important; margin: 0 0 4px 0 !important; -webkit-appearance: none; transition: border-color 0.3s; user-select: text; -webkit-user-select: text; touch-action: manipulation; } .moo-tools .moo-form-card input[type="text"]:focus, .moo-tools .moo-form-card input[type="time"]:focus, .moo-tools .moo-form-card input[type="date"]:focus { border-bottom-color: var(--color-accent) !important; } .moo-tools .moo-form-card input::placeholder { color: rgba(255, 255, 255, 0.2); } .moo-tools .moo-form-card select { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding: 14px 16px; font-size: 15px; font-weight: 500; font-family: 'Montserrat', sans-serif; width: 100%; margin-bottom: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .moo-tools .moo-form-card select option { background: var(--color-bg-elevated); color: var(--color-text-primary); } .moo-tools .moo-form-card button[type="submit"] { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important; color: var(--color-bg) !important; border: none !important; border-radius: 14px !important; padding: 16px 24px !important; font-weight: 700 !important; font-size: 16px !important; font-family: 'Montserrat', sans-serif; width: 100% !important; margin-top: 24px !important; cursor: pointer; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; gap: 8px; } .moo-tools .moo-form-card button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 229, 160, 0.25); } /* ---- Monthly Bills tool ---- */ .moo-bill-section { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255, 255, 255, 0.35); padding: 4px 4px 12px; margin-top: 18px; } .moo-bill-section:first-child { margin-top: 0; } .moo-bill-item { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; color: var(--color-text-primary); text-decoration: none; margin-bottom: 10px; transition: opacity 0.25s, background-color 0.25s, border-color 0.25s, transform 0.25s; } .moo-bill-item:last-child, .moo-bill-item:last-of-type { margin-bottom: 0; } .moo-bill-item:active { background: rgba(24, 32, 40, 0.92); transform: scale(0.99); } .moo-bill-item--next { border-color: rgba(0, 229, 160, 0.22); background: linear-gradient(135deg, rgba(0, 229, 160, 0.06), transparent 55%), rgba(14, 22, 28, 0.92); } .moo-bill-item--past .moo-bill-item__name, .moo-bill-item--past .moo-bill-item__amount { color: rgba(255, 255, 255, 0.45); } .moo-bill-item--past .moo-bill-item__due { color: rgba(255, 255, 255, 0.28); } .moo-bill-item--past .moo-bill-item__chevron { color: rgba(255, 255, 255, 0.18); } .moo-bill-item__info { flex: 1; min-width: 0; } .moo-bill-item__name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.1px; } .moo-bill-item__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; } .moo-bill-item__due { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.2px; } .moo-bill-item__shared { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; padding: 3px 8px 3px 7px; border-radius: 6px; background: rgba(56, 189, 248, 0.12); color: var(--color-accent-sky); border: 1px solid rgba(56, 189, 248, 0.18); display: inline-flex; align-items: center; gap: 5px; } .moo-bill-item__shared i { font-size: 9px; } .moo-bill-item__amount { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.4px; flex-shrink: 0; } .moo-bill-item__chevron { color: rgba(255, 255, 255, 0.25); font-size: 12px; flex-shrink: 0; } .moo-bill-amount-wrap { position: relative; } .moo-bill-amount-wrap::before { content: '£'; position: absolute; left: 0; top: 14px; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.45); pointer-events: none; z-index: 1; } .moo-tools .moo-form-card .moo-bill-amount-wrap input { padding-left: 14px !important; } .moo-tools .moo-settings-card .moo-bill-amount-wrap { flex: 1; display: flex; } .moo-tools .moo-settings-card .moo-bill-amount-wrap::before { left: 14px; top: 50%; transform: translateY(-50%); } .moo-tools .moo-settings-card .moo-bill-amount-wrap input { padding-left: 28px !important; } .moo-bill-share-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: rgba(14, 22, 28, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; margin-top: 8px; cursor: pointer; } .moo-bill-share-row__text { flex: 1; min-width: 0; } .moo-bill-share-row__label { display: block; font-size: 14px; font-weight: 700; color: var(--color-text-primary); } .moo-bill-share-row__desc { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.4); margin-top: 3px; line-height: 1.4; } /* Shared card on edit page — row inside settings card */ .moo-bill-shared-card__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; } .moo-bill-shared-card__desc { flex: 1; font-size: 13px; color: rgba(255, 255, 255, 0.5); line-height: 1.4; } /* Override the .moo-tools .moo-settings-card form { display: flex; gap: 10px } so the shared toggle row stretches naturally; we only have one child here. */ .moo-tools .moo-bill-shared-card form { display: block; } /* Empty state — vertically centered hero with CTA */ .moo-bill-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; min-height: 100%; box-sizing: border-box; } .moo-bill-empty::before, .moo-bill-empty::after { content: ''; flex: 1 0 24px; } .moo-bill-empty__icon { width: 72px; min-width: 72px; height: 72px; min-height: 72px; flex-shrink: 0; border-radius: 22px; background: rgba(0, 229, 160, 0.08); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--color-accent); margin-bottom: 20px; box-shadow: 0 0 40px rgba(0, 229, 160, 0.08); } .moo-bill-empty__title { font-size: 20px; font-weight: 800; color: var(--color-text-primary); margin-bottom: 8px; letter-spacing: -0.3px; } .moo-bill-empty__subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.4); line-height: 1.5; max-width: 280px; margin-bottom: 28px; } .moo-bill-empty__cta { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-bg); border-radius: 14px; font-weight: 700; font-size: 15px; font-family: 'Montserrat', sans-serif; text-decoration: none; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .moo-bill-empty__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 229, 160, 0.25); } .moo-bill-empty__cta:active { transform: scale(0.98); } #bills_sum_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.6); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #bills_sum_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; background: rgba(20, 30, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: min(420px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .moo-bill-sum__hero { position: relative; border-radius: 24px 24px 0 0; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); clip-path: inset(0 round 24px 24px 0 0); padding: 38px 24px 26px; text-align: center; background: linear-gradient(180deg, rgba(0, 229, 160, 0.05), transparent 80%); } .moo-bill-sum__hero::before { content: ''; position: absolute; width: 320px; height: 320px; top: -110px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(0, 229, 160, 0.22), transparent 60%); filter: blur(44px); pointer-events: none; z-index: 0; } .moo-bill-sum__hero > * { position: relative; z-index: 1; } .moo-bill-sum__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: rgba(255, 255, 255, 0.45); margin-bottom: 12px; } .moo-bill-sum__total { font-size: 44px; font-weight: 800; letter-spacing: -1.4px; font-variant-numeric: tabular-nums; color: var(--color-text-primary); line-height: 1; } .moo-bill-sum__total-label { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.4); margin-top: 10px; } .moo-bill-sum__breakdown { padding: 8px 24px 16px; } .moo-bill-sum-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .moo-bill-sum-row:last-child { border-bottom: none; } .moo-bill-sum-row__icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.55); font-size: 14px; flex-shrink: 0; } .moo-bill-sum-row--shared .moo-bill-sum-row__icon { background: rgba(56, 189, 248, 0.1); border-color: rgba(56, 189, 248, 0.18); color: var(--color-accent-sky); } .moo-bill-sum-row--week .moo-bill-sum-row__icon { background: rgba(0, 229, 160, 0.12); border-color: rgba(0, 229, 160, 0.22); color: var(--color-accent); } .moo-bill-sum-row__text { flex: 1; min-width: 0; } .moo-bill-sum-row__label { font-size: 14px; font-weight: 700; color: var(--color-text-primary); } .moo-bill-sum-row__sub { font-size: 11px; color: rgba(255, 255, 255, 0.4); margin-top: 3px; } .moo-bill-sum-row__value { font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 800; letter-spacing: -0.4px; color: var(--color-text-primary); flex-shrink: 0; text-align: right; min-width: 92px; } .moo-bill-sum-row--week .moo-bill-sum-row__value { color: var(--color-accent); } .moo-bill-sum__close { box-sizing: border-box; margin: 0 24px 24px; padding: 14px 20px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-text-primary); font-size: 14px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; } .moo-bill-sum__close:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.15); } .moo-bill-sum__close:active { background: rgba(255, 255, 255, 0.14); } /* Delete confirm modal — reuses .moo-nc-modal__ shell */ #bill_del_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.6); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #bill_del_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; background: rgba(20, 30, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: min(380px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .moo-bill-del__msg { font-size: 14px; color: rgba(255, 255, 255, 0.55); line-height: 1.55; text-align: center; } .moo-bill-del__msg strong { color: var(--color-text-primary); font-weight: 700; word-break: break-word; } #bill_del_modal .moo-da-modal__actions { display: grid; grid-template-columns: 1fr 1fr; } /* ---- Notes Tool ---- */ .moo-note-item { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; color: var(--color-text-primary); text-decoration: none; margin-bottom: 10px; transition: opacity 0.2s, background-color 0.2s; -webkit-tap-highlight-color: transparent; } .moo-note-item:last-child, .moo-note-item:last-of-type { margin-bottom: 0; } .moo-note-item:active { background: rgba(24, 32, 40, 0.92); } .moo-note-item__info { flex: 1; min-width: 0; } .moo-note-item__title { font-size: 16px; font-weight: 700; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moo-note-item__preview { font-size: 13px; color: rgba(255, 255, 255, 0.35); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .moo-note-item__meta { font-size: 11px; color: rgba(255, 255, 255, 0.25); margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .moo-note-item__shared { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 8px; background: rgba(0, 229, 160, 0.08); color: var(--color-accent); font-weight: 600; font-size: 10px; } /* Note editor */ .moo-note-editor { display: flex; flex-direction: column; height: 100%; min-height: 0; } .moo-note-editor__title { background: transparent; border: none; color: var(--color-text-primary); font-size: 24px; font-weight: 800; font-family: 'Montserrat', sans-serif; padding: 0; margin: 0 0 8px; width: 100%; outline: none; letter-spacing: -0.3px; -webkit-appearance: none; user-select: text; -webkit-user-select: text; } .moo-note-editor__title::placeholder { color: rgba(255, 255, 255, 0.2); } .moo-note-editor__meta { font-size: 12px; color: rgba(255, 255, 255, 0.25); margin-bottom: 16px; font-weight: 500; } .moo-note-editor__content { flex: 1; background: transparent; border: none; color: var(--color-text-primary); font-size: 15px; font-weight: 400; font-family: 'Montserrat', sans-serif; line-height: 1.7; padding: 0; margin: 0; width: 100%; resize: none; outline: none; -webkit-appearance: none; user-select: text; -webkit-user-select: text; -webkit-overflow-scrolling: touch; overflow-y: auto; overscroll-behavior: none; } .moo-note-editor__content::placeholder { color: rgba(255, 255, 255, 0.15); } /* Note lock screen */ .moo-note-lock { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; min-height: 0; padding: 40px 24px; } .moo-note-lock__icon { width: 72px; height: 72px; border-radius: 22px; background: rgba(0, 229, 160, 0.06); border: 1px solid rgba(0, 229, 160, 0.12); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--color-accent); margin-bottom: 20px; box-shadow: 0 0 40px rgba(0, 229, 160, 0.08); } .moo-note-lock__title { font-size: 20px; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.3px; margin-bottom: 6px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .moo-note-lock__subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.3); margin-bottom: 28px; } .moo-note-lock__form { width: 100%; max-width: 280px; } .moo-pw-mask { -webkit-text-security: disc; text-security: disc; } .moo-note-lock__input { width: calc(100% - 36px); background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; color: var(--color-text-primary); padding: 16px 18px; font-size: 16px; font-weight: 500; font-family: 'Montserrat', sans-serif; outline: none; text-align: center; letter-spacing: 2px; -webkit-appearance: none; transition: border-color 0.2s; } .moo-note-lock__input:focus { border-color: rgba(0, 229, 160, 0.4); } .moo-note-lock__input::placeholder { color: rgba(255, 255, 255, 0.2); letter-spacing: 0; } .moo-note-lock__error { font-size: 12px; color: var(--color-danger); font-weight: 600; margin-top: 8px; } .moo-note-lock__error:empty { display: none; } .moo-note-lock__btn { width: 100%; padding: 16px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); border: none; border-radius: 14px; color: var(--color-bg); font-size: 15px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, transform 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; } .moo-note-lock__btn:active { transform: scale(0.97); } /* ---- Weather Tool ---- */ /* Loading spinner */ .moo-wt-loading { display: flex; align-items: center; justify-content: center; padding: 80px 0; font-size: 28px; color: var(--color-accent); animation: moo-wt-pulse 1.5s ease-in-out infinite; } @keyframes moo-wt-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* Error state */ .moo-wt-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; gap: 12px; } .moo-wt-error__icon { font-size: 36px; color: var(--color-warning); } .moo-wt-error__text { font-size: 14px; color: rgba(255,255,255,0.5); } .moo-wt-error__retry { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-bg); border: none; border-radius: 12px; padding: 10px 24px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; cursor: pointer; margin-top: 8px; } /* Setup / onboarding screen */ .moo-wt-setup { display: flex; flex-direction: column; align-items: center; padding: 40px 24px; text-align: center; } .moo-wt-setup__icon { font-size: 52px; margin-bottom: 20px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-sky)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 4px 24px rgba(0,229,160,0.3)); } .moo-wt-setup__title { font-size: 22px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 8px; letter-spacing: -0.3px; } .moo-wt-setup__subtitle { font-size: 13px; color: rgba(255,255,255,0.4); margin-bottom: 24px; line-height: 1.5; max-width: 300px; } /* Search row (shared between setup and settings modal) */ .moo-wt-search-row { display: flex; gap: 8px; width: 100%; max-width: 360px; } .moo-wt-search-input { flex: 1; background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 12px 16px; font-family: 'Montserrat', sans-serif; font-size: 14px; color: var(--color-text-primary); outline: none; transition: border-color 0.2s; } .moo-wt-search-input:focus { border-color: var(--color-accent); } .moo-wt-search-input::placeholder { color: rgba(255,255,255,0.25); } .moo-wt-search-btn { width: 46px; min-width: 46px; height: 46px; border-radius: 12px; border: none; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-bg); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s; } .moo-wt-search-btn:active { transform: scale(0.93); } /* Search status */ .moo-wt-search-status { width: 100%; max-width: 360px; margin-top: 16px; font-size: 13px; color: rgba(255,255,255,0.4); text-align: center; } .moo-wt-search-status i { color: var(--color-accent); } /* Search results */ .moo-wt-search-results { width: 100%; max-width: 360px; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .moo-wt-result { width: 100%; background: rgba(16, 24, 30, 0.92); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px 16px; text-align: left; cursor: pointer; transition: background 0.2s, border-color 0.2s; font-family: 'Montserrat', sans-serif; color: var(--color-text-primary); } .moo-wt-result:active { background: rgba(0,229,160,0.08); border-color: rgba(0,229,160,0.2); } .moo-wt-result__name { font-size: 14px; font-weight: 600; margin-bottom: 2px; } .moo-wt-result__detail { font-size: 12px; color: rgba(255,255,255,0.35); } /* ---- Weather Dashboard ---- */ .moo-wt-dashboard { padding: 16px; } /* Hero card */ .moo-wt-hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; margin-bottom: 12px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; overflow: hidden; } .moo-wt-hero::before { content: ''; position: absolute; top: -40%; left: -20%; width: 60%; height: 80%; background: radial-gradient(circle, rgba(0,229,160,0.08) 0%, transparent 70%); pointer-events: none; } .moo-wt-hero::after { content: ''; position: absolute; bottom: -30%; right: -10%; width: 50%; height: 70%; background: radial-gradient(circle, rgba(56,189,248,0.06) 0%, transparent 70%); pointer-events: none; } .moo-wt-hero__location { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.45); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 16px; position: relative; z-index: 1; } .moo-wt-hero__icon { font-size: 48px; margin-bottom: 8px; position: relative; z-index: 1; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-sky)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 2px 16px rgba(0,229,160,0.25)); } .moo-wt-hero__temp { font-size: 56px; font-weight: 800; letter-spacing: -3px; line-height: 1; margin-bottom: 4px; position: relative; z-index: 1; background: linear-gradient(135deg, var(--color-text-primary) 30%, var(--color-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .moo-wt-hero__condition { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.65); margin-bottom: 4px; position: relative; z-index: 1; } .moo-wt-hero__feels { font-size: 12px; color: rgba(255,255,255,0.35); position: relative; z-index: 1; } /* Detail pills row */ .moo-wt-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; } .moo-wt-pill { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 8px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; } .moo-wt-pill__icon { font-size: 16px; color: var(--color-accent); margin-bottom: 8px; opacity: 0.8; } .moo-wt-pill__value { font-size: 15px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 3px; } .moo-wt-pill__label { font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.4px; } /* Sunrise / Sunset bar */ .moo-wt-sun { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 12px 16px; margin-bottom: 12px; background: rgba(14, 22, 28, 0.90); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; } .moo-wt-sun__item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.5); font-weight: 500; } .moo-wt-sun__item i { color: var(--color-warning); font-size: 14px; opacity: 0.7; } .moo-wt-sun__item i.fa-moon { color: var(--color-night); } .moo-wt-sun__divider { width: 1px; height: 16px; background: rgba(28, 36, 44, 0.92); } /* 7-Day Forecast */ .moo-wt-forecast-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; padding: 0 2px; } .moo-wt-forecast { display: flex; flex-direction: column; gap: 6px; } .moo-wt-forecast-row { display: flex; align-items: center; padding: 12px 14px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; transition: background 0.2s; } .moo-wt-forecast-row--today { border-color: rgba(0,229,160,0.2); background: rgba(0,229,160,0.04); } .moo-wt-forecast-row__day { width: 46px; font-size: 13px; font-weight: 600; color: var(--color-text-primary); flex-shrink: 0; } .moo-wt-forecast-row--today .moo-wt-forecast-row__day { color: var(--color-accent); } .moo-wt-forecast-row__icon { width: 28px; text-align: center; font-size: 16px; color: var(--color-accent); opacity: 0.7; flex-shrink: 0; } .moo-wt-forecast-row__cond { flex: 1; font-size: 12px; color: rgba(255,255,255,0.4); padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moo-wt-forecast-row__temps { display: flex; gap: 6px; font-size: 14px; font-weight: 600; flex-shrink: 0; } .moo-wt-forecast-row__hi { color: var(--color-text-primary); } .moo-wt-forecast-row__lo { color: rgba(255,255,255,0.3); } .moo-wt-forecast-row__rain { width: 48px; text-align: right; font-size: 11px; color: rgba(56,189,248,0.6); flex-shrink: 0; margin-left: 8px; } .moo-wt-forecast-row__rain i { font-size: 10px; } /* ---- Weather Settings Modal ---- */ #wts_wrap { position: absolute; inset: 0; background: rgba(6,13,16,0.7); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #wts_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; background: rgba(20,30,38,0.95); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; width: min(400px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4,0,0.2,1); overflow: hidden; } #wts_body { overflow-y: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } /* Settings cards */ .moo-wt-setting { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .moo-wt-setting:last-child { border-bottom: none; } .moo-wt-setting__header { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.5); margin-bottom: 10px; } .moo-wt-setting__header i { color: var(--color-accent); font-size: 14px; opacity: 0.7; width: 18px; text-align: center; } .moo-wt-setting__value { font-size: 15px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 10px; } .moo-wt-setting__btn { background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 8px 16px; color: var(--color-accent); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.2s; } .moo-wt-setting__btn:active { background: rgba(28, 36, 44, 0.92); } /* Unit toggle */ .moo-wt-unit-toggle { display: flex; gap: 6px; } .moo-wt-unit-btn { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(14, 22, 28, 0.92); color: rgba(255,255,255,0.5); font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; } .moo-wt-unit-btn--active { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-bg); border-color: transparent; } /* Notification row */ .moo-wt-notify-row { display: flex; align-items: center; gap: 12px; } .moo-wt-notify-hint { margin-top: 8px; font-size: 11px; color: rgba(255,255,255,0.3); line-height: 1.4; } /* Toggle switch */ .moo-wt-toggle-wrap { cursor: pointer; padding: 4px 0; } .moo-wt-toggle { width: 44px; height: 24px; border-radius: 12px; background: rgba(255,255,255,0.12); position: relative; transition: background 0.25s; } .moo-wt-toggle--on { background: var(--color-accent); } .moo-wt-toggle__knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-white); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 1px 4px rgba(0,0,0,0.3); } .moo-wt-toggle--on .moo-wt-toggle__knob { transform: translateX(20px); } /* Time input */ .moo-wt-time-input { flex: 1; background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px 14px; font-family: 'Montserrat', sans-serif; font-size: 14px; color: var(--color-text-primary); outline: none; color-scheme: dark; transition: border-color 0.2s; } .moo-wt-time-input:focus { border-color: var(--color-accent); } .moo-wt-time-input:disabled { opacity: 0.35; } /* Reset weather button */ .moo-wt-reset-btn { width: 100%; padding: 10px 16px; background: rgba(244,63,94,0.1); border: 1px solid rgba(244,63,94,0.2); border-radius: 10px; color: var(--color-danger); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; } .moo-wt-reset-btn:active { background: rgba(244,63,94,0.18); } /* Reset confirmation modal */ #wtr_wrap { position: absolute; inset: 0; background: rgba(6,13,16,0.6); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #wtr_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; background: rgba(20,30,38,0.92); border: 1px solid rgba(244,63,94,0.15); border-radius: 24px; width: min(380px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4,0,0.2,1); overflow: hidden; } /* Back button in settings location search */ .moo-wt-back-btn { background: none; border: none; color: var(--color-accent); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; display: flex; align-items: center; gap: 6px; } /* Dashboard stagger animation */ .moo-wt-dashboard .moo-wt-hero { animation: moo-wt-fadeup 0.4s ease-out both; } .moo-wt-dashboard .moo-wt-details { animation: moo-wt-fadeup 0.4s ease-out 0.08s both; } .moo-wt-dashboard .moo-wt-sun { animation: moo-wt-fadeup 0.4s ease-out 0.14s both; } .moo-wt-dashboard .moo-wt-forecast-title { animation: moo-wt-fadeup 0.4s ease-out 0.18s both; } .moo-wt-dashboard .moo-wt-forecast { animation: moo-wt-fadeup 0.4s ease-out 0.22s both; } @keyframes moo-wt-fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Mobile refinements */ @media (max-width: 380px) { .moo-wt-details { grid-template-columns: repeat(2, 1fr); } .moo-wt-hero__temp { font-size: 48px; } .moo-wt-forecast-row__cond { display: none; } } /* ===== CHAT PASSWORD ENCRYPTION ===== */ /* Chat lock screen — fills chat content area below header */ .moo-chat-lock { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; height: calc(100% - 84px); min-height: 0; box-sizing: border-box; } .moo-chat-lock .moo-note-lock__icon { flex-shrink: 0; min-width: 72px; min-height: 72px; box-shadow: 0 0 60px rgba(0, 229, 160, 0.1); } /* Inline banner for legacy chats that aren't yet end-to-end encrypted. Sits above the message list without blocking the chat — lets the user keep reading while nudging them toward the info page's upgrade button. */ .moo-chat-migrate-banner { position: relative; display: flex; align-items: center; gap: 12px; margin: 10px 12px 0; padding: 12px 14px; background: rgba(0, 229, 160, 0.08); border: 1px solid rgba(0, 229, 160, 0.18); border-radius: 14px; z-index: 5; } .moo-chat-migrate-banner__icon { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; background: rgba(0, 229, 160, 0.14); color: var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: 14px; } .moo-chat-migrate-banner__text { flex: 1; min-width: 0; } .moo-chat-migrate-banner__title { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.01em; } .moo-chat-migrate-banner__desc { font-size: 12px; color: rgba(255, 255, 255, 0.45); margin-top: 2px; line-height: 1.4; } .moo-chat-migrate-banner__btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent); color: var(--color-bg); text-decoration: none; font-size: 11px; flex-shrink: 0; transition: transform 0.15s ease; } .moo-chat-migrate-banner__btn:active { transform: scale(0.92); } /* Chat migration overlay — shown while a legacy chat is being upgraded to E2EE. Same vertical rhythm as the lock screen, but with a pulsing shield halo to signal activity + a rotating status line that updates as phases complete. */ .moo-chat-migrate { position: absolute; inset: 0; background: var(--color-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; z-index: 20; box-sizing: border-box; gap: 6px; } .moo-chat-migrate__halo { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .moo-chat-migrate__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(0, 229, 160, 0.35); animation: moo-chat-migrate-pulse 1.8s cubic-bezier(0.25, 0.8, 0.4, 1) infinite; } .moo-chat-migrate__ring--delay { animation-delay: 0.6s; } .moo-chat-migrate__icon { position: relative; width: 72px; height: 72px; border-radius: 50%; background: rgba(0, 229, 160, 0.1); border: 1px solid rgba(0, 229, 160, 0.25); display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: 28px; box-shadow: 0 0 40px rgba(0, 229, 160, 0.15); } @keyframes moo-chat-migrate-pulse { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(1.6); opacity: 0; } } .moo-chat-migrate__title { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.01em; } .moo-chat-migrate__subtitle { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.42); max-width: 280px; margin-top: 4px; } .moo-chat-migrate__status { margin-top: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; color: rgba(255, 255, 255, 0.55); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; } .moo-chat-migrate__status i { color: var(--color-accent); font-size: 10px; } /* Chat info — encryption status */ .moo-enc-status { display: flex; align-items: center; gap: 8px; color: var(--color-accent); font-size: 14px; font-weight: 600; margin-bottom: 12px; } .moo-enc-status i { font-size: 13px; flex-shrink: 0; } .moo-enc-status--disabled { color: rgba(255, 255, 255, 0.3); } .moo-enc-e2ee-desc { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.4); } .moo-enc-lock-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .moo-enc-lock-row__title { font-size: 14px; color: var(--color-text-primary); font-weight: 600; } .moo-enc-lock-row__desc { font-size: 12px; color: rgba(255, 255, 255, 0.3); margin-top: 3px; } /* Enable encryption button */ .moo-enc-enable-btn { width: 100%; padding: 14px 20px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); border: none; border-radius: 12px; color: var(--color-bg); font-size: 15px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; } .moo-enc-enable-btn:active { transform: scale(0.97); } /* Disable encryption button */ .moo-enc-disable-btn { width: 100%; padding: 14px 20px; background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.2); border-radius: 12px; color: var(--color-warning); font-size: 15px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, transform 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; } .moo-enc-disable-btn:hover { background: rgba(251, 191, 36, 0.15); } .moo-enc-disable-btn:active { transform: scale(0.97); } /* Enable/Disable encryption modals */ #cpe_wrap, #cpd_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.6); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #cpe_modal, #cpd_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; background: rgba(20, 30, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: min(380px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } /* Forward picker — disabled encrypted targets */ .forward_item_disabled { opacity: 0.35; pointer-events: none; } /* Locked note list label */ .moo-note-item__locked-label { color: rgba(255, 255, 255, 0.3); display: inline-flex; align-items: center; gap: 5px; } .moo-note-item__locked-label i { font-size: 10px; color: rgba(255, 255, 255, 0.2); } /* Lock/Remove lock modals — reuse nc_modal structure */ #npl_wrap, #npr_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.6); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #npl_modal, #npr_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; background: rgba(20, 30, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: min(380px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } /* Delete note modal */ #nd_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.6); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #nd_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; background: rgba(20, 30, 38, 0.92); border: 1px solid rgba(244, 63, 94, 0.15); border-radius: 24px; width: min(380px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } /* Invite code modal */ #ic_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.6); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #ic_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; background: rgba(20, 30, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: min(380px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } /* Settings account modals (username, password, recovery key) */ #cu_wrap, #cp_wrap, #rk_wrap, #tf_wrap, #tfd_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.6); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #cu_modal, #cp_modal, #rk_modal, #tf_modal, #tfd_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; background: rgba(20, 30, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: min(380px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } /* Create note modal */ #nc_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.6); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #nc_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; background: rgba(20, 30, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: min(380px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .moo-nc-modal__header { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 24px 0; flex-shrink: 0; } .moo-nc-modal__icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(0, 229, 160, 0.1); border: 1px solid rgba(0, 229, 160, 0.15); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--color-accent); } .moo-nc-modal__title { font-size: 18px; font-weight: 700; text-align: center; } .moo-nc-modal__body { padding: 20px 24px; overflow-y: auto; overscroll-behavior: none; } .moo-nc-modal__input { width: 100%; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; color: var(--color-text-primary); padding: 16px 18px; font-size: 16px; font-weight: 600; font-family: 'Montserrat', sans-serif; outline: none; -webkit-appearance: none; transition: border-color 0.2s; box-sizing: border-box; user-select: text; -webkit-user-select: text; } .moo-nc-modal__input:focus { border-color: rgba(0, 229, 160, 0.4); } .moo-nc-modal__input::placeholder { color: rgba(255, 255, 255, 0.2); font-weight: 400; } .moo-nc-modal__actions { display: flex; gap: 10px; padding: 0 24px 24px; } .moo-nc-modal__create { flex: 1; padding: 14px 20px; border-radius: 12px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); border: none; color: var(--color-bg); font-size: 14px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, box-shadow 0.2s; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 6px; } .moo-nc-modal__create:hover:not(:disabled) { box-shadow: 0 8px 24px rgba(0, 229, 160, 0.25); } .moo-nc-modal__create:disabled { cursor: not-allowed; } /* Note share modal — reuses FM modal styles */ #note_share_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.6); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #note_share_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; background: rgba(20, 30, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: min(400px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .moo-note-share__btn { padding: 8px 14px; border-radius: 10px; background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-text-primary); font-size: 12px; font-weight: 600; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 5px; } .moo-note-share__btn--active { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.25); color: var(--color-accent); } .moo-note-share__btn--cancel { background: rgba(244, 63, 94, 0.1); border-color: rgba(244, 63, 94, 0.25); color: var(--color-danger); } .moo-note-share__btn--pending { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.22); color: var(--color-warning); } .moo-note-share__btn[disabled] { opacity: 0.45; cursor: not-allowed; } /* ---- Notes E2EE (v2) ---- */ body:has(.moo-notes-page) .moo-tools__empty { /* Let inline icon + text sit on one column */ display: flex; flex-direction: column; gap: 10px; } /* Override the default .chats_cont block layout — the notes tool needs a flex column so the editor textarea can stretch to the bottom of the viewport (matches the Cloud Drive .moo-cd-page pattern). */ .moo-notes-page { display: flex !important; flex-direction: column !important; overflow: hidden !important; } .moo-notes-main { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: none; } /* Direct children default to flex-shrink:1, which squishes them when the content exceeds the scroll container's height (seen as the migration banner collapsing to ~2px). Lock size so overflow scrolls instead. */ .moo-notes-main > .moo-notes-migration-banner, .moo-notes-main > .moo-notes-list, .moo-notes-main > .moo-notes-loading, .moo-notes-main > .moo-note-editor-wrap { flex-shrink: 0; } .moo-notes-list { display: flex; flex-direction: column; } .moo-notes-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255, 255, 255, 0.35); font-size: 14px; padding: 40px 0; text-align: center; } .moo-notes-empty i { font-size: 34px; color: rgba(255, 255, 255, 0.12); } .moo-notes-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; color: rgba(255, 255, 255, 0.3); font-size: 20px; } .moo-notes-migration-banner { margin: 0 0 14px; background: rgba(251, 191, 36, 0.06); border: 1px solid rgba(251, 191, 36, 0.18); border-radius: 12px; overflow: hidden; } .moo-notes-migration-banner__row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 12px; color: rgba(251, 191, 36, 0.95); border-top: 1px solid rgba(251, 191, 36, 0.1); } .moo-notes-migration-banner__row:first-child { border-top: none; } .moo-notes-migration-banner__row i { font-size: 13px; opacity: 0.9; flex-shrink: 0; } .moo-notes-setup__progress { margin-top: 14px; font-size: 12px; color: rgba(255, 255, 255, 0.5); text-align: center; font-weight: 500; letter-spacing: 0.2px; } .moo-note-editor-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; } .moo-note-editor-loading { display: flex; align-items: center; justify-content: center; padding: 60px 0; color: rgba(255, 255, 255, 0.3); font-size: 20px; } .moo-note-editor__legacy-banner { background: rgba(251, 191, 36, 0.07); border: 1px solid rgba(251, 191, 36, 0.18); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: 12px; color: rgba(251, 191, 36, 0.92); font-weight: 500; display: flex; align-items: center; gap: 10px; line-height: 1.45; } .moo-note-editor__legacy-banner i { font-size: 13px; flex-shrink: 0; } .moo-fm-file--disabled { opacity: 0.45; cursor: default; } .moo-fm-file--disabled .moo-fm-file__icon { background: rgba(255, 255, 255, 0.04); } .moo-fm-file--disabled .moo-fm-file__icon i { color: rgba(255, 255, 255, 0.35); } .moo-fm-file__meta { font-size: 11px; color: rgba(255, 255, 255, 0.4); margin-top: 2px; font-weight: 500; } /* ---- Calculator ---- */ .moo-calc { display: flex; flex-direction: column; max-width: 400px; max-height: 700px; margin: 0 auto; gap: 16px; height: 100%; } .moo-calc__display { background: rgba(14, 22, 28, 0.90); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 20px; padding: 24px 24px 20px; text-align: right; display: flex; flex-direction: column; justify-content: flex-end; flex-shrink: 1; min-height: 0; } .moo-calc__expression { font-size: 14px; color: rgba(255, 255, 255, 0.3); font-weight: 500; min-height: 20px; line-height: 20px; margin-bottom: 8px; word-break: break-all; } .moo-calc__expression i { font-size: 10px; vertical-align: middle; } .moo-calc__result { font-size: 48px; font-weight: 800; color: var(--color-text-primary); line-height: 1.1; letter-spacing: -1.5px; word-break: break-all; transition: font-size 0.15s ease; } .moo-calc__keypad { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr); gap: 10px; flex: 1; min-height: 0; } .moo-calc__key { border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(14, 22, 28, 0.92); color: var(--color-text-primary); font-size: 22px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: background 0.15s, transform 0.1s, border-color 0.15s; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; user-select: none; padding: 0; } .moo-calc__key:active { transform: scale(0.93); background: rgba(28, 36, 44, 0.92); } .moo-calc__key--fn { background: rgba(20, 28, 34, 0.92); color: rgba(255, 255, 255, 0.6); font-size: 17px; font-weight: 700; } .moo-calc__key--fn:active { background: rgba(32, 40, 48, 0.92); } .moo-calc__key--op { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.15); color: var(--color-accent); font-size: 18px; } .moo-calc__key--op:active { background: rgba(0, 229, 160, 0.25); } .moo-calc__key--zero { grid-column: span 2; border-radius: 16px; } .moo-calc__key--eq { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); border-color: transparent; color: var(--color-bg); font-size: 24px; font-weight: 800; } .moo-calc__key--eq:active { transform: scale(0.93); background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent)); } /* Calculator responsive */ @media (max-width: 380px) { .moo-calc__keypad { gap: 8px; } .moo-calc__key { border-radius: 14px; font-size: 20px; } .moo-calc__key--fn { font-size: 15px; } .moo-calc__key--op { font-size: 16px; } .moo-calc__result { font-size: 40px; } } /* ---- Cloud Drive Tool ---- */ .moo-cd-page { display: flex !important; flex-direction: column !important; height: calc(100% - 134px) !important; width: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: none !important; padding: 0 !important; background: transparent !important; font-size: 14px !important; } /* Setup screen — matches .moo-note-lock pattern */ .moo-cd-setup { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; min-height: 100%; box-sizing: border-box; } .moo-cd-setup::before, .moo-cd-setup::after { content: ''; flex: 1 0 24px; } .moo-cd-setup__icon { width: 72px; min-width: 72px; height: 72px; min-height: 72px; flex-shrink: 0; border-radius: 22px; background: rgba(0, 229, 160, 0.08); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--color-accent); margin-bottom: 20px; box-shadow: 0 0 40px rgba(0, 229, 160, 0.08); } .moo-cd-setup__title { font-size: 20px; font-weight: 800; color: var(--color-text-primary); margin-bottom: 6px; } .moo-cd-setup__subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.3); line-height: 1.5; max-width: 300px; margin-bottom: 8px; } .moo-cd-setup__form { width: 100%; max-width: 280px; padding-bottom: 24px; } .moo-cd-setup__input { width: calc(100% - 36px); background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; color: var(--color-text-primary); font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 500; padding: 16px 18px; outline: none; -webkit-appearance: none; transition: border-color 0.2s; margin-bottom: 10px; } .moo-cd-setup__input:focus { border-color: rgba(0, 229, 160, 0.4); } .moo-cd-setup__input::placeholder { color: rgba(255, 255, 255, 0.2); } .moo-cd-setup__error { font-size: 12px; color: var(--color-danger); font-weight: 600; margin-top: 8px; } .moo-cd-setup__error:empty { display: none; } .moo-cd-setup__btn { width: 100%; padding: 16px !important; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important; border: none !important; border-radius: 14px !important; color: var(--color-bg) !important; font-family: 'Montserrat', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; display: flex !important; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; } .moo-cd-setup__btn:active { transform: scale(0.97); } /* Lock screen — matches .moo-note-lock pattern */ .moo-cd-lock { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; min-height: 100%; box-sizing: border-box; } .moo-cd-lock::before, .moo-cd-lock::after { content: ''; flex: 1 0 24px; } .moo-cd-lock__icon { width: 72px; min-width: 72px; height: 72px; min-height: 72px; flex-shrink: 0; border-radius: 22px; background: rgba(0, 229, 160, 0.08); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--color-accent); margin-bottom: 20px; box-shadow: 0 0 40px rgba(0, 229, 160, 0.08); } .moo-cd-lock__title { font-size: 20px; font-weight: 800; color: var(--color-text-primary); } .moo-cd-lock__subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.3); margin-bottom: 20px; } .moo-cd-lock__form { width: 100%; max-width: 280px; padding-bottom: 24px; } .moo-cd-lock__input { width: calc(100% - 36px); background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; color: var(--color-text-primary); font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 500; padding: 16px 18px; outline: none; -webkit-appearance: none; transition: border-color 0.2s; } .moo-cd-lock__input:focus { border-color: rgba(0, 229, 160, 0.4); } .moo-cd-lock__input::placeholder { color: rgba(255, 255, 255, 0.2); } .moo-cd-lock__error { font-size: 12px; color: var(--color-danger); font-weight: 600; margin-top: 8px; } .moo-cd-lock__error:empty { display: none; } .moo-cd-lock__btn { width: 100%; padding: 16px !important; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important; border: none !important; border-radius: 14px !important; color: var(--color-bg) !important; font-family: 'Montserrat', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; display: flex !important; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; } .moo-cd-lock__btn:active { transform: scale(0.97); } /* ===== Hidden Folder Unlock Modal (admin-only) ===== Triggered by a silent 5-second long-press on the Cloud Drive settings gear. Piggybacks on .moo-nc-modal__ shell; this block only overrides the icon treatment, subtitle, and the Unlock CTA so the modal reads as "secured / admin-only" without drifting from the rest of Cloud Drive's aurora theme. */ .moo-cd-hf__icon { background: rgba(0, 229, 160, 0.12) !important; border: 1px solid rgba(0, 229, 160, 0.3); box-shadow: 0 0 24px rgba(0, 229, 160, 0.2); color: var(--color-accent) !important; } /* Wraps the title + subtitle inside the modal header so they sit as a single block (tight vertical rhythm) instead of being pulled apart by the header's flex gap. */ .moo-cd-hf__heading { display: flex; flex-direction: column; align-items: center; gap: 4px; } .moo-cd-hf__subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.5); text-align: center; margin: 0; letter-spacing: 0.01em; } .moo-cd-hf__btn { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important; color: var(--color-bg) !important; font-weight: 700 !important; } /* Browser */ .moo-cd-browser { display: flex !important; flex-direction: column !important; flex: 1 !important; min-height: 0 !important; overflow-y: auto; overscroll-behavior: none; height: 100% !important; } /* Breadcrumbs */ .moo-cd-breadcrumbs { display: flex; gap: 6px; align-items: center; padding: 14px 16px 10px; font-size: 13px; color: rgba(255, 255, 255, 0.35); flex-wrap: wrap; flex-shrink: 0; max-height: 72px; overflow-y: auto; overscroll-behavior: none; } .moo-cd-breadcrumb { cursor: pointer; transition: color 0.15s; } .moo-cd-breadcrumb:active { color: var(--color-accent); } .moo-cd-breadcrumb--active { color: var(--color-text-primary); font-weight: 600; cursor: default; } .moo-cd-breadcrumb-sep { font-size: 8px; color: rgba(255, 255, 255, 0.15); } /* Item rows */ .moo-cd-list { flex: 1; min-height: 0; } .moo-cd-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); cursor: pointer; transition: background 0.15s; -webkit-user-select: none; user-select: none; } /* Strip the trailing divider from the last row so the list ends cleanly * instead of with an orphan line. The first row already has no top border * (rule above is bottom-only), so the pattern is row-divider, not full- * underline-each-row. */ .moo-cd-item:last-child { border-bottom: 0; } .moo-cd-item:active { background: rgba(14, 22, 28, 0.90); } .moo-cd-item__icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(0, 229, 160, 0.06); font-size: 16px; color: var(--color-accent); flex-shrink: 0; } .moo-cd-item__icon--folder { background: rgba(251, 191, 36, 0.08); color: var(--color-warning); } .moo-cd-item__info { flex: 1; min-width: 0; } .moo-cd-item__name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moo-cd-item__meta { font-size: 11px; color: rgba(255, 255, 255, 0.3); margin-top: 2px; } /* Extension badge. Lives at row level (sibling of __info in list rows, * sibling of __name in video tile rows) so it centres against the full * row via the row's flex `align-items:center` instead of just the name * text. Inline-flex + line-height:1 keeps the glyph centred inside its * own explicit-height box regardless of font metrics. */ .moo-cd-ext-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 7px; background: rgba(0, 229, 160, 0.12); border: 1px solid rgba(0, 229, 160, 0.28); color: var(--color-accent); border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; line-height: 1; font-family: 'Montserrat', sans-serif; box-sizing: border-box; user-select: none; -webkit-user-select: none; /* Decorative — clicks pass through to the row's open-file handler so * a tap that lands on the badge doesn't get swallowed. */ pointer-events: none; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .moo-cd-item__more { background: none !important; border: none !important; color: rgba(255, 255, 255, 0.3) !important; font-size: 16px !important; padding: 8px !important; cursor: pointer; flex-shrink: 0; border-radius: 8px !important; transition: background-color 0.15s, color 0.15s !important; } .moo-cd-item__more:hover { background: rgba(255, 255, 255, 0.06) !important; color: rgba(255, 255, 255, 0.7) !important; } .moo-cd-item__more:active { background: rgba(18, 26, 32, 0.92) !important; } /* ========================================================================== * VIDEO GRID — auto-triggered when a folder contains only videos. * Tiles render the on-demand thumbnail, the canonical mint play overlay, * the title + kebab beneath. Hover (or long-press on touch) plays a * slideshow of frames captured from evenly-spaced points in the video. * ======================================================================== */ /* When the list container is in grid mode it doesn't have the row-style * border-bottom + per-row padding — the grid manages its own spacing. * The .moo-cd-vtile rule below resets the per-tile look so it doesn't * inherit the row layout from .moo-cd-item. */ /* Applied to #cd_list itself (not an inner wrapper). The override on flex + * min-height is critical: #cd_list has `.moo-cd-list { flex: 1; min-height: 0 }` * which would otherwise lock #cd_list to the flex remainder height of * .moo-cd-browser, leaving the grid's overflow as visual ink only — the * parent's overflow:auto can't scroll content that doesn't push its own * box bounds. With flex: 0 0 auto, #cd_list sizes to its natural grid * content height, and .moo-cd-browser's scroll engages naturally as soon * as breadcrumbs + grid total height exceeds the viewport. */ .moo-cd-list--grid { flex: 0 0 auto !important; min-height: auto !important; padding: 18px; display: grid; /* Larger tiles for video — fewer per row, more visible thumbnail real estate. * Minmax floor is the smallest a tile shrinks to before wrapping. */ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px 18px; align-content: start; } @media (max-width: 900px) { .moo-cd-list--grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } } @media (max-width: 600px) { .moo-cd-list--grid { /* 1fr at this width = single column, video fills full width */ grid-template-columns: 1fr; gap: 14px; padding: 12px; } } /* Reset .moo-cd-item row-look for grid tiles (we still keep the data-* + click * delegation by reusing the .moo-cd-item--file class, so existing handlers in * cdLoadFolder fire on tile click for play + on .moo-cd-item__more for kebab). */ .moo-cd-vtile.moo-cd-item { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-bottom: none; border-radius: 14px; background: rgba(14, 22, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.18s, box-shadow 0.18s; -webkit-touch-callout: none; } .moo-cd-vtile.moo-cd-item:hover { transform: translateY(-2px); border-color: rgba(0, 229, 160, 0.22); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); } .moo-cd-vtile.moo-cd-item:active { transform: translateY(0); background: rgba(14, 22, 28, 0.55); } .moo-cd-vtile__media { position: relative; aspect-ratio: 16 / 9; background: #060d10; overflow: hidden; border-radius: 14px 14px 0 0; } /* Pre-generated sprite poster — the .__media element shows a single cell of * the encrypted sprite via background-image + background-position (set by * cdApplySpriteCell). Hides the fallback film icon underneath. */ .moo-cd-vtile--sprite-poster .moo-cd-vtile__play { display: none; } /* Mint play overlay — same translucent green as Video.js big-play, scaled down * to fit the tile thumbnail and centered. Always visible (signals "this is a * video" before any hover). Slight lift on tile hover. */ .moo-cd-vtile__play { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(0, 229, 160, 0.15); border: 2px solid rgba(0, 229, 160, 0.4); color: var(--color-accent); display: flex; align-items: center; justify-content: center; font-size: 18px; pointer-events: none; transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.18s, border-color 0.18s; } .moo-cd-vtile__play > i { margin-left: 3px; /* optical centering for the play triangle */ } .moo-cd-vtile.moo-cd-item:hover .moo-cd-vtile__play { transform: scale(1.08); background: rgba(0, 229, 160, 0.22); border-color: rgba(0, 229, 160, 0.55); } /* Title + kebab row underneath the media. */ .moo-cd-vtile__row { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 14px; min-width: 0; } .moo-cd-vtile__name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.1px; } /* Video tile is tighter than the list row, so dial the badge down * slightly so it doesn't dominate the title. Selector targets the row * (badge is a sibling of __name now, not a child). */ .moo-cd-vtile__row .moo-cd-ext-badge { height: 18px; padding: 0 6px; font-size: 9px; border-radius: 5px; } .moo-cd-vtile .moo-cd-item__more { padding: 6px !important; font-size: 14px !important; margin-right: -2px; } /* Context menu */ .moo-cd-ctx { position: fixed; z-index: 99999; background: rgba(20, 30, 38, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 8px 0; min-width: 170px; } .moo-cd-ctx__item { padding: 12px 20px; font-size: 14px; font-weight: 500; color: var(--color-text-primary); display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background 0.12s; } /* Fixed-width icon column so labels line up flush across rows even when * the icons have different intrinsic widths (e.g. fa-file 10px wide vs * fa-folder-plus 18px wide). Icon is centered within the 18px slot; the * label then starts at the same x for every row. */ .moo-cd-ctx__item > i { display: inline-flex; justify-content: center; width: 18px; flex-shrink: 0; font-size: 14px; } .moo-cd-ctx__item:active { background: rgba(18, 26, 32, 0.92); } .moo-cd-ctx__item--danger { color: var(--color-danger); } /* Empty state */ .moo-cd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-height: 0; color: rgba(255, 255, 255, 0.2); gap: 10px; font-size: 14px; padding: 24px; } .moo-cd-empty i { font-size: 36px; } .moo-cd-empty__btn { margin-top: 6px; padding: 10px 20px !important; background: rgba(0, 229, 160, 0.08) !important; border: 1px solid rgba(0, 229, 160, 0.15) !important; border-radius: 10px !important; color: var(--color-accent) !important; font-family: 'Montserrat', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer; display: flex !important; align-items: center; justify-content: center; gap: 6px; } .moo-cd-empty__btn:active { background: rgba(0, 229, 160, 0.14) !important; } .moo-cd-empty__btn i { font-size: 13px; } /* Loading */ .moo-cd-loading { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; font-size: 20px; color: rgba(255, 255, 255, 0.2); } /* Drag & drop zone */ .moo-cd-dropzone { position: absolute; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(6, 13, 16, 0.8); } .moo-cd-dropzone__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px; border: 2px dashed rgba(0, 229, 160, 0.3); border-radius: 20px; color: var(--color-accent); font-size: 15px; font-weight: 600; } .moo-cd-dropzone__inner i { font-size: 36px; } /* ===== Upload queue modal (Cloud Drive) ===== * Queue-based upload UI — shows one row per file with live state * (pending / encrypting / uploading / done / failed / skipped), inline * retry buttons, and an overall progress ring. Replaces the old single- * ring overlay which gave no per-file visibility. */ #cd_upload_overlay { position: fixed; inset: 0; background: rgba(6, 13, 16, 0.82); z-index: 100000; animation: mooOverlayIn 0.25s ease-out; } #cd_upload_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 32px)); max-height: min(720px, calc(100dvh - 48px)); max-height: min(720px, calc(100vh - 48px)); display: flex; flex-direction: column; background: rgba(20, 30, 38, 0.96); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px; box-shadow: 0 32px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 229, 160, 0.04); z-index: 100001; overflow: hidden; animation: mooModalIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); } .moo-cdu__header { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 16px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; } .moo-cdu__header-main { flex: 1; min-width: 0; } .moo-cdu__title { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.01em; line-height: 1.25; } .moo-cdu__subtitle { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.5); margin-top: 4px; letter-spacing: 0.01em; } .moo-cdu__close { width: 34px; height: 34px; border-radius: 11px; background: rgba(16, 24, 30, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: opacity 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; flex-shrink: 0; } .moo-cdu__close:hover { background: rgba(244, 63, 94, 0.12); border-color: rgba(244, 63, 94, 0.3); color: var(--color-danger); } /* Summary: big ring + stat pills */ .moo-cdu__summary { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); flex-shrink: 0; background: radial-gradient(circle at 0% 0%, rgba(0, 229, 160, 0.06), transparent 60%), radial-gradient(circle at 100% 100%, rgba(6, 13, 16, 0.4), transparent 60%); } .moo-cdu__ring-wrap { position: relative; width: 72px; height: 72px; flex-shrink: 0; } .moo-cdu__ring { width: 72px; height: 72px; } .moo-cdu__ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 5; } .moo-cdu__ring-fg { fill: none; stroke: url(#cdUpGradient); stroke: var(--color-accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 226.2; stroke-dashoffset: 226.2; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 0.35s cubic-bezier(0.4, 0, 0.2, 1); filter: drop-shadow(0 0 8px rgba(0, 229, 160, 0.35)); } .moo-cdu__ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .moo-cdu__stats { flex: 1; display: flex; flex-wrap: wrap; gap: 6px 10px; min-width: 0; } .moo-cdu__stat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; border: 1px solid transparent; white-space: nowrap; letter-spacing: 0.02em; } .moo-cdu__stat i { font-size: 10px; } .moo-cdu__stat--done { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.22); color: var(--color-accent); } .moo-cdu__stat--active { background: rgba(0, 229, 160, 0.06); border-color: rgba(0, 229, 160, 0.15); color: rgba(0, 229, 160, 0.85); } .moo-cdu__stat--pending { background: rgba(14, 22, 28, 0.92); border-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); } .moo-cdu__stat--failed { background: rgba(244, 63, 94, 0.1); border-color: rgba(244, 63, 94, 0.24); color: var(--color-danger); } /* Scrollable file list. No bottom padding on the wrapper — the last item's * own internal padding + the footer's top border/padding already provide * visual separation. Adding wrapper padding-bottom caused "double padding" * below the last row. */ .moo-cdu__list-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: none; /* Balanced top/bottom padding so the first and last rows have breathing room against the summary above and the footer below. */ padding: 14px 16px 16px 16px; } .moo-cdu__list { display: flex; flex-direction: column; gap: 8px; } .moo-cdu__item { display: grid; grid-template-columns: 38px 1fr auto auto; align-items: center; gap: 12px; padding: 11px 13px; /* Solid enough to read as a real card even in "pending" state — previous 3.5% alpha made pending/done rows look washed-out next to the vivid active row, which read as "grayed out / disabled". */ background: rgba(22, 30, 36, 0.92); border: 1px solid rgba(255, 255, 255, 0.13); border-left: 3px solid rgba(255, 255, 255, 0.22); border-radius: 12px; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease; animation: mooCduItemIn 0.25s ease-out; } @keyframes mooCduItemIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Active upload: clearly highlighted so the user can see which file is currently being processed. Previous 5% green was so faint the row looked "grayed out" alongside idle rows. */ .moo-cdu__item--active { background: rgba(0, 229, 160, 0.11); border-color: rgba(0, 229, 160, 0.32); border-left-color: var(--color-accent); box-shadow: 0 0 0 1px rgba(0, 229, 160, 0.08), 0 4px 18px -6px rgba(0, 229, 160, 0.35); } .moo-cdu__item--done { background: rgba(0, 229, 160, 0.045); border-color: rgba(0, 229, 160, 0.18); border-left-color: var(--color-accent); } /* Done rows stay at full opacity — the green left border + state badge is the completion cue. Previously we faded the icon to 0.7 opacity which read as "washed out" once several rows were done. */ .moo-cdu__item--failed { background: rgba(244, 63, 94, 0.06); border-color: rgba(244, 63, 94, 0.2); border-left-color: var(--color-danger); } .moo-cdu__item--skipped { background: rgba(251, 191, 36, 0.05); border-color: rgba(251, 191, 36, 0.18); border-left-color: var(--color-warning); } .moo-cdu__icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; border: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; } .moo-cdu__icon--mint { background: rgba(0, 229, 160, 0.1); color: var(--color-accent); border-color: rgba(0, 229, 160, 0.22); } .moo-cdu__icon--sky { background: rgba(96, 165, 250, 0.1); color: #60a5fa; border-color: rgba(96, 165, 250, 0.22); } .moo-cdu__icon--amber { background: rgba(251, 191, 36, 0.1); color: var(--color-warning); border-color: rgba(251, 191, 36, 0.22); } .moo-cdu__icon--rose { background: rgba(244, 63, 94, 0.1); color: var(--color-danger); border-color: rgba(244, 63, 94, 0.22); } .moo-cdu__icon--muted { background: rgba(16, 24, 30, 0.92); color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.08); } .moo-cdu__info { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .moo-cdu__name { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .moo-cdu__meta { font-size: 11px; color: rgba(255, 255, 255, 0.45); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.01em; } .moo-cdu__err { color: var(--color-danger); font-weight: 600; } .moo-cdu__item--skipped .moo-cdu__err { color: var(--color-warning); } /* Thin inline progress bar — only rendered during active upload */ .moo-cdu__bar { margin-top: 4px; height: 3px; border-radius: 3px; background: rgba(24, 32, 40, 0.92); overflow: hidden; } .moo-cdu__bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark)); border-radius: 3px; transition: width 0.25s ease; box-shadow: 0 0 8px rgba(0, 229, 160, 0.4); } .moo-cdu__state { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .moo-cdu__state--done { background: rgba(0, 229, 160, 0.12); color: var(--color-accent); } .moo-cdu__state--active { background: rgba(0, 229, 160, 0.08); color: var(--color-accent); } .moo-cdu__state--pending { background: rgba(14, 22, 28, 0.92); color: rgba(255, 255, 255, 0.35); } .moo-cdu__state--failed { background: rgba(244, 63, 94, 0.14); color: var(--color-danger); } .moo-cdu__state--skipped { background: rgba(251, 191, 36, 0.12); color: var(--color-warning); } .moo-cdu__item-retry { width: 28px; height: 28px; border-radius: 8px; background: rgba(0, 229, 160, 0.12); border: 1px solid rgba(0, 229, 160, 0.24); color: var(--color-accent); font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: opacity 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; flex-shrink: 0; } .moo-cdu__item-retry:hover { background: rgba(0, 229, 160, 0.2); border-color: rgba(0, 229, 160, 0.4); } /* Footer actions */ .moo-cdu__actions { display: flex; gap: 10px; padding: 14px 22px 20px 22px; border-top: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; background: rgba(6, 13, 16, 0.3); } .moo-cdu__btn { flex: 1; height: 42px; border-radius: 12px; border: none; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; letter-spacing: 0.02em; } .moo-cdu__btn--primary { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-bg); box-shadow: 0 6px 20px rgba(0, 229, 160, 0.25); } .moo-cdu__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 229, 160, 0.35); } .moo-cdu__btn--primary:active { transform: translateY(0); } .moo-cdu__btn--secondary { background: rgba(16, 24, 30, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-text-primary); } .moo-cdu__btn--secondary:hover { background: rgba(26, 34, 42, 0.92); border-color: rgba(255, 255, 255, 0.16); } /* Cloud Drive toast — non-blocking replacement for alert() */ .moo-cd-toast { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0)); left: 50%; transform: translateX(-50%) translateY(12px); max-width: calc(100% - 32px); padding: 13px 18px; border-radius: 14px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; z-index: 100005; display: flex; align-items: center; gap: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); opacity: 0; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.3s ease; pointer-events: none; } .moo-cd-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); } .moo-cd-toast i { font-size: 14px; flex-shrink: 0; } .moo-cd-toast--error { background: rgba(32, 12, 18, 0.92); border: 1px solid rgba(244, 63, 94, 0.3); color: var(--color-toast-error); } .moo-cd-toast--error i { color: var(--color-danger); } .moo-cd-toast--warn { background: rgba(32, 26, 12, 0.92); border: 1px solid rgba(251, 191, 36, 0.3); color: var(--color-toast-warn); } .moo-cd-toast--warn i { color: var(--color-warning); } .moo-cd-toast--info { background: rgba(12, 26, 22, 0.92); border: 1px solid rgba(0, 229, 160, 0.28); color: var(--color-toast-info); } .moo-cd-toast--info i { color: var(--color-accent); } /* ===== CLOUD DRIVE DOWNLOAD PROGRESS MODAL ===== */ /* Shown while a file is being fetched + decrypted. Mirrors the visual language of the upload queue modal so both flows feel consistent. */ /* ============================================================== CLOUD DRIVE — DOWNLOAD PROGRESS MODAL ============================================================== "Receiving transmission" aesthetic — a single vertical stack anchored around a big progress ring. Ring sits near the top with a soft mint aurora glow; title, filename, phase and byte counter stack beneath in descending weight. Cancel button is absolutely positioned in the top-right corner so it never competes with content for horizontal space. This vertical layout is deliberately bulletproof: no flex-row fragility on narrow viewports, everything in one column with known widths. */ #cd_dl_overlay { position: fixed; inset: 0; background: radial-gradient(ellipse 600px 300px at 50% 20%, rgba(0, 229, 160, 0.07), transparent 70%), rgba(6, 13, 16, 0.85); z-index: 100002; animation: mooOverlayIn 0.25s ease-out; } #cd_dl_modal { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: calc(100% - 32px) !important; max-width: 380px !important; background: radial-gradient(ellipse 380px 180px at 50% 0%, rgba(0, 229, 160, 0.08), transparent 70%), rgba(14, 22, 28, 0.96) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 22px !important; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 229, 160, 0.04) inset !important; z-index: 100003 !important; animation: mooModalIn 0.25s ease-out; overflow: hidden !important; padding: 36px 28px 32px 28px !important; text-align: center !important; box-sizing: border-box !important; /* Force flex column so all children stack vertically and centre regardless of any generic #cd_dl_modal selectors elsewhere in the cascade. Note `display` is deliberately NOT set here — the inline HTML style starts it hidden and the JS `.css('display', 'flex')` toggles it on. Setting display with !important here would block the JS show/hide. */ flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; } /* All download-modal children are targeted with ID+class selectors so the specificity is higher than `#cd_dl_modal > *`-style rules and higher than any bare class rules elsewhere in the cascade. This makes the layout immune to cascade surprises from future generic rules. */ /* Close button — absolute-positioned in corner, doesn't participate in flow. */ #cd_dl_modal > .moo-cddl__close { position: absolute !important; top: 14px !important; right: 14px !important; left: auto !important; width: 34px !important; height: 34px !important; max-width: 34px !important; background: rgba(18, 26, 32, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.7) !important; border-radius: 50% !important; cursor: pointer !important; font-size: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background 0.15s, color 0.15s, border-color 0.15s; padding: 0 !important; z-index: 2 !important; margin: 0 !important; box-sizing: border-box !important; } #cd_dl_modal > .moo-cddl__close:hover { background: rgba(244, 63, 94, 0.18) !important; color: var(--color-danger) !important; border-color: rgba(244, 63, 94, 0.35) !important; } /* Ring wrapper — fixed 120px square, auto-centred horizontally by margin. */ #cd_dl_modal > .moo-cddl__ring-wrap { position: relative !important; width: 120px !important; height: 120px !important; min-width: 0 !important; max-width: 120px !important; margin: 0 auto 22px auto !important; padding: 0 !important; display: block !important; flex-shrink: 0 !important; box-sizing: border-box !important; } #cd_dl_modal .moo-cddl__ring { width: 120px !important; height: 120px !important; display: block !important; overflow: visible; } #cd_dl_modal .moo-cddl__ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 7; } #cd_dl_modal .moo-cddl__ring-fg { fill: none; stroke: var(--color-accent); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 0.3s ease-out; filter: drop-shadow(0 0 10px rgba(0, 229, 160, 0.55)); } #cd_dl_modal .moo-cddl__ring-pct { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 22px !important; font-weight: 800 !important; color: var(--color-accent) !important; font-variant-numeric: tabular-nums !important; letter-spacing: -0.02em; margin: 0 !important; padding: 0 !important; } /* Text rows — block-level, full width, centred by text-align + flexbox parent. min-width: 0 is CRITICAL so long filenames trigger text-overflow: ellipsis instead of forcing the flex item wider than the modal. */ #cd_dl_modal > .moo-cddl__title, #cd_dl_modal > .moo-cddl__filename, #cd_dl_modal > .moo-cddl__phase, #cd_dl_modal > .moo-cddl__bytes { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; text-align: center !important; flex-shrink: 0 !important; box-sizing: border-box !important; padding: 0 !important; } #cd_dl_modal > .moo-cddl__title { font-size: 16px !important; font-weight: 700 !important; color: var(--color-text-primary) !important; letter-spacing: 0.01em; margin: 0 0 6px 0 !important; } #cd_dl_modal > .moo-cddl__filename { font-size: 12px !important; color: rgba(255, 255, 255, 0.48) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 0 20px 0 !important; font-weight: 500 !important; } #cd_dl_modal > .moo-cddl__phase { font-size: 13px !important; font-weight: 600 !important; color: rgba(0, 229, 160, 0.9) !important; letter-spacing: 0.02em; text-transform: uppercase !important; margin: 0 0 6px 0 !important; } #cd_dl_modal > .moo-cddl__bytes { font-size: 12px !important; color: rgba(255, 255, 255, 0.5) !important; font-variant-numeric: tabular-nums !important; font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace !important; min-height: 1em !important; margin: 0 !important; } /* Tight layout on narrow screens */ @media (max-width: 520px) { .moo-cdu__summary { flex-direction: column; align-items: flex-start; gap: 14px; } .moo-cdu__ring-wrap { align-self: center; } .moo-cdu__stats { width: 100%; justify-content: center; } .moo-cdu__item { grid-template-columns: 34px 1fr auto; gap: 10px; padding: 9px 10px; } .moo-cdu__icon { width: 34px; height: 34px; font-size: 14px; } .moo-cdu__name { font-size: 12.5px; } .moo-cdu__meta { font-size: 10.5px; } .moo-cdu__item-retry { grid-column: 3; grid-row: 1; } /* On mobile, failed items show the retry button in column 3 instead of the state indicator — hide the state icon to prevent overlap. Using a direct class selector instead of :has() for older Firefox compatibility. */ .moo-cdu__item--failed .moo-cdu__state { display: none; } } /* Cloud Drive Modals — all use position: absolute for keyboard awareness */ #cdf_wrap, #cdr_wrap, #cdm_wrap, #cdi_wrap, #cdd_wrap, #cds_wrap, #cda_wrap, #cdhf_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.7); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #cdf_modal, #cdr_modal, #cdm_modal, #cdi_modal, #cdd_modal, #cds_modal, #cda_modal, #cdhf_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; background: rgba(20, 30, 38, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: min(380px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .moo-cd-modal__error { font-size: 12px; color: var(--color-danger); font-weight: 600; text-align: center; margin-top: 8px; } .moo-cd-modal__error:empty { display: none; } .moo-cd-modal__error--padded { padding: 0 24px; } /* Rename modal: input + extension-suffix pill. The pill carries the full * extension (".pdf", ".tar.gz" via lastIndexOf — see cdSplitExt) and is * non-editable so renames can't accidentally drop or change the type. * Hidden via :empty for folders / extension-less files so the input can * span the full row. * * Padding/font/line-height mirror .moo-nc-modal__input (16px vertical * padding, 16px font, 1.2 line-height) so the pill renders at the same * height as the input without flex-stretch — flex-stretch + a flex * container breaks text-overflow:ellipsis, and the inputs already have * stable padding so the mirror is robust enough. */ .moo-cd-rename__row { display: flex; align-items: center; gap: 8px; } .moo-cd-rename__row .moo-nc-modal__input { flex: 1; min-width: 0; } .moo-cd-rename__ext { flex: 0 0 auto; max-width: 45%; padding: 16px 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; color: rgba(255, 255, 255, 0.55); font-size: 16px; font-weight: 600; font-family: 'Montserrat', sans-serif; line-height: 1.2; box-sizing: border-box; user-select: none; -webkit-user-select: none; pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .moo-cd-rename__ext:empty { display: none; } /* Move modal list — margin above + below separates the scrollable list from the modal header ("Move To" title) and the actions footer ("Move Here" button) so items never visually touch either when scrolled. Subtle top + bottom borders reinforce the separation. */ .moo-cd-move__list { max-height: 250px; overflow-y: auto; overscroll-behavior: none; padding: 8px 0; margin: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .moo-cd-move__item { padding: 12px 24px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.6); cursor: pointer; display: flex; align-items: center; gap: 12px; transition: background 0.12s; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .moo-cd-move__item:last-child { border-bottom: none; } .moo-cd-move__item:active { background: rgba(14, 22, 28, 0.92); } .moo-cd-move__item--selected { background: rgba(0, 229, 160, 0.08); color: var(--color-accent); font-weight: 600; } /* File info modal */ .moo-cd-info__body { padding: 16px 24px; } .moo-cd-info__row { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); gap: 16px; } .moo-cd-info__row:last-child { border-bottom: none; } .moo-cd-info__label { font-size: 13px; color: rgba(255, 255, 255, 0.35); font-weight: 500; flex-shrink: 0; } .moo-cd-info__value { font-size: 14px; color: var(--color-text-primary); font-weight: 500; text-align: right; word-break: break-all; } /* Delete modals — match .moo-da-modal pattern */ #cdd_modal .moo-nc-modal__body, #cda_modal .moo-nc-modal__body { padding: 16px 24px; } #cdd_modal .moo-nc-modal__actions, #cda_modal .moo-nc-modal__actions { padding: 0 24px 20px; } .moo-cd-delete__msg { font-size: 14px; color: rgba(255, 255, 255, 0.5); line-height: 1.5; } .moo-cd-delete__cancel { flex: 1; padding: 14px 20px !important; background: rgba(16, 24, 30, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; color: rgba(255, 255, 255, 0.5) !important; font-weight: 700 !important; font-size: 14px !important; font-family: 'Montserrat', sans-serif !important; cursor: pointer; } .moo-cd-delete__cancel:active { background: rgba(28, 36, 44, 0.92) !important; } .moo-cd-delete__confirm { flex: 1; padding: 14px 20px !important; white-space: nowrap; background: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark)) !important; border: none !important; border-radius: 12px !important; color: var(--color-white) !important; font-weight: 700 !important; font-size: 14px !important; font-family: 'Montserrat', sans-serif !important; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .moo-cd-delete__confirm:active { opacity: 0.85; } /* Cloud Drive Settings Modal */ .moo-cd-settings__section { padding: 20px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .moo-cd-settings__section:last-child { border-bottom: none; } .moo-cd-settings__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .moo-cd-settings__label { flex: 1; min-width: 0; } .moo-cd-settings__label-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); } .moo-cd-settings__label-desc { font-size: 12px; color: rgba(255, 255, 255, 0.4); margin-top: 4px; line-height: 1.4; } .moo-cd-settings__section--danger { padding: 16px 24px; } .moo-cd-settings__danger-btn { width: 100%; padding: 14px 20px !important; background: rgba(244, 63, 94, 0.1) !important; border: 1px solid rgba(244, 63, 94, 0.2) !important; border-radius: 12px !important; color: var(--color-danger) !important; font-weight: 700 !important; font-size: 14px !important; font-family: 'Montserrat', sans-serif !important; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .moo-cd-settings__danger-btn:active { background: rgba(244, 63, 94, 0.2) !important; } #cds_modal .moo-nc-modal__actions { padding: 0 24px 20px; } .moo-nc-modal__create:disabled { opacity: 0.45; cursor: not-allowed; } /* File Manager Cloud Drive item */ .moo-cd-fm-item { display: flex; align-items: center; gap: 14px; padding: 16px; width: 100%; box-sizing: border-box; background: linear-gradient(135deg, rgba(0, 229, 160, 0.06) 0%, rgba(14, 165, 233, 0.06) 100%); border: 1px solid rgba(0, 229, 160, 0.12); border-radius: 14px; margin-bottom: 24px; } .moo-cd-fm-item__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-bg); font-size: 17px; flex-shrink: 0; } .moo-cd-fm-item__info { flex: 1; min-width: 0; } .moo-cd-fm-item__name { font-size: 14px; font-weight: 700; color: var(--color-text-primary); } .moo-cd-fm-item__size { font-size: 12px; color: var(--color-accent); font-weight: 500; margin-top: 3px; } .moo-cd-fm-item__badge { font-size: 10px; font-weight: 600; color: var(--color-accent); background: rgba(0, 229, 160, 0.1); padding: 3px 8px; border-radius: 6px; flex-shrink: 0; } /* ---- Gang Rota ---- */ .moo-gr-holiday { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.15); border-radius: 16px; color: var(--color-warning); font-size: 14px; font-weight: 600; margin-bottom: 24px; } .moo-gr-holiday i { font-size: 18px; flex-shrink: 0; } .moo-gr-section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.4); margin-bottom: 12px; margin-top: 24px; } .moo-gr-section-label:first-child, .moo-gr-holiday + .moo-gr-section-label { margin-top: 0; } .moo-gr-card { display: flex; align-items: center; gap: 20px; padding: 18px 20px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px; max-width: 500px; } .moo-gr-card--active { background: rgba(0, 229, 160, 0.06); border-color: rgba(0, 229, 160, 0.2); } .moo-gr-card__photo { width: 30%; max-width: 100px; overflow: hidden; flex-shrink: 0; } .moo-gr-card__photo img { width: 100%; height: auto; border-radius: 12px; } .moo-gr-card__name { font-size: 18px; font-weight: 700; color: var(--color-text-primary); } .moo-gr-card__detail { font-size: 14px; color: rgba(255, 255, 255, 0.4); margin-top: 4px; } .moo-gr-card--active .moo-gr-card__name { color: var(--color-accent); } .moo-gr-card--active .moo-gr-card__detail { color: rgba(255, 255, 255, 0.6); } .moo-gr-upcoming { display: flex; flex-direction: column; gap: 10px; } /* ---- Admin / Developer tables ---- */ .moo-tools .table_cont { border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px; overflow: hidden; } .moo-tools .table_header { background: rgba(14, 22, 28, 0.92); padding: 16px 20px; color: var(--color-text-primary); font-weight: 700; font-size: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; gap: 10px; } .moo-tools .table_header i { color: var(--color-accent); font-size: 14px; } .moo-tools .table_content { background: transparent; } .moo-tools .table_headers { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.4); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .moo-tools .table_row { font-size: 13px; color: rgba(255, 255, 255, 0.6); } .moo-tools .table_row_content { border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .moo-tools .table_row_content:last-child { border-bottom: 0; } .moo-tools .table_row_content:nth-child(odd) { background: rgba(14, 22, 28, 0.88); } .moo-tools .table_row_content b { color: rgba(255, 255, 255, 0.8); } .moo-tools .table_column { padding: 14px 16px; font-size: 13px; } .moo-tools .table_buttons button { background: rgba(244, 63, 94, 0.1) !important; border: 1px solid rgba(244, 63, 94, 0.2) !important; color: var(--color-danger) !important; border-radius: 8px !important; width: 28px !important; height: 28px !important; padding: 0 !important; cursor: pointer; transition: opacity 0.2s, background-color 0.2s; } .moo-tools .table_buttons button:hover { background: rgba(244, 63, 94, 0.2) !important; } .moo-tools .fa_eye_slash_button { background: rgba(245, 158, 11, 0.1) !important; border: 1px solid rgba(245, 158, 11, 0.2) !important; color: var(--color-warning) !important; } .moo-tools .fa_eye_slash_button:hover { background: rgba(245, 158, 11, 0.2) !important; } .moo-tools .table_open_content_button { background: rgba(0, 229, 160, 0.1); border: 1px solid rgba(0, 229, 160, 0.15); color: var(--color-accent); border-radius: 8px; font-size: 12px; font-weight: 700; padding: 0 12px; height: 28px; } .moo-tools .table_norows { padding: 20px; color: rgba(255, 255, 255, 0.3); font-size: 14px; text-align: left; } .moo-tools .tc_margintop { margin-top: 16px; } /* Content dialog modal (admin) */ body:has(.moo-tools) #content_dialog_wrap { background: rgba(6, 13, 16, 0.6); animation: mooOverlayIn 0.2s ease-out; } body:has(.moo-tools) #cd_popup { background: rgba(20, 30, 38, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 24px; width: 80%; max-height: 80%; color: rgba(255, 255, 255, 0.7); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } body:has(.moo-tools) .content_dialog_text { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); } /* Beehive logo */ .moo-tools .hli_cont { margin-bottom: 12px; } .moo-tools .hive_logo_img { border-radius: 16px; } /* Tools responsive */ @media (max-width: 480px) { .moo-tools .moo-settings-card { padding: 20px; border-radius: 16px; } .moo-tools .moo-form-card { padding: 28px 24px; border-radius: 20px; } .moo-tools__item { padding: 16px; border-radius: 16px; } .moo-tools__item-icon { width: 38px; height: 38px; font-size: 16px; } .moo-tools .table_column { padding: 10px 12px; font-size: 12px; } } /* ===== CHATS LIST PAGE OVERHAUL ===== */ /* Page background */ html:has(.moo-chats) { background: var(--color-bg); } body:has(.moo-chats) { background: radial-gradient(ellipse at 60% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 40% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(244, 63, 94, 0.06) 0%, transparent 40%), var(--color-bg); } /* Header — dark glass */ body:has(.moo-chats) .chat_top_info.header_top { background: rgba(6, 13, 16, 0.97); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } body:has(.moo-chats) .hb_button { background: rgba(24, 32, 40, 0.92); color: var(--color-text-primary); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; } body:has(.moo-chats) .hb_button:hover { background: rgba(0, 229, 160, 0.15); border-color: rgba(0, 229, 160, 0.3); color: var(--color-accent); } /* Bottom nav — dark glass */ body:has(.moo-chats) .bottom_nav { background: rgba(6, 13, 16, 0.97); border-top: 1px solid rgba(255, 255, 255, 0.06); } body:has(.moo-chats) .bnm_inner, body:has(.moo-chats) .bnm_item { background: rgba(6, 13, 16, 0.85); } body:has(.moo-chats) .bnm_item { color: rgba(255, 255, 255, 0.3); } body:has(.moo-chats) .bnm_selected { color: var(--color-accent); } /* Content area */ .moo-chats { background: transparent !important; color: var(--color-text-primary); padding-top: 20px !important; padding-bottom: 0px !important; height: calc(100% - 154px) !important; } /* Loading screen */ body:has(.moo-chats) .chatbox_loading { position: absolute !important; inset: 64px 0 67px 0 !important; background: radial-gradient(ellipse at 60% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 40% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%), var(--color-bg); color: var(--color-text-primary); } body:has(.moo-chats) .cli_spin { color: var(--color-accent); font-size: 36px; } body:has(.moo-chats) .cli_text { color: rgba(255, 255, 255, 0.5); font-size: 16px; font-weight: 600; margin-top: 16px; } /* Chat list items — glass cards */ .moo-chats .chat_cont { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 16px; padding: 16px !important; margin-bottom: 10px !important; transition: background 0.25s; } .moo-chats .chat_cont:active { background: rgba(24, 32, 40, 0.92); } .moo-chats .chat_cont_first { border: 1px solid rgba(255, 255, 255, 0.06) !important; padding-top: 16px !important; } .moo-chats .chat_cont_picture img { border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); } .moo-chats .chat_name_title { color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moo-chats .chat_name_sub { color: rgba(255, 255, 255, 0.4); } .moo-chats .chat_cont_name { color: var(--color-text-primary); width: calc(100% - 170px); } /* Date/time info */ .moo-chats .chat_right_info { right: 16px; } .moo-chats .chat_right_dt { color: rgba(255, 255, 255, 0.35); } /* Muted chat icon */ .chat_muted_icon { font-size: 12px; color: rgba(255, 255, 255, 0.25); margin-top: 4px; text-align: right; } /* Unread messages badge */ .moo-chats .chat_unread_messages { background-color: var(--color-accent); color: var(--color-bg); font-size: 11px; width: 22px; height: 22px; border-radius: 50%; } /* No chats empty state */ .moo-chats .chats_list_none { color: rgba(255, 255, 255, 0.35); text-align: center; padding: 60px 0; font-size: 15px; } /* Last chat item — bottom spacing via margin to work around WebKit ignoring padding-bottom on scroll containers */ .moo-chats > a:last-of-type .chat_cont { margin-bottom: 0 !important; } .moo-chats::after { content: ''; display: block; height: 20px; } /* ---- Modal — frosted glass ---- */ body:has(.moo-chats) #chats_popup_wrap { background: rgba(6, 13, 16, 0.6); animation: mooOverlayIn 0.2s ease-out; } body:has(.moo-chats) #chats_popup { background: rgba(20, 30, 38, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 32px; width: min(320px, 80%); color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Message Yourself form button — styled like moo-modal__option */ .moo-modal__option--form { padding: 0; background: none; border: none; } .moo-modal__option--form form { width: 100%; } .moo-modal__option--form button { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; color: var(--color-text-primary); font-size: 15px; font-weight: 600; font-family: 'Montserrat', sans-serif; text-decoration: none; transition: opacity 0.2s, background-color 0.2s, border-color 0.2s; width: 100%; cursor: pointer; text-align: left; } .moo-modal__option--form button:hover { background: rgba(0, 229, 160, 0.08); border-color: rgba(0, 229, 160, 0.2); } .moo-modal__option--form button:active { background: rgba(0, 229, 160, 0.14); } .moo-modal__option--form button i { color: var(--color-accent); font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; } /* ===== CHAT INFO PAGE OVERHAUL ===== */ /* Page background */ html:has(.moo-chatinfo) { background: var(--color-bg); } body:has(.moo-chatinfo) { background: radial-gradient(ellipse at 60% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 40% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(244, 63, 94, 0.06) 0%, transparent 40%), var(--color-bg); } /* Header — dark glass */ body:has(.moo-chatinfo) .chat_top_info { background: rgba(6, 13, 16, 0.97); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } body:has(.moo-chatinfo) .chat_back_button { background: rgba(24, 32, 40, 0.92); color: var(--color-text-primary); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; } body:has(.moo-chatinfo) .chat_other_name { color: var(--color-text-primary); } body:has(.moo-chatinfo) #chat_online_status { color: rgba(255, 255, 255, 0.4); } body:has(.moo-chatinfo) .my_top_display { color: rgba(255, 255, 255, 0.4); } /* Content area */ .moo-chatinfo { background: transparent !important; color: var(--color-text-primary); padding: 20px !important; height: calc(100% - 104px) !important; width: calc(100% - 40px) !important; } /* Settings cards — reuse pattern */ .moo-chatinfo .moo-settings-card { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px; padding: 24px; margin-bottom: 16px; } .moo-chatinfo .moo-settings-card:last-child, .moo-chatinfo .moo-settings-card:last-of-type, .moo-chatinfo .moo-form-card:last-child, .moo-chatinfo .moo-form-card:last-of-type { margin-bottom: 0; } .moo-chatinfo .moo-settings-card__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .moo-chatinfo .moo-settings-card__icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(0, 229, 160, 0.1); border: 1px solid rgba(0, 229, 160, 0.15); display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: 14px; flex-shrink: 0; } .moo-chatinfo .moo-settings-card .settings_item_title { color: var(--color-text-primary); font-size: 17px; font-weight: 700; margin-bottom: 0; line-height: 1; } /* Card inline forms (Group Name) */ .moo-chatinfo .moo-settings-card form:not(.ap_inner) { display: flex; gap: 10px; } .moo-chatinfo .moo-settings-card input[type="text"], .moo-chatinfo .moo-settings-card input[type="tel"] { flex: 1; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding: 12px 16px; font-size: 15px; font-weight: 500; font-family: 'Montserrat', sans-serif; width: auto; margin: 0; transition: border-color 0.3s; -webkit-appearance: none; user-select: text; -webkit-user-select: text; touch-action: manipulation; } .moo-chatinfo .moo-settings-card input:focus { border-color: rgba(0, 229, 160, 0.4); } .moo-chatinfo .moo-settings-card input[readonly] { color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.06); cursor: default; } .moo-chatinfo .moo-settings-card button[type="submit"], .moo-chatinfo .moo-settings-card button[type="button"]:not(.moo-enc-enable-btn):not(.moo-enc-disable-btn):not(.moo-chat-media__show-all):not(.moo-member-btn) { background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding: 12px 20px; font-size: 14px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; width: auto; height: auto; margin: 0; } .moo-chatinfo .moo-settings-card button[type="submit"]:hover, .moo-chatinfo .moo-settings-card button[type="button"]:not(.moo-enc-enable-btn):not(.moo-enc-disable-btn):not(.moo-chat-media__show-all):not(.moo-member-btn):hover { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.25); color: var(--color-accent); } /* Group picture */ .moo-chatinfo .moo-settings-card .ap_inner { display: flex; align-items: center; gap: 16px; } .moo-chatinfo .moo-settings-card .ap_inner img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); flex-shrink: 0; } .moo-chatinfo .moo-ap-buttons { display: flex; gap: 8px; height: 56px; } .moo-chatinfo .moo-ap-buttons button { height: 100% !important; } .moo-chatinfo .moo-btn-danger-outline { background: transparent !important; border: 1px solid rgba(244, 63, 94, 0.3) !important; color: var(--color-danger) !important; } .moo-chatinfo .moo-btn-danger-outline:hover { background: rgba(244, 63, 94, 0.1) !important; border-color: rgba(244, 63, 94, 0.4) !important; } /* Chat participants list */ .moo-chatinfo .chat_participants { margin-top: 8px; } .moo-chatinfo .chat_cont { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 14px; padding: 14px !important; margin-bottom: 8px !important; transition: background 0.25s; } .moo-chatinfo .chat_cont:active { background: rgba(24, 32, 40, 0.92); } .moo-chatinfo .chat_cont_first { border: 1px solid rgba(255, 255, 255, 0.06) !important; padding-top: 14px !important; } .moo-chatinfo .chat_cont_picture img { border-radius: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); } .moo-chatinfo .chat_cont_name { width: calc(100% - 80px); } .moo-chatinfo .chat_name_title { color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moo-chatinfo .chat_participants > a:last-child .chat_cont, .moo-chatinfo .chat_participants > .chat_cont:last-child { margin-bottom: 0 !important; } /* Return messages */ .moo-chatinfo .settings_returnMessage { background: rgba(0, 229, 160, 0.08); border: 1px solid rgba(0, 229, 160, 0.15); border-radius: 16px; color: var(--color-text-primary); padding: 18px 24px; font-size: 15px; font-weight: 600; text-align: left; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .moo-chatinfo .settings_returnMessage i { color: var(--color-accent); font-size: 18px; flex-shrink: 0; } /* Leave chat button */ .moo-chatinfo__leave { margin-top: 16px; } .moo-chatinfo__leave button { width: 100%; padding: 16px 24px; background: rgba(244, 63, 94, 0.08); border: 1px solid rgba(244, 63, 94, 0.2); border-radius: 14px; color: var(--color-danger); font-weight: 700; font-size: 15px; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; } .moo-chatinfo__leave button:hover { background: rgba(244, 63, 94, 0.15); } /* Leave chat confirmation dialog */ .moo-chatinfo__confirm { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px; padding: 32px; text-align: center; margin-bottom: 16px; } .moo-chatinfo__confirm-icon { font-size: 28px; color: var(--color-danger); margin-bottom: 16px; } .moo-chatinfo__confirm-text { color: rgba(255, 255, 255, 0.7); font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 24px; } .moo-chatinfo__confirm form { display: flex; gap: 10px; } .moo-chatinfo__confirm-btn--secondary { flex: 1; padding: 14px !important; width: auto !important; height: auto !important; background: rgba(18, 26, 32, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 14px !important; color: rgba(255, 255, 255, 0.6) !important; font-weight: 600 !important; font-size: 15px !important; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s; } .moo-chatinfo__confirm-btn--secondary:hover { background: rgba(28, 36, 44, 0.92) !important; } .moo-chatinfo__confirm-btn--danger { flex: 1; padding: 14px !important; width: auto !important; height: auto !important; background: rgba(244, 63, 94, 0.15) !important; border: 1px solid rgba(244, 63, 94, 0.25) !important; border-radius: 14px !important; color: var(--color-danger) !important; font-weight: 700 !important; font-size: 15px !important; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s; } .moo-chatinfo__confirm-btn--danger:hover { background: rgba(244, 63, 94, 0.25) !important; } /* ===== GROUP ADMIN ROLES ===== */ /* Member badges row */ .moo-member-badges { display: flex; align-items: center; gap: 6px; margin-top: 3px; } /* Admin badge pill */ .moo-admin-badge { display: inline-flex; align-items: center; gap: 3px; background: rgba(0, 229, 160, 0.1); border: 1px solid rgba(0, 229, 160, 0.18); color: var(--color-accent); font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.6px; line-height: 1.4; } .moo-admin-badge i { font-size: 7px; } /* You badge */ .moo-you-badge { color: rgba(255, 255, 255, 0.3); font-size: 11px; font-weight: 600; } /* Pending badge — E2EE chats, member waiting on DEK wrap completion */ .moo-pending-badge { display: inline-flex; align-items: center; gap: 3px; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.2); color: var(--color-warning); font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.6px; line-height: 1.4; } .moo-pending-badge i { font-size: 7px; } /* Member row with action buttons (admin view) */ .moo-chatinfo .moo-member-row { display: flex; align-items: center; } .moo-chatinfo .moo-member-link { display: flex; align-items: center; flex: 1; min-width: 0; color: inherit; text-decoration: none; } .moo-chatinfo .moo-member-row .chat_cont_name { width: auto; flex: 1; min-width: 0; } .moo-chatinfo .moo-member-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: 8px; } .moo-chatinfo .moo-member-btn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(14, 22, 28, 0.92); color: rgba(255, 255, 255, 0.35); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; padding: 0; } .moo-chatinfo .moo-member-btn:hover { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.25); color: var(--color-accent); } .moo-chatinfo .moo-member-btn--active { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.2); color: var(--color-accent); } .moo-chatinfo .moo-member-btn--danger:hover { background: rgba(244, 63, 94, 0.1) !important; border-color: rgba(244, 63, 94, 0.25) !important; color: var(--color-danger) !important; } /* Remove member modal */ #grm_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.7); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #grm_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background: rgba(20, 30, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 28px; width: min(340px, calc(100% - 48px)); text-align: center; animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .moo-grm__icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(244, 63, 94, 0.1); border: 1px solid rgba(244, 63, 94, 0.15); color: var(--color-danger); display: flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 auto 16px; } .moo-grm__title { font-size: 18px; font-weight: 800; color: var(--color-text-primary); margin-bottom: 8px; } .moo-grm__text { font-size: 14px; color: rgba(255, 255, 255, 0.5); line-height: 1.5; margin-bottom: 24px; } .moo-grm__text strong { color: var(--color-text-primary); font-weight: 700; } .moo-grm__buttons { display: flex; gap: 10px; } .moo-grm__btn { flex: 1; padding: 13px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; border: none; } .moo-grm__btn--cancel { background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-text-primary); } .moo-grm__btn--cancel:hover { background: rgba(28, 36, 44, 0.92); } .moo-grm__btn--remove { background: rgba(244, 63, 94, 0.15); border: 1px solid rgba(244, 63, 94, 0.25); color: var(--color-danger); } .moo-grm__btn--remove:hover { background: rgba(244, 63, 94, 0.25); } /* Upload picture sub-page (form card) */ .moo-chatinfo .moo-form-card { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 24px; padding: 36px 32px; } .moo-chatinfo .moo-form-icon { font-size: 32px; color: var(--color-accent); margin-bottom: 16px; } .moo-chatinfo .moo-form-card .settings_item_title { color: var(--color-text-primary); font-size: 22px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2; margin-bottom: 10px; } .moo-chatinfo .moo-form-card .cn_subtext { color: rgba(255, 255, 255, 0.4); font-size: 14px; line-height: 1.6; margin-bottom: 28px; } .moo-chatinfo .moo-form-card form { display: block; } .moo-chatinfo .moo-form-card input[type="file"] { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: rgba(255, 255, 255, 0.6); padding: 14px; font-size: 14px; font-family: 'Montserrat', sans-serif; width: calc(100% - 30px); margin-bottom: 24px; cursor: pointer; } .moo-chatinfo .moo-form-card button[type="submit"] { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important; color: var(--color-bg) !important; border: none !important; border-radius: 14px !important; padding: 16px 24px !important; font-weight: 700 !important; font-size: 16px !important; font-family: 'Montserrat', sans-serif; width: 100% !important; cursor: pointer; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; gap: 8px; } .moo-chatinfo .moo-form-card button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 229, 160, 0.25); } /* Mute chat */ .moo-mute-status { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; margin-bottom: 14px; background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.15); color: var(--color-warning); } .moo-mute-status i { flex-shrink: 0; } .moo-mute-form { display: flex; gap: 10px; } .moo-mute-select { flex: 1; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding: 12px 16px; padding-right: 36px; font-size: 14px; font-weight: 500; font-family: 'Montserrat', sans-serif; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .moo-mute-select option { background: var(--color-bg-elevated); color: var(--color-text-primary); } .moo-mute-form button { background: rgba(245, 158, 11, 0.1) !important; border: 1px solid rgba(245, 158, 11, 0.2) !important; border-radius: 12px !important; color: var(--color-warning) !important; padding: 12px 20px !important; font-size: 14px !important; font-weight: 700 !important; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s; white-space: nowrap; width: auto !important; height: auto !important; display: flex; align-items: center; gap: 8px; } .moo-mute-form button:hover { background: rgba(245, 158, 11, 0.18) !important; } .moo-unmute-btn { width: 100%; background: rgba(18, 26, 32, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; color: var(--color-text-primary) !important; padding: 14px 20px !important; font-size: 14px !important; font-weight: 700 !important; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; height: auto !important; } .moo-unmute-btn:hover { background: rgba(0, 229, 160, 0.1) !important; border-color: rgba(0, 229, 160, 0.25) !important; color: var(--color-accent) !important; } /* Chat info responsive */ @media (max-width: 480px) { .moo-chatinfo .moo-settings-card { padding: 20px; border-radius: 16px; } .moo-chatinfo .moo-form-card { padding: 28px 24px; border-radius: 20px; } .moo-chatinfo .moo-settings-card__icon { width: 32px; height: 32px; font-size: 13px; } .moo-mute-form { flex-direction: column; } } /* ===== GLOBAL IMAGE VIEWER ===== */ #moo_img_viewer { position: fixed; inset: 0; z-index: 100000; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 20px; padding-top: calc(20px + env(safe-area-inset-top, 0)); padding-bottom: calc(20px + env(safe-area-inset-bottom, 0)); animation: mooImgViewerIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #moo_img_viewer_bg { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.92); z-index: -1; } @keyframes mooImgViewerIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } #moo_img_close { position: absolute; top: calc(16px + env(safe-area-inset-top, 0)); right: calc(16px + env(safe-area-inset-right, 0)); width: 44px; height: 44px; border-radius: 14px; background: rgba(24, 32, 40, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-text-primary); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; z-index: 2; padding: 0; margin: 0; } #moo_img_close:hover { background: rgba(244, 63, 94, 0.15); border-color: rgba(244, 63, 94, 0.3); color: var(--color-danger); } #moo_img_container { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; width: 100%; margin-top: 60px; pointer-events: none; } #moo_img_preview { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); pointer-events: auto; } /* Video.js player wrapper */ #moo_vid_wrap { position: relative; width: 100%; height: 100%; pointer-events: auto; /* Square corners on the open video player — keep the box-shadow for depth * but no rounding on the visible video frame or the title bar above it. */ border-radius: 0; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); /* Flex column so the title bar can sit ABOVE the player at full width * (instead of being a partial-width overlay), and the player flexes to * fill the remaining height. Without this layout the video would still * fill 100% height and push the title under it. */ display: flex; flex-direction: column; background: #060d10; } #moo_vid_wrap > #moo_vid_preview, #moo_vid_wrap > .video-js { flex: 1 1 auto; min-height: 0; } /* Video.js dark theme overrides */ #moo_vid_wrap .video-js { background-color: transparent; font-family: 'Montserrat', sans-serif; } #moo_vid_wrap .video-js .vjs-tech { border-radius: 0; } #moo_vid_wrap .vjs-big-play-button { background: rgba(0, 229, 160, 0.15); border: 2px solid rgba(0, 229, 160, 0.4); border-radius: 50%; width: 70px; height: 70px; line-height: 70px; font-size: 30px; top: 50%; left: 50%; margin-top: -35px; margin-left: -35px; transition: opacity 0.2s, background-color 0.2s, border-color 0.2s; } #moo_vid_wrap .vjs-big-play-button .vjs-icon-placeholder::before { display: flex; align-items: center; justify-content: center; } #moo_vid_wrap .vjs-big-play-button:hover, #moo_vid_wrap .vjs-big-play-button:focus { background: rgba(0, 229, 160, 0.25); border-color: rgba(0, 229, 160, 0.6); } /* Hide the big play button while Video.js is buffering — otherwise both the * loading spinner AND the big play button render on top of each other during * the cold-start of CD video streaming (autoplay is firing in the background * but the first chunks aren't decrypted yet). The user only needs the spinner * during this window. After playback starts, vjs-has-started replaces vjs- * waiting and the button stays hidden naturally. If autoplay was blocked, * the player exits vjs-waiting without becoming vjs-has-started → big play * shows again so the user can manually start. */ #moo_vid_wrap .vjs-waiting:not(.vjs-has-started) .vjs-big-play-button, #moo_vid_wrap .video-js.vjs-seeking .vjs-big-play-button, /* During the explicit loading/recovery windows we manage via JS, NEVER show * the big play button or the static "paused" poster. The user clicked a file * (or we're auto-recovering after a stall) — they don't need a manual play * affordance, they need a spinner that shows we're working. The cd-loading * class is set in moo_open_video and cleared on `playing`; cd-recovering * is set in attemptRecovery and cleared on `playing`. Both layered with * !important to defeat Video.js's own state-class rules. */ #moo_vid_wrap.cd-loading .vjs-big-play-button, #moo_vid_wrap.cd-loading .vjs-poster, #moo_vid_wrap.cd-recovering .vjs-big-play-button, #moo_vid_wrap.cd-recovering .vjs-poster { display: none !important; } /* Force the spinner visible during cd-loading + cd-recovering. Video.js may * exit vjs-waiting briefly during src() reset of recovery — that flash should * still be a spinner, not a play button. visibility: visible bypasses the * 300ms grace (vjs-spinner-show animation) so our managed states show the * spinner instantly — these states are entered explicitly and the user * deserves immediate feedback. */ #moo_vid_wrap.cd-loading .vjs-loading-spinner, #moo_vid_wrap.cd-recovering .vjs-loading-spinner { display: block !important; opacity: 1 !important; visibility: visible !important; } /* During mid-stream recovery, attemptRecovery rebuilds the player by * calling player.src(...). Setting a new src forces HTMLVideoElement * currentTime back to 0 — there's no API to set currentTime before the * new media has reached HAVE_METADATA. We only restore resumeAt inside * the loadedmetadata callback, so for the ~50-300 ms between src reset * and metadata arriving the progress bar visibly bounces to 0:00 and * then snaps back to where the user actually was. Hide the time + scrub * UI during BOTH cd-loading and cd-recovering so the user sees only the * spinner during ANY load state, full stop. The bar reappears with the * correct currentTime as soon as `playing` clears the class. Includes * cd-loading so initial-open and post-seek loading states match * recovery's UI exactly — flickering between visible-then-hidden as * the video transitions through cd-loading → cd-recovering → playing * was the source of the "timeline jumps to start" complaint. Volume + * fullscreen + play/pause stay visible so the user can still interact * with the chrome they expect. */ #moo_vid_wrap.cd-loading .vjs-progress-control, #moo_vid_wrap.cd-loading .vjs-current-time, #moo_vid_wrap.cd-loading .vjs-time-divider, #moo_vid_wrap.cd-loading .vjs-duration, #moo_vid_wrap.cd-loading .vjs-remaining-time, #moo_vid_wrap.cd-recovering .vjs-progress-control, #moo_vid_wrap.cd-recovering .vjs-current-time, #moo_vid_wrap.cd-recovering .vjs-time-divider, #moo_vid_wrap.cd-recovering .vjs-duration, #moo_vid_wrap.cd-recovering .vjs-remaining-time { visibility: hidden !important; } #moo_vid_wrap .vjs-control-bar { background: rgba(6, 13, 16, 0.85); border-radius: 0; font-family: 'Montserrat', sans-serif; } /* Video viewer title bar — refined caption that sits ABOVE the player at * full container width. Lives as a flex row at the top of #moo_vid_wrap * (which is now display:flex column), so it spans exactly the player's * width with no offset. Aurora glass-morphism dark, mint accent icon, * ellipsis truncation. We do NOT overlay the player — Video.js's own * controls (big play button, loading spinner) need an unobstructed * surface so the user sees the canonical engine UI, not our redundant * surfaces on top of it. */ .moo-vid-title { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 10px 14px; background: rgba(20, 30, 38, 0.92); border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-family: 'Montserrat', sans-serif; animation: mooVidTitleIn 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .moo-vid-title > i { font-size: 12px; color: var(--color-accent); opacity: 0.85; flex-shrink: 0; } .moo-vid-title__name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; letter-spacing: 0.1px; color: rgba(255, 255, 255, 0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @keyframes mooVidTitleIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== * SCRUBBER PREVIEW — YouTube-style thumbnail tooltip on the progress bar. * Positioned absolutely inside #moo_vid_wrap, with `left` set by JS to * follow the cursor. `bottom` parks it just above the Video.js control bar. * Mint border matches the design language; downward arrow points at the * cursor on the slider beneath. * ======================================================================== */ #moo_vid_wrap .moo-scrub-preview { position: absolute; bottom: 56px; /* above Video.js's ~30px control bar with breathing room */ left: 0; /* JS overrides this on every move */ width: 160px; z-index: 5; pointer-events: none; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55)); animation: mooScrubPreviewIn 0.12s cubic-bezier(0.4, 0, 0.2, 1); } #moo_vid_wrap .moo-scrub-preview[hidden] { display: none; } #moo_vid_wrap .moo-scrub-preview__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #060d10; border: 1px solid rgba(0, 229, 160, 0.45); border-radius: 8px; overflow: hidden; } /* Sprite-mode scrub: the frame element IS the canvas — background-image is * the decrypted sprite blob, background-position slides to the cell mapped * from cursor time. Set up by mooScrubSetSprite + mooScrubShowPreview. */ #moo_vid_wrap .moo-scrub-preview--sprite .moo-scrub-preview__frame { background-repeat: no-repeat; /* bg-image, bg-size, bg-position set inline by mooScrubShowPreview */ } /* Downward triangle pointing at the slider beneath the preview. */ #moo_vid_wrap .moo-scrub-preview__frame::after { content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid rgba(0, 229, 160, 0.45); } #moo_vid_wrap .moo-scrub-preview__time { margin-top: 6px; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.4px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } @keyframes mooScrubPreviewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Hide Video.js's built-in mouse-time tooltip — our preview shows the time * as part of the thumbnail card, no need for the redundant text overlay * floating above the slider track. */ #moo_vid_wrap .vjs-mouse-display, #moo_vid_wrap .vjs-time-tooltip { display: none !important; } #moo_vid_wrap .vjs-play-progress, #moo_vid_wrap .vjs-volume-level { background: var(--color-accent) !important; } #moo_vid_wrap .vjs-play-progress::before { color: var(--color-accent) !important; } #moo_vid_wrap .vjs-slider { background: rgba(28, 36, 44, 0.92); } #moo_vid_wrap .vjs-load-progress, #moo_vid_wrap .vjs-load-progress div { background: rgba(255, 255, 255, 0.15); } #moo_vid_wrap .vjs-time-control { font-size: 12px; font-weight: 500; } #moo_vid_wrap .vjs-menu-content { background: rgba(6, 13, 16, 0.92); border-radius: 8px; font-family: 'Montserrat', sans-serif; } #moo_vid_wrap .vjs-menu li.vjs-selected, #moo_vid_wrap .vjs-menu li.vjs-selected:hover { background: var(--color-accent); color: var(--color-bg); } #moo_vid_wrap .vjs-menu li:hover, #moo_vid_wrap .vjs-menu li:focus { background: rgba(28, 36, 44, 0.92); } #moo_vid_wrap .video-js .vjs-poster { background-color: var(--color-bg); } /* Spinner — clean single-arc design. * * Video.js ships a dual-arc spinner: ::before and ::after each rotate, and a * `vjs-spinner-fade` keyframe animation cycles border-top-color through #fff * (35% keyframe) and back to gray. A static border-top-color override gets * defeated by the running animation, so the arcs flash white. The visual * effect: a green outer ring with two white arcs chasing each other — * reads as a "double spinner". Fix: hide the dual pseudo-elements entirely * and animate the spinner element itself with one solid green top arc. * * NOTE: a custom keyframe is required (not Video.js's `vjs-spinner-spin`) * because the spinner element relies on `transform: translate(-50%, -50%)` * for centering — Video.js's keyframe rotates with no translate, so applying * it to the outer element would clobber the translate and the spinner would * render in the top-left corner. This keyframe preserves the translate. */ @keyframes moo-spinner-spin-centered { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } #moo_vid_wrap .vjs-loading-spinner { border: 0.42em solid rgba(0, 229, 160, 0.18); border-top-color: var(--color-accent); width: 4em; height: 4em; /* Two animations combined: our rotation (continuous) + Video.js's own * `vjs-spinner-show` (a 0s/0.3s/forwards animation that flips the * spinner's `visibility` from hidden→visible). Video.js's base rule sets * the spinner to `visibility: hidden` and relies on the spinner-show * keyframe to reveal it after a 300ms grace; if we replace the animation * shorthand entirely the spinner is permanently invisible. Combining * keeps the natural buffering grace (fast loads don't flash) while * giving us the rotation. The cd-loading + cd-recovering rules below * force visibility immediately for our managed states. */ animation: moo-spinner-spin-centered 0.85s linear infinite, vjs-spinner-show 0s linear 0.3s forwards !important; } /* Kill the dual-arc system entirely — would otherwise still flash white via * Video.js's vjs-spinner-fade keyframe. The element-level rotation above * gives us a single, on-brand, jank-free spinner. */ #moo_vid_wrap .vjs-loading-spinner::before, #moo_vid_wrap .vjs-loading-spinner::after { display: none !important; } #moo_vid_wrap .vjs-error-display { background: rgba(6, 13, 16, 0.85); font-family: 'Montserrat', sans-serif; } #moo_vid_wrap .vjs-error-display .vjs-modal-dialog-content { display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--color-danger); padding: 20px; } #moo_vid_wrap .vjs-time-tooltip { background: rgba(6, 13, 16, 0.92); color: var(--color-text-primary); font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 4px 8px; } #moo_vid_wrap .vjs-remaining-time { color: rgba(255, 255, 255, 0.6); font-size: 12px; } #moo_vid_wrap .vjs-button > .vjs-icon-placeholder::before { font-size: 18px; } /* ===== GLOBAL FILE VIEWER (PDF / text / unsupported) ===== */ #moo_pdf_frame { width: 100%; height: 100%; max-width: 1000px; border: none; border-radius: 12px; background: #1a1a1a; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); pointer-events: auto; } /* Canvas-based PDF viewer for iOS (see index.php moo_render_pdf_canvases). * Scrollable column of canvases, one per page, each CSS-sized to wrap width * so the user just scrolls to read through the whole document. */ #moo_pdf_canvas_wrap { width: 100%; height: 100%; max-width: 1000px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: none; background: #1a1a1a; border-radius: 12px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); padding: 12px; box-sizing: border-box; pointer-events: auto; } #moo_pdf_canvas_wrap canvas { display: block; margin: 0 auto 12px auto; background: white; border-radius: 4px; max-width: 100%; } #moo_pdf_canvas_wrap canvas:last-child { margin-bottom: 0; } .moo-pdf__loading, .moo-pdf__error { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 60px; padding: 20px; color: rgba(255, 255, 255, 0.5); font-size: 14px; gap: 10px; } .moo-pdf__loading i { font-size: 20px; color: var(--color-accent); } #moo_text_wrap { width: 100%; max-width: 900px; max-height: 100%; flex-direction: column; pointer-events: auto; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); background: rgba(20, 30, 38, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); } #moo_text_content { margin: 0; padding: 20px 24px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 13px; line-height: 1.55; color: var(--color-text-primary); white-space: pre-wrap; word-break: break-word; overflow-y: auto; overscroll-behavior: none; max-height: 100%; tab-size: 2; -moz-tab-size: 2; flex: 1 1 auto; min-height: 0; } /* DOCX preview (mammoth.js HTML output) — reuses the text-wrap glass card but renders proper HTML instead of monospace pre. */ #moo_docx_wrap { width: 100%; max-width: 900px; max-height: 100%; flex-direction: column; pointer-events: auto; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); /* DOCX files are authored for a white page — mammoth's converted HTML assumes black-on-white with coloured runs/highlights/tables that become unreadable on the app's dark theme. Force a true white page background + dark text so the document looks like a real Word preview. */ background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); } #moo_docx_content { padding: 28px 32px; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.65; color: #1a1a1a; overflow-y: auto; overscroll-behavior: none; max-height: 100%; flex: 1 1 auto; min-height: 0; word-wrap: break-word; } #moo_docx_content h1 { font-size: 22px; font-weight: 700; margin: 18px 0 10px; color: #111; } #moo_docx_content h2 { font-size: 19px; font-weight: 700; margin: 16px 0 8px; color: #111; } #moo_docx_content h3 { font-size: 16px; font-weight: 700; margin: 14px 0 6px; color: #111; } #moo_docx_content h4, #moo_docx_content h5, #moo_docx_content h6 { font-size: 14px; font-weight: 700; margin: 12px 0 4px; color: #111; } #moo_docx_content p { margin: 0 0 12px 0; } #moo_docx_content ul, #moo_docx_content ol { margin: 0 0 12px 0; padding-left: 24px; } #moo_docx_content li { margin-bottom: 4px; } #moo_docx_content a { color: #0a66c2; text-decoration: underline; } #moo_docx_content strong, #moo_docx_content b { font-weight: 700; } #moo_docx_content em, #moo_docx_content i { font-style: italic; } #moo_docx_content img { max-width: 100%; height: auto; border-radius: 4px; margin: 8px 0; } #moo_docx_content table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13px; } #moo_docx_content th, #moo_docx_content td { border: 1px solid rgba(0, 0, 0, 0.2); padding: 8px 12px; text-align: left; vertical-align: top; } #moo_docx_content th { background: rgba(0, 0, 0, 0.05); font-weight: 700; } #moo_docx_content hr { border: none; border-top: 1px solid rgba(0, 0, 0, 0.15); margin: 16px 0; } #moo_docx_content blockquote { margin: 12px 0; padding: 8px 16px; border-left: 3px solid #0a66c2; background: rgba(10, 102, 194, 0.06); border-radius: 0 4px 4px 0; color: #333; } /* ============================================================== XLSX PREVIEW — "ledger sheet" aesthetic ============================================================== Crisp white paper for the data, a dark-glass tab bar at the bottom for sheet switching. This sits INSIDE the global file viewer, so the dark overlay provides atmosphere and the white paper reads as a proper document — same treatment as DOCX for cohesion, but with data-density instead of flowing text. Typography: a monospaced stack inside the cells gives numeric data that refined "ledger" feel. The Montserrat display face stays on the tab labels and everywhere else the app uses it. */ #moo_xlsx_wrap { width: 100%; max-width: 1200px; max-height: 100%; flex-direction: column; pointer-events: auto; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); } #moo_xlsx_scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: none; background: linear-gradient(#ffffff, #ffffff), /* Very faint drafting-paper grid so empty area isn't a dead white void */ repeating-linear-gradient(0deg, transparent 0, transparent 23px, rgba(0,0,0,0.025) 23px, rgba(0,0,0,0.025) 24px); background-attachment: local, local; } #moo_xlsx_content { padding: 0; min-width: fit-content; } .moo-xlsx__sheet { /* SheetJS's sheet_to_html emits one per sheet. We target it via descendant selectors so we don't need to rewrite the HTML — just style what SheetJS hands us. */ padding: 20px 24px 24px 24px; } .moo-xlsx__sheet table { border-collapse: collapse; font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: #1a1a1a; background: #ffffff; /* Each sheet sits on the paper with a whisper of shadow so the eye has an edge to grab — very subtle, not a drop-shadow card. */ box-shadow: 0 0 0 1px rgba(0,0,0,0.04); border-radius: 2px; table-layout: auto; min-width: 100%; } .moo-xlsx__sheet table td, .moo-xlsx__sheet table th { padding: 7px 12px; border-right: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); text-align: left; vertical-align: top; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; /* Tabular figures so digit columns align perfectly even inside a monospaced font — matters for long numeric columns. */ font-variant-numeric: tabular-nums; } .moo-xlsx__sheet table tr:first-child td, .moo-xlsx__sheet table tr:first-child th { /* First row styled as a header — slightly bolder, faint mint wash so the app's accent colour shows up in this "documents" context without fighting the white paper. */ background: linear-gradient(180deg, rgba(0, 229, 160, 0.08), rgba(0, 229, 160, 0.02)); font-weight: 700; color: #0d2e22; border-bottom: 2px solid rgba(0, 229, 160, 0.3); position: sticky; top: 0; z-index: 1; } .moo-xlsx__sheet table tr:hover td { background: rgba(0, 229, 160, 0.05); } .moo-xlsx__sheet table tr:first-child:hover td { /* Don't clobber the header row's gradient on hover. */ background: linear-gradient(180deg, rgba(0, 229, 160, 0.12), rgba(0, 229, 160, 0.04)); } /* Sheet tab bar — dark glass contrasts against the white paper. Same visual language as the app's bottom nav. */ #moo_xlsx_tabs { flex-shrink: 0; display: flex; gap: 4px; padding: 10px 14px; background: linear-gradient(180deg, rgba(10, 16, 20, 0.92), rgba(6, 13, 16, 0.96)); border-top: 1px solid rgba(255, 255, 255, 0.06); overflow-x: auto; overflow-y: hidden; /* Scope to X axis: these tabs scroll horizontally only, so vertical wheel events need to propagate to the outer XLSX viewer scroll container (was 'overscroll-behavior: none' which trapped vertical wheels). */ overscroll-behavior-x: none; white-space: nowrap; } .moo-xlsx__tab { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.65); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; flex-shrink: 0; letter-spacing: 0.01em; } .moo-xlsx__tab:hover { background: rgba(24, 32, 40, 0.92); color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.14); } .moo-xlsx__tab--active { background: linear-gradient(180deg, rgba(0, 229, 160, 0.22), rgba(0, 184, 126, 0.18)); color: var(--color-toast-info); border-color: rgba(0, 229, 160, 0.5); box-shadow: 0 0 0 1px rgba(0, 229, 160, 0.18), 0 6px 20px -8px rgba(0, 229, 160, 0.5); } .moo-xlsx__tab--active:hover { background: linear-gradient(180deg, rgba(0, 229, 160, 0.28), rgba(0, 184, 126, 0.24)); color: #ffffff; } /* ============================================================== PPTX PREVIEW — "proof sheet" aesthetic ============================================================== Vertical stack of 16:9 slide cards. Each slide is a piece of printed paper with generous padding, a mint slide-number badge in the top-left corner, bold display title, body lines, and any embedded images at the bottom. Dashed hair-rules between slides evoke a photo-lab contact sheet. Deliberately NOT a carousel — scrolling through slides like reviewing a printed handout is faster and more legible than prev/next buttons. */ #moo_pptx_wrap { width: 100%; max-width: 960px; max-height: 100%; flex-direction: column; pointer-events: auto; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); /* Warm off-white paper background that the white slide cards sit on — gives the proof-sheet concept a second layer of paper depth. */ background: #f7f6f2; border: 1px solid rgba(0, 0, 0, 0.08); } #moo_pptx_content { overflow-y: auto; overscroll-behavior: none; max-height: 100%; padding: 32px 28px 48px 28px; flex: 1 1 auto; min-height: 0; } .moo-pptx__slide { position: relative; background: #ffffff; border-radius: 6px; padding: 48px 56px 40px 56px; margin-bottom: 36px; /* Layered shadow: a crisp hairline + a soft cast — makes each slide feel like it's lifted slightly off the proof sheet, not flat. */ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04), 0 20px 40px -24px rgba(0, 0, 0, 0.18); /* 16:9 minimum height feels like a real slide even when the slide content is sparse; tall content pushes it past the minimum. */ min-height: 0; } .moo-pptx__slide::before { /* The mint "staple" — a thin vertical accent mark running down the left edge that ties the slide back to the app's accent colour without fighting the white-paper readability. */ content: ''; position: absolute; left: 0; top: 48px; bottom: 40px; width: 3px; background: linear-gradient(180deg, #00e5a0 0%, #00b87e 100%); border-radius: 0 2px 2px 0; box-shadow: 0 0 12px rgba(0, 229, 160, 0.3); } .moo-pptx__slide:last-child { margin-bottom: 0; } /* Dashed hair-rule separators between slides — "contact sheet" cue. Drawn as a pseudo element so it sits on the paper, not the card. */ .moo-pptx__slide:not(:last-child)::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -23px; width: 40%; height: 1px; background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0 6px, transparent 6px 12px); } .moo-pptx__num { position: absolute; top: 20px; right: 24px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; color: rgba(0, 184, 126, 0.85); text-transform: uppercase; /* Ties the number into the mint staple without being a badge — feels like a stamp from a copy shop rather than a UI chip. */ } .moo-pptx__num::before { content: 'SLIDE '; color: rgba(0, 0, 0, 0.35); font-weight: 600; } .moo-pptx__body { font-family: 'Montserrat', sans-serif; color: #1a1a1a; } .moo-pptx__title { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: #0d0d0d; margin-bottom: 16px; /* Subtle mint underline on the title — echoes the staple accent. */ padding-bottom: 10px; border-bottom: 2px solid rgba(0, 229, 160, 0.25); } .moo-pptx__line { font-size: 14px; line-height: 1.6; color: #2d2d2d; margin-bottom: 8px; position: relative; padding-left: 18px; } .moo-pptx__line::before { /* Bullet as a mint diamond — small, refined, contextual. */ content: ''; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; background: #00b87e; transform: rotate(45deg); border-radius: 1px; } .moo-pptx__images { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; padding-top: 18px; border-top: 1px dashed rgba(0, 0, 0, 0.12); } .moo-pptx__images img { width: 100%; height: auto; max-height: 280px; object-fit: contain; background: #f4f4f4; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); } /* Tight layout for narrow viewports — reduce paper padding, shrink title slightly, keep everything legible at phone widths. */ @media (max-width: 600px) { .moo-xlsx__sheet { padding: 14px 16px 18px 16px; } .moo-xlsx__sheet table td, .moo-xlsx__sheet table th { padding: 6px 9px; font-size: 11.5px; } #moo_pptx_content { padding: 20px 14px 32px 14px; } .moo-pptx__slide { padding: 32px 24px 28px 32px; margin-bottom: 28px; } .moo-pptx__title { font-size: 20px; } .moo-pptx__num { top: 14px; right: 16px; } .moo-pptx__slide::before { top: 32px; bottom: 28px; } } #moo_fv_unsupported { flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; pointer-events: auto; padding: 36px 32px; max-width: 420px; width: calc(100% - 40px); background: rgba(20, 30, 38, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); } #moo_fv_unsupported .moo-fv__icon { width: 64px; height: 64px; border-radius: 16px; background: rgba(16, 24, 30, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; font-size: 28px; color: rgba(255, 255, 255, 0.45); margin-bottom: 4px; } #moo_fv_unsupported .moo-fv__name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); word-break: break-all; line-height: 1.4; } #moo_fv_unsupported .moo-fv__reason { font-size: 13px; color: rgba(255, 255, 255, 0.5); line-height: 1.45; } #moo_fv_unsupported .moo-fv__hint { font-size: 12px; color: rgba(255, 255, 255, 0.35); margin-top: 4px; } #moo_img_actions { display: flex; gap: 10px; margin-top: 20px; flex-shrink: 0; } .moo_img_action_btn { background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; color: var(--color-text-primary); padding: 14px 22px; font-size: 14px; font-weight: 600; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .moo_img_action_btn:hover { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.25); color: var(--color-accent); } @media (max-width: 480px) { #moo_img_actions { flex-direction: column; width: 100%; } .moo_img_action_btn { width: 100%; justify-content: center; box-sizing: border-box; } } /* ===== CHAT PAGE OVERHAUL ===== */ /* Page background */ html:has(.moo-chat) { background: var(--color-bg); } body:has(.moo-chat) { background: var(--color-bg); } /* Header — dark glass */ body:has(.moo-chat) .chat_top_info { background: rgba(6, 13, 16, 0.97); } body:has(.moo-chat) .chat_back_button { background: rgba(24, 32, 40, 0.92); color: var(--color-text-primary); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; } body:has(.moo-chat) .chat_other_name { color: var(--color-text-primary); } body:has(.moo-chat) #chat_online_status { color: rgba(255, 255, 255, 0.4); } body:has(.moo-chat) .my_top_display { color: rgba(255, 255, 255, 0.4); } body:has(.moo-chat) .cti_right { background: rgba(24, 32, 40, 0.92); color: var(--color-text-primary); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; } /* Chatbox — dark with subtle texture */ .moo-chat { background-color: var(--color-bg-chat) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cstyle%3E.i%7Bfill:rgba(255,255,255,0.025);%7D%3C/style%3E%3C/defs%3E%3Ccircle class='i' cx='20' cy='20' r='3'/%3E%3Ccircle class='i' cx='120' cy='90' r='2.5'/%3E%3Ccircle class='i' cx='60' cy='160' r='2'/%3E%3Ccircle class='i' cx='170' cy='40' r='2'/%3E%3Ccircle class='i' cx='140' cy='170' r='3'/%3E%3Cpath class='i' d='M90 15c0-3.3 2.7-6 6-6h8c3.3 0 6 2.7 6 6v6c0 3.3-2.7 6-6 6h-5l-4 4v-4h-1c-2.2 0-4-1.8-4-4v-8z'/%3E%3Cpath class='i' d='M30 100c0-3.3 2.7-6 6-6h8c3.3 0 6 2.7 6 6v6c0 3.3-2.7 6-6 6h-5l-4 4v-4h-1c-2.2 0-4-1.8-4-4v-8z'/%3E%3Cpath class='i' d='M155 120c0-3.3 2.7-6 6-6h8c3.3 0 6 2.7 6 6v6c0 3.3-2.7 6-6 6h-5l-4 4v-4h-1c-2.2 0-4-1.8-4-4v-8z'/%3E%3Cpath class='i' d='M75 70l3-5.2 3 5.2-3 1.8z'/%3E%3Cpath class='i' d='M180 140l3-5.2 3 5.2-3 1.8z'/%3E%3Crect class='i' x='100' y='130' width='10' height='8' rx='2'/%3E%3Crect class='i' x='10' y='60' width='8' height='6' rx='1.5'/%3E%3Cpath class='i' d='M50 45a4 4 0 11-8 0 4 4 0 018 0zm-4-2v3m0 1v.5'/%3E%3Cpath class='i' d='M130 55a4 4 0 11-8 0 4 4 0 018 0zm-4-2v3m0 1v.5'/%3E%3Cpath class='i' d='M80 185a3 3 0 100-6 3 3 0 000 6zm-1.5-3h3m-1.5-1.5v3'/%3E%3Cpath class='i' d='M185 85a3 3 0 100-6 3 3 0 000 6zm-1.5-3h3m-1.5-1.5v3'/%3E%3C/svg%3E") !important; background-repeat: repeat !important; background-size: 200px 200px !important; } /* Loading screen */ body:has(.moo-chat) .chatbox_loading { position: absolute !important; inset: 64px 0 0 0 !important; background: radial-gradient(ellipse at 60% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 40% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%), var(--color-bg); color: var(--color-text-primary); } body:has(.moo-chat) .cli_spin { color: var(--color-accent); font-size: 36px; } body:has(.moo-chat) .cli_text { color: rgba(255, 255, 255, 0.5); font-size: 16px; font-weight: 600; margin-top: 16px; } /* Loading more chat banner */ body:has(.moo-chat) .loading_more_chat { background: rgba(6, 13, 16, 0.85); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; color: var(--color-text-primary); font-size: 15px; } body:has(.moo-chat) .loading_more_chat i { color: var(--color-accent); } /* Encryption banner */ .moo-chat .messages_encrypted { background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; color: rgba(255, 255, 255, 0.4); font-size: 13px; padding: 10px 16px; cursor: pointer; transition: background 0.2s; } .moo-chat .messages_encrypted:active { background: rgba(24, 32, 40, 0.92); } .moo-chat .messages_encrypted i { margin-right: 6px; color: var(--color-accent); } .moo-chat .messages_encrypted b { color: var(--color-accent); } /* Scroll-to-message loading toast */ #scroll_to_toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); display: none; align-items: center; justify-content: center; gap: 10px; padding: 12px 24px; white-space: nowrap; background: rgba(6, 13, 16, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; color: var(--color-text-primary); font-size: 14px; font-weight: 600; z-index: 100; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } #scroll_to_toast i { color: var(--color-accent); } /* Date and system lines */ .moo-chat .date_line, .moo-chat .system_line { background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; color: rgba(255, 255, 255, 0.45); font-size: 12px; font-weight: 600; padding: 8px 16px; width: fit-content; } /* Message bubbles */ .moo-chat .indv_message.message_right { background: rgba(0, 229, 160, 0.12); border: 1px solid rgba(0, 229, 160, 0.1); } .moo-chat .indv_message.message_left { background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.06); } .moo-chat .indv_message_info.message_right { background: var(--color-msg-time-right); border: none; padding: 2px 4px; border-radius: 4px; } .moo-chat .indv_message_info.message_left { background: var(--color-msg-time-left); border: none; padding: 2px 4px; border-radius: 4px; } .moo-chat .indv_message { border-radius: 14px; color: var(--color-text-primary); font-size: 14px; padding-right: 52px; display: inline-flex; } .moo-chat .indv_message_info_cont { width: 26px; right: 10px; top: 10px; height: calc(100% - 20px); } .moo-chat .indv_message_info { color: rgba(255, 255, 255, 0.3); white-space: nowrap; width: auto; } .moo-chat .indv_message_moreinfo { color: rgba(255, 255, 255, 0.25); } .moo-chat .indv_message pre a { color: var(--color-accent); } .moo-chat .indv_message_name { color: var(--color-accent); font-size: 13px; } /* GIF images in messages */ .moo-chat .GIF_IMG { border-radius: 10px; } /* New messages scroll button */ body:has(.moo-chat) #new_messages_button { background: rgba(0, 229, 160, 0.15); border: 1px solid rgba(0, 229, 160, 0.2); color: var(--color-accent); border-radius: 12px; display: flex; align-items: center; justify-content: center; } body:has(.moo-chat) #new_messages_button i { display: flex; align-items: center; justify-content: center; line-height: 1; } /* ---- Message input bar ---- */ .moo-chat-bar { background: rgba(6, 13, 16, 0.9) !important; padding: 20px !important; width: calc(100% - 40px) !important; min-height: 30px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; } .moo-chat-bar #user_message { background: rgba(18, 26, 32, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 14px !important; color: var(--color-text-primary) !important; padding: 7px 14px !important; font-size: 15px; font-family: 'Montserrat', sans-serif; margin-left: 0 !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; min-height: 20px; height: 20px; line-height: 20px; user-select: text; -webkit-user-select: text; touch-action: manipulation; } .moo-chat-bar button { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; background: rgba(24, 32, 40, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 10px !important; color: var(--color-text-primary) !important; width: 34px !important; height: 34px !important; min-width: 34px; flex-shrink: 0; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; } .moo-chat-bar #send_message { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important; border: none !important; color: var(--color-bg) !important; font-size: 16px !important; } .moo-chat-bar .message_process { background: rgba(6, 13, 16, 0.95) !important; color: rgba(255, 255, 255, 0.6) !important; font-size: 15px; } /* ---- Message options popup ---- */ body:has(.moo-chat) #mop_wrap { background: rgba(6, 13, 16, 0.6); animation: mooOverlayIn 0.2s ease-out; } body:has(.moo-chat) #message_options_popup { background: rgba(20, 30, 38, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 28px; width: min(320px, 80%); height: auto !important; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } body:has(.moo-chat) .mop_title { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 16px; } body:has(.moo-chat) #mop_message { position: absolute; left: -9999px; opacity: 0; height: 1px; width: 1px; padding: 0; margin: 0; border: 0; } body:has(.moo-chat) .mop_buttons_cont { display: flex; gap: 10px; width: 100%; box-sizing: border-box; } body:has(.moo-chat) .mop_button { flex: 1; background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; color: var(--color-text-primary); padding: 14px; font-size: 14px; font-weight: 600; font-family: 'Montserrat', sans-serif; width: auto; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; } body:has(.moo-chat) .mop_button:hover { background: rgba(0, 229, 160, 0.08); border-color: rgba(0, 229, 160, 0.2); color: var(--color-accent); } body:has(.moo-chat) .mop_button_delete { background: rgba(244, 63, 94, 0.08); border-color: rgba(244, 63, 94, 0.15); color: var(--color-danger); } body:has(.moo-chat) .mop_button_delete:hover { background: rgba(244, 63, 94, 0.15); border-color: rgba(244, 63, 94, 0.25); color: var(--color-danger); } body:has(.moo-chat) #delete_message { margin-left: 0; } /* ---- Attachments popup ---- */ body:has(.moo-chat) #attachments_wrap { background: rgba(6, 13, 16, 0.6); animation: mooOverlayIn 0.2s ease-out; } body:has(.moo-chat) #attachments_popup { background: rgba(20, 30, 38, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 32px; width: min(320px, 80%); color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Attachment option buttons — reset button defaults for .moo-modal__option */ body:has(.moo-chat) #attachments_popup .moo-modal__option { cursor: pointer; font-family: 'Montserrat', sans-serif; text-align: left; width: 100%; box-sizing: border-box; } /* ---- Tenor/GIF popup ---- */ body:has(.moo-chat) #tenor_wrap { background: rgba(6, 13, 16, 0.6); animation: mooOverlayIn 0.2s ease-out; } body:has(.moo-chat) #tenor_popup { background: rgba(20, 30, 38, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; color: var(--color-text-primary); } body:has(.moo-chat) .tenor_title { color: var(--color-text-primary); } body:has(.moo-chat) .tenor_title_sub { color: rgba(255, 255, 255, 0.35); } body:has(.moo-chat) #tenor_search { background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--color-text-primary); padding-left: 36px; } body:has(.moo-chat) .tenor_search_icon { color: rgba(255, 255, 255, 0.3); } body:has(.moo-chat) .tenor_indv img { border-radius: 10px; } body:has(.moo-chat) .gifs_loading { background: rgba(20, 30, 38, 0.9); color: var(--color-text-primary); font-size: 16px; } body:has(.moo-chat) .gifs_loading .cli_spin { color: var(--color-accent); font-size: 28px; } body:has(.moo-chat) .gifs_loading .cli_text { color: rgba(255, 255, 255, 0.5); font-size: 14px; } /* ---- Encryption info popup ---- */ body:has(.moo-chat) #ms_popup_wrap { background: rgba(6, 13, 16, 0.6); animation: mooOverlayIn 0.2s ease-out; } body:has(.moo-chat) #ms_popup { background: rgba(20, 30, 38, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 32px; width: min(360px, 80%); color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } body:has(.moo-chat) .ms_popup_title { font-size: 18px; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.3px; } body:has(.moo-chat) .ms_popup_message { color: rgba(255, 255, 255, 0.5); font-size: 14px; line-height: 1.7; } body:has(.moo-chat) .ms_popup_message b { color: rgba(255, 255, 255, 0.7); } /* Reply reference card (inside message bubbles) */ .reply_reference { background: rgba(18, 26, 32, 0.92); border-left: 3px solid var(--color-accent); border-radius: 0 8px 8px 0; padding: 8px 12px; margin-bottom: 8px; cursor: pointer; transition: background 0.2s; max-width: 100%; overflow: hidden; } .reply_reference:active { background: rgba(28, 36, 44, 0.92); } .reply_ref_name { font-size: 12px; font-weight: 700; color: var(--color-accent); margin-bottom: 2px; } .reply_ref_text { font-size: 13px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Forwarded label */ .forwarded_label { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.35); margin-bottom: 4px; font-style: italic; } .forwarded_label i { margin-right: 4px; } /* Message highlight animation (scroll to reply target) */ .message_highlight { animation: mooMsgHighlight 2s ease-out; } @keyframes mooMsgHighlight { 0%, 20% { outline: 2px solid var(--color-accent); outline-offset: 2px; } 100% { outline: 2px solid transparent; outline-offset: 2px; } } /* Reply preview bar (above message input) */ #reply_preview { display: none; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(14, 22, 28, 0.92); border-left: 3px solid var(--color-accent); border-radius: 0 10px 10px 0; margin-bottom: 10px; width: calc(100% - 19px); } #reply_preview_inner { flex: 1; min-width: 0; } #reply_preview_name { font-size: 12px; font-weight: 700; color: var(--color-accent); } #reply_preview_text { font-size: 13px; color: rgba(255, 255, 255, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #reply_cancel { background: rgba(18, 26, 32, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 8px !important; color: rgba(255, 255, 255, 0.5) !important; width: 28px !important; height: 28px !important; min-width: 28px; font-size: 12px !important; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; } /* Input row wrapper */ #moo_chat_input_row { display: flex; align-items: flex-end; gap: 10px; width: 100%; } /* Message options - accent button (reply) */ body:has(.moo-chat) .mop_button_accent { background: rgba(0, 229, 160, 0.08); border-color: rgba(0, 229, 160, 0.15); color: var(--color-accent); } body:has(.moo-chat) .mop_button_accent:hover { background: rgba(0, 229, 160, 0.15); border-color: rgba(0, 229, 160, 0.25); } /* Message options button grid */ body:has(.moo-chat) .mop_buttons_grid { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; } body:has(.moo-chat) .mop_buttons_grid .mop_button { flex: 1 1 calc(50% - 4px); min-width: calc(50% - 4px); box-sizing: border-box; } body:has(.moo-chat) .mop_buttons_grid .mop_button:last-child:nth-child(odd) { flex: 1 1 100%; min-width: 100%; } /* Forward picker modal */ body:has(.moo-chat) #forward_wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(6, 13, 16, 0.6); display: none; z-index: 999; animation: mooOverlayIn 0.2s ease-out; } body:has(.moo-chat) #forward_popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(20, 30, 38, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 28px; width: min(360px, 85%); max-height: 70%; color: var(--color-text-primary); display: none; flex-direction: column; z-index: 9999; animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #forward_list { overflow-y: auto; overscroll-behavior: none; flex: 1; min-height: 0; margin-bottom: 16px; } .forward_section_title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.35); margin-bottom: 8px; margin-top: 16px; } .forward_section_title:first-child { margin-top: 0; } .forward_item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; cursor: pointer; transition: background 0.15s; margin-bottom: 4px; } .forward_item:hover { background: rgba(14, 22, 28, 0.92); } .forward_item:active { background: rgba(24, 32, 40, 0.92); } .forward_item img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); } .forward_item span { flex: 1; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .forward_check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s; font-size: 11px; color: transparent; } .forward_selected .forward_check { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); } .forward_selected { background: rgba(0, 229, 160, 0.06); } #forward_send { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); border: none; border-radius: 14px; color: var(--color-bg); font-weight: 700; font-size: 15px; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; } #forward_send:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0, 229, 160, 0.25); } /* ===== ATTACHMENTS ===== */ /* ---- Location Card ---- */ .moo-location-card { display: block; width: 260px; max-width: 100%; border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--color-text-primary); background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.06); transition: border-color 0.2s; } .moo-location-card:active { border-color: rgba(0, 229, 160, 0.3); } .moo-location-card__map { width: 100%; height: 140px; overflow: hidden; position: relative; background: rgba(14, 22, 28, 0.90); } .moo-location-card__map::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(6, 13, 16, 0.5)); pointer-events: none; } .moo-location-card__tiles { display: grid; grid-template-columns: repeat(3, 256px); grid-template-rows: repeat(3, 256px); pointer-events: none; } .moo-location-card__tiles img { display: block; width: 256px; height: 256px; } .moo-location-card__pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -90%); color: var(--color-accent); font-size: 24px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); pointer-events: none; z-index: 1; } .moo-location-card__info { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; font-weight: 600; } .moo-location-card__info i { color: var(--color-accent); font-size: 14px; } .moo-location-card__info span { color: rgba(255, 255, 255, 0.7); } /* ---- Media Grid ---- */ .moo-media-grid { display: grid; gap: 3px; border-radius: 10px; overflow: hidden; max-width: 280px; } .moo-media-grid--single { grid-template-columns: auto; } .moo-media-grid--two { grid-template-columns: 1fr 1fr; } .moo-media-grid--three { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .moo-media-grid--three .moo-media-grid__item:first-child { grid-column: 1 / -1; } .moo-media-grid--multi { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; } .moo-media-grid__item { position: relative; overflow: hidden; background: rgba(14, 22, 28, 0.90); min-height: 80px; } .moo-media-grid--single .moo-media-grid__item { min-height: 0; max-height: 320px; } .moo-media-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 80px; } .moo-media-grid--single .moo-media-grid__item img { min-height: 0; width: auto; height: auto; max-width: 100%; max-height: 320px; object-fit: contain; } .moo-media-grid__video-ph { width: 100%; height: 100%; min-height: 80px; position: relative; overflow: hidden; background: linear-gradient(145deg, #0d2420 0%, #091a16 100%); } .moo-media-grid__video-ph i { display: none; } .moo-media-grid--single .moo-media-grid__video-ph { min-height: 120px; aspect-ratio: 16 / 9; max-height: 320px; } .moo-media-grid__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(0, 229, 160, 0.13); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; } .moo-media-grid__play i { color: var(--color-accent); font-size: 18px; margin-left: 3px; } /* ---- File Card ---- */ .moo-file-attachments { display: flex; flex-direction: column; gap: 6px; max-width: min(280px, 100%); } .moo-file-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; text-decoration: none; color: var(--color-text-primary); transition: background 0.15s, border-color 0.15s; min-width: 0; } .moo-file-card:active { background: rgba(24, 32, 40, 0.92); border-color: rgba(255, 255, 255, 0.1); } .moo-file-card__icon { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, rgba(0, 229, 160, 0.15), rgba(0, 229, 160, 0.05)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .moo-file-card__icon i { color: var(--color-accent); font-size: 16px; } .moo-file-card__info { flex: 1; min-width: 0; } .moo-file-card__name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moo-file-card__size { font-size: 11px; color: rgba(255, 255, 255, 0.35); margin-top: 2px; } .moo-file-card__download { width: 32px; height: 32px; border-radius: 8px; background: rgba(14, 22, 28, 0.92); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .moo-file-card__download i { color: rgba(255, 255, 255, 0.35); font-size: 13px; } /* ---- Upload Overlay ---- */ #moo_upload_overlay { position: fixed; inset: 0; background: rgba(6, 13, 16, 0.85); z-index: 100001; display: none; align-items: center; justify-content: center; animation: mooOverlayIn 0.2s ease-out; } .moo-upload__content { display: flex; flex-direction: column; align-items: center; gap: 16px; } .moo-upload__progress-ring { width: 80px; height: 80px; position: relative; } .moo-upload__progress-ring svg { width: 80px; height: 80px; transform: rotate(-90deg); } .moo-upload__progress-ring .ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 4; } .moo-upload__progress-ring .ring-fg { fill: none; stroke: var(--color-accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 226.2; stroke-dashoffset: 226.2; transition: stroke-dashoffset 0.3s ease; } .moo-upload__status { font-size: 15px; font-weight: 600; color: var(--color-text-primary); } .moo-upload__percent { font-size: 13px; color: rgba(255, 255, 255, 0.4); font-weight: 500; } /* ---- Upload Preview Modal ---- */ #moo_upload_wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(6, 13, 16, 0.6); display: none; z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #moo_upload_preview { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; gap: 14px; padding: 28px; background: rgba(20, 30, 38, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: min(360px, 85%); max-height: 70%; z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; overscroll-behavior: none; } .moo-upload-preview__header { display: flex; align-items: center; justify-content: space-between; } .moo-upload-preview__count { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.5); } .moo-upload-preview__close { background: rgba(18, 26, 32, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 8px !important; color: rgba(255, 255, 255, 0.5) !important; width: 28px !important; height: 28px !important; min-width: 28px; font-size: 12px !important; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; } .moo-upload-preview__items { display: flex; flex-wrap: wrap; gap: 8px; overflow-y: auto; overscroll-behavior: none; max-height: 40vh; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; } .moo-upload-preview__items::-webkit-scrollbar { display: none; } .moo-upload-preview__thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; flex-shrink: 0; position: relative; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.06); } .moo-upload-preview__thumb img { width: 100%; height: 100%; object-fit: cover; } .moo-upload-preview__thumb-remove { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(6, 13, 16, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); font-size: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; flex-shrink: 0; } .moo-upload-preview__file-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(14, 22, 28, 0.90); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; width: 100%; box-sizing: border-box; } .moo-upload-preview__file-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(0, 229, 160, 0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .moo-upload-preview__file-icon i { color: var(--color-accent); font-size: 15px; } .moo-upload-preview__file-details { flex: 1; min-width: 0; overflow: hidden; } .moo-upload-preview__file-remove { width: 32px; height: 32px; border-radius: 8px; background: rgba(244, 63, 94, 0.06); border: 1px solid rgba(244, 63, 94, 0.1); color: rgba(244, 63, 94, 0.5); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s; } .moo-upload-preview__file-remove:active { background: rgba(244, 63, 94, 0.15); border-color: rgba(244, 63, 94, 0.3); color: var(--color-danger); } .moo-upload-preview__file-name { font-size: 12px; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .moo-upload-preview__file-size { font-size: 10px; color: rgba(255, 255, 255, 0.3); } .moo-upload-preview__send { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important; border: none !important; border-radius: 12px !important; color: var(--color-bg) !important; font-weight: 700 !important; font-size: 14px !important; font-family: 'Montserrat', sans-serif !important; padding: 12px !important; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px; transition: transform 0.15s, box-shadow 0.15s; width: 100%; box-sizing: border-box; position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; } .moo-upload-preview__send:active { transform: scale(0.98); } /* ---- Upload Encryption Toggle ---- */ .moo-upload-preview__encrypt { padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 4px; } .moo-upload-preview__encrypt-toggle { display: flex; align-items: center; gap: 10px; } .moo-upload-preview__encrypt-label { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.5); } .moo-upload-preview__encrypt-label i { color: var(--color-accent); margin-right: 4px; font-size: 11px; } .moo-toggle--sm { width: 36px; height: 20px; } .moo-toggle--sm .moo-toggle__track::after { width: 14px; height: 14px; left: 3px; top: 3px; } .moo-toggle--sm input:checked + .moo-toggle__track::after { transform: translateX(16px); } .moo-upload-preview__encrypt-options { margin-top: 10px; } .moo-upload-preview__encrypt-mode { display: flex; gap: 6px; } .moo-upload-preview__encrypt-mode-btn { flex: 1; padding: 8px 10px !important; font-size: 11px !important; font-weight: 600 !important; font-family: 'Montserrat', sans-serif !important; border-radius: 8px !important; background: rgba(14, 22, 28, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.35) !important; cursor: pointer; transition: opacity 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s; text-align: center; } .moo-upload-preview__encrypt-mode-btn.active { background: rgba(0, 229, 160, 0.08) !important; border-color: rgba(0, 229, 160, 0.25) !important; color: var(--color-accent) !important; } .moo-upload-preview__encrypt-mode-btn i { margin-right: 4px; } .moo-upload-preview__encrypt-pw { margin-top: 8px; } .moo-upload-preview__encrypt-pw input { width: 100%; box-sizing: border-box; padding: 9px 12px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; color: var(--color-text-primary); font-family: 'Montserrat', sans-serif; font-size: 12px; outline: none; transition: border-color 0.15s; } .moo-upload-preview__encrypt-pw input:focus { border-color: rgba(0, 229, 160, 0.35); } .moo-upload-preview__encrypt-note { font-size: 10px; color: rgba(255, 255, 255, 0.25); margin-top: 6px; } /* ---- Encrypted Media ---- Post-E2EE-default, every chat message's media is encrypted. Rather than badge every thumbnail with a padlock, we render the same visual as an unencrypted image/video and let main_js's auto-decrypt loop populate the with a blob URL of the decrypted bytes. .moo-media-enc-img is the empty the auto-decrypt loop fills. The subtle background tint is a loading placeholder — visible until the blob URL is set, then the image itself covers it. */ .moo-media-grid__item--encrypted { cursor: pointer; -webkit-tap-highlight-color: transparent; } .moo-media-enc-img { width: 100%; height: 100%; object-fit: cover; background: rgba(255, 255, 255, 0.03); min-height: 80px; } .moo-media-grid--single .moo-media-enc-img { min-height: 100px; } /* ---- Encrypted File Card ---- Visually identical to an unencrypted file card now that every E2EE chat's files are encrypted by default. The only difference is the click handler (routes to mooDecryptAndView for in-browser decrypt). */ .moo-file-card--encrypted { cursor: pointer; -webkit-tap-highlight-color: transparent; } /* ---- Encrypted Items in Chat Info Grid ---- Same principle as the in-message encrypted media: images get auto-decrypted inline (cmAutoDecryptEncImages), videos/files keep their existing visual (video icon / file icon) minus the padlock badge. */ .moo-chat-media__item--encrypted { cursor: pointer; -webkit-tap-highlight-color: transparent; } .moo-chat-media-enc-img { width: 100%; height: 100%; object-fit: cover; background: rgba(255, 255, 255, 0.03); } /* ---- Encrypted Items in File Manager Grid ---- * Subtle green-tinted dashed border as an at-a-glance "this file is * encrypted" indicator, without the heavy-handed lock icon that used to * sit on every item — that was just visual noise in an E2EE-by-default * app where nearly every attachment is encrypted. Type-specific icons * (fa-file-pdf etc.) are rendered inside the thumb, same as unencrypted * items, so users see what the file is. */ .moo-fm-grid__item--encrypted .moo-fm-grid__thumb { background: rgba(0, 229, 160, 0.04); border: 1px dashed rgba(0, 229, 160, 0.18); } /* ---- Decrypt Password Modal ---- */ #moo_decrypt_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.7); z-index: 100010; } #moo_decrypt_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: 10px; padding: 28px 24px; background: rgba(20, 30, 38, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; width: min(320px, calc(100% - 48px)); z-index: 100011; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .moo-decrypt-modal__icon { font-size: 24px; color: var(--color-accent); } .moo-decrypt-modal__title { font-size: 16px; font-weight: 700; } .moo-decrypt-modal__subtitle { font-size: 12px; color: rgba(255, 255, 255, 0.35); text-align: center; line-height: 1.4; } #moo_decrypt_pw_input { width: 100%; box-sizing: border-box; padding: 11px 14px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; color: var(--color-text-primary); font-family: 'Montserrat', sans-serif; font-size: 14px; outline: none; transition: border-color 0.15s; } #moo_decrypt_pw_input:focus { border-color: rgba(0, 229, 160, 0.4); } .moo-decrypt-modal__error { font-size: 11px; color: var(--color-danger); min-height: 14px; text-align: center; } .moo-decrypt-modal__actions { display: flex; gap: 8px; width: 100%; margin-top: 2px; } .moo-decrypt-modal__btn--secondary { flex: 1; padding: 11px !important; background: rgba(16, 24, 30, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 10px !important; color: rgba(255, 255, 255, 0.5) !important; font-weight: 600 !important; font-size: 13px !important; font-family: 'Montserrat', sans-serif !important; cursor: pointer; transition: background 0.15s; } .moo-decrypt-modal__btn--secondary:active { background: rgba(28, 36, 44, 0.92) !important; } .moo-decrypt-modal__btn--primary { flex: 1; padding: 11px !important; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important; border: none !important; border-radius: 10px !important; color: var(--color-bg) !important; font-weight: 700 !important; font-size: 13px !important; font-family: 'Montserrat', sans-serif !important; cursor: pointer; transition: transform 0.15s; } .moo-decrypt-modal__btn--primary:active { transform: scale(0.97); } /* Hidden file inputs for upload */ #moo_file_input_media, #moo_file_input_files { display: none !important; } /* ---- File Manager (Settings) ---- */ .moo-fm-quota { margin-bottom: 16px; } .moo-fm-quota__bar { height: 6px; border-radius: 3px; background: rgba(18, 26, 32, 0.92); overflow: hidden; margin-bottom: 8px; } .moo-fm-quota__fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark)); transition: width 0.4s ease; min-width: 0; } .moo-fm-quota__fill--warn { background: linear-gradient(90deg, var(--color-warning), #e6a817); } .moo-fm-quota__fill--danger { background: linear-gradient(90deg, var(--color-danger), #d1213a); } .moo-fm-quota__label { font-size: 12px; color: rgba(255, 255, 255, 0.35); font-weight: 500; } .moo-fm-quota__label span { color: rgba(255, 255, 255, 0.6); font-weight: 600; } /* File Manager Modal */ #fm_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.6); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #fm_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; background: rgba(20, 30, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: min(400px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .moo-fm-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; flex-shrink: 0; } .moo-fm-modal__title { font-size: 17px; font-weight: 700; } .moo-fm-modal__header button { width: 32px; height: 32px; border-radius: 10px; background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.4); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .moo-fm-modal__header button:active { background: rgba(28, 36, 44, 0.92); } .moo-fm-modal__list { overflow-y: auto; flex: 1; min-height: 0; padding: 0 24px 24px; -webkit-overflow-scrolling: touch; overscroll-behavior: none; } .moo-fm-modal__loading, .moo-fm-modal__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px 0; color: rgba(255, 255, 255, 0.25); font-size: 14px; } .moo-fm-modal__loading i, .moo-fm-modal__empty i { font-size: 28px; color: rgba(255, 255, 255, 0.15); } /* "Load More" pagination button — mirrors the Chat Info "Show All / Load * More" visual (see .moo-chat-media__show-all). Appended to #fm_list * below the grid when the server indicates more pages are available. */ .moo-fm-modal__load-more { width: 100%; margin-top: 12px; padding: 12px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; color: var(--color-text-primary); font-size: 13px; font-weight: 600; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; -webkit-tap-highlight-color: transparent; } .moo-fm-modal__load-more:hover { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.25); color: var(--color-accent); } .moo-fm-modal__load-more:active { transform: scale(0.98); background: rgba(0, 229, 160, 0.08); } .moo-fm-modal__load-more:disabled { cursor: default; opacity: 0.6; transform: none; } /* File list — media grid + file rows */ .moo-fm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .moo-fm-grid__item { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 0.2s; } .moo-fm-grid__thumb { border-radius: 10px; overflow: hidden; aspect-ratio: 1; position: relative; background: rgba(14, 22, 28, 0.92); } .moo-fm-grid__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .moo-fm-grid__thumb .moo-media-grid__video-ph { min-height: 0; aspect-ratio: 1; } .moo-fm-grid__item--video .moo-fm-grid__thumb::after { content: '\f04b'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: rgba(0, 229, 160, 0.13); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: 13px; padding-left: 2px; pointer-events: none; } .moo-fm-grid__del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 6px; background: rgba(0, 0, 0, 0.55); border: none; color: rgba(244, 63, 94, 0.7); font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; -webkit-tap-highlight-color: transparent; } .moo-fm-grid__del:active { background: rgba(244, 63, 94, 0.3); color: var(--color-white); } .moo-fm-grid__info { padding: 5px 2px 0; min-width: 0; } .moo-fm-grid__info-size { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.5); } .moo-fm-grid__info-ctx { font-size: 10px; color: rgba(255, 255, 255, 0.25); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Generic row component — used by group invite list, note share list */ .moo-fm-file { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: opacity 0.2s; cursor: pointer; -webkit-tap-highlight-color: transparent; } .moo-fm-file:last-child { border-bottom: none; } .moo-fm-file__icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(0, 229, 160, 0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .moo-fm-file__icon i { color: var(--color-accent); font-size: 15px; } .moo-fm-file__info { flex: 1; min-width: 0; } .moo-fm-file__type { font-size: 13px; font-weight: 600; color: var(--color-text-primary); } /* File cover (documents, PDFs, etc. — grid cell) */ .moo-fm-grid__file-cover { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(14, 22, 28, 0.90); } .moo-fm-grid__file-cover i { font-size: 22px; color: var(--color-accent); opacity: 0.5; } .moo-fm-grid__file-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.3); } /* ---- Delete Account (Settings) ---- */ .moo-delete-account-card { border: 1px solid rgba(244, 63, 94, 0.15) !important; } .moo-settings-card__icon--danger { background: rgba(244, 63, 94, 0.1) !important; border-color: rgba(244, 63, 94, 0.15) !important; color: var(--color-danger) !important; } .moo-delete-account__desc { font-size: 13px; color: rgba(255, 255, 255, 0.35); line-height: 1.5; margin: 0 0 16px; } /* Delete Account Modal */ #da_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.6); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #da_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; background: rgba(20, 30, 38, 0.92); border: 1px solid rgba(244, 63, 94, 0.15); border-radius: 24px; width: min(380px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .moo-da-modal__header { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 24px 0; flex-shrink: 0; } .moo-da-modal__icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(244, 63, 94, 0.1); border: 1px solid rgba(244, 63, 94, 0.15); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--color-danger); } .moo-da-modal__title { font-size: 18px; font-weight: 700; text-align: center; } .moo-da-modal__body { padding: 16px 24px; font-size: 14px; color: rgba(255, 255, 255, 0.5); line-height: 1.6; } .moo-da-modal__body p { margin: 0 0 8px; } .moo-da-modal__body ul { margin: 0 0 12px; padding-left: 20px; } .moo-da-modal__body li { margin-bottom: 4px; } .moo-da-modal__warn { color: var(--color-danger); font-weight: 600; font-size: 13px; } .moo-da-modal__actions { display: flex; gap: 10px; padding: 0 24px 20px; } .moo-da-modal__actions form { flex: 1; margin: 0; } .moo-da-modal__cancel { flex: 1; padding: 14px 20px; border-radius: 12px; background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-text-primary); font-size: 14px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s; white-space: nowrap; } .moo-da-modal__cancel:hover { background: rgba(28, 36, 44, 0.92); } .moo-da-modal__confirm { flex: 1; width: 100%; padding: 14px 20px; border-radius: 12px; white-space: nowrap; background: rgba(244, 63, 94, 0.15); border: 1px solid rgba(244, 63, 94, 0.3); color: var(--color-danger); font-size: 14px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, border-color 0.2s; } .moo-da-modal__confirm:hover:not(:disabled) { background: rgba(244, 63, 94, 0.25); border-color: rgba(244, 63, 94, 0.5); } .moo-da-modal__confirm:disabled { cursor: not-allowed; } .moo-da-modal__countdown { text-align: center; padding: 0 24px 20px; font-size: 12px; color: rgba(255, 255, 255, 0.25); font-weight: 500; } .moo-da-modal__countdown span { color: var(--color-danger); font-weight: 700; } /* Pinned messages list (chat info page) */ .moo-pinned-list { display: flex; flex-direction: column; gap: 8px; } .moo-pinned-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(14, 22, 28, 0.90); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 14px; } .moo-pinned-item__content { flex: 1; min-width: 0; } .moo-pinned-item__sender { font-size: 13px; font-weight: 700; color: var(--color-accent); margin-bottom: 3px; } .moo-pinned-item__text { font-size: 14px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moo-pinned-item__text i { margin-right: 4px; } .moo-pinned-item__time { font-size: 11px; color: rgba(255, 255, 255, 0.25); margin-top: 4px; } .moo-pinned-item__unpin { flex-shrink: 0; } .moo-pinned-item__unpin button { background: rgba(244, 63, 94, 0.1) !important; border: 1px solid rgba(244, 63, 94, 0.2) !important; border-radius: 10px !important; color: var(--color-danger) !important; width: 32px !important; height: 32px !important; padding: 0 !important; font-size: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; transition: opacity 0.2s, background-color 0.2s; margin: 0; } .moo-pinned-item__unpin button:hover { background: rgba(244, 63, 94, 0.2) !important; } /* ===== CHAT INFO — FILES & MEDIA ===== */ .moo-chat-media__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; contain: layout style paint; } .moo-chat-media__item { border-radius: 12px; overflow: hidden; aspect-ratio: 1; cursor: pointer; position: relative; background: rgba(14, 22, 28, 0.92); -webkit-tap-highlight-color: transparent; content-visibility: auto; contain-intrinsic-size: auto 100px; } .moo-chat-media__item img { width: 100%; height: 100%; object-fit: cover; display: block; } .moo-chat-media__item .moo-media-grid__video-ph { min-height: 0; aspect-ratio: 1; } .moo-chat-media__item--video::after { content: '\f04b'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background: rgba(0, 229, 160, 0.13); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: 18px; padding-left: 3px; pointer-events: none; z-index: 2; } .moo-chat-media__item--file { aspect-ratio: 1; } .moo-chat-media__file-cover { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(14, 22, 28, 0.90); } .moo-chat-media__file-cover i { font-size: 28px; color: var(--color-accent); opacity: 0.5; } .moo-chat-media__file-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.3); } .moo-chat-media__grid:not(:empty) + .moo-chat-media__show-all { margin-top: 12px; } .moo-chat-media__show-all { width: 100%; padding: 12px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; color: var(--color-text-primary); font-size: 13px; font-weight: 600; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; -webkit-tap-highlight-color: transparent; } .moo-chat-media__show-all:hover { background: rgba(0, 229, 160, 0.1); border-color: rgba(0, 229, 160, 0.25); color: var(--color-accent); } .moo-chat-media__show-all:active { transform: scale(0.98); background: rgba(0, 229, 160, 0.08); } /* ===== GROUP INVITE CARDS (chats page) ===== */ .moo-gi-card { display: flex; align-items: center; gap: 12px; background: rgba(0, 229, 160, 0.06); border: 1px solid rgba(0, 229, 160, 0.12); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; transition: opacity 0.2s; } .moo-gi-card:last-child { margin-bottom: 0; } .moo-gi-card__icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(0, 229, 160, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-accent); font-size: 16px; } .moo-gi-card__info { flex: 1; min-width: 0; } .moo-gi-card__title { font-size: 14px; font-weight: 700; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .moo-gi-card__sub { font-size: 12px; color: rgba(255, 255, 255, 0.4); margin-top: 2px; } .moo-gi-card__actions { display: flex; gap: 8px; flex-shrink: 0; } .moo-gi-card__accept { width: 40px; height: 40px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-bg); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s, transform 0.2s; -webkit-tap-highlight-color: transparent; } .moo-gi-card__accept:active { transform: scale(0.9); } .moo-gi-card__decline { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(18, 26, 32, 0.92); color: rgba(255, 255, 255, 0.5); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; -webkit-tap-highlight-color: transparent; } .moo-gi-card__decline:active { transform: scale(0.9); background: rgba(244, 63, 94, 0.1); border-color: rgba(244, 63, 94, 0.2); color: var(--color-danger); } /* Group invite modal */ #gi_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.6); z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #gi_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; flex-direction: column; background: rgba(20, 30, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: min(400px, calc(100% - 48px)); max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px); z-index: 9999; color: var(--color-text-primary); animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } /* Clickable pinned items */ .moo-pinned-item__content { cursor: pointer; transition: opacity 0.2s; } .moo-pinned-item__content:active { opacity: 0.7; } /* Pinned message viewer popup */ #pinned_view_wrap { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.6); z-index: 99999; animation: mooOverlayIn 0.2s ease-out; } #pinned_view_popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(20, 30, 38, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 0; width: min(400px, 85%); max-height: 70%; color: var(--color-text-primary); display: none; flex-direction: column; overflow: hidden; animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .pinned-view__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 28px 28px 0; flex-shrink: 0; } #pinned_view_close { width: 32px; height: 32px; border-radius: 10px; background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s; padding: 0; margin: 0; flex-shrink: 0; } #pinned_view_close:hover { background: rgba(244, 63, 94, 0.15); border-color: rgba(244, 63, 94, 0.3); color: var(--color-danger); } .pinned-view__sender { font-size: 15px; font-weight: 700; color: var(--color-accent); margin-bottom: 4px; } .pinned-view__time { font-size: 12px; color: rgba(255, 255, 255, 0.35); } .pinned-view__body { flex: 1; overflow-y: auto; overscroll-behavior: none; min-height: 0; padding: 20px 28px 28px; } .pinned-view__content { font-size: 15px; color: var(--color-text-primary); line-height: 1.6; } .pinned-view__content img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .pinned-view__content pre { white-space: pre-wrap; word-break: break-word; margin: 0; font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 1.6; } .pinned-view__attachment { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: rgba(14, 22, 28, 0.92); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; color: rgba(255, 255, 255, 0.5); font-size: 15px; font-weight: 600; } #delete_chat_button { width:100%; } .chat_participants { margin-top:20px; } .tenor_indv { width: 100%; aspect-ratio: 16 / 9; } .tenor_indv img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; } .gifs_loading { position:absolute; top:68px; left:0px; opacity: 0; transition: opacity 250ms ease; display:none; text-align: center; vertical-align:middle; justify-content: center; align-items: center; width:100%; height:calc(100% - 68px); background-color: var(--color-bg-elevated); z-index:9; font-size:24px; font-weight:bold; color:var(--color-white); } #tenor_results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; width: 100%; height: calc(100% - 108px); overflow-y: scroll; overflow-x: hidden; overscroll-behavior: none; position: relative; margin-top: 20px; border-radius: 12px; padding: 0; box-sizing: border-box; } #tenor_search { width:calc(100% - 35px); min-height: 20px; line-height: 20px; background-color: var(--color-white); color: var(--color-black); margin: 0px; padding: 5px; padding-left:30px; font-size: 14px; height: 20px; border: 0px; border-radius: 12px; } #tenor_popup { overflow:hidden; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:20px; width:80%; height:80%; background-color:var(--color-bg-elevated); color:var(--color-text-primary); border-radius:20px; display:none; z-index:9999; } #tenor_wrap { position:absolute; top:0px; left:0px; width:100%; height:100%; display:none; z-index:999; } .tenor_title { margin-bottom:20px; font-weight:bold; height:38px; font-size:20px; text-align:center; line-height:1.2; } .tenor_title_sub { width:100%; font-weight: normal; font-size:12px; text-align: center; } .GIF_IMG { width:auto !important; height:auto !important; min-width: 200px; max-width: 50vw; border-radius: 12px; overflow:hidden; display:flex; } .tenor_search_cont { position:relative; } .tenor_search_icon { position:absolute; top:0px; left:0px; display:flex; align-items: center; justify-content: center; text-align: center; line-height:1; width:30px; height:30px; color:var(--color-black); } .push_button button { width:100%; margin-top:10px; } .push_button { display:flex; justify-content: center; align-items: center; gap:10px; } .unread_badge { position:absolute; top:-5px; right:-5px; background-color: var(--color-badge); color:var(--color-white); border-radius: 50%; width:20px; height:20px; overflow:hidden; font-weight:bold; font-size:12px; display:none; justify-content: center; text-align: center; align-items: center; } .input_time { background-color: var(--color-white); height:23px; text-align: left; } #pn_asked_wrap { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(6, 13, 16, 0.6); display: block; z-index: 999; animation: mooOverlayIn 0.2s ease-out; } #pn_asked_popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 32px; width: min(320px, 80%); height: auto; background: rgba(20, 30, 38, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; color: var(--color-text-primary); display: block; text-align: center; z-index: 9999; animation: mooModalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .moo-pn-asked-icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(0, 229, 160, 0.1); border: 1px solid rgba(0, 229, 160, 0.15); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 22px; color: var(--color-accent); } #pn_asked_popup .pn_popup_title { font-size: 18px; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.3px; margin-bottom: 8px; } #pn_asked_popup .pn_popup_message { font-size: 14px; color: rgba(255, 255, 255, 0.45); line-height: 1.6; margin-bottom: 24px; } #pn_asked_popup .mop_buttons_cont { display: flex; gap: 10px; } #pn_asked_popup .pn_button_no { flex: 1; margin-left: 0; padding: 14px; background: rgba(18, 26, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; color: rgba(255, 255, 255, 0.6); font-weight: 600; font-size: 14px; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, background-color 0.2s; width: auto; } #pn_asked_popup .pn_button_no:hover { background: rgba(28, 36, 44, 0.92); } #pn_asked_popup .mop_button_yes { flex: 1; padding: 14px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); border: none; border-radius: 14px; color: var(--color-bg); font-weight: 700; font-size: 14px; font-family: 'Montserrat', sans-serif; cursor: pointer; transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s; width: auto; display: flex; align-items: center; justify-content: center; gap: 8px; } #pn_asked_popup .mop_button_yes:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 229, 160, 0.25); } /* ===== Push-notification recovery banner ===== * Surfaces the localStorage 'vocyl_pn_recovery_needed' flag set by * pwa_pn.js when the subscription dies silently. NON-modal (a banner, * not an interrupt) since the recovery state is "you should fix this" * not "you must fix this immediately". Amber-warning aurora glass to * differentiate from the accent-green primary actions — same visual * vocabulary as #pn_asked_popup (icon chip + title + button) but a * banner geometry that doesn't block the viewport. * * Hidden by default; JS toggles display:flex when the flag is set or * the 'vocyl-pn-needs-attention' custom event fires. */ #pn_recovery_banner { position: fixed; top: 0; left: 0; right: 0; z-index: 990; margin: env(safe-area-inset-top) auto 0; padding: 12px 14px; max-width: 540px; align-items: center; gap: 12px; background: linear-gradient(180deg, rgba(36, 28, 12, 0.96), rgba(20, 30, 38, 0.96)); border-bottom: 1px solid rgba(251, 191, 36, 0.28); box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.85); animation: mooPnBannerIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); color: var(--color-text-primary); font-family: 'Montserrat', sans-serif; } @media (min-width: 600px) { #pn_recovery_banner { margin-top: calc(env(safe-area-inset-top) + 12px); border: 1px solid rgba(251, 191, 36, 0.28); border-radius: 14px; } } @keyframes mooPnBannerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .moo-pn-banner__icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(251, 191, 36, 0.14); border: 1px solid rgba(251, 191, 36, 0.3); display: flex; align-items: center; justify-content: center; color: #fbbf24; font-size: 14px; flex-shrink: 0; } .moo-pn-banner__body { flex: 1; min-width: 0; } .moo-pn-banner__title { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.92); letter-spacing: -0.1px; } .moo-pn-banner__msg { font-size: 11.5px; color: rgba(255, 255, 255, 0.55); line-height: 1.4; margin-top: 1px; } .moo-pn-banner__action { flex-shrink: 0; padding: 8px 14px; background: rgba(251, 191, 36, 0.16); border: 1px solid rgba(251, 191, 36, 0.4); border-radius: 9px; color: #fbbf24; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'Montserrat', sans-serif; transition: background-color 0.15s, border-color 0.15s, opacity 0.15s; } .moo-pn-banner__action:hover { background: rgba(251, 191, 36, 0.24); border-color: rgba(251, 191, 36, 0.55); } .moo-pn-banner__action:disabled { opacity: 0.5; cursor: not-allowed; } .moo-pn-banner__close { flex-shrink: 0; width: 28px; height: 28px; background: transparent; border: 0; border-radius: 8px; color: rgba(255, 255, 255, 0.4); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s, color 0.15s; } .moo-pn-banner__close:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.9); } #chats_popup_wrap { position:absolute; top:0px; left:0px; width:100%; height:100%; display:none; z-index:999; } #chats_popup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:20px; width:60%; height:auto; background-color:var(--color-bg-elevated); color:var(--color-text-primary); border-radius:20px; display:none; align-items: center; justify-content: center; text-align: center; flex-direction: column; z-index:9999; } .co_contact_form { display:flex; justify-content: center; text-align: center; align-items: center; gap:40px; } .coy_form { display:flex; } .contact_mn_display { font-size:16px; font-weight:normal; } .contact_last_online { font-size:14px; font-weight:normal; margin-top:10px; } .contact_timezone { font-size:14px; font-weight:normal; } .my_top_display { font-size:12px; font-weight:normal; } .loading_bar { position: fixed; top: 0px; left: 0px; width: calc(100% - 40px); height: 24px; color: var(--color-text-primary); background: var(--color-bg); border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0px; padding: 20px; padding-top: calc(20px + env(safe-area-inset-top, 0)); overflow: hidden; display: none; justify-content: flex-start; align-items: center; text-align: left; z-index: 999999; } .lb_left { font-size: 20px; color: var(--color-accent); display: flex; justify-content: center; align-items: center; text-align: center; } .lb_right { display: flex; justify-content: center; flex-direction: column; align-items: flex-start; text-align: left; margin-left: 14px; } .lbr_line1 { font-weight: 700; font-size: 15px; color: var(--color-text-primary); display: flex; justify-content: flex-start; align-items: center; text-align: left; line-height: 1; } .lbr_line2 { font-size: 12px; color: rgba(255, 255, 255, 0.4); display: flex; justify-content: flex-start; align-items: center; text-align: left; line-height: 1; margin-top: 2px; } #br_popup_wrap { position:absolute; top:0px; left:0px; width:100%; height:100%; display:none; z-index:999; } #br_popup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:20px; width:80%; max-width:300px; height:auto; max-height:80%; overflow-x:hidden; overflow-y:auto; overscroll-behavior: none; background-color:var(--color-white); border: 1px solid rgba(255, 255, 255, 0.08); color:var(--color-black); border-radius:20px; display:none; align-items: center; justify-content: center; text-align: center; flex-direction: column; z-index:9999; } .br_popup_title { font-size:18px; text-align:center; font-weight:bold; margin-bottom:20px; } .br_form { display:flex; flex-direction: column; gap:10px; width:100%; } .br_submit_button { font-size: 17px; font-weight: bold; padding: 15px; text-align: center; height: auto; margin: 0px; border: 0px; border-radius: 12px; background-color: var(--color-bg-elevated); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-text-primary); width: 100%; } .br_selectbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 17px; margin: 0px; padding: 15px; width:100%; margin-right: 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background-color: var(--color-white); color:var(--color-black); } .br_textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 17px; margin: 0px; padding: 15px; width:calc(100% - 32px); height:140px; margin-right: 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); color:var(--color-black); overflow-x:hidden; overflow-y:auto; overscroll-behavior: none; resize:none; } .br_textarea::placeholder { font-weight: normal; opacity: 1; color: var(--color-black); } #ms_popup_wrap { position:absolute; top:0px; left:0px; width:100%; height:100%; display:none; z-index:999; } #ms_popup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:20px; width:80%; height:auto; max-height:80%; overflow-x:hidden; overflow-y:auto; overscroll-behavior: none; background-color:var(--color-bg-elevated); border:0px; color:var(--color-text-primary); border-radius:20px; display:none; align-items: center; justify-content: center; text-align: center; flex-direction: column; z-index:9999; } .ms_popup_title { font-size:18px; text-align:center; font-weight:bold; margin-bottom:20px; } .messages_encrypted { height:auto; width:fit-content; text-align:center; padding:10px; font-size:14px; font-weight:normal; clear:both; margin-bottom:20px; background-color:var(--color-bg-elevated); color:var(--color-text-primary); border-radius:10px; margin-left:auto; margin-right:auto; } .input_select { font-size: 18px; margin: 0px; padding: 5px; width: calc(100% - 12px); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); } .loading_more_chat { position:absolute; top:20px; left:20px; width:calc(100% - 80px); height:auto; padding: 20px; font-size: 20px; font-weight: bold; background-color: var(--color-bg-elevated); color: var(--color-text-primary); border-radius: 12px; opacity: 0; transition: opacity 200ms ease; display:none; justify-content: center; align-items: center; text-align: center; } .lmc_text { margin-left:10px; } .table_cont { border:1px solid rgba(255, 255, 255, 0.1); border-radius:14px; display:flex; flex-direction: column; overflow:hidden; } .table_header { background-color: var(--color-bg-elevated); padding:20px; color:var(--color-white); font-weight:bold; font-size:20px; } .table_content { display:flex; flex-direction: column; overflow:hidden; } .table_headers { font-weight:bold; font-size:18px; border-bottom:1px solid rgba(255, 255, 255, 0.1); } .table_row { font-size:16px; display:flex; justify-content: space-between; align-items: center; overflow:hidden; } .table_column { display:flex; padding:20px; /* Horizontal scroll for long text (white-space:nowrap keeps it on one line). Leave vertical overflow at default (visible — content is single-line so nothing overflows vertically) and scope overscroll-behavior to the X axis only. Previously this was `overflow-y:hidden; overscroll-behavior:none;` which captured desktop mouse-wheel events on the table column but refused to scroll or propagate them — users saw intermittent scroll on pages containing tables (Developer, etc.). */ overflow-x:scroll; overscroll-behavior-x: none; white-space: nowrap; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; } .tc_splitbutton { justify-content: space-between; align-items: center; gap:20px; } .table_buttons { display:flex; align-items: center; gap:10px; justify-content: flex-start; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; } .table_buttons button { color: var(--color-text-primary); font-size:16px; width:28px; height:28px; border-radius: 10px; background-color: var(--color-bg-elevated); cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0px; padding: 0px; border: 0px; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; } .fa_eye_slash_button { font-size:13px !important; } .table_content_hidden { display:none; } .table_open_content_button { border-radius:10px; cursor: pointer; font-size:14px; font-weight:bold; padding:0px 10px; height:28px; background-color: var(--color-accent); color:var(--color-bg); touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; display:flex; text-align: center; align-items: center; justify-content: center; } .table_row_content:nth-child(odd) { background-color: var(--color-row-alt); } .sv_trc1 { width:50%; } .sv_trc2 { width:50%; } .tc_margintop { margin-top:20px; } .table_norows { padding:20px; } .report_trc1 { width:20%; } .report_trc2 { width:30%; } .report_trc3 { width:50%; } .content_dialog_text { display:flex; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; } #content_dialog_wrap { position:absolute; top:0px; left:0px; width:100%; height:100%; display:none; z-index:999; } #cd_popup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:20px; width:80%; height:auto; max-height:80%; overflow-x:hidden; overflow-y:auto; overscroll-behavior: none; background-color:var(--color-white); border: 1px solid rgba(255, 255, 255, 0.08); color:var(--color-black); border-radius:20px; display:none; align-items: center; justify-content: center; text-align: center; flex-direction: column; z-index:9999; } .chats_list_none { display:none; } .hli_cont { display:flex; justify-content: center; align-items: center; text-align: center; } .hive_logo_img { width:70%; max-width:300px; } .settings_item_last { margin-bottom:0px; } /* ============================================================================ * PWA Install — modal, banner, settings entry, multi-platform tutorials * Controller: /assets/js/pwa_install.js * Modal HTML : index.php (#vocyl_install_wrap) * Banner : login.php / register.php (.vocyl-install-banner) * Settings : settings.php (.vocyl-install-card) * ========================================================================== */ /* Cold-start FOUC kill-switch. The `vocyl-standalone` class is set by the * synchronous head script in index.php BEFORE body parse, so installed-PWA * users never see install entry points flash in before pwa_install.js (defer) * runs. The adjacent-sibling rule kills the 28px gap above Profile while the * section is still in the DOM (display:none-d) — pwa_install.js then removes * the section outright once it boots. */ html.vocyl-standalone .vocyl-install-banner, html.vocyl-standalone .vocyl-install-trigger, html.vocyl-standalone .vocyl-install-section { display: none !important; } html.vocyl-standalone .vocyl-install-section + .moo-settings__section { margin-top: 0 !important; } /* ----- Modal overlay + box ----------------------------------------------- */ #vocyl_install_wrap { position: fixed; inset: 0; z-index: 100050; opacity: 0; pointer-events: none; transition: opacity 0.22s ease-out; } #vocyl_install_wrap.is-open { opacity: 1; pointer-events: auto; } #vocyl_install_wrap .vi-overlay { position: absolute; inset: 0; background: rgba(6, 13, 16, 0.78); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); } #vocyl_install_modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.96); display: flex; flex-direction: column; width: min(520px, calc(100vw - 32px)); /* Cascade: vh first as fallback, dvh second so modern browsers use the * dynamic viewport unit (handles iOS Safari URL-bar collapse properly). * Subtracts safe-area insets so the modal never lands under the notch * or home indicator on notched iPhones. */ max-height: calc(100vh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); background: radial-gradient(120% 60% at 50% -10%, rgba(0, 229, 160, 0.08), transparent 60%), radial-gradient(120% 60% at 0% 110%, rgba(56, 189, 248, 0.06), transparent 60%), rgba(20, 30, 38, 0.96); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; color: var(--color-text-primary); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 229, 160, 0.04) inset; transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); } #vocyl_install_wrap.is-open #vocyl_install_modal { transform: translate(-50%, -50%) scale(1); } /* ----- Close button (rounded square — matches #moo_img_close design language) ----- */ .vi-modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); border-radius: 12px; color: rgba(255, 255, 255, 0.55); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; z-index: 2; padding: 0; transition: background 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out; } .vi-modal__close:hover { background: rgba(244, 63, 94, 0.12); color: var(--color-danger); border-color: rgba(244, 63, 94, 0.3); } /* ----- Header ------------------------------------------------------------ */ .vi-modal__head { padding: 32px 28px 14px; text-align: center; } .vi-modal__logo { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(0, 229, 160, 0.25), 0 0 0 1px rgba(0, 229, 160, 0.2) inset; position: relative; } .vi-modal__logo::before { content: ""; position: absolute; inset: -10px; border-radius: 22px; background: radial-gradient(circle, rgba(0, 229, 160, 0.35), transparent 65%); z-index: -1; filter: blur(6px); opacity: 0.6; } .vi-modal__logo-glyph { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 28px; color: var(--color-bg); letter-spacing: -0.02em; } .vi-modal__title { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; } .vi-modal__sub { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); line-height: 1.5; } /* ----- Benefits row ------------------------------------------------------- * Three benefits in a single row on desktop / tablet. Grid auto-fits each * benefit at min 130px, falling back to 2 + 1 then 1 + 1 + 1 stacks on * narrow viewports. Vertical-stack layout per card lets long labels wrap * cleanly without horizontal squashing. */ .vi-modal__benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 28px 14px; } .vi-benefit { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, 0.78); line-height: 1.3; } .vi-benefit i { color: var(--color-accent); font-size: 16px; } /* ----- Tabs -------------------------------------------------------------- * Section uses zero vertical padding; the surrounding sections provide * a uniform 14 px gap above and below. */ .vi-modal__tabs { display: flex; gap: 6px; padding: 0 28px; } .vi-tab { flex: 1; /* min-width: 0 lets flex shrink the tab below content width so long * dynamic labels (e.g., "Desktop (Chrome / Edge)" picked from the * grid) can ellipsis-truncate instead of overflowing the tab strip. */ min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; color: rgba(255, 255, 255, 0.55); font-size: 13px; font-weight: 600; cursor: pointer; /* `transition: all` is forbidden by the design language (see CLAUDE.md); * specific properties only — colour-related so the active state animates * without flashing on icon-class swap. */ transition: background 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out; font-family: 'Montserrat', sans-serif; } .vi-tab:hover { background: rgba(255, 255, 255, 0.04); color: var(--color-text-primary); } .vi-tab.is-active { background: rgba(0, 229, 160, 0.08); border-color: rgba(0, 229, 160, 0.4); color: var(--color-accent); } .vi-tab__icon { font-size: 14px; flex: 0 0 auto; } .vi-tab__label { /* Truncate long auto-tab labels (e.g., "Desktop (Chrome / Edge)") on * narrow viewports rather than wrapping to a second line. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* ----- Body / panes ------------------------------------------------------ */ .vi-modal__body { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 14px 28px 14px; -webkit-overflow-scrolling: touch; } .vi-pane { display: none; animation: vi-pane-in 0.2s ease-out; } .vi-pane.is-active { display: block; } @keyframes vi-pane-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ----- Steps list -------------------------------------------------------- */ .vi-steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .vi-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.85); } .vi-steps li strong { color: var(--color-text-primary); font-weight: 700; } /* Step number: rounded square (7px) so it visually rhymes with the * other rounded-square chips throughout the modal instead of looking * like an isolated circle floating against a square card. */ .vi-steps__num { flex: 0 0 24px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-bg); border-radius: 7px; font-size: 12px; font-weight: 800; margin-top: 1px; letter-spacing: -0.02em; } .vi-steps__alt { margin-top: 6px; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); font-style: italic; } .vi-inline-icon { display: inline-block; margin: 0 2px; color: var(--color-accent); font-size: 11px; vertical-align: 1px; } /* ----- Notes ------------------------------------------------------------- */ .vi-note { margin-top: 10px; padding: 10px 12px; background: rgba(56, 189, 248, 0.06); border: 1px solid rgba(56, 189, 248, 0.2); border-radius: 10px; font-size: 12px; color: rgba(255, 255, 255, 0.7); line-height: 1.55; } .vi-note + .vi-note { margin-top: 8px; } .vi-note a { color: var(--color-accent-sky); text-decoration: underline; } /* ----- Notice card (iOS-other-browser fallback) -------------------------- * Single source of vertical spacing: gap on the flex column. Children * use no top/bottom margins so spacing rhythm stays predictable. */ .vi-notice { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 18px 24px; gap: 10px; } .vi-notice__icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.3); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--color-accent-sky); } .vi-notice__title { font-size: 18px; font-weight: 700; color: var(--color-text-primary); margin: 0; } .vi-notice__text { font-size: 13.5px; color: rgba(255, 255, 255, 0.7); line-height: 1.55; max-width: 360px; margin: 0; } .vi-notice .vi-btn { flex: 0 0 auto; align-self: stretch; margin-top: 4px; } .vi-notice__hint { font-size: 12px; color: rgba(255, 255, 255, 0.45); margin: 0; } /* ----- Promptcard (Android with native prompt; misc) --------------------- * When a promptcard sits inside a .vi-stage we drop the outer margin * so the card stays flex-centered cleanly. When standalone (e.g. inside * tplDesktopChromium) the margin-top still separates it from the stage * above. */ .vi-promptcard { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 18px; gap: 8px; margin-top: 14px; background: rgba(0, 229, 160, 0.05); border: 1px solid rgba(0, 229, 160, 0.2); border-radius: 14px; } .vi-stage > .vi-promptcard, .vi-stage .vi-promptcard { margin-top: 0; } .vi-promptcard__icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(0, 229, 160, 0.1); border: 1px solid rgba(0, 229, 160, 0.3); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--color-accent); } .vi-promptcard__title { font-size: 16px; font-weight: 700; margin: 0; } .vi-promptcard__text { font-size: 13px; color: rgba(255, 255, 255, 0.7); line-height: 1.55; max-width: 360px; margin: 0; } /* ----- Stage (illustration container) ------------------------------------ * No padding — body padding + steps margin provide the breathing room. * min-height keeps promptcard scenes from collapsing too tight. */ .vi-stage { display: flex; align-items: center; justify-content: center; min-height: 220px; } /* ----- Faux device frames (iPhone / iPad / Android) ---------------------- */ .vi-device { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%), linear-gradient(180deg, #0a1014, #06090c); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 28px; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 4px 0 rgba(255, 255, 255, 0.04) inset; overflow: hidden; } .vi-device--iphone { width: 180px; height: 320px; } .vi-device--ipad { width: 280px; height: 230px; border-radius: 22px; } .vi-device--android { width: 180px; height: 320px; border-radius: 22px; } .vi-device__notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 60px; height: 16px; background: #000; border-radius: 12px; z-index: 5; } .vi-device--ipad .vi-device__notch, .vi-device--android .vi-device__notch { display: none; } .vi-device__screen { position: absolute; inset: 6px; border-radius: 22px; background: var(--color-bg); overflow: hidden; } .vi-device--ipad .vi-device__screen, .vi-device--android .vi-device__screen { border-radius: 16px; } /* Faux app content inside the device. inset:0 makes it cover the whole * screen; the toolbar overlays the top (iPad) or bottom (iPhone) edge. * Top-padding clears the top-mounted toolbar on iPad scenes so the * brand row isn't hidden behind it. */ .vi-fauxapp { position: absolute; inset: 0; padding: 28px 14px 14px; display: flex; flex-direction: column; gap: 10px; } .vi-device[data-share-pos="top"] .vi-fauxapp { padding-top: 48px; /* Clears the 38 px iPad-Safari top toolbar. */ } .vi-device--android .vi-fauxapp { padding-top: 42px; /* Clears the 32 px Android-Chrome fauxbar at top. */ } .vi-fauxapp__brand { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .vi-fauxapp__logo { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-bg); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; } .vi-fauxapp__name { font-size: 13px; font-weight: 700; color: var(--color-text-primary); } .vi-fauxapp__line { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); } .vi-fauxapp__line--1 { width: 75%; } .vi-fauxapp__line--2 { width: 60%; } .vi-fauxapp__line--3 { width: 80%; } /* Faux Safari toolbar (bottom on iPhone, top on iPad) */ .vi-toolbar { position: absolute; left: 0; right: 0; height: 38px; background: linear-gradient(180deg, rgba(40, 44, 52, 0.96), rgba(28, 32, 38, 0.96)); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: space-around; padding: 0 6px; z-index: 4; border-top: 1px solid rgba(255, 255, 255, 0.08); } .vi-toolbar--bottom { bottom: 0; } .vi-toolbar--top { top: 0; border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .vi-toolbar__btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.55); font-size: 13px; } .vi-toolbar__btn--share.is-target { color: var(--color-accent); position: relative; z-index: 6; } /* Pulsing aurora ring around the share target */ .vi-toolbar__pulse { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 229, 160, 0.35), transparent 60%); pointer-events: none; animation: vi-pulse 2.4s ease-out infinite; } .vi-toolbar--top .vi-toolbar__pulse { bottom: auto; top: 6px; } @keyframes vi-pulse { 0% { opacity: 0; transform: translateX(-50%) scale(0.6); } 35% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(1.6); } } /* Animated tap indicator over the share button */ .vi-toolbar__tap { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 12px rgba(255, 255, 255, 0.7), 0 0 0 4px rgba(255, 255, 255, 0.15); pointer-events: none; z-index: 7; left: 50%; bottom: 11px; transform: translateX(-50%) scale(0); animation: vi-tap 4s ease-in-out infinite; } .vi-toolbar--top .vi-toolbar__tap { bottom: auto; top: 11px; } @keyframes vi-tap { 0%, 18%, 100% { opacity: 0; transform: translateX(-50%) scale(0); } 22% { opacity: 1; transform: translateX(-50%) scale(1.1); } 30% { opacity: 0.6; transform: translateX(-50%) scale(0.85); } 45% { opacity: 0; transform: translateX(-50%) scale(0); } } /* Slide-up share sheet (iOS Safari only) */ .vi-sheet { position: absolute; left: 6px; right: 6px; bottom: -100%; background: rgba(40, 44, 52, 0.98); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px 16px 0 0; padding: 8px; z-index: 8; animation: vi-sheet-cycle 4s ease-in-out infinite; animation-delay: 1.6s; } @keyframes vi-sheet-cycle { 0%, 30% { bottom: -100%; opacity: 0; } 35%, 70% { bottom: 38px; opacity: 1; } 75%, 100% { bottom: -100%; opacity: 0; } } .vi-device[data-share-pos="top"] .vi-sheet { /* iPad: sheet slides down from top */ top: -100%; bottom: auto; border-radius: 0 0 16px 16px; animation-name: vi-sheet-cycle-top; } @keyframes vi-sheet-cycle-top { 0%, 30% { top: -100%; opacity: 0; } 35%, 70% { top: 38px; opacity: 1; } 75%, 100% { top: -100%; opacity: 0; } } .vi-sheet__handle { width: 32px; height: 4px; margin: 4px auto 8px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; } .vi-sheet__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 11px; color: rgba(255, 255, 255, 0.85); } .vi-sheet__row i { color: rgba(255, 255, 255, 0.5); font-size: 12px; width: 14px; } .vi-sheet__row--target { background: rgba(0, 229, 160, 0.12); color: var(--color-accent); font-weight: 600; position: relative; } .vi-sheet__row--target i { color: var(--color-accent); } .vi-sheet__row--target::after { content: ""; position: absolute; inset: 0; border-radius: 10px; border: 1px solid rgba(0, 229, 160, 0.4); animation: vi-pulse-border 1.6s ease-out infinite; pointer-events: none; } @keyframes vi-pulse-border { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 160, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(0, 229, 160, 0); } } /* Faux address bar (Android Chrome) */ .vi-fauxbar { position: absolute; top: 0; left: 0; right: 0; height: 32px; background: rgba(40, 44, 52, 0.96); display: flex; align-items: center; padding: 0 10px; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); z-index: 4; } .vi-fauxbar__url { flex: 1; font-size: 11px; color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.06); padding: 4px 10px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vi-fauxbar__menu { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.6); font-size: 12px; position: relative; z-index: 5; } .vi-fauxbar__menu.is-target { color: var(--color-accent); } .vi-fauxbar__pulse { position: absolute; top: 4px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 229, 160, 0.35), transparent 60%); pointer-events: none; animation: vi-pulse-still 2.4s ease-out infinite; } @keyframes vi-pulse-still { 0% { opacity: 0; transform: scale(0.6); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } } /* Android dropdown menu */ .vi-menu { position: absolute; top: 32px; right: 8px; background: rgba(40, 44, 52, 0.98); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 6px; min-width: 130px; z-index: 6; opacity: 0; transform: translateY(-6px); animation: vi-menu-cycle 4s ease-in-out infinite; animation-delay: 1.4s; } @keyframes vi-menu-cycle { 0%, 30% { opacity: 0; transform: translateY(-6px); } 35%, 75% { opacity: 1; transform: translateY(0); } 80%, 100% { opacity: 0; transform: translateY(-6px); } } .vi-menu__row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 11px; color: rgba(255, 255, 255, 0.75); } .vi-menu__row i { color: rgba(255, 255, 255, 0.4); font-size: 11px; width: 12px; } .vi-menu__row--target { background: rgba(0, 229, 160, 0.12); color: var(--color-accent); font-weight: 600; } .vi-menu__row--target i { color: var(--color-accent); } /* ----- Faux desktop browser window (Mac / Windows) ---------------------- */ .vi-window { width: min(360px, 100%); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%), linear-gradient(180deg, #0a1014, #06090c); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5); } .vi-window__chrome { height: 36px; background: rgba(40, 44, 52, 0.98); display: flex; align-items: center; gap: 10px; padding: 0 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); position: relative; } .vi-window__dots { display: flex; gap: 6px; } .vi-window__dots span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); } .vi-window__dots span:nth-child(1) { background: #ff5f57; } .vi-window__dots span:nth-child(2) { background: #febc2e; } .vi-window__dots span:nth-child(3) { background: #28c840; } .vi-window__url { flex: 1; font-size: 11px; color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); padding: 4px 12px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; position: relative; } .vi-window__share, .vi-window__installicon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: -4px; font-size: 11px; color: rgba(255, 255, 255, 0.55); position: relative; z-index: 4; } .vi-window__share.is-target, .vi-window__installicon.is-target { color: var(--color-accent); } /* Pulse is positioned absolutely inside .vi-window__url. The share / * install icons sit at the right end of the URL bar with `margin-right: * -4px`, so their centre is ~19 px from the URL bar's right edge and * ~15 px down from its top. Pulse 28×28 ÷ 2 = 14 → `right: 5; top: 1` * lands the pulse centre exactly on the icon centre. Same for both * mac and desktop window variants. */ .vi-window__pulse { position: absolute; right: 5px; top: 1px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 229, 160, 0.35), transparent 60%); pointer-events: none; animation: vi-pulse-still 2.4s ease-out infinite; z-index: 3; } .vi-window__body { padding: 24px 18px; min-height: 120px; display: flex; flex-direction: column; gap: 10px; } /* ----- "Other devices" grid --------------------------------------------- */ .vi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 6px 0 4px; } .vi-grid__card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; color: var(--color-text-primary); cursor: pointer; transition: background 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out, transform 0.15s ease-out; font-family: 'Montserrat', sans-serif; text-align: center; min-width: 0; } .vi-grid__card:hover { background: rgba(0, 229, 160, 0.06); border-color: rgba(0, 229, 160, 0.3); transform: translateY(-1px); } /* Single spacing source — flex `gap` on the card. No per-child margins so * icon-to-title and title-to-sub spacing are uniform. */ .vi-grid__card > i { font-size: 18px; color: var(--color-accent); } .vi-grid__title { font-size: 13px; font-weight: 700; line-height: 1.2; } .vi-grid__sub { font-size: 10.5px; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.01em; line-height: 1.3; } /* ----- Footer ------------------------------------------------------------ */ .vi-modal__foot { display: flex; gap: 10px; padding: 14px 28px 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.22); } .vi-btn { flex: 1; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 700; font-family: 'Montserrat', sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out, transform 0.15s ease-out; border: 1px solid transparent; } /* `display: inline-flex` above has the same specificity as the UA's * `[hidden] { display: none }` and (being author CSS) wins the cascade — * which means `