/* METIS AURA NATIVE APP (MANA) v1.0 "The Gold Standard for Mobile Interaction" Specifically designed for Capacitor & WebViews. */ :root { /* @category BRAND - Colori Identitari */ --brand-navy: #0B141B; --brand-gold: #D9A13E; --brand-gradient-start: #142533; --brand-gradient-end: #050C12; --gold-bright: #F5C77D; --gold-deep: #B8862D; /* @category GLOBAL - Layout e Tipografia */ --ui-text-main: #FFFFFF; --ui-text-muted: #8FA1AC; --ui-corner-radius: 20px; --ui-header-height: 52px; --ui-app-header-height: 26px; --ui-header-gap: 8px; --ui-nav-height: 65px; /* Sottile e professionale */ --ui-main-padding: 15px 12px; --ui-font-size-base: 14px; --ui-font-size-title: 24px; --ui-glass-blur: 20px; /* @category HOME - Dashboard Bento */ --home-stats-gap: 15px; --home-bento-gap: 12px; --home-tile-padding: 15px 18px; --home-welcome-size: 1.15rem; /* @category SOCIAL - Feed & Posts */ --social-post-padding: 15px; --social-post-margin: 12px; --social-text-size: 14px; --social-header-gap: 12px; /* @category CHAT - Messaggistica */ --chat-bubble-radius: 18px; --chat-msg-sent: #D9A13E; --chat-msg-received: rgba(255, 255, 255, 0.05); --chat-controls-height: 70px; /* @category SEARCH - Motore di Ricerca */ --search-bg: #0b0c10; --search-iframe-scale: 1; --search-iframe-y-offset: 0px; --search-iframe-width: 100%; --search-iframe-height: 100%; --search-padding-top: 10px; --search-padding-bottom: 70px; --search-opacity: 1; /* UTILS & FX */ --glass-border: 1px solid rgba(217, 161, 62, 0.15); --glass-border-light: 1px solid rgba(255, 255, 255, 0.05); --shadow-premium: 0 10px 25px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 15px rgba(217, 161, 62, 0.12); /* DERIVED & COMPATIBILITY (GHOST VARS) */ --gold-dim: rgba(217, 161, 62, 0.6); --gold-glass: rgba(217, 161, 62, 0.15); --navy-glass: rgba(11, 20, 27, 0.65); --app-wallpaper-image: none; --app-wallpaper-overlay: linear-gradient(180deg, rgba(5, 10, 15, 0.62), rgba(5, 10, 15, 0.82)); --bg-gradient: radial-gradient(circle at top right, var(--brand-gradient-start), var(--brand-gradient-end)); --text-main: var(--ui-text-main); --text-dim: var(--ui-text-muted); --header-height: var(--ui-header-height); --nav-height: var(--ui-nav-height); --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --ui-header-height-actual: calc(var(--ui-app-header-height) + var(--safe-top)); --glass-blur: var(--ui-glass-blur); --aurora-aqua: #7EDFD1; --aurora-peach: #F0C6A1; --aurora-panel: rgba(19, 35, 45, 0.96); --aurora-panel-strong: rgba(11, 22, 31, 0.98); --aurora-border: rgba(126, 223, 209, 0.16); --aurora-shadow: 0 16px 34px rgba(4, 12, 18, 0.24); } /* --- BOTTOM NAV PREMIUM --- */ .bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; height: 70px; /* Altezza maggiorata per usabilità */ background: rgba(11, 20, 27, 0.85); backdrop-filter: blur(25px); border-top: 1px solid rgba(217, 161, 62, 0.15); display: flex; justify-content: space-around; align-items: center; padding-bottom: env(safe-area-inset-bottom); z-index: 10000; } .nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; border: none; color: var(--text-dim); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .nav-icon-box { font-size: 20px; opacity: 0.6; transition: all 0.2s ease; } .nav-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .nav-btn.active-tab { color: var(--brand-gold); } .nav-btn.active-tab .nav-icon-box { opacity: 1; transform: scale(1.2) translateY(-2px); text-shadow: 0 0 10px rgba(217, 161, 62, 0.5); } .nav-badge { position: absolute; top: -5px; right: -8px; background: #FF3B30; color: white; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 10px; border: 2px solid #0B141B; } /* --- UTILITIES --- */ .is-hidden { display: none !important; } .is-blocked { pointer-events: none; opacity: 0.6; } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; } body { width: 100%; height: 100%; height: 100dvh; background-color: var(--bg-dark, #050A0F); color: var(--ui-text-main); font-family: 'Outfit', -apple-system, sans-serif; overflow: hidden !important; overflow-x: hidden !important; user-select: none; background-image: var(--app-wallpaper-overlay), var(--app-wallpaper-image), radial-gradient(circle at top right, var(--brand-gradient-start), var(--brand-gradient-end)); background-size: cover, cover, cover; background-position: center center, center center, center center; background-repeat: no-repeat, no-repeat, no-repeat; transition: background-image 0.35s ease, background-color 0.35s ease; } body[data-background-mode="neutral"] { --app-wallpaper-image: none; } body[data-background-mode="color"] { --app-wallpaper-overlay: linear-gradient(180deg, rgba(5, 10, 15, 0.55), rgba(5, 10, 15, 0.76)); } body[data-background-mode="image"] { --app-wallpaper-overlay: linear-gradient(180deg, rgba(5, 10, 15, 0.48), rgba(5, 10, 15, 0.78)); } #app { display: none; /* JS will show it */ flex-direction: column; width: 100%; height: 100%; background: transparent; opacity: 0; transition: opacity 0.5s ease-out; } #app.flex { display: flex; opacity: 1; } /* --- APP SHELL --- */ .app-header { height: var(--ui-header-height-actual); padding-top: var(--safe-top); background: rgba(11, 20, 27, 0.95); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-bottom: 1px solid rgba(217, 161, 62, 0.2); display: flex; align-items: center; justify-content: space-between; padding-left: 20px; padding-right: 20px; z-index: 1000; position: fixed; /* Header fissa al millimetro */ top: 0; width: 100%; } .app-content { flex: 1; position: relative; overflow: hidden; width: 100%; margin-top: calc(var(--ui-header-height-actual) + var(--ui-header-gap)); /* Sposta tutto il contenuto sotto la header sicura */ } /* --- NAVIGATION SYSTEM --- */ .bottom-nav { height: calc(var(--nav-height) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: rgba(3, 7, 10, 0.95); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-top: var(--glass-border); display: flex; justify-content: space-around; align-items: center; z-index: 2000; position: fixed; bottom: 0; width: 100%; } .nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-dim); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); height: 100%; } .nav-emoji { font-size: 24px; margin-bottom: 4px; transition: 0.3s; opacity: 0.6; } .nav-label { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.5; } .active-tab { color: var(--brand-gold) !important; } .active-tab .nav-emoji { opacity: 1; transform: translateY(-4px) scale(1.2); filter: drop-shadow(0 0 10px var(--brand-gold)); } .active-tab .nav-label { opacity: 1; } /* --- VIEW MANAGER --- */ .view-main { position: absolute; inset: 0; top: 0; /* Incollato al bordo superiore dell'app-content (che ha già il margin-top) */ bottom: var(--ui-nav-height); width: 100%; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--ui-main-padding); } .view-main.active { display: block; animation: auraFadeIn 0.4s cubic-bezier(0.23, 1, 0.32, 1); } @keyframes auraFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } #view-search { position: absolute !important; inset: 0 !important; top: 0 !important; bottom: var(--ui-nav-height) !important; z-index: 1000; padding: 0 !important; /* Rimosso l'offset manuale di 85px che creava il gap viola */ background: var(--search-bg); opacity: var(--search-opacity); display: none; overflow: hidden; width: 100% !important; } #view-search.active { display: block !important; animation: auraFadeIn 0.3s ease-out; } #search-view-iframe { width: var(--search-iframe-width); height: 100%; min-height: 100%; transform: scale(var(--search-iframe-scale)) translateY(var(--search-iframe-y-offset)); transform-origin: top center; border: none; display: block; position: relative; z-index: 1; } /* --- PREMIUM BENTO & DASHBOARD --- */ .dash-hero-welcome { display: flex; align-items: center; gap: 30px; padding: 45px 25px; /* Saturazione volume Hero Section */ min-height: 180px; background: linear-gradient(135deg, rgba(217, 161, 62, 0.12) 0%, rgba(11, 20, 27, 0.4) 100%); border-bottom: var(--glass-border); } .dashboard-avatar-trigger { width: 65px; height: 65px; border-radius: 18px; border: 1px solid var(--brand-gold); overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 16px rgba(0,0,0,0.6), 0 0 15px var(--gold-glass); position: relative; background: #000; } .profile-avatar-big { width: 110px !important; height: 110px !important; border-radius: 28px !important; box-shadow: 0 12px 28px rgba(0,0,0,0.8), 0 0 20px var(--gold-glass) !important; } .avatar-glow { position: absolute; inset: 0; box-shadow: inset 0 0 10px var(--brand-gold); pointer-events: none; opacity: 0.5; } .welcome-text h1 { font-size: 1.4rem; font-weight: 900; color: #fff; margin-bottom: 2px; letter-spacing: -0.5px; } .welcome-text p { color: var(--brand-gold); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; opacity: 0.9; } .dash-stats-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; /* Forzatura 2x2 orologiaio */ grid-template-rows: auto auto !important; gap: 15px !important; margin-bottom: 20px; min-height: 220px; } .stat-box { background: rgba(11, 20, 27, 0.4); border: var(--glass-border-light); box-shadow: var(--shadow-premium); padding: var(--home-tile-padding); min-height: 80px; display: flex; flex-direction: column; justify-content: center; gap: 5px; } .stat-unit { font-size: 10px; color: var(--text-dim); font-weight: 700; } .call-control.dash-tile { background: rgba(11, 20, 27, 0.6); border: 1px solid rgba(217, 161, 62, 0.15); border-radius: 22px; padding: 18px; position: relative; overflow: hidden; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: transform 0.2s ease, border-color 0.2s ease; } .dash-tile:active { transform: scale(0.98); border-color: var(--brand-gold); } .tile-premium { display: flex; align-items: center; gap: 15px; padding: 15px 20px; } .tile-icon-wrap { width: 44px; height: 44px; background: var(--gold-glass); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; border: 1px solid rgba(217, 161, 62, 0.1); } .tile-content { flex: 1; } .dash-peek { font-size: 13px; color: var(--text-dim); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .tile-arrow { color: var(--brand-gold); opacity: 0.5; font-size: 14px; } /* --- PROFILE PREMIUM EDITOR --- */ .profile-edit-scroller { padding-bottom: 120px; overflow-y: auto; } .profile-main-card { background: linear-gradient(160deg, var(--navy-glass) 0%, rgba(15, 29, 39, 0.4) 100%); border: var(--glass-border); padding: 28px; } .profile-header-flex { display: flex; gap: 20px; align-items: center; margin-bottom: 25px; } .avatar-edit-wrapper { position: relative; } .profile-avatar-active { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; } .avatar-edit-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.3s; backdrop-filter: blur(4px); } .avatar-edit-wrapper:active .avatar-edit-overlay, .avatar-edit-wrapper:hover .avatar-edit-overlay { opacity: 1; } .edit-icon { font-size: 20px; } .profile-id-info { flex: 1; } .premium-input-ghost { background: transparent; border: none; border-bottom: 1px solid var(--gold-dim); color: #fff; font-size: 1.4rem; font-weight: 900; width: 100%; padding: 5px 0; margin-bottom: 5px; outline: none; font-family: inherit; } .profile-jid-text { font-size: 11px; color: var(--brand-gold); font-weight: 700; letter-spacing: 0.5px; } .profile-field-group { margin-top: 20px; } .premium-input-full { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 16px; color: #fff; font-size: 14px; margin-top: 8px; outline: none; font-family: inherit; transition: 0.3s; } .premium-input-full:focus { border-color: var(--brand-gold); background: var(--gold-glass); } .profile-bento-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 25px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.05); } .bento-stat { display: flex; flex-direction: column; } .bento-stat strong { font-size: 1.2rem; font-weight: 900; } .bento-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .bento-box { padding: 24px; background: var(--navy-glass); } .premium-textarea { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 16px; color: #fff; font-family: inherit; font-size: 14px; min-height: 120px; resize: none; margin-top: 10px; outline: none; } .premium-select { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 15px; color: #fff; margin-top: 10px; outline: none; font-family: inherit; font-weight: 600; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23D9A13E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 18px; } .profile-footer-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; padding: 0 15px; } .action-save { background: var(--brand-gold); color: #000; box-shadow: 0 12px 24px rgba(217, 161, 62, 0.3); } .action-logout { background: rgba(239, 68, 68, 0.15); color: #fff; border: 1px solid rgba(239, 68, 68, 0.3); box-shadow: none; } /* --- ARCADE PREMIUM GALLERY --- */ .arcade-view { padding-bottom: 100px; } .arcade-card-premium { background: var(--navy-glass); border: var(--glass-border-light); border-radius: 24px; overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-premium); } .arcade-card-thumb { width: 100%; height: 160px; background: #000; position: relative; } .arcade-card-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; } .arcade-card-info { padding: 18px; } .arcade-title { font-size: 1.1rem; font-weight: 900; margin-bottom: 5px; color: #fff; } .arcade-meta { font-size: 11px; color: var(--brand-gold); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } /* --- UTILS --- */ ::-webkit-scrollbar { display: none; } /* --- NATIVE CHAT EXPERIENCE --- */ #view-chat.active { display: flex; flex-direction: row; padding: 0; overflow: hidden; } .contacts-sidebar { width: 100%; height: 100%; flex-shrink: 0; display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; } .chat-main { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; background: rgba(5, 10, 15, 0.45); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 50; display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-chat-open .contacts-sidebar { display: none !important; } .mobile-chat-open .chat-main { left: 0 !important; width: 100% !important; transform: none !important; display: flex !important; } body.mobile-chat-open .app-header { display: none !important; } body.mobile-chat-open .app-content { margin-top: 0 !important; } #view-chat.active { height: calc(100vh - 70px) !important; position: relative !important; display: flex !important; } body.mobile-chat-open #view-chat.active { height: calc(100dvh - var(--nav-height) - var(--safe-bottom)) !important; } #view-chat.active.mobile-chat-open .chat-main { display: flex !important; width: 100% !important; height: 100% !important; flex: 1 !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: var(--navy-deep) !important; z-index: 100 !important; } .contacts-header { padding: 20px 15px; display: flex; align-items: center; gap: 12px; } .contacts-tabs { display: flex; background: rgba(255,255,255,0.04); border-radius: 16px; padding: 5px; flex: 1; border: 1px solid rgba(255,255,255,0.06); } .contact-tab-btn { flex: 1; border: none; background: transparent; color: var(--text-dim); padding: 10px; border-radius: 12px; font-size: 20px; transition: 0.3s; } .post-content { color: var(--text-main); line-height: 1.5; margin: 15px 0; font-size: var(--social-text-size); } .contact-tab-btn.active { background: var(--brand-gold); color: #000; box-shadow: 0 4px 15px rgba(217, 161, 62, 0.4); } .contacts-search { padding: 0 15px 15px; } .contacts-search input { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 14px 20px; color: #fff; font-family: inherit; outline: none; transition: 0.3s; } .contacts-search input:focus { border-color: var(--brand-gold); background: var(--gold-glass); } .contacts-list { flex: 1; overflow-y: auto; padding: 0 15px; } .contact-item { display: flex; align-items: center; gap: 12px; padding: 10px 15px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 18px; margin-bottom: 8px; transition: 0.2s; } .dash-tile { /* Glassmorphism V2 */ background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 24px; padding: 20px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 10px 30px rgba(0,0,0,0.4); } .dash-tile:active { transform: scale(0.96); background: rgba(255, 255, 255, 0.06); box-shadow: 0 5px 15px rgba(0,0,0,0.6); } .dash-tile.tile-premium::after { content: ''; position: absolute; top: 0; left: -100%; width: 200%; height: 100%; background: linear-gradient(120deg, transparent, rgba(217, 161, 62, 0.05), transparent); animation: shine 6s infinite; pointer-events: none; } @keyframes shine { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } } .contact-item:active { transform: scale(0.97); background: var(--gold-glass); } .contact-avatar { width: 45px; height: 45px; border-radius: 14px; background: var(--gold-glass); display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--brand-gold); overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,0.25); } .contact-avatar img { width: 100%; height: 100%; object-fit: cover; } .contact-info { flex: 1; } .contact-name { font-weight: 800; font-size: 0.88rem; color: #fff; margin-bottom: 2px; } .contact-status { font-size: 0.7rem; color: var(--text-dim); } .app-status-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: rgba(234, 241, 243, 0.72); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.01em; } .app-status-pill .status-led { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); box-shadow: 0 0 0 rgba(255,255,255,0); } .app-status-pill.is-online { color: #DFFFF5; border-color: rgba(69, 212, 131, 0.2); background: rgba(69, 212, 131, 0.08); } .app-status-pill.is-online .status-led { background: #45D483; box-shadow: 0 0 12px rgba(69, 212, 131, 0.6); } .app-status-pill.is-connecting { color: #FFF2D8; border-color: rgba(223, 168, 91, 0.22); background: rgba(223, 168, 91, 0.08); } .app-status-pill.is-connecting .status-led { background: #DFA85B; box-shadow: 0 0 10px rgba(223, 168, 91, 0.45); } .app-status-pill.is-offline { color: rgba(234, 241, 243, 0.68); border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); } .app-status-pill.is-offline .status-led { background: rgba(255,255,255,0.35); } .mobile-theme-panel { display: flex; flex-direction: column; gap: 12px; } .mobile-theme-label { color: var(--brand-gold); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; } .mobile-theme-switcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .surface-theme-option { min-height: 52px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: #F5F7F8; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: 'Outfit', sans-serif; font-size: 0.82rem; font-weight: 800; } .surface-theme-option.active { border-color: rgba(223, 168, 91, 0.34); box-shadow: 0 12px 24px rgba(223, 168, 91, 0.14); } .theme-chip { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); flex-shrink: 0; } .theme-chip-dark { background: linear-gradient(135deg, #14232D, #0B161F); } .theme-chip-light { background: linear-gradient(135deg, #F4F1EA, #D9E8E8); border-color: rgba(34, 49, 58, 0.14); } .theme-chip-sage { background: linear-gradient(135deg, #d6e0d8, #bccfc4); border-color: rgba(60, 83, 74, 0.18); } .theme-chip-lagoon { background: linear-gradient(135deg, #d8e5e6, #bfd3d5); border-color: rgba(49, 79, 86, 0.18); } .theme-chip-sand { background: linear-gradient(135deg, #e7ddd5, #d8cbc0); border-color: rgba(91, 71, 61, 0.16); } .ringtone-stack { display: flex; flex-direction: column; gap: 10px; } .ringtone-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ringtone-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ringtone-copy strong { color: #F5F7F8; font-size: 0.75rem; } .ringtone-copy span { color: var(--text-dim); font-size: 0.72rem; line-height: 1.35; } .ringtone-select { width: 100%; min-height: 50px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: #F5F7F8; padding: 0 14px; font-family: 'Outfit', sans-serif; font-size: 0.75rem; outline: none; } .ringtone-select option { color: #22313A; background: #F4F2EC; } body[data-surface-theme="dark"] .ringtone-select, body[data-surface-theme="dark"] #edit-profile-name, body[data-surface-theme="dark"] #edit-profile-bio, body[data-surface-theme="dark"] #profile-headline { color: #F5F7F8; border-color: rgba(255,255,255,0.12); } .ringtone-preview-btn { min-width: 86px; min-height: 42px; padding: 0 14px; border-radius: 14px; flex-shrink: 0; } body[data-surface-theme="sage"], body[data-surface-theme="lagoon"], body[data-surface-theme="sage"] { --bg-gradient: radial-gradient(circle at top left, #d4dfd6 0%, #c2d0c4 34%, #b3c4b6 100%); --navy-deep: #c5d3c8; --navy-glass: rgba(197, 211, 200, 0.82); } body[data-surface-theme="lagoon"] { --bg-gradient: radial-gradient(circle at top left, #cde4e8 0%, #b8d2d9 34%, #a6c4cc 100%); --navy-deep: #c0d8dd; --navy-glass: rgba(188, 210, 216, 0.82); } body[data-surface-theme="sage"] #boot-loader, body[data-surface-theme="lagoon"] #boot-loader, body[data-surface-theme="sand"] #boot-loader { background: var(--bg-gradient); } body[data-surface-theme="sage"] .app-header, body[data-surface-theme="lagoon"] .app-header, body[data-surface-theme="sand"] .app-header { background: linear-gradient(180deg, rgba(252,252,250,0.74), rgba(237,240,234,0.9)); border-bottom-color: rgba(216, 179, 106, 0.26); } body[data-surface-theme="sand"] .app-header { background: linear-gradient(180deg, rgba(248,242,236,0.82), rgba(232,223,214,0.94)); } body[data-surface-theme="sage"] #branding-title, body[data-surface-theme="lagoon"] #branding-title, body[data-surface-theme="sand"] #branding-title { color: #B98B39 !important; } body[data-surface-theme="sage"] .view-main, body[data-surface-theme="sage"] .contacts-sidebar, body[data-surface-theme="sage"] .chat-main, body[data-surface-theme="sage"] .aura-dashboard, body[data-surface-theme="sage"] #view-social, body[data-surface-theme="sage"] #view-profile, body[data-surface-theme="lagoon"] .view-main, body[data-surface-theme="lagoon"] .contacts-sidebar, body[data-surface-theme="lagoon"] .chat-main, body[data-surface-theme="lagoon"] .aura-dashboard, body[data-surface-theme="lagoon"] #view-social, body[data-surface-theme="lagoon"] #view-profile, body[data-surface-theme="sand"] .view-main, body[data-surface-theme="sand"] .contacts-sidebar, body[data-surface-theme="sand"] .chat-main, body[data-surface-theme="sand"] .aura-dashboard, body[data-surface-theme="sand"] #view-social, body[data-surface-theme="sand"] #view-profile { background: radial-gradient(circle at 12% 4%, rgba(142, 216, 204, 0.14), transparent 22%), radial-gradient(circle at 88% 8%, rgba(240, 198, 161, 0.16), transparent 18%), var(--bg-gradient) !important; } body[data-surface-theme="sage"] .contacts-tabs, body[data-surface-theme="sage"] .contact-item, body[data-surface-theme="sage"] .chat-header, body[data-surface-theme="sage"] .chat-input-bar, body[data-surface-theme="sage"] .social-creator-box, body[data-surface-theme="sage"] .profile-card, body[data-surface-theme="sage"] .profile-editor-panel, body[data-surface-theme="sage"] .login-card, body[data-surface-theme="sage"] .dash-tile, body[data-surface-theme="sage"] .contacts-search input, body[data-surface-theme="sage"] .contact-filter-btn, body[data-surface-theme="sage"] .surface-theme-option, body[data-surface-theme="sage"] .ringtone-select, body[data-surface-theme="sage"] .premium-input, body[data-surface-theme="sage"] .premium-textarea, body[data-surface-theme="sage"] #edit-profile-name, body[data-surface-theme="sage"] #edit-profile-bio, body[data-surface-theme="sage"] #profile-headline, body[data-surface-theme="lagoon"] .contacts-tabs, body[data-surface-theme="lagoon"] .contact-item, body[data-surface-theme="lagoon"] .chat-header, body[data-surface-theme="lagoon"] .chat-input-bar, body[data-surface-theme="lagoon"] .social-creator-box, body[data-surface-theme="lagoon"] .profile-card, body[data-surface-theme="lagoon"] .profile-editor-panel, body[data-surface-theme="lagoon"] .login-card, body[data-surface-theme="lagoon"] .dash-tile, body[data-surface-theme="lagoon"] .contacts-search input, body[data-surface-theme="lagoon"] .contact-filter-btn, body[data-surface-theme="lagoon"] .surface-theme-option, body[data-surface-theme="lagoon"] .ringtone-select, body[data-surface-theme="lagoon"] .premium-input, body[data-surface-theme="lagoon"] .premium-textarea, body[data-surface-theme="lagoon"] #edit-profile-name, body[data-surface-theme="lagoon"] #edit-profile-bio, body[data-surface-theme="lagoon"] #profile-headline, body[data-surface-theme="sand"] .contacts-tabs, body[data-surface-theme="sand"] .contact-item, body[data-surface-theme="sand"] .chat-header, body[data-surface-theme="sand"] .chat-input-bar, body[data-surface-theme="sand"] .social-creator-box, body[data-surface-theme="sand"] .profile-card, body[data-surface-theme="sand"] .profile-editor-panel, body[data-surface-theme="sand"] .login-card, body[data-surface-theme="sand"] .dash-tile, body[data-surface-theme="sand"] .contacts-search input, body[data-surface-theme="sand"] .contact-filter-btn, body[data-surface-theme="sand"] .surface-theme-option, body[data-surface-theme="sand"] .ringtone-select, body[data-surface-theme="sand"] .premium-input, body[data-surface-theme="sand"] .premium-textarea, body[data-surface-theme="sand"] #edit-profile-name, body[data-surface-theme="sand"] #edit-profile-bio, body[data-surface-theme="sand"] #profile-headline { background: rgba(255,255,255,0.44) !important; color: var(--text-main) !important; border-color: rgba(86, 110, 118, 0.24) !important; box-shadow: 0 12px 24px rgba(84, 99, 104, 0.07), inset 0 1px 0 rgba(255,255,255,0.42); } body[data-surface-theme="sand"] .contacts-tabs, body[data-surface-theme="sand"] .contact-item, body[data-surface-theme="sand"] .chat-header, body[data-surface-theme="sand"] .chat-input-bar, body[data-surface-theme="sand"] .social-creator-box, body[data-surface-theme="sand"] .profile-card, body[data-surface-theme="sand"] .login-card, body[data-surface-theme="sand"] .dash-tile, body[data-surface-theme="sand"] .contacts-search input, body[data-surface-theme="sand"] .contact-filter-btn, body[data-surface-theme="sand"] .surface-theme-option, body[data-surface-theme="sand"] .ringtone-select, body[data-surface-theme="sand"] .premium-input, body[data-surface-theme="sand"] .premium-textarea, body[data-surface-theme="sand"] #edit-profile-name, body[data-surface-theme="sand"] #edit-profile-bio, body[data-surface-theme="sand"] #profile-headline { border-color: rgba(112, 94, 83, 0.22) !important; box-shadow: 0 12px 24px rgba(113, 96, 89, 0.08), inset 0 1px 0 rgba(255,255,255,0.36); } body[data-surface-theme="sage"] .contact-item.active, body[data-surface-theme="sage"] .contact-filter-btn.active, body[data-surface-theme="sage"] .surface-theme-option.active, body[data-surface-theme="sage"] .contact-tab-btn.active, body[data-surface-theme="sage"] .contacts-add-btn, body[data-surface-theme="sage"] .contact-cta, body[data-surface-theme="sage"] .login-btn, body[data-surface-theme="sage"] .send-btn, body[data-surface-theme="lagoon"] .contact-item.active, body[data-surface-theme="lagoon"] .contact-filter-btn.active, body[data-surface-theme="lagoon"] .surface-theme-option.active, body[data-surface-theme="lagoon"] .contact-tab-btn.active, body[data-surface-theme="lagoon"] .contacts-add-btn, body[data-surface-theme="lagoon"] .contact-cta, body[data-surface-theme="lagoon"] .login-btn, body[data-surface-theme="lagoon"] .send-btn, body[data-surface-theme="sand"] .contact-item.active, body[data-surface-theme="sand"] .contact-filter-btn.active, body[data-surface-theme="sand"] .surface-theme-option.active, body[data-surface-theme="sand"] .contact-tab-btn.active, body[data-surface-theme="sand"] .contacts-add-btn, body[data-surface-theme="sand"] .contact-cta, body[data-surface-theme="sand"] .login-btn, body[data-surface-theme="sand"] .send-btn { background: linear-gradient(135deg, #D8B36A, #EFCB98) !important; color: #2A2F31 !important; border-color: rgba(191, 147, 73, 0.34) !important; } body[data-surface-theme="sage"] .contact-tab-btn, body[data-surface-theme="sage"] .nav-btn, body[data-surface-theme="sage"] .contact-status, body[data-surface-theme="sage"] .game-counter, body[data-surface-theme="sage"] #app-status-indicator, body[data-surface-theme="sage"] .login-register, body[data-surface-theme="sage"] .sys-label, body[data-surface-theme="sage"] .dash-peek, body[data-surface-theme="sage"] .contact-filter-btn, body[data-surface-theme="sage"] .ringtone-copy span, body[data-surface-theme="lagoon"] .contact-tab-btn, body[data-surface-theme="lagoon"] .nav-btn, body[data-surface-theme="lagoon"] .contact-status, body[data-surface-theme="lagoon"] .game-counter, body[data-surface-theme="lagoon"] #app-status-indicator, body[data-surface-theme="lagoon"] .login-register, body[data-surface-theme="lagoon"] .sys-label, body[data-surface-theme="lagoon"] .dash-peek, body[data-surface-theme="lagoon"] .contact-filter-btn, body[data-surface-theme="lagoon"] .ringtone-copy span, body[data-surface-theme="sand"] .contact-tab-btn, body[data-surface-theme="sand"] .nav-btn, body[data-surface-theme="sand"] .contact-status, body[data-surface-theme="sand"] .game-counter, body[data-surface-theme="sand"] #app-status-indicator, body[data-surface-theme="sand"] .login-register, body[data-surface-theme="sand"] .sys-label, body[data-surface-theme="sand"] .dash-peek, body[data-surface-theme="sand"] .contact-filter-btn, body[data-surface-theme="sand"] .ringtone-copy span { color: var(--text-dim) !important; } body[data-surface-theme="sage"] .contact-name, body[data-surface-theme="sage"] .premium-text, body[data-surface-theme="sage"] .chat-header-info h1, body[data-surface-theme="sage"] .sys-value, body[data-surface-theme="sage"] .mobile-theme-label, body[data-surface-theme="sage"] .ringtone-copy strong, body[data-surface-theme="lagoon"] .contact-name, body[data-surface-theme="lagoon"] .premium-text, body[data-surface-theme="lagoon"] .chat-header-info h1, body[data-surface-theme="lagoon"] .sys-value, body[data-surface-theme="lagoon"] .mobile-theme-label, body[data-surface-theme="lagoon"] .ringtone-copy strong, body[data-surface-theme="sand"] .contact-name, body[data-surface-theme="sand"] .premium-text, body[data-surface-theme="sand"] .chat-header-info h1, body[data-surface-theme="sand"] .sys-value, body[data-surface-theme="sand"] .mobile-theme-label, body[data-surface-theme="sand"] .ringtone-copy strong { color: var(--text-main) !important; -webkit-text-fill-color: initial; } body[data-surface-theme="sage"] .bottom-nav, body[data-surface-theme="lagoon"] .bottom-nav, body[data-surface-theme="sand"] .bottom-nav { background: rgba(244, 246, 243, 0.86); border-top-color: rgba(216, 179, 106, 0.22); box-shadow: 0 -8px 24px rgba(92, 102, 106, 0.08); } body[data-surface-theme="sand"] .bottom-nav { background: rgba(242, 236, 229, 0.9); } body[data-surface-theme="sage"] .nav-btn.active-tab, body[data-surface-theme="sage"] .nav-btn.active-tab .nav-icon-box, body[data-surface-theme="sage"] .nav-btn.active-tab .nav-emoji, body[data-surface-theme="lagoon"] .nav-btn.active-tab, body[data-surface-theme="lagoon"] .nav-btn.active-tab .nav-icon-box, body[data-surface-theme="lagoon"] .nav-btn.active-tab .nav-emoji, body[data-surface-theme="sand"] .nav-btn.active-tab, body[data-surface-theme="sand"] .nav-btn.active-tab .nav-icon-box, body[data-surface-theme="sand"] .nav-btn.active-tab .nav-emoji { color: #B98B39 !important; text-shadow: 0 0 8px rgba(216, 179, 106, 0.12); } body[data-surface-theme="sage"] .contact-secondary, body[data-surface-theme="sage"] .contact-ghost, body[data-surface-theme="lagoon"] .contact-secondary, body[data-surface-theme="lagoon"] .contact-ghost, body[data-surface-theme="sand"] .contact-secondary, body[data-surface-theme="sand"] .contact-ghost { background: rgba(248, 250, 248, 0.7) !important; color: var(--text-main) !important; } body[data-surface-theme="sand"] .contact-secondary, body[data-surface-theme="sand"] .contact-ghost { background: rgba(249, 244, 240, 0.7) !important; } body[data-surface-theme="sage"] .app-status-pill, body[data-surface-theme="lagoon"] .app-status-pill, body[data-surface-theme="sand"] .app-status-pill { background: rgba(255,255,255,0.45); color: var(--text-dim); border-color: rgba(100, 121, 128, 0.18); } body[data-surface-theme="sand"] .app-status-pill { border-color: rgba(112, 94, 83, 0.18); } body[data-surface-theme="sage"] .contact-item, body[data-surface-theme="lagoon"] .contact-item, body[data-surface-theme="sand"] .contact-item { outline: 1px solid rgba(255,255,255,0.22); outline-offset: -1px; } body[data-surface-theme="sage"] .stat-box, body[data-surface-theme="lagoon"] .stat-box, body[data-surface-theme="sand"] .stat-box { background: var(--navy-glass) !important; border-color: rgba(86, 110, 118, 0.24) !important; } body[data-surface-theme="sage"] .call-control.dash-tile, body[data-surface-theme="lagoon"] .call-control.dash-tile, body[data-surface-theme="sand"] .call-control.dash-tile { background: var(--navy-glass) !important; border-color: rgba(216, 179, 106, 0.3) !important; } .app-header { background: radial-gradient(circle at 16% 50%, rgba(126, 223, 209, 0.08), transparent 26%), linear-gradient(180deg, rgba(12, 24, 32, 0.98), rgba(10, 19, 27, 0.95)); border-bottom: 1px solid rgba(223, 168, 91, 0.18); } #branding-title { color: #F0C06E !important; text-shadow: 0 0 14px rgba(223, 168, 91, 0.16); } .contacts-sidebar { background: radial-gradient(circle at 12% 0%, rgba(126, 223, 209, 0.14), transparent 28%), radial-gradient(circle at 86% 6%, rgba(240, 198, 161, 0.12), transparent 18%), rgba(5, 10, 15, 0.45); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); } .contacts-header { padding: 18px 14px 14px; align-items: center; } .contacts-tabs { background: linear-gradient(180deg, rgba(24, 39, 49, 0.98), rgba(16, 29, 38, 0.98)); border: 1px solid rgba(126, 223, 209, 0.12); border-radius: 22px; padding: 6px; gap: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .contact-tab-btn { position: relative; min-height: 58px; padding: 0 8px; border-radius: 17px; color: rgba(232, 238, 240, 0.72); background: rgba(255,255,255,0.02); font-size: 22px; } .contact-tab-btn.active { background: linear-gradient(135deg, #DFA85B, #F0C6A1); color: #09141B; box-shadow: 0 12px 24px rgba(223, 168, 91, 0.24); } .mini-tab-badge { position: absolute; top: 9px; right: 10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; background: #F56565; color: #fff; box-shadow: 0 4px 10px rgba(245, 101, 101, 0.32); } .contacts-add-btn { width: 54px; min-width: 54px; height: 54px; border: none; border-radius: 20px; background: linear-gradient(135deg, #DFA85B, #F0C6A1); color: #09141B; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1; box-shadow: 0 14px 26px rgba(223, 168, 91, 0.24); } .contacts-search { padding: 0 14px 14px; } .contacts-search input { min-height: 56px; border-radius: 20px; padding: 6px 18px; background: radial-gradient(circle at 90% 20%, rgba(240, 198, 161, 0.12), transparent 24%), linear-gradient(180deg, rgba(28, 43, 53, 0.98), rgba(20, 32, 41, 0.98)); border: 1px solid rgba(126, 223, 209, 0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .contacts-search input:focus { border-color: rgba(126, 223, 209, 0.3); background: radial-gradient(circle at 90% 20%, rgba(240, 198, 161, 0.14), transparent 24%), linear-gradient(180deg, rgba(32, 50, 61, 0.99), rgba(19, 33, 43, 0.99)); } .contacts-subfilters { display: flex; gap: 8px; overflow-x: auto; padding: 0 14px 14px; scrollbar-width: none; } .contacts-subfilters::-webkit-scrollbar { display: none; } .contact-filter-btn { min-height: 40px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(126, 223, 209, 0.12); background: linear-gradient(180deg, rgba(21, 36, 45, 0.96), rgba(13, 24, 32, 0.96)); color: rgba(240, 245, 246, 0.88); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em; text-transform: none; white-space: nowrap; } .contact-filter-btn.active { background: linear-gradient(135deg, rgba(223, 168, 91, 0.32), rgba(240, 198, 161, 0.2)); color: #FFF4DA; border-color: rgba(240, 198, 161, 0.34); box-shadow: 0 10px 20px rgba(223, 168, 91, 0.18); } .roster-section { margin-bottom: 18px; } .roster-section-title { padding: 2px 6px 10px; color: rgba(233, 199, 122, 0.92); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .contacts-list { padding: 0 14px 24px; } .contact-item { position: relative; gap: 14px; align-items: flex-start; padding: 14px; margin-bottom: 12px; border-radius: 24px; background: radial-gradient(circle at 85% 18%, rgba(240, 198, 161, 0.08), transparent 24%), linear-gradient(180deg, rgba(24, 40, 50, 0.98), rgba(16, 28, 37, 0.98)); border: 1px solid rgba(126, 223, 209, 0.12); box-shadow: var(--aurora-shadow); overflow: hidden; } .contact-item.active { background: radial-gradient(circle at 14% 48%, rgba(126, 223, 209, 0.18), transparent 28%), linear-gradient(135deg, rgba(223, 168, 91, 0.2), rgba(20, 37, 47, 0.98)); border-color: rgba(245, 199, 125, 0.48); box-shadow: 0 18px 38px rgba(9, 12, 28, 0.42), 0 0 0 1px rgba(245, 199, 125, 0.28) inset, 0 0 22px rgba(245, 199, 125, 0.22); transform: translateX(4px); } .contact-item.active::before { content: ''; position: absolute; inset: 10px auto 10px 8px; width: 4px; border-radius: 999px; background: linear-gradient(180deg, #f7d58e 0%, #8ce8db 100%); box-shadow: 0 0 18px rgba(247, 213, 142, 0.55); } .contact-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .contact-avatar { width: 56px; height: 56px; min-width: 56px; border-radius: 18px; background: linear-gradient(135deg, #7EDFD1 0%, #A8E8D5 24%, #E4BF70 100%); color: #09141B; font-size: 1.45rem; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 12px 24px rgba(126, 223, 209, 0.14), 0 10px 20px rgba(223, 168, 91, 0.14); } .contact-info { flex: 1; min-width: 0; cursor: pointer; } .contact-name { display: flex; align-items: center; gap: 8px; font-size: 1rem; line-height: 1.12; margin-bottom: 4px; } .relationship-icon { width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; flex-shrink: 0; } .relationship-icon.friend { background: rgba(110, 215, 200, 0.2); color: #D7FFF8; } .relationship-icon.pending { background: rgba(223, 168, 91, 0.2); color: #FFF2D4; } .relationship-icon.free { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.88); } .contact-status { font-size: 0.78rem; line-height: 1.4; color: rgba(220, 230, 234, 0.74); } .contact-actions { width: calc(100% - 70px); margin-left: 70px; padding-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; position: relative; z-index: 1; } .roster-card .contact-actions { grid-template-columns: minmax(0, 1fr) 42px; } .profile-btn, .add-friend-btn, .delete-contact-btn { min-height: 42px; border: 1px solid transparent; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; font-family: 'Outfit', sans-serif; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.01em; } .btn-icon { line-height: 1; font-size: 0.92rem; } .btn-label { line-height: 1; } .contact-secondary { color: #EFF7F8; background: linear-gradient(180deg, rgba(30, 48, 58, 0.98), rgba(19, 33, 42, 0.98)); border-color: rgba(126, 223, 209, 0.14); } .contact-cta { color: #09141B; background: linear-gradient(135deg, #DFA85B, #F0C6A1); border-color: rgba(240, 198, 161, 0.34); box-shadow: 0 12px 22px rgba(223, 168, 91, 0.2); } .pending-reminder-btn { color: #FFF7E8; background: linear-gradient(135deg, rgba(223, 168, 91, 0.24), rgba(240, 198, 161, 0.14)); border-color: rgba(223, 168, 91, 0.26); } .contact-ghost { min-width: 42px; padding: 0; color: rgba(233, 243, 245, 0.72); background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } .unread-badge { position: absolute; top: 12px; right: 12px; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #F56565; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 900; box-shadow: 0 8px 18px rgba(245, 101, 101, 0.28); } .status-dot { position: absolute; top: 18px; right: 14px; width: 10px; height: 10px; border-radius: 50%; } .status-online { background: #45D483; box-shadow: 0 0 12px rgba(69, 212, 131, 0.6); } .status-offline { background: rgba(255,255,255,0.22); } /* --- CHAT AREA --- */ .chat-header { height: var(--header-height); min-height: var(--header-height); flex-shrink: 0; background: var(--navy-glass); backdrop-filter: var(--glass-blur); border-bottom: var(--glass-border); display: flex; align-items: center; padding: 0 18px; gap: 15px; } .chat-mobile-back { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; border: none; cursor: pointer; } .chat-header-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .chat-header-info h1 { font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .chat-header-actions button { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,0.06); border: none; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; } body.mobile-chat-open #main-chat-header, body.mobile-chat-open #btn-mobile-roster-back, body.mobile-chat-open .chat-header-actions, body.mobile-chat-open .chat-input-area { display: flex !important; visibility: visible !important; opacity: 1 !important; } body.mobile-chat-open .chat-input-area { display: block !important; } .messages-area { flex: 1; padding: 15px; overflow-y: auto; overflow-x: hidden !important; display: flex; flex-direction: column; gap: 12px; width: 100% !important; box-sizing: border-box !important; } /* Messaggi chat */ @keyframes msgPopIn { 0% { opacity: 0; transform: translateY(15px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes msgDeleteOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.8); } } .msg-row { animation: msgPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .msg-row.deleting { animation: msgDeleteOut 0.25s ease-in forwards; } .msg-row { display: flex; width: 100%; animation: msgPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .msg-row.sent { justify-content: flex-end; } .msg-row.received { justify-content: flex-start; } .msg-bubble { max-width: 80%; padding: 14px 18px; border-radius: 22px; font-size: 0.95rem; line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; background-attachment: fixed; } .msg-bubble.sent { background: var(--brand-gold); color: #000; align-self: flex-end; margin-left: auto; border-bottom-right-radius: 4px; border-bottom-left-radius: 22px; font-weight: 500; background-attachment: fixed; } .msg-bubble.received { background: rgba(255,255,255,0.08); color: #fff; align-self: flex-start; margin-right: auto; border-bottom-left-radius: 4px; border-bottom-right-radius: 22px; border: 1px solid rgba(255,255,255,0.1); background-attachment: fixed; } #my-jid-display { display: block; line-height: 1.15; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-header-info h1, #current-chat-name { line-height: 1.1; margin: 0; } .chat-header, #main-chat-header { background: linear-gradient(135deg, rgba(80, 30, 118, 0.32), rgba(17, 28, 40, 0.84)), rgba(10, 16, 24, 0.78); } .chat-header-actions button.is-active { background: linear-gradient(135deg, rgba(245, 199, 125, 0.22), rgba(140, 232, 219, 0.14)) !important; color: #f7d58e !important; box-shadow: 0 0 0 1px rgba(245, 199, 125, 0.18) inset, 0 10px 22px rgba(4, 10, 28, 0.28); } #btn-toggle-focus-chat { min-width: 42px !important; height: 42px !important; padding: 0 12px !important; border-radius: 16px !important; border: 1px solid rgba(198, 146, 255, 0.22) !important; background: linear-gradient(135deg, rgba(121, 73, 188, 0.38), rgba(54, 30, 86, 0.92)) !important; color: #f6dcff !important; font-size: 18px !important; font-weight: 900 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 14px 30px rgba(47, 19, 88, 0.34), 0 0 0 1px rgba(255,255,255,0.07) inset !important; } #btn-toggle-focus-chat:hover { transform: translateY(-1px) !important; filter: brightness(1.08) saturate(1.08) !important; } .chat-messages { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; } .msg-bubble { position: relative; box-shadow: 0 18px 38px rgba(2, 6, 23, 0.28); border-radius: 20px; background-attachment: fixed; } .msg-bubble.sent { background: linear-gradient(135deg, var(--gold), #F2C94C, #B8860B, #E6A817); color: #1a1a1a; border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 20px 20px 0 20px; background-attachment: fixed; } .msg-bubble.received { background: linear-gradient(180deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8)); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.05); color: #fff; border-radius: 20px 20px 20px 0; background-attachment: fixed; } .msg-bubble.received::after { left: 10px; background: rgba(15, 22, 33, 0.98); } .msg-from { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .msg-bubble.sent .msg-from { color: rgba(255,255,255,0.82); } .msg-bubble.received .msg-from { color: #8ce8db; } .msg-content { position: relative; z-index: 1; } .msg-text { white-space: pre-wrap; } .msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; } .msg-time { font-size: 0.72rem; letter-spacing: 0.03em; opacity: 0.76; } .msg-tick { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 800; } .msg-tick-glyph { font-size: 0.9rem; line-height: 1; } .msg-tick-label { font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; } .msg-tick.sent { color: rgba(255,255,255,0.78); } .msg-tick.delivered { color: #d9e4ff; } .msg-tick.read { color: #8ce8db; text-shadow: 0 0 14px rgba(140, 232, 219, 0.32); } .msg-tick.failed { color: #ff8e8e; } .msg-tick.queued { color: #f5d38a; } .aura-audio-player { display: flex; align-items: center; gap: 10px; width: min(100%, 380px); padding: 10px 12px; margin-top: 6px; border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 24px rgba(0,0,0,0.18); } .msg-bubble.sent .aura-audio-player { background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08)); border-color: rgba(255,255,255,0.2); } .audio-play-btn { width: 42px; height: 42px; border-radius: 999px; border: none; background: linear-gradient(135deg, #fff1c4, #f7d58e); color: #241531; font-size: 16px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; cursor: pointer; box-shadow: 0 8px 16px rgba(0,0,0,0.2); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .audio-play-btn.is-playing { background: linear-gradient(135deg, #8ce8db, #b9fff6); color: #04222b; transform: scale(1.06); box-shadow: 0 0 0 6px rgba(140, 232, 219, 0.12), 0 10px 20px rgba(0,0,0,0.22); } .audio-track { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .audio-waveform { flex: 1 1 auto; height: 22px; display: flex; align-items: center; gap: 3px; } .audio-waveform i { flex: 1 1 auto; min-width: 4px; height: calc(var(--wave-height, 0.45) * 100%); background: rgba(255,255,255,0.26); border-radius: 999px; transition: 0.16s ease; transform-origin: center bottom; } .audio-waveform i.active { background: #8ce8db; transform: scaleY(1.14); box-shadow: 0 0 12px rgba(140, 232, 219, 0.25); } .audio-progress { width: 100%; margin: 0; appearance: none; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.16); outline: none; cursor: pointer; } .audio-progress::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 999px; background: #f7d58e; box-shadow: 0 0 0 3px rgba(247, 213, 142, 0.2); cursor: pointer; } .audio-progress::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 999px; background: #f7d58e; box-shadow: 0 0 0 3px rgba(247, 213, 142, 0.2); cursor: pointer; } .audio-progress::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.16); } .audio-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .audio-markers { display: none; flex-wrap: wrap; gap: 4px; } .audio-markers.has-items { display: flex; } .audio-marker-chip { border: 1px solid rgba(140, 232, 219, 0.18); background: rgba(140, 232, 219, 0.08); color: #8ce8db; border-radius: 999px; padding: 4px 8px; font-size: 0.64rem; font-weight: 800; cursor: pointer; } .audio-duration { font-size: 0.7rem; color: rgba(255,255,255,0.82); font-family: monospace; } .audio-state { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.58); } .audio-state.is-playing { color: #8ce8db; } .audio-speed-btn, .audio-jump-btn, .audio-mark-btn, .audio-dl-btn { flex: 0 0 auto; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.08); color: #fff; font-size: 0.72rem; font-weight: 800; cursor: pointer; transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease; } .audio-side-actions { display: flex; flex-direction: column; gap: 4px; } .audio-jump-btn { color: #f7d58e; } .audio-mark-btn { min-width: 56px; color: #d9e4ff; font-size: 0.66rem; } .audio-speed-btn:hover, .audio-jump-btn:hover, .audio-mark-btn:hover, .audio-dl-btn:hover { background: rgba(255,255,255,0.14); transform: translateY(-1px); } .audio-speed-btn { color: #8ce8db; } .audio-speed-btn:active, .audio-jump-btn:active, .audio-mark-btn:active, .audio-dl-btn:active, .audio-play-btn:active { transform: scale(0.97); } .audio-mark-btn:disabled { opacity: 0.45; cursor: not-allowed; } .chat-input-area { padding: 15px 18px 25px; background: var(--navy-glass); backdrop-filter: var(--glass-blur); border-top: var(--glass-border); } .chat-input-bar { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.05); border-radius: 28px; padding: 6px 18px; border: 1px solid rgba(255,255,255,0.08); } .chat-input-bar input { flex: 1; background: transparent; border: none; color: #fff; padding: 12px 0; outline: none; font-family: inherit; font-size: 1rem; } .send-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-gold); color: #000; display: flex; align-items: center; justify-content: center; font-size: 18px; border: none; box-shadow: 0 4px 12px rgba(217, 161, 62, 0.3); } .send-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-gold); color: #000; display: flex; align-items: center; justify-content: center; font-size: 18px; border: none; box-shadow: 0 4px 12px rgba(217, 161, 62, 0.3); } /* --- PREMIUM LOGIN --- */ .login-overlay { position: fixed; inset: 0; background: var(--navy-deep); background-image: var(--bg-gradient); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 30px; } .login-card { background: var(--navy-glass); backdrop-filter: blur(40px); border: var(--glass-border); border-radius: 36px; padding: 35px; width: 100%; max-width: 420px; box-shadow: var(--shadow-premium); } .login-field { margin-bottom: 25px; } .login-field label { display: block; color: var(--brand-gold); font-weight: 900; font-size: 11px; text-transform: uppercase; margin-bottom: 10px; letter-spacing: 2px; } .login-field input { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 18px; color: #fff; outline: none; font-size: 1.05rem; transition: 0.3s; } .login-field input:focus { border-color: var(--brand-gold); background: var(--gold-glass); } .login-btn { width: 100%; background: var(--brand-gold); color: #000; font-weight: 900; padding: 20px; border-radius: 20px; border: none; text-transform: uppercase; letter-spacing: 2px; font-size: 1rem; box-shadow: 0 15px 35px rgba(217, 161, 62, 0.4); transition: 0.3s; } .login-btn:active { transform: scale(0.96); } .login-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 420px; } .media-record-wrapper { position: relative; display: flex; align-items: center; justify-content: center; position: relative; color: rgba(232, 220, 255, 0.92); background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); border: 1px solid rgba(217, 161, 62, 0.14); box-shadow: 0 10px 22px rgba(5, 9, 24, 0.24), inset 0 1px 0 rgba(255,255,255,0.05); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease; } .chat-header-actions button svg, .chat-header-actions button i { width: 18px !important; height: 18px !important; stroke-width: 2.1 !important; pointer-events: none; } .chat-header-actions button:hover { transform: translateY(-1px); border-color: rgba(217, 161, 62, 0.34); background: linear-gradient(180deg, rgba(140, 98, 198, 0.18), rgba(255,255,255,0.06)); box-shadow: 0 14px 28px rgba(5, 9, 24, 0.28), 0 0 0 1px rgba(217,161,62,0.08) inset; } .chat-header-actions button:active { transform: scale(0.96); } .chat-action-btn.action-context { color: #d7c4ff; } .chat-action-btn.action-remind { color: #f3d58e; } .chat-action-btn.action-call { color: #9ff0c7; } .chat-action-btn.action-video { color: #8fd9ff; } .record-mode-btn { position: relative; width: 42px; height: 42px; border-radius: 999px; color: rgba(255,255,255,0.72); transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } .record-mode-btn.holding, .record-mode-btn.recording { color: #ff8b8b !important; background: rgba(239, 68, 68, 0.12) !important; box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2) inset, 0 0 18px rgba(239, 68, 68, 0.28); animation: metis-record-pulse 0.9s infinite alternate; } .record-mode-btn.locked { color: #ffd0d0 !important; background: rgba(239, 68, 68, 0.18) !important; box-shadow: 0 0 0 1px rgba(255, 170, 170, 0.28) inset, 0 0 24px rgba(239, 68, 68, 0.34); } .record-ui { position: absolute; right: 0; bottom: 54px; min-width: 250px; padding: 10px 14px; border-radius: 18px; background: rgba(8, 12, 20, 0.94); border: 1px solid rgba(239, 68, 68, 0.28); box-shadow: 0 16px 36px rgba(0,0,0,0.3); backdrop-filter: blur(16px); display: flex; align-items: center; gap: 10px; z-index: 30; } .record-ui.is-locked { border-color: rgba(245, 199, 125, 0.35); box-shadow: 0 16px 36px rgba(0,0,0,0.32), 0 0 0 1px rgba(245, 199, 125, 0.14) inset; } .record-dot { width: 10px; height: 10px; border-radius: 999px; background: #ef4444; box-shadow: 0 0 12px rgba(239, 68, 68, 0.5); } .record-wave { display: flex; align-items: center; gap: 3px; height: 18px; } .record-wave i { width: 4px; height: 40%; border-radius: 999px; background: rgba(255,255,255,0.2); animation: metis-record-wave 0.9s infinite ease-in-out; } .record-wave i:nth-child(2) { animation-delay: 0.12s; } .record-wave i:nth-child(3) { animation-delay: 0.24s; } .record-wave i:nth-child(4) { animation-delay: 0.36s; } .record-timer { color: #fff; font-size: 0.95rem; font-weight: 800; font-family: monospace; } .record-slide-tip { color: rgba(255,255,255,0.72); font-size: 0.72rem; font-weight: 700; line-height: 1.25; } .record-slide-tip.locked { color: #f7d58e; } .audio-preview-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(8, 12, 20, 0.9); border: 1px solid rgba(255,255,255,0.08); } .audio-preview-bar audio { flex: 1 1 auto; min-width: 0; height: 38px; } .audio-preview-cancel, .audio-preview-send { flex: 0 0 auto; border: none; border-radius: 12px; padding: 9px 12px; font-weight: 800; cursor: pointer; } .audio-preview-cancel { background: rgba(255,255,255,0.08); color: #fff; } .audio-preview-send { background: linear-gradient(135deg, #f7d58e, #d9a13e); color: #09131b; } @keyframes metis-record-pulse { 0% { transform: scale(1); } 100% { transform: scale(1.06); } } @keyframes metis-record-wave { 0%, 100% { transform: scaleY(0.45); opacity: 0.45; } 50% { transform: scaleY(1); opacity: 1; } } .login-logo { text-align: center; background: transparent; } .login-logo img { mix-blend-mode: screen; border-radius: 20px; background: transparent; } .login-logo img { width: 110px; width: 32vw; max-width: 160px; min-width: 110px; height: auto; margin-bottom: 25px; filter: drop-shadow(0 0 25px var(--brand-gold)); } .premium-text { font-size: 1.8rem; background: linear-gradient(135deg, var(--gold-bright), var(--brand-gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; margin-bottom: 35px; text-align: center; } /* --- SOCIAL PREMIUM FEED --- */ .social-post-premium { background: var(--navy-glass); border: var(--glass-border-light); border-radius: var(--ui-corner-radius); padding: var(--social-post-padding); margin-bottom: var(--social-post-margin); box-shadow: var(--shadow-premium); } .post-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .post-avatar { width: 45px; height: 45px; border-radius: 12px; border: 1px solid var(--gold-glass); } .post-meta h4 { font-size: 15px; color: #fff; font-weight: 800; } .post-meta span { font-size: 11px; color: var(--text-dim); } .post-body { font-size: 14px; line-height: 1.6; color: var(--text-main); } .post-footer { display: flex; gap: 20px; margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.05); } .post-action { display: flex; align-items: center; gap: 4px; font-size: 18px; color: var(--text-dim); } .post-action.active { color: var(--brand-gold); } /* --- PREMIUM SOCIAL REFINEMENTS --- */ .avatar-wrapper-premium { width: 48px; height: 48px; border-radius: 14px; overflow: hidden; border: 2px solid var(--gold-glass); box-shadow: var(--shadow-glow); background: var(--navy-glass); } .avatar-wrapper-premium img { width: 100%; height: 100%; object-fit: cover; } .post-media-wrap { margin-top: 15px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background: #000; } .post-media-premium { width: 100% !important; max-width: 100% !important; height: auto !important; display: block; max-height: 280px; object-fit: contain !important; background: #000; border-radius: 12px; transition: 0.3s; } .post-media-premium:active { transform: scale(0.98); } /* --- SOCIAL FEED PREMIUM --- */ .feed-container { padding: 15px; display: flex; flex-direction: column; gap: 20px; } .social-post-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 12px; backdrop-filter: blur(10px); } .post-header { display: flex; align-items: center; gap: 12px; } .post-avatar { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--brand-gold); } .post-meta { flex: 1; } .post-author { font-weight: 800; font-size: 14px; color: #fff; display: block; } .post-time { font-size: 11px; color: var(--text-dim); } .post-body { font-size: 15px; line-height: 1.5; color: var(--text-main); } .post-media-wrap { width: 100%; border-radius: 16px; overflow: hidden; margin-top: 8px; border: 1px solid rgba(255,255,255,0.1); } .post-media-wrap img, .post-media-wrap video { width: 100%; display: block; } /* --- ARCADE LIBRARY PREMIUM --- */ .arcade-view { padding: 10px; } .arcade-row { margin-bottom: 25px; } .arcade-row-title { font-size: 13px; font-weight: 900; color: var(--brand-gold); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; padding-left: 5px; } .arcade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; } .game-card { display: flex; flex-direction: column; gap: 8px; text-align: center; } .game-icon-wrap { aspect-ratio: 1/1; background: #000; border-radius: 20px; border: 1px solid rgba(217, 161, 62, 0.2); overflow: hidden; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .game-icon-img { width: 100%; height: 100%; object-fit: cover; } .game-title { font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .social-post-premium, .arcade-card-premium, .tile-premium { animation: bentoPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards; } .action-icon { font-size: 20px; margin-right: 4px; } .action-count { font-size: 13px; font-weight: 700; color: var(--text-dim); } /* --- MICRO-ANIMATIONS & POLISH --- */ @keyframes bentoPop { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } .social-post-premium, .arcade-card-premium, .tile-premium { animation: bentoPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards; } .social-post-premium:nth-child(1) { animation-delay: 0.1s; } .social-post-premium:nth-child(2) { animation-delay: 0.2s; } .social-post-premium:nth-child(3) { animation-delay: 0.3s; } /* Dashboard Pulse */ @keyframes goldPulse { 0% { box-shadow: 0 0 0 0 rgba(217, 161, 62, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(217, 161, 62, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 161, 62, 0); } } .stat-box:first-child { animation: goldPulse 2s infinite; } /* --- CALL OVERLAY SYSTEM --- */ /* --- PREMIUM CALL OVERLAY SYSTEM --- */ .call-overlay, .call-overlay-immersiv { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 50000; background: #000; color: #fff; display: flex; flex-direction: column; overflow: hidden; } .call-overlay.is-hidden, .call-overlay-immersiv.is-hidden { display: none !important; } .call-header { position: absolute; top: 40px; width: 100%; text-align: center; z-index: 10; padding: 0 20px; } #call-target-name { font-size: 24px; font-weight: 900; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.8); } #call-status { font-size: 14px; color: var(--brand-gold); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; margin-top: 5px; text-shadow: 0 2px 5px rgba(0,0,0,0.8); } .video-grid { position: absolute; inset: 0; z-index: 1; background: #050a0f; } .remote-view { width: 100%; height: 100%; object-fit: cover; background: #000; } /* Video Container per chiamata mobile */ #video-container { flex: 1; position: relative; background: #000; min-height: 0; overflow: hidden; } #video-container.is-hidden { display: none; } /* Avatar centrale durante la chiamata */ #call-center-stage { flex: 1; display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; z-index: 3; } .call-overlay-immersiv.connected #call-center-stage { display: none; } .call-avatar-glow { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), #1a1a2e); display: flex; align-items: center; justify-content: center; font-size: 42px; color: #fff; } /* PIP locale */ .pip-local-video { position: absolute; right: 15px; bottom: calc(110px + var(--safe-bottom)); width: 104px; height: 148px; border-radius: 16px; overflow: hidden; border: 2px solid rgba(255,255,255,0.3); z-index: 20; background: #111; box-shadow: 0 12px 28px rgba(0,0,0,0.45); touch-action: manipulation; cursor: pointer; user-select: none; } .pip-local-video.swapped-mode { width: 112px; height: 156px; } .pip-overlay-controls { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; z-index: 2; } .pip-mini-btn { width: 24px; height: 24px; border: none; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; } .pip-status-bar { position: absolute; left: 6px; bottom: 6px; z-index: 2; } .pip-label { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 999px; background: rgba(0,0,0,0.45); color: #fff; font-size: 10px; line-height: 1; } .pip-resize-handle { position: absolute; inset: auto 0 0 auto; width: 18px; height: 18px; display: none; } .local-view-pip { position: absolute; right: 20px; bottom: 120px; /* Sopra i controlli */ width: 110px; height: 160px; border-radius: 20px; object-fit: cover; border: 2px solid rgba(255,255,255,0.2); box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 5; background: #000; transition: all 0.3s ease; } .call-controls { position: absolute; bottom: 30px; left: 20px; right: 20px; height: 80px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 40px; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: space-around; padding: 0 10px; z-index: 100; } .call-btn { width: 54px; height: 54px; border-radius: 27px; border: none; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: 0.2s; } .call-btn:active { transform: scale(0.9); } .call-btn.secondary { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255,255,255,0.05); } .call-btn.accept { background: #22C55E; color: #fff; width: 64px; height: 64px; border-radius: 32px; font-size: 24px; box-shadow: 0 10px 20px rgba(34, 197, 94, 0.3); transition: all 0.3s ease; } .call-btn.accept:active { transform: scale(0.9); } .call-btn.accept.connecting { animation: metisPulseAccept 1.5s infinite; } @keyframes metisPulseAccept { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(34, 197, 94, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .call-btn.reject { background: #EF4444; color: #fff; width: 64px; height: 64px; border-radius: 32px; font-size: 24px; box-shadow: 0 10px 20px rgba(239, 68, 68, 0.3); } .call-btn.active { background: var(--brand-gold); color: #000; } #remote-video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; background: #111; border-radius: 0; object-fit: contain; margin-bottom: 0; z-index: 1; } #local-video { width: 100%; height: 100%; position: absolute; inset: 0; border: none; border-radius: 0; object-fit: cover; background: #222; box-shadow: none; z-index: 1; } #remote-video.swapped-to-pip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 0; z-index: 1; } #local-video.swapped-to-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; } .call-actions-hud { display: flex; justify-content: center; gap: 12px; padding: 16px 14px calc(16px + var(--safe-bottom)); flex-wrap: wrap; flex-shrink: 0; position: relative; z-index: 5; } @media (max-width: 768px) { .call-header-info { padding: calc(18px + var(--safe-top)) 14px 10px !important; flex-shrink: 0; } .call-stream-tools { padding: 6px 10px !important; flex-shrink: 0; } #video-container { min-height: 0; } } /* --- MADS STANDARD COMPONENTS (Metis Aura Design Standard) --- */ .aura-page-root { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-gradient); } .aura-header-mads { padding: calc(15px + var(--safe-top)) 15px 15px; background: rgba(5, 10, 15, 0.8); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; } .aura-search-box-mads { background: var(--navy-glass); padding: 10px 15px; border-radius: var(--ui-corner-radius); display: flex; align-items: center; border: var(--glass-border-light); gap: 10px; } .aura-search-box-mads input { flex: 1; background: none; border: none; color: #fff; outline: none; font-size: 14px; } .aura-tabs-mads { display: flex; gap: 10px; padding: 10px 15px; flex-shrink: 0; } .aura-tab-mads { padding: 6px 16px; border-radius: 20px; font-size: 11px; font-weight: 800; text-transform: uppercase; background: rgba(255,255,255,0.05); color: var(--ui-text-muted); transition: 0.3s; } .aura-tab-mads.is-active { background: var(--brand-gold); color: #000; box-shadow: var(--shadow-glow); } .aura-scroll-mads { flex: 1; min-height: 0; overflow-y: auto; padding: 15px; } .aura-scroll-mads::-webkit-scrollbar { display: none; } .aura-card-mads { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; background: rgba(255,255,255,0.03); padding: 12px; border-radius: 15px; border: var(--glass-border-light); } .aura-footer-mads { background: rgba(11, 20, 27, 0.95); backdrop-filter: blur(25px); border-top: var(--glass-border); padding: 12px 15px calc(12px + var(--safe-bottom)); display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* --- METIS SUPER HUB STYLES --- */ .bottom-nav { display: flex; justify-content: space-around; align-items: center; background: rgba(11, 20, 27, 0.98); backdrop-filter: blur(30px); border-top: 1px solid rgba(217, 161, 62, 0.2); height: 70px; padding-bottom: var(--safe-bottom); position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; } .hub-btn { transform: none; } .hub-icon { width: 44px; height: 44px; background: linear-gradient(135deg, #D9A13E 0%, #B8860B 100%); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #000; box-shadow: 0 4px 15px rgba(217, 161, 62, 0.4); border: 2px solid rgba(0,0,0,0.2); } /* --- METIS SUPER HUB STYLES (Ultra-Robust Edition) --- */ .hub-menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; background: rgba(3, 7, 10, 0.9); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); display: none; /* JS toggles flex via class removal */ align-items: center; justify-content: center; z-index: 20000 !important; padding: 20px; } .hub-menu-overlay:not(.is-hidden) { display: flex; } .hub-menu-card { width: 90%; max-width: 400px; background: linear-gradient(160deg, rgba(20,35,45,0.95) 0%, rgba(11,20,27,1) 100%); border: 1px solid rgba(217, 161, 62, 0.4); border-radius: 35px; padding: 35px 25px; box-shadow: 0 30px 70px rgba(0,0,0,0.8), 0 0 30px rgba(217,161,62,0.1); animation: hubPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes hubPopIn { from { transform: scale(0.8) translateY(50px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .hub-menu-header { margin-bottom: 30px; text-align: center; position: relative; } .hub-menu-title { font-size: 11px; font-weight: 900; color: var(--brand-gold); letter-spacing: 3px; text-transform: uppercase; } .hub-close-btn { position: absolute; top: -10px; right: -5px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.05); color: #fff; border: 1px solid rgba(255,255,255,0.1); font-size: 22px; } .hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; width: 100%; } .hub-option { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 15px 5px; border-radius: 20px; transition: 0.2s; } .hub-option:active { background: rgba(217, 161, 62, 0.1); transform: scale(0.95); } .hub-opt-icon { width: 58px; height: 58px; background: rgba(255,255,255,0.03); border: 1px solid rgba(217,161,62,0.2); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 8px 20px rgba(0,0,0,0.4); } .hub-option span { font-size: 9px; font-weight: 800; color: #fff; letter-spacing: 1px; } /* --- Metis Whiteboard (Panel Edition) --- */ .whiteboard-panel { position: absolute; top: 15%; left: 5%; width: 90%; height: 55%; max-width: 500px; background: rgba(11, 20, 27, 0.95); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; display: flex; flex-direction: column; z-index: 2000; box-shadow: 0 20px 50px rgba(0,0,0,0.6); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s; overflow: hidden; touch-action: none; } .whiteboard-panel.is-hidden { transform: scale(0.9) translateY(20px); opacity: 0; pointer-events: none; display: none; } .whiteboard-header { padding: 12px 20px; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; cursor: move; } .whiteboard-header span { font-size: 13px; font-weight: 800; color: var(--brand-gold); text-transform: uppercase; letter-spacing: 1px; } .wb-close { background: none; border: none; color: #fff; font-size: 18px; padding: 5px; } .whiteboard-body { flex: 1; position: relative; background: #000; } .whiteboard-body canvas { width: 100%; height: 100%; display: block; } .whiteboard-panel-tools { padding: 15px; display: flex; justify-content: center; gap: 15px; background: rgba(0,0,0,0.3); } .whiteboard-panel-tools button { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); color: #fff; width: 44px; height: 44px; border-radius: 12px; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: 0.2s; } .whiteboard-panel-tools button:active { transform: scale(0.9); background: var(--brand-gold); color: #000; } .whiteboard-tools button { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.3s; } .whiteboard-tools button:active { background: rgba(255,255,255,0.1); transform: scale(0.9); } .hud-btn.active { background: var(--brand-gold) !important; color: #000 !important; box-shadow: 0 0 20px rgba(217, 161, 62, 0.4); } /* --- FINAL OVERRIDES --- */ .call-overlay-active #call-overlay { display: flex !important; z-index: 100000 !important; } #call-overlay { position: fixed; inset: 0; background: #000; z-index: 99999; display: none; flex-direction: column; } /* --- PROFILE BACKGROUND PICKER (MOBILE NATIVE BOTTOM SHEET) --- */ .profile-background-picker { position: fixed; inset: 0; z-index: 100200; background: rgba(3, 6, 10, 0.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: flex; align-items: flex-end; /* Mobile Bottom Sheet */ justify-content: center; } .profile-background-picker.is-hidden { display: none !important; } .profile-background-dialog { width: 100%; height: 82vh; /* Bottom sheet height */ max-height: 82vh; overflow-y: auto; border-radius: 30px 30px 0 0; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(11, 20, 27, 0.98) 0%, rgba(6, 10, 14, 0.99) 100%); box-shadow: 0 -15px 40px rgba(0,0,0,0.6); padding: 20px 18px 40px; /* Leave space at bottom for navs */ } .profile-background-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; margin-bottom: 20px; position: sticky; top: -20px; z-index: 10; background: rgba(11, 20, 27, 0.98); padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); } .profile-background-dialog-header h2 { margin: 0; font-size: 22px; font-weight: 900; color: #fff; } .profile-background-dialog-header p { margin: 4px 0 0; color: var(--text-dim); font-size: 11px; line-height: 1.4; } .profile-background-close { min-width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.05); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; } .profile-background-section + .profile-background-section { margin-top: 25px; } .profile-background-section-title { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-gold); } .profile-background-color-grid, .profile-background-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); /* Clean 2-column grid on mobile */ } .background-choice { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: #fff; text-align: left; display: flex; flex-direction: column; cursor: pointer; } .background-choice.is-active { border-color: rgba(217,161,62,0.85); box-shadow: 0 0 0 2px rgba(217,161,62,0.2), 0 10px 20px rgba(0,0,0,0.3); } .background-choice-preview { width: 100%; aspect-ratio: 16 / 10; background: #09131B; background-size: cover; background-position: center; } .background-choice-body { padding: 10px 12px 12px; } .background-choice-body strong { display: block; font-size: 13px; font-weight: 700; color: #fff; } .background-choice-body span { display: block; margin-top: 2px; color: var(--text-dim); font-size: 10px; } .background-choice-check { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 999px; background: rgba(5,10,15,0.8); border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: var(--brand-gold); font-size: 12px; font-weight: bold; } .background-color-chip { min-height: 80px; display: flex; align-items: flex-end; } .background-picker-status { margin-top: 20px; color: var(--text-dim); font-size: 11px; text-align: center; } /* ? HIGHLY PREMIUM METIS COMPACT ROW & GLOWING UNREAD SYSTEM */ .contact-item { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 14px !important; min-height: 72px !important; gap: 12px !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; } .contact-avatar { width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 14px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; transition: all 0.3s ease !important; } .contact-info { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } .contact-name { font-size: 0.95rem !important; font-weight: 700 !important; line-height: 1.2 !important; color: #fff !important; margin-bottom: 3px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .contact-status { font-size: 0.76rem !important; color: rgba(220, 230, 234, 0.6) !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .contact-item .contact-actions { display: flex !important; align-items: center !important; gap: 8px !important; width: auto !important; margin-left: 0 !important; padding-top: 0 !important; z-index: 5 !important; } .contact-item .contact-actions button { width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #fff !important; cursor: pointer !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; } .contact-item .contact-actions button:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.2) !important; transform: scale(1.05) !important; } .contact-item .contact-actions button.contact-secondary { background: rgba(217, 161, 62, 0.12) !important; border-color: rgba(217, 161, 62, 0.25) !important; color: var(--brand-gold) !important; } .contact-item .contact-actions button.contact-secondary:hover { background: rgba(217, 161, 62, 0.22) !important; } .contact-item .contact-actions button.delete-contact-btn { background: rgba(239, 68, 68, 0.08) !important; border-color: rgba(239, 68, 68, 0.2) !important; color: #EF4444 !important; } .contact-item .contact-actions button.delete-contact-btn:hover { background: rgba(239, 68, 68, 0.18) !important; } .contact-item .contact-actions button span.btn-label { display: none !important; /* Hide labels on mobile completely */ } .contact-item .contact-actions button span.btn-icon { font-size: 14px !important; margin: 0 !important; } /* ? BREATHING OUTLINE GLOW FOR UNREAD MESSAGES */ @keyframes unreadOutlinePulse { 0% { border-color: rgba(217, 161, 62, 0.3); box-shadow: 0 0 4px rgba(217, 161, 62, 0.1), inset 0 0 4px rgba(217, 161, 62, 0.05); } 50% { border-color: rgba(217, 161, 62, 0.85); box-shadow: 0 0 15px rgba(217, 161, 62, 0.45), inset 0 0 8px rgba(217, 161, 62, 0.15); } 100% { border-color: rgba(217, 161, 62, 0.3); box-shadow: 0 0 4px rgba(217, 161, 62, 0.1), inset 0 0 4px rgba(217, 161, 62, 0.05); } } .contact-item.has-unread { animation: unreadOutlinePulse 2s infinite ease-in-out !important; border: 1px solid var(--brand-gold) !important; background: linear-gradient(180deg, rgba(28, 48, 60, 0.5) 0%, rgba(20, 36, 47, 0.5) 100%) !important; } .contact-item.has-unread .contact-avatar { border: 1.5px solid var(--brand-gold) !important; box-shadow: 0 0 10px rgba(217, 161, 62, 0.6) !important; } /* ? ULTRA-PREMIUM LEGIBILITY CONTRAST ENHANCEMENTS */ .profile-card, .profile-editor-panel, .dash-tile, .mobile-theme-panel { background: rgba(13, 22, 29, 0.88) !important; backdrop-filter: blur(35px) !important; -webkit-backdrop-filter: blur(35px) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65) !important; } /* Keep active profile card glowing elegantly */ .profile-card { border: 1px solid rgba(217, 161, 62, 0.35) !important; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.75), 0 0 15px rgba(217, 161, 62, 0.1) !important; } /* Increase contrast of surface theme selectors & inputs */ .surface-theme-option, .ringtone-select, .arcade-auth-input, .premium-input { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: #fff !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } .surface-theme-option.active { background: rgba(217, 161, 62, 0.18) !important; border-color: rgba(217, 161, 62, 0.6) !important; box-shadow: 0 0 12px rgba(217, 161, 62, 0.25) !important; } /* ? UNIFIED AURA DESIGN SYSTEM: ROSTER ROW & LEGIBILITY REDESIGN */ .contact-item { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 14px !important; min-height: 72px !important; gap: 12px !important; border-radius: 20px !important; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; background: rgba(13, 22, 29, 0.72) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; margin-bottom: 8px !important; position: relative !important; overflow: visible !important; } .contact-item:hover { background: rgba(22, 38, 50, 0.85) !important; border-color: rgba(255, 255, 255, 0.16) !important; transform: translateY(-1px) !important; } .contact-item.active { background: linear-gradient(135deg, rgba(217, 161, 62, 0.15), rgba(13, 22, 29, 0.88)) !important; border-color: rgba(217, 161, 62, 0.5) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 10px rgba(217, 161, 62, 0.15) !important; } .contact-avatar { width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important; } .contact-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .contact-info { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 4px !important; padding-right: 8px !important; } .contact-name { font-size: 0.95rem !important; font-weight: 700 !important; color: #fff !important; display: flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .contact-status { font-size: 0.78rem !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: flex !important; align-items: center !important; gap: 5px !important; color: rgba(255, 255, 255, 0.45) !important; } .contact-status-online { color: #10B981 !important; font-weight: 600 !important; } .contact-status-offline { color: var(--theme-muted, rgba(255, 255, 255, 0.45)) !important; } .contact-status-pending { color: var(--brand-gold) !important; font-weight: 600 !important; } .relationship-icon { font-size: 11px !important; opacity: 0.8 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .contact-item .contact-actions { display: flex !important; align-items: center !important; gap: 8px !important; width: auto !important; margin: 0 !important; padding: 0 !important; z-index: 5 !important; } .contact-item .contact-actions button { width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: #fff !important; cursor: pointer !important; transition: all 0.2s ease !important; } .contact-item .contact-actions button:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.25) !important; transform: scale(1.08) !important; } .contact-item .contact-actions button.contact-secondary { background: rgba(217, 161, 62, 0.12) !important; border-color: rgba(217, 161, 62, 0.3) !important; color: var(--brand-gold) !important; } .contact-item .contact-actions button.contact-secondary:hover { background: rgba(217, 161, 62, 0.25) !important; } .contact-item .contact-actions button.delete-contact-btn { background: rgba(239, 68, 68, 0.08) !important; border-color: rgba(239, 68, 68, 0.2) !important; color: #EF4444 !important; } .contact-item .contact-actions button.delete-contact-btn:hover { background: rgba(239, 68, 68, 0.2) !important; } .contact-item .contact-actions button span.btn-label { display: none !important; } .contact-item .contact-actions button span.btn-icon { font-size: 13px !important; margin: 0 !important; } /* ? WALLPAPER CONFLICT RESOLUTION FOR SURFACE THEMES */ body[data-background-mode="color"] .view-main, body[data-background-mode="color"] .contacts-sidebar, body[data-background-mode="color"] .chat-main, body[data-background-mode="color"] .aura-dashboard, body[data-background-mode="color"] #view-social, body[data-background-mode="color"] #view-profile, body[data-background-mode="image"] .view-main, body[data-background-mode="image"] .contacts-sidebar, body[data-background-mode="image"] .chat-main, body[data-background-mode="image"] .aura-dashboard, body[data-background-mode="image"] #view-social, body[data-background-mode="image"] #view-profile { background: transparent !important; } /* ? MASTER UNIFIED GLASS & ADAPTIVE CONTRAST SYSTEM (THEME-SPECIFIC TEXT CONTRAST) */ .aura-dashboard { display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 20px !important; } .dash-stats-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; width: 100% !important; } /* General card attributes: rounded squircle, shadows & GPU composition lock */ .aura-dashboard .dash-tile { backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border-radius: 24px !important; padding: 20px !important; margin: 0 !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; transform: translate3d(0, 0, 0) !important; -webkit-transform: translate3d(0, 0, 0) !important; transform-style: preserve-3d !important; -webkit-transform-style: preserve-3d !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; will-change: transform, filter !important; } .aura-dashboard .dash-tile:hover { transform: translateY(-2px) !important; } /* ? DARK THEME: LIGHT TEXT ON DARK NAVY GLASS */ body[data-surface-theme="dark"] .aura-dashboard .dash-tile { background: rgba(13, 22, 29, 0.72) !important; border: 1.5px solid rgba(255, 255, 255, 0.15) !important; } body[data-surface-theme="dark"] .aura-dashboard .welcome-text h1, body[data-surface-theme="dark"] .aura-dashboard #dash-greeting, body[data-surface-theme="dark"] .aura-dashboard .sys-value { color: #ffffff !important; font-weight: 600 !important; font-size: 1.5rem !important; text-shadow: none !important; } body[data-surface-theme="dark"] .aura-dashboard #dash-username, body[data-surface-theme="dark"] .aura-dashboard .tile-arrow { color: var(--brand-gold) !important; font-weight: 500 !important; text-shadow: none !important; } body[data-surface-theme="dark"] .aura-dashboard .sys-label { color: #cbd5e1 !important; /* Silver-grey label */ font-weight: 600 !important; letter-spacing: 0.8px !important; font-size: 0.78rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100% !important; display: block !important; } body[data-surface-theme="dark"] .aura-dashboard .dash-peek { color: #cbd5e1 !important; /* White peek text */ font-weight: 400 !important; } /* ?? SABBIA (SAND) THEME: DARK COFFEE TEXT ON LIGHT SAND BEIGE GLASS */ body[data-surface-theme="sand"] .aura-dashboard .dash-tile { background: rgba(240, 226, 206, 0.85) !important; border: 1.5px solid rgba(84, 59, 34, 0.25) !important; } body[data-surface-theme="sand"] .aura-dashboard .welcome-text h1, body[data-surface-theme="sand"] .aura-dashboard #dash-greeting, body[data-surface-theme="sand"] .aura-dashboard .sys-value { color: #2c1b0a !important; /* Deep Espresso Coffee Dark Brown */ font-weight: 600 !important; font-size: 1.5rem !important; text-shadow: none !important; } body[data-surface-theme="sand"] .aura-dashboard #dash-username, body[data-surface-theme="sand"] .aura-dashboard .tile-arrow { color: #b47918 !important; /* Rich Dark Bronze-Gold */ font-weight: 600 !important; text-shadow: none !important; } body[data-surface-theme="sand"] .aura-dashboard .sys-label { color: #543b22 !important; /* Dark warm cocoa brown */ font-weight: 600 !important; letter-spacing: 0.8px !important; font-size: 0.78rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100% !important; display: block !important; } body[data-surface-theme="sand"] .aura-dashboard .dash-peek { color: #4b3621 !important; /* Dark chocolate for peek descriptions */ font-weight: 500 !important; } /* ? SALVIA (SAGE) THEME: DEEP CHARCOAL-FOREST TEXT ON LIGHT SAGE GREEN GLASS */ body[data-surface-theme="sage"] .aura-dashboard .dash-tile { background: rgba(220, 235, 225, 0.85) !important; border: 1.5px solid rgba(47, 79, 65, 0.25) !important; } body[data-surface-theme="sage"] .aura-dashboard .welcome-text h1, body[data-surface-theme="sage"] .aura-dashboard #dash-greeting, body[data-surface-theme="sage"] .aura-dashboard .sys-value { color: #13251e !important; /* Deep Charcoal Forest Green */ font-weight: 600 !important; font-size: 1.5rem !important; text-shadow: none !important; } body[data-surface-theme="sage"] .aura-dashboard #dash-username, body[data-surface-theme="sage"] .aura-dashboard .tile-arrow { color: #c88f28 !important; /* Muted Gold Amber */ font-weight: 600 !important; text-shadow: none !important; } body[data-surface-theme="sage"] .aura-dashboard .sys-label { color: #2f4f41 !important; /* Deep Sage Green */ font-weight: 600 !important; letter-spacing: 0.8px !important; font-size: 0.78rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100% !important; display: block !important; } body[data-surface-theme="sage"] .aura-dashboard .dash-peek { color: #243f33 !important; /* Dark Green-Slate */ font-weight: 500 !important; } /* ? LAGOON (TEAL) THEME: LIGHT TEAL/WHITE TEXT ON DARK TEAL GLASS */ body[data-surface-theme="lagoon"] .aura-dashboard .dash-tile { background: rgba(10, 30, 40, 0.75) !important; border: 1.5px solid rgba(126, 223, 209, 0.25) !important; } body[data-surface-theme="lagoon"] .aura-dashboard .welcome-text h1, body[data-surface-theme="lagoon"] .aura-dashboard #dash-greeting, body[data-surface-theme="lagoon"] .aura-dashboard .sys-value { color: #ffffff !important; font-weight: 600 !important; font-size: 1.5rem !important; text-shadow: none !important; } body[data-surface-theme="lagoon"] .aura-dashboard #dash-username, body[data-surface-theme="lagoon"] .aura-dashboard .tile-arrow { color: #7edfd1 !important; /* Bright Oceanic Cyan */ font-weight: 500 !important; text-shadow: none !important; } body[data-surface-theme="lagoon"] .aura-dashboard .sys-label { color: #cbd5e1 !important; font-weight: 600 !important; letter-spacing: 0.8px !important; font-size: 0.78rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100% !important; display: block !important; } body[data-surface-theme="lagoon"] .aura-dashboard .dash-peek { color: #cbd5e1 !important; font-weight: 400 !important; } /* === MetisChat mobile contrast and avatar reliability pass === */ .contact-avatar, .post-avatar-button, .avatar-wrapper-premium { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; overflow: hidden !important; background: linear-gradient(135deg, #E4BF70, #7EDFD1) !important; color: #071118 !important; } .contact-avatar .avatar-fallback-initials, .post-avatar-button .avatar-fallback-initials, .avatar-wrapper-premium .avatar-fallback-initials { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 900 !important; z-index: 0 !important; } .contact-avatar img, .post-avatar-button img, .avatar-wrapper-premium img, .social-post-premium .post-avatar { position: relative !important; z-index: 1 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } .contact-avatar img.is-broken, .post-avatar-button img.is-broken, .avatar-wrapper-premium img.is-broken { display: none !important; } .contact-avatar .avatar-fallback-initials.is-visible, .post-avatar-button .avatar-fallback-initials.is-visible, .avatar-wrapper-premium .avatar-fallback-initials.is-visible { z-index: 2 !important; } .contact-avatar { z-index: 1 !important; } .social-creator-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; } .social-creator-actions .feed-media-tools { display: flex; align-items: center; gap: 4px; } .social-creator-actions .feed-media-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: var(--text-dim); cursor: pointer; transition: all 0.2s; padding: 0; } .social-creator-actions .feed-media-btn:hover { background: rgba(255,255,255,0.12); color: var(--brand-gold); border-color: rgba(217,161,62,0.3); } .social-creator-actions .feed-media-btn.recording { background: rgba(239,68,68,0.2); color: #ef4444; border-color: rgba(239,68,68,0.4); animation: pulse-rec 1.2s ease-in-out infinite; } .social-creator-actions .feed-media-btn.has-file { background: rgba(217,161,62,0.15); color: var(--brand-gold); border-color: rgba(217,161,62,0.3); } .social-creator-actions .feed-file-name { font-size: 10px; color: var(--brand-gold); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; } @keyframes pulse-rec { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } } .contact-avatar .avatar-fallback-initials, .contact-avatar .avatar-fallback-initials.is-visible { opacity: 1 !important; visibility: visible !important; color: #071118 !important; } #view-social.active, #view-profile.active { background: linear-gradient(180deg, rgba(5, 10, 15, 0.88), rgba(5, 10, 15, 0.94)), radial-gradient(circle at 16% 4%, rgba(126,223,209,0.12), transparent 28%) !important; } .social-post-premium, .feed-composer, .profile-main-card, .profile-panel, .settings-section, .profile-preview-card, .profile-signal-card, .profile-insight-card { background: rgba(8, 17, 24, 0.94) !important; border-color: rgba(255,255,255,0.16) !important; color: #F8FAFC !important; } .social-post-premium .post-author, .social-post-premium .post-body, #view-profile h1, #view-profile h2, #view-profile h3, .profile-field-label, .profile-preview-name, .profile-preview-meta strong, .profile-signal-card strong, .profile-insight-card strong { color: #FFFFFF !important; } .social-post-premium .post-time, .profile-hero-note, .profile-panel-header p, .profile-save-status, .profile-preview-meta span, .profile-signal-label { color: #C9D4DC !important; } .profile-name-edit, .profile-headline-input, .profile-select, .profile-bio-edit, #edit-profile-name, #edit-profile-bio, #profile-headline, #profile-availability, #profile-response-time, #profile-signal-focus, #profile-link, #profile-contact-mode { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: #FFFFFF !important; } .post-avatar-button { width: 48px !important; height: 48px !important; border: 2px solid #E4BF70 !important; border-radius: 16px !important; padding: 0 !important; } .post-delete-btn { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 6px; opacity: 0.4; transition: opacity 0.2s; color: #ef4444; } .post-delete-btn:hover { opacity: 1; background: rgba(239,68,68,0.2); } .social-post-premium .post-author, button.post-author { appearance: none !important; -webkit-appearance: none !important; display: inline !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #FFFFFF !important; font: inherit !important; font-weight: 900 !important; text-align: left !important; } .feed-container, #social-feed-list, .feed-composer, .social-post-premium { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* === Real mobile surface themes === */ .theme-surface-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .theme-chip-ember { background: linear-gradient(135deg, #18070B 0%, #F97316 100%) !important; } .theme-chip-violet { background: linear-gradient(135deg, #160B2E 0%, #C084FC 100%) !important; } .theme-chip-arctic { background: linear-gradient(135deg, #F7FBFF 0%, #2563EB 100%) !important; } .theme-chip-graphite { background: linear-gradient(135deg, #0B0D10 0%, #94A3B8 100%) !important; } body[data-surface-theme="dark"] { --theme-page: #050A0F; --theme-page-soft: #0A131B; --theme-surface: rgba(8, 17, 24, 0.94); --theme-border: rgba(255,255,255,0.15); --theme-text: #F8FAFC; --theme-muted: #C9D4DC; --theme-accent: #E4BF70; --theme-accent-2: #7EDFD1; } body[data-surface-theme="sage"] { --theme-page: #DDEBE1; --theme-page-soft: #C8DDCF; --theme-surface: rgba(247, 252, 248, 0.92); --theme-border: rgba(45, 88, 68, 0.22); --theme-text: #13251E; --theme-muted: #385748; --theme-accent: #2F6B52; --theme-accent-2: #D39A32; } body[data-surface-theme="lagoon"] { --theme-page: #061A24; --theme-page-soft: #083242; --theme-surface: rgba(8, 37, 49, 0.92); --theme-border: rgba(126, 223, 209, 0.26); --theme-text: #F1FFFD; --theme-muted: #A9D7D2; --theme-accent: #22D3C5; --theme-accent-2: #F8C66D; } body[data-surface-theme="ember"] { --theme-page: #16070A; --theme-page-soft: #2A0D12; --theme-surface: rgba(35, 12, 17, 0.93); --theme-border: rgba(251, 146, 60, 0.28); --theme-text: #FFF7ED; --theme-muted: #F6CBAA; --theme-accent: #F97316; --theme-accent-2: #F43F5E; } body[data-surface-theme="violet"] { --theme-page: #120B24; --theme-page-soft: #20113E; --theme-surface: rgba(31, 18, 58, 0.93); --theme-border: rgba(192, 132, 252, 0.28); --theme-text: #FAF5FF; --theme-muted: #D8C4F3; --theme-accent: #C084FC; --theme-accent-2: #22D3EE; } body[data-surface-theme="graphite"] { --theme-page: #07080A; --theme-page-soft: #14171B; --theme-surface: rgba(18, 21, 25, 0.94); --theme-border: rgba(148, 163, 184, 0.24); --theme-text: #F8FAFC; --theme-muted: #B7C0CC; --theme-accent: #94A3B8; --theme-accent-2: #84CC16; } body[data-surface-theme] { --navy-deep: var(--theme-page); --navy-glass: var(--theme-surface); --text-main: var(--theme-text); --text-dim: var(--theme-muted); --gold: var(--theme-accent); --gold-bright: var(--theme-accent); --brand-gold: var(--theme-accent); background: var(--theme-page) !important; color: var(--theme-text) !important; } body[data-surface-theme] .view-main, body[data-surface-theme] .contacts-sidebar, body[data-surface-theme] .chat-main, body[data-surface-theme] .aura-dashboard, body[data-surface-theme] #view-social, body[data-surface-theme] #view-profile, body[data-surface-theme] .bottom-nav, body[data-surface-theme] .app-header { background: radial-gradient(circle at 14% 4%, color-mix(in srgb, var(--theme-accent) 18%, transparent), transparent 32%), radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--theme-accent-2) 16%, transparent), transparent 30%), linear-gradient(180deg, var(--theme-page-soft), var(--theme-page)) !important; } body[data-surface-theme] .dash-tile, body[data-surface-theme] .contact-item, body[data-surface-theme] .contacts-tabs, body[data-surface-theme] .chat-header, body[data-surface-theme] .chat-input-bar, body[data-surface-theme] .social-post-premium, body[data-surface-theme] .feed-composer, body[data-surface-theme] .profile-main-card, body[data-surface-theme] .profile-panel, body[data-surface-theme] .settings-section, body[data-surface-theme] .profile-preview-card, body[data-surface-theme] .profile-signal-card, body[data-surface-theme] .profile-insight-card { background: var(--theme-surface) !important; border-color: var(--theme-border) !important; color: var(--theme-text) !important; } body[data-surface-theme] .contact-name, body[data-surface-theme] .social-post-premium .post-author, body[data-surface-theme] .social-post-premium .post-body, body[data-surface-theme] #view-profile h1, body[data-surface-theme] #view-profile h2, body[data-surface-theme] #view-profile h3, body[data-surface-theme] .profile-field-label, body[data-surface-theme] .profile-preview-name, body[data-surface-theme] .sys-value { color: var(--theme-text) !important; } body[data-surface-theme] .social-post-premium .post-author, body[data-surface-theme] button.post-author { appearance: none !important; -webkit-appearance: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--theme-text) !important; padding: 0 !important; min-width: 0 !important; min-height: 0 !important; } body[data-surface-theme] .contact-status, body[data-surface-theme] .social-post-premium .post-time, body[data-surface-theme] .profile-save-status, body[data-surface-theme] .profile-signal-label, body[data-surface-theme] .dash-peek, body[data-surface-theme] .sys-label { color: var(--theme-muted) !important; } body[data-surface-theme] .surface-theme-option.active, body[data-surface-theme] .surface-theme-option:hover, body[data-surface-theme] .metis-btn-gold, body[data-surface-theme] .contact-tab-btn.active, body[data-surface-theme] .contact-filter-btn.active { background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-2)) !important; color: #071118 !important; border-color: var(--theme-accent) !important; } /* Custom app backgrounds must remain visible under every mobile theme. */ body[data-surface-theme][data-background-mode="color"] .view-main, body[data-surface-theme][data-background-mode="color"] .contacts-sidebar, body[data-surface-theme][data-background-mode="color"] .chat-main, body[data-surface-theme][data-background-mode="color"] .aura-dashboard, body[data-surface-theme][data-background-mode="color"] #view-social, body[data-surface-theme][data-background-mode="color"] #view-profile, body[data-surface-theme][data-background-mode="color"] .bottom-nav, body[data-surface-theme][data-background-mode="color"] .app-header, body[data-surface-theme][data-background-mode="image"] .view-main, body[data-surface-theme][data-background-mode="image"] .contacts-sidebar, body[data-surface-theme][data-background-mode="image"] .chat-main, body[data-surface-theme][data-background-mode="image"] .aura-dashboard, body[data-surface-theme][data-background-mode="image"] #view-social, body[data-surface-theme][data-background-mode="image"] #view-profile, body[data-surface-theme][data-background-mode="image"] .bottom-nav, body[data-surface-theme][data-background-mode="image"] .app-header { background: transparent !important; } body[data-surface-theme][data-background-mode="image"] #view-profile.active, body[data-surface-theme][data-background-mode="image"] #view-social.active { background: linear-gradient(180deg, rgba(5,10,15,0.18), rgba(5,10,15,0.34)) !important; } /* Mobile roster/profile reliability fixes */ #view-chat.active { min-height: 0 !important; overflow: hidden !important; } #view-chat .contacts-sidebar { min-height: 0 !important; overflow: hidden !important; } #view-chat .contacts-list { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain; padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important; } #view-chat .roster-section { min-height: 0 !important; } #view-chat .contact-avatar { width: 52px !important; height: 52px !important; min-width: 52px !important; flex: 0 0 52px !important; } #view-chat .contact-avatar img { width: 100% !important; height: 100% !important; display: block !important; } #view-chat .contact-avatar .avatar-fallback-initials { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } #view-chat.contacts-hidden { grid-template-columns: minmax(0, 1fr) !important; } #view-chat.contacts-hidden .contacts-sidebar { width: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; opacity: 0 !important; visibility: hidden !important; overflow: hidden !important; border: 0 !important; pointer-events: none !important; } #view-chat.contacts-hidden .chat-main { width: 100% !important; max-width: 100% !important; grid-column: 1 / -1 !important; position: relative !important; inset: auto !important; left: 0 !important; top: 0 !important; height: 100% !important; min-height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; } #view-chat.contacts-hidden .messages-area { flex: 1 1 auto !important; min-height: 0 !important; } .profile-mobile-grid { display: grid; gap: 14px; } .mobile-profile-toggle { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: rgba(255,255,255,0.05); color: var(--text-main); font-size: 13px; font-weight: 800; } .mobile-profile-toggle input { width: 20px; height: 20px; accent-color: var(--brand-gold); } /* Landscape layouts: keep portrait untouched, add dedicated horizontal shells. */ @media (orientation: landscape) and (max-height: 620px) { :root { --landscape-rail-width: 74px; --landscape-header-height: 0px; } body.is-mobile-device { overflow: hidden !important; } body.is-mobile-device .app-header { display: none !important; } body.is-mobile-device .app-content { margin-top: var(--safe-top) !important; margin-left: var(--landscape-rail-width) !important; width: calc(100vw - var(--landscape-rail-width)) !important; height: calc(100dvh - var(--safe-top)) !important; } body.is-mobile-device .bottom-nav { position: fixed !important; inset: 0 auto 0 0 !important; width: var(--landscape-rail-width) !important; height: 100dvh !important; padding: calc(10px + var(--safe-top)) 8px calc(10px + var(--safe-bottom)) !important; flex-direction: column !important; justify-content: center !important; gap: 8px !important; border-top: 0 !important; border-right: 1px solid rgba(217, 161, 62, 0.18) !important; } body.is-mobile-device .bottom-nav .nav-btn { width: 100% !important; height: 54px !important; min-width: 0 !important; flex: 0 0 auto !important; border-radius: 18px !important; } body.is-mobile-device .bottom-nav .nav-icon-box { width: 34px !important; height: 34px !important; font-size: 18px !important; } body.is-mobile-device .bottom-nav .nav-label { display: none !important; } body.is-mobile-device .view-main.active { height: 100% !important; min-height: 0 !important; overflow: auto !important; } body.is-mobile-device #view-home.active, body.is-mobile-device #view-social.active, body.is-mobile-device #view-profile.active, body.is-mobile-device #view-arcade.active { padding: 14px !important; padding-bottom: calc(14px + var(--safe-bottom)) !important; } body.is-mobile-device #view-chat.active { height: 100% !important; min-height: 0 !important; display: block !important; position: relative !important; overflow: hidden !important; } /* Quando la chat non � aperta, mostra la sidebar a schermo intero */ body.is-mobile-device #view-chat.active .contacts-sidebar { display: flex !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; overflow: hidden !important; } body.is-mobile-device #view-chat.active .chat-main { display: none !important; } /* Quando la chat � aperta, mostra solo la chat a schermo intero */ body.is-mobile-device.mobile-chat-open #view-chat.active .contacts-sidebar, body.is-mobile-device .app-container.mobile-chat-open #view-chat.active .contacts-sidebar { display: none !important; } body.is-mobile-device.mobile-chat-open #view-chat.active .chat-main, body.is-mobile-device .app-container.mobile-chat-open #view-chat.active .chat-main { display: flex !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; } body.is-mobile-device.mobile-chat-open .app-header { display: none !important; } body.is-mobile-device.mobile-chat-open .app-content { margin-top: var(--safe-top) !important; margin-left: var(--landscape-rail-width) !important; width: calc(100vw - var(--landscape-rail-width)) !important; } body.is-mobile-device .contacts-header { padding: 6px 10px 4px !important; } body.is-mobile-device .contacts-tabs { padding: 4px !important; border-radius: 12px !important; height: 38px !important; gap: 4px !important; } body.is-mobile-device .contact-tab-btn { min-height: 30px !important; height: 30px !important; padding: 0 10px !important; border-radius: 8px !important; font-size: 14px !important; } body.is-mobile-device .contacts-add-btn { width: 36px !important; min-width: 36px !important; height: 36px !important; border-radius: 10px !important; font-size: 16px !important; } body.is-mobile-device .contacts-search-toggle-btn { display: flex !important; width: 36px !important; height: 36px !important; line-height: 36px !important; border-radius: 10px !important; background: rgba(255,255,255,0.04) !important; color: rgba(232, 238, 240, 0.72) !important; border: 1px solid rgba(126, 223, 209, 0.12) !important; align-items: center !important; justify-content: center !important; padding: 0 !important; font-size: 14px !important; cursor: pointer !important; } body.is-mobile-device .contacts-search { display: none !important; } body.is-mobile-device .contacts-sidebar.search-visible .contacts-search { display: block !important; position: absolute !important; top: 52px !important; left: 8px !important; right: 8px !important; z-index: 1000 !important; background: rgba(16, 29, 38, 0.98) !important; border: 1px solid rgba(217, 161, 62, 0.3) !important; border-radius: 12px !important; padding: 6px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important; } body.is-mobile-device .contacts-sidebar.search-visible .contacts-search input { width: 100% !important; height: 34px !important; font-size: 14px !important; background: rgba(255,255,255,0.05) !important; border: none !important; border-radius: 8px !important; padding: 0 10px !important; color: #fff !important; } body.is-mobile-device .contacts-subfilters { padding: 4px 10px 4px !important; gap: 6px !important; } body.is-mobile-device .contact-filter-btn { padding: 6px 10px !important; font-size: 14px !important; min-width: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; } body.is-mobile-device .contact-filter-btn .filter-label { display: none !important; } body.is-mobile-device .contact-filter-btn .filter-icon { display: inline !important; margin: 0 !important; font-size: 16px !important; } body.is-mobile-device #view-chat .contacts-list { padding-bottom: calc(16px + var(--safe-bottom)) !important; } body.is-mobile-device .chat-header { height: 40px !important; min-height: 40px !important; padding: 0 12px !important; } body.is-mobile-device .chat-mobile-back { display: flex !important; } body.is-mobile-device .chat-input-area { position: relative !important; bottom: 0 !important; margin: 0 !important; width: 100% !important; padding: 6px 12px 6px !important; } } @media (orientation: landscape) and (max-height: 500px) { :root { --landscape-rail-width: 64px; --landscape-header-height: 0px; } body.is-mobile-device .app-header { display: none !important; } body.is-mobile-device .app-content, body.is-mobile-device.mobile-chat-open .app-content { margin-top: 0 !important; height: 100dvh !important; } body.is-mobile-device #view-chat.active { grid-template-columns: minmax(230px, 38vw) minmax(0, 1fr) !important; } body.is-mobile-device .bottom-nav .nav-btn { height: 46px !important; border-radius: 16px !important; } body.is-mobile-device #view-home.active { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; align-content: start !important; } body.is-mobile-device #view-home.active .dash-hero-welcome, body.is-mobile-device #view-home.active .dash-stats-grid { grid-column: span 2 !important; } } @media (orientation: landscape) and (min-width: 900px) and (min-height: 621px) { :root { --tablet-landscape-rail-width: 88px; } body.is-mobile-device .bottom-nav { position: fixed !important; inset: 0 auto 0 0 !important; width: var(--tablet-landscape-rail-width) !important; height: 100dvh !important; padding: calc(16px + var(--safe-top)) 10px calc(16px + var(--safe-bottom)) !important; flex-direction: column !important; justify-content: center !important; gap: 12px !important; border-top: 0 !important; border-right: 1px solid rgba(217, 161, 62, 0.18) !important; } body.is-mobile-device .bottom-nav .nav-label { display: none !important; } body.is-mobile-device .app-header { left: var(--tablet-landscape-rail-width) !important; width: calc(100% - var(--tablet-landscape-rail-width)) !important; } body.is-mobile-device .app-content { margin-left: var(--tablet-landscape-rail-width) !important; width: calc(100vw - var(--tablet-landscape-rail-width)) !important; } body.is-mobile-device #view-chat.active { height: 100% !important; display: grid !important; grid-template-columns: minmax(320px, 32vw) minmax(0, 1fr) !important; overflow: hidden !important; } body.is-mobile-device #view-chat.active .contacts-sidebar, body.is-mobile-device.mobile-chat-open #view-chat.active .contacts-sidebar, body.is-mobile-device .app-container.mobile-chat-open #view-chat.active .contacts-sidebar { display: flex !important; width: auto !important; height: 100% !important; } body.is-mobile-device #view-chat.active .chat-main, body.is-mobile-device.mobile-chat-open #view-chat.active .chat-main, body.is-mobile-device .app-container.mobile-chat-open #view-chat.active .chat-main { position: relative !important; inset: auto !important; left: auto !important; width: auto !important; height: 100% !important; transform: none !important; display: flex !important; flex-direction: column !important; padding-top: 8px !important; } body.is-mobile-device #view-chat.active.contacts-hidden { grid-template-columns: minmax(0, 1fr) !important; } body.is-mobile-device #view-chat.active.contacts-hidden .contacts-sidebar, body.is-mobile-device.mobile-chat-open #view-chat.active.contacts-hidden .contacts-sidebar { display: none !important; } body.is-mobile-device #view-chat.active.contacts-hidden .chat-main, body.is-mobile-device.mobile-chat-open #view-chat.active.contacts-hidden .chat-main { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; position: relative !important; inset: auto !important; left: 0 !important; top: 0 !important; height: 100% !important; min-height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; padding-top: 0 !important; margin-top: 0 !important; align-self: stretch !important; } body.is-mobile-device #view-chat.active.contacts-hidden .messages-area, body.is-mobile-device.mobile-chat-open #view-chat.active.contacts-hidden .messages-area { flex: 1 1 auto !important; min-height: 0 !important; padding-top: 0 !important; } } /* ========================================================================== ? GENERAL WALLPAPER RESOLUTION FOR MOBILE AND TABLET LAYOUTS ========================================================================== */ body[data-background-mode="color"] .view-main, body[data-background-mode="color"] .contacts-sidebar, body[data-background-mode="color"] .chat-main, body[data-background-mode="color"] .aura-dashboard, body[data-background-mode="color"] #view-social, body[data-background-mode="color"] #view-profile, body[data-background-mode="color"] .bottom-nav, body[data-background-mode="color"] .app-header, body[data-background-mode="color"] #view-chat, body[data-background-mode="color"] #view-chat.active, body[data-background-mode="color"] #view-chat.active .chat-main, body[data-background-mode="color"] #view-chat.active .contacts-sidebar, body[data-background-mode="color"] #view-chat.active.mobile-chat-open .chat-main, body[data-background-mode="image"] .view-main, body[data-background-mode="image"] .contacts-sidebar, body[data-background-mode="image"] .chat-main, body[data-background-mode="image"] .aura-dashboard, body[data-background-mode="image"] #view-social, body[data-background-mode="image"] #view-profile, body[data-background-mode="image"] .bottom-nav, body[data-background-mode="image"] .app-header, body[data-background-mode="image"] #view-chat, body[data-background-mode="image"] #view-chat.active, body[data-background-mode="image"] #view-chat.active .chat-main, body[data-background-mode="image"] #view-chat.active .contacts-sidebar, body[data-background-mode="image"] #view-chat.active.mobile-chat-open .chat-main { background: transparent !important; } /* Semi-translucent panels for readability over custom images */ body[data-background-mode="image"] #view-profile, body[data-background-mode="image"] #view-profile .aura-dashboard, body[data-background-mode="image"] #view-social, body[data-background-mode="image"] #view-social.active { background: linear-gradient(180deg, rgba(5, 10, 15, 0.18), rgba(5, 10, 15, 0.34)) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } body[data-background-mode="color"] #view-profile, body[data-background-mode="color"] #view-profile .aura-dashboard, body[data-background-mode="color"] #view-social, body[data-background-mode="color"] #view-social.active { background: transparent !important; } /* ========================================================== METIS MOBILE APP ADDITIONS: PROFILE SETTINGS CONTROLS ========================================================== */ .profile-settings-grid { display: flex; flex-direction: column; gap: 20px; width: 100%; } .settings-section { width: 100%; background: rgba(255, 255, 255, 0.02); padding: 20px; border-radius: 25px; border: 1px solid rgba(255, 255, 255, 0.06); box-sizing: border-box; } .settings-section h2 { color: #fff; font-size: 1.1rem; margin: 0 0 16px 0; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-weight: 700; } .theme-options { display: flex; gap: 12px; flex-wrap: wrap; } .theme-circle { width: 38px; height: 38px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.4); } .theme-circle:hover { transform: scale(1.1); } .theme-circle.active { border-color: #fff; transform: scale(1.1); } .theme-surface-switcher { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; } .profile-background-action { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .profile-background-copy strong { display: block; font-size: 13px; color: #fff; margin-bottom: 2px; } .profile-background-copy span { display: block; font-size: 10px; color: var(--theme-muted, #C9D4DC); line-height: 1.4; } .profile-background-current { font-size: 10px; color: var(--brand-gold, #D9A13E); margin-top: 6px; font-weight: 600; } .setting-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; color: #fff; font-size: 0.95rem; border-bottom: 1px solid rgba(255,255,255,0.03); } .setting-row:last-child { border-bottom: none; } /* Toggle Switch */ .toggle-switch { position: relative; display: inline-block; width: 46px; height: 24px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.1); transition: .3s; border-radius: 24px; border: 1px solid rgba(255,255,255,0.05); } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; } input:checked + .slider { background-color: var(--theme-accent, var(--brand-gold, #D9A13E)); border-color: transparent; } input:checked + .slider:before { transform: translateX(22px); background-color: #071118; } /* History Filters */ .intentional-history-filters { display: flex; gap: 4px; margin-bottom: 12px; } .intentional-history-filters button, .contact-filter-btn { flex: 1; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; padding: 8px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: 0.2s; } .intentional-history-filters button.active, .contact-filter-btn.active { background: linear-gradient(135deg, var(--theme-accent, var(--brand-gold)), var(--theme-accent-2, #7EDFD1)) !important; color: #071118 !important; border-color: var(--theme-accent, var(--brand-gold)) !important; } .intentional-history-list { display: flex; flex-direction: column; gap: 8px; max-height: 250px; overflow-y: auto; } .intentional-history-item { padding: 12px; border-radius: 16px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); } .intentional-history-item strong { color: #fff; display: block; font-size: 0.75rem; margin-bottom: 4px; } .intentional-history-item small { color: var(--theme-muted, #C9D4DC); display: block; font-size: 0.75rem; margin-top: 4px; } .intentional-history-item.accepted { border-color: rgba(34,197,94,0.25); } .intentional-history-item.rejected { border-color: rgba(239,68,68,0.25); } .intentional-history-item.archived { border-color: rgba(217,161,62,0.25); } .intentional-history-actions { display: flex; gap: 4px; margin-top: 8px; } .intentional-history-actions button { padding: 6px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: 800; } /* Audio Tools */ .audio-tools-copy { font-size: 0.8rem; color: var(--theme-muted, #C9D4DC); line-height: 1.4; margin-bottom: 12px; } .audio-tools-actions { display: flex; gap: 8px; margin-bottom: 12px; } .audio-tool-btn { flex: 1; padding: 10px 14px; border-radius: 12px; font-size: 0.75rem; font-weight: 800; } .profile-danger-btn { background: rgba(239, 68, 68, 0.14); color: #fff; border: 1px solid rgba(239, 68, 68, 0.35); padding: 10px 14px; border-radius: 12px; font-weight: 800; cursor: pointer; transition: 0.2s; } .profile-danger-btn:hover { background: rgba(239, 68, 68, 0.22); } .mic-test-panel { padding: 12px; border-radius: 16px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); } .mic-test-label-row { display: flex; justify-content: space-between; color: #fff; margin-bottom: 8px; font-size: 0.8rem; } .mic-test-meter { height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,0.06); } #mic-test-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #22C55E, var(--brand-gold, #D9A13E)); transition: width 0.12s linear; } .mic-test-playback { width: 100%; margin-top: 10px; } /* ========================================== METIS GROUP CALLS LAYOUT SYSTEM ========================================== */ /* Styling per il local video integrato nella griglia */ .pip-local-video.in-grid { position: relative !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 100% !important; border-radius: 12px !important; aspect-ratio: auto !important; z-index: 1 !important; box-shadow: none !important; transform: none !important; } .pip-local-video.in-grid video { border-radius: 12px !important; object-fit: cover !important; width: 100% !important; height: 100% !important; } /* Centra un elemento in basso se la griglia ha 3 elementi */ .grid-centered { grid-column: 1 / span 2 !important; width: calc(50% - 6px) !important; justify-self: center !important; } /* Base styles for landscape toggle buttons and filters */ .contacts-search-toggle-btn { display: none; } .contact-filter-btn .filter-icon { display: none; } body.is-mobile-device.mobile-chat-open .chat-mobile-back { display: flex !important; } /* --- FIX FOR LIGHT THEMES CONTRAST --- */ body[data-surface-theme="arctic"], body[data-surface-theme="sage"] { --text-main: #102033; } body[data-surface-theme="arctic"] .profile-name-edit, body[data-surface-theme="sage"] .profile-name-edit, body[data-surface-theme="arctic"] .profile-signal-card strong, body[data-surface-theme="sage"] .profile-signal-card strong, body[data-surface-theme="arctic"] .profile-insight-card strong, body[data-surface-theme="sage"] .profile-insight-card strong, body[data-surface-theme="arctic"] .profile-panel-header h2, body[data-surface-theme="sage"] .profile-panel-header h2, body[data-surface-theme="arctic"] .profile-field-label, body[data-surface-theme="sage"] .profile-field-label, body[data-surface-theme="arctic"] .profile-preview-name, body[data-surface-theme="sage"] .profile-preview-name, body[data-surface-theme="arctic"] .profile-principles-card h3, body[data-surface-theme="sage"] .profile-principles-card h3, body[data-surface-theme="arctic"] .profile-background-copy strong, body[data-surface-theme="sage"] .profile-background-copy strong, body[data-surface-theme="arctic"] .welcome-text h1, body[data-surface-theme="sage"] .welcome-text h1, body[data-surface-theme="arctic"] .sys-value, body[data-surface-theme="sage"] .sys-value, body[data-surface-theme="arctic"] .contact-name, body[data-surface-theme="sage"] .contact-name, body[data-surface-theme="arctic"] .chat-header h1, body[data-surface-theme="sage"] .chat-header h1, body[data-surface-theme="arctic"] .intentional-history-item strong, body[data-surface-theme="sage"] .intentional-history-item strong { color: var(--theme-text) !important; } /* --- LIGHT THEME TEXT VISIBILITY FIXES (ARTIC, SAND, SAGE) --- */ /* Ensure the sand theme has a dark text variable set if not already */ body[data-surface-theme="sage"] { --theme-text: #13251e !important; } /* Force dark text on all profile labels, headers, and descriptions for light themes */ body[data-surface-theme="arctic"] .profile-editor-panel *, body[data-surface-theme="sand"] .profile-editor-panel *, body[data-surface-theme="sage"] .profile-editor-panel *, body[data-surface-theme="arctic"] .mobile-theme-label, body[data-surface-theme="sand"] .mobile-theme-label, body[data-surface-theme="sage"] .mobile-theme-label, body[data-surface-theme="arctic"] .ringtone-copy strong, body[data-surface-theme="sand"] .ringtone-copy strong, body[data-surface-theme="sage"] .ringtone-copy strong, body[data-surface-theme="arctic"] .ringtone-copy span, body[data-surface-theme="sand"] .ringtone-copy span, body[data-surface-theme="sage"] .ringtone-copy span, body[data-surface-theme="arctic"] .profile-identity-block label, body[data-surface-theme="sand"] .profile-identity-block label, body[data-surface-theme="sage"] .profile-identity-block label { color: var(--theme-text) !important; text-shadow: none !important; } /* Force dark text and light backgrounds for inputs in light themes */ body[data-surface-theme="arctic"] .profile-editor-panel input, body[data-surface-theme="sand"] .profile-editor-panel input, body[data-surface-theme="sage"] .profile-editor-panel input, body[data-surface-theme="arctic"] .profile-editor-panel select, body[data-surface-theme="sand"] .profile-editor-panel select, body[data-surface-theme="sage"] .profile-editor-panel select, body[data-surface-theme="arctic"] .profile-editor-panel textarea, body[data-surface-theme="sand"] .profile-editor-panel textarea, body[data-surface-theme="sage"] .profile-editor-panel textarea, body[data-surface-theme="arctic"] .premium-input, body[data-surface-theme="sand"] .premium-input, body[data-surface-theme="sage"] .premium-input { color: var(--theme-text) !important; background: rgba(0, 0, 0, 0.05) !important; border-color: rgba(0, 0, 0, 0.15) !important; } /* Placeholders for light themes */ body[data-surface-theme="arctic"] .premium-input::placeholder, body[data-surface-theme="sand"] .premium-input::placeholder, body[data-surface-theme="sage"] .premium-input::placeholder { color: rgba(0, 0, 0, 0.4) !important; } /* Ensure the universal avatar button remains visible */ .universal-avatar-btn .action-button { background: var(--brand-gold) !important; color: #000 !important; } /* ============================================================ LIGHT THEME TEXT CONTRAST - SETTINGS SECTIONS Targets .settings-section h2, .setting-row span for arctic, sage, sand ============================================================ */ body[data-surface-theme="arctic"] .settings-section h2, body[data-surface-theme="sage"] .settings-section h2, body[data-surface-theme="sand"] .settings-section h2 { color: var(--theme-text) !important; border-bottom-color: var(--theme-border) !important; text-shadow: none !important; } body[data-surface-theme="arctic"] .setting-row, body[data-surface-theme="sage"] .setting-row, body[data-surface-theme="sand"] .setting-row { color: var(--theme-text) !important; border-bottom-color: var(--theme-border) !important; } body[data-surface-theme="arctic"] .setting-row span, body[data-surface-theme="sage"] .setting-row span, body[data-surface-theme="sand"] .setting-row span { color: var(--theme-text) !important; } body[data-surface-theme="arctic"] .settings-section p, body[data-surface-theme="sage"] .settings-section p, body[data-surface-theme="sand"] .settings-section p, body[data-surface-theme="arctic"] .audio-tools-copy, body[data-surface-theme="sage"] .audio-tools-copy, body[data-surface-theme="sand"] .audio-tools-copy { color: var(--theme-muted) !important; } /* Surface theme options (theme chips row) text */ body[data-surface-theme="arctic"] .surface-theme-option span:not(.theme-chip), body[data-surface-theme="sage"] .surface-theme-option span:not(.theme-chip), body[data-surface-theme="sand"] .surface-theme-option span:not(.theme-chip) { color: var(--theme-text) !important; } /* Ringtone rows */ body[data-surface-theme="arctic"] .ringtone-copy strong, body[data-surface-theme="sage"] .ringtone-copy strong, body[data-surface-theme="sand"] .ringtone-copy strong { color: var(--theme-text) !important; } body[data-surface-theme="arctic"] .ringtone-copy span, body[data-surface-theme="sage"] .ringtone-copy span, body[data-surface-theme="sand"] .ringtone-copy span { color: var(--theme-muted) !important; } /* mobile-theme-label */ body[data-surface-theme="arctic"] .mobile-theme-label, body[data-surface-theme="sage"] .mobile-theme-label, body[data-surface-theme="sand"] .mobile-theme-label { color: var(--theme-text) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100% !important; display: block !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: 1.5px !important; } /* login-field labels inside profile editor */ body[data-surface-theme="arctic"] .login-field label, body[data-surface-theme="sage"] .login-field label, body[data-surface-theme="sand"] .login-field label { color: var(--theme-accent) !important; } /* premium-input text in light themes */ body[data-surface-theme="arctic"] .premium-input, body[data-surface-theme="sage"] .premium-input, body[data-surface-theme="sand"] .premium-input { color: var(--theme-text) !important; background: rgba(0,0,0,0.05) !important; border-color: var(--theme-border) !important; } body[data-surface-theme="arctic"] .premium-input::placeholder, body[data-surface-theme="sage"] .premium-input::placeholder, body[data-surface-theme="sand"] .premium-input::placeholder { color: var(--theme-muted) !important; } /* nav-label text in bottom bar */ body[data-surface-theme="arctic"] .nav-label, body[data-surface-theme="sage"] .nav-label, body[data-surface-theme="sand"] .nav-label { color: var(--theme-text) !important; } /* select elements */ body[data-surface-theme="arctic"] select, body[data-surface-theme="sage"] select, body[data-surface-theme="sand"] select { color: var(--theme-text) !important; background: rgba(0,0,0,0.05) !important; } /* message input in chat */ body[data-surface-theme="arctic"] #message-input, body[data-surface-theme="arctic"] .message-input, body[data-surface-theme="sage"] #message-input, body[data-surface-theme="sage"] .message-input, body[data-surface-theme="sand"] #message-input, body[data-surface-theme="sand"] .message-input { color: var(--theme-text) !important; } body[data-surface-theme="arctic"] #message-input::placeholder, body[data-surface-theme="sage"] #message-input::placeholder, body[data-surface-theme="sand"] #message-input::placeholder { color: var(--theme-muted) !important; } /* received chat bubbles */ body[data-surface-theme="arctic"] .msg-bubble.received .msg-text, body[data-surface-theme="sage"] .msg-bubble.received .msg-text, body[data-surface-theme="sand"] .msg-bubble.received .msg-text { color: var(--theme-text) !important; } /* ========================================= FIX CHAT MOBILE OVERFLOW E LAYOUT ========================================= */ /* 1. Tasto Back Header Chat: pi? visibile, colorato e sempre accessibile */ #btn-mobile-roster-back { display: flex !important; align-items: center !important; justify-content: center !important; background: var(--brand-gold, #D9A13E) !important; color: #000 !important; border-radius: 12px !important; width: 42px !important; height: 42px !important; font-size: 20px !important; font-weight: 900 !important; box-shadow: 0 4px 10px rgba(217,161,62,0.4) !important; border: none !important; margin-right: 12px !important; cursor: pointer !important; flex-shrink: 0 !important; } /* 2. Fix Chat Main e Input Bar Overflow (Impedisce che la barra vada sotto il menu o fuori schermo) */ #view-chat .chat-main, #view-chat.active.contacts-hidden .chat-main, body.is-mobile-device.mobile-chat-open #view-chat.active.contacts-hidden .chat-main { box-sizing: border-box !important; max-width: 100vw !important; } /* 3. Fix Layout Orizzontale (Landscape): Permette di dividere lo schermo tra contatti e chat */ @media (orientation: landscape) { /* Rimuove il forzare la chat a coprire i contatti quando in orizzontale */ body.is-mobile-device #view-chat.active, body.is-mobile-device.mobile-chat-open #view-chat.active { display: grid !important; grid-template-columns: minmax(250px, 35vw) 1fr !important; } body.is-mobile-device #view-chat.active .contacts-sidebar, body.is-mobile-device.mobile-chat-open #view-chat.active .contacts-sidebar { display: flex !important; width: 100% !important; position: relative !important; border-right: 1px solid rgba(255,255,255,0.1) !important; } body.is-mobile-device #view-chat.active .chat-main, body.is-mobile-device.mobile-chat-open #view-chat.active .chat-main { display: flex !important; position: relative !important; width: 100% !important; height: 100% !important; } /* Se l'utente PREME il tasto fullscreen in landscape, allarga la chat al 100% */ body.is-mobile-device #view-chat.active.contacts-hidden { grid-template-columns: 0px 1fr !important; } body.is-mobile-device #view-chat.active.contacts-hidden .contacts-sidebar { display: none !important; } } /* 4. Fix Portrait Fullscreen: evita che la barra finisca sotto il menu */ @media (orientation: portrait) { body.is-mobile-device #view-chat.active.contacts-hidden .chat-main { /* Aggiungiamo margine inferiore per compensare la bottom-nav fissa */ padding-bottom: 70px !important; } .chat-input-area { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; /* Padding inferiore per sicurezza */ padding-bottom: env(safe-area-inset-bottom, 20px) !important; } .chat-input-bar { box-sizing: border-box !important; width: 100% !important; } } /* 5. Fix Dimensioni Font Chat e Input (Previene auto-zoom su iOS e migliora UI) */ .chat-input-bar input { font-size: 16px !important; } .send-btn { width: 44px !important; height: 44px !important; flex-shrink: 0 !important; } .msg-text { font-size: 15px !important; line-height: 1.4 !important; } /* 6. Fix Header Chat Nome e Sottotitolo */ #current-chat-name { font-family: 'Outfit', sans-serif !important; font-size: 19px !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: 0.3px !important; margin: 0 !important; text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important; } #my-jid-display { font-family: 'Outfit', sans-serif !important; font-size: 10px !important; font-weight: 600 !important; color: var(--brand-gold, #d9a13e) !important; opacity: 0.9 !important; letter-spacing: 0.2px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100% !important; display: block !important; } /* 7. Fix visibilita Views (Assicura che Musica, Giochi e Ricerca non collassino) */ .view-main.active { display: flex !important; flex-direction: column !important; } /* Modals for Mobile (Ported from style.css) */ .modal-overlay { position: fixed; inset: 0; z-index: 9999999; background: rgba(0,0,0,0.6); backdrop-filter: blur(15px); animation: fadeInModal 0.3s ease; } .modal-overlay:not(.is-hidden) { display: flex !important; align-items: center !important; justify-content: center !important; } @keyframes fadeInModal { from { opacity: 0; } to { opacity: 1; } } .user-modal-glass { position: relative; background: var(--navy-glass); border: 1px solid var(--border); border-radius: 32px; padding: 40px; width: 90%; max-width: 450px; text-align: center; color: #fff; box-shadow: 0 40px 100px rgba(0,0,0,0.5), 0 0 30px rgba(217,161,62,0.1); transform-origin: center; animation: popModal 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes popModal { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal-close-btn { position: absolute; top: 20px; right: 25px; background: none; border: none; font-size: 2rem; color: var(--text-dim); cursor: pointer; transition: 0.3s; } .modal-close-btn:hover { color: var(--danger); transform: rotate(90deg); } .modal-avatar-glow { width: 120px; height: 120px; margin: 0 auto 20px auto; border-radius: 50%; padding: 5px; background: linear-gradient(45deg, var(--gold), transparent); box-shadow: 0 0 20px var(--gold-bright); } .modal-avatar-glow img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #0b141b; } .status-indicator { font-size: 0.8rem; color: var(--success); text-transform: uppercase; letter-spacing: 2px; font-weight: 800; display: block; margin-top: 5px; } .modal-action-btn { width: 100%; padding: 15px; border-radius: 12px; font-weight: 800; cursor: pointer; border: none; margin-top: 20px; transition: 0.3s; } .modal-action-btn.primary { background: var(--gold); color: #000; box-shadow: 0 10px 20px rgba(217,161,62,0.3); } .modal-action-btn.primary:hover { transform: scale(1.02); box-shadow: 0 15px 30px rgba(217,161,62,0.5); } /* 8. Fix Altezza Views */ .view-main.active { height: 100% !important; min-height: 0 !important; overflow: auto !important; width: 100% !important; flex: 1 !important; display: flex !important; flex-direction: column !important; } /* App View Smooth Transition (Anti-Flicker) */ @keyframes viewFadeIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } .view-main.active { animation: viewFadeIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; } /* ===== MOBILE: NASCONDI PULSANTE ELIMINA CONTATTO (X ROSSA) ===== */ /* Su mobile e' troppo facile cliccarla per errore. Si puo' eliminare aprendo il profilo */ body.is-mobile-device .delete-contact-btn, body.is-mobile-device .contact-item .contact-actions button.delete-contact-btn { display: none !important; } /* =================================================================== CHAT IMMERSIVA MOBILE - FULLSCREEN TOGGLE Quando l'utente preme il tasto fullscreen in chat: - JS aggiunge "contacts-hidden" su #view-chat - Il menu sparisce e la chat riempie TUTTO lo schermo - Ripremendo: il menu ritorna, la chat fa spazio =================================================================== */ /* DEFAULT: in chat su mobile il menu e' VISIBILE */ body.is-mobile-device.mobile-chat-open .bottom-nav { display: flex !important; } /* Quando contacts-hidden e' attivo: menu SPARISCE, chat a tutto schermo */ body.is-mobile-device.mobile-chat-open #view-chat.active.contacts-hidden ~ * .bottom-nav, body.is-mobile-device.mobile-chat-open:has(#view-chat.active.contacts-hidden) .bottom-nav { display: none !important; } /* Chat occupa tutto lo schermo in fullscreen */ body.is-mobile-device.mobile-chat-open:has(#view-chat.active.contacts-hidden) .app-content, body.is-mobile-device.mobile-chat-open:has(#view-chat.active.contacts-hidden) #view-chat.active, body.is-mobile-device.mobile-chat-open:has(#view-chat.active.contacts-hidden) #view-chat.active .chat-main { height: 100dvh !important; max-height: 100dvh !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Senza fullscreen: spazio per il menu in fondo */ body.is-mobile-device.mobile-chat-open #view-chat.active:not(.contacts-hidden) .chat-main { height: calc(100dvh - 70px) !important; padding-bottom: 0 !important; } /* Input area: padding per safe area in fullscreen */ body.is-mobile-device.mobile-chat-open:has(#view-chat.active.contacts-hidden) .chat-input-area { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important; } /* ===== NASCONDI PULSANTE ELIMINA CONTATTO (X ROSSA) SU MOBILE ===== */ body.is-mobile-device .delete-contact-btn, body.is-mobile-device .contact-item .contact-actions button.delete-contact-btn { display: none !important; } /* LIGHT THEMES TEXT CONTRAST FIXES */ body[data-surface-theme="arctic"] .contact-status-offline, body[data-surface-theme="sage"] .contact-status-offline, body[data-surface-theme="sand"] .contact-status-offline, body[data-surface-theme="minimal"] .contact-status-offline, body[data-surface-theme="lagoon"] .contact-status-offline { color: rgba(0, 0, 0, 0.6) !important; } body[data-surface-theme="arctic"] .contact-status, body[data-surface-theme="sage"] .contact-status, body[data-surface-theme="sand"] .contact-status, body[data-surface-theme="minimal"] .contact-status, body[data-surface-theme="lagoon"] .contact-status { color: var(--theme-text) !important; } body[data-surface-theme="arctic"] .contact-name, body[data-surface-theme="sage"] .contact-name, body[data-surface-theme="sand"] .contact-name, body[data-surface-theme="minimal"] .contact-name, body[data-surface-theme="lagoon"] .contact-name { color: var(--theme-text) !important; text-shadow: none !important; } /* BUSINESS THEME (Professional Dark) */ /* MINIMAL THEME (Professional Light) */ /* COMPREHENSIVE PREMIUM UI OVERHAUL (Universal Compatibility) */ .bottom-nav { background: var(--theme-surface) !important; backdrop-filter: blur(25px) saturate(180%) !important; -webkit-backdrop-filter: blur(25px) saturate(180%) !important; border-top: 1px solid rgba(128, 128, 128, 0.15) !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.05) !important; } body[data-surface-theme] .nav-label, body[data-surface-theme] .nav-icon-box { color: var(--theme-text) !important; opacity: 0.6; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } body[data-surface-theme] .active-tab .nav-label, body[data-surface-theme] .active-tab .nav-icon-box { color: var(--theme-accent) !important; opacity: 1; text-shadow: 0 0 10px rgba(128, 128, 128, 0.3); } /* Contact Filter Tabs (Tutto, Amici, Attese) */ body[data-surface-theme] .contact-filter-btn { color: var(--theme-text) !important; background: rgba(128, 128, 128, 0.08) !important; border: 1px solid rgba(128, 128, 128, 0.1) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-radius: 12px !important; font-weight: 600 !important; transition: all 0.3s ease; opacity: 0.8; } body[data-surface-theme] .contact-filter-btn.active { color: #ffffff !important; background: var(--theme-accent) !important; border-color: var(--theme-accent) !important; opacity: 1; box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; } body[data-surface-theme="minimal"] .contact-filter-btn.active { color: #ffffff !important; background: #000000 !important; border-color: #000000 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important; } /* Search Bar */ body[data-surface-theme] #roster-search { background: var(--theme-surface) !important; color: var(--theme-text) !important; border: 1px solid rgba(128, 128, 128, 0.15) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border-radius: 16px !important; box-shadow: inset 0 2px 5px rgba(0,0,0,0.02) !important; } body[data-surface-theme] #roster-search::placeholder { color: var(--theme-text) !important; opacity: 0.5; } /* Header fix */ body[data-surface-theme] .app-header { background: var(--theme-surface) !important; backdrop-filter: blur(25px) saturate(180%) !important; -webkit-backdrop-filter: blur(25px) saturate(180%) !important; border-bottom: 1px solid rgba(128, 128, 128, 0.15) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important; } /* Contact List Background Fix for Light Themes on Custom BGs */ body[data-surface-theme] .msg-contact-item { background: var(--theme-surface) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(128, 128, 128, 0.08) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important; } /* --- REDESIGNED THEMES --- */ body[data-surface-theme="arctic"] { --theme-page: #F8FAFC; --theme-page-soft: #F1F5F9; --theme-surface: rgba(255, 255, 255, 0.90); --theme-border: rgba(15, 23, 42, 0.08); --theme-text: #0F172A; --theme-muted: #64748B; --theme-accent: #007AFF; --theme-accent-2: #0EA5E9; background: #F8FAFC !important; } body[data-surface-theme="sand"] { --theme-page: #FDFBF7; --theme-page-soft: #F5EFE6; --theme-surface: rgba(250, 246, 240, 0.90); --theme-border: rgba(62, 39, 35, 0.08); --theme-text: #3E2723; --theme-muted: #8D6E63; --theme-accent: #D84315; --theme-accent-2: #E64A19; background: #FDFBF7 !important; } body[data-surface-theme="business"] { --theme-surface: rgba(15, 23, 42, 0.90); --theme-border: rgba(255, 255, 255, 0.1); --theme-text: #F8FAFC; --theme-muted: #94A3B8; --theme-accent: #38BDF8; --theme-accent-2: #0EA5E9; background: #0F172A !important; } .theme-chip-business { background: #0F172A; border: 1px solid #38BDF8; } body[data-surface-theme="minimal"] { --theme-surface: rgba(255, 255, 255, 0.95); --theme-border: rgba(0, 0, 0, 0.1); --theme-text: #000000; --theme-muted: #737373; --theme-accent: #000000; --theme-accent-2: #404040; background: #FFFFFF !important; } .theme-chip-minimal { background: #ffffff; border: 1px solid #000000; } /* --- IMMERSIVE VIDEO CALL UI V2 --- */ #call-overlay.connected:not(.is-hidden) { display: flex !important; position: fixed !important; inset: 0 !important; z-index: 99999 !important; background: #000 !important; } #call-overlay.connected:not(.is-hidden) .call-header-info { display: none !important; } #call-overlay.connected:not(.is-hidden) #video-container { position: absolute !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; } #call-overlay.connected:not(.is-hidden) #remote-videos-grid { width: 100% !important; height: 100% !important; } #call-overlay.connected:not(.is-hidden) #remote-video { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; max-height: none !important; } /* Floating Controls */ #call-overlay.connected:not(.is-hidden) #stream-tools { position: absolute !important; bottom: 20px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 100 !important; background: rgba(0,0,0,0.6) !important; padding: 10px 20px !important; border-radius: 40px !important; backdrop-filter: blur(10px) !important; justify-content: center !important; } /* Local PIP Draggable (Size) */ #call-overlay.connected:not(.is-hidden) #pip-local-video { position: absolute !important; width: 100px !important; height: 140px !important; border-radius: 12px !important; overflow: hidden !important; z-index: 90 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important; /* Remove transitions to allow instant drag */ transition: none !important; } /* --- ELITE WHITEBOARD MOCKUP --- */ .whiteboard-mockup-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; pointer-events: none; /* Allows clicks to pass through empty space */ } .whiteboard-mockup-overlay.is-hidden { display: none !important; } .whiteboard-mockup-window { width: 90vw; height: 60vh; border-radius: 20px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 15px 35px rgba(0,0,0,0.5); pointer-events: auto; /* Catch drawing touches */ position: relative; overflow: hidden; } .whiteboard-mockup-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: crosshair; } .whiteboard-mockup-tools { background: rgba(20, 25, 35, 0.85); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: 30px; padding: 12px 24px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 10px 30px rgba(0,0,0,0.6); pointer-events: auto; /* Catch tool touches */ max-width: 95vw; } .wb-tool-btn { width: 44px; height: 44px; border-radius: 22px; border: none; background: transparent; color: #94A3B8; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; transition: all 0.2s; } .wb-tool-btn i { width: 22px; height: 22px; } .wb-tool-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } .wb-tool-btn.active { background: #1E293B; color: #60A5FA; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); } .wb-tool-btn.wb-close-btn { color: #EF4444; } .wb-tool-btn.wb-close-btn:hover { background: rgba(239, 68, 68, 0.2); } .wb-colors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 5px; } .wb-color-dot { width: 20px; height: 20px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; transition: transform 0.2s, border-color 0.2s; } .wb-color-dot:hover { transform: scale(1.1); } .wb-color-dot.active { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 8px rgba(255,255,255,0.5); } .wb-tool-divider { width: 1px; height: 30px; background: rgba(255, 255, 255, 0.2); margin: 0 5px; } /* --- Missing HUD Button Styles --- */ .call-actions-hud { z-index: 1001 !important; } .hud-btn { width: 60px; height: 60px; border-radius: 50%; border: none; font-size: 1.5rem; cursor: pointer; background: rgba(255,255,255,0.1); color: #fff; backdrop-filter: blur(10px); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: center; align-items: center; } .hud-btn:hover { transform: scale(1.15); background: rgba(255,255,255,0.2); } .hud-btn.accept { background: #22c55e !important; box-shadow: 0 0 20px rgba(34, 197, 94, 0.4); border: none; } .hud-btn.hangup { background: #ef4444 !important; box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); border: none; } .hidden-while-ringing { display: none !important; } .call-overlay-immersiv:not(.is-hidden).connected .hidden-while-ringing { display: flex !important; } #btn-call-add-participant { display: flex !important; visibility: visible !important; opacity: 1 !important; } .call-overlay-immersiv:not(.is-hidden).connected .accept { display: none !important; } body.call-overlay-active .mobile-nav { display: none !important; } body.is-native-app .pip-local-video { display: none !important; } /* --- REDESIGN MENU CONTATTI (SEGMENTED CONTROL + FAB) --- */ .contacts-header.modern-header { padding: 16px; background: transparent; border-bottom: 1px solid rgba(255,255,255,0.05); } .contacts-segmented-control { position: relative; display: flex; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 4px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.4); z-index: 10; } .seg-slider { position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); width: calc(33.333% - 2.66px); /* 3 segments */ background: linear-gradient(135deg, var(--gold, #D9A13E), #F2C94C); border-radius: 8px; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 1; box-shadow: 0 4px 12px rgba(217, 161, 62, 0.3); } .seg-btn { flex: 1; position: relative; z-index: 2; background: transparent; border: none; color: rgba(255,255,255,0.5); font-size: 0.75rem; font-weight: 700; padding: 10px 0; cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; border-radius: 8px; transition: color 0.3s ease; text-align: center; flex-direction: column !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; } .seg-icon { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); transition: transform 0.2s ease; } .seg-btn.active .seg-icon { transform: scale(1.15); } /* Dynamic Slider Movement */ .contacts-segmented-control:has(#btn-seg-chat.active) .seg-slider { transform: translateX(0); } .contacts-segmented-control:has(#btn-seg-discovery.active) .seg-slider { transform: translateX(100%); } .contacts-segmented-control:has(#btn-seg-intentional.active) .seg-slider { transform: translateX(200%); } /* Hide subfilters when not in Chat mode */ body:has(#btn-seg-discovery.active) .contacts-subfilters, body:has(#btn-seg-intentional.active) .contacts-subfilters { display: none !important; } /* Modern FAB Add Button */ .modern-fab-add { position: absolute; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--theme-accent, #D9A13E), var(--theme-accent-2, #F2C94C)); color: #1a1a1a; border: none; box-shadow: 0 12px 24px rgba(0,0,0,0.3), 0 4px 8px rgba(217, 161, 62, 0.4); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease; z-index: 50; } .modern-fab-add:hover { transform: scale(1.08) translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.4), 0 8px 16px rgba(217, 161, 62, 0.5); } .modern-fab-add:active { transform: scale(0.95); } .modern-fab-add svg { width: 24px; height: 24px; } /* --- FIX LANDSCAPE MOBILE CHAT (REDESIGN) --- */ @media (orientation: landscape) { /* 1. Reset max-width and centering for chat main in landscape so it fills the space and doesn't leave empty gaps */ body.is-mobile-device #view-chat.active .chat-main, body.is-mobile-device.mobile-chat-open #view-chat.active .chat-main { max-width: 100% !important; margin: 0 !important; padding-bottom: 0 !important; /* Side rail is active, no bottom nav! */ } /* 2. Fix floating input bar - stick it strictly to the bottom of its container */ body.is-mobile-device .chat-input-area { position: relative !important; width: 100% !important; left: auto !important; bottom: 0 !important; margin: 0 !important; } /* 3. When fullscreen is toggled, ensure grid is clean and fills the screen */ body.is-mobile-device #view-chat.active.contacts-hidden { grid-template-columns: 0px 1fr !important; display: grid !important; } } /* OVERRIDE DEFINITIVO PER I TASTI SEGMENTATI */ .seg-btn { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; padding: 6px 0 !important; } .seg-label { display: block !important; width: 100% !important; text-align: center !important; font-size: 11px !important; line-height: 1 !important; overflow: visible !important; white-space: nowrap !important; margin: 0 !important; } .seg-icon { width: 24px !important; height: 24px !important; margin: 0 !important; display: block !important; } /* FIX DEFINITIVO LARGHEZZA CONTENITORE SEGMENTED CONTROL */ .contacts-header.modern-header { flex-direction: column !important; align-items: stretch !important; } .contacts-segmented-control { width: 100% !important; } /* FIX ESTREMO LARGHEZZA TASTI E CONTENITORI (FORZATO AL 100%) */ .contacts-header.modern-header { display: flex !important; width: 100% !important; flex-direction: column !important; align-items: stretch !important; padding: 16px 16px 10px 16px !important; box-sizing: border-box !important; } .contacts-segmented-control { display: flex !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .seg-btn { flex: 1 !important; min-width: 0 !important; width: 100% !important; } /* RIPRISTINO DIMENSIONI NORMALI PER MOBILE (NON RIMPICCIOLITE) */ body.is-mobile-device .seg-icon, @media (max-width: 800px) { .seg-icon { width: 28px !important; height: 28px !important; } .seg-label { font-size: 11px !important; } } /* METIS_MOBILE_GOOGLE_AUTH_UI_V1 */ .metis-auth-divider{display:flex;align-items:center;gap:10px;margin:13px 0 11px;color:#94a3b8;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.metis-auth-divider:before,.metis-auth-divider:after{content:'';height:1px;flex:1;background:rgba(148,163,184,.18)}.google-login-btn{width:100%;min-height:46px;padding:10px 14px;border-radius:12px;border:1px solid rgba(148,163,184,.28);background:rgba(255,255,255,.97);color:#17212b;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-size:13px;box-shadow:0 8px 22px rgba(0,0,0,.16)}.google-login-mark{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:900 15px/1 Arial,sans-serif;color:#4285f4;background:#fff;border:1px solid rgba(0,0,0,.08)} /* METIS_SELECTED_CHAT_ORBIT_MOBILE_V1 */ @property --metis-chat-orbit-angle{syntax:'';initial-value:0deg;inherits:false}.roster-section-selected .contact-item.active{isolation:isolate!important;border-color:rgba(217,161,62,.20)!important}.roster-section-selected .contact-item.active:before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:5;background:conic-gradient(from var(--metis-chat-orbit-angle),transparent 0deg,transparent 270deg,rgba(217,161,62,.22) 292deg,var(--theme-accent,#d9a13e) 315deg,rgba(255,255,255,.92) 326deg,var(--theme-accent,#d9a13e) 338deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:metis-chat-orbit-mobile 3.2s linear infinite;filter:drop-shadow(0 0 4px rgba(217,161,62,.36))}@keyframes metis-chat-orbit-mobile{to{--metis-chat-orbit-angle:360deg}}@media(prefers-reduced-motion:reduce){.roster-section-selected .contact-item.active:before{animation:none}} /* METIS_MOBILE_CHAT_DETAIL_FIX_V1 */ /* Back chat sempre leggibile: colori fissi e indipendenti dal tema utente. */ body.is-mobile-device #btn-mobile-roster-back, body.is-mobile-device[data-surface-theme] #btn-mobile-roster-back, body.mobile-chat-open #btn-mobile-roster-back { position: relative !important; z-index: 5000 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; min-width: 42px !important; height: 42px !important; padding: 0 !important; margin-right: 10px !important; flex: 0 0 42px !important; border-radius: 12px !important; background: rgba(5, 15, 22, 0.96) !important; color: #ffffff !important; border: 2px solid rgba(255, 255, 255, 0.92) !important; box-shadow: 0 5px 18px rgba(0,0,0,0.48), 0 0 0 2px rgba(0,0,0,0.28) !important; opacity: 1 !important; visibility: visible !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.is-mobile-device #btn-mobile-roster-back svg, body.is-mobile-device[data-surface-theme] #btn-mobile-roster-back svg { display: block !important; width: 24px !important; height: 24px !important; stroke: #ffffff !important; color: #ffffff !important; opacity: 1 !important; filter: none !important; } /* In fullscreen il back resta sopra a header, sfondi e overlay estetici. */ body.is-mobile-device #view-chat.active.contacts-hidden #btn-mobile-roster-back { z-index: 6000 !important; } /* METIS_CHAT_BACK_GLYPH_HARD_FIX_V2 */ body.is-mobile-device #btn-mobile-roster-back, body.mobile-chat-open #btn-mobile-roster-back, body.is-mobile-device[data-surface-theme] #btn-mobile-roster-back { background: #ffffff !important; color: #071118 !important; border: 2px solid #071118 !important; box-shadow: 0 5px 18px rgba(0,0,0,.48), 0 0 0 2px rgba(255,255,255,.55) !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; } body.is-mobile-device #btn-mobile-roster-back .metis-chat-back-glyph, body.mobile-chat-open #btn-mobile-roster-back .metis-chat-back-glyph, body.is-mobile-device[data-surface-theme] #btn-mobile-roster-back .metis-chat-back-glyph { display: block !important; color: #071118 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 30px !important; font-weight: 900 !important; line-height: 34px !important; width: 34px !important; height: 34px !important; text-align: center !important; opacity: 1 !important; visibility: visible !important; transform: none !important; text-shadow: none !important; } /* METIS_CHAT_BACK_LAYOUT_HARD_FIX_V3 */ @media (max-width: 900px) { body.is-mobile-device #main-chat-header { position: relative !important; min-height: 58px !important; height: 58px !important; padding: 0 8px 0 64px !important; gap: 6px !important; overflow: visible !important; } body.is-mobile-device #btn-mobile-roster-back { position: absolute !important; left: 10px !important; top: 50% !important; transform: translateY(-50%) !important; width: 44px !important; min-width: 44px !important; height: 44px !important; margin: 0 !important; z-index: 2147483000 !important; background: #ffffff !important; color: #071118 !important; border: 2px solid #071118 !important; border-radius: 12px !important; box-shadow: 0 4px 16px rgba(0,0,0,.55) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } body.is-mobile-device #btn-mobile-roster-back .metis-chat-back-glyph { display: block !important; color: #071118 !important; font: 900 30px/1 Arial, Helvetica, sans-serif !important; width: 32px !important; height: 32px !important; line-height: 30px !important; text-align: center !important; } body.is-mobile-device #main-chat-header .chat-header-info { min-width: 0 !important; overflow: hidden !important; } body.is-mobile-device #main-chat-header .chat-header-actions { flex: 0 0 auto !important; gap: 4px !important; } body.is-mobile-device #main-chat-header .chat-header-actions button { width: 38px !important; min-width: 38px !important; height: 38px !important; padding: 0 !important; } } /* METIS_LANDSCAPE_CHAT_NO_NAV_V1 */ @media (orientation: landscape) { body.is-mobile-device.mobile-chat-open .bottom-nav, body.is-mobile-device .app-container.mobile-chat-open .bottom-nav { display: none !important; } body.is-mobile-device.mobile-chat-open .app-header, body.is-mobile-device .app-container.mobile-chat-open ~ .app-header { display: none !important; } body.is-mobile-device.mobile-chat-open .app-content, body.is-mobile-device .app-container.mobile-chat-open .app-content { margin: 0 !important; margin-left: 0 !important; margin-top: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; padding: 0 !important; } body.is-mobile-device.mobile-chat-open #view-chat.active, body.is-mobile-device .app-container.mobile-chat-open #view-chat.active, body.is-mobile-device.mobile-chat-open #view-chat.active .chat-main, body.is-mobile-device .app-container.mobile-chat-open #view-chat.active .chat-main { width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; margin: 0 !important; inset: 0 !important; } body.is-mobile-device.mobile-chat-open #view-chat.active .chat-input-area, body.is-mobile-device .app-container.mobile-chat-open #view-chat.active .chat-input-area { padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important; } } /* METIS_LANDSCAPE_CHAT_HEADER_SAFE_V1 */ @media (orientation: landscape) { body.is-mobile-device.mobile-chat-open #main-chat-header, body.is-mobile-device .app-container.mobile-chat-open #main-chat-header { position: relative !important; box-sizing: border-box !important; width: 100% !important; min-height: 64px !important; height: 64px !important; padding-top: max(6px, env(safe-area-inset-top, 0px)) !important; padding-bottom: 4px !important; padding-left: calc(60px + max(8px, env(safe-area-inset-left, 0px))) !important; padding-right: max(8px, env(safe-area-inset-right, 0px)) !important; gap: 5px !important; overflow: visible !important; flex: 0 0 64px !important; z-index: 5000 !important; } body.is-mobile-device.mobile-chat-open #btn-mobile-roster-back, body.is-mobile-device .app-container.mobile-chat-open #btn-mobile-roster-back { left: max(8px, env(safe-area-inset-left, 0px)) !important; top: calc(50% + max(2px, env(safe-area-inset-top, 0px) / 2)) !important; width: 40px !important; min-width: 40px !important; height: 40px !important; flex-basis: 40px !important; } body.is-mobile-device.mobile-chat-open #main-chat-header .chat-header-info, body.is-mobile-device .app-container.mobile-chat-open #main-chat-header .chat-header-info { min-width: 110px !important; flex: 1 1 auto !important; overflow: hidden !important; } body.is-mobile-device.mobile-chat-open #main-chat-header .chat-header-actions, body.is-mobile-device .app-container.mobile-chat-open #main-chat-header .chat-header-actions { display: flex !important; align-items: center !important; flex: 0 0 auto !important; gap: 4px !important; max-width: calc(100vw - 260px) !important; overflow: visible !important; } body.is-mobile-device.mobile-chat-open #main-chat-header .chat-header-actions button, body.is-mobile-device .app-container.mobile-chat-open #main-chat-header .chat-header-actions button { width: 36px !important; min-width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 11px !important; } body.is-mobile-device.mobile-chat-open #current-chat-name { font-size: 17px !important; line-height: 1.05 !important; } body.is-mobile-device.mobile-chat-open #my-jid-display { font-size: 9px !important; line-height: 1.05 !important; } } /* METIS_LANDSCAPE_CHAT_UNIFIED_V2 */ @media (orientation: landscape) { /* LISTA CONTATTI: menu completo e non tagliato */ body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contacts-sidebar { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contacts-header.modern-header { flex: 0 0 auto !important; padding: 8px 10px 6px !important; overflow: visible !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contacts-segmented-control { width: 100% !important; min-height: 66px !important; height: 66px !important; padding: 4px !important; box-sizing: border-box !important; overflow: hidden !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .seg-btn { min-height: 56px !important; height: 56px !important; padding: 4px 0 !important; gap: 2px !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .seg-icon { width: 24px !important; height: 24px !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .seg-label { display: block !important; font-size: 11px !important; line-height: 1.05 !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contacts-subfilters { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; flex: 0 0 44px !important; min-height: 44px !important; height: 44px !important; padding: 4px 10px 6px !important; gap: 6px !important; overflow: visible !important; box-sizing: border-box !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contact-filter-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; min-height: 34px !important; height: 34px !important; padding: 0 10px !important; border-radius: 10px !important; font-size: 12px !important; line-height: 1 !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contact-filter-btn .filter-label { display: inline !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contact-filter-btn .filter-icon { display: none !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contacts-list { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; } /* CHAT APERTA: niente rail/sidebar fantasma */ body.is-mobile-device.mobile-chat-open #view-chat.active { display: grid !important; grid-template-columns: minmax(0,1fr) !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important; inset: 0 !important; overflow: hidden !important; } body.is-mobile-device.mobile-chat-open #view-chat.active .contacts-sidebar { display: none !important; width: 0 !important; min-width: 0 !important; height: 0 !important; visibility: hidden !important; pointer-events: none !important; } body.is-mobile-device.mobile-chat-open #view-chat.active .chat-main { display: flex !important; grid-column: 1 / -1 !important; position: relative !important; left: 0 !important; top: 0 !important; inset: auto !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; transform: none !important; } body.is-mobile-device.mobile-chat-open #app > .app-content { margin: 0 !important; margin-left: 0 !important; margin-top: 0 !important; left: 0 !important; top: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; padding: 0 !important; } } /* METIS_LANDSCAPE_ROSTER_TOOLBAR_V3 */ @media (orientation: landscape) { body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contacts-sidebar { display: grid !important; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr) !important; grid-template-rows: 54px minmax(0, 1fr) !important; gap: 6px 10px !important; padding: 6px 10px 8px !important; box-sizing: border-box !important; width: 100% !important; height: 100% !important; overflow: hidden !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contacts-header.modern-header { grid-column: 1 !important; grid-row: 1 !important; display: block !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; height: 54px !important; border: 0 !important; overflow: visible !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contacts-segmented-control { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; width: 100% !important; height: 54px !important; min-height: 54px !important; padding: 4px !important; gap: 4px !important; border-radius: 16px !important; overflow: hidden !important; box-sizing: border-box !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .seg-slider { display: none !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .seg-btn { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; padding: 0 12px !important; border-radius: 12px !important; color: rgba(255,255,255,.72) !important; background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.06) !important; box-sizing: border-box !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .seg-btn.active { background: linear-gradient(135deg, var(--theme-accent,#29d0c2), var(--theme-accent-2,#f0c86f)) !important; color: #071118 !important; border-color: transparent !important; box-shadow: none !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .seg-icon { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; transform: none !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .seg-label { display: inline !important; width: auto !important; font-size: 12px !important; line-height: 1 !important; white-space: nowrap !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contacts-subfilters { grid-column: 2 !important; grid-row: 1 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; align-items: stretch !important; width: 100% !important; height: 54px !important; min-height: 54px !important; padding: 4px !important; margin: 0 !important; gap: 4px !important; overflow: hidden !important; border-radius: 16px !important; background: rgba(15,23,42,.45) !important; border: 1px solid rgba(255,255,255,.07) !important; box-sizing: border-box !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contact-filter-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; padding: 0 8px !important; margin: 0 !important; border-radius: 12px !important; font-size: 11px !important; line-height: 1 !important; white-space: nowrap !important; box-sizing: border-box !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contact-filter-btn .filter-label { display: inline !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contact-filter-btn .filter-icon { display: none !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contacts-search { display: none !important; } body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contacts-list { grid-column: 1 / -1 !important; grid-row: 2 !important; min-height: 0 !important; overflow-y: auto !important; padding-top: 0 !important; } } /* METIS_LANDSCAPE_BACK_CORNER_V4 */ @media (orientation: landscape) { body.is-mobile-device.mobile-chat-open #btn-mobile-roster-back { position: fixed !important; left: max(8px, env(safe-area-inset-left, 0px)) !important; top: max(8px, env(safe-area-inset-top, 0px)) !important; right: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; flex: 0 0 44px !important; z-index: 2147483600 !important; background: #ffffff !important; color: #071118 !important; border: 2px solid #071118 !important; border-radius: 12px !important; box-shadow: 0 4px 14px rgba(0,0,0,.48) !important; } body.is-mobile-device.mobile-chat-open #btn-mobile-roster-back .metis-chat-back-glyph { display: block !important; width: 32px !important; height: 32px !important; color: #071118 !important; font: 900 30px/30px Arial, Helvetica, sans-serif !important; text-align: center !important; } body.is-mobile-device.mobile-chat-open #main-chat-header { padding-left: calc(62px + max(8px, env(safe-area-inset-left, 0px))) !important; } } /* ============================================================ METIS V190 PROD — MODERN THEME + CHAT LAYOUT Promoted after Edge device QA on 2026-09-18. ============================================================ */ body[data-theme-preset] { color-scheme: dark; --text-main: var(--theme-text) !important; --text-dim: var(--theme-muted) !important; } body[data-theme-preset] #current-chat-name, body[data-theme-preset] #my-jid-display, body[data-theme-preset] .nav-label, body[data-theme-preset] .settings-section, body[data-theme-preset] .settings-section h2, body[data-theme-preset] .setting-row, body[data-theme-preset] .setting-row span, body[data-theme-preset] .profile-background-copy strong, body[data-theme-preset] .profile-background-copy span { color: var(--theme-text) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } body[data-theme-preset] #my-jid-display, body[data-theme-preset] .profile-background-copy span, body[data-theme-preset] .contact-status, body[data-theme-preset] .sys-label, body[data-theme-preset] .dash-peek { color: var(--theme-muted) !important; } body[data-theme-preset] input, body[data-theme-preset] textarea, body[data-theme-preset] select, body[data-theme-preset] #message-input { color: var(--theme-text) !important; caret-color: var(--theme-accent) !important; } body[data-theme-preset] input::placeholder, body[data-theme-preset] textarea::placeholder, body[data-theme-preset] #message-input::placeholder { color: color-mix(in srgb, var(--theme-muted) 78%, transparent) !important; opacity: 1 !important; } body[data-theme-preset] .settings-section, body[data-theme-preset] .profile-panel, body[data-theme-preset] .profile-main-card, body[data-theme-preset] .profile-preview-card, body[data-theme-preset] .profile-signal-card, body[data-theme-preset] .profile-insight-card { background: color-mix(in srgb, var(--theme-surface) 92%, transparent) !important; border-color: var(--theme-border) !important; } /* Wallpaper should remain visible in actual chat, not only in settings preview. */ body[data-theme-preset][data-background-mode="image"] #view-chat, body[data-theme-preset][data-background-mode="image"] #view-chat.active, body[data-theme-preset][data-background-mode="image"] .chat-main, body[data-theme-preset][data-background-mode="image"] .messages-area { background: transparent !important; } body[data-theme-preset][data-background-mode="image"] .messages-area { background-image: linear-gradient( 180deg, rgba(5, 10, 15, 0.10), rgba(5, 10, 15, 0.20) ) !important; } body[data-theme-preset] .msg-bubble.received { background: color-mix(in srgb, var(--theme-surface) 88%, transparent) !important; color: var(--theme-text) !important; border: 1px solid var(--theme-border) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } body[data-theme-preset] .msg-bubble.sent { background: linear-gradient( 135deg, var(--theme-accent), color-mix(in srgb, var(--theme-accent) 68%, var(--theme-accent-2)) ) !important; color: #071118 !important; border: 1px solid color-mix(in srgb, var(--theme-accent) 70%, white) !important; } /* Modern mobile header. Back is physically anchored to the safe-area corner. */ @media (max-width: 900px) { #main-chat-header { position: relative !important; display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; width: 100% !important; min-height: calc(68px + env(safe-area-inset-top, 0px)) !important; height: auto !important; padding: calc(8px + env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) 8px max(10px, env(safe-area-inset-left, 0px)) !important; box-sizing: border-box !important; overflow: visible !important; background: color-mix(in srgb, var(--theme-surface, #0F1A24) 92%, transparent) !important; border-bottom: 1px solid var(--theme-border, rgba(255,255,255,.12)) !important; backdrop-filter: blur(18px) saturate(1.12) !important; -webkit-backdrop-filter: blur(18px) saturate(1.12) !important; } #btn-mobile-roster-back, body.is-mobile-device #btn-mobile-roster-back, body.mobile-chat-open #btn-mobile-roster-back { position: static !important; inset: auto !important; transform: none !important; grid-column: 1 !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; border-radius: 14px !important; background: color-mix(in srgb, var(--theme-surface, #0F1A24) 72%, white 8%) !important; color: var(--theme-text, #F8FAFC) !important; border: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.15)) 90%, white 10%) !important; box-shadow: 0 8px 24px rgba(0,0,0,.28) !important; z-index: 5 !important; opacity: 1 !important; visibility: visible !important; } #btn-mobile-roster-back .metis-chat-back-glyph, body.is-mobile-device #btn-mobile-roster-back .metis-chat-back-glyph { display: block !important; width: auto !important; height: auto !important; color: inherit !important; font: 700 27px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important; text-align: center !important; text-shadow: none !important; } #main-chat-header .chat-header-info { grid-column: 2 !important; min-width: 0 !important; overflow: hidden !important; cursor: pointer !important; } #current-chat-name { margin: 0 !important; font-family: 'Outfit', system-ui, sans-serif !important; font-size: 17px !important; line-height: 1.05 !important; font-weight: 800 !important; color: var(--theme-text, #F8FAFC) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #my-jid-display { margin-top: 4px !important; font-size: 9px !important; line-height: 1.15 !important; font-weight: 600 !important; color: var(--theme-muted, #A9B8C5) !important; opacity: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #main-chat-header .chat-header-actions { grid-column: 3 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 5px !important; min-width: 0 !important; overflow: visible !important; } #main-chat-header .chat-header-actions button, #btn-toggle-focus-chat { width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; padding: 0 !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: color-mix(in srgb, var(--theme-surface, #0F1A24) 78%, white 7%) !important; color: var(--theme-accent, #D9A13E) !important; border: 1px solid var(--theme-border, rgba(255,255,255,.12)) !important; box-shadow: none !important; } #btn-toggle-focus-chat { background: color-mix(in srgb, var(--theme-accent, #D9A13E) 18%, var(--theme-surface, #0F1A24)) !important; } .chat-input-area { width: 100% !important; box-sizing: border-box !important; padding: 10px max(12px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)) !important; background: color-mix(in srgb, var(--theme-page, #050A0F) 80%, transparent) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; } .chat-input-bar { width: 100% !important; min-height: 58px !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: 38px minmax(0, 1fr) 42px 46px !important; align-items: center !important; gap: 6px !important; padding: 6px 7px !important; border-radius: 24px !important; background: color-mix(in srgb, var(--theme-surface, #0F1A24) 94%, transparent) !important; border: 1px solid var(--theme-border, rgba(255,255,255,.12)) !important; box-shadow: 0 10px 30px rgba(0,0,0,.24) !important; overflow: hidden !important; } #attach-btn, .attach-btn { width: 38px !important; height: 38px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--theme-muted, #B7C0CC) !important; } #message-input { min-width: 0 !important; width: 100% !important; padding: 0 6px !important; font-size: 16px !important; line-height: 1.2 !important; } #btn-record-toggle { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; border-radius: 14px !important; background: color-mix(in srgb, var(--theme-surface, #0F1A24) 70%, white 6%) !important; border: 1px solid var(--theme-border, rgba(255,255,255,.12)) !important; color: var(--theme-muted, #B7C0CC) !important; } #send-button, .send-btn { width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important; border-radius: 16px !important; margin: 0 !important; background: linear-gradient( 135deg, var(--theme-accent, #D9A13E), color-mix(in srgb, var(--theme-accent, #D9A13E) 68%, var(--theme-accent-2, #7EDFD1)) ) !important; color: #071118 !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-accent, #D9A13E) 28%, transparent) !important; flex-shrink: 0 !important; } } @media (max-width: 430px) { #main-chat-header { grid-template-columns: 42px minmax(78px, 1fr) auto !important; gap: 6px !important; padding-left: max(8px, env(safe-area-inset-left, 0px)) !important; padding-right: max(8px, env(safe-area-inset-right, 0px)) !important; } #btn-mobile-roster-back { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; } #main-chat-header .chat-header-actions { gap: 3px !important; } #main-chat-header .chat-header-actions button, #btn-toggle-focus-chat { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; border-radius: 10px !important; } #main-chat-header .chat-header-actions svg { width: 16px !important; height: 16px !important; } #current-chat-name { font-size: 15px !important; } #my-jid-display { font-size: 8px !important; } } /* V190 QA — final mobile chat specificity shield */ @media (max-width: 900px) { body.is-mobile-device.mobile-chat-open #main-chat-header { display: grid !important; position: relative !important; grid-template-columns: 42px minmax(0, 1fr) auto !important; align-items: center !important; gap: 6px !important; width: 100% !important; min-height: 58px !important; height: auto !important; padding: calc(7px + env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 7px max(8px, env(safe-area-inset-left, 0px)) !important; box-sizing: border-box !important; } body.is-mobile-device.mobile-chat-open #btn-mobile-roster-back { position: static !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; grid-column: 1 !important; justify-self: start !important; align-self: center !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 !important; margin-right: 0 !important; padding: 0 !important; } body.is-mobile-device.mobile-chat-open #main-chat-header .chat-header-info { grid-column: 2 !important; min-width: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; justify-content: center !important; } body.is-mobile-device.mobile-chat-open #main-chat-header .chat-header-actions { grid-column: 3 !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; gap: 3px !important; justify-content: flex-end !important; } body.is-mobile-device.mobile-chat-open #main-chat-header .chat-header-actions button, body.is-mobile-device.mobile-chat-open #btn-toggle-focus-chat { width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 !important; padding: 0 !important; } } /* ============================================================ METIS V190 PROD — POLISH V2 2026-09-18 Theme-aware visual pass. Promoted after Edge device QA. ============================================================ */ /* Core chat canvas: wallpaper remains visible, controls remain readable. */ body[data-theme-preset] #view-chat, body[data-theme-preset] #view-chat .chat-main { color: var(--theme-text) !important; } body[data-theme-preset] #messages-container { padding: clamp(12px, 3vw, 22px) !important; gap: 8px !important; scroll-padding-top: 14px !important; scroll-padding-bottom: 18px !important; background-attachment: scroll !important; overscroll-behavior-y: contain; } body[data-theme-preset][data-background-mode="image"] #messages-container { background: linear-gradient(180deg, color-mix(in srgb, var(--theme-page) 30%, transparent) 0%, transparent 18%, transparent 78%, color-mix(in srgb, var(--theme-page) 38%, transparent) 100%) !important; } /* Messages: compact, contemporary and fully theme-aware. */ body[data-theme-preset] .msg-row { width: 100% !important; padding: 1px 2px !important; box-sizing: border-box !important; } body[data-theme-preset] .msg-bubble { max-width: min(82%, 620px) !important; padding: 11px 14px 9px !important; border-radius: 19px !important; font-size: 0.94rem !important; line-height: 1.42 !important; letter-spacing: 0.002em !important; background-attachment: scroll !important; box-shadow: 0 9px 24px rgba(0,0,0,.20) !important; } body[data-theme-preset] .msg-bubble.received { background: color-mix(in srgb, var(--theme-surface) 88%, transparent) !important; color: var(--theme-text) !important; border: 1px solid color-mix(in srgb, var(--theme-border) 82%, transparent) !important; border-bottom-left-radius: 6px !important; border-bottom-right-radius: 19px !important; } body[data-theme-preset] .msg-bubble.sent { background: linear-gradient( 135deg, color-mix(in srgb, var(--theme-accent) 92%, white 8%), color-mix(in srgb, var(--theme-accent) 70%, var(--theme-accent-2)) ) !important; color: #071118 !important; border: 1px solid color-mix(in srgb, var(--theme-accent) 72%, white 28%) !important; border-bottom-right-radius: 6px !important; border-bottom-left-radius: 19px !important; } body[data-theme-preset] .msg-from { margin: 0 0 5px !important; font-size: .62rem !important; line-height: 1.1 !important; letter-spacing: .075em !important; font-weight: 800 !important; text-transform: uppercase !important; } body[data-theme-preset] .msg-bubble.received .msg-from { color: var(--theme-accent-2) !important; } body[data-theme-preset] .msg-bubble.sent .msg-from { color: rgba(7,17,24,.66) !important; } body[data-theme-preset] .msg-time { display: inline-block !important; margin-top: 7px !important; margin-right: 4px !important; font-size: .66rem !important; line-height: 1 !important; opacity: .66 !important; } body[data-theme-preset] .msg-bubble.sent .msg-time, body[data-theme-preset] .msg-bubble.sent .msg-tick { color: rgba(7,17,24,.67) !important; } body[data-theme-preset] .msg-bubble.received .msg-time { color: var(--theme-muted) !important; } body[data-theme-preset] .msg-tick { font-size: .68rem !important; line-height: 1 !important; } body[data-theme-preset] .msg-bubble img { display: block; max-width: 100% !important; height: auto !important; border-radius: 13px !important; } /* Contacts screen: one coherent surface instead of stacked legacy gold rules. */ body[data-theme-preset] .contacts-sidebar { background: color-mix(in srgb, var(--theme-page) 76%, transparent) !important; border-color: var(--theme-border) !important; } body[data-theme-preset][data-background-mode="image"] .contacts-sidebar { background: color-mix(in srgb, var(--theme-page) 64%, transparent) !important; backdrop-filter: blur(12px) saturate(1.08) !important; -webkit-backdrop-filter: blur(12px) saturate(1.08) !important; } body[data-theme-preset] .contacts-header.modern-header { padding: 12px 12px 8px !important; border-bottom: 0 !important; background: transparent !important; } body[data-theme-preset] .contacts-segmented-control { min-height: 60px !important; padding: 4px !important; border-radius: 18px !important; background: color-mix(in srgb, var(--theme-surface) 84%, transparent) !important; border: 1px solid var(--theme-border) !important; box-shadow: 0 8px 24px rgba(0,0,0,.16) !important; } body[data-theme-preset] .seg-slider { background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-2)) !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--theme-accent) 24%, transparent) !important; } body[data-theme-preset] .seg-btn { min-width: 0 !important; color: var(--theme-muted) !important; font-size: .71rem !important; font-weight: 750 !important; border-radius: 14px !important; } body[data-theme-preset] .seg-btn.active { color: #071118 !important; } body[data-theme-preset] .seg-icon { width: 25px !important; height: 25px !important; filter: none !important; opacity: .92 !important; } body[data-theme-preset] .seg-btn.active .seg-icon { transform: scale(1.06) !important; opacity: 1 !important; } body[data-theme-preset] .contacts-search { padding: 6px 12px 8px !important; } body[data-theme-preset] .contacts-search input { width: 100% !important; min-height: 44px !important; box-sizing: border-box !important; padding: 0 14px !important; border-radius: 15px !important; background: color-mix(in srgb, var(--theme-surface) 86%, transparent) !important; color: var(--theme-text) !important; border: 1px solid var(--theme-border) !important; outline: none !important; box-shadow: none !important; } body[data-theme-preset] .contacts-search input:focus { border-color: color-mix(in srgb, var(--theme-accent) 72%, white 10%) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 16%, transparent) !important; } body[data-theme-preset] .contacts-subfilters { padding-left: 12px !important; padding-right: 12px !important; } body[data-theme-preset] .contact-filter-btn { color: var(--theme-muted) !important; background: color-mix(in srgb, var(--theme-surface) 66%, transparent) !important; border: 1px solid color-mix(in srgb, var(--theme-border) 80%, transparent) !important; } body[data-theme-preset] .contact-filter-btn.active { color: #071118 !important; background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-2)) !important; border-color: transparent !important; } body[data-theme-preset] .contacts-list { padding: 4px 10px 88px !important; } body[data-theme-preset] .roster-section-title { padding: 10px 5px 6px !important; color: var(--theme-muted) !important; font-size: .68rem !important; font-weight: 800 !important; letter-spacing: .09em !important; text-transform: uppercase !important; } body[data-theme-preset] .contact-item { min-height: 70px !important; margin: 0 0 7px !important; padding: 9px 11px !important; gap: 10px !important; border-radius: 18px !important; background: color-mix(in srgb, var(--theme-surface) 82%, transparent) !important; border: 1px solid color-mix(in srgb, var(--theme-border) 78%, transparent) !important; box-shadow: 0 7px 20px rgba(0,0,0,.14) !important; backdrop-filter: blur(12px) saturate(1.06) !important; -webkit-backdrop-filter: blur(12px) saturate(1.06) !important; } body[data-theme-preset] .contact-item:hover { background: color-mix(in srgb, var(--theme-surface) 90%, white 3%) !important; border-color: color-mix(in srgb, var(--theme-border) 82%, white 8%) !important; transform: translateY(-1px) !important; } body[data-theme-preset] .contact-item.active { background: linear-gradient( 135deg, color-mix(in srgb, var(--theme-accent) 15%, var(--theme-surface)), color-mix(in srgb, var(--theme-surface) 91%, transparent) ) !important; border-color: color-mix(in srgb, var(--theme-accent) 62%, var(--theme-border)) !important; box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--theme-accent) 10%, transparent) inset !important; } body[data-theme-preset] .contact-avatar { width: 46px !important; min-width: 46px !important; height: 46px !important; border-radius: 15px !important; border: 1px solid color-mix(in srgb, var(--theme-border) 75%, white 8%) !important; box-shadow: 0 5px 15px rgba(0,0,0,.22) !important; } body[data-theme-preset] .contact-name { color: var(--theme-text) !important; font-size: .94rem !important; font-weight: 780 !important; } body[data-theme-preset] .contact-status { color: var(--theme-muted) !important; font-size: .75rem !important; } body[data-theme-preset] .contact-item .contact-actions { gap: 5px !important; } body[data-theme-preset] .contact-item .contact-actions button { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; border-radius: 12px !important; background: color-mix(in srgb, var(--theme-surface) 76%, white 5%) !important; color: var(--theme-text) !important; border: 1px solid var(--theme-border) !important; } body[data-theme-preset] .contact-item .contact-actions button.contact-secondary { background: color-mix(in srgb, var(--theme-accent) 12%, var(--theme-surface)) !important; color: var(--theme-accent-2) !important; border-color: color-mix(in srgb, var(--theme-accent) 28%, var(--theme-border)) !important; } body[data-theme-preset] .unread-badge { background: var(--theme-accent) !important; color: #071118 !important; border: 2px solid var(--theme-surface) !important; box-shadow: 0 3px 10px color-mix(in srgb, var(--theme-accent) 25%, transparent) !important; } /* Header polish: strict layout, no floating legacy back button. */ @media (max-width: 900px) { body.is-mobile-device #main-chat-header, body.is-mobile-device.mobile-chat-open #main-chat-header { display: grid !important; grid-template-columns: 42px minmax(0, 1fr) auto !important; align-items: center !important; gap: 7px !important; min-height: calc(64px + env(safe-area-inset-top, 0px)) !important; height: auto !important; padding: calc(7px + env(safe-area-inset-top, 0px)) max(9px, env(safe-area-inset-right, 0px)) 7px max(9px, env(safe-area-inset-left, 0px)) !important; background: color-mix(in srgb, var(--theme-surface, #0F1A24) 90%, transparent) !important; border-bottom: 1px solid var(--theme-border, rgba(255,255,255,.12)) !important; box-shadow: 0 5px 18px rgba(0,0,0,.13) !important; } body.is-mobile-device #btn-mobile-roster-back, body.is-mobile-device.mobile-chat-open #btn-mobile-roster-back, body.is-mobile-device #view-chat.active.contacts-hidden #btn-mobile-roster-back { position: static !important; inset: auto !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; transform: none !important; grid-column: 1 !important; width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; border-radius: 13px !important; background: color-mix(in srgb, var(--theme-surface, #0F1A24) 74%, white 8%) !important; color: var(--theme-text, #F8FAFC) !important; border: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.15)) 82%, white 9%) !important; box-shadow: 0 6px 18px rgba(0,0,0,.18) !important; z-index: 8 !important; flex: none !important; } body.is-mobile-device #btn-mobile-roster-back .metis-chat-back-glyph, body.is-mobile-device.mobile-chat-open #btn-mobile-roster-back .metis-chat-back-glyph { width: auto !important; height: auto !important; font: 700 25px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important; color: inherit !important; transform: translateY(-1px) !important; } body.is-mobile-device #main-chat-header .chat-header-info { grid-column: 2 !important; min-width: 0 !important; padding: 0 2px !important; } body.is-mobile-device #main-chat-header .chat-header-actions { grid-column: 3 !important; display: flex !important; align-items: center !important; gap: 4px !important; min-width: 0 !important; } body.is-mobile-device #main-chat-header .chat-header-actions button, body.is-mobile-device #btn-toggle-focus-chat { width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; border-radius: 11px !important; background: color-mix(in srgb, var(--theme-surface, #0F1A24) 77%, white 6%) !important; color: var(--theme-accent, #D9A13E) !important; border: 1px solid var(--theme-border, rgba(255,255,255,.12)) !important; box-shadow: none !important; } body.is-mobile-device #btn-toggle-focus-chat { background: color-mix(in srgb, var(--theme-accent, #D9A13E) 14%, var(--theme-surface, #0F1A24)) !important; } body.is-mobile-device #current-chat-name { font-size: 16px !important; line-height: 1.08 !important; font-weight: 780 !important; letter-spacing: -.01em !important; } body.is-mobile-device #my-jid-display { margin-top: 3px !important; font-size: 9px !important; line-height: 1.1 !important; color: var(--theme-muted, #A9B8C5) !important; } body.is-mobile-device .chat-input-area { padding: 8px max(10px, env(safe-area-inset-right, 0px)) max(9px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)) !important; background: color-mix(in srgb, var(--theme-page, #050A0F) 72%, transparent) !important; border-top: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.12)) 64%, transparent) !important; } body.is-mobile-device .chat-input-bar { min-height: 56px !important; grid-template-columns: 38px minmax(0,1fr) 40px 44px !important; gap: 5px !important; padding: 5px 6px !important; border-radius: 21px !important; background: color-mix(in srgb, var(--theme-surface, #0F1A24) 93%, transparent) !important; border: 1px solid var(--theme-border, rgba(255,255,255,.12)) !important; box-shadow: 0 8px 24px rgba(0,0,0,.20) !important; } body.is-mobile-device #message-input { min-height: 42px !important; border: 0 !important; background: transparent !important; color: var(--theme-text, #F8FAFC) !important; box-shadow: none !important; outline: none !important; } body.is-mobile-device #message-input:focus { box-shadow: none !important; outline: none !important; } body.is-mobile-device #btn-record-toggle { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; border-radius: 13px !important; } body.is-mobile-device #send-button { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; border-radius: 14px !important; } } /* Narrow phones: retain every action; just tighten spacing. */ @media (max-width: 380px) { body.is-mobile-device #main-chat-header { grid-template-columns: 40px minmax(62px,1fr) auto !important; gap: 4px !important; padding-left: max(6px, env(safe-area-inset-left, 0px)) !important; padding-right: max(6px, env(safe-area-inset-right, 0px)) !important; } body.is-mobile-device #btn-mobile-roster-back { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; } body.is-mobile-device #main-chat-header .chat-header-actions { gap: 2px !important; } body.is-mobile-device #main-chat-header .chat-header-actions button, body.is-mobile-device #btn-toggle-focus-chat { width: 29px !important; min-width: 29px !important; height: 31px !important; min-height: 31px !important; border-radius: 9px !important; } body.is-mobile-device #main-chat-header .chat-header-actions svg { width: 15px !important; height: 15px !important; } body[data-theme-preset] .msg-bubble { max-width: 88% !important; } } /* Landscape: override old fixed-corner patch; back remains inside the real grid. */ @media (orientation: landscape) and (max-height: 600px) { body.is-mobile-device.mobile-chat-open #main-chat-header { min-height: calc(54px + env(safe-area-inset-top, 0px)) !important; padding-top: max(5px, env(safe-area-inset-top, 0px)) !important; padding-bottom: 5px !important; } body.is-mobile-device.mobile-chat-open #btn-mobile-roster-back { position: static !important; inset: auto !important; transform: none !important; width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; } body.is-mobile-device.mobile-chat-open #main-chat-header .chat-header-actions button, body.is-mobile-device.mobile-chat-open #btn-toggle-focus-chat { width: 31px !important; min-width: 31px !important; height: 31px !important; min-height: 31px !important; } body.is-mobile-device #messages-container { padding-top: 10px !important; padding-bottom: 10px !important; } body.is-mobile-device .chat-input-area { padding-top: 6px !important; } } /* Keyboard/focus affordances and accessibility. */ body[data-theme-preset] button:focus-visible, body[data-theme-preset] input:focus-visible, body[data-theme-preset] [role="button"]:focus-visible { outline: 2px solid var(--theme-accent) !important; outline-offset: 2px !important; } @media (prefers-reduced-motion: reduce) { body[data-theme-preset] .msg-row, body[data-theme-preset] .contact-item, body[data-theme-preset] .seg-slider, body[data-theme-preset] .seg-icon { animation: none !important; transition-duration: .01ms !important; } } /* METIS V190 PROD — POLISH V2.1: defeat legacy fixed white back button */ @media (max-width: 900px) { body.is-mobile-device[data-theme-preset][data-surface-theme] #btn-mobile-roster-back, body.is-mobile-device[data-theme-preset][data-surface-theme].mobile-chat-open #btn-mobile-roster-back, body.is-mobile-device[data-theme-preset][data-surface-theme] #view-chat.active.contacts-hidden #btn-mobile-roster-back { position: static !important; inset: auto !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; flex: none !important; border-radius: 13px !important; background: color-mix(in srgb, var(--theme-surface) 74%, white 8%) !important; color: var(--theme-text) !important; border: 1px solid color-mix(in srgb, var(--theme-border) 82%, white 9%) !important; box-shadow: 0 6px 18px rgba(0,0,0,.18) !important; z-index: 8 !important; } body.is-mobile-device[data-theme-preset][data-surface-theme] #btn-mobile-roster-back .metis-chat-back-glyph, body.is-mobile-device[data-theme-preset][data-surface-theme].mobile-chat-open #btn-mobile-roster-back .metis-chat-back-glyph { display: block !important; width: auto !important; height: auto !important; color: inherit !important; font: 700 25px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important; line-height: 1 !important; text-align: center !important; transform: translateY(-1px) !important; text-shadow: none !important; } } /* METIS V190 PROD — POLISH V2.2: readable muted text over user wallpapers */ body[data-theme-preset] { --theme-muted-readable: color-mix(in srgb, var(--theme-muted) 76%, white 24%); } body[data-theme-preset] #my-jid-display, body[data-theme-preset] .contact-status, body[data-theme-preset] .roster-section-title, body[data-theme-preset] .profile-background-copy span, body[data-theme-preset] .sys-label, body[data-theme-preset] .dash-peek { color: var(--theme-muted-readable) !important; } body[data-theme-preset] .seg-btn:not(.active), body[data-theme-preset] .contact-filter-btn:not(.active) { color: var(--theme-muted-readable) !important; } body[data-theme-preset] input::placeholder, body[data-theme-preset] textarea::placeholder, body[data-theme-preset] #message-input::placeholder { color: color-mix(in srgb, var(--theme-muted) 78%, white 22%) !important; -webkit-text-fill-color: currentColor !important; opacity: 1 !important; } body[data-theme-preset] #attach-btn, body[data-theme-preset] .attach-btn, body[data-theme-preset] #btn-record-toggle { color: var(--theme-muted-readable) !important; } body[data-theme-preset] .msg-bubble.received .msg-time { color: var(--theme-muted-readable) !important; } /* ============================================================ METIS V190 PROD — POLISH V2.3 PROFILE + SETTINGS Theme-aware profile hub, controls and appearance panels. ============================================================ */ body[data-theme-preset] #view-profile, body[data-theme-preset] #view-profile .profile-edit-scroller { color: var(--theme-text) !important; } body[data-theme-preset][data-background-mode="image"] #view-profile, body[data-theme-preset][data-background-mode="image"] #view-profile .profile-edit-scroller { background: transparent !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-home, body[data-theme-preset] #view-profile .profile-mobile-hub-detail { border-radius: 26px !important; border: 1px solid color-mix(in srgb, var(--theme-border) 88%, transparent) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--theme-surface) 88%, transparent), color-mix(in srgb, var(--theme-page) 84%, transparent) ) !important; box-shadow: 0 18px 42px rgba(0,0,0,.18) !important; -webkit-backdrop-filter: blur(18px) saturate(1.08) !important; backdrop-filter: blur(18px) saturate(1.08) !important; } body[data-theme-preset][data-background-mode="image"] #view-profile .profile-mobile-hub-home, body[data-theme-preset][data-background-mode="image"] #view-profile .profile-mobile-hub-detail { background: linear-gradient( 180deg, color-mix(in srgb, var(--theme-surface) 78%, transparent), color-mix(in srgb, var(--theme-page) 72%, transparent) ) !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-head h2, body[data-theme-preset] #view-profile .profile-mobile-hub-detail-head h2, body[data-theme-preset] #view-profile .settings-section h2, body[data-theme-preset] #view-profile .profile-background-copy strong { color: var(--theme-text) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-head p, body[data-theme-preset] #view-profile .profile-mobile-hub-detail-head p, body[data-theme-preset] #view-profile .profile-mobile-hub-btn-copy span, body[data-theme-preset] #view-profile .settings-section p, body[data-theme-preset] #view-profile .audio-tools-copy, body[data-theme-preset] #view-profile .profile-background-copy span { color: var(--theme-muted-readable, var(--theme-muted)) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } body[data-theme-preset] #view-profile #profile-preview-name { color: var(--theme-accent-2) !important; -webkit-text-fill-color: currentColor !important; letter-spacing: -.015em !important; } body[data-theme-preset] #view-profile #profile-preview-headline { color: var(--theme-muted-readable, var(--theme-muted)) !important; -webkit-text-fill-color: currentColor !important; } body[data-theme-preset] #view-profile #profile-preview-avatar { border-color: color-mix(in srgb, var(--theme-accent) 78%, white 18%) !important; box-shadow: 0 14px 30px rgba(0,0,0,.22), 0 0 0 4px color-mix(in srgb, var(--theme-accent) 10%, transparent) !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-menu { gap: 9px !important; margin-top: 16px !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-btn:not(.pro-upgrade-banner-btn) { min-height: 72px !important; padding: 13px 14px !important; border-radius: 18px !important; border: 1px solid color-mix(in srgb, var(--theme-border) 84%, transparent) !important; background: color-mix(in srgb, var(--theme-surface) 72%, transparent) !important; color: var(--theme-text) !important; box-shadow: 0 7px 18px rgba(0,0,0,.10) !important; transition: transform .18s ease, border-color .18s ease, background .18s ease !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-btn:not(.pro-upgrade-banner-btn):hover, body[data-theme-preset] #view-profile .profile-mobile-hub-btn:not(.pro-upgrade-banner-btn):focus-visible { background: color-mix(in srgb, var(--theme-surface) 84%, var(--theme-accent) 6%) !important; border-color: color-mix(in srgb, var(--theme-accent) 46%, var(--theme-border)) !important; transform: translateY(-1px) !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-btn-copy strong { color: var(--theme-text) !important; -webkit-text-fill-color: currentColor !important; font-weight: 800 !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-arrow { color: var(--theme-accent-2) !important; opacity: .88 !important; } body[data-theme-preset] #view-profile .profile-mobile-app-exit, body[data-theme-preset] #view-profile .profile-mobile-hub-back { min-height: 42px !important; padding: 9px 13px !important; border-radius: 13px !important; border: 1px solid color-mix(in srgb, var(--theme-accent) 32%, var(--theme-border)) !important; background: color-mix(in srgb, var(--theme-surface) 91%, transparent) !important; color: var(--theme-accent-2) !important; -webkit-text-fill-color: currentColor !important; box-shadow: 0 7px 20px rgba(0,0,0,.16) !important; -webkit-backdrop-filter: blur(16px) saturate(1.08) !important; backdrop-filter: blur(16px) saturate(1.08) !important; } body[data-theme-preset] #view-profile .profile-mobile-app-exit:active, body[data-theme-preset] #view-profile .profile-mobile-hub-back:active { transform: scale(.98) !important; } body[data-theme-preset] #view-profile .settings-section, body[data-theme-preset] #view-profile .profile-card, body[data-theme-preset] #view-profile .profile-editor-panel, body[data-theme-preset] #view-profile .profile-field-card, body[data-theme-preset] #view-profile .mic-test-panel, body[data-theme-preset] #view-profile .intentional-history-item { background: color-mix(in srgb, var(--theme-surface) 74%, transparent) !important; border: 1px solid color-mix(in srgb, var(--theme-border) 84%, transparent) !important; color: var(--theme-text) !important; box-shadow: none !important; } body[data-theme-preset] #view-profile .settings-section { padding: 16px !important; border-radius: 20px !important; } body[data-theme-preset] #view-profile .settings-section h2 { margin-bottom: 12px !important; padding-bottom: 9px !important; border-bottom-color: color-mix(in srgb, var(--theme-border) 72%, transparent) !important; font-size: 1rem !important; font-weight: 800 !important; } body[data-theme-preset] #view-profile .setting-row, body[data-theme-preset] #view-profile .setting-row span { color: var(--theme-text) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } body[data-theme-preset] #view-profile .setting-row { min-height: 46px !important; gap: 12px !important; padding: 10px 0 !important; border-bottom-color: color-mix(in srgb, var(--theme-border) 56%, transparent) !important; } body[data-theme-preset] #view-profile .profile-field-label, body[data-theme-preset] #view-profile .mobile-theme-label, body[data-theme-preset] #view-profile .ringtone-copy strong, body[data-theme-preset] #view-profile .mic-test-label-row { color: var(--theme-text) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; } body[data-theme-preset] #view-profile .ringtone-copy span { color: var(--theme-muted-readable, var(--theme-muted)) !important; -webkit-text-fill-color: currentColor !important; } body[data-theme-preset] #view-profile .premium-input, body[data-theme-preset] #view-profile .premium-select, body[data-theme-preset] #view-profile .premium-textarea, body[data-theme-preset] #view-profile input[type="text"], body[data-theme-preset] #view-profile input[type="time"], body[data-theme-preset] #view-profile textarea, body[data-theme-preset] #view-profile select { width: 100% !important; box-sizing: border-box !important; min-height: 44px !important; border-radius: 13px !important; background: color-mix(in srgb, var(--theme-page-soft) 74%, transparent) !important; color: var(--theme-text) !important; -webkit-text-fill-color: currentColor !important; border: 1px solid color-mix(in srgb, var(--theme-border) 92%, transparent) !important; outline: none !important; box-shadow: none !important; } body[data-theme-preset] #view-profile textarea, body[data-theme-preset] #view-profile .premium-textarea { min-height: 84px !important; padding: 11px 12px !important; line-height: 1.45 !important; resize: vertical !important; } body[data-theme-preset] #view-profile .premium-input:focus, body[data-theme-preset] #view-profile .premium-select:focus, body[data-theme-preset] #view-profile .premium-textarea:focus, body[data-theme-preset] #view-profile input:focus, body[data-theme-preset] #view-profile textarea:focus, body[data-theme-preset] #view-profile select:focus { border-color: color-mix(in srgb, var(--theme-accent) 72%, white 10%) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 14%, transparent) !important; } body[data-theme-preset] #view-profile select option { color: var(--theme-text) !important; background: var(--theme-page-soft) !important; } body[data-theme-preset] #view-profile input::placeholder, body[data-theme-preset] #view-profile textarea::placeholder { color: var(--theme-muted-readable, var(--theme-muted)) !important; -webkit-text-fill-color: currentColor !important; opacity: .82 !important; } body[data-theme-preset] #view-profile .theme-surface-switcher { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 7px !important; } body[data-theme-preset] #view-profile .surface-theme-option { min-height: 46px !important; padding: 8px 10px !important; border-radius: 13px !important; background: color-mix(in srgb, var(--theme-page-soft) 68%, transparent) !important; color: var(--theme-text) !important; -webkit-text-fill-color: currentColor !important; border: 1px solid color-mix(in srgb, var(--theme-border) 78%, transparent) !important; box-shadow: none !important; } body[data-theme-preset] #view-profile .surface-theme-option span:not(.theme-chip) { color: var(--theme-text) !important; -webkit-text-fill-color: currentColor !important; } body[data-theme-preset] #view-profile .surface-theme-option.active { background: color-mix(in srgb, var(--theme-accent) 16%, var(--theme-surface)) !important; border-color: color-mix(in srgb, var(--theme-accent) 74%, var(--theme-border)) !important; color: var(--theme-text) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent) 10%, transparent) inset !important; } body[data-theme-preset] #view-profile .theme-circle { width: 36px !important; height: 36px !important; border: 2px solid color-mix(in srgb, var(--theme-border) 82%, white 8%) !important; box-shadow: 0 4px 12px rgba(0,0,0,.20) !important; } body[data-theme-preset] #view-profile .theme-circle.active { border-color: var(--theme-text) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 20%, transparent), 0 5px 14px rgba(0,0,0,.22) !important; } body[data-theme-preset] #view-profile .profile-background-action { margin-top: 16px !important; padding: 14px !important; border: 1px solid color-mix(in srgb, var(--theme-border) 72%, transparent) !important; border-radius: 17px !important; background: color-mix(in srgb, var(--theme-page-soft) 54%, transparent) !important; } body[data-theme-preset] #view-profile .profile-background-current { color: var(--theme-accent-2) !important; -webkit-text-fill-color: currentColor !important; } body[data-theme-preset] #view-profile .metis-btn-gold, body[data-theme-preset] #view-profile .audio-tool-btn { border-radius: 13px !important; } body[data-theme-preset] #view-profile .slider { background: color-mix(in srgb, var(--theme-muted) 22%, var(--theme-surface)) !important; border-color: var(--theme-border) !important; } body[data-theme-preset] #view-profile input:checked + .slider { background: var(--theme-accent) !important; border-color: transparent !important; } body[data-theme-preset] #view-profile .profile-danger-btn { background: rgba(239,68,68,.11) !important; border-color: rgba(239,68,68,.32) !important; color: #ffdede !important; -webkit-text-fill-color: currentColor !important; } /* Keep the PRO callout intentionally gold while matching the new geometry. */ body[data-theme-preset] #view-profile .pro-upgrade-banner-btn { min-height: 74px !important; padding: 13px 14px !important; border-radius: 18px !important; } /* Mobile: use available width cleanly and avoid oversized nested padding. */ @media (max-width: 600px) { body.is-mobile-device[data-theme-preset] #view-profile .profile-edit-scroller { gap: 12px !important; } body.is-mobile-device[data-theme-preset] #view-profile .profile-mobile-hub-home, body.is-mobile-device[data-theme-preset] #view-profile .profile-mobile-hub-detail { padding: 14px !important; border-radius: 22px !important; } body.is-mobile-device[data-theme-preset] #view-profile .profile-mobile-hub-head h2, body.is-mobile-device[data-theme-preset] #view-profile .profile-mobile-hub-detail-head h2 { font-size: 22px !important; } body.is-mobile-device[data-theme-preset] #view-profile .settings-section, body.is-mobile-device[data-theme-preset] #view-profile .profile-card, body.is-mobile-device[data-theme-preset] #view-profile .profile-editor-panel { padding: 14px !important; border-radius: 17px !important; } body.is-mobile-device[data-theme-preset] #view-profile .profile-mobile-hub-btn:not(.pro-upgrade-banner-btn) { min-height: 68px !important; } } /* METIS V190 PROD — BACKGROUND VISIBILITY FIX V1 The wallpaper lives on ; #app must not paint an opaque theme surface above it. */ body[data-background-mode="image"] #app, body[data-background-mode="color"] #app { background: transparent !important; } /* ========================================================= METIS V190 PROD — EXTERNAL PROFILE MODAL PREMIUM V1 Scoped to #user-profile-modal so other dialogs stay intact. ========================================================= */ #user-profile-modal { padding: max(18px, env(safe-area-inset-top, 0px)) 14px max(18px, env(safe-area-inset-bottom, 0px)); background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--theme-accent, #4aa8ff) 12%, transparent), transparent 38%), rgba(3, 8, 14, 0.68); backdrop-filter: blur(22px) saturate(118%); -webkit-backdrop-filter: blur(22px) saturate(118%); box-sizing: border-box; } #user-profile-modal .user-modal-premium { --profile-accent: var(--theme-accent, #4aa8ff); --profile-accent-2: var(--theme-accent-2, #e4b85b); width: min(100%, 420px); max-width: 420px; max-height: min(790px, calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 30px 24px 22px; border-radius: 34px; border: 1px solid color-mix(in srgb, var(--profile-accent) 40%, rgba(255,255,255,.14)); background: radial-gradient(circle at 16% -8%, color-mix(in srgb, var(--profile-accent) 20%, transparent), transparent 38%), radial-gradient(circle at 95% 20%, color-mix(in srgb, var(--profile-accent-2) 11%, transparent), transparent 36%), linear-gradient(155deg, color-mix(in srgb, var(--theme-surface, #0d2235) 90%, #17395c 10%), color-mix(in srgb, var(--theme-surface, #09131b) 94%, #02060a 6%) ); box-shadow: 0 28px 80px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255,255,255,.025) inset, 0 0 34px color-mix(in srgb, var(--profile-accent) 14%, transparent); color: var(--theme-text, #f5f8fb); text-align: center; box-sizing: border-box; isolation: isolate; } #user-profile-modal .user-modal-premium::-webkit-scrollbar { display: none; } #user-profile-modal .user-modal-premium::before, #user-profile-modal .user-modal-premium::after { content: ""; position: absolute; pointer-events: none; z-index: -1; border-radius: 999px; filter: blur(.1px); } #user-profile-modal .user-modal-premium::before { width: 230px; height: 230px; left: -115px; top: -100px; background: color-mix(in srgb, var(--profile-accent) 9%, transparent); } #user-profile-modal .user-modal-premium::after { width: 260px; height: 260px; right: -175px; top: 155px; border: 1px solid color-mix(in srgb, var(--profile-accent) 14%, transparent); } #user-profile-modal .modal-close-btn { top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.18)) 92%, transparent); background: color-mix(in srgb, var(--theme-surface, #0b1722) 82%, transparent); color: var(--theme-muted-readable, var(--theme-muted, #c8d1da)); display: grid; place-items: center; padding: 0; font: 400 31px/1 Arial, sans-serif; box-shadow: 0 8px 22px rgba(0,0,0,.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 6; } #user-profile-modal .modal-close-btn:active { transform: scale(.94); } #user-profile-modal .user-modal-header { display: flex; flex-direction: column; align-items: center; padding: 14px 42px 0; } #user-profile-modal .modal-avatar-glow { width: 122px; height: 122px; margin: 0 auto 17px; padding: 5px; border-radius: 50%; background: linear-gradient(145deg, color-mix(in srgb, var(--profile-accent-2) 88%, white 12%), color-mix(in srgb, var(--profile-accent) 88%, white 12%) ); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-surface, #07111c) 95%, transparent), 0 0 0 4px color-mix(in srgb, var(--profile-accent) 30%, transparent), 0 0 30px color-mix(in srgb, var(--profile-accent) 34%, transparent); box-sizing: border-box; } #user-profile-modal .modal-avatar-glow img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid color-mix(in srgb, var(--theme-surface, #07111c) 94%, #000 6%); background: #07111c; box-sizing: border-box; } #user-profile-modal #view-user-name { margin: 0; max-width: 100%; color: var(--theme-text, #fff); font: 800 clamp(28px, 7vw, 35px)/1.05 'Outfit', sans-serif; letter-spacing: -.035em; text-shadow: 0 3px 18px rgba(0,0,0,.28); overflow-wrap: anywhere; } #user-profile-modal .status-indicator { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: auto; min-height: 32px; margin: 12px 0 0; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--profile-accent-2) 58%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--theme-surface, #0b1722) 72%, transparent); color: color-mix(in srgb, var(--profile-accent-2) 82%, var(--theme-text, #fff) 18%); font: 800 11px/1 'Outfit', sans-serif; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 8px 20px rgba(0,0,0,.16); } #user-profile-modal .status-indicator::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #37e7a2; box-shadow: 0 0 0 4px rgba(55,231,162,.10), 0 0 12px rgba(55,231,162,.55); } #user-profile-modal .user-modal-body { margin-top: 18px; } #user-profile-modal .user-modal-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0 0 12px; } #user-profile-modal .user-modal-chips .profile-preview-chip { min-height: 28px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.16)) 88%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--theme-surface, #101d28) 64%, transparent); color: var(--theme-muted-readable, var(--theme-muted, #c4ccd4)); font: 600 11px/1.15 'Outfit', sans-serif; box-sizing: border-box; } #user-profile-modal .user-modal-story { padding: 17px 18px; border: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.15)) 92%, transparent); border-radius: 21px; background: linear-gradient(145deg, color-mix(in srgb, var(--theme-surface, #102336) 76%, transparent), color-mix(in srgb, var(--theme-surface, #08121b) 58%, transparent) ); box-shadow: 0 12px 26px rgba(0,0,0,.14) inset; } #user-profile-modal .user-modal-headline, #user-profile-modal #view-user-bio { margin: 0; overflow-wrap: anywhere; } #user-profile-modal .user-modal-headline { color: var(--theme-text, #fff); font: 500 14px/1.45 'Outfit', sans-serif; } #user-profile-modal #view-user-bio { margin-top: 7px; color: var(--theme-muted-readable, var(--theme-muted, #b8c4ce)); font: 500 13px/1.4 'Outfit', sans-serif; } #user-profile-modal .user-modal-meta { display: grid; gap: 9px; margin-top: 11px; } #user-profile-modal .user-modal-meta-row { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; grid-template-rows: auto auto; align-items: center; column-gap: 11px; min-height: 66px; padding: 10px 13px; border: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.15)) 92%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--theme-surface, #0d1b27) 72%, transparent); text-align: left; box-sizing: border-box; } #user-profile-modal .user-modal-meta-row::before { grid-column: 1; grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--profile-accent-2) 10%, rgba(255,255,255,.035)); color: var(--profile-accent-2); font: 800 19px/1 Arial, sans-serif; } #user-profile-modal .user-modal-meta-signal::before { content: "◉"; } #user-profile-modal .user-modal-meta-link::before { content: "↗"; } #user-profile-modal .user-modal-meta-row::after { content: "›"; grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; color: var(--theme-muted-readable, var(--theme-muted, #b9c4cf)); font: 300 30px/1 Arial, sans-serif; opacity: .82; } #user-profile-modal .user-modal-meta-row > span { grid-column: 2; grid-row: 1; align-self: end; color: var(--theme-muted-readable, var(--theme-muted, #aebbc6)); font: 500 11px/1.2 'Outfit', sans-serif; letter-spacing: .02em; } #user-profile-modal .user-modal-meta-row > strong { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; color: var(--theme-text, #fff); font: 700 14px/1.25 'Outfit', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #user-profile-modal .user-modal-footer { display: flex; gap: 10px; margin-top: 15px; } #user-profile-modal .modal-action-btn { position: relative; flex: 1 1 0; width: auto; min-width: 0; min-height: 54px; margin: 0; padding: 0 13px; border-radius: 17px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; font: 800 13px/1.15 'Outfit', sans-serif; letter-spacing: -.01em; box-sizing: border-box; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; } #user-profile-modal .modal-action-btn:active { transform: scale(.975); } #user-profile-modal .modal-action-btn.primary { background: linear-gradient(135deg, color-mix(in srgb, var(--profile-accent) 86%, #6bc7ff 14%), color-mix(in srgb, var(--profile-accent) 68%, #176edb 32%) ) !important; border-color: color-mix(in srgb, var(--profile-accent) 70%, white 20%) !important; color: #fff !important; box-shadow: 0 12px 26px color-mix(in srgb, var(--profile-accent) 24%, transparent), 0 1px 0 rgba(255,255,255,.28) inset !important; } #user-profile-modal .modal-action-btn.primary::before { content: "◌"; margin-right: 8px; font: 900 20px/1 Arial, sans-serif; } #user-profile-modal .modal-action-btn.danger { background: linear-gradient(145deg, rgba(120,28,46,.22), rgba(48,18,27,.34)) !important; border-color: rgba(255, 102, 127, .52) !important; color: #ff8296 !important; box-shadow: 0 10px 22px rgba(80, 10, 26, .18) !important; } #user-profile-modal .modal-action-btn.danger::before { content: "×"; width: 21px; height: 21px; margin-right: 7px; display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: 7px; font: 800 15px/1 Arial, sans-serif; } @media (max-width: 380px) { #user-profile-modal { padding-left: 10px; padding-right: 10px; } #user-profile-modal .user-modal-premium { width: 100%; padding: 25px 18px 18px; border-radius: 28px; } #user-profile-modal .modal-avatar-glow { width: 104px; height: 104px; margin-bottom: 14px; } #user-profile-modal #view-user-name { font-size: 27px; } #user-profile-modal .user-modal-header { padding-inline: 35px; } #user-profile-modal .user-modal-footer { gap: 8px; } #user-profile-modal .modal-action-btn { min-height: 50px; padding-inline: 9px; font-size: 12px; } } @media (max-height: 760px) { #user-profile-modal .user-modal-premium { max-height: calc(100dvh - 20px); padding-top: 21px; padding-bottom: 17px; } #user-profile-modal .modal-avatar-glow { width: 90px; height: 90px; margin-bottom: 10px; } #user-profile-modal #view-user-name { font-size: 26px; } #user-profile-modal .status-indicator { margin-top: 8px; min-height: 28px; } #user-profile-modal .user-modal-body { margin-top: 12px; } #user-profile-modal .user-modal-chips { margin-bottom: 8px; } #user-profile-modal .user-modal-story { padding: 12px 14px; } #user-profile-modal .user-modal-meta-row { min-height: 58px; padding-block: 8px; } #user-profile-modal .user-modal-footer { margin-top: 10px; } } @media (prefers-reduced-motion: reduce) { #user-profile-modal .user-modal-premium, #user-profile-modal .modal-action-btn, #user-profile-modal .modal-close-btn { animation: none !important; transition: none !important; } } /* ========================================================= METIS V190 PROD — CONTACT FLOW MODALS PREMIUM V1 Add contact / context / reminders / reject / roster / MUC. ========================================================= */ #add-contact-modal, #contact-context-modal, #remind-later-modal, #reject-request-modal, #roster-hygiene-modal, #muc-create-modal { padding: max(18px, env(safe-area-inset-top, 0px)) 14px max(18px, env(safe-area-inset-bottom, 0px)); background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--theme-accent, #4aa8ff) 10%, transparent), transparent 40%), rgba(3, 8, 14, .70); backdrop-filter: blur(22px) saturate(116%); -webkit-backdrop-filter: blur(22px) saturate(116%); box-sizing: border-box; } #add-contact-modal .contact-flow-modal, #contact-context-modal .contact-flow-modal, #remind-later-modal .contact-flow-modal, #reject-request-modal .contact-flow-modal, #roster-hygiene-modal .contact-flow-modal, #muc-create-modal .contact-flow-modal { --flow-accent: var(--theme-accent, #4aa8ff); --flow-accent-2: var(--theme-accent-2, #e4b85b); width: min(100%, 420px); max-width: 420px; max-height: calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 26px 22px 22px; border-radius: 30px; border: 1px solid color-mix(in srgb, var(--flow-accent) 34%, rgba(255,255,255,.14)); background: radial-gradient(circle at 14% -8%, color-mix(in srgb, var(--flow-accent) 16%, transparent), transparent 36%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--flow-accent-2) 8%, transparent), transparent 30%), linear-gradient(155deg, color-mix(in srgb, var(--theme-surface, #102538) 91%, #17395c 9%), color-mix(in srgb, var(--theme-surface, #09131b) 95%, #02060a 5%) ); box-shadow: 0 28px 80px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.025) inset, 0 0 28px color-mix(in srgb, var(--flow-accent) 11%, transparent); color: var(--theme-text, #f3f7fa); text-align: left; box-sizing: border-box; } #add-contact-modal .contact-flow-modal::-webkit-scrollbar, #contact-context-modal .contact-flow-modal::-webkit-scrollbar, #remind-later-modal .contact-flow-modal::-webkit-scrollbar, #reject-request-modal .contact-flow-modal::-webkit-scrollbar, #roster-hygiene-modal .contact-flow-modal::-webkit-scrollbar, #muc-create-modal .contact-flow-modal::-webkit-scrollbar { display: none; } #add-contact-modal .modal-close-btn, #contact-context-modal .modal-close-btn, #remind-later-modal .modal-close-btn, #reject-request-modal .modal-close-btn, #roster-hygiene-modal .modal-close-btn, #muc-create-modal .modal-close-btn { top: 16px; right: 16px; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.15)) 92%, transparent); background: color-mix(in srgb, var(--theme-surface, #0b1722) 82%, transparent); color: var(--theme-muted-readable, var(--theme-muted, #c7d1da)); display: grid; place-items: center; font: 400 29px/1 Arial, sans-serif; box-shadow: 0 8px 22px rgba(0,0,0,.22); z-index: 5; } #add-contact-modal .contact-flow-header, #contact-context-modal .contact-flow-header, #remind-later-modal .contact-flow-header, #reject-request-modal .contact-flow-header, #roster-hygiene-modal .contact-flow-header, #muc-create-modal .contact-flow-header { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 8px 50px 18px 0; margin: 0 0 16px; border-bottom: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.12)) 90%, transparent); text-align: left; } #add-contact-modal .contact-flow-header h2, #contact-context-modal .contact-flow-header h2, #remind-later-modal .contact-flow-header h2, #reject-request-modal .contact-flow-header h2, #roster-hygiene-modal .contact-flow-header h2, #muc-create-modal .contact-flow-header h2 { margin: 0; color: var(--theme-text, #fff); font: 800 24px/1.08 'Outfit', sans-serif; letter-spacing: -.025em; } #add-contact-modal .status-indicator, #contact-context-modal .status-indicator, #remind-later-modal .status-indicator, #reject-request-modal .status-indicator, #roster-hygiene-modal .status-indicator, #muc-create-modal .status-indicator { display: inline-flex; align-items: center; width: auto; min-height: 27px; margin: 0; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--flow-accent-2) 42%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--theme-surface, #0c1722) 68%, transparent); color: color-mix(in srgb, var(--flow-accent-2) 78%, var(--theme-text, #fff) 22%); font: 800 10px/1 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; } #add-contact-modal .contact-flow-body, #contact-context-modal .contact-flow-body, #remind-later-modal .contact-flow-body, #reject-request-modal .contact-flow-body, #roster-hygiene-modal .contact-flow-body, #muc-create-modal .contact-flow-body { margin: 0; padding: 0; text-align: left; } #add-contact-modal .contact-flow-copy, #contact-context-modal .contact-flow-copy, #remind-later-modal .contact-flow-copy, #reject-request-modal .contact-flow-copy, #roster-hygiene-modal .contact-flow-copy, #muc-create-modal .contact-flow-body > p { margin: 0 0 16px !important; color: var(--theme-muted-readable, var(--theme-muted, #bdc8d1)) !important; font: 500 13px/1.45 'Outfit', sans-serif !important; } #add-contact-modal .profile-field-label, #contact-context-modal .profile-field-label, #reject-request-modal .profile-field-label, #muc-create-modal .contact-flow-body > label { display: block; margin: 0 0 7px !important; color: var(--theme-muted-readable, var(--theme-muted, #bdc8d1)) !important; font: 700 11px/1.2 'Outfit', sans-serif !important; letter-spacing: .05em; text-transform: uppercase; } #add-contact-modal input, #contact-context-modal select, #contact-context-modal textarea, #reject-request-modal select, #muc-create-modal input { width: 100% !important; min-height: 50px; margin: 0 0 14px !important; padding: 0 14px !important; border-radius: 15px !important; border: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.15)) 92%, transparent) !important; background: color-mix(in srgb, var(--theme-surface, #0a1722) 74%, transparent) !important; color: var(--theme-text, #f3f7fa) !important; font: 600 14px/1.3 'Outfit', sans-serif !important; outline: none !important; box-shadow: 0 1px 0 rgba(255,255,255,.02) inset !important; box-sizing: border-box !important; } #contact-context-modal textarea { min-height: 112px; padding: 13px 14px !important; resize: vertical; } #add-contact-modal input::placeholder, #contact-context-modal textarea::placeholder, #muc-create-modal input::placeholder { color: color-mix(in srgb, var(--theme-muted, #9eabb6) 78%, transparent) !important; } #add-contact-modal input:focus, #contact-context-modal select:focus, #contact-context-modal textarea:focus, #reject-request-modal select:focus, #muc-create-modal input:focus { border-color: color-mix(in srgb, var(--flow-accent) 72%, white 8%) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--flow-accent) 13%, transparent), 0 1px 0 rgba(255,255,255,.03) inset !important; } #add-contact-modal .profile-actions-inline, #contact-context-modal .profile-actions-inline, #reject-request-modal .profile-actions-inline, #muc-create-modal .user-modal-footer { display: flex; gap: 10px; margin: 4px 0 0; padding: 0; } #add-contact-modal #btn-confirm-add-contact, #contact-context-modal #btn-context-send, #muc-create-modal #btn-muc-create { width: 100%; min-height: 52px; margin: 0 !important; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--flow-accent) 70%, white 14%) !important; border-radius: 16px !important; background: linear-gradient(135deg, color-mix(in srgb, var(--flow-accent) 86%, #6bc7ff 14%), color-mix(in srgb, var(--flow-accent) 68%, #176edb 32%) ) !important; color: #fff !important; font: 800 14px/1.1 'Outfit', sans-serif !important; box-shadow: 0 12px 26px color-mix(in srgb, var(--flow-accent) 22%, transparent), 0 1px 0 rgba(255,255,255,.24) inset !important; } #reject-request-modal #btn-confirm-reject { width: 100%; min-height: 52px; margin: 0 !important; padding: 0 16px; border-radius: 16px !important; border: 1px solid rgba(255, 105, 126, .48) !important; background: linear-gradient(145deg, rgba(116,27,44,.28), rgba(54,17,26,.42)) !important; color: #ff8ca0 !important; font: 800 14px/1.1 'Outfit', sans-serif !important; box-shadow: 0 12px 24px rgba(80, 10, 26, .15) !important; } #remind-later-modal .reminder-presets { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 10px; } #remind-later-modal .reminder-preset-btn { min-height: 52px; margin: 0 !important; padding: 0 12px !important; border-radius: 15px !important; border: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.14)) 94%, transparent) !important; background: color-mix(in srgb, var(--theme-surface, #0b1824) 72%, transparent) !important; color: var(--theme-text, #f4f8fb) !important; font: 700 13px/1.15 'Outfit', sans-serif !important; box-shadow: 0 8px 18px rgba(0,0,0,.12) !important; } #remind-later-modal .reminder-preset-btn:active { border-color: color-mix(in srgb, var(--flow-accent) 70%, transparent) !important; background: color-mix(in srgb, var(--flow-accent) 16%, var(--theme-surface, #0b1824) 84%) !important; transform: scale(.98); } #roster-hygiene-modal .intentional-history-list { display: grid; gap: 9px; margin-top: 10px; } #roster-hygiene-modal .intentional-history-list > * { border: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.13)) 92%, transparent); border-radius: 15px; background: color-mix(in srgb, var(--theme-surface, #0b1824) 72%, transparent); color: var(--theme-text, #f2f7fa); } #roster-hygiene-modal .empty-msg { margin: 0; padding: 16px; color: var(--theme-muted-readable, var(--theme-muted, #bdc8d1)) !important; text-align: center; font: 600 13px/1.35 'Outfit', sans-serif; } @media (max-width: 380px) { #add-contact-modal, #contact-context-modal, #remind-later-modal, #reject-request-modal, #roster-hygiene-modal, #muc-create-modal { padding-left: 10px; padding-right: 10px; } #add-contact-modal .contact-flow-modal, #contact-context-modal .contact-flow-modal, #remind-later-modal .contact-flow-modal, #reject-request-modal .contact-flow-modal, #roster-hygiene-modal .contact-flow-modal, #muc-create-modal .contact-flow-modal { width: 100%; padding: 22px 17px 18px; border-radius: 26px; } #add-contact-modal .contact-flow-header h2, #contact-context-modal .contact-flow-header h2, #remind-later-modal .contact-flow-header h2, #reject-request-modal .contact-flow-header h2, #roster-hygiene-modal .contact-flow-header h2, #muc-create-modal .contact-flow-header h2 { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { #add-contact-modal .contact-flow-modal, #contact-context-modal .contact-flow-modal, #remind-later-modal .contact-flow-modal, #reject-request-modal .contact-flow-modal, #roster-hygiene-modal .contact-flow-modal, #muc-create-modal .contact-flow-modal { animation: none !important; } } /* ========================================================= METIS V190 PROD — AUTH + PROFILE HUB + SUPER HUB POLISH V1 Visual-only modernization. No auth/profile/hub logic changed. ========================================================= */ /* ---------- AUTH ---------- */ #login-modal.login-overlay { padding: max(22px, env(safe-area-inset-top, 0px)) 16px max(22px, env(safe-area-inset-bottom, 0px)) !important; overflow-y: auto !important; align-items: center !important; background: radial-gradient(circle at 50% 12%, rgba(72, 162, 232, .17), transparent 34%), radial-gradient(circle at 12% 88%, rgba(217, 161, 62, .12), transparent 32%), linear-gradient(150deg, #040a11 0%, #081522 54%, #060b12 100%) !important; box-sizing: border-box !important; } #login-modal .login-wrapper { width: min(100%, 410px) !important; max-width: 410px !important; margin: auto !important; } #login-modal .login-logo { margin-bottom: 20px !important; } #login-modal .login-logo img { width: 86px !important; height: 86px !important; border-radius: 25px !important; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 38px rgba(0,0,0,.34), 0 0 30px rgba(72,162,232,.20) !important; } #login-modal .login-logo h1 { margin: 12px 0 0 !important; color: #f5f8fb !important; background: none !important; -webkit-text-fill-color: currentColor !important; font: 850 29px/1 'Outfit', sans-serif !important; letter-spacing: -.025em !important; } #login-modal .login-logo h1::after { content: "PRIVATE · MODERN · METIS"; display: block; margin-top: 8px; color: #8fa3b5; font: 700 9px/1.2 'Outfit', sans-serif; letter-spacing: .18em; } #login-modal .login-card { width: 100% !important; max-width: none !important; padding: 24px 22px !important; border-radius: 28px !important; border: 1px solid rgba(110, 190, 248, .20) !important; background: radial-gradient(circle at 0% 0%, rgba(71, 154, 214, .13), transparent 38%), linear-gradient(155deg, rgba(18, 37, 55, .93), rgba(7, 15, 23, .96)) !important; backdrop-filter: blur(26px) saturate(118%) !important; -webkit-backdrop-filter: blur(26px) saturate(118%) !important; box-shadow: 0 30px 80px rgba(0,0,0,.50), 0 1px 0 rgba(255,255,255,.04) inset, 0 0 34px rgba(72,162,232,.08) !important; color: #eef4f8 !important; box-sizing: border-box !important; } #login-modal .login-card > h2 { margin: 0 0 20px !important; color: #f5f8fb !important; font: 800 24px/1.1 'Outfit', sans-serif !important; letter-spacing: -.02em !important; } #login-modal .login-field { margin-bottom: 15px !important; } #login-modal .login-field label { margin: 0 0 7px !important; color: #9fb2c2 !important; font: 750 10px/1.2 'Outfit', sans-serif !important; letter-spacing: .11em !important; } #login-modal .login-field input, #login-modal .login-field select { width: 100% !important; min-height: 52px !important; padding: 0 14px !important; border-radius: 15px !important; border: 1px solid rgba(255,255,255,.11) !important; background: rgba(3, 10, 17, .56) !important; color: #f4f7fa !important; font: 600 15px/1.2 'Outfit', sans-serif !important; outline: none !important; box-shadow: 0 1px 0 rgba(255,255,255,.025) inset !important; box-sizing: border-box !important; } #login-modal .login-field input:focus, #login-modal .login-field select:focus { border-color: rgba(78, 169, 235, .78) !important; box-shadow: 0 0 0 3px rgba(78,169,235,.12) !important; } #login-modal .login-field input::placeholder { color: #728494 !important; } #login-modal #login-form > div:nth-of-type(3) { margin-bottom: 14px !important; } #login-modal #remember-me, #login-modal #login-terms-check, #login-modal #reg-terms-check { accent-color: #50a9eb !important; } #login-modal #show-forgot, #login-modal #show-register, #login-modal #show-login-from-reg, #login-modal #show-login-from-forgot { color: #9fcdf0 !important; } #login-modal #show-register, #login-modal #show-login-from-reg, #login-modal #show-login-from-forgot { padding: 10px 16px !important; border-radius: 999px !important; border: 1px solid rgba(86,173,234,.25) !important; background: rgba(71,154,214,.10) !important; font: 750 13px/1.2 'Outfit', sans-serif !important; } #login-modal [style*="rgba(217,161,62,0.07)"] { margin: 13px 0 14px !important; padding: 13px !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,.09) !important; background: rgba(255,255,255,.035) !important; } #login-modal [style*="rgba(217,161,62,0.07)"] label { color: #bac6d0 !important; } #login-modal [style*="rgba(217,161,62,0.07)"] a { color: #8ec8f2 !important; } #login-modal .login-btn { width: 100% !important; min-height: 54px !important; padding: 0 16px !important; margin: 3px 0 0 !important; border-radius: 16px !important; border: 1px solid rgba(126, 205, 255, .45) !important; background: linear-gradient(135deg, #53afea, #247ed4) !important; color: #fff !important; font: 850 14px/1.1 'Outfit', sans-serif !important; letter-spacing: .035em !important; box-shadow: 0 14px 28px rgba(36,126,212,.25), 0 1px 0 rgba(255,255,255,.28) inset !important; } #login-modal .login-btn:active { transform: scale(.985) !important; } #login-modal .metis-auth-divider { margin: 17px 0 14px !important; color: #708291 !important; } #login-modal .google-login-btn { min-height: 52px !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,.11) !important; background: rgba(255,255,255,.055) !important; color: #eef4f8 !important; font: 700 14px/1.1 'Outfit', sans-serif !important; } #login-modal .google-login-mark { border-radius: 10px !important; } #login-modal #parent-email-field p, #login-modal #forgot-password-form > p { color: #93a5b4 !important; } /* ---------- PROFILE HUB ---------- */ body[data-theme-preset] #view-profile .profile-mobile-hub-home, body[data-theme-preset] #view-profile .profile-mobile-hub-detail { border-radius: 28px !important; border: 1px solid color-mix(in srgb, var(--theme-border) 88%, transparent) !important; background: radial-gradient(circle at 14% -5%, color-mix(in srgb, var(--theme-accent) 12%, transparent), transparent 35%), linear-gradient(155deg, color-mix(in srgb, var(--theme-surface) 88%, transparent), color-mix(in srgb, var(--theme-surface) 70%, transparent) ) !important; box-shadow: 0 20px 50px rgba(0,0,0,.24), 0 1px 0 rgba(255,255,255,.025) inset !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-head { padding: 4px 4px 18px !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-head h2, body[data-theme-preset] #view-profile .profile-mobile-hub-detail-head h2 { font-size: 26px !important; letter-spacing: -.03em !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-head p, body[data-theme-preset] #view-profile .profile-mobile-hub-detail-head p { max-width: 31rem; line-height: 1.45 !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-menu { gap: 9px !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-btn:not(.pro-upgrade-banner-btn) { position: relative; min-height: 72px !important; padding: 13px 15px !important; border-radius: 18px !important; border: 1px solid color-mix(in srgb, var(--theme-border) 92%, transparent) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--theme-surface) 74%, transparent), color-mix(in srgb, var(--theme-surface) 57%, transparent) ) !important; box-shadow: 0 8px 20px rgba(0,0,0,.09) !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-btn:not(.pro-upgrade-banner-btn)::before { content: ""; width: 8px; height: 34px; flex: 0 0 8px; margin-right: 11px; border-radius: 999px; background: linear-gradient(180deg, var(--theme-accent), var(--theme-accent-2)); opacity: .78; box-shadow: 0 0 14px color-mix(in srgb, var(--theme-accent) 24%, transparent); } body[data-theme-preset] #view-profile .profile-mobile-hub-btn-copy strong { font-size: 15px !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-btn-copy span { margin-top: 3px; line-height: 1.28 !important; } body[data-theme-preset] #view-profile .profile-mobile-hub-arrow { width: 30px; height: 30px; display: grid !important; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--theme-border) 85%, transparent); background: color-mix(in srgb, var(--theme-surface) 66%, transparent); } body[data-theme-preset] #view-profile .profile-mobile-hub-back { min-height: 40px !important; padding: 0 13px !important; border-radius: 999px !important; } body[data-theme-preset] #view-profile .settings-section, body[data-theme-preset] #view-profile .profile-card, body[data-theme-preset] #view-profile .profile-editor-panel { border-radius: 20px !important; border: 1px solid color-mix(in srgb, var(--theme-border) 91%, transparent) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--theme-surface) 76%, transparent), color-mix(in srgb, var(--theme-surface) 60%, transparent) ) !important; box-shadow: 0 10px 24px rgba(0,0,0,.10) !important; } body[data-theme-preset] #view-profile .settings-section { padding: 16px !important; } body[data-theme-preset] #view-profile .settings-section h2 { padding-bottom: 11px !important; margin-bottom: 13px !important; border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 80%, transparent) !important; font-size: 16px !important; } body[data-theme-preset] #view-profile .setting-row { min-height: 54px !important; padding: 10px 0 !important; } body[data-theme-preset] #view-profile input:not([type="checkbox"]), body[data-theme-preset] #view-profile select, body[data-theme-preset] #view-profile textarea { border-radius: 14px !important; } /* ---------- SUPER HUB ---------- */ #hub-overlay.hub-menu-overlay { background: radial-gradient(circle at 50% 76%, color-mix(in srgb, var(--theme-accent, #4aa8ff) 10%, transparent), transparent 38%), rgba(3,8,14,.68) !important; backdrop-filter: blur(22px) saturate(116%) !important; -webkit-backdrop-filter: blur(22px) saturate(116%) !important; } #hub-overlay.hub-menu-overlay .hub-menu-card { width: min(100%, 520px) !important; max-width: 520px !important; max-height: min(88dvh, 820px) !important; padding: 14px 16px max(28px, env(safe-area-inset-bottom, 0px)) !important; border-radius: 30px 30px 0 0 !important; border: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.14)) 90%, transparent) !important; border-bottom: 0 !important; background: radial-gradient(circle at 10% -10%, color-mix(in srgb, var(--theme-accent, #4aa8ff) 17%, transparent), transparent 35%), linear-gradient(180deg, color-mix(in srgb, var(--theme-surface, #102538) 94%, #17395c 6%), color-mix(in srgb, var(--theme-surface, #08131d) 97%, #02060a 3%) ) !important; box-shadow: 0 -24px 70px rgba(0,0,0,.54), 0 1px 0 rgba(255,255,255,.025) inset !important; } #hub-overlay .hub-drag-pill { width: 40px !important; height: 4px !important; margin-bottom: 16px !important; background: color-mix(in srgb, var(--theme-muted, #aebbc6) 36%, transparent) !important; } #hub-overlay .hub-menu-header { padding: 0 4px 13px !important; margin-bottom: 4px !important; border-bottom: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.12)) 80%, transparent) !important; } #hub-overlay .hub-menu-title { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--theme-text, #f4f8fb) !important; font: 850 25px/1 'Outfit', sans-serif !important; letter-spacing: -.03em !important; } #hub-overlay #btn-close-hub { width: 40px !important; height: 40px !important; background: color-mix(in srgb, var(--theme-surface, #0b1722) 70%, transparent) !important; border: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.14)) 90%, transparent) !important; } #hub-overlay .hub-scroll-area { padding: 0 2px 18px !important; } #hub-overlay .hub-category-title { margin: 20px 0 9px 3px !important; color: var(--theme-muted-readable, var(--theme-muted, #aebbc6)) !important; font-size: 10px !important; letter-spacing: .14em !important; } #hub-overlay .hub-grid-2col { gap: 9px !important; } #hub-overlay .hub-mini-card { min-height: 126px; padding: 13px !important; border-radius: 18px !important; border: 1px solid color-mix(in srgb, var(--theme-border, rgba(255,255,255,.12)) 90%, transparent) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--theme-surface, #0d1b27) 70%, transparent), color-mix(in srgb, var(--theme-surface, #08131c) 54%, transparent) ) !important; box-shadow: 0 9px 22px rgba(0,0,0,.10) !important; } #hub-overlay .hub-mini-card:active { transform: scale(.975) !important; border-color: color-mix(in srgb, var(--theme-accent, #4aa8ff) 45%, transparent) !important; } #hub-overlay .hub-mini-icon { width: 40px !important; height: 40px !important; margin-bottom: 10px !important; border-radius: 13px !important; box-shadow: 0 8px 16px rgba(0,0,0,.10); } #hub-overlay .hub-mini-title { color: var(--theme-text, #fff) !important; font-size: 14px !important; } #hub-overlay .hub-mini-desc { color: var(--theme-muted-readable, var(--theme-muted, #aebbc6)) !important; font-size: 11px !important; line-height: 1.35 !important; } @media (max-width: 380px) { #login-modal.login-overlay { padding-left: 10px !important; padding-right: 10px !important; } #login-modal .login-card { padding: 21px 17px !important; border-radius: 25px !important; } #login-modal .login-logo img { width: 74px !important; height: 74px !important; } #login-modal .login-logo h1 { font-size: 26px !important; } #hub-overlay .hub-grid-2col { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } #hub-overlay .hub-mini-card { min-height: 118px; padding: 12px !important; } #hub-overlay .hub-mini-title { font-size: 13px !important; } #hub-overlay .hub-mini-desc { font-size: 10px !important; } } @media (max-height: 760px) { #login-modal.login-overlay { align-items: flex-start !important; } #login-modal .login-logo { margin-bottom: 12px !important; } #login-modal .login-logo img { width: 64px !important; height: 64px !important; } #login-modal .login-logo h1 { margin-top: 8px !important; font-size: 24px !important; } #login-modal .login-card { padding-top: 19px !important; padding-bottom: 19px !important; } } /* METIS V190 PROD — AUTH VERTICAL SAFETY V1 */ #login-modal.login-overlay:has(#register-form[style*="block"]), #login-modal.login-overlay:has(#forgot-password-form[style*="block"]) { align-items: flex-start !important; } #login-modal.login-overlay:has(#register-form[style*="block"]) .login-wrapper, #login-modal.login-overlay:has(#forgot-password-form[style*="block"]) .login-wrapper { margin-top: max(8px, env(safe-area-inset-top, 0px)) !important; margin-bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important; } #login-modal.login-overlay:has(#register-form[style*="block"]) .login-logo { margin-bottom: 12px !important; } #login-modal.login-overlay:has(#register-form[style*="block"]) .login-logo img { width: 68px !important; height: 68px !important; } #login-modal.login-overlay:has(#register-form[style*="block"]) .login-logo h1 { margin-top: 7px !important; font-size: 24px !important; } #login-modal.login-overlay:has(#register-form[style*="block"]) .login-logo h1::after { margin-top: 5px; } #login-modal #register-form { margin-bottom: 16px; } /* METIS V190 PROD — EXPRESSION ENGINE + METIS SIGNAL V1 */ .chat-input-area{position:relative!important}.chat-input-bar{gap:5px!important}.chat-input-bar #message-input{min-width:0!important} .metis-composer-tool{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;padding:0;border-radius:12px;border:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.15)) 92%,transparent);background:color-mix(in srgb,var(--theme-surface,#10202d) 74%,transparent);color:var(--theme-text,#f5f8fb);font:800 21px/1 'Outfit',sans-serif;box-shadow:0 7px 16px rgba(0,0,0,.12)} .metis-composer-tool:active{transform:scale(.94)}.metis-composer-tool.active{border-color:color-mix(in srgb,var(--theme-accent,#4aa8ff) 68%,transparent);background:color-mix(in srgb,var(--theme-accent,#4aa8ff) 18%,var(--theme-surface,#10202d) 82%);box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent,#4aa8ff) 10%,transparent),0 8px 20px rgba(0,0,0,.16)} .metis-signal-launcher{font-size:23px;color:color-mix(in srgb,var(--theme-accent-2,#e4b85b) 78%,white 22%)} .metis-expression-panel,.metis-signal-panel{position:absolute;left:10px;right:10px;bottom:calc(100% + 9px);z-index:520;width:auto;max-height:min(68dvh,620px);overflow:hidden;border-radius:24px;border:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.14)) 95%,transparent);background:radial-gradient(circle at 8% -12%,color-mix(in srgb,var(--theme-accent,#4aa8ff) 16%,transparent),transparent 35%),linear-gradient(155deg,color-mix(in srgb,var(--theme-surface,#102538) 96%,#17395c 4%),color-mix(in srgb,var(--theme-surface,#08131d) 98%,#02060a 2%));box-shadow:0 28px 70px rgba(0,0,0,.52),0 1px 0 rgba(255,255,255,.03) inset;backdrop-filter:blur(24px) saturate(118%);-webkit-backdrop-filter:blur(24px) saturate(118%)} .metis-panel-head{min-height:61px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.12)) 86%,transparent)}.metis-panel-head>div{min-width:0;display:grid;gap:2px}.metis-panel-head strong{color:var(--theme-text,#fff);font:850 17px/1.15 'Outfit',sans-serif;letter-spacing:-.02em}.metis-panel-head span{color:var(--theme-muted-readable,var(--theme-muted,#aebbc6));font:600 11px/1.2 'Outfit',sans-serif}.metis-panel-head>button{flex:0 0 38px;width:38px;height:38px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.14)) 90%,transparent);background:color-mix(in srgb,var(--theme-surface,#0b1722) 72%,transparent);color:var(--theme-muted-readable,#c7d1da);font:400 27px/1 Arial,sans-serif} .metis-emoji-search-row{margin:11px 12px 8px;min-height:45px;display:flex;align-items:center;gap:8px;padding:0 11px;border-radius:14px;border:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.13)) 90%,transparent);background:color-mix(in srgb,var(--theme-surface,#07131d) 74%,transparent)}.metis-emoji-search-row input{flex:1 1 auto;min-width:0;height:43px;padding:0!important;border:0!important;outline:0!important;background:transparent!important;color:var(--theme-text,#fff)!important;font:600 13px/1 'Outfit',sans-serif!important;box-shadow:none!important} .metis-emoji-tabs{display:flex;gap:5px;padding:2px 10px 9px;overflow-x:auto;scrollbar-width:none}.metis-emoji-tabs::-webkit-scrollbar{display:none}.metis-emoji-tab{flex:0 0 auto;min-width:50px;height:48px;padding:5px 7px;display:grid;place-items:center;gap:1px;border-radius:13px;border:1px solid transparent;background:transparent;color:var(--theme-muted-readable,#b9c5cf)}.metis-emoji-tab span{font-size:20px}.metis-emoji-tab small{font:650 8px/1 'Outfit',sans-serif}.metis-emoji-tab.active{border-color:color-mix(in srgb,var(--theme-accent,#4aa8ff) 38%,transparent);background:color-mix(in srgb,var(--theme-accent,#4aa8ff) 12%,transparent);color:var(--theme-text,#fff)} .metis-emoji-tone-row{min-height:39px;padding:5px 12px 8px;display:flex;align-items:center;gap:7px;border-block:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.08)) 70%,transparent);color:var(--theme-muted-readable,#aebbc6)}.metis-emoji-tone-row>span{font:700 9px/1 'Outfit',sans-serif;text-transform:uppercase;letter-spacing:.08em}.metis-emoji-tone-row>small{margin-left:auto;font:600 8px/1 'Outfit',sans-serif;white-space:nowrap;opacity:.78}#metis-emoji-tones{display:flex;gap:3px}.metis-tone-btn{width:28px;height:28px;display:grid;place-items:center;padding:0;border-radius:9px;border:1px solid transparent;background:transparent;font-size:16px}.metis-tone-btn.active{border-color:color-mix(in srgb,var(--theme-accent-2,#e4b85b) 52%,transparent);background:color-mix(in srgb,var(--theme-accent-2,#e4b85b) 11%,transparent)} .metis-emoji-grid{max-height:min(36dvh,320px);overflow-y:auto;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;padding:10px 10px 14px}.metis-emoji-cell{position:relative;aspect-ratio:1;min-height:38px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:11px;background:transparent;font-size:clamp(22px,6vw,28px);line-height:1}.metis-emoji-cell:active{transform:scale(.88);background:color-mix(in srgb,var(--theme-accent,#4aa8ff) 13%,transparent)}.metis-emoji-cell i{display:none;position:absolute;top:1px;right:2px;color:var(--theme-accent-2,#e4b85b);font:800 8px/1 Arial}.metis-emoji-cell.favorite i{display:block}.metis-emoji-empty{margin:0;padding:28px 18px 34px;color:var(--theme-muted-readable,#aebbc6);text-align:center;font:600 12px/1.4 'Outfit',sans-serif} .metis-signal-active{margin:0 0 6px;display:flex;align-items:stretch;max-width:100%;border-radius:13px;overflow:hidden;border:1px solid color-mix(in srgb,var(--theme-accent-2,#e4b85b) 34%,transparent);background:color-mix(in srgb,var(--theme-accent-2,#e4b85b) 8%,var(--theme-surface,#0c1924) 92%)}.metis-signal-chip-main{flex:1 1 auto;min-width:0;padding:8px 11px;border:0;background:transparent;color:var(--theme-text,#fff);text-align:left}.metis-signal-chip-main span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 10px/1.2 'Outfit',sans-serif}.metis-signal-chip-clear{flex:0 0 35px;border:0;border-left:1px solid color-mix(in srgb,var(--theme-accent-2,#e4b85b) 22%,transparent);background:transparent;color:var(--theme-muted-readable,#c7d1da);font-size:20px} .metis-signal-preview{margin:10px 12px 4px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--theme-accent-2,#e4b85b) 28%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--theme-accent-2,#e4b85b) 9%,transparent),color-mix(in srgb,var(--theme-accent,#4aa8ff) 7%,transparent));color:var(--theme-text,#fff);font:700 11px/1.35 'Outfit',sans-serif}.metis-signal-scroll{max-height:min(46dvh,410px);overflow-y:auto;padding:0 12px 10px}.metis-signal-section{padding:12px 0 3px}.metis-signal-section h4{margin:0 0 8px;color:var(--theme-muted-readable,#aebbc6);font:800 9px/1.2 'Outfit',sans-serif;letter-spacing:.1em;text-transform:uppercase}.metis-signal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.metis-signal-choice{min-height:48px;padding:8px 9px;display:flex;align-items:center;gap:8px;border-radius:14px;border:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.12)) 88%,transparent);background:color-mix(in srgb,var(--theme-surface,#0a1722) 70%,transparent);color:var(--theme-text,#f4f8fb);text-align:left;font:650 10px/1.22 'Outfit',sans-serif}.metis-signal-choice-icon{flex:0 0 26px;width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.04);font-size:16px}.metis-signal-choice.active{border-color:color-mix(in srgb,var(--theme-accent-2,#e4b85b) 55%,transparent);background:color-mix(in srgb,var(--theme-accent-2,#e4b85b) 11%,var(--theme-surface,#0a1722) 89%)} .metis-signal-footer{display:grid;grid-template-columns:.85fr 1.15fr;gap:8px;padding:10px 12px 12px;border-top:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.1)) 80%,transparent)}.metis-signal-footer button{min-height:47px;padding:0 11px;border-radius:14px;font:800 11px/1.15 'Outfit',sans-serif}#metis-signal-reset{border:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.14)) 90%,transparent);background:color-mix(in srgb,var(--theme-surface,#0b1722) 68%,transparent);color:var(--theme-muted-readable,#c4ced7)}#metis-signal-apply{border:1px solid color-mix(in srgb,var(--theme-accent-2,#e4b85b) 48%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--theme-accent-2,#e4b85b) 78%,#fff 10%),color-mix(in srgb,var(--theme-accent,#4aa8ff) 52%,var(--theme-accent-2,#e4b85b) 48%));color:#071019} .msg-bubble[data-msg-id]{position:relative}.msg-meta-row{margin-top:5px;display:flex;align-items:center;justify-content:flex-end;gap:6px}.msg-meta-row .msg-time,.msg-meta-row .msg-tick{position:static!important;margin:0!important}.metis-mega-emoji{font-size:clamp(42px,12vw,64px)!important;line-height:1.08!important;padding:2px 1px 5px;background:transparent!important;text-shadow:0 8px 22px rgba(0,0,0,.18)} .metis-react-trigger{width:29px;height:24px;padding:0;border-radius:999px;border:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.14)) 86%,transparent);background:color-mix(in srgb,var(--theme-surface,#0b1722) 44%,transparent);color:var(--theme-muted-readable,#b9c5cf);font:800 10px/1 Arial}.metis-reaction-summary{position:absolute;right:9px;bottom:-14px;min-height:25px;display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.14)) 92%,transparent);background:color-mix(in srgb,var(--theme-surface,#07131d) 92%,transparent);box-shadow:0 7px 16px rgba(0,0,0,.20);font-size:14px;z-index:3}.msg-row:has(.metis-reaction-summary){margin-bottom:13px} .metis-reaction-popover{position:fixed;z-index:999999;min-height:54px;display:flex;align-items:center;gap:3px;padding:7px;overflow-x:auto;scrollbar-width:none;border-radius:18px;border:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.16)) 94%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--theme-surface,#102538) 97%,transparent),color-mix(in srgb,var(--theme-surface,#07131d) 97%,transparent));box-shadow:0 20px 48px rgba(0,0,0,.52);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.metis-reaction-choice{flex:0 0 38px;width:38px;height:38px;padding:0;display:grid;place-items:center;border-radius:12px;border:1px solid transparent;background:transparent;font-size:22px}.metis-reaction-choice.active{border-color:color-mix(in srgb,var(--theme-accent,#4aa8ff) 46%,transparent);background:color-mix(in srgb,var(--theme-accent,#4aa8ff) 12%,transparent)} .msg-bubble.metis-signal-bubble{max-width:min(92%,440px)!important;border-color:color-mix(in srgb,var(--theme-accent-2,#e4b85b) 33%,transparent)!important;background:radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--theme-accent-2,#e4b85b) 12%,transparent),transparent 34%),linear-gradient(150deg,color-mix(in srgb,var(--theme-surface,#12293a) 88%,transparent),color-mix(in srgb,var(--theme-surface,#09151f) 80%,transparent))!important;box-shadow:0 14px 34px rgba(0,0,0,.18)}.msg-bubble.metis-signal-bubble.sensitive{border-color:color-mix(in srgb,#a881ff 44%,transparent)!important}.metis-signal-card{min-width:min(290px,72vw)}.metis-signal-card>header{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.1)) 80%,transparent)}.metis-signal-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--theme-accent-2,#e4b85b) 11%,rgba(255,255,255,.025));font-size:20px}.metis-signal-card header>div:nth-child(2){min-width:0;display:grid;gap:2px}.metis-signal-card header strong{color:var(--theme-text,#fff);font:800 12px/1.2 'Outfit',sans-serif}.metis-signal-card header span{color:color-mix(in srgb,var(--theme-accent-2,#e4b85b) 72%,var(--theme-muted,#aebbc6) 28%);font:800 8px/1 'Outfit',sans-serif;letter-spacing:.12em}.metis-signal-message{padding:13px 2px 11px;color:var(--theme-text,#f5f8fb);font:600 14px/1.48 'Outfit',sans-serif;word-break:break-word}.metis-signal-meta{display:flex;flex-wrap:wrap;gap:5px}.metis-signal-meta>span{padding:5px 7px;border-radius:999px;border:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.11)) 82%,transparent);background:rgba(255,255,255,.035);color:var(--theme-muted-readable,#b9c5cf);font:650 8px/1.1 'Outfit',sans-serif}.metis-signal-recipient-state{margin-top:10px;padding:8px 9px;border-radius:11px;border:1px dashed color-mix(in srgb,var(--theme-border,rgba(255,255,255,.14)) 82%,transparent);color:var(--theme-muted-readable,#aebbc6);font:650 9px/1.2 'Outfit',sans-serif}.metis-signal-recipient-state.has-state{border-style:solid;border-color:color-mix(in srgb,var(--theme-accent,#4aa8ff) 33%,transparent);background:color-mix(in srgb,var(--theme-accent,#4aa8ff) 8%,transparent);color:var(--theme-text,#fff)} .metis-signal-response-strip{margin:10px -2px 0;display:flex;gap:5px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none}.metis-signal-response-btn{flex:0 0 auto;max-width:112px;min-height:45px;padding:5px 8px;display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:5px;border-radius:12px;border:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.12)) 84%,transparent);background:rgba(255,255,255,.035);color:var(--theme-muted-readable,#b9c5cf);text-align:left}.metis-signal-response-btn>span{font-size:17px}.metis-signal-response-btn>small{font:650 8px/1.14 'Outfit',sans-serif}.metis-signal-response-btn.active{border-color:color-mix(in srgb,var(--theme-accent,#4aa8ff) 43%,transparent);background:color-mix(in srgb,var(--theme-accent,#4aa8ff) 11%,transparent);color:var(--theme-text,#fff)} @media(max-width:380px){.chat-input-bar{gap:3px!important}.metis-composer-tool{flex-basis:32px;width:32px;height:32px;border-radius:10px;font-size:19px}.metis-expression-panel,.metis-signal-panel{left:5px;right:5px;border-radius:21px}.metis-emoji-grid{grid-template-columns:repeat(7,minmax(0,1fr));padding-inline:7px}.metis-emoji-tone-row>small{display:none}.metis-signal-choice{min-height:45px;padding:7px}} @media(max-height:650px){.metis-expression-panel,.metis-signal-panel{max-height:72dvh}.metis-emoji-grid{max-height:31dvh}.metis-signal-scroll{max-height:38dvh}} /* ========================================================= METIS V190 — BRAND VISUAL PACK PRODUCTION READY Approved assets 2026-09-18 ========================================================= */ /* Login / registration / recovery: cosmic welcome background */ #login-modal.login-overlay { position: fixed; isolation: isolate; background: linear-gradient(180deg, rgba(2,8,23,.26) 0%, rgba(2,8,23,.58) 48%, rgba(2,8,23,.90) 100%), url('../assets/brand-v190/metischat_welcome_cosmic_v190.webp') center center / cover no-repeat !important; } #login-modal.login-overlay::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 18%, rgba(83,150,255,.14), transparent 34%), linear-gradient(90deg, rgba(2,8,23,.18), transparent 28%, transparent 72%, rgba(2,8,23,.18)); } #login-modal .login-wrapper { position: relative; z-index: 1; } #login-modal .login-logo img { width: 92px !important; height: 92px !important; border-radius: 50% !important; object-fit: cover !important; box-shadow: 0 0 0 1px rgba(255,220,120,.44), 0 12px 38px rgba(0,0,0,.48), 0 0 34px rgba(78,151,255,.20); } #login-modal .login-card { background: linear-gradient(155deg, rgba(9,19,38,.84), rgba(5,12,27,.72)) !important; border-color: rgba(222,178,89,.30) !important; box-shadow: 0 24px 65px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.045) !important; backdrop-filter: blur(22px) saturate(1.12) !important; -webkit-backdrop-filter: blur(22px) saturate(1.12) !important; } /* Home welcome: cinematic landscape, content protected by dark gradient */ #view-home .dash-hero-welcome { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(4,11,25,.92) 0%, rgba(4,11,25,.72) 46%, rgba(4,11,25,.28) 100%), url('../assets/brand-v190/metischat_hero_landscape_v190.webp') center 44% / cover no-repeat !important; border-color: rgba(222,178,89,.22) !important; } #view-home .dash-hero-welcome::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%, rgba(2,8,23,.12)); } #view-home .dash-hero-welcome > * { position: relative; z-index: 1; } /* Default chat wallpaper. Never overrides a user-selected background mode. */ body:not([data-background-mode]) #view-chat.active, body:not([data-background-mode]) #view-chat.active .chat-main, body:not([data-background-mode]) #view-chat.active .messages-area { background-color: transparent !important; } body:not([data-background-mode]) #view-chat.active .chat-main { background-image: linear-gradient(rgba(4,12,27,.70), rgba(4,12,27,.78)), url('../assets/brand-v190/metischat_chat_wallpaper_v190.webp') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } body:not([data-background-mode]) #view-chat.active .messages-area { background: linear-gradient(180deg, rgba(3,10,23,.08), rgba(3,10,23,.20)) !important; } /* Profile: approved portrait background as default only. */ body:not([data-background-mode]) #view-profile.active { position: relative; background: linear-gradient(180deg, rgba(3,10,24,.62) 0%, rgba(3,10,24,.84) 48%, rgba(3,10,24,.96) 100%), url('../assets/brand-v190/metischat_profile_background_v190.webp') center top / cover no-repeat fixed !important; } body:not([data-background-mode]) #view-profile.active .profile-card, body:not([data-background-mode]) #view-profile.active .profile-editor-panel, body:not([data-background-mode]) #view-profile.active .settings-section { backdrop-filter: blur(16px) saturate(1.08); -webkit-backdrop-filter: blur(16px) saturate(1.08); } /* Hub: landscape becomes a subdued visual header, never blocks controls. */ #hub-overlay .hub-menu-card { position: relative; isolation: isolate; overflow: hidden; } #hub-overlay .hub-menu-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 190px; z-index: -1; pointer-events: none; opacity: .50; background: linear-gradient(180deg, rgba(5,12,28,.10), rgba(5,12,28,.82) 76%, rgba(5,12,28,1) 100%), url('../assets/brand-v190/metischat_hero_landscape_v190.webp') center 45% / cover no-repeat; } #hub-overlay .hub-menu-header, #hub-overlay .hub-scroll-area { position: relative; z-index: 1; } @media (max-width: 380px) { #login-modal .login-logo img { width: 78px !important; height: 78px !important; } #hub-overlay .hub-menu-card::before { height: 160px; } } @media (prefers-reduced-motion: reduce) { #login-modal .login-logo img { transition: none !important; } } /* METIS V190 — TESTER RECRUITMENT CTA */ .tile-tester-v190{ text-decoration:none!important; color:inherit!important; cursor:pointer; position:relative; overflow:hidden; border-color:rgba(245,191,69,.24)!important; background: linear-gradient(145deg,rgba(17,56,105,.78),rgba(6,20,48,.88))!important; } .tile-tester-v190::before{ content:''; position:absolute;inset:0; pointer-events:none; background:radial-gradient(circle at 88% 14%,rgba(245,191,69,.13),transparent 32%); } .tile-tester-v190>*{position:relative;z-index:1} .tile-tester-v190 .tile-icon-wrap{ background:linear-gradient(145deg,rgba(245,191,69,.22),rgba(24,143,216,.17))!important; border:1px solid rgba(255,224,118,.22); } .tile-tester-v190:hover{ border-color:rgba(245,191,69,.38)!important; transform:translateY(-1px); } /* ========================================================= METIS V190.4 — BOTTOM DOCK CONTRAST AUTHORITY Guarantees readable nav controls across every theme/background. ========================================================= */ body.is-mobile-device .bottom-nav, body[data-surface-theme] .bottom-nav, body[data-background-mode="color"] .bottom-nav, body[data-background-mode="image"] .bottom-nav { background: linear-gradient(180deg, color-mix(in srgb, var(--theme-surface, #0F1A24) 94%, transparent), color-mix(in srgb, var(--theme-page, #050A0F) 96%, transparent) ) !important; border-top: 1px solid color-mix(in srgb, var(--theme-text, #E8EDF2) 15%, transparent) !important; box-shadow: 0 -10px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035) !important; backdrop-filter: blur(24px) saturate(1.25) !important; -webkit-backdrop-filter: blur(24px) saturate(1.25) !important; } body[data-surface-theme] .bottom-nav .nav-btn, body.is-mobile-device .bottom-nav .nav-btn { color: var(--theme-text, #E8EDF2) !important; opacity: 1 !important; visibility: visible !important; } body[data-surface-theme] .bottom-nav .nav-btn .nav-label, body[data-surface-theme] .bottom-nav .nav-btn .nav-icon-box, body.is-mobile-device .bottom-nav .nav-btn .nav-label, body.is-mobile-device .bottom-nav .nav-btn .nav-icon-box { color: var(--theme-text, #E8EDF2) !important; opacity: .86 !important; visibility: visible !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 2px rgba(0,0,0,.32) !important; } body[data-surface-theme] .bottom-nav .nav-btn .nav-icon-box, body.is-mobile-device .bottom-nav .nav-btn .nav-icon-box { border-radius: 14px !important; border: 1px solid transparent !important; background: color-mix(in srgb, var(--theme-text, #E8EDF2) 6%, transparent) !important; } body[data-surface-theme] .bottom-nav .nav-btn.active-tab .nav-label, body[data-surface-theme] .bottom-nav .nav-btn.active-tab .nav-icon-box, body.is-mobile-device .bottom-nav .nav-btn.active-tab .nav-label, body.is-mobile-device .bottom-nav .nav-btn.active-tab .nav-icon-box { color: var(--theme-accent-bright, var(--theme-accent, #D9A13E)) !important; opacity: 1 !important; visibility: visible !important; } body[data-surface-theme] .bottom-nav .nav-btn.active-tab .nav-icon-box, body.is-mobile-device .bottom-nav .nav-btn.active-tab .nav-icon-box { background: color-mix(in srgb, var(--theme-accent, #D9A13E) 18%, transparent) !important; border-color: color-mix(in srgb, var(--theme-accent-bright, #F5C77D) 42%, transparent) !important; box-shadow: 0 0 0 1px rgba(0,0,0,.16), 0 5px 16px rgba(0,0,0,.20) !important; } /* HUB and Social use bitmap icons: give them a guaranteed contrast chip. */ body[data-surface-theme] .bottom-nav .nav-icon-box.hub-icon.hub-icon-clear, body.is-mobile-device .bottom-nav .nav-icon-box.hub-icon.hub-icon-clear, body[data-surface-theme] #tab-social .nav-icon-box, body.is-mobile-device #tab-social .nav-icon-box { background: color-mix(in srgb, var(--theme-text, #E8EDF2) 9%, transparent) !important; border: 1px solid color-mix(in srgb, var(--theme-text, #E8EDF2) 11%, transparent) !important; } body[data-surface-theme] .bottom-nav .hub-custom-icon, body[data-surface-theme] #tab-social .nav-icon-box img, body.is-mobile-device .bottom-nav .hub-custom-icon, body.is-mobile-device #tab-social .nav-icon-box img { opacity: 1 !important; visibility: visible !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)) brightness(1.08) contrast(1.06) !important; } body[data-surface-theme] .bottom-nav .nav-btn.active-tab .hub-custom-icon, body[data-surface-theme] .bottom-nav #tab-social.active-tab .nav-icon-box img, body.is-mobile-device .bottom-nav .nav-btn.active-tab .hub-custom-icon, body.is-mobile-device .bottom-nav #tab-social.active-tab .nav-icon-box img { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--theme-accent, #D9A13E) 62%, transparent)) brightness(1.14) contrast(1.08) !important; } /* Explicitly neutralize legacy light-dock rules for these surface families. */ body[data-surface-theme="sage"] .bottom-nav, body[data-surface-theme="sand"] .bottom-nav, body[data-surface-theme="lagoon"] .bottom-nav, body[data-surface-theme="arctic"] .bottom-nav { color: var(--theme-text, #E8EDF2) !important; } @media (prefers-reduced-motion: reduce) { body.is-mobile-device .bottom-nav .nav-btn, body.is-mobile-device .bottom-nav .nav-icon-box, body.is-mobile-device .bottom-nav .nav-label { transition: none !important; } } /* METIS STAFF IDENTITY — sober official accounts, not consumer profiles */ .contact-item.is-metis-staff{ border-color: color-mix(in srgb, var(--theme-accent, #58C8E8) 26%, rgba(255,255,255,.08)) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--theme-surface, #0F1A24) 93%, #0b2238 7%), color-mix(in srgb, var(--theme-page, #050A0F) 96%, transparent) ) !important; } .contact-item.is-metis-staff .contact-avatar{ border: 1px solid color-mix(in srgb, var(--theme-accent, #58C8E8) 44%, rgba(255,255,255,.10)) !important; box-shadow: 0 0 0 2px rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.24) !important; background: #0b1724 !important; } .contact-item.is-metis-staff .avatar-fallback-initials, .contact-item.is-metis-staff .avatar-fallback-initials.is-visible{ background: linear-gradient(145deg, rgba(28,55,78,.98), rgba(7,18,30,.98)) !important; color: #d9edf8 !important; font-weight: 850 !important; letter-spacing: .06em !important; } .contact-item.is-metis-founder .contact-avatar{ border-color: rgba(217,161,62,.56) !important; } .contact-item.is-metis-founder .avatar-fallback-initials, .contact-item.is-metis-founder .avatar-fallback-initials.is-visible{ background: linear-gradient(145deg, rgba(78,59,24,.98), rgba(20,15,8,.98)) !important; color: #f5d79b !important; } .staff-identity-badge{ display:inline-flex; align-items:center; min-height:18px; padding:2px 6px; border-radius:6px; border:1px solid rgba(88,200,232,.28); background:rgba(17,75,101,.22); color:#9fdcf0; font-size:8px; font-weight:900; letter-spacing:.08em; line-height:1; white-space:nowrap; text-transform:uppercase; } .staff-identity-badge--founder{ border-color:rgba(217,161,62,.38); background:rgba(95,69,18,.22); color:#f0c76f; } .contact-staff-role{ margin:2px 0 1px; color: color-mix(in srgb, var(--theme-text, #E8EDF2) 68%, transparent); font-size:10px; line-height:1.25; font-weight:650; letter-spacing:.01em; } .contact-item.is-metis-staff .contact-status{ opacity:.74; font-size:10px; } .metis-staff-profile-badge{ display:inline-flex; align-items:center; width:max-content; margin:3px 0 9px; padding:4px 8px; border-radius:7px; border:1px solid rgba(88,200,232,.30); background:rgba(17,75,101,.18); color:#a8e0f1; font-size:9px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; } .metis-staff-profile-badge--founder{ border-color:rgba(217,161,62,.40); background:rgba(95,69,18,.20); color:#f1ce83; } #user-profile-modal.is-metis-staff-profile .user-modal-headline{ color:#b8c9d7 !important; font-weight:650 !important; } #user-profile-modal.is-metis-staff-profile #view-user-avatar{ filter:saturate(.72) contrast(1.03); border:1px solid rgba(88,200,232,.30); } #user-profile-modal.is-metis-founder-profile #view-user-avatar{ border-color:rgba(217,161,62,.42); } /* METIS DIRECT MEDIA — P2P video/file cards */ .metis-direct-bubble{ width:min(520px,88vw)!important; max-width:min(520px,88vw)!important; padding:10px!important; background:linear-gradient(155deg,rgba(8,26,48,.96),rgba(4,13,27,.98))!important; border:1px solid rgba(72,199,243,.24)!important; } .metis-direct-card{display:grid;gap:9px;min-width:0} .metis-direct-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;color:var(--theme-text,#e8edf2);font-size:11px} .metis-direct-head>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:750} .metis-direct-head small{color:var(--theme-muted,#91a7b7);font-size:9px} .metis-direct-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 6px;border-radius:6px;border:1px solid rgba(72,199,243,.30);background:rgba(26,103,136,.22);color:#87dcf6;font-size:8px;font-weight:950;letter-spacing:.08em} .metis-direct-video,.metis-direct-image{display:block;width:100%;max-height:420px;object-fit:contain;border-radius:12px;background:#02070d} .metis-direct-audio{width:100%} .metis-direct-wait{display:flex;align-items:center;gap:10px;padding:17px 14px;border:1px dashed rgba(121,177,207,.20);border-radius:12px;background:rgba(0,0,0,.15)} .metis-direct-wait>div{display:grid;gap:3px;min-width:0} .metis-direct-wait strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--theme-text,#e8edf2)} .metis-direct-wait small{font-size:9px;color:var(--theme-muted,#91a7b7)} .metis-direct-spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(72,199,243,.18);border-top-color:#48c7f3;animation:metisDirectSpin .8s linear infinite;flex:0 0 auto} .metis-direct-foot{font-size:8px;color:var(--theme-muted,#91a7b7);opacity:.72;letter-spacing:.03em} .metis-direct-download{display:inline-flex!important;width:max-content!important} @keyframes metisDirectSpin{to{transform:rotate(360deg)}} /* METIS HOTFIX 2026-09-20 — cross-theme legibility */ body[data-surface-theme] .msg-bubble.sent .msg-text, body[data-theme-preset] .msg-bubble.sent .msg-text { color:#071118!important; -webkit-text-fill-color:#071118!important; opacity:1!important; } body[data-surface-theme] .msg-bubble.received .msg-text, body[data-theme-preset] .msg-bubble.received .msg-text { color:var(--theme-text,#f5f8fb)!important; -webkit-text-fill-color:currentColor!important; opacity:1!important; } body[data-surface-theme] #message-input, body[data-theme-preset] #message-input, body[data-surface-theme] .message-input, body[data-theme-preset] .message-input { color:var(--theme-text,#f5f8fb)!important; -webkit-text-fill-color:currentColor!important; caret-color:var(--theme-accent,#d9a13e)!important; background:color-mix(in srgb,var(--theme-surface-strong,#162433) 92%,transparent)!important; } body[data-surface-theme] #message-input::placeholder, body[data-theme-preset] #message-input::placeholder, body[data-surface-theme] .message-input::placeholder, body[data-theme-preset] .message-input::placeholder { color:var(--theme-muted-readable,#aebbc6)!important; -webkit-text-fill-color:currentColor!important; opacity:.9!important; } body[data-surface-theme] select, body[data-theme-preset] select { color:var(--theme-text,#f5f8fb)!important; -webkit-text-fill-color:currentColor!important; background:var(--theme-surface-strong,#162433)!important; } body[data-surface-theme] select option, body[data-theme-preset] select option { color:#101820!important; background:#f6f4ef!important; } /* METIS HOTFIX 2026-09-21 — unconditional message body legibility */ .msg-bubble .msg-text { display:block!important; visibility:visible!important; opacity:1!important; color:#f5f8fb!important; -webkit-text-fill-color:#f5f8fb!important; font-size:15px!important; line-height:1.4!important; white-space:pre-wrap!important; } .msg-bubble.sent .msg-text { color:#071118!important; -webkit-text-fill-color:#071118!important; } /* ============================================================ METIS FRIENDSHIP UX V235 — azioni leggibili, niente "+" ambiguo ============================================================ */ .contact-item .contact-actions { gap: 8px !important; flex-wrap: nowrap !important; } .contact-item .contact-actions button.friend-action-btn { width: auto !important; height: 38px !important; min-height: 38px !important; min-width: 76px !important; padding: 0 12px !important; border-radius: 12px !important; font: 800 12px/1 'Outfit', sans-serif !important; letter-spacing: 0.1px !important; white-space: nowrap !important; transform: none !important; } .contact-item .contact-actions button.friend-action-btn .btn-label { display: inline !important; margin: 0 !important; white-space: nowrap !important; } .contact-item .contact-actions button.friend-action-add { min-width: 118px !important; background: linear-gradient(135deg, var(--theme-accent, #D9A13E), var(--theme-accent-2, #F2C94C)) !important; border-color: rgba(242, 201, 76, 0.48) !important; color: #071118 !important; box-shadow: 0 5px 14px rgba(0,0,0,0.22) !important; } .contact-item .contact-actions button.friend-action-accept { background: linear-gradient(135deg, var(--theme-accent, #D9A13E), var(--theme-accent-2, #F2C94C)) !important; border-color: rgba(242, 201, 76, 0.48) !important; color: #071118 !important; } .contact-item .contact-actions button.friend-action-reject { background: rgba(255,255,255,0.055) !important; border-color: rgba(255,255,255,0.14) !important; color: #e2e8f0 !important; } .contact-item .contact-actions button.friend-action-btn:hover { transform: translateY(-1px) !important; } .friend-pending-status { display: inline-flex !important; align-items: center !important; min-height: 34px !important; border-radius: 10px !important; background: rgba(217,161,62,0.10) !important; border: 1px solid rgba(217,161,62,0.22) !important; font-weight: 700 !important; white-space: nowrap !important; } @media (max-width: 430px) { .contact-item.is-pending .contact-actions { gap: 6px !important; } .contact-item.is-pending .contact-actions button.friend-action-btn { min-width: 68px !important; padding: 0 10px !important; font-size: 11px !important; } .contact-item .contact-actions button.friend-action-add { min-width: 108px !important; } } /* ============================================================ METIS FRIENDSHIP UX V239 — mobile CTA layout ============================================================ */ body.is-mobile-device .contact-item.discovery-card { flex-wrap: wrap !important; align-items: center !important; } body.is-mobile-device .contact-item.discovery-card .contact-info { flex: 1 1 180px !important; padding-right: 0 !important; } body.is-mobile-device .contact-item.discovery-card .contact-actions { flex: 1 0 100% !important; width: 100% !important; margin-top: 4px !important; justify-content: flex-end !important; } body.is-mobile-device .contact-item.discovery-card .contact-actions button.friend-action-add { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; } body.is-mobile-device .contact-item.discovery-card .contact-actions button.profile-btn { flex: 0 0 40px !important; width: 40px !important; height: 38px !important; min-height: 38px !important; } body.is-mobile-device .contact-item.pending-incoming { flex-wrap: wrap !important; } body.is-mobile-device .contact-item.pending-incoming .contact-actions { flex: 1 0 100% !important; width: 100% !important; margin-top: 4px !important; justify-content: stretch !important; } body.is-mobile-device .contact-item.pending-incoming .contact-actions button.friend-action-accept, body.is-mobile-device .contact-item.pending-incoming .contact-actions button.friend-action-reject { flex: 1 1 0 !important; min-width: 0 !important; } body.is-mobile-device .contact-item.pending-incoming .contact-actions button.profile-btn { flex: 0 0 40px !important; width: 40px !important; } /* ============================================================ METIS MOBILE CHAT AUTHORITY V240 — PORTRAIT Un solo stato autorevole: lista contatti oppure chat fullscreen. ============================================================ */ @media (orientation: portrait) and (max-width: 900px) { body.is-mobile-device.mobile-chat-open, body.is-mobile-device.mobile-chat-open #app { overflow: hidden !important; } body.is-mobile-device.mobile-chat-open .bottom-nav, body.is-mobile-device .app-container.mobile-chat-open .bottom-nav, body.is-mobile-device.mobile-chat-open .app-header { display: none !important; } body.is-mobile-device.mobile-chat-open #app > .app-content { position: fixed !important; inset: 0 !important; margin: 0 !important; padding: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; overflow: hidden !important; } body.is-mobile-device.mobile-chat-open #view-chat.active { position: fixed !important; inset: 0 !important; display: block !important; margin: 0 !important; padding: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; overflow: hidden !important; } body.is-mobile-device.mobile-chat-open #view-chat.active .contacts-sidebar, body.is-mobile-device .app-container.mobile-chat-open #view-chat.active .contacts-sidebar { display: none !important; width: 0 !important; min-width: 0 !important; height: 0 !important; visibility: hidden !important; pointer-events: none !important; } body.is-mobile-device.mobile-chat-open #view-chat.active .chat-main, body.is-mobile-device .app-container.mobile-chat-open #view-chat.active .chat-main, body.is-mobile-device.mobile-chat-open #view-chat.active.contacts-hidden .chat-main { display: flex !important; flex-direction: column !important; position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important; margin: 0 !important; padding: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; min-height: 0 !important; max-height: 100dvh !important; box-sizing: border-box !important; overflow: hidden !important; transform: none !important; visibility: visible !important; opacity: 1 !important; z-index: 30000 !important; } body.is-mobile-device.mobile-chat-open #main-chat-header { flex: 0 0 auto !important; position: relative !important; box-sizing: border-box !important; width: 100% !important; min-height: calc(58px + env(safe-area-inset-top, 0px)) !important; height: auto !important; padding-top: env(safe-area-inset-top, 0px) !important; overflow: visible !important; z-index: 5000 !important; } body.is-mobile-device.mobile-chat-open #messages-container, body.is-mobile-device.mobile-chat-open .messages-area { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain !important; } body.is-mobile-device.mobile-chat-open .chat-input-area { flex: 0 0 auto !important; position: relative !important; inset: auto !important; bottom: auto !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important; z-index: 5100 !important; } body.is-mobile-device.mobile-chat-open #btn-mobile-roster-back { display: flex !important; pointer-events: auto !important; } } @media (orientation: portrait) and (max-width: 430px) { body.is-mobile-device.mobile-chat-open #main-chat-header { padding-left: 60px !important; padding-right: 6px !important; } body.is-mobile-device.mobile-chat-open #main-chat-header .chat-header-actions { gap: 3px !important; max-width: 188px !important; } body.is-mobile-device.mobile-chat-open #main-chat-header .chat-header-actions button { width: 34px !important; min-width: 34px !important; height: 34px !important; } } /* ============================================================ METIS MOBILE LEGACY WEBVIEW BUBBLES V244 — Android 7 fallback No color-mix / backdrop-filter dependency for message surfaces. ============================================================ */ @media (max-width: 900px) { body.is-mobile-device .msg-bubble { max-width: 84% !important; padding: 12px 15px 10px !important; border-radius: 18px !important; background-attachment: scroll !important; box-shadow: 0 8px 22px rgba(0,0,0,0.34) !important; } body.is-mobile-device .msg-bubble.received { background: #10283a !important; background-color: #10283a !important; color: #f5f8fb !important; border: 1px solid rgba(151,190,214,0.28) !important; border-bottom-left-radius: 6px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.is-mobile-device .msg-bubble.sent { background: #d9a13e !important; background-color: #d9a13e !important; color: #071118 !important; border: 1px solid rgba(255,224,154,0.62) !important; border-bottom-right-radius: 6px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.is-mobile-device .msg-bubble.received .msg-from { color: #7edfd1 !important; } body.is-mobile-device .msg-bubble.received .msg-time, body.is-mobile-device .msg-bubble.received .metis-react-trigger { color: #c0ced8 !important; opacity: 0.92 !important; } body.is-mobile-device .msg-bubble.sent .msg-time, body.is-mobile-device .msg-bubble.sent .msg-tick { color: rgba(7,17,24,0.72) !important; opacity: 1 !important; } } /* METIS MOBILE V245 — VIEW ISOLATION + CHAT READABILITY */ body.is-mobile-device .app-content > .view-main:not(.active), body.is-mobile-device .app-content > .view-main.is-hidden { display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; width:0 !important; height:0 !important; min-width:0 !important; min-height:0 !important; overflow:hidden !important; z-index:-1 !important; } body.is-mobile-device .app-content > .view-main.active { visibility:visible !important; opacity:1 !important; pointer-events:auto !important; z-index:20 !important; } body.is-mobile-device[data-view="chat"] #view-chat.active { isolation:isolate !important; } body.is-mobile-device[data-background-mode="image"][data-view="chat"] #view-chat.active { background:rgba(3,10,20,.28) !important; } body.is-mobile-device[data-background-mode="image"][data-view="chat"] #view-chat.active .contacts-sidebar { background:linear-gradient(180deg,rgba(6,18,31,.91),rgba(4,13,24,.94)) !important; -webkit-backdrop-filter:blur(12px) saturate(1.08); backdrop-filter:blur(12px) saturate(1.08); } body.is-mobile-device[data-background-mode="image"][data-view="chat"] #view-chat.active .chat-main { background:linear-gradient(180deg,rgba(5,15,27,.88),rgba(3,10,20,.94)) !important; } /* METIS MOBILE V246 — NARROW PORTRAIT HOME AUTHORITY */ @media (orientation:portrait) and (max-width:380px){ body.is-mobile-device #view-home.active{display:flex!important;flex-direction:column!important;width:100%!important;max-width:none!important;min-width:0!important;gap:12px!important;padding:12px!important;align-items:stretch!important} body.is-mobile-device #view-home.active>.dash-hero-welcome, body.is-mobile-device #view-home.active>.dash-stats-grid, body.is-mobile-device #view-home.active>.dash-tile{width:100%!important;max-width:none!important;min-width:0!important;grid-column:auto!important;box-sizing:border-box!important;flex:0 0 auto!important} body.is-mobile-device #view-home.active>.dash-stats-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} body.is-mobile-device #view-home.active>.dash-stats-grid>.dash-tile{width:100%!important;min-width:0!important;max-width:none!important;box-sizing:border-box!important} body.is-mobile-device #view-home.active>.dash-hero-welcome{display:flex!important;align-items:center!important;gap:16px!important;padding:24px 18px!important;min-height:180px!important} body.is-mobile-device #view-home.active>.tile-social, body.is-mobile-device #view-home.active>.tile-messages{display:flex!important;min-height:94px!important} } /* METIS MOBILE V247 — NARROW HOME HERO HEIGHT FIX */ @media (orientation:portrait) and (max-width:380px){ body.is-mobile-device #view-home.active>.dash-hero-welcome{ height:190px!important; min-height:190px!important; max-height:190px!important; padding:18px!important; gap:14px!important; overflow:hidden!important; box-sizing:border-box!important; } body.is-mobile-device #view-home.active>.dash-hero-welcome .dashboard-avatar-trigger{ width:72px!important; height:72px!important; min-width:72px!important; min-height:72px!important; max-width:72px!important; max-height:72px!important; } body.is-mobile-device #view-home.active>.dash-hero-welcome .dashboard-avatar-trigger img{ width:100%!important; height:100%!important; object-fit:cover!important; } body.is-mobile-device #view-home.active>.dash-hero-welcome .welcome-text{ min-width:0!important; overflow:hidden!important; } body.is-mobile-device #view-home.active>.dash-hero-welcome .welcome-text h1{ font-size:1.5rem!important; line-height:1.1!important; margin:0 0 6px!important; } body.is-mobile-device #view-home.active>.dash-hero-welcome .welcome-text p{ font-size:.78rem!important; line-height:1.2!important; margin:0!important; } } /* METIS MOBILE V248 — COMPACT SOCIAL/CONVERSATION HOME CARDS */ @media (orientation:portrait) and (max-width:380px){ body.is-mobile-device #view-home.active>.tile-social, body.is-mobile-device #view-home.active>.tile-messages{ display:flex!important; align-items:center!important; width:100%!important; height:96px!important; min-height:96px!important; max-height:96px!important; padding:14px 16px!important; gap:12px!important; overflow:hidden!important; box-sizing:border-box!important; flex:0 0 96px!important; } body.is-mobile-device #view-home.active>.tile-social .tile-content, body.is-mobile-device #view-home.active>.tile-messages .tile-content{ min-width:0!important; overflow:hidden!important; flex:1 1 auto!important; } body.is-mobile-device #view-home.active>.tile-social .sys-label, body.is-mobile-device #view-home.active>.tile-messages .sys-label{ display:block!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } body.is-mobile-device #view-home.active>.tile-social .dash-peek, body.is-mobile-device #view-home.active>.tile-messages .dash-peek{ display:block!important; margin-top:4px!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } body.is-mobile-device #view-home.active>.tile-social .tile-arrow, body.is-mobile-device #view-home.active>.tile-messages .tile-arrow{ flex:0 0 auto!important; } } /* METIS TABLET SEARCH V250 — explicit user search control */ .contacts-search-toggle-label{display:none;} @media (min-width:700px){ body.is-mobile-device #view-chat.active .contacts-header.modern-header{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;align-items:center!important;} body.is-mobile-device #view-chat.active #btn-search-toggle.contacts-search-toggle-btn{display:flex!important;width:auto!important;min-width:132px!important;height:40px!important;padding:0 12px!important;gap:7px!important;border-radius:12px!important;font-size:13px!important;font-weight:850!important;white-space:nowrap!important;} body.is-mobile-device #view-chat.active #btn-search-toggle .contacts-search-toggle-label{display:inline!important;} body.is-mobile-device #view-chat.active .contacts-sidebar.search-visible .contacts-search{top:58px!important;left:10px!important;right:10px!important;padding:10px!important;} } /* METIS TABLET SEARCH V251 */ @media (orientation:landscape) and (min-width:700px){ body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contacts-header.modern-header{position:relative!important;display:block!important;height:54px!important;min-height:54px!important;overflow:visible!important} body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contacts-segmented-control{width:calc(100% - 166px)!important;max-width:calc(100% - 166px)!important;margin:0!important} body.is-mobile-device:not(.mobile-chat-open) #view-chat.active #btn-search-toggle.contacts-search-toggle-btn{position:absolute!important;top:4px!important;right:4px!important;bottom:auto!important;left:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;width:154px!important;min-width:154px!important;max-width:154px!important;height:46px!important;min-height:46px!important;padding:0 12px!important;margin:0!important;gap:7px!important;border-radius:12px!important;border:1px solid rgba(255,255,255,.06)!important;background:rgba(255,255,255,.035)!important;color:rgba(255,255,255,.82)!important;box-shadow:none!important;font-size:12px!important;line-height:1!important;font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;transform:none!important} body.is-mobile-device:not(.mobile-chat-open) #view-chat.active #btn-search-toggle .contacts-search-toggle-label{display:inline!important;white-space:nowrap!important} body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contacts-sidebar.search-visible #btn-search-toggle{background:linear-gradient(135deg,var(--theme-accent,#29d0c2),var(--theme-accent-2,#f0c86f))!important;color:#071118!important;border-color:transparent!important} body.is-mobile-device:not(.mobile-chat-open) #view-chat.active .contacts-sidebar.search-visible .contacts-search{display:block!important;position:absolute!important;top:66px!important;left:10px!important;right:10px!important;width:auto!important;z-index:5000!important;padding:12px!important;border-radius:16px!important;background:rgba(10,24,35,.98)!important;border:1px solid rgba(126,223,209,.24)!important;box-shadow:0 14px 34px rgba(0,0,0,.42)!important} } /* =================================================================== MODERN ROSTER STATUS & UNREAD BADGES REDESIGN (AURA / METIS) - Online dot on avatar bottom-right (Telegram/WhatsApp style) - Unread badge pill in contact-actions column - Removed broken overlapping .status-dot =================================================================== */ .contact-avatar-wrap { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; cursor: pointer !important; } .contact-avatar-wrap .contact-avatar { width: 48px !important; height: 48px !important; min-width: 48px !important; border-radius: 15px !important; overflow: hidden !important; } .contact-avatar-wrap .avatar-online-badge { position: absolute !important; bottom: -2px !important; right: -2px !important; width: 14px !important; height: 14px !important; border-radius: 50% !important; background: #10B981 !important; border: 2.5px solid #0d161d !important; box-shadow: 0 0 8px rgba(16, 185, 129, 0.75) !important; pointer-events: none !important; z-index: 4 !important; } .contact-item .unread-badge { background: linear-gradient(135deg, #10B981, #059669) !important; color: #ffffff !important; font-size: 11px !important; font-weight: 800 !important; min-width: 22px !important; height: 22px !important; padding: 0 6px !important; border-radius: 11px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45) !important; margin: 0 4px 0 0 !important; flex-shrink: 0 !important; animation: popBadge 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; } /* Hide legacy overlapping status dot */ .status-dot { display: none !important; } .contact-item .unread-badge { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 22px !important; height: 22px !important; padding: 0 6px !important; border-radius: 11px !important; background: linear-gradient(135deg, #10B981, #059669) !important; color: #ffffff !important; font-size: 11px !important; font-weight: 800 !important; box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45) !important; margin: 0 6px 0 0 !important; flex-shrink: 0 !important; z-index: 10 !important; } .contact-actions { display: flex !important; align-items: center !important; gap: 8px !important; } /* METIS HOTFIX 2026-09-25 ? Xiaomi/MIUI/HyperOS composer visibility */ html body #message-input, html body.is-mobile-device #message-input, html body[data-surface-theme] #message-input, html body[data-theme-preset] #message-input, html body .chat-input-bar #message-input { color: #F8FAFC !important; -webkit-text-fill-color: #F8FAFC !important; caret-color: #F5B942 !important; background-color: rgba(8, 14, 20, 0.94) !important; opacity: 1 !important; visibility: visible !important; text-shadow: none !important; -webkit-opacity: 1 !important; } html body #message-input:focus, html body.is-mobile-device #message-input:focus, html body .chat-input-bar #message-input:focus { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; caret-color: #FFD166 !important; opacity: 1 !important; visibility: visible !important; } html body #message-input::placeholder, html body.is-mobile-device #message-input::placeholder { color: #AEBBC6 !important; -webkit-text-fill-color: #AEBBC6 !important; opacity: 0.9 !important; } /* METIS HOTFIX 2026-09-25 - Xiaomi keyboard-safe composer */ :root{--metis-vv-height:100dvh} body.is-mobile-device.metis-keyboard-open #view-chat.active,body.is-mobile-device.metis-keyboard-open #chat-main-area,body.is-mobile-device.metis-keyboard-open .chat-main{height:var(--metis-vv-height,100%)!important;min-height:0!important;max-height:var(--metis-vv-height,100%)!important} body.is-mobile-device.metis-keyboard-open #messages-container,body.is-mobile-device.metis-keyboard-open .messages-area{min-height:0!important;overflow-y:auto!important;scroll-padding-bottom:88px!important} body.is-mobile-device.metis-keyboard-open .chat-input-area{position:sticky!important;bottom:0!important;flex:0 0 auto!important;z-index:2147482000!important;width:100%!important;max-width:100%!important;padding-bottom:max(8px,env(safe-area-inset-bottom,0px))!important} /* METIS KEYBOARD LAYOUT V2 - viewport-safe, Android 7+/MIUI/HyperOS */ body.is-mobile-device.mobile-chat-open.metis-keyboard-open #app > .app-content { height: var(--metis-vv-height, 100%) !important; min-height: 0 !important; max-height: var(--metis-vv-height, 100%) !important; } body.is-mobile-device.mobile-chat-open.metis-keyboard-open #view-chat.active { height: var(--metis-vv-height, 100%) !important; min-height: 0 !important; max-height: var(--metis-vv-height, 100%) !important; } body.is-mobile-device.mobile-chat-open.metis-keyboard-open #view-chat.active .chat-main, body.is-mobile-device.metis-keyboard-open .app-container.mobile-chat-open #view-chat.active .chat-main, body.is-mobile-device.mobile-chat-open.metis-keyboard-open #view-chat.active.contacts-hidden .chat-main { height: var(--metis-vv-height, 100%) !important; min-height: 0 !important; max-height: var(--metis-vv-height, 100%) !important; inset: 0 !important; } body.is-mobile-device.mobile-chat-open.metis-keyboard-open #view-chat.active #messages-container, body.is-mobile-device.mobile-chat-open.metis-keyboard-open #view-chat.active .messages-area { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; scroll-padding-bottom: 96px !important; } body.is-mobile-device.mobile-chat-open.metis-keyboard-open #view-chat.active .chat-input-area { flex: 0 0 auto !important; position: relative !important; inset: auto !important; bottom: auto !important; transform: none !important; visibility: visible !important; opacity: 1 !important; z-index: 2147483000 !important; } /* METIS MOBILE AUTHORITY V3 - legacy WebView safe fullscreen + keyboard */ @media (orientation: portrait) and (max-width: 900px) { body.is-mobile-device.mobile-chat-open:not(.metis-chat-focus-on):not(.metis-keyboard-open) .bottom-nav { display: flex !important; } body.is-mobile-device.mobile-chat-open.metis-chat-focus-on .bottom-nav, body.is-mobile-device.mobile-chat-open.metis-keyboard-open .bottom-nav { display: none !important; } body.is-mobile-device.mobile-chat-open #app > .app-content, body.is-mobile-device.mobile-chat-open #view-chat.active, body.is-mobile-device.mobile-chat-open #view-chat.active .chat-main { min-height: 0 !important; box-sizing: border-box !important; } body.is-mobile-device.mobile-chat-open.metis-chat-focus-on #app > .app-content, body.is-mobile-device.mobile-chat-open.metis-chat-focus-on #view-chat.active, body.is-mobile-device.mobile-chat-open.metis-chat-focus-on #view-chat.active .chat-main, body.is-mobile-device.mobile-chat-open.metis-keyboard-open #app > .app-content, body.is-mobile-device.mobile-chat-open.metis-keyboard-open #view-chat.active, body.is-mobile-device.mobile-chat-open.metis-keyboard-open #view-chat.active .chat-main { height: var(--metis-vv-height, 100vh) !important; max-height: var(--metis-vv-height, 100vh) !important; min-height: 0 !important; } body.is-mobile-device.mobile-chat-open:not(.metis-chat-focus-on):not(.metis-keyboard-open) #app > .app-content, body.is-mobile-device.mobile-chat-open:not(.metis-chat-focus-on):not(.metis-keyboard-open) #view-chat.active, body.is-mobile-device.mobile-chat-open:not(.metis-chat-focus-on):not(.metis-keyboard-open) #view-chat.active .chat-main { height: calc(var(--metis-vv-height, 100vh) - 70px) !important; max-height: calc(var(--metis-vv-height, 100vh) - 70px) !important; } body.is-mobile-device.mobile-chat-open.metis-keyboard-open #messages-container { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } body.is-mobile-device.mobile-chat-open.metis-keyboard-open .chat-input-area { position: relative !important; flex: 0 0 auto !important; inset: auto !important; bottom: auto !important; transform: none !important; } body.is-mobile-device #btn-toggle-focus-chat[aria-pressed='true'] { outline: 2px solid rgba(77,210,255,.7) !important; background: rgba(77,210,255,.18) !important; } } /* METIS ANDROID7 VK FALLBACK - only active when JS detects real keyboard geometry */ body.is-mobile-device.metis-a7-kb-open.mobile-chat-open #app > .app-content, body.is-mobile-device.metis-a7-kb-open.mobile-chat-open #view-chat.active, body.is-mobile-device.metis-a7-kb-open.mobile-chat-open #view-chat.active .chat-main { height: calc(100vh - var(--metis-a7-kb-height, 0px)) !important; max-height: calc(100vh - var(--metis-a7-kb-height, 0px)) !important; min-height: 0 !important; } body.is-mobile-device.metis-a7-kb-open.mobile-chat-open .bottom-nav { display: none !important; } body.is-mobile-device.metis-a7-kb-open.mobile-chat-open #messages-container { flex: 1 1 0 !important; min-height: 0 !important; overflow-y: auto !important; } body.is-mobile-device.metis-a7-kb-open.mobile-chat-open .chat-input-area { position: relative !important; flex: 0 0 auto !important; inset: auto !important; bottom: auto !important; transform: none !important; z-index: 2147483000 !important; } /* METIS ANDROID7 FORCED KEYBOARD FALLBACK */ body.is-mobile-device.metis-a7-force-kb.mobile-chat-open #app > .app-content, body.is-mobile-device.metis-a7-force-kb.mobile-chat-open #view-chat.active, body.is-mobile-device.metis-a7-force-kb.mobile-chat-open #view-chat.active .chat-main { height: var(--metis-vv-height) !important; max-height: var(--metis-vv-height) !important; min-height: 0 !important; } body.is-mobile-device.metis-a7-force-kb.mobile-chat-open .bottom-nav { display: none !important; } body.is-mobile-device.metis-a7-force-kb.mobile-chat-open #messages-container { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; overflow-y: auto !important; } body.is-mobile-device.metis-a7-force-kb.mobile-chat-open .chat-input-area { position: relative !important; flex: 0 0 auto !important; inset: auto !important; bottom: auto !important; transform: none !important; z-index: 2147483000 !important; } /* METIS NATIVE CALL CHAT AUTHORITY V1 Native/CallKeep owns call chrome; legacy web overlay must never cover chat. */ body.native-call-active #call-overlay, body.native-call-active .call-overlay, body.native-call-active .call-overlay-immersiv { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } body.native-call-active #view-chat, body.native-call-active .chat-input-area, body.native-call-active #message-input, body.native-call-active #btn-send-message { pointer-events: auto !important; } /* METIS IMAGE VIEWER + ACTIONS V2 */ .metis-shareable-image{display:flex;flex-direction:column;gap:8px;max-width:100%;margin-top:6px} .metis-shareable-image img.metis-message-image, .metis-shareable-image img.metis-direct-image{display:block;max-width:100%;height:auto;border-radius:12px;cursor:zoom-in;touch-action:manipulation} .metis-image-actions{display:flex;gap:6px;flex-wrap:wrap} .metis-image-actions button{border:1px solid rgba(255,255,255,.14);background:rgba(12,24,38,.84);color:#f7fbff;border-radius:10px;padding:7px 10px;font-size:12px;font-weight:700;line-height:1;cursor:pointer} .metis-image-actions button:active{transform:scale(.97)} .metis-image-actions button:disabled{opacity:.55} body.metis-image-viewer-open{overflow:hidden!important} .metis-image-viewer{position:fixed;inset:0;z-index:2147483600;display:none;align-items:stretch;justify-content:stretch} .metis-image-viewer.is-open{display:flex} .metis-image-viewer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.94);backdrop-filter:blur(8px)} .metis-image-viewer-stage{position:absolute;inset:58px 0 0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none} .metis-image-viewer-img{max-width:96vw;max-height:calc(100vh - 78px);object-fit:contain;transform-origin:center center;will-change:transform;touch-action:none;user-select:none;-webkit-user-drag:none} .metis-image-viewer-toolbar{position:absolute;z-index:2;top:max(8px,env(safe-area-inset-top,0px));right:10px;display:flex;gap:8px} .metis-image-viewer-toolbar button{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(15,25,38,.88);color:#fff;font-size:20px;font-weight:800} @media(max-width:600px){ .metis-image-actions button{flex:1 1 auto;min-height:36px} .metis-image-viewer-toolbar{left:10px;right:10px;justify-content:flex-end} } /* METIS VIDEO CALL CLEAN INFO V1 - 2026-09-26 */ .call-header-info { transition: opacity .22s ease, transform .22s ease, max-height .25s ease, padding .25s ease; max-height: 260px; } .call-header-info.metis-call-info-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-10px); max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; overflow: hidden !important; } .metis-call-info-toggle { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); z-index: 100006; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); background: rgba(5,10,15,.56); color: #fff; font-size: 20px; line-height: 1; display: none; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 18px rgba(0,0,0,.22); } .metis-call-info-toggle.is-visible { display: flex; } .metis-call-info-toggle:active { transform: scale(.94); } @media (max-width: 768px) { .metis-call-info-toggle { width: 36px; height: 36px; font-size: 19px; } } /* METIS MESSAGE LONG-PRESS SELECTION V1 - 2026-09-29 */ .metis-message-selection-bar{ position:fixed; top:0; left:0; right:0; z-index:2147482500; display:flex; align-items:center; gap:10px; min-height:58px; padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px; background:rgba(8,16,26,.96); border-bottom:1px solid rgba(255,255,255,.12); box-shadow:0 8px 24px rgba(0,0,0,.32); transform:translateY(-120%); opacity:0; pointer-events:none; transition:transform .18s ease,opacity .18s ease; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px) } .metis-message-selection-bar.is-open{ transform:translateY(0); opacity:1; pointer-events:auto } .metis-message-selection-bar button{ appearance:none; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:#f5f8fb; min-height:38px; border-radius:12px; padding:8px 12px; font:inherit; font-weight:700 } .metis-message-selection-bar strong{ color:#f5f8fb; font-size:14px; white-space:nowrap } .metis-message-selection-spacer{flex:1} .msg-bubble.metis-message-selected{ position:relative; outline:2px solid rgba(82,188,255,.95); outline-offset:3px; box-shadow:0 0 0 9999px rgba(20,110,170,.08),0 6px 22px rgba(0,0,0,.18) } .msg-bubble.metis-message-selected::after{ content:'✓'; position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#eaf7ff; color:#082338; font-size:14px; font-weight:900; box-shadow:0 2px 8px rgba(0,0,0,.3) } body.metis-message-selection-active{ -webkit-user-select:none; user-select:none } @media(max-width:560px){ .metis-message-selection-bar{gap:6px;padding-left:8px;padding-right:8px} .metis-message-selection-bar button{padding:8px 10px} .metis-message-selection-bar button span{display:none} } /* METIS MESSAGE SELECTION VISIBILITY V2 - 2026-09-29 */ .metis-message-selection-bar{ gap:5px!important; min-height:64px!important; padding-left:7px!important; padding-right:7px!important } .metis-message-selection-bar strong{ min-width:24px; padding:5px 7px; border-radius:999px; background:rgba(70,180,255,.18); border:1px solid rgba(92,196,255,.45); text-align:center; font-size:12px!important } .metis-message-selection-bar button{ min-height:40px!important; padding:7px 9px!important; font-size:12px!important; white-space:nowrap } .metis-message-selection-bar button span{ display:inline!important } .metis-message-selection-bar .metis-selection-delete{ background:rgba(190,38,52,.28)!important; border-color:rgba(255,86,99,.58)!important; color:#fff!important } .msg-row:has(.msg-bubble.metis-message-selected){ background:rgba(36,143,220,.18)!important; border-radius:14px } .msg-bubble.metis-message-selected{ outline:3px solid #52c7ff!important; outline-offset:3px!important; background:linear-gradient(rgba(46,157,230,.34),rgba(46,157,230,.34)),var(--metis-selection-base,rgba(20,55,82,.92))!important; box-shadow:0 0 0 4px rgba(82,199,255,.20),0 8px 28px rgba(0,0,0,.40)!important; transform:scale(1.015); filter:saturate(1.18) brightness(1.12) } .msg-bubble.metis-message-selected::after{ width:28px!important; height:28px!important; top:-11px!important; right:-11px!important; background:#52c7ff!important; color:#031722!important; border:2px solid #fff!important; font-size:16px!important } @media(max-width:560px){ .metis-message-selection-bar{ overflow-x:auto; scrollbar-width:none } .metis-message-selection-bar::-webkit-scrollbar{display:none} .metis-message-selection-spacer{display:none!important} .metis-message-selection-bar button{ flex:0 0 auto; padding:7px 8px!important } } /* METIS IMAGE LONG-PRESS SELECTION V2 - 2026-09-29 */ .metis-shareable-image img.metis-message-image, .metis-shareable-image img.metis-direct-image{ -webkit-user-select:none!important; user-select:none!important; -webkit-user-drag:none!important; touch-action:manipulation } /* METIS SELECTION MODALS V1 - 2026-09-29 */ .metis-selection-modal{ position:fixed; inset:0; z-index:2147483000; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) } .metis-selection-modal.is-open{display:flex} .metis-selection-modal-card{ width:min(92vw,460px); max-height:min(78vh,680px); overflow:hidden; display:flex; flex-direction:column; gap:14px; padding:18px; border-radius:20px; background:#0f1b28; color:#f5f8fb; border:1px solid rgba(255,255,255,.14); box-shadow:0 20px 60px rgba(0,0,0,.55) } .metis-selection-modal-card h3{ margin:0; font-size:20px; color:#fff } .metis-selection-modal-card p{ margin:0; color:#c9d5df; line-height:1.45 } .metis-selection-modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px } .metis-selection-modal-actions button, .metis-forward-head button, .metis-forward-contact{ appearance:none; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:#f5f8fb; border-radius:12px; min-height:42px; padding:9px 12px; font:inherit } .metis-selection-modal-actions .danger{ background:rgba(200,42,55,.34); border-color:rgba(255,92,104,.70); color:#fff; font-weight:800 } .metis-forward-card{ width:min(94vw,520px); max-height:82vh } .metis-forward-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px } .metis-forward-head h3{margin:0} .metis-forward-head p{margin-top:4px} .metis-forward-head button{ flex:0 0 auto; width:42px; padding:0; font-size:18px } .metis-forward-card input[type="search"]{ width:100%; min-height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07); color:#fff; padding:0 13px; font:inherit; outline:none } .metis-forward-card input[type="search"]:focus{ border-color:rgba(82,199,255,.70); box-shadow:0 0 0 3px rgba(82,199,255,.14) } .metis-forward-list{ overflow:auto; display:flex; flex-direction:column; gap:8px; padding-right:2px } .metis-forward-contact{ width:100%; display:flex; align-items:center; gap:11px; text-align:left; min-height:58px } .metis-forward-contact:active{ transform:scale(.99); background:rgba(82,199,255,.12) } .metis-forward-avatar{ width:38px; height:38px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:rgba(82,199,255,.18); border:1px solid rgba(82,199,255,.34); font-weight:900 } .metis-forward-meta{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px } .metis-forward-meta strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .metis-forward-meta small{ color:#92a7b8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .metis-forward-status{ color:#6f8494; font-size:18px } .metis-forward-status.online{color:#3fd37d} .metis-forward-empty{ padding:22px 10px; text-align:center; color:#9fb0be } /* METIS SELECTION ACTIONBAR MOBILE V3 - 2026-09-29 */ @media(max-width:560px){ .metis-message-selection-bar{ display:grid!important; grid-template-columns:auto 1fr; grid-template-areas: "cancel count" "actions actions"; row-gap:6px!important; column-gap:8px!important; overflow:visible!important; padding:calc(env(safe-area-inset-top,0px) + 6px) 7px 7px!important } .metis-message-selection-bar [data-metis-selection-cancel]{ grid-area:cancel } .metis-message-selection-bar [data-metis-selection-count]{ grid-area:count; justify-self:start; align-self:center } .metis-message-selection-spacer{display:none!important} .metis-message-selection-bar [data-metis-selection-copy], .metis-message-selection-bar [data-metis-selection-share], .metis-message-selection-bar [data-metis-selection-forward], .metis-message-selection-bar [data-metis-selection-delete]{ position:relative!important; z-index:2!important; pointer-events:auto!important; min-width:0!important; width:auto!important; min-height:42px!important; padding:8px 6px!important; font-size:11px!important } .metis-message-selection-bar [data-metis-selection-copy]{grid-row:2;grid-column:1} .metis-message-selection-bar [data-metis-selection-share]{grid-row:2;grid-column:2} .metis-message-selection-bar [data-metis-selection-forward]{grid-row:2;grid-column:3} .metis-message-selection-bar [data-metis-selection-delete]{grid-row:2;grid-column:4} .metis-message-selection-bar{ grid-template-columns:repeat(4,minmax(0,1fr)) } .metis-message-selection-bar [data-metis-selection-cancel]{grid-row:1;grid-column:1} .metis-message-selection-bar [data-metis-selection-count]{grid-row:1;grid-column:2 / 5} }