/* SoulfulSync Web Chat — superficies sólidas, tipografía clara, paridad app. * Tema: modo claro por defecto (:root). Modo oscuro cuando el tema WP pone * data-theme="dark" en o (mismo criterio que muchos temas modernos). */ /* —— Fullscreen Messenger DESACTIVADO —— * No ocultar el chrome del tema aunque el HTML cacheado aún tenga * soulfulsync-chat-fullscreen (LiteSpeed / plugin viejo). */ html.soulfulsync-chat-fullscreen, body.soulfulsync-chat-fullscreen { --ss-theme-bottom-nav-height: 0px; } /* Página chat (también sin fullscreen): no dejar hueco del launcher vacío. */ body.soulfulsync-web-chat-page [data-ss-portable-launcher-slot], body.soulfulsync-web-chat-page .ssx-header-launcher-slot:empty { display: none !important; } body.soulfulsync-chat-fullscreen #soulfulsync-web-chat-ui.ss-has-appbar .ss-chat-shell-body { min-height: 0; height: 100%; } body.soulfulsync-chat-fullscreen #soulfulsync-web-chat-ui.ss-has-appbar .ss-chat-sidebar, body.soulfulsync-chat-fullscreen #soulfulsync-web-chat-ui.ss-has-appbar .ss-chat-main, body.soulfulsync-chat-fullscreen #soulfulsync-web-chat-ui.ss-has-appbar .ss-wa-rail, body.soulfulsync-chat-fullscreen #soulfulsync-web-chat-ui.ss-has-appbar .ss-contact-info-sidebar { height: 100%; max-height: 100%; } /* Utilidades del tema (MentorSync / notif / idioma) en appbar o bandeja (portable). */ #soulfulsync-web-chat-ui .ss-chat-page-utils { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: nowrap; justify-content: flex-end; } #soulfulsync-web-chat-ui .ss-chat-page-utils .ssx-mentor-button, #soulfulsync-web-chat-ui .ss-chat-page-utils .ss-web-notif-mount, #soulfulsync-web-chat-ui .ss-chat-page-utils .ss-lang { margin: 0; } #soulfulsync-web-chat-ui .ss-chat-page-utils .ssx-mentor-button { width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 999px; } #soulfulsync-web-chat-ui .ss-chat-page-utils .ssx-mentor-avatar, #soulfulsync-web-chat-ui .ss-chat-page-utils .ssx-mentor-avatar__img { width: 36px; height: 36px; } #soulfulsync-web-chat-ui .ss-chat-page-utils .ss-lang-btn { min-height: 36px; padding: 0 10px; border-radius: 999px; } #soulfulsync-web-chat-ui .ss-chat-page-utils .ss-lang-dropdown { z-index: 100000; } /* —— Appbar superior (menú arriba; bandeja limpia) —— */ #soulfulsync-web-chat-ui.ss-has-appbar { flex-direction: column; align-items: stretch; } #soulfulsync-web-chat-ui .ss-chat-shell-body { display: flex; flex-direction: row; align-items: stretch; flex: 1 1 auto; min-height: 0; width: 100%; overflow: hidden; } #soulfulsync-web-chat-ui .ss-chat-appbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 14px; border-bottom: 1px solid var(--ss-glass-border, var(--ss-border)); background: color-mix(in srgb, var(--ss-sidebar-bg, var(--ss-bg-card)) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 4; } #soulfulsync-web-chat-ui .ss-chat-appbar__left, #soulfulsync-web-chat-ui .ss-chat-appbar__right { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } #soulfulsync-web-chat-ui .ss-chat-appbar__right { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; } #soulfulsync-web-chat-ui .ss-chat-appbar__brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ss-text, var(--ss-fg)); font-weight: 700; letter-spacing: -0.02em; } #soulfulsync-web-chat-ui .ss-chat-appbar__logo { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; } #soulfulsync-web-chat-ui .ss-chat-appbar__title { font-size: 0.95rem; } #soulfulsync-web-chat-ui .ss-chat-appbar__context { font-size: 0.8rem; font-weight: 600; color: var(--ss-muted, var(--ss-fg-muted)); padding: 4px 10px; border-radius: 999px; background: var(--ss-surface-subtle, rgba(127, 127, 127, 0.12)); } #soulfulsync-web-chat-ui .ss-chat-appbar__btn { width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; } #soulfulsync-web-chat-ui.ss-has-appbar .ss-brand-bar__action--home, #soulfulsync-web-chat-ui.ss-has-appbar .ss-brand-bar .ss-chat-page-utils { display: none !important; } @media (max-width: 1023px) { #soulfulsync-web-chat-ui .ss-chat-appbar__title { display: none; } #soulfulsync-web-chat-ui .ss-chat-page-utils .ss-lang-code, #soulfulsync-web-chat-ui .ss-chat-page-utils .ss-lang-arrow { display: none; } } #soulfulsync-web-chat-ui .ss-brand-bar__action--home { text-decoration: none; } #soulfulsync-web-chat-ui .ss-wa-rail__brand { text-decoration: none; color: inherit; cursor: pointer; } /* html.soulfulsync-chat-fullscreen ya no cambia layout; rem sigue el tema. */ /* —— Modo integrado (defecto): cabecera/menús del tema y admin bar visibles —— */ .soulfulsync-web-chat-wrap { width: 100%; max-width: 100%; box-sizing: border-box; } /* Si un tema legacy aún envuelve el shortcode en .container / article, abrir el shell */ body.soulfulsync-web-chat-page .sse-container, body.soulfulsync-web-chat-page .sse-article, body.soulfulsync-web-chat-page .sse-section, body.soulfulsync-web-chat-page .sse-content, body.soulfulsync-web-chat-page .ss-app-surface { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } body.soulfulsync-web-chat-page .ss-page-brand, body.soulfulsync-web-chat-page .sse-title { display: none !important; } body.soulfulsync-web-chat-page { min-height: 100dvh; background: transparent; overflow: auto; --ss-wp-adminbar: 0px; height: auto; max-height: none; display: block; box-sizing: border-box; --ss-chat-fit-top: calc(var(--ss-desktop-header-height, 68px) + var(--ss-admin-bar-h, 0px)); --ss-chat-fit-bottom: 0px; --ss-chat-fit-height: min(820px, calc(100dvh - var(--ss-chat-fit-top) - 48px)); } html.soulfulsync-web-chat-page { overflow: auto; margin-top: 0 !important; padding-top: 0 !important; height: auto; max-height: none; box-sizing: border-box; } /* Admin bar: el tema expone --ss-admin-bar-h; JS mide #wpadminbar al ajustar fit. */ body.admin-bar.soulfulsync-web-chat-page { --ss-chat-fit-top: calc(var(--ss-desktop-header-height, 68px) + var(--ss-admin-bar-h, 32px)); } @media screen and (max-width: 782px) { body.admin-bar.soulfulsync-web-chat-page { --ss-chat-fit-top: calc(var(--ss-theme-header-offset, 104px)); } } /* Desktop header: fixed bajo admin bar (paridad tema). No relative — evita franja blanca. */ body.soulfulsync-web-chat-page .ssx-desktop-header { position: fixed !important; top: var(--ss-admin-bar-h, 0px) !important; left: 0 !important; right: 0 !important; z-index: 9998; width: 100%; padding-top: 0 !important; height: var(--ss-desktop-header-height, 68px) !important; max-height: var(--ss-desktop-header-height, 68px) !important; margin: 0 !important; } /* Móvil: header fixed; top lo marca header-mobile.css. */ body.soulfulsync-web-chat-page .ssx-mobile-header { flex: 0 0 auto; padding-top: 0 !important; } /* Spacer oculto: el tema ya reserva el header con padding-top en /chat. */ body.soulfulsync-web-chat-page .ssx-desktop-header-spacer { display: none !important; height: 0 !important; max-height: 0 !important; visibility: hidden !important; pointer-events: none !important; } body.soulfulsync-web-chat-page #page, body.soulfulsync-web-chat-page .site, body.soulfulsync-web-chat-page .ssx-main, body.soulfulsync-web-chat-page #content, body.soulfulsync-web-chat-page .ss-app-surface, body.soulfulsync-web-chat-page .entry-content, body.soulfulsync-web-chat-page article { display: block; width: 100%; max-width: none; min-height: 0; height: auto; margin: 0 auto; padding: 0; box-sizing: border-box; } body.soulfulsync-web-chat-page #soulfulsync-web-chat-ui { position: relative; inset: auto; z-index: 1; width: min(calc(100% - 32px), var(--ss-header-max, 1520px)); max-width: var(--ss-header-max, 1520px); margin: 16px auto 28px; box-sizing: border-box; min-height: 0; height: var(--ss-chat-fit-height); max-height: var(--ss-chat-fit-height); border-radius: 16px; box-shadow: var(--ss-shadow, 0 8px 32px rgba(26, 21, 40, 0.08)); border: 1px solid var(--ss-border, rgba(110, 92, 230, 0.14)); } /* Móvil: header fixed del tema (no relative). top lo marca header-mobile.css. */ @media (max-width: 1023px) { body.soulfulsync-web-chat-page .ssx-mobile-header { position: fixed !important; left: 0; right: 0; z-index: 99999; padding-top: 0 !important; } } /* Columna principal: siempre min-height 0 para que .ss-messages haga scroll dentro del shell */ body.soulfulsync-web-chat-page #soulfulsync-web-chat-ui .ss-chat-main { min-height: 0; flex: 1 1 0%; } /** * Temas: el tema de WordPress suele poner data-theme="dark" | "light" en (o a veces en ). * Por defecto = modo claro; el oscuro es el que ya teníamos antes. */ :root { /* Paridad Feed web (feed-client.css — --ss-feed-*) — valores claros por defecto */ --ss-feed-bg: #f6f4fc; --ss-feed-card: #ffffff; --ss-feed-card-solid: #ffffff; --ss-feed-border: rgba(110, 92, 230, 0.14); --ss-feed-text: #1a1528; --ss-feed-muted: rgba(74, 66, 104, 0.72); --ss-feed-accent: #9b8cff; --ss-feed-accent-deep: #6e5ce6; --ss-feed-rose: #e8789a; --ss-feed-green: #6fcca0; --ss-feed-glass: rgba(255, 255, 255, 0.9); --ss-feed-glow-1: rgba(110, 92, 230, 0.1); --ss-feed-glow-2: rgba(232, 120, 154, 0.08); --ss-feed-gradient-brand: linear-gradient(135deg, #6e5ce6 0%, #e8789a 100%); --ss-feed-gradient-msg: linear-gradient(135deg, #6e5ce6 0%, #9b8cff 100%); --ss-feed-light-bg: #f6f4fc; --ss-feed-light-card: #ffffff; --ss-feed-light-border: rgba(110, 92, 230, 0.14); --ss-feed-light-text: #1a1528; --ss-feed-light-muted: rgba(74, 66, 104, 0.72); /* —— Modo claro —— acentos feed, fondos legibles */ --ss-bg: var(--ss-feed-light-bg); --ss-bg-card: var(--ss-feed-light-card); --ss-border: var(--ss-feed-light-border); --ss-border-strong: rgba(110, 92, 230, 0.22); --ss-divider: rgba(110, 92, 230, 0.08); --ss-text: var(--ss-feed-light-text); --ss-muted: var(--ss-feed-light-muted); --ss-fg: var(--ss-feed-light-text); --ss-fg-muted: var(--ss-feed-light-muted); --ss-text-disabled: rgba(74, 66, 104, 0.45); --ss-brand: var(--ss-feed-accent-deep); --ss-brand-strong: #5a4ad4; --ss-brand-soft: rgba(110, 92, 230, 0.12); --ss-brand-glow: rgba(110, 92, 230, 0.28); --ss-brand-tab-border: rgba(110, 92, 230, 0.35); --ss-brand-tab-ring: rgba(110, 92, 230, 0.14); --ss-soft-accent: var(--ss-feed-accent); --ss-accent: var(--ss-feed-green); --ss-online: var(--ss-feed-green); --ss-gold: #c99a42; --ss-warning: #c99a42; --ss-success: #41c78a; --ss-success-soft: rgba(65, 199, 138, 0.14); --ss-danger: #d86b6b; --ss-danger-soft: rgba(216, 107, 107, 0.14); --ss-unread-badge: var(--ss-feed-accent-deep); --ss-mention-badge: var(--ss-feed-accent); --ss-glass: rgba(255, 255, 255, 0.9); --ss-glass-border: var(--ss-feed-light-border); --ss-radius: 16px; --ss-radius-sm: 12px; --ss-radius-pill: 999px; --ss-shadow: 0 12px 36px rgba(110, 92, 230, 0.1); --ss-transition: 0.2s ease; --ss-body-glow-1: rgba(110, 92, 230, 0.1); --ss-body-glow-2: rgba(232, 120, 154, 0.08); --ss-body-glow-3: rgba(111, 204, 160, 0.06); --ss-main-area-bg: var(--ss-feed-light-bg); --ss-tabs-bar-bg: rgba(255, 255, 255, 0.96); --ss-panel-blur-bg: rgba(255, 255, 255, 0.88); --ss-toast-bg: rgba(255, 255, 255, 0.98); --ss-toast-error-bg: rgba(254, 242, 242, 0.98); --ss-toast-error-text: #b91c1c; --ss-toast-error-border: rgba(220, 38, 38, 0.35); --ss-tab-inactive-bg: rgba(110, 92, 230, 0.06); --ss-tab-hover-bg: rgba(110, 92, 230, 0.1); --ss-conversation-card: var(--ss-feed-light-card); --ss-conversation-hover: rgba(110, 92, 230, 0.08); --ss-input-bg: var(--ss-feed-light-card); --ss-input-border: var(--ss-feed-light-border); --ss-input-focus: var(--ss-feed-accent-deep); --ss-reply-preview-bg: rgba(110, 92, 230, 0.08); --ss-reply-preview-text: var(--ss-feed-light-text); --ss-reply-label-color: var(--ss-feed-light-muted); --ss-overlay-scrim: rgba(26, 21, 40, 0.45); --ss-voice-meter: rgba(74, 66, 104, 0.35); --ss-link-color: var(--ss-feed-accent-deep); --ss-pill-surface: rgba(110, 92, 230, 0.06); --ss-pill-surface-strong: rgba(110, 92, 230, 0.1); --ss-msg-own-border: rgba(110, 92, 230, 0.2); --ss-thread-active-bg: var(--ss-brand-soft); --ss-thread-active-border: rgba(110, 92, 230, 0.28); /* Paridad app (AuroraUi): propias = superficie clara + texto oscuro en light */ --ss-msg-own-bg: linear-gradient(180deg, #f8f5ff 0%, #ede9f8 100%); --ss-msg-own-text: var(--ss-feed-light-text); --ss-msg-system-bg: rgba(110, 92, 230, 0.06); --ss-msg-system-text: var(--ss-feed-light-muted); --ss-gradient-brand: var(--ss-feed-gradient-brand); --ss-avatar-gradient: var(--ss-feed-gradient-brand); /** * Altura del menú / dock inferior del tema (BuddyBoss, Kleo, app shell, etc.). * En escritorio suele ser 0; en móvil dejamos ~76px para que el composer no quede tapado. * Personaliza en el tema hijo: :root { --ss-theme-bottom-nav-height: 64px; } */ --ss-theme-bottom-nav-height: 0px; --ss-primary: var(--ss-brand); --ss-surface-elevated: var(--ss-bg-card); --ss-radius-md: 14px; --ss-shadow-sm: 0 2px 10px rgba(110, 92, 230, 0.08); --ss-msg-shadow: 0 2px 12px rgba(110, 92, 230, 0.06); --ss-msg-own-shadow: var(--ss-msg-shadow); --ss-composer-focus-ring: 0 0 0 3px var(--ss-brand-soft); --ss-sidebar-bg: var(--ss-feed-light-card); --ss-surface-subtle: #eee9ff; --ss-msg-in-bg: var(--ss-feed-light-card); --ss-msg-me-solid: linear-gradient(180deg, #f8f5ff 0%, #ede9f8 100%); --ss-chat-pattern: rgba(110, 92, 230, 0.05); --ss-radius-lg: 20px; --ss-font: "Plus Jakarta Sans", "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; } html[data-theme="dark"], body[data-theme="dark"], #soulfulsync-web-chat-ui[data-theme="dark"], html.dark, body.dark { /* Tokens feed oscuros (sin esto --ss-main-area-bg / --ss-panel-blur-bg quedan en #f6f4fc y blanco) */ --ss-feed-bg: #0c0a14; --ss-feed-card: rgba(28, 25, 41, 0.94); --ss-feed-card-solid: #1c1929; --ss-feed-border: rgba(184, 168, 255, 0.14); --ss-feed-text: #f5f2fc; --ss-feed-muted: rgba(212, 204, 255, 0.62); --ss-feed-glass: rgba(36, 32, 51, 0.72); --ss-feed-glow-1: rgba(110, 92, 230, 0.18); --ss-feed-glow-2: rgba(232, 120, 154, 0.12); /* Dark premium — paridad Feed web */ --ss-bg: var(--ss-feed-bg); --ss-bg-card: var(--ss-feed-card-solid); --ss-border: var(--ss-feed-border); --ss-border-strong: rgba(184, 168, 255, 0.22); --ss-divider: rgba(184, 168, 255, 0.08); --ss-text: var(--ss-feed-text); --ss-muted: var(--ss-feed-muted); --ss-fg: var(--ss-feed-text); --ss-fg-muted: rgba(212, 204, 255, 0.78); --ss-text-disabled: rgba(212, 204, 255, 0.38); --ss-brand: var(--ss-feed-accent); --ss-brand-strong: var(--ss-feed-accent-deep); --ss-brand-soft: rgba(155, 140, 255, 0.14); --ss-brand-glow: rgba(110, 92, 230, 0.35); --ss-brand-tab-border: rgba(155, 140, 255, 0.38); --ss-brand-tab-ring: rgba(110, 92, 230, 0.18); --ss-soft-accent: #c4b8ff; --ss-accent: var(--ss-feed-green); --ss-online: var(--ss-feed-green); --ss-gold: #c99a42; --ss-warning: #c99a42; --ss-success: #41c78a; --ss-success-soft: rgba(65, 199, 138, 0.18); --ss-danger: #d86b6b; --ss-danger-soft: rgba(216, 107, 107, 0.18); --ss-unread-badge: var(--ss-feed-accent-deep); --ss-mention-badge: var(--ss-feed-accent); --ss-glass: var(--ss-feed-glass); --ss-glass-border: var(--ss-feed-border); --ss-shadow: 0 16px 40px rgba(8, 6, 16, 0.38); --ss-body-glow-1: var(--ss-feed-glow-1); --ss-body-glow-2: var(--ss-feed-glow-2); --ss-body-glow-3: rgba(111, 204, 160, 0.08); --ss-main-area-bg: var(--ss-feed-bg); --ss-tabs-bar-bg: var(--ss-feed-card-solid); --ss-panel-blur-bg: var(--ss-feed-glass); --ss-toast-bg: rgba(17, 19, 34, 0.96); --ss-toast-error-bg: rgba(74, 31, 31, 0.92); --ss-toast-error-text: #fecaca; --ss-toast-error-border: rgba(216, 107, 107, 0.45); --ss-tab-inactive-bg: rgba(36, 32, 51, 0.55); --ss-tab-hover-bg: rgba(42, 36, 62, 0.72); --ss-conversation-card: var(--ss-feed-card-solid); --ss-conversation-hover: rgba(42, 36, 62, 0.88); --ss-input-bg: var(--ss-feed-card-solid); --ss-input-border: var(--ss-feed-border); --ss-input-focus: var(--ss-feed-accent); --ss-reply-preview-bg: rgba(110, 92, 230, 0.14); --ss-reply-preview-text: var(--ss-feed-text); --ss-reply-label-color: var(--ss-feed-muted); --ss-overlay-scrim: rgba(8, 6, 16, 0.72); --ss-voice-meter: rgba(212, 204, 255, 0.35); --ss-link-color: #c4b8ff; --ss-pill-surface: rgba(36, 32, 51, 0.55); --ss-pill-surface-strong: rgba(42, 36, 62, 0.88); --ss-msg-own-border: transparent; --ss-thread-active-bg: rgba(110, 92, 230, 0.16); --ss-thread-active-border: rgba(155, 140, 255, 0.32); --ss-msg-own-bg: var(--ss-feed-gradient-msg); --ss-msg-own-text: #ffffff; --ss-msg-own-shadow: 0 8px 24px rgba(110, 92, 230, 0.32); --ss-composer-focus-ring: 0 0 0 3px rgba(155, 140, 255, 0.22); --ss-sidebar-bg: #161324; --ss-surface-subtle: #161324; --ss-msg-in-bg: var(--ss-feed-glass); --ss-msg-me-solid: var(--ss-feed-gradient-msg); --ss-msg-system-bg: rgba(36, 32, 51, 0.72); --ss-msg-system-text: var(--ss-feed-muted); --ss-gradient-brand: var(--ss-feed-gradient-brand); --ss-avatar-gradient: var(--ss-feed-gradient-brand); --ss-chat-pattern: rgba(184, 168, 255, 0.06); } @media screen and (max-width: 1024px) { :root { --ss-theme-bottom-nav-height: 76px; } } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--ss-bg); color: var(--ss-text); font-family: var(--ss-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.soulfulsync-web-chat-page { background: radial-gradient(900px 480px at 8% -8%, rgba(110, 92, 230, 0.12), transparent 55%), radial-gradient(700px 420px at 92% 0%, rgba(232, 120, 154, 0.08), transparent 50%), linear-gradient(180deg, var(--ss-feed-light-bg) 0%, #eee9ff 100%); } html[data-theme="dark"] body.soulfulsync-web-chat-page, body[data-theme="dark"].soulfulsync-web-chat-page, body.soulfulsync-web-chat-page:has(#soulfulsync-web-chat-ui[data-theme="dark"]) { background: radial-gradient(1200px 600px at 10% -10%, var(--ss-feed-glow-1), transparent 55%), radial-gradient(900px 500px at 90% 0%, var(--ss-feed-glow-2), transparent 50%), var(--ss-feed-bg); } #soulfulsync-web-chat-ui { display: flex; flex-direction: row; align-items: stretch; flex: 1 1 auto; /* Alto acotado: si solo hay min-height, el contenedor crece con los mensajes → página “infinita” */ min-height: 320px; height: min(920px, 88dvh); max-height: 100dvh; width: 100%; max-width: min(100%, 1400px); margin: 0 auto; border-radius: var(--ss-radius-lg); overflow: hidden; box-shadow: var(--ss-shadow); border: 1px solid var(--ss-border); color-scheme: light dark; font-family: var(--ss-font); } /* * Modo claro explícito en el shell: algunos temas WP fuerzan variables oscuras en :root/body * y el chat heredaba texto gris sobre gris. Re-declaramos los tokens claros aquí cuando * syncChatShellTheme() marca light o aún no hay data-theme="dark". */ #soulfulsync-web-chat-ui:not([data-theme="dark"]) { --ss-bg: var(--ss-feed-light-bg); --ss-bg-card: var(--ss-feed-light-card); --ss-border: var(--ss-feed-light-border); --ss-border-strong: rgba(110, 92, 230, 0.22); --ss-text: var(--ss-feed-light-text); --ss-muted: var(--ss-feed-light-muted); --ss-fg: var(--ss-feed-light-text); --ss-fg-muted: var(--ss-feed-light-muted); --ss-brand: var(--ss-feed-accent-deep); --ss-brand-strong: #5a4ad4; --ss-brand-soft: rgba(110, 92, 230, 0.12); --ss-brand-glow: rgba(110, 92, 230, 0.28); --ss-brand-tab-border: rgba(110, 92, 230, 0.35); --ss-brand-tab-ring: rgba(110, 92, 230, 0.14); --ss-accent: var(--ss-feed-green); --ss-online: var(--ss-feed-green); --ss-success: #48c78e; --ss-success-soft: rgba(72, 199, 142, 0.12); --ss-danger: #d86b6b; --ss-danger-soft: rgba(216, 107, 107, 0.14); --ss-glass: rgba(255, 255, 255, 0.9); --ss-glass-border: var(--ss-feed-light-border); --ss-shadow: 0 12px 36px rgba(110, 92, 230, 0.1); --ss-main-area-bg: var(--ss-feed-light-bg); --ss-tabs-bar-bg: rgba(255, 255, 255, 0.96); --ss-panel-blur-bg: rgba(255, 255, 255, 0.92); --ss-toast-bg: rgba(255, 255, 255, 0.98); --ss-tab-inactive-bg: rgba(110, 92, 230, 0.06); --ss-tab-hover-bg: rgba(110, 92, 230, 0.1); --ss-reply-preview-bg: rgba(110, 92, 230, 0.08); --ss-reply-preview-text: var(--ss-feed-light-text); --ss-reply-label-color: var(--ss-feed-light-muted); --ss-overlay-scrim: rgba(26, 21, 40, 0.45); --ss-voice-meter: rgba(74, 66, 104, 0.35); --ss-link-color: var(--ss-feed-accent-deep); --ss-pill-surface: rgba(110, 92, 230, 0.06); --ss-pill-surface-strong: rgba(110, 92, 230, 0.1); --ss-msg-own-border: rgba(110, 92, 230, 0.2); --ss-thread-active-bg: rgba(110, 92, 230, 0.12); --ss-thread-active-border: rgba(110, 92, 230, 0.28); --ss-msg-own-bg: linear-gradient(180deg, #f8f5ff 0%, #ede9f8 100%); --ss-msg-own-text: var(--ss-feed-light-text); color: var(--ss-text); } /* Legacy fullscreen: no estirar a 100dvh (eso tapaba el header). */ /* Escritorio ancho: conversación ocupa el resto del viewport (tipo Better Messages). */ @media screen and (min-width: 1024px) { body.soulfulsync-chat-fullscreen #soulfulsync-web-chat-ui { align-items: stretch; } body.soulfulsync-chat-fullscreen #soulfulsync-web-chat-ui .ss-chat-main { min-height: 0; flex: 1 1 0%; } } /* —— Sidebar: glass panel —— */ .ss-chat-sidebar { width: 340px; min-width: 300px; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--ss-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-right: 1px solid var(--ss-glass-border); } @media screen and (min-width: 901px) { .ss-brand { font-size: 1.125rem; } } .ss-chat-main { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--ss-main-area-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Reduce GPU-heavy blur on smaller screens for smoother scrolling/input latency. */ @media (max-width: 900px) { .ss-chat-sidebar, .ss-chat-main, .ss-contact-info-sidebar { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Contact Info panel (Media & Files + group members) */ .ss-contact-info-sidebar { display: none; flex-direction: column; width: 340px; min-width: 300px; max-width: 92vw; flex-shrink: 0; background: linear-gradient(180deg, var(--ss-sidebar-bg) 0%, var(--ss-glass) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-left: 1px solid var(--ss-glass-border); overflow: hidden; box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12); } .ss-contact-info-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: 14px 12px; border-bottom: 1px solid var(--ss-border); flex-shrink: 0; } .ss-contact-info-head .ss-btn { grid-column: 1; width: 40px; height: 40px; padding: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--ss-surface-subtle); border: 1px solid transparent; color: var(--ss-muted); } .ss-contact-info-head .ss-btn:hover { background: var(--ss-tab-hover-bg); color: var(--ss-text); } .ss-contact-info-title { grid-column: 2; text-align: center; font-size: 0.9375rem; font-weight: 700; color: var(--ss-text); letter-spacing: -0.01em; } .ss-contact-info-body { flex: 1; overflow-y: auto; padding: 20px 16px 24px; scrollbar-gutter: stable; } .ss-contact-info-avatar-wrap { text-align: center; margin-bottom: 12px; } .ss-contact-info-avatar-wrap .ss-avatar-lg { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto; border: 2px solid var(--ss-accent); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 2rem; color: var(--ss-fg-muted); } .ss-contact-info-avatar-wrap .ss-avatar-lg img { width: 100%; height: 100%; object-fit: cover; } .ss-contact-info-avatar-wrap .ss-avatar-lg.ss-avatar--circle-space, .ss-contact-info-avatar-wrap--circle .ss-avatar-lg { border-radius: 38%; border-color: var(--ss-circle-surface-border, color-mix(in srgb, var(--ss-circle-accent, var(--ss-circle-warm)) 85%, transparent)); } .ss-contact-info-name { font-size: 1.1rem; font-weight: 600; text-align: center; color: var(--ss-fg); margin-bottom: 4px; } .ss-contact-info-meta { font-size: 0.85rem; color: var(--ss-fg-muted); text-align: center; margin-bottom: 20px; } .ss-contact-info-desc { font-size: 0.875rem; color: var(--ss-muted); text-align: left; line-height: 1.45; margin: 0; } .ss-contact-info-section { margin-top: 22px; } .ss-contact-info-section-title { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ss-muted); margin-bottom: 10px; } .ss-contact-info-section--desc .ss-contact-info-desc { padding: 10px 12px; border-radius: 12px; background: var(--ss-surface-subtle); border: 1px solid var(--ss-border); } .ss-contact-info-loading, .ss-contact-info-empty { font-size: 0.9rem; color: var(--ss-fg-muted); padding: 8px 0; } .ss-contact-info-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; } .ss-contact-info-media-cell { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--ss-bg-card); display: flex; align-items: center; justify-content: center; } .ss-contact-info-media-cell img { width: 100%; height: 100%; object-fit: cover; } .ss-contact-info-media-cell.ss-media-placeholder { font-size: 1.5rem; } .ss-contact-info-see-all { font-size: 0.9rem; color: var(--ss-accent); text-decoration: none; } .ss-contact-info-see-all:hover { text-decoration: underline; } .ss-contact-info-members-head { margin-bottom: 8px; } .ss-contact-info-members { display: flex; flex-direction: column; gap: 6px; } .ss-thread-name-wrap { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; } .ss-thread-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Paridad app: pill de presencia en bandeja 1:1 */ .ss-thread-presence-pill { flex-shrink: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.625rem; font-weight: 700; padding: 2px 6px; border-radius: var(--ss-radius-pill); border: 1px solid var(--ss-border); background: var(--ss-surface-subtle); color: var(--ss-muted); line-height: 1.25; } .ss-thread-presence-pill--online { color: var(--ss-online); border-color: color-mix(in srgb, var(--ss-online) 35%, var(--ss-border)); background: color-mix(in srgb, var(--ss-online) 12%, var(--ss-surface-subtle)); } .ss-thread-presence-pill--offline { color: var(--ss-muted); } .ss-thread-presence-pill--idle { color: #ca8a04; border-color: color-mix(in srgb, #eab308 35%, var(--ss-border)); background: color-mix(in srgb, #eab308 12%, var(--ss-surface-subtle)); } .ss-thread-presence-pill--busy { color: #ef4444; border-color: color-mix(in srgb, #ef4444 35%, var(--ss-border)); background: color-mix(in srgb, #ef4444 10%, var(--ss-surface-subtle)); } .ss-thread-tag-icon { flex-shrink: 0; opacity: 0.88; display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .ss-thread-tag-icon .ss-icon svg, .ss-thread-tag-icon svg { display: block; flex-shrink: 0; } .ss-thread-fav-icon svg { color: #f472b6; } .ss-contact-info-member-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 14px; background: var(--ss-surface-subtle); border: 1px solid var(--ss-border); transition: background 0.2s ease, border-color 0.2s ease; } .ss-contact-info-member-row:hover { background: var(--ss-tab-hover-bg); border-color: var(--ss-brand-tab-border); } .ss-avatar-wrap--contact-member { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex-shrink: 0; } .ss-contact-info-member-avatar, .ss-avatar-wrap--contact-member .ss-avatar { width: 100%; height: 100%; min-width: 0; min-height: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ss-bg-card); font-size: 1rem; } .ss-avatar-wrap--contact-member .ss-avatar img, .ss-contact-info-member-avatar .ss-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .ss-avatar-wrap--contact-member .ss-thread-online-dot { width: 11px; height: 11px; border-width: 2px; } .ss-contact-info-member-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ss-contact-info-member-name-line { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: nowrap; } .ss-contact-info-member-name { font-size: 0.9375rem; font-weight: 600; color: var(--ss-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ss-contact-info-online-pill { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; color: var(--ss-online); letter-spacing: 0.02em; } .ss-contact-info-member-subtitle { font-size: 0.75rem; color: var(--ss-muted); font-weight: 500; } .ss-contact-info-member-row--manageable:hover { border-color: var(--ss-brand-tab-border); box-shadow: 0 0 0 1px var(--ss-brand-soft); } .ss-contact-info-member-menu { flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: none; border-radius: 10px; background: transparent; color: var(--ss-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .ss-contact-info-member-menu:hover { background: var(--ss-brand-soft); color: var(--ss-text); } .ss-inbox-ctx-btn.is-danger { color: #f87171; } .ss-inbox-ctx-btn.is-danger:hover { background: rgba(248, 113, 113, 0.12); } /* —— Top bar: brand + search —— */ .ss-topbar { padding: 20px 20px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--ss-glass-border); flex-shrink: 0; } .ss-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ss-text); } .ss-brand-icon { width: 32px; height: 32px; border-radius: 10px; background: var(--ss-avatar-gradient); display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; } .ss-brand-icon .ss-icon svg { width: 18px; height: 18px; display: block; flex-shrink: 0; } .ss-search-wrap { flex: 1; position: relative; } /* Cuenta (lecturas globales): botón en barra lateral */ .ss-topbar-account { flex-shrink: 0; width: 44px; height: 44px; min-width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ss-radius-sm); border: 1px solid var(--ss-border); background: rgba(255, 255, 255, 0.05); } .ss-topbar-account:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--ss-border-strong); } .ss-topbar-account .ss-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; line-height: 0; } .ss-topbar-account .ss-icon svg { width: 20px; height: 20px; display: block; flex-shrink: 0; } .ss-account-page-shell { position: fixed; inset: 0; z-index: 999999; display: flex; justify-content: center; align-items: stretch; padding: 18px; background: rgba(6, 10, 18, 0.72); backdrop-filter: blur(1px); opacity: 0; transition: opacity 120ms ease-out; } .ss-account-settings-page { width: min(1080px, 97vw); max-height: none; height: calc(100vh - 36px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42); background: rgba(13, 19, 31, 0.98); padding: 0; display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(6px) scale(0.99); transition: opacity 120ms ease-out, transform 120ms ease-out; } .ss-account-settings-page .ss-modal-head { padding: 16px 18px; border-bottom: 1px solid var(--ss-border); position: sticky; top: 0; z-index: 2; background: rgba(20, 27, 40, 0.95); } .ss-account-settings-page .ss-modal-body { /* Ocupa el alto bajo el header; sin esto el flex padre recorta el final (solapamiento entre secciones). */ flex: 1 1 auto; min-height: 0; padding: 20px; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .ss-account-settings-body { gap: 12px; padding-right: 2px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .ss-account-settings-hint { margin: 0 0 14px 0; font-size: 0.875rem; line-height: 1.45; color: var(--ss-muted); } .ss-account-settings-row { align-items: center; justify-content: space-between; gap: 12px; } .ss-account-settings-row-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .ss-account-settings-toggle { flex-shrink: 0; min-width: 106px; padding: 8px 14px; } .ss-account-accordion { border: 1px solid var(--ss-border); border-radius: 12px; overflow: visible; background: rgba(255, 255, 255, 0.03); flex-shrink: 0; position: relative; z-index: 1; } .ss-account-accordion + .ss-account-accordion { margin-top: 12px; } .ss-account-accordion-head { width: 100%; border: 0; border-radius: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: rgba(255, 255, 255, 0.02); } .ss-account-accordion-head-left { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; } .ss-account-accordion-chevron { opacity: 0.8; transition: transform 0.12s ease; } .ss-account-accordion.open .ss-account-accordion-chevron { transform: rotate(180deg); } .ss-account-accordion-content { padding: 12px 14px 14px; border-top: 1px solid var(--ss-border); display: flex; flex-direction: column; gap: 12px; overflow: visible; background: rgba(0, 0, 0, 0.12); } .ss-account-field { display: flex; flex-direction: column; gap: 6px; } .ss-account-field-label { font-size: 0.82rem; color: var(--ss-muted); font-weight: 600; } .ss-account-field-input[readonly] { opacity: 0.85; cursor: not-allowed; } .ss-account-field-actions { display: flex; justify-content: flex-end; margin-top: 2px; } .ss-account-profile-save { min-width: 148px; } .ss-account-accordion .ss-settings-row { align-items: center; } .ss-account-accordion .ss-settings-row .ss-settings-row-text { min-width: 0; } .ss-account-accordion .ss-settings-row .ss-settings-row-sub { line-height: 1.35; } @media (max-width: 560px) { .ss-account-settings-row { flex-direction: column; align-items: stretch; } .ss-account-settings-toggle { width: 100%; min-width: 0; } .ss-account-page-shell { padding: 10px; backdrop-filter: none; } .ss-account-settings-page { width: min(100vw, 980px); height: calc(100vh - 20px); border-radius: 12px; } } .ss-search-wrap .ss-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; pointer-events: none; color: var(--ss-muted); display: flex; align-items: center; justify-content: center; line-height: 0; box-sizing: border-box; } .ss-search-wrap .ss-icon svg { width: 18px; height: 18px; display: block; flex-shrink: 0; } .ss-search { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ss-border); border-radius: var(--ss-radius-sm); padding: 12px 14px 12px 44px; color: var(--ss-text); font-size: 0.9375rem; outline: none; transition: border-color var(--ss-transition), box-shadow var(--ss-transition); } .ss-search:hover { border-color: var(--ss-border-strong); } .ss-search:focus { border-color: var(--ss-brand-glow); box-shadow: 0 0 0 3px var(--ss-brand-soft); } .ss-search::placeholder { color: var(--ss-muted); } /* —— Bandeja: barra segmentada + acciones (sin cuadrícula 2×2) —— */ .ss-inbox-nav { display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px; flex-shrink: 0; border-bottom: 1px solid var(--ss-border); background: transparent; box-sizing: border-box; } .ss-segmented.ss-tabs { flex: 1; min-width: 0; display: flex; gap: 2px; padding: 3px; margin: 0; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-pill); background: var(--ss-tab-inactive-bg); } .ss-inbox-nav-actions { display: flex; flex-shrink: 0; gap: 4px; } .ss-inbox-nav-action { width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; border-radius: 10px; border: 1px solid var(--ss-border); background: transparent; color: var(--ss-muted); display: inline-flex; align-items: center; justify-content: center; transition: background var(--ss-transition), color var(--ss-transition), border-color var(--ss-transition); } .ss-inbox-nav-action:hover { background: var(--ss-tab-hover-bg); color: var(--ss-text); border-color: var(--ss-border-strong); } .ss-inbox-nav-action .ss-icon { color: inherit; } .ss-tab { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; flex: 1; position: relative; border: none; background: transparent; color: var(--ss-muted); border-radius: calc(var(--ss-radius-pill) - 3px); padding: 7px 10px; min-height: 32px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background var(--ss-transition), color var(--ss-transition), box-shadow var(--ss-transition); } .ss-tab-label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } .ss-tab:hover { background: var(--ss-tab-hover-bg); color: var(--ss-text); } .ss-tab.active { background: var(--ss-bg-card); color: var(--ss-text); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); } #soulfulsync-web-chat-ui[data-theme="dark"] .ss-tab.active { background: var(--ss-surface-subtle); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } /* Legacy: ya no se renderiza la cuadrícula Nueva/Grupo en la lista */ .ss-inbox-quick-actions { display: none; } .ss-inbox-archived-hint { margin: 0 12px 8px; padding: 8px 10px; font-size: 0.75rem; line-height: 1.35; color: var(--ss-muted); border-radius: var(--ss-radius-sm); border: 1px dashed var(--ss-glass-border); background: var(--ss-tab-inactive-bg); } .ss-thread .ss-avatar-wrap { position: relative; flex-shrink: 0; width: 48px; height: 48px; } .ss-thread .ss-avatar { position: relative; width: 100%; height: 100%; } .ss-avatar-wrap { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .ss-avatar-wrap--header { width: 40px; height: 40px; } .ss-avatar-wrap--header .ss-avatar { width: 100%; height: 100%; } .ss-thread-online-dot, .ss-conv-header-online-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--ss-online); border: 2px solid var(--ss-sidebar-bg, var(--ss-bg-card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ss-online) 35%, transparent); pointer-events: none; z-index: 2; animation: ss-online-dot-pulse 2.4s ease-in-out infinite; } .ss-thread-online-dot { width: 13px; height: 13px; border-width: 2.5px; } @keyframes ss-online-dot-pulse { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-online) 35%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ss-online) 0%, transparent); } } .ss-tab .ss-icon { width: 17px; height: 17px; min-width: 17px; min-height: 17px; flex-shrink: 0; opacity: 0.9; line-height: 0; display: inline-flex; align-items: center; justify-content: center; } .ss-tab .ss-icon svg { width: 16px; height: 16px; display: block; flex-shrink: 0; } /* —— Thread list —— */ .ss-thread-list { flex: 1; min-height: 0; padding: 12px 16px 24px; overflow-y: auto; overflow-x: hidden; } .ss-create-group-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-bottom: 12px; padding: 10px 16px; line-height: 1.2; } .ss-create-group-btn .ss-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .ss-create-group-btn .ss-icon svg { width: 18px; height: 18px; display: block; flex-shrink: 0; } .ss-thread--group .ss-thread-group-icon { color: var(--ss-brand); flex-shrink: 0; } .ss-thread--group .ss-avatar--group { border-radius: 14px; background: color-mix(in srgb, var(--ss-brand) 18%, var(--ss-bg-elevated, #1a1d24)); } .ss-thread--circle .ss-avatar--circle-space { border-radius: 38%; background: transparent; } /* —— Activos ahora (bandeja) —— */ .ss-active-now-card { margin: 0 0 12px; padding: 12px 12px 10px; border-radius: 16px; background: linear-gradient( 145deg, color-mix(in srgb, var(--ss-brand) 12%, var(--ss-bg-card)) 0%, var(--ss-bg-card) 55%, color-mix(in srgb, var(--ss-online) 6%, var(--ss-bg-card)) 100% ); border: 1px solid color-mix(in srgb, var(--ss-brand) 22%, var(--ss-border)); box-shadow: var(--ss-soft-card-shadow, 0 8px 24px rgba(0, 0, 0, 0.12)); } .ss-active-now-card__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .ss-active-now-card__head-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ss-brand) 18%, transparent); color: var(--ss-brand); } .ss-active-now-card__head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ss-active-now-card__title { font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ss-text); line-height: 1.2; } .ss-active-now-card__sub { font-size: 0.75rem; color: var(--ss-muted); line-height: 1.35; } .ss-active-now-card__badge { flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 800; color: #fff; background: var(--ss-online); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-online) 25%, transparent); } .ss-active-now-card__empty { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--ss-muted) 8%, transparent); font-size: 0.8125rem; color: var(--ss-muted); line-height: 1.4; } .ss-active-now-card__empty-dot { flex-shrink: 0; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--ss-muted); opacity: 0.55; } .ss-active-now-card__row { display: flex; flex-direction: row; gap: 12px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; scroll-snap-type: x proximity; } .ss-active-now-chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 76px; padding: 0; margin: 0; border: none; background: transparent; cursor: pointer; color: inherit; font: inherit; scroll-snap-align: start; transition: transform 0.2s ease; } .ss-active-now-chip:hover { transform: translateY(-2px); } .ss-active-now-chip:active { transform: scale(0.97); } .ss-active-now-chip__ring { padding: 2px; border-radius: 50%; background: linear-gradient( 135deg, var(--ss-online), color-mix(in srgb, var(--ss-brand) 70%, var(--ss-online)) ); box-shadow: 0 0 12px color-mix(in srgb, var(--ss-online) 35%, transparent); } .ss-active-now-chip__avatar { position: relative; display: block; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ss-bg-card); background: var(--ss-surface-subtle); } .ss-active-now-chip__avatar .ss-avatar-img, .ss-active-now-chip__avatar .ss-avatar { width: 100%; height: 100%; border-radius: 50%; } .ss-active-now-chip__dot { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--ss-online); border: 2px solid var(--ss-bg-card); box-sizing: border-box; animation: ss-active-now-pulse 2s ease-in-out infinite; } @keyframes ss-active-now-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ss-online) 45%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ss-online) 0%, transparent); } } .ss-active-now-chip__label { font-size: 0.75rem; font-weight: 700; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ss-text); } @media (prefers-reduced-motion: reduce) { .ss-active-now-chip__dot { animation: none; } .ss-active-now-chip { transition: none; } } /* —— En línea: solo avatares (sin título EN LÍNEA ni pastillas con texto) —— */ .ss-online-avatars { margin: 0 0 8px; padding: 0 2px 4px; } .ss-online-avatars__row { display: flex; flex-direction: row; gap: 10px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin; } .ss-online-avatars__btn { flex: 0 0 auto; padding: 0; margin: 0; border: none; background: transparent; cursor: pointer; border-radius: 50%; transition: transform 0.2s ease, opacity 0.2s ease; } .ss-online-avatars__btn:hover { transform: scale(1.05); } .ss-online-avatars__btn:active { transform: scale(0.97); } .ss-online-avatars__avatar { position: relative; display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-success) 55%, transparent); background: var(--ss-bg-card); } .ss-online-avatars__avatar .ss-avatar-img, .ss-online-avatars__avatar .ss-avatar { width: 100%; height: 100%; border-radius: 50%; } .ss-online-avatars__dot { position: absolute; right: 1px; bottom: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--ss-success); border: 2px solid var(--ss-bg-card); box-sizing: border-box; } /* Modal Crear grupo: layout mejorado */ .ss-create-group-body { display: flex; flex-direction: column; gap: 12px; } .ss-create-group-top-row { display: flex; align-items: flex-start; gap: 16px; } .ss-create-group-avatar-wrap { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 2px dashed var(--ss-border); background: rgba(255, 255, 255, 0.04); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: border-color 0.2s, background 0.2s; } .ss-create-group-avatar-wrap:hover { border-color: var(--ss-primary); background: rgba(255, 255, 255, 0.06); } .ss-create-group-avatar-wrap.has-image { border-style: solid; } .ss-create-group-avatar { width: 100%; height: 100%; object-fit: cover; display: block; } .ss-create-group-avatar-wrap .ss-avatar { width: 100%; height: 100%; border-radius: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: rgba(255, 255, 255, 0.08); } .ss-create-group-avatar-hint { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px; font-size: 0.7rem; text-align: center; background: rgba(0, 0, 0, 0.6); color: var(--ss-muted); } .ss-create-group-avatar-wrap.has-image .ss-create-group-avatar-hint { opacity: 0.9; } .ss-create-group-name-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .ss-create-group-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ss-muted); margin-bottom: 2px; } .ss-create-group-desc { resize: vertical; min-height: 56px; } .ss-create-group-search { margin-top: 2px; } .ss-create-group-list { max-height: min(52vh, 440px); min-height: 120px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; margin: 4px 0 8px; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); padding: 8px; } .ss-create-group-list-empty .ss-create-group-row { display: none; } .ss-create-group-list-empty-msg { padding: 16px 8px; text-align: center; font-size: 0.875rem; color: var(--ss-muted); } .ss-create-group-row, .ss-pick-user-row { display: flex; align-items: center; gap: 12px; padding: 6px 10px; cursor: pointer; border-radius: 14px; border: 1px solid transparent; background: var(--ss-surface-subtle); margin-bottom: 4px; transition: background 0.2s ease, border-color 0.2s ease, transform 0.12s ease; } .ss-create-group-row:hover, .ss-pick-user-row:hover { background: var(--ss-tab-hover-bg); border-color: var(--ss-border); } .ss-pick-user-row.is-selected, .ss-create-group-row:has(input[type="checkbox"]:checked) { background: var(--ss-brand-soft); border-color: var(--ss-brand-tab-border); } .ss-create-group-row input[type="checkbox"], .ss-pick-user-row input[type="checkbox"] { flex-shrink: 0; width: 22px; height: 22px; margin-left: auto; accent-color: var(--ss-brand); cursor: pointer; } .ss-create-group-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ss-text); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; } /* Avatar compacto en listas de selección (misma fila que Crear grupo) */ .ss-pick-user-avatar { flex-shrink: 0; width: 42px; height: 42px; min-width: 42px; min-height: 42px; font-size: 1rem; } .ss-pick-user-avatar .ss-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .ss-pick-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; } .ss-pick-user-name { color: var(--ss-text) !important; } .ss-pick-user-handle { font-size: 0.75rem; color: var(--ss-muted); font-weight: 500; } .ss-pick-user-row:active { transform: scale(0.992); } .ss-create-group-modal.ss-add-participants-modal { width: min(440px, 94vw); } .ss-btn-pressable { transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.15s ease; } .ss-btn-pressable:hover:not(:disabled) { filter: brightness(1.06); } .ss-btn-pressable:active:not(:disabled) { transform: scale(0.98); } .ss-create-group-submit { margin-top: 8px; width: 100%; padding: 12px 16px; } .ss-thread { display: flex; align-items: center; gap: 14px; padding: 12px 14px; min-height: 68px; margin-bottom: 6px; border-radius: var(--ss-radius-md); border: 1px solid transparent; cursor: pointer; transition: background var(--ss-transition), border-color var(--ss-transition), transform var(--ss-transition), box-shadow var(--ss-transition); } .ss-thread:hover { background: var(--ss-tab-hover-bg); border-color: var(--ss-border); } .ss-thread.active { background: var(--ss-thread-active-bg); border-color: var(--ss-thread-active-border); box-shadow: var(--ss-shadow-sm); } .ss-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--ss-avatar-gradient); border: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: #fff; flex-shrink: 0; overflow: hidden; } .ss-avatar .ss-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } .ss-thread-meta { flex: 1; min-width: 0; } .ss-thread-top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .ss-thread-name { font-weight: 600; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .ss-thread-time { flex-shrink: 0; color: var(--ss-muted); font-size: 0.75rem; } .ss-thread-preview { margin-top: 2px; color: var(--ss-muted); font-size: 0.8125rem; display: flex; align-items: center; gap: 4px; min-width: 0; } .ss-thread-preview-icon { flex-shrink: 0; display: inline-flex; align-items: center; color: var(--ss-muted); opacity: 0.9; } .ss-thread-preview-icon .ss-icon svg { width: 14px; height: 14px; } .ss-thread-preview-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-thread-preview-ticks-wrap { flex-shrink: 0; display: inline-flex; align-items: center; line-height: 1; } .ss-thread-preview-ticks-wrap .ss-msg-ticks--compact { margin: 0; } .ss-thread-preview-ticks-wrap .ss-msg-ticks-delivered { color: var(--ss-muted); opacity: 0.82; } .ss-thread-preview-ticks-wrap .ss-msg-ticks-read { color: #34b7f1; opacity: 1; } .ss-msg-ticks--clickable { cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease; } .ss-msg-ticks--clickable:hover, .ss-msg-ticks--clickable:focus-visible { opacity: 1; transform: scale(1.06); outline: none; } .ss-read-info-modal { max-width: 420px; } .ss-read-info-modal-head, .ss-read-info-modal-body { padding: 16px 18px; } .ss-read-info-modal-head-text { display: flex; align-items: flex-start; gap: 12px; } .ss-read-info-modal-title-wrap h3 { margin: 0 0 4px; font-size: 1.05rem; } .ss-read-info-modal-sub { margin: 0; color: var(--ss-muted); font-size: 0.85rem; } .ss-read-info-summary { margin: 0 0 14px; font-weight: 600; } .ss-read-info-timeline { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .ss-read-info-status-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; } .ss-read-info-status-row__tick { display: inline-flex; color: var(--ss-muted); margin-top: 2px; } .ss-read-info-status-row__tick--read { color: #34b7f1; } .ss-read-info-status-row__text { display: flex; flex-direction: column; gap: 2px; } .ss-read-info-status-row__label { font-weight: 700; font-size: 0.95rem; } .ss-read-info-status-row__time { font-size: 0.88rem; color: var(--ss-muted); } .ss-read-info-pending-note { margin: 4px 0 0; font-size: 0.85rem; } .ss-read-info-section-title { margin: 12px 0 8px; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ss-muted); } .ss-read-info-list { display: flex; flex-direction: column; gap: 8px; } .ss-read-info-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--ss-surface-2, rgba(255, 255, 255, 0.04)); border: 1px solid var(--ss-border, rgba(255, 255, 255, 0.08)); transition: background 0.2s ease; } .ss-read-info-row__avatar { width: 40px; height: 40px; flex-shrink: 0; } .ss-read-info-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ss-read-info-row__name { font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-read-info-row__meta { font-size: 0.78rem; color: var(--ss-muted); } .ss-read-info-row__tick { color: var(--ss-accent, #6ecbff); display: inline-flex; } .ss-read-info-loading { display: flex; flex-direction: column; gap: 10px; } .ss-read-info-skeleton { display: flex; align-items: center; gap: 10px; } .ss-read-info-skeleton__avatar, .ss-read-info-skeleton__line { display: block; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06)); background-size: 200% 100%; animation: ss-skeleton-shimmer 1.2s ease-in-out infinite; } .ss-read-info-skeleton__avatar { width: 40px; height: 40px; border-radius: 50%; } .ss-read-info-skeleton__line { flex: 1; height: 14px; border-radius: 8px; } .ss-mention-row--all { border: 1px dashed var(--ss-accent, rgba(110, 203, 255, 0.35)); } .ss-chat-poll { min-width: min(100%, 280px); } .ss-chat-poll__card { border: 1px solid var(--ss-border, rgba(255, 255, 255, 0.12)); border-radius: 14px; background: rgba(255, 255, 255, 0.04); padding: 10px 12px; } .ss-chat-poll__badge-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ss-chat-poll__badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; color: var(--ss-accent, #6ecbff); background: rgba(110, 203, 255, 0.14); } .ss-chat-poll__badge-icon { display: inline-flex; color: var(--ss-muted); } .ss-chat-poll__question { font-weight: 700; margin-bottom: 8px; font-size: 0.92rem; } .ss-chat-poll__empty { font-size: 0.82rem; color: var(--ss-muted); font-style: italic; } .ss-chat-poll__option { position: relative; display: block; width: 100%; text-align: left; border: 1px solid var(--ss-border, rgba(255, 255, 255, 0.12)); border-radius: 12px; background: rgba(255, 255, 255, 0.04); padding: 10px 12px; overflow: hidden; cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; } .ss-chat-poll__option:hover:not(:disabled) { border-color: var(--ss-accent, rgba(110, 203, 255, 0.45)); } .ss-chat-poll__option--selected { border-color: var(--ss-accent, rgba(110, 203, 255, 0.65)); } .ss-chat-poll__option:disabled { cursor: default; opacity: 0.95; } .ss-chat-poll__bar { position: absolute; inset: 0 auto 0 0; background: rgba(110, 203, 255, 0.12); pointer-events: none; } .ss-chat-poll__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ss-chat-poll__label { font-size: 0.92rem; } .ss-chat-poll__count { font-size: 0.78rem; color: var(--ss-muted); } .ss-chat-poll__meta-inline { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .ss-chat-poll__pct { font-size: 0.78rem; font-weight: 700; color: var(--ss-muted); } .ss-chat-poll__avatars { display: inline-flex; align-items: center; } .ss-chat-poll__avatar { width: 22px; height: 22px; border-radius: 999px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 800; color: var(--ss-accent, #6ecbff); background: rgba(110, 203, 255, 0.16); border: 1px solid var(--ss-border, rgba(255, 255, 255, 0.18)); } .ss-chat-poll__avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } .ss-chat-poll__avatar-more { font-size: 0.68rem; font-weight: 700; color: var(--ss-muted); margin-left: 4px; } .ss-chat-poll__meta { font-size: 0.78rem; color: var(--ss-muted); } .ss-chat-location { min-width: min(100%, 260px); } .ss-chat-location__btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--ss-border, rgba(255, 255, 255, 0.12)); border-radius: 14px; background: rgba(255, 255, 255, 0.04); padding: 10px 12px; cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; } .ss-chat-location__btn:hover { border-color: var(--ss-accent, rgba(110, 203, 255, 0.45)); } .ss-chat-location__icon { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(110, 203, 255, 0.12); color: var(--ss-accent, #6ecbff); } .ss-chat-location__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ss-chat-location__label { font-weight: 700; font-size: 0.92rem; } .ss-chat-location__coords { font-size: 0.78rem; color: var(--ss-muted); } .ss-chat-location__card { display: block; width: 100%; text-align: left; border: 1px solid var(--ss-border, rgba(255, 255, 255, 0.12)); border-radius: 14px; background: rgba(255, 255, 255, 0.04); padding: 0; cursor: pointer; overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; } .ss-chat-location__card:hover { border-color: var(--ss-accent, rgba(110, 203, 255, 0.45)); } .ss-chat-location__map { width: 100%; height: 132px; background: rgba(110, 203, 255, 0.08); } .ss-chat-location__map-img { width: 100%; height: 100%; object-fit: cover; display: block; } .ss-chat-location__map-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; color: var(--ss-muted); } .ss-chat-location__body { padding: 10px 12px; } .ss-chat-location__badge-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ss-chat-location__badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; color: var(--ss-accent, #6ecbff); background: rgba(110, 203, 255, 0.14); } .ss-chat-location__badge-icon { display: inline-flex; color: var(--ss-muted); } .ss-chat-contact { min-width: min(100%, 260px); margin-top: 4px; } .ss-chat-contact__card { border: 1px solid var(--ss-border, rgba(255, 255, 255, 0.12)); border-radius: 14px; background: rgba(255, 255, 255, 0.04); padding: 10px 12px; } .ss-chat-contact__card--tap { display: block; width: 100%; text-align: left; cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; } .ss-chat-contact__card--tap:hover { border-color: var(--ss-accent, rgba(110, 203, 255, 0.45)); } .ss-chat-contact__quick-call { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 999px; background: rgba(110, 203, 255, 0.12); color: var(--ss-accent, #6ecbff); cursor: pointer; flex-shrink: 0; } .ss-chat-contact__view { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(110, 203, 255, 0.08); border: 1px solid rgba(110, 203, 255, 0.18); color: var(--ss-accent, #6ecbff); } .ss-chat-contact__view-label { flex: 1; font-weight: 700; font-size: 0.88rem; } .ss-chat-contact__view-icon, .ss-chat-contact__view-chevron { display: inline-flex; } .ss-contact-detail-modal { max-width: min(100%, 420px); } .ss-contact-detail-body { display: flex; flex-direction: column; gap: 12px; } .ss-contact-detail-hero { display: flex; align-items: center; gap: 14px; } .ss-contact-detail-avatar { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 18px; font-weight: 800; font-size: 1.2rem; color: var(--ss-accent, #6ecbff); background: rgba(110, 203, 255, 0.14); } .ss-contact-detail-name { font-size: 1.2rem; font-weight: 800; line-height: 1.2; } .ss-contact-detail-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--ss-border); background: rgba(255, 255, 255, 0.04); cursor: pointer; } .ss-contact-detail-row__icon { display: inline-flex; color: var(--ss-accent, #6ecbff); } .ss-contact-detail-row__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .ss-contact-detail-row__label { font-size: 0.72rem; color: var(--ss-muted); } .ss-contact-detail-row__value { font-size: 0.95rem; font-weight: 600; } .ss-contact-detail-row__copy { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 8px; background: transparent; color: var(--ss-muted); cursor: pointer; } .ss-contact-detail-empty { color: var(--ss-muted); font-size: 0.88rem; } .ss-contact-detail-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .ss-contact-detail-action { width: 100%; } .ss-chat-contact__badge-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ss-chat-contact__badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; color: var(--ss-accent, #6ecbff); background: rgba(110, 203, 255, 0.14); } .ss-chat-contact__badge-icon { display: inline-flex; color: var(--ss-muted); } .ss-chat-contact__main { display: flex; align-items: center; gap: 10px; } .ss-chat-contact__avatar { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 14px; font-weight: 800; font-size: 1rem; color: var(--ss-accent, #6ecbff); background: rgba(110, 203, 255, 0.12); } .ss-chat-contact__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ss-chat-contact__name { font-weight: 700; font-size: 0.92rem; line-height: 1.2; } .ss-chat-contact__hint { font-size: 0.78rem; color: var(--ss-muted); } .ss-chat-contact__row { display: block; color: var(--ss-brand); text-decoration: none; font-size: 0.85rem; margin-top: 8px; } .ss-chat-contact__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .ss-chat-contact__action { border: 1px solid var(--ss-border); background: transparent; color: var(--ss-text); border-radius: 999px; padding: 4px 10px; font-size: 0.75rem; cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; } .ss-chat-contact__action:hover { border-color: var(--ss-accent, rgba(110, 203, 255, 0.45)); } .ss-join-request-host { padding: 0 12px 8px; } .ss-join-request-panel { border: 1px solid var(--ss-border); border-radius: 14px; padding: 12px 14px; background: color-mix(in srgb, var(--ss-brand) 8%, var(--ss-surface)); } .ss-join-request-panel__title { font-weight: 700; margin-bottom: 4px; } .ss-join-request-panel__body { font-size: 0.85rem; color: var(--ss-muted); margin-bottom: 10px; } .ss-join-request-panel__btn { border: none; border-radius: 999px; padding: 8px 14px; background: var(--ss-brand); color: #fff; font-weight: 700; cursor: pointer; } .ss-join-request-panel__badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--ss-warning-bg, rgba(255, 193, 7, 0.15)); color: var(--ss-warning, #b8860b); font-size: 0.75rem; font-weight: 700; } .ss-unread { min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--ss-radius-pill); background: var(--ss-unread-badge, var(--ss-brand)); border: none; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 800; flex-shrink: 0; box-shadow: 0 2px 8px var(--ss-brand-glow); } .ss-pending-join { min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--ss-radius-pill); background: var(--ss-warning-bg, rgba(255, 193, 7, 0.18)); border: 1px solid var(--ss-warning, rgba(184, 134, 11, 0.45)); color: var(--ss-warning, #b8860b); display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 800; flex-shrink: 0; } .ss-thread-badges { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; } /* —— Conversation header —— */ .ss-conversation { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; } /* Botón flotante: volver al último mensaje en hilos largos */ .ss-jump-to-latest { position: absolute; right: 16px; bottom: 12px; z-index: 6; display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border: 1px solid var(--ss-glass-border); border-radius: 999px; background: var(--ss-panel-blur-bg, rgba(28, 32, 40, 0.92)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ss-text, #e8eaed); font-size: 0.8125rem; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: var(--ss-shadow-soft, 0 4px 20px rgba(0, 0, 0, 0.22)); transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease; } .ss-jump-to-latest:hover { transform: translateY(-1px); box-shadow: var(--ss-shadow-elevated, 0 6px 24px rgba(0, 0, 0, 0.28)); } .ss-jump-to-latest:focus-visible { outline: 2px solid var(--ss-brand); outline-offset: 2px; } .ss-jump-to-latest[hidden] { display: none !important; } .ss-jump-to-latest-inner { display: inline-flex; align-items: center; gap: 6px; } .ss-jump-to-latest .ss-icon { display: inline-flex; color: var(--ss-brand); } .ss-jump-to-latest-label { white-space: nowrap; } @media (max-width: 768px) { .ss-jump-to-latest { right: 12px; bottom: 10px; padding: 9px 12px; } } .ss-conv-header { padding: 16px 24px; border-bottom: 1px solid var(--ss-glass-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ss-panel-blur-bg); backdrop-filter: blur(12px); flex-shrink: 0; } .ss-conv-title { display: flex; align-items: center; gap: 14px; } .ss-conv-title .ss-avatar { width: 44px; height: 44px; font-size: 1rem; } .ss-conv-title-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ss-conv-title { min-width: 0; flex: 1; } .ss-conv-title-text { min-width: 0; flex: 1; overflow: hidden; } .ss-conv-title .ss-thread-name { margin: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-conv-title .ss-typing-line.ss-presence-line--online, .ss-conv-title .ss-typing-line.ss-presence-line--idle, .ss-conv-title .ss-typing-line.ss-presence-line--offline, .ss-conv-title .ss-typing-line.ss-presence-line--muted { white-space: normal; flex-wrap: wrap; align-items: flex-start; line-height: 1.25; margin-top: 1px; } .ss-conv-title .ss-presence-line__text { white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.25; } .ss-typing-line { font-size: 0.8125rem; color: var(--ss-muted); font-style: italic; margin-top: 2px; } .ss-typing-line.ss-typing-line--wave { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-style: italic; } .ss-typing-line .ss-typing-name { font-style: italic; } .ss-typing-dots { display: inline-flex; align-items: flex-end; gap: 4px; height: 14px; } .ss-typing-dots span { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--ss-muted); opacity: 0.85; animation: ss-typing-wave 0.9s ease-in-out infinite; } .ss-typing-dots span:nth-child(2) { animation-delay: 0.12s; } .ss-typing-dots span:nth-child(3) { animation-delay: 0.24s; } @keyframes ss-typing-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @media (prefers-reduced-motion: reduce) { .ss-typing-dots span { animation: none; } } .ss-conv-actions { display: flex; align-items: center; gap: 10px; } /* Reset fuerte para evitar iconos "corridos" entre navegadores */ .ss-btn, .ss-composer-plus, .ss-composer-chart, .ss-composer-pill-btn, .ss-composer-action { appearance: none; -webkit-appearance: none; vertical-align: middle; } /* Cabecera: voz / vídeo / info / más — botones circulares solo ícono (paridad app) */ .ss-conv-actions .ss-btn[data-ui="header-btn-audio"], .ss-conv-actions .ss-btn[data-ui="header-btn-video"], .ss-conv-actions .ss-btn[data-ui="header-btn-info"], .ss-conv-actions .ss-btn[data-ui="header-btn-more"], .ss-conv-actions .ss-btn[data-ui="header-btn-add-participants"] { padding: 0 !important; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; gap: 0; flex-shrink: 0; box-sizing: border-box; line-height: 0; display: inline-flex; align-items: center; justify-content: center; } .ss-conv-actions .ss-btn[data-ui="header-btn-audio"] .ss-icon, .ss-conv-actions .ss-btn[data-ui="header-btn-video"] .ss-icon, .ss-conv-actions .ss-btn[data-ui="header-btn-info"] .ss-icon, .ss-conv-actions .ss-btn[data-ui="header-btn-more"] .ss-icon, .ss-conv-actions .ss-btn[data-ui="header-btn-add-participants"] .ss-icon { width: 22px; height: 22px; min-width: 22px; min-height: 22px; } .ss-conv-actions .ss-btn[data-ui="header-btn-audio"] .ss-icon svg, .ss-conv-actions .ss-btn[data-ui="header-btn-video"] .ss-icon svg, .ss-conv-actions .ss-btn[data-ui="header-btn-info"] .ss-icon svg, .ss-conv-actions .ss-btn[data-ui="header-btn-more"] .ss-icon svg, .ss-conv-actions .ss-btn[data-ui="header-btn-add-participants"] .ss-icon svg, .ss-conv-actions .ss-btn[data-ui="header-btn-search"] .ss-icon svg { width: 22px; height: 22px; display: block; } /* Cabecera / rail / toolbar: fondo neutro, icono en acento (Calm UI) */ .ss-conv-actions .ss-btn[data-ui^="header-btn-"], .ss-brand-bar__action, .ss-topbar .ss-btn, .ss-inbox-nav-action { background: var(--ss-surface-subtle); border: 1px solid var(--ss-border); color: var(--ss-brand); } .ss-conv-actions .ss-btn[data-ui^="header-btn-"]:hover:not(:disabled), .ss-brand-bar__action:hover:not(:disabled), .ss-topbar .ss-btn:hover:not(:disabled), .ss-inbox-nav-action:hover:not(:disabled) { background: var(--ss-brand-soft); border-color: color-mix(in srgb, var(--ss-brand) 32%, var(--ss-border)); color: var(--ss-brand); } .ss-conv-actions .ss-btn[data-ui^="header-btn-"] .ss-icon, .ss-brand-bar__action .ss-icon, .ss-topbar .ss-btn .ss-icon, .ss-inbox-nav-action .ss-icon { color: var(--ss-brand); } .ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--ss-radius-sm); border: 1px solid var(--ss-border); background: rgba(255, 255, 255, 0.04); color: var(--ss-text); padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 0.875rem; line-height: 1.2; transition: background var(--ss-transition), border-color var(--ss-transition); } .ss-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: var(--ss-border-strong); } .ss-btn.primary { border-color: rgba(123, 97, 255, 0.5); background: var(--ss-brand-soft); } .ss-btn.primary:hover:not(:disabled) { background: rgba(123, 97, 255, 0.3); border-color: var(--ss-brand); } .ss-btn.danger { border-color: rgba(239, 68, 68, 0.5); background: var(--ss-danger-soft); } .ss-btn.danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.28); } .ss-btn .ss-icon { width: 18px; height: 18px; min-width: 18px; min-height: 18px; flex-shrink: 0; line-height: 0; display: inline-flex; align-items: center; justify-content: center; margin: 0; } .ss-btn .ss-icon svg { width: 18px; height: 18px; display: block; flex-shrink: 0; margin: 0; transform: none; transform-origin: center; } /* Global hardening: prevent dark blocks/artifacts around SVG icons. */ .ss-icon, .ss-icon svg, .ss-icon svg * { background: transparent !important; box-shadow: none !important; filter: none !important; } .ss-icon svg { color: inherit; } .ss-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* —— Messages area —— */ .ss-messages { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 24px; display: flex; flex-direction: column; gap: 12px; } /* Paridad app: pocos mensajes pegados abajo, no arriba con hueco vacío */ .ss-messages-anchor { flex: 1 1 auto; min-height: 0; width: 100%; pointer-events: none; } /* Con virtualización el spacer superior ya ancla el scroll; el flex-grow duplica hueco */ .ss-messages.ss-messages--virtual .ss-messages-anchor { display: none; flex: 0 0 0; height: 0; min-height: 0; } /* Fila con avatar de remitente en grupos (mantener alineación entre burbujas del mismo usuario) */ .ss-msg-row { display: flex; align-items: flex-end; gap: 8px; max-width: min(78%, 560px); align-self: flex-start; } .ss-msg-row-avatar { width: 32px; flex: 0 0 32px; flex-shrink: 0; align-self: flex-end; overflow: hidden; } .ss-msg-row-avatar--spacer { visibility: hidden; pointer-events: none; } .ss-msg-row .ss-avatar, .ss-msg-row .ss-avatar--msg { width: 32px; height: 32px; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; font-size: 0.75rem; } #soulfulsync-web-chat-ui.ss-compact .ss-msg-row .ss-avatar, #soulfulsync-web-chat-ui.ss-compact .ss-msg-row .ss-avatar--msg { width: 32px; height: 32px; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; font-size: 0.75rem; } .ss-msg-row .ss-msg { max-width: 100%; flex: 1; min-width: 0; } .ss-msg-row-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1; } .ss-msg-sender-name { font-size: 0.75rem; font-weight: 700; color: var(--ss-brand); margin-bottom: 4px; line-height: 1.2; } .ss-msg { max-width: min(70%, 520px); padding: 11px 15px 10px; border-radius: 20px 20px 20px 6px; border: 1px solid var(--ss-glass-border); background: var(--ss-msg-in-bg, var(--ss-glass)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--ss-msg-shadow); transition: transform var(--ss-transition), box-shadow var(--ss-transition), border-color var(--ss-transition); } .ss-msg.me { margin-left: auto; border-radius: 20px 20px 6px 20px; border-color: var(--ss-msg-own-border); background: var(--ss-msg-own-bg); color: var(--ss-msg-own-text, var(--ss-text)); box-shadow: var(--ss-msg-own-shadow); } @media (hover: hover) and (pointer: fine) { .ss-msg--contextable:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1); } .ss-msg.me.ss-msg--contextable:hover { box-shadow: 0 6px 20px rgba(123, 97, 255, 0.28); } } /* WhatsApp-style send animation */ .ss-msg.ss-msg-sending { opacity: 0.85; transform: scale(0.97); animation: ss-msg-send 0.35s ease forwards; } @keyframes ss-msg-send { to { opacity: 1; transform: scale(1); } } /* Mensaje nuevo vía socket: fade + slide corto (~260 ms) */ .ss-msg.ss-msg-fresh { animation: ss-msg-enter-in 0.26s ease-out both; } .ss-msg.me.ss-msg-fresh { animation-name: ss-msg-enter-me; } @keyframes ss-msg-enter-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes ss-msg-enter-me { from { opacity: 0; transform: translateX(12px) translateY(8px); } to { opacity: 1; transform: translateX(0) translateY(0); } } @media (prefers-reduced-motion: reduce) { .ss-msg.ss-msg-sending, .ss-msg.ss-msg-fresh { animation: none; } } @media (hover: none) { .ss-thread:hover { background: transparent; } } .ss-msg-sent-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; } .ss-msg-sent-row--own { justify-content: flex-end; margin-left: auto; max-width: 100%; flex-wrap: nowrap; gap: 4px; } .ss-msg .ss-msg-sent { margin-top: 0; color: var(--ss-muted); font-size: 0.75rem; line-height: 1.2; white-space: nowrap; } .ss-msg.me .ss-msg-sent, .ss-msg.me .ss-msg-edited { color: var(--ss-muted); } #soulfulsync-web-chat-ui[data-theme="dark"] .ss-msg.me .ss-msg-sent, #soulfulsync-web-chat-ui[data-theme="dark"] .ss-msg.me .ss-msg-edited { color: rgba(255, 255, 255, 0.62); } .ss-msg:not(.me) .ss-msg-sent { color: var(--ss-muted); } .ss-msg-read { color: #34b7f1; font-size: 0.6875rem; font-weight: 700; line-height: 1.2; white-space: nowrap; } .ss-msg.me .ss-msg-read { color: #34b7f1; } /* Palomitas enviado / entregado / leído (mensajes propios) */ .ss-msg-ticks { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 2px; min-width: 16px; min-height: 10px; color: var(--ss-muted); line-height: 1; user-select: none; white-space: nowrap; } .ss-msg-ticks-icon { display: block; width: 16px; height: 10px; } .ss-msg.me .ss-msg-ticks { color: var(--ss-muted); } #soulfulsync-web-chat-ui[data-theme="dark"] .ss-msg.me .ss-msg-ticks { color: rgba(255, 255, 255, 0.72); } .ss-msg-ticks-sent { opacity: 0.55; } .ss-msg-ticks-delivered { opacity: 0.82; } .ss-msg-ticks-pending { opacity: 0.45; letter-spacing: 0; animation: ss-msg-ticks-pulse 1s ease-in-out infinite; } @keyframes ss-msg-ticks-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.75; } } .ss-msg-ticks-read { color: #34b7f1 !important; opacity: 1; } .ss-msg-day-separator-wrap { display: flex; justify-content: center; margin: 8px 0 4px; width: 100%; } .ss-msg-day-separator { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--ss-radius-pill); background: var(--ss-pill-surface); border: 1px solid var(--ss-glass-border); color: var(--ss-muted); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; text-transform: none; } .ss-msg-text { white-space: pre-wrap; word-break: break-word; font-size: 0.9375rem; line-height: 1.45; } /* Historial de llamadas en el hilo (paridad con app / WhatsApp) */ .ss-msg-call-log-wrap { align-self: center; max-width: 92%; margin: 6px 0; text-align: center; } .ss-msg-call-log { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--ss-radius-pill); background: var(--ss-pill-surface); border: 1px solid var(--ss-border); color: var(--ss-muted); font-size: 0.8125rem; font-weight: 600; line-height: 1.35; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .ss-msg-call-log--rejected { background: color-mix(in srgb, #ef4444 14%, var(--ss-pill-surface)); border-color: color-mix(in srgb, #ef4444 42%, var(--ss-border)); color: color-mix(in srgb, #fecaca 88%, var(--ss-text)); } .ss-msg-call-log--cancelled { background: color-mix(in srgb, var(--ss-muted) 10%, var(--ss-pill-surface)); border-color: var(--ss-border); color: var(--ss-muted); } .ss-msg-call-log--missed { background: color-mix(in srgb, #f59e0b 16%, var(--ss-pill-surface)); border-color: color-mix(in srgb, #f59e0b 38%, var(--ss-border)); color: color-mix(in srgb, #fde68a 82%, var(--ss-text)); } .ss-msg-call-log--completed { background: color-mix(in srgb, var(--ss-primary) 12%, var(--ss-pill-surface)); border-color: color-mix(in srgb, var(--ss-primary) 32%, var(--ss-border)); color: color-mix(in srgb, var(--ss-primary) 72%, var(--ss-text)); } .ss-msg-call-log-time { margin-top: 4px; font-size: 0.6875rem; color: var(--ss-muted); opacity: 0.85; } /* Mensajes de sistema en grupos (X creó el grupo, X salió, etc.) */ .ss-msg-system-wrap { align-self: center; max-width: 92%; margin: 6px 0; text-align: center; } .ss-msg-system { display: inline-block; padding: 8px 14px; border-radius: var(--ss-radius-pill); background: var(--ss-msg-system-bg, var(--ss-pill-surface)); border: 1px solid var(--ss-glass-border); color: var(--ss-msg-system-text, var(--ss-muted)); font-size: 0.8125rem; line-height: 1.35; } .ss-msg-system-time { margin-top: 4px; font-size: 0.6875rem; color: var(--ss-muted); opacity: 0.85; } /* Banner compacto en hilo grupal (paridad app ChatGroupThreadBanner) */ .ss-group-thread-banner { display: block; width: calc(100% - 8px); margin: 0 auto 12px; padding: 0; border: 1px solid color-mix(in srgb, var(--ss-brand) 22%, var(--ss-border)); border-radius: 16px; background: linear-gradient( 145deg, color-mix(in srgb, var(--ss-brand) 10%, var(--ss-bg-card)) 0%, var(--ss-bg-card) 55% ); cursor: pointer; text-align: left; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .ss-group-thread-banner:hover { border-color: color-mix(in srgb, var(--ss-brand) 40%, var(--ss-border)); box-shadow: var(--ss-soft-card-shadow, 0 8px 24px rgba(0, 0, 0, 0.12)); } .ss-group-thread-banner-inner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; } .ss-group-thread-banner-avatars { display: flex; flex-shrink: 0; padding-left: 4px; } .ss-group-thread-banner-avatar { width: 36px; height: 36px; border-radius: 50%; margin-left: -10px; border: 2px solid var(--ss-bg-card); font-size: 0.85rem; } .ss-group-thread-banner-avatar:first-child { margin-left: 0; } .ss-group-thread-banner-text { flex: 1; min-width: 0; } .ss-group-thread-banner-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .ss-group-thread-banner-label { font-size: 0.8125rem; font-weight: 700; color: var(--ss-brand); } .ss-group-thread-banner-link { font-size: 0.8125rem; font-weight: 600; color: var(--ss-brand); } .ss-group-thread-banner-desc { margin: 0; font-size: 0.8125rem; line-height: 1.35; color: var(--ss-fg); opacity: 0.88; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ss-group-thread-banner-desc--muted { font-style: italic; opacity: 0.62; } .ss-group-thread-banner-creator { margin: 6px 0 0; font-size: 0.75rem; color: var(--ss-muted); } .ss-contact-info-section--desc { margin-top: 4px; } .ss-contact-info-desc--empty { font-style: italic; opacity: 0.65; } .ss-contact-info-desc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .ss-contact-info-desc-head .ss-contact-info-section-title { margin: 0; text-align: left; } .ss-contact-edit-desc { flex-shrink: 0; } .ss-contact-info-alert { margin: 12px 0 4px; padding: 10px 12px; border-radius: 12px; font-size: 0.82rem; line-height: 1.4; text-align: left; } .ss-contact-info-alert--warning { background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.35); color: rgba(253, 230, 138, 0.95); } .ss-contact-info-alert--info { background: rgba(96, 165, 250, 0.12); border: 1px solid rgba(96, 165, 250, 0.32); color: rgba(191, 219, 254, 0.95); } .ss-edit-group-desc-modal .ss-edit-group-desc-input { width: 100%; min-height: 120px; resize: vertical; box-sizing: border-box; } .ss-edit-group-profile-body { display: flex; flex-direction: column; gap: 16px; } .ss-edit-group-profile-foot { display: flex; gap: 10px; justify-content: flex-end; padding-top: 4px; } .ss-edit-group-profile-foot .ss-btn { min-width: 96px; } .ss-edit-group-profile-avatar-wrap { cursor: pointer; } .ss-edit-group-profile-clear-btn { align-self: flex-start; color: var(--ss-danger, #e53935); border: 1px solid color-mix(in srgb, var(--ss-danger, #e53935) 35%, transparent); } .ss-thread-settings-avatar--editable { cursor: pointer; box-shadow: 0 0 0 2px var(--ss-brand-soft); transition: box-shadow 0.15s ease, transform 0.15s ease; } .ss-thread-settings-avatar--editable:hover { box-shadow: 0 0 0 2px var(--ss-brand); transform: scale(1.03); } .ss-contact-info-name-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px; } .ss-contact-info-name-row .ss-contact-info-name { margin: 0; } .ss-contact-edit-profile { padding: 0; width: 32px; height: 32px; min-width: 32px; min-height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; } .ss-contact-edit-profile .ss-icon { width: 16px; height: 16px; } .ss-btn.ss-btn-sm { padding: 6px 10px; font-size: 0.75rem; line-height: 1.2; min-height: 0; } .ss-pinned-msg-host { flex-shrink: 0; padding: 8px 16px 0; background: var(--ss-main-area-bg); border-bottom: 1px solid var(--ss-border); } .ss-pinned-msg-host[hidden] { display: none !important; } .ss-pinned-msg-host .ss-pinned-msg-bar { width: 100%; margin: 0 0 8px; } .ss-pinned-msg-bar { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: calc(100% - 8px); margin: 0 auto 10px; padding: 10px 12px; border-radius: var(--ss-radius-md); border: 1px solid var(--ss-border-strong); background: color-mix(in srgb, var(--ss-surface-elevated) 88%, var(--ss-primary) 12%); text-align: left; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; } .ss-pinned-msg-bar:hover { transform: translateY(-1px); box-shadow: var(--ss-shadow-sm); } .ss-pinned-msg-bar__label { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ss-primary); } .ss-pinned-msg-bar__text { font-size: 0.8125rem; color: var(--ss-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-msg-highlight { outline: 2px solid var(--ss-primary); outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ss-primary) 22%, transparent); } .ss-msg-edited { font-size: 0.6875rem; opacity: 0.78; } .ss-msg-forwarded { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; opacity: 0.82; margin-bottom: 4px; } .ss-msg-edited-inline, .ss-msg-edited-badge { display: inline-flex; align-items: center; align-self: flex-start; margin-bottom: 6px; padding: 2px 8px; border-radius: 8px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; background: color-mix(in srgb, var(--ss-primary) 22%, transparent); border: 1px solid color-mix(in srgb, var(--ss-primary) 38%, transparent); color: var(--ss-primary); } .ss-msg.me .ss-msg-edited-inline, .ss-msg.me .ss-msg-edited-badge { background: rgba(110, 92, 230, 0.08); border-color: rgba(110, 92, 230, 0.18); color: var(--ss-muted); } #soulfulsync-web-chat-ui[data-theme="dark"] .ss-msg.me .ss-msg-edited-inline, #soulfulsync-web-chat-ui[data-theme="dark"] .ss-msg.me .ss-msg-edited-badge { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.95); } .ss-msg--reply-drag { transition: transform 0.08s ease-out; } .ss-thread-timer-icon { opacity: 0.85; } .ss-msg-context-edit--disabled { opacity: 0.45; cursor: not-allowed; } .ss-msg-context-hint { display: block; padding: 0 12px 8px; font-size: 0.75rem; color: var(--ss-muted); text-align: center; } .ss-reaction-users-sheet { max-width: min(420px, 92vw); padding: 16px 18px 20px; } .ss-reaction-user-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--ss-outline) 35%, transparent); font-size: 0.9375rem; } .ss-reaction-user-row:last-child { border-bottom: none; } /* Toast global (llamada finalizada / rechazada, etc.) */ .ss-global-toast { position: fixed; /* Arriba: no tapa el compositor «Escribe un mensaje». */ top: calc(12px + var(--ss-wp-adminbar, 0px) + var(--ss-theme-header-offset, 0px)); bottom: auto; left: 50%; transform: translateX(-50%); z-index: 1000000; max-width: min(420px, 92vw); padding: 12px 18px; border-radius: var(--ss-radius-pill); background: var(--ss-toast-bg); border: 1px solid var(--ss-border-strong); color: var(--ss-text); font-size: 0.875rem; font-weight: 600; line-height: 1.35; text-align: center; overflow-wrap: anywhere; box-shadow: var(--ss-shadow); pointer-events: none; display: none; box-sizing: border-box; } body.soulfulsync-web-chat-page .ss-global-toast { /* En chat el header está en flujo; anclar bajo admin bar + header típico. */ top: calc(10px + var(--ss-wp-adminbar, 0px) + 68px); } /* Móvil: arriba, compacto — no tapa footer / appbar / FABs */ @media (max-width: 768px) { .ss-global-toast { top: calc(10px + env(safe-area-inset-top, 0px) + var(--ss-theme-header-offset, 64px)); bottom: auto; left: 12px; right: 12px; transform: none; width: auto; max-width: none; padding: 10px 14px; font-size: 0.8125rem; border-radius: 14px; box-shadow: 0 10px 28px rgba(12, 10, 20, 0.16); } } .ss-global-toast--error, .ss-global-toast-error { border-color: var(--ss-toast-error-border); background: var(--ss-toast-error-bg); color: var(--ss-toast-error-text); } .ss-global-toast--success { border-color: color-mix(in srgb, var(--ss-success) 45%, var(--ss-border-strong)); background: color-mix(in srgb, var(--ss-success) 12%, var(--ss-toast-bg)); color: var(--ss-text); } .ss-global-toast--warning { border-color: color-mix(in srgb, var(--ss-warning) 50%, var(--ss-border-strong)); background: color-mix(in srgb, var(--ss-warning) 14%, var(--ss-toast-bg)); } .ss-forward-search-wrap { padding: 0 0 10px; position: sticky; top: 0; background: var(--ss-bg-card, var(--ss-surface-elevated)); z-index: 2; } .ss-forward-list-host { display: flex; flex-direction: column; gap: 6px; max-height: min(52vh, 420px); overflow-y: auto; } .ss-forward-row { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 10px 12px; } .ss-forward-row-avatar { width: 40px; height: 40px; flex-shrink: 0; font-size: 0.85rem; } .ss-forward-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-msg-reply-preview, .ss-reply-quote-host { padding: 8px 10px; border-radius: var(--ss-radius-sm); border-left: 3px solid var(--ss-brand); background: var(--ss-reply-preview-bg); color: var(--ss-reply-preview-text); margin-bottom: 8px; } .ss-reply-quote-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .ss-reply-quote-avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; overflow: hidden; } .ss-reply-quote-avatar img, .ss-reply-quote-avatar .ss-avatar-fallback { width: 32px; height: 32px; border-radius: 50%; } .ss-reply-quote-text { flex: 1; min-width: 0; } .ss-reply-quote-name { font-size: 0.8125rem; font-weight: 700; line-height: 1.2; color: var(--ss-brand); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-reply-quote-body { font-size: 0.8125rem; line-height: 1.35; color: var(--ss-reply-preview-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ss-msg-story-reply { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .ss-msg-story-reply__quote { display: flex; align-items: stretch; gap: 10px; width: 100%; padding: 8px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ss-brand) 28%, var(--ss-border)); background: color-mix(in srgb, var(--ss-brand) 8%, var(--ss-bg-card)); cursor: pointer; text-align: left; transition: background 0.2s ease, border-color 0.2s ease; } .ss-msg-story-reply__quote:hover { background: color-mix(in srgb, var(--ss-brand) 14%, var(--ss-bg-card)); border-color: color-mix(in srgb, var(--ss-brand) 42%, var(--ss-border)); } .ss-msg-story-reply__quote--unavailable { opacity: 0.68; cursor: not-allowed; border-color: color-mix(in srgb, var(--ss-text-muted) 35%, var(--ss-border)); background: color-mix(in srgb, var(--ss-text-muted) 6%, var(--ss-bg-card)); } .ss-msg-story-reply__quote--unavailable:hover { background: color-mix(in srgb, var(--ss-text-muted) 8%, var(--ss-bg-card)); border-color: color-mix(in srgb, var(--ss-text-muted) 42%, var(--ss-border)); } .ss-msg-story-reply__quote--unavailable .ss-msg-story-reply__label { color: var(--ss-text-muted); font-style: italic; } .ss-msg-story-reply__media { flex-shrink: 0; width: 44px; height: 58px; border-radius: 10px; overflow: hidden; background: var(--ss-surface-subtle); } .ss-msg-story-reply__thumb, .ss-msg-story-reply__thumb-fallback { width: 100%; height: 100%; display: block; object-fit: cover; } .ss-msg-story-reply__thumb-fallback { display: flex; align-items: center; justify-content: center; color: var(--ss-brand); background: linear-gradient( 145deg, color-mix(in srgb, var(--ss-brand) 24%, transparent), color-mix(in srgb, var(--ss-brand) 8%, transparent) ); } .ss-msg-story-reply__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; } .ss-msg-story-reply__badge { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ss-brand); } .ss-msg-story-reply__label { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--ss-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ss-msg-story-reply__text { font-size: 0.9375rem; line-height: 1.4; color: inherit; white-space: pre-wrap; word-break: break-word; } .ss-reply-bar { display: flex; align-items: flex-start; gap: 8px; } .ss-reply-bar .ss-reply-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ss-reply-label-color); padding-top: 8px; flex-shrink: 0; } .ss-reply-bar .ss-reply-quote-host { flex: 1; min-width: 0; margin-bottom: 0; } /* —— Voice message bubbles (pill + waveform + duration) —— */ .ss-msg-voice { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 140px; max-width: 260px; padding: 10px 14px; border-radius: var(--ss-radius-pill); background: var(--ss-pill-surface-strong); border: 1px solid var(--ss-border); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); } /* Dentro de burbuja de chat: inline como la app (sin caja extra). */ .ss-msg .ss-msg-voice { background: transparent; border: none; box-shadow: none; padding: 4px 0; color: inherit; } .ss-msg-voice.me { background: color-mix(in srgb, var(--ss-brand) 18%, var(--ss-pill-surface-strong)); border-color: var(--ss-msg-own-border); color: var(--ss-text); } .ss-msg.me .ss-msg-voice.me { background: transparent; border: none; color: inherit; } .ss-voice-play-btn { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.2); color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .ss-msg-voice.me .ss-voice-play-btn { background: rgba(255, 255, 255, 0.25); } .ss-voice-play-btn:hover { background: rgba(255, 255, 255, 0.3); } .ss-voice-play-wrap .ss-icon { width: 20px; height: 20px; } .ss-msg-voice .ss-voice-waveform-wrap { display: flex; align-items: center; gap: 3px; flex: 1; min-width: 0; justify-content: center; cursor: pointer; } .ss-msg .ss-msg-voice .ss-voice-play-btn { background: color-mix(in srgb, currentColor 18%, transparent); } .ss-msg-voice .ss-voice-bar { width: 3px; min-height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); transition: background 0.15s ease; } .ss-msg .ss-msg-voice .ss-voice-bar { background: color-mix(in srgb, currentColor 35%, transparent); } .ss-msg-voice.me .ss-voice-bar { background: rgba(255, 255, 255, 0.5); } .ss-msg .ss-msg-voice .ss-voice-bar.filled { background: color-mix(in srgb, currentColor 92%, transparent); } .ss-msg-voice .ss-voice-bar.filled { background: rgba(255, 255, 255, 0.9); } .ss-msg-voice.me .ss-voice-bar.filled { background: #fff; } .ss-msg .ss-msg-voice.me .ss-voice-bar, .ss-msg .ss-msg-voice.me .ss-voice-bar.filled { background: color-mix(in srgb, currentColor 40%, transparent); } .ss-msg .ss-msg-voice.me .ss-voice-bar.filled { background: color-mix(in srgb, currentColor 95%, transparent); } .ss-voice-duration { flex-shrink: 0; font-size: 0.75rem; font-weight: 600; opacity: 0.95; } /* —— Recording pill (WhatsApp-style live waveform) —— */ .ss-recording-pill { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 160px; max-width: 280px; padding: 12px 16px; border-radius: var(--ss-radius-pill); background: #2563eb; border: 1px solid rgba(37, 99, 235, 0.6); color: #fff; box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35); } .ss-recording-pill .ss-voice-play-wrap { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; } .ss-recording-pill .ss-voice-mic { color: #fff; } .ss-recording-pill .ss-voice-waveform-wrap { display: flex; align-items: center; gap: 3px; flex: 1; min-width: 0; justify-content: center; } .ss-recording-pill .ss-voice-bar { width: 3px; min-height: 4px; border-radius: 2px; background: var(--ss-voice-meter); } .ss-recording-pill .ss-voice-duration { font-size: 0.8125rem; font-weight: 600; } /* —— Voice note preview (listen before send) —— */ .ss-voice-preview-pill { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--ss-radius-pill); background: var(--ss-surface-elevated, rgba(255, 255, 255, 0.08)); border: 1px solid var(--ss-glass-border); color: var(--ss-text-primary); box-shadow: var(--ss-shadow-soft, 0 4px 16px rgba(0, 0, 0, 0.12)); } .ss-voice-preview-discard { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--ss-danger, #ef4444); cursor: pointer; flex-shrink: 0; } .ss-voice-preview-discard:hover { background: rgba(239, 68, 68, 0.12); } .ss-voice-preview-pill .ss-voice-play-wrap { width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--ss-accent, #8b5cf6) 18%, transparent); border: none; display: flex; align-items: center; justify-content: center; color: var(--ss-accent, #8b5cf6); cursor: pointer; flex-shrink: 0; } .ss-voice-preview-pill .ss-voice-waveform-wrap { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; justify-content: center; } .ss-voice-preview-pill .ss-voice-bar { width: 3px; min-height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ss-text-primary) 28%, transparent); } .ss-voice-preview-pill .ss-voice-bar.filled { background: var(--ss-accent, #8b5cf6); } .ss-voice-preview-pill .ss-voice-duration { font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 2.5rem; text-align: right; } .ss-voice-preview-send { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: none; border-radius: 50%; background: var(--ss-accent, #8b5cf6); color: #fff; cursor: pointer; flex-shrink: 0; box-shadow: 0 4px 12px color-mix(in srgb, var(--ss-accent, #8b5cf6) 35%, transparent); } .ss-voice-preview-send:disabled, .ss-voice-preview-send.ss-voice-preview-send--busy { opacity: 0.65; cursor: wait; } /* —— Composer —— */ .ss-composer { padding: 16px 24px 24px; border-top: 1px solid var(--ss-glass-border); background: var(--ss-panel-blur-bg); backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; position: relative; } /* Chat embebido (sin fullscreen): aire bajo el composer por dock del tema + safe area */ @media screen and (max-width: 1024px) { body #soulfulsync-web-chat-ui .ss-composer { padding-bottom: calc( 24px + var(--ss-theme-bottom-nav-height) + env(safe-area-inset-bottom, 0px) ); } } .ss-composer-top { display: flex; flex-wrap: wrap; gap: 10px; } .ss-composer-row { display: flex; gap: 10px; align-items: center; position: relative; } /* Mockup-style: +, gráfico, píldora (emoji + texto + clip), botón neón mic/enviar */ .ss-composer-plus-wrap { position: relative; flex-shrink: 0; } .ss-composer-plus { width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--ss-border); background: var(--ss-surface-subtle); color: var(--ss-brand); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; line-height: 0; box-sizing: border-box; } .ss-composer-plus .ss-icon { width: 22px; height: 22px; min-width: 22px; min-height: 22px; display: flex; align-items: center; justify-content: center; } .ss-composer-plus .ss-icon svg { width: 20px; height: 20px; display: block; flex-shrink: 0; margin: 0; transform: none; } .ss-composer-plus:hover { background: var(--ss-brand-soft); border-color: color-mix(in srgb, var(--ss-brand) 32%, var(--ss-border)); color: var(--ss-brand); } .ss-composer-plus:disabled { opacity: 0.35; cursor: not-allowed; } .ss-composer-plus-menu { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30; min-width: 188px; padding: 8px; border-radius: 12px; border: 1px solid var(--ss-border); background: var(--ss-bg-card); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 4px; } .ss-composer-plus-menu[hidden] { display: none !important; } .ss-composer-plus-opt { text-align: left; padding: 10px 12px; border: none; border-radius: 8px; background: transparent; color: var(--ss-text); font-size: 0.9rem; cursor: pointer; } .ss-composer-plus-opt:hover { background: rgba(255, 255, 255, 0.06); } .ss-composer-chart { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--ss-border); border-radius: 11px; background: var(--ss-surface-subtle); color: var(--ss-brand); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; line-height: 0; box-sizing: border-box; } .ss-composer-chart .ss-icon { width: 22px; height: 22px; min-width: 22px; min-height: 22px; display: flex; align-items: center; justify-content: center; } .ss-composer-chart .ss-icon svg { width: 20px; height: 20px; display: block; flex-shrink: 0; margin: 0; transform: none; } .ss-composer-chart:hover { background: var(--ss-brand-soft); color: var(--ss-text); border-color: var(--ss-border-strong); } .ss-composer-chart:disabled { opacity: 0.35; cursor: not-allowed; } .ss-composer-pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 14px; min-height: 48px; border-radius: 28px; background: var(--ss-input-bg, var(--ss-bg-card)); border: 1px solid var(--ss-input-border, var(--ss-border)); transition: border-color var(--ss-transition), box-shadow var(--ss-transition); } .ss-composer-pill:focus-within { border-color: var(--ss-input-focus, var(--ss-brand-tab-border)); box-shadow: var(--ss-composer-focus-ring); } .ss-composer-pill .ss-composer-pill-input { flex: 1; min-width: 0; border: none !important; background: transparent !important; box-shadow: none !important; padding: 10px 8px; color: var(--ss-text); } .ss-composer-pill .ss-composer-pill-input:focus { outline: none; border: none !important; box-shadow: none !important; } .ss-composer-pill-btn { flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--ss-border); border-radius: 50%; background: var(--ss-surface-subtle); color: var(--ss-brand); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 2px; padding: 0; line-height: 0; box-sizing: border-box; } .ss-composer-pill-btn .ss-icon { width: 20px; height: 20px; min-width: 20px; min-height: 20px; display: flex; align-items: center; justify-content: center; } .ss-composer-pill-btn .ss-icon svg { width: 18px; height: 18px; display: block; flex-shrink: 0; margin: 0; transform: none; } .ss-composer-pill-btn:hover { background: var(--ss-brand-soft); border-color: color-mix(in srgb, var(--ss-brand) 32%, var(--ss-border)); color: var(--ss-brand); } .ss-composer-pill-btn:disabled { opacity: 0.4; cursor: not-allowed; } .ss-composer-action { flex-shrink: 0; width: 48px; height: 48px; border: 1px solid var(--ss-border); border-radius: 14px; background: var(--ss-surface-subtle); color: var(--ss-brand); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--ss-transition), border-color var(--ss-transition), color var(--ss-transition); box-shadow: none; padding: 0; line-height: 0; box-sizing: border-box; } .ss-composer-action .ss-icon { width: 26px; height: 26px; min-width: 26px; min-height: 26px; display: flex; align-items: center; justify-content: center; } .ss-composer-action:hover:not(:disabled) { background: var(--ss-brand-soft); border-color: color-mix(in srgb, var(--ss-brand) 35%, var(--ss-border)); color: var(--ss-brand); } .ss-composer-action:disabled { opacity: 0.45; cursor: not-allowed; } .ss-composer-action.recording { background: var(--ss-danger-soft); border-color: color-mix(in srgb, var(--ss-danger) 40%, var(--ss-border)); color: var(--ss-danger); } .ss-composer-action .ss-icon svg { width: 22px; height: 22px; display: block; flex-shrink: 0; margin: 0; transform: none; } /* Unifica centrado en todos los svg de iconos del chat */ .ss-icon { display: inline-flex; align-items: center; justify-content: center; } .ss-icon svg { display: block; margin: 0; } .ss-reply-bar, .ss-attachment-chip { flex: 1 1 auto; display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: var(--ss-radius-sm); border: 1px solid var(--ss-border); background: var(--ss-brand-soft); } /* display:flex above overrides the native [hidden] rule in some browsers — force hide */ .ss-reply-bar[hidden], .ss-attachment-chip[hidden] { display: none !important; } .ss-attachment-chip { background: var(--ss-success-soft); } .ss-attachment-chip--image { flex-wrap: wrap; align-items: flex-start; gap: 10px; } .ss-attachment-meta { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ss-attachment-preview { flex: 0 0 auto; width: min(100%, 200px); max-height: min(170px, 32vh); border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--ss-border); display: flex; align-items: center; justify-content: center; } .ss-attachment-preview[hidden] { display: none !important; } .ss-attachment-preview-img { display: block; width: 100%; max-width: 200px; max-height: min(170px, 32vh); height: auto; object-fit: contain; object-position: center; } .ss-attachment-preview-video { display: block; width: 100%; max-width: 200px; max-height: min(170px, 32vh); border-radius: 10px; background: #000; object-fit: contain; } .ss-attachment-preview-video[hidden] { display: none !important; } .ss-attachment-chip .ss-btn { cursor: pointer; flex-shrink: 0; } .ss-reply-label, .ss-attachment-text { color: var(--ss-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; } .ss-reply-preview, .ss-attachment-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ss-text); font-size: 0.875rem; } .ss-input { flex: 1; min-width: 120px; background: var(--ss-input-bg, rgba(255, 255, 255, 0.05)); border: 1px solid var(--ss-input-border, var(--ss-border)); border-radius: var(--ss-radius-sm); padding: 12px 16px; color: var(--ss-text); font-size: 0.9375rem; outline: none; transition: border-color var(--ss-transition), box-shadow var(--ss-transition); } .ss-input:hover { border-color: var(--ss-border-strong); } .ss-input:focus { border-color: var(--ss-input-focus, var(--ss-brand-glow)); box-shadow: 0 0 0 2px var(--ss-brand-soft); } .ss-send { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--ss-radius-sm); border: none; background: var(--ss-avatar-gradient); color: #fff; padding: 12px 18px; font-weight: 600; font-size: 0.9375rem; cursor: pointer; transition: opacity var(--ss-transition), transform 0.15s ease; } .ss-send:hover { opacity: 0.95; transform: scale(1.02); } .ss-send .ss-icon { width: 18px; height: 18px; min-width: 18px; min-height: 18px; display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .ss-send .ss-icon svg { width: 18px; height: 18px; display: block; flex-shrink: 0; } .ss-btn-voice.recording { background: var(--ss-danger-soft); border-color: rgba(239, 68, 68, 0.5); color: #fff; } /* —— Emoji popover —— */ .ss-emoji-popover { position: absolute; bottom: 100%; left: 0; margin-bottom: 8px; padding: 12px; background: var(--ss-bg-card); border: 1px solid var(--ss-border); border-radius: var(--ss-radius); display: flex; flex-direction: column; gap: 8px; width: min(320px, calc(100vw - 24px)); max-height: min(320px, 48vh); overflow: hidden; z-index: 100; backdrop-filter: blur(16px); } .ss-emoji-popover[hidden] { display: none !important; } .ss-emoji-tabs { display: flex; gap: 6px; flex-shrink: 0; } .ss-emoji-tab { flex: 1; border: 1px solid var(--ss-border); background: transparent; color: var(--ss-text-muted); font-size: 0.75rem; font-weight: 700; padding: 6px 8px; border-radius: 999px; cursor: pointer; transition: background var(--ss-transition), color var(--ss-transition), border-color var(--ss-transition); } .ss-emoji-tab.is-active { color: var(--ss-text); border-color: var(--ss-accent, #2b7a78); background: rgba(43, 122, 120, 0.14); } .ss-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; overflow: auto; max-height: 180px; } .ss-emoji-grid[hidden], .ss-giphy-popover-panel[hidden] { display: none !important; } .ss-emoji-btn { background: transparent; border: none; color: var(--ss-text); font-size: 1.25rem; padding: 8px; cursor: pointer; border-radius: 8px; transition: background var(--ss-transition); } .ss-emoji-btn:hover { background: rgba(255, 255, 255, 0.08); } .ss-sticker-panel { max-height: 180px; overflow-y: auto; } .ss-sticker-panel[hidden] { display: none !important; } .ss-giphy-popover-panel { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow: hidden; } .ss-giphy-search { width: 100%; } .ss-giphy-panel { overflow-y: auto; max-height: 170px; } .ss-giphy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .ss-giphy-btn { border: none; background: rgba(255, 255, 255, 0.04); border-radius: 8px; padding: 0; overflow: hidden; cursor: pointer; aspect-ratio: 1; } .ss-giphy-btn img { width: 100%; height: 100%; object-fit: cover; display: block; } .ss-giphy-btn:hover { outline: 2px solid var(--ss-accent, #2b7a78); } .ss-sticker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .ss-sticker-btn { border: none; background: transparent; font-size: 1.35rem; padding: 6px; border-radius: 8px; cursor: pointer; } .ss-sticker-btn img { width: 36px; height: 36px; object-fit: contain; } .ss-sticker-btn:hover { background: rgba(255, 255, 255, 0.08); } /* —— Link preview —— */ .ss-link-preview { margin-top: 10px; border-radius: var(--ss-radius-sm); overflow: hidden; border: 1px solid var(--ss-border); background: rgba(255, 255, 255, 0.04); } .ss-link-preview-card { display: flex; text-decoration: none; color: inherit; gap: 12px; } .ss-link-preview-img { width: 88px; height: 66px; object-fit: cover; flex-shrink: 0; } .ss-link-preview-body { flex: 1; min-width: 0; padding: 10px 12px; } .ss-link-preview-title { font-weight: 600; font-size: 0.875rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-link-preview-desc { font-size: 0.8125rem; color: var(--ss-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ss-link-preview-loading { padding: 10px 12px; color: var(--ss-muted); font-size: 0.8125rem; } /* —— Modals —— */ /* * Portales fuera de #soulfulsync-web-chat-ui (modales → document.body). * Temas WP/BuddyPress suelen forzar padding, float o line-height en button/svg * y desalinean iconos y la X de cierre. Reset explícito en shell + portales. */ #soulfulsync-web-chat-ui :is(button, [type="button"], [type="submit"]).ss-btn, #soulfulsync-web-chat-ui :is(button, [type="button"]).ss-wa-rail-btn, #soulfulsync-web-chat-ui :is(button, [type="button"]).ss-wa-bottom-nav-btn, #soulfulsync-web-chat-ui :is(button, [type="button"]).ss-inbox-nav-action, #soulfulsync-web-chat-ui :is(button, [type="button"]).ss-composer-plus, #soulfulsync-web-chat-ui :is(button, [type="button"]).ss-composer-action, #soulfulsync-web-chat-ui :is(button, [type="button"]).ss-composer-pill-btn, #soulfulsync-web-chat-ui :is(button, [type="button"]).ss-composer-chart, #soulfulsync-web-chat-ui :is(button, [type="button"]).ss-conv-back, .ss-modal-backdrop :is(button, [type="button"]).ss-btn, .ss-modal-backdrop :is(button, [type="button"]).ss-thread-settings-close, .ss-account-page-shell :is(button, [type="button"]).ss-btn { appearance: none; -webkit-appearance: none; box-sizing: border-box; font-family: var(--ss-font); font-weight: 600; line-height: 1; letter-spacing: normal; text-transform: none; text-decoration: none; margin: 0; float: none; vertical-align: middle; } .ss-icon, #soulfulsync-web-chat-ui .ss-icon, .ss-modal-backdrop .ss-icon, .ss-account-page-shell .ss-icon, .ss-inbox-ctx .ss-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: currentColor; line-height: 0; vertical-align: middle; box-sizing: border-box; margin: 0; padding: 0; } .ss-icon svg, #soulfulsync-web-chat-ui .ss-icon svg, .ss-modal-backdrop .ss-icon svg, .ss-account-page-shell .ss-icon svg { display: block; flex-shrink: 0; overflow: visible; margin: 0; padding: 0; transform: none; transform-origin: center center; vertical-align: top; } #soulfulsync-web-chat-ui .ss-wa-rail-btn > .ss-icon, #soulfulsync-web-chat-ui .ss-wa-bottom-nav-btn > .ss-icon { width: 22px; height: 22px; min-width: 22px; min-height: 22px; } #soulfulsync-web-chat-ui .ss-wa-rail-btn > .ss-icon svg, #soulfulsync-web-chat-ui .ss-wa-bottom-nav-btn > .ss-icon svg { width: 22px; height: 22px; } .ss-modal-backdrop { position: fixed; inset: 0; background: var(--ss-overlay-scrim); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 999999; opacity: 0; pointer-events: none; transition: opacity 120ms ease-out; font-family: var(--ss-font); color: var(--ss-text); line-height: 1.45; } @media (max-width: 900px) { .ss-modal-backdrop { backdrop-filter: blur(6px); } } /* Llamada entrante: scrim + gradiente animado + botón con pulso */ /* Barra global: llamada entrante aunque no estés dentro del hilo */ .ss-incoming-call-global-bar { position: relative; z-index: 1000001; flex-shrink: 0; padding: 10px 12px 8px; background: linear-gradient(90deg, rgba(88, 28, 135, 0.95), rgba(30, 58, 138, 0.92)); border-bottom: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); } .ss-incoming-call-global-bar-inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ss-incoming-call-global-bar-pulse { width: 10px; height: 10px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); animation: ss-incoming-global-pulse 1.2s ease-in-out infinite; flex-shrink: 0; } @keyframes ss-incoming-global-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); } 50% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } } /* 2ª entrante mientras hay llamada activa (cola wait_queue). */ .ss-waiting-incoming-call-banner { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 100080; width: min(440px, calc(100vw - 24px)); pointer-events: auto; } .ss-waiting-incoming-call-banner__inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, rgba(76, 29, 149, 0.96), rgba(30, 58, 138, 0.94)); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32); color: #fff; } .ss-waiting-incoming-call-banner__text { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ss-waiting-incoming-call-banner__text strong { font-size: 0.95rem; font-weight: 700; } .ss-waiting-incoming-call-banner__text span { font-size: 0.8rem; opacity: 0.88; } .ss-waiting-incoming-call-banner__actions { display: flex; gap: 8px; flex-shrink: 0; } .ss-waiting-incoming-call-banner__actions .ss-btn.ghost { color: rgba(255, 255, 255, 0.88); border-color: rgba(255, 255, 255, 0.28); } .ss-incoming-call-global-bar-text { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 2px; color: #fff; font-size: 0.875rem; } .ss-incoming-call-global-bar-text strong { font-weight: 700; font-size: 0.95rem; } .ss-incoming-call-global-bar-text span { opacity: 0.88; font-size: 0.78rem; } .ss-incoming-call-global-bar .ss-btn.ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); } .ss-call-incoming-backdrop { background: linear-gradient(135deg, rgba(12, 10, 24, 0.82), rgba(60, 30, 90, 0.55)); animation: ss-call-incoming-bg 3.2s ease-in-out infinite alternate; } @keyframes ss-call-incoming-bg { 0% { filter: brightness(1); } 100% { filter: brightness(1.14); } } .ss-call-incoming-modal { box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); width: min(340px, 92vw); padding: 28px 22px 22px; text-align: center; animation: ss-call-incoming-modal-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes ss-call-incoming-modal-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .ss-call-incoming-modal--premium { background: linear-gradient(165deg, rgba(28, 24, 48, 0.96), rgba(12, 14, 22, 0.98)); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 22px; } .ss-call-incoming-badge { display: inline-flex; align-items: center; justify-content: center; padding: 5px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #e9d5ff; background: rgba(123, 97, 255, 0.28); border: 1px solid rgba(167, 139, 250, 0.45); animation: ss-call-incoming-badge-pulse 1.4s ease-in-out infinite; } @keyframes ss-call-incoming-badge-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.35); } 50% { opacity: 0.92; box-shadow: 0 0 0 8px rgba(167, 139, 250, 0); } } .ss-call-incoming-avatar-wrap { position: relative; display: flex; align-items: center; justify-content: center; } .ss-call-incoming-ring-pulse { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(18, 184, 215, 0.45); animation: ss-call-incoming-ring 1.55s ease-out infinite; pointer-events: none; } .ss-call-incoming-ring-pulse:nth-child(2) { animation-delay: 0.45s; border-color: rgba(123, 97, 255, 0.4); } @keyframes ss-call-incoming-ring { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.32); opacity: 0; } } .ss-call-incoming-status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.88); } .ss-call-incoming-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px rgba(74, 222, 128, 0.65); animation: ss-call-incoming-dot 1s ease-in-out infinite; } @keyframes ss-call-incoming-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } } .ss-call-incoming-participants { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; } .ss-call-incoming-participants__avatars { display: flex; align-items: center; justify-content: center; gap: 6px; } .ss-call-incoming-participants__avatar .ss-avatar { width: 40px; height: 40px; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 50%; } .ss-call-incoming-participants__label { font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.82); } .ss-call-incoming-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; } .ss-call-incoming-modal--premium .ss-call-incoming-avatar { width: 104px; height: 104px; font-size: 2.25rem; } .ss-call-incoming-avatar { width: 88px; height: 88px; border-radius: 50%; background: var(--ss-gradient-brand); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 2rem; color: #fff; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } .ss-call-incoming-avatar .ss-avatar-img { width: 100%; height: 100%; object-fit: cover; } .ss-call-incoming-name { font-size: 1.25rem; font-weight: 700; color: var(--ss-text, #f4f4f5); line-height: 1.25; word-break: break-word; } .ss-call-incoming-thread { font-size: 0.9375rem; font-weight: 600; color: var(--ss-soft-accent, var(--ss-brand)); margin-top: 4px; } .ss-call-incoming-timeout { font-size: 0.75rem; color: var(--ss-muted, rgba(255, 255, 255, 0.55)); margin-top: 6px; } .ss-call-incoming-type { font-size: 0.9rem; color: var(--ss-muted, rgba(255, 255, 255, 0.65)); font-weight: 500; } .ss-call-incoming-actions { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 40px; margin-bottom: 16px; } .ss-call-incoming-action-col { display: flex; flex-direction: column; align-items: center; gap: 10px; } .ss-call-incoming-action-label { font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); } .ss-call-incoming-circle { width: 64px; height: 64px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } .ss-call-incoming-circle:hover { transform: scale(1.06); } .ss-call-incoming-circle .ss-icon { color: #fff; display: flex; } .ss-call-incoming-circle .ss-icon svg { fill: currentColor; } .ss-call-incoming-circle .ss-icon svg * { fill: currentColor; stroke: currentColor; } .ss-call-incoming-circle .ss-icon svg [fill='none'] { fill: none; } .ss-call-incoming-circle--reject { background: linear-gradient(145deg, #ef4444, #b91c1c); } .ss-call-incoming-circle--reject:hover { box-shadow: 0 8px 28px rgba(239, 68, 68, 0.45); } .ss-call-incoming-circle--accept { background: var(--ss-gradient-brand); } .ss-call-incoming-circle--accept:hover { box-shadow: 0 8px 28px rgba(123, 97, 255, 0.45); } .ss-call-incoming-hint { font-size: 0.75rem; line-height: 1.35; color: rgba(255, 255, 255, 0.5); max-width: 280px; margin: 0 auto; } .ss-call-accept-pulse { animation: ss-call-btn-pulse 1.1s ease-in-out infinite; } @keyframes ss-call-btn-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(123, 97, 255, 0.5); } 50% { transform: scale(1.07); box-shadow: 0 0 0 14px rgba(123, 97, 255, 0); } } @media (prefers-reduced-motion: reduce) { .ss-call-incoming-backdrop { animation: none; } .ss-call-accept-pulse { animation: none; } } /* Reacción: emoji central + partículas (burst) */ .ss-react-burst-host { position: fixed; inset: 0; z-index: 10000000; pointer-events: none; display: flex; align-items: center; justify-content: center; } .ss-react-burst-main { position: relative; z-index: 2; font-size: 3.25rem; line-height: 1; animation: ss-react-burst-main 0.62s ease-out forwards; } @keyframes ss-react-burst-main { 0% { opacity: 0; transform: translateY(14px) scale(0.55); } 32% { opacity: 1; transform: translateY(-6px) scale(1.06); } 100% { opacity: 0; transform: translateY(-40px) scale(0.88); } } .ss-react-burst-particle { position: absolute; left: 50%; top: 44%; z-index: 1; font-size: 1.2rem; line-height: 1; opacity: 0; animation: ss-react-part 0.58s ease-out forwards; } @keyframes ss-react-part { 0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.65); } 100% { opacity: 0; transform: translate(calc(-50% + var(--ss-dx, 0px)), calc(-50% + var(--ss-dy, -36px))) scale(0.28); } } @media (prefers-reduced-motion: reduce) { .ss-react-burst-main, .ss-react-burst-particle { animation: none !important; opacity: 0 !important; } } .ss-modal { width: 380px; max-width: 92vw; background: var(--ss-glass); backdrop-filter: blur(20px); border: 1px solid var(--ss-glass-border); border-radius: 20px; padding: 24px; box-shadow: var(--ss-shadow); opacity: 0; transform: translateY(6px) scale(0.985); transition: opacity 120ms ease-out, transform 120ms ease-out; } .ss-modal h3 { margin: 0 0 8px 0; font-size: 1.125rem; font-weight: 700; } .ss-modal p { margin: 0 0 18px 0; color: var(--ss-muted); font-size: 0.9375rem; } .ss-modal-actions { display: flex; gap: 12px; justify-content: flex-end; } .ss-modal-wide { width: min(720px, 92vw); } .ss-media-gallery-backdrop { z-index: 1000002; } .ss-media-gallery { position: relative; width: min(980px, 96vw); height: min(86vh, 760px); background: rgba(11, 15, 24, 0.95); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(6px) scale(0.985); transition: opacity 120ms ease-out, transform 120ms ease-out; } .ss-modal-backdrop.ss-entered, .ss-account-page-shell.ss-entered { opacity: 1; pointer-events: auto; } .ss-modal-backdrop.ss-exiting { opacity: 0; pointer-events: none; } .ss-modal-backdrop.ss-exiting .ss-modal, .ss-modal-backdrop.ss-exiting .ss-media-gallery { opacity: 0; transform: translateY(6px) scale(0.985); } .ss-modal-backdrop.ss-entered .ss-modal, .ss-modal-backdrop.ss-entered .ss-media-gallery, .ss-modal-backdrop.ss-entered .ss-picker-sheet, .ss-account-page-shell.ss-entered .ss-account-page, .ss-media-gallery-backdrop.ss-entered .ss-media-gallery { opacity: 1; transform: translateY(0) scale(1); } @media (prefers-reduced-motion: reduce) { .ss-modal-backdrop, .ss-account-page-shell, .ss-modal, .ss-account-page, .ss-media-gallery { transition: none !important; } .ss-modal, .ss-account-page, .ss-media-gallery { opacity: 1; transform: none; } } .ss-media-gallery-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .ss-media-gallery-title { color: #f1f5f9; font-size: 0.92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-media-gallery-close { width: 34px; height: 34px; min-width: 34px; min-height: 34px; border-radius: 10px; font-size: 1.3rem; line-height: 1; padding: 0; } .ss-media-gallery-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px 56px; } .ss-media-gallery-image, .ss-media-gallery-video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; } .ss-media-gallery-audio { width: min(560px, 100%); } .ss-media-gallery-file-link { color: #93c5fd; text-decoration: none; font-weight: 600; } .ss-media-gallery-file-link:hover { text-decoration: underline; } .ss-media-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; min-width: 38px; min-height: 38px; border-radius: 999px; padding: 0; font-size: 1.4rem; line-height: 1; z-index: 2; } .ss-media-gallery-nav.prev { left: 10px; } .ss-media-gallery-nav.next { right: 10px; } .ss-media-gallery-counter { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 4px 9px; border-radius: 999px; font-size: 0.75rem; color: #dbeafe; background: rgba(15, 23, 42, 0.7); } @media (max-width: 640px) { .ss-media-gallery { width: 100vw; height: 100vh; border-radius: 0; } .ss-media-gallery-stage { padding: 12px 46px; } } .ss-create-group-modal { width: min(420px, 92vw); } /* Barra superior: hay sesión activa en este hilo (p. ej. otro dispositivo); unirse sin depender solo del socket. */ #soulfulsync-web-chat-ui .ss-conversation > .ss-active-call-join-bar { margin: 0; flex-shrink: 0; } #soulfulsync-web-chat-ui .ss-active-call-join-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap; padding: 8px 12px; margin: 0; border-bottom: 1px solid rgba(148, 163, 184, 0.22); background: linear-gradient(135deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.9)); color: #f1f5f9; font-size: 0.8125rem; line-height: 1.25; z-index: 50; position: relative; min-height: 52px; box-sizing: border-box; } #soulfulsync-web-chat-ui .ss-active-call-join-bar__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 8px; } #soulfulsync-web-chat-ui .ss-active-call-join-bar__copy { min-width: 0; } #soulfulsync-web-chat-ui .ss-active-call-join-bar__title { font-weight: 700; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #soulfulsync-web-chat-ui .ss-active-call-join-bar__sub { opacity: 0.82; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #soulfulsync-web-chat-ui .ss-active-call-join-bar__avatars { display: flex; align-items: center; min-height: 24px; flex-shrink: 0; } #soulfulsync-web-chat-ui .ss-active-call-join-bar__avatar { width: 24px; height: 24px; margin-right: -8px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(15, 23, 42, 0.95); } #soulfulsync-web-chat-ui .ss-active-call-join-bar__actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 auto; } #soulfulsync-web-chat-ui .ss-active-call-join-bar__text { flex: 1 1 200px; min-width: 0; } #soulfulsync-web-chat-ui .ss-active-call-join-bar__btn { flex: 0 0 auto; appearance: none; border: none; border-radius: 999px; padding: 6px 12px; font-size: 0.75rem; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #7c3aed, #5b21b6); color: #fafafa; box-shadow: 0 2px 12px rgba(91, 33, 182, 0.35); white-space: nowrap; } #soulfulsync-web-chat-ui .ss-active-call-join-bar__btn:hover { filter: brightness(1.06); } #soulfulsync-web-chat-ui .ss-active-call-join-bar__btn:focus-visible { outline: 2px solid rgba(167, 139, 250, 0.9); outline-offset: 2px; } #soulfulsync-web-chat-ui .ss-active-call-join-bar__btn--ghost { background: transparent; color: #e2e8f0; border: 1px solid rgba(148, 163, 184, 0.35); box-shadow: none; } #soulfulsync-web-chat-ui .ss-active-call-join-bar__btn--ghost:hover { background: rgba(148, 163, 184, 0.12); filter: none; } #soulfulsync-web-chat-ui .ss-thread-ongoing-call-badge { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #7c3aed, #5b21b6); border: 2px solid var(--ss-page-bg, #0f172a); box-shadow: 0 2px 8px rgba(91, 33, 182, 0.35); } #soulfulsync-web-chat-ui .ss-thread-ongoing-call-badge .ss-icon svg { width: 11px; height: 11px; color: #fff; } #soulfulsync-web-chat-ui .ss-thread-preview--ongoing-call { color: #a78bfa; font-weight: 600; } .ss-group-call-info-modal--preview .ss-group-call-info-sub { margin: 0 0 12px; opacity: 0.85; } .ss-group-call-info-modal--preview .ss-group-call-info-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } /* —— Call / video overlay (estilo WhatsApp / Messenger) —— */ /* Videollamada: estilo tipo Messenger/Facebook (vídeo a pantalla, PIP abajo-derecha) */ .ss-call-overlay--premium { background: radial-gradient(ellipse 110% 70% at 50% 0%, rgba(42, 36, 62, 0.95) 0%, var(--ss-feed-bg) 58%, #080610 100%); } .ss-call-header--glass { background: linear-gradient(180deg, rgba(8, 10, 18, 0.82) 0%, rgba(8, 10, 18, 0.35) 100%); border-bottom-color: rgba(255, 255, 255, 0.1); } .ss-call-header-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .ss-call-status-pill { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.08); } .ss-call-status-pill--connecting { color: #fde68a; border-color: rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.12); } .ss-call-status-pill--active { color: #bbf7d0; border-color: rgba(74, 222, 128, 0.45); background: rgba(74, 222, 128, 0.12); } .ss-call-status-pill--error { color: #fecaca; border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.12); } .ss-call-invited-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 0 16px 8px; } .ss-call-invited-label { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.72); } .ss-call-invited-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #eef2ff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); } /** Llamante: pill "Esperando respuesta…" con pulso (paridad modal entrante). */ .ss-call-status-pill--ringing-wait { color: #fde68a; border-color: rgba(251, 191, 36, 0.55); background: rgba(251, 191, 36, 0.16); animation: ss-call-outgoing-pill-pulse 1.35s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.35); } @keyframes ss-call-outgoing-pill-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.28); } 50% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(251, 191, 36, 0); } } .ss-call-controls--glass { background: linear-gradient(0deg, rgba(6, 8, 14, 0.94) 0%, rgba(6, 8, 14, 0.25) 100%); border-top: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .ss-call-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 1000500; background: #050608; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; pointer-events: auto; /* Aísla el tema del resto de la página (evita iconos “negros” en incógnito / auto-dark) */ color-scheme: dark; color: #f8fafc; forced-color-adjust: none; } /* Mientras hay llamada a pantalla completa, ocultar nav inferior del chat (no debe comerse los clics). */ body.ss-in-call #soulfulsync-web-chat-ui .ss-wa-bottom-nav, html.ss-in-call #soulfulsync-web-chat-ui .ss-wa-bottom-nav { visibility: hidden !important; pointer-events: none !important; } /* Aviso legal: alguien está grabando la llamada */ .ss-call-recording-banner { flex-shrink: 0; margin: 0 12px 8px; padding: 10px 12px; border-radius: 12px; background: rgba(220, 38, 38, 0.22); border: 1px solid rgba(248, 113, 113, 0.55); color: #fecaca; font-size: 0.875rem; font-weight: 700; line-height: 1.35; display: none; align-items: center; gap: 8px; box-sizing: border-box; z-index: 12; } .ss-call-recording-banner.is-visible { display: flex; } .ss-call-recording-banner__dot { width: 10px; height: 10px; border-radius: 50%; background: #f87171; flex-shrink: 0; box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.55); animation: ss-call-recording-pulse 1.4s ease-out infinite; } @keyframes ss-call-recording-pulse { 0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.45); } 100% { box-shadow: 0 0 0 10px rgba(248, 113, 113, 0); } } margin: 12px 16px 0; padding: 12px 14px; border-radius: 12px; background: rgba(220, 38, 38, 0.22); border: 1px solid rgba(248, 113, 113, 0.5); color: #fecaca; font-size: 0.875rem; line-height: 1.45; text-align: center; box-sizing: border-box; } /* Llamada solo voz: no es un “hueco de vídeo” negro; hero con avatar y anillos */ .ss-call-overlay--voice { background: radial-gradient(ellipse 120% 80% at 50% 35%, rgba(42, 36, 62, 0.92) 0%, var(--ss-feed-bg) 55%, #080610 100%); } /* Cabecera estilo app (voz): nombre centrado + cronómetro */ .ss-call-header--app { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; padding: 8px 8px 4px; border-bottom: none; background: transparent; } /* Vídeo: atrás | título | acciones (paridad cabecera app) */ .ss-call-header--glass:has(.ss-call-title-wrap--video) { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 8px; padding: 8px 12px 6px; } .ss-call-title-wrap--video { min-width: 0; flex: 1; } .ss-call-title-wrap--video .ss-call-peer-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Aviso TURN no configurado (paridad banner app) */ .ss-call-turn-banner { flex-shrink: 0; display: flex; align-items: flex-start; gap: 10px; margin: 0 12px 8px; padding: 10px 12px; border-radius: 12px; background: rgba(251, 191, 36, 0.14); border: 1px solid rgba(251, 191, 36, 0.35); color: #fde68a; } .ss-call-turn-banner__text { flex: 1; margin: 0; font-size: 0.8125rem; line-height: 1.4; } .ss-call-turn-banner__close { flex-shrink: 0; width: 32px; height: 32px; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.1); color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .ss-call-turn-banner__close:hover { background: rgba(255, 255, 255, 0.18); } /* Barra flotante «Volver a la llamada» al minimizar */ .ss-call-mini-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 12050; pointer-events: none; animation: ss-call-mini-in 0.22s ease; } @keyframes ss-call-mini-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .ss-call-mini-bar__inner { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(12, 14, 20, 0.92); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .ss-call-mini-bar__pulse { width: 10px; height: 10px; border-radius: 50%; background: #4ade80; flex-shrink: 0; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); animation: ss-call-mini-pulse 1.6s ease infinite; } @keyframes ss-call-mini-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } } .ss-call-mini-bar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ss-call-mini-bar__title { font-size: 0.875rem; font-weight: 700; color: #fff; } .ss-call-mini-bar__sub { font-size: 0.75rem; color: rgba(255, 255, 255, 0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-call-mini-bar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .ss-call-mini-bar__open { font-size: 0.8125rem; padding: 8px 12px; white-space: nowrap; } .ss-call-mini-bar__end { width: 40px; height: 40px; min-width: 40px; padding: 0; border-radius: 50%; background: #ef4444; color: #fff; display: inline-flex; align-items: center; justify-content: center; } .ss-call-mini-bar__end:hover { background: #dc2626; } /* Staff: estado señalización REST / socket durante llamada */ .ss-call-signaling-bar { flex-shrink: 0; margin: 0 12px 6px; padding: 6px 10px; border-radius: 8px; font-size: 0.6875rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; text-align: center; color: rgba(255, 255, 255, 0.85); background: rgba(18, 184, 215, 0.12); border: 1px solid rgba(18, 184, 215, 0.28); } @media (max-width: 420px) { .ss-call-mini-bar__open { padding: 8px 10px; font-size: 0.75rem; } } .ss-call-header-icon-btn { width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, transform 0.12s ease; } .ss-call-header-icon-btn:hover { background: rgba(255, 255, 255, 0.22); } .ss-call-header-center { min-width: 0; text-align: center; padding: 0 4px; } .ss-call-peer-name--center { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-call-timer-row { display: flex; justify-content: center; padding: 0 16px 8px; flex-shrink: 0; } .ss-call-timer-chip { padding: 6px 14px; border-radius: 22px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.12); font-variant-numeric: tabular-nums; } .ss-call-timer-chip .ss-call-duration { font-size: 0.9375rem; font-weight: 600; color: #fff; } .ss-call-voice-hero-name { font-size: clamp(1.35rem, 5vw, 1.75rem); font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1.2; max-width: 300px; } .ss-call-voice-hero-sub { font-size: 1.0625rem; font-weight: 500; } .ss-call-voice-hero-sub:not(:empty) { color: rgba(255, 255, 255, 0.78); } .ss-call-overlay--voice .ss-call-voice-hero-sub[data-ui="voice-call-status"] { min-height: 1.35em; } .ss-call-voice-hero-sub.is-active { color: #86efac; font-weight: 600; } .ss-call-voice-hero-sub.is-error { color: #fca5a5; } .ss-call-retry-wrap { margin-top: 8px; pointer-events: auto; } .ss-call-retry-wrap[hidden] { display: none !important; } .ss-call-retry-btn { border-radius: 999px; padding: 10px 18px; background: var(--ss-brand-soft); border: 1px solid var(--ss-brand-tab-border); color: #fff; font-weight: 600; } .ss-call-controls--dock { padding: 0 20px calc(16px + env(safe-area-inset-bottom, 0px)); background: transparent; border-top: none; } .ss-call-controls-dock-inner { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 10px; width: auto; max-width: min(100%, 440px); margin: 0 auto; padding: 12px 14px; border-radius: 36px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } .ss-call-controls--dock .ss-call-control-btn { width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; box-shadow: none; } .ss-call-controls--dock .ss-call-control-btn:hover { background: rgba(255, 255, 255, 0.12); } .ss-call-controls--dock .ss-call-control-btn.mute, .ss-call-controls--dock .ss-call-control-btn.speaker, .ss-call-controls--dock .ss-call-control-btn.screen, .ss-call-controls--dock .ss-call-control-btn.flip, .ss-call-controls--dock .ss-call-control-btn.cam-on, .ss-call-controls--dock .ss-call-control-btn.camera, .ss-call-controls--dock .ss-call-control-btn.record { background: transparent; } .ss-call-controls--dock .ss-call-control-btn.active { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.28); } .ss-call-controls--dock .ss-call-control-btn.end { width: 52px; height: 52px; background: #d86b6b; border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .ss-call-overlay--voice .ss-call-video-wrap { background: transparent; padding: 0 16px 8px; } .ss-call-overlay--voice .ss-call-placeholder { position: relative; inset: auto; flex: 1; min-height: 0; } .ss-call-video-wrap--voice { background: transparent; } .ss-call-voice-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; position: relative; padding: 24px 16px; } .ss-call-voice-avatar-wrap { position: relative; display: flex; align-items: center; justify-content: center; } .ss-call-voice-hero-avatar { width: min(168px, 42vw); height: min(168px, 42vw); border-radius: 50%; background: var(--ss-gradient-brand); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: clamp(2rem, 8vw, 3rem); color: #fff; overflow: hidden; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 24px 48px rgba(0, 0, 0, 0.45); flex-shrink: 0; } .ss-call-voice-hero-avatar .ss-avatar-img { width: 100%; height: 100%; object-fit: cover; } .ss-call-voice-hero-sub { font-size: 1rem; font-weight: 500; color: rgba(255, 255, 255, 0.88); max-width: 280px; line-height: 1.35; } .ss-call-voice-rings { position: absolute; top: 50%; left: 50%; width: calc(100% + 28px); height: calc(100% + 28px); margin: 0; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(18, 184, 215, 0.28); pointer-events: none; animation: ss-call-voice-pulse 2.4s ease-out infinite; box-sizing: border-box; } .ss-call-voice-rings::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.1); animation: ss-call-voice-pulse 2.4s ease-out infinite 0.6s; box-sizing: border-box; } @keyframes ss-call-voice-pulse { 0% { opacity: 0.5; } 100% { opacity: 0; } } /* Reproduce audio remoto sin mostrar panel negro */ .ss-call-remote-video.ss-call-remote-video--audio-mode { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; border: 0 !important; } .ss-call-header { flex-shrink: 0; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ss-call-title-wrap { display: flex; align-items: center; gap: 12px; } .ss-call-peer-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ss-avatar-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: #fff; flex-shrink: 0; overflow: hidden; } .ss-call-peer-avatar .ss-avatar-img { width: 100%; height: 100%; object-fit: cover; } .ss-call-peer-name { font-weight: 600; font-size: 1.125rem; color: #fff; } .ss-call-type-label { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); margin-top: 2px; } .ss-call-duration { font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); } .ss-call-video-wrap { flex: 1; position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0; background: #000; } .ss-call-overlay--voice .ss-call-video-wrap { padding: 16px; } /* Cuando compartes pantalla: tu pantalla a tamaño completo, remoto en PIP */ .ss-call-video-wrap--sharing .ss-call-local-screen-wrap { position: absolute; inset: 0; z-index: 1; display: block; padding: 16px; } .ss-call-video-wrap--sharing .ss-call-local-screen-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 16px; } .ss-call-video-wrap--sharing .ss-call-remote-video { position: absolute; top: 16px; left: 16px; width: 160px; height: 120px; max-height: none; z-index: 2; border-radius: 12px; border: 2px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); object-fit: contain; } .ss-call-local-screen-wrap { display: none; } .ss-call-local-screen-wrap.active { display: block; } .ss-call-local-screen-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 16px; } .ss-call-remote-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center center; background: #000; border-radius: 0; } .ss-call-local-pip { position: absolute; top: auto; bottom: calc(108px + env(safe-area-inset-bottom, 0px)); right: 14px; z-index: 4; width: min(38vw, 196px); height: min(50vw, 262px); border-radius: 16px; overflow: hidden; background: #000; border: 2px solid rgba(255, 255, 255, 0.34); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.58); transition: border-color 0.14s ease, box-shadow 0.14s ease; } .ss-call-local-pip.is-speaking { border-color: #23a559 !important; border-width: 3px; box-shadow: 0 0 0 2px rgba(35, 165, 89, 0.55), 0 0 20px rgba(35, 165, 89, 0.45), 0 10px 32px rgba(0, 0, 0, 0.58); } .ss-call-video-wrap.is-remote-speaking .ss-call-remote-video { box-shadow: inset 0 0 0 3px #23a559; } .ss-call-voice-avatar-wrap.is-speaking .ss-call-voice-hero-avatar { box-shadow: 0 0 0 4px #23a559, 0 0 0 10px rgba(35, 165, 89, 0.28), 0 24px 48px rgba(0, 0, 0, 0.45); } .ss-call-voice-avatar-wrap.is-speaking .ss-call-voice-rings { opacity: 1; border-color: rgba(35, 165, 89, 0.55); } .ss-call-local-pip--draggable { touch-action: none; user-select: none; cursor: grab; } .ss-call-local-pip--draggable:active { cursor: grabbing; } .ss-call-peer-mute-badge { position: absolute; left: 12px; right: 12px; top: calc(72px + env(safe-area-inset-top, 0px)); z-index: 6; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.62); border: 1px solid rgba(255, 82, 82, 0.45); color: #fff; font-size: 0.8125rem; font-weight: 600; text-align: center; pointer-events: none; } .ss-call-peer-mute-badge[hidden] { display: none !important; } .ss-call-local-pip video { width: 100%; height: 100%; object-fit: cover; } .ss-call-placeholder { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: rgba(255, 255, 255, 0.6); font-size: 0.9375rem; } .ss-call-placeholder .ss-icon { width: 64px; height: 64px; opacity: 0.5; } .ss-call-controls { flex-shrink: 0; padding: 16px 12px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.2) 100%); pointer-events: auto; position: relative; z-index: 10; } .ss-call-control-btn { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease; pointer-events: auto; /* Base para todos los controles (speaker / screen / flip / cam-on no tenían reglas propias) */ background: rgba(255, 255, 255, 0.18); color: #f8fafc; -webkit-text-fill-color: #f8fafc; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } /* Refuerzo dentro del overlay (algunos navegadores heredan color del body y dejan currentColor oscuro) */ .ss-call-overlay .ss-call-control-btn { color: #f8fafc; -webkit-text-fill-color: #f8fafc; } .ss-call-control-btn .ss-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; color: inherit; } .ss-call-control-btn .ss-icon svg { display: block; width: 24px; height: 24px; fill: currentColor; color: inherit; } .ss-call-control-btn .ss-icon svg * { fill: currentColor; stroke: currentColor; } .ss-call-overlay .ss-call-control-btn .ss-icon svg * { fill: currentColor; stroke: currentColor; } /* Rutas con stroke-only del set de iconos */ .ss-call-control-btn .ss-icon svg [fill='none'] { fill: none; } .ss-call-overlay .ss-call-control-btn .ss-icon svg [fill='none'] { fill: none; } .ss-call-control-btn:hover { transform: scale(1.05); } .ss-call-control-icon-stack { position: relative; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .ss-call-control-icon-stack .ss-icon-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.16s ease, transform 0.16s ease; pointer-events: none; } .ss-call-control-btn .ss-icon, .ss-call-control-btn .ss-icon svg, .ss-call-control-btn .ss-icon svg * { pointer-events: none; } .ss-call-control-btn .ss-icon-active { opacity: 0; transform: scale(0.86); } .ss-call-control-btn.active .ss-icon-normal, .ss-call-control-btn.active .ss-icon-hover { opacity: 0; transform: scale(0.86); pointer-events: none; } .ss-call-control-btn.active .ss-icon-active { opacity: 1; transform: scale(1); } .ss-call-control-btn:not(.active) .ss-icon-hover { opacity: 0; transform: scale(0.94); } .ss-call-control-btn:not(.active):hover .ss-icon-normal { opacity: 0; } .ss-call-control-btn:not(.active):hover .ss-icon-hover { opacity: 1; transform: scale(1.08); } .ss-call-control-btn:not(.active):hover { background: rgba(255, 255, 255, 0.32); border-color: rgba(255, 255, 255, 0.38); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42); } .ss-call-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .ss-call-header-icon-btn[title='Invitar']:hover, .ss-call-header-icon-btn[aria-label='Invitar a la llamada']:hover { background: rgba(124, 108, 255, 0.28); border-color: rgba(167, 139, 250, 0.45); } .ss-call-control-btn.mute { background: rgba(255, 255, 255, 0.24); } .ss-call-control-btn.mute.active { background: var(--ss-danger); border-color: rgba(255, 255, 255, 0.35); } .ss-call-control-btn.speaker { background: rgba(255, 255, 255, 0.24); } .ss-call-control-btn.speaker.active { background: rgba(59, 130, 246, 0.55); border-color: rgba(147, 197, 253, 0.5); } .ss-call-control-btn.screen { background: rgba(255, 255, 255, 0.24); } .ss-call-control-btn.screen.active { background: rgba(34, 197, 94, 0.45); border-color: rgba(134, 239, 172, 0.45); } .ss-call-control-btn.flip, .ss-call-control-btn.cam-on { background: rgba(255, 255, 255, 0.24); } .ss-call-control-btn.cam-on.active { background: rgba(168, 85, 247, 0.45); border-color: rgba(216, 180, 254, 0.45); } .ss-call-control-btn.camera { background: rgba(255, 255, 255, 0.24); } .ss-call-control-btn.camera.active { background: rgba(255, 255, 255, 0.35); } .ss-call-control-btn.end { width: 66px; height: 66px; background: rgba(239, 68, 68, 0.95); border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 6px 22px rgba(220, 38, 38, 0.45); position: relative; z-index: 20; touch-action: manipulation; } .ss-call-control-btn.end:hover { background: #dc2626; } .ss-call-control-btn.end.ss-call-control-btn--ending { opacity: 0.72; pointer-events: none; transform: scale(0.94); transition: opacity 0.12s ease, transform 0.12s ease; } .ss-call-control-btn.record.ss-call-control-btn--recording, .ss-call-control-btn.record.is-active { background: rgba(220, 38, 38, 0.92); color: #fff; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35); animation: ss-call-rec-pulse 1.2s ease-in-out infinite; } @keyframes ss-call-rec-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } .ss-call-recordings-modal { padding: 0 !important; overflow: hidden; width: min(560px, 94vw) !important; } .ss-call-recordings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid color-mix(in srgb, var(--ss-border) 70%, transparent); background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--ss-brand) 22%, transparent), transparent 55%), color-mix(in srgb, var(--ss-glass) 88%, transparent); } .ss-call-recordings-header__lead { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .ss-call-recordings-header__glyph { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; color: var(--ss-brand); background: color-mix(in srgb, var(--ss-brand) 18%, transparent); border: 1px solid color-mix(in srgb, var(--ss-brand) 28%, transparent); } .ss-call-recordings-header__text { min-width: 0; } .ss-call-recordings-header__text h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: var(--ss-text); } .ss-call-recordings-header__text p { margin: 0; font-size: 0.8125rem; line-height: 1.35; color: var(--ss-muted); } .ss-call-recordings-close { margin-top: 2px; } .ss-call-recordings-modal .ss-call-recordings-list { max-height: min(58vh, 460px); overflow: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; } .ss-call-recordings-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 36px 16px; color: var(--ss-muted); font-size: 0.875rem; } .ss-call-recordings-loading .ss-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ss-brand) 25%, transparent); border-top-color: var(--ss-brand); animation: ss-call-rec-spin 0.7s linear infinite; } @keyframes ss-call-rec-spin { to { transform: rotate(360deg); } } .ss-call-recordings-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px 36px; } .ss-call-recordings-empty__icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: var(--ss-brand); background: color-mix(in srgb, var(--ss-brand) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ss-brand) 22%, transparent); margin-bottom: 4px; } .ss-call-recordings-empty__title { margin: 0; font-weight: 650; color: var(--ss-text); font-size: 0.95rem; } .ss-call-recordings-empty__hint { margin: 0; max-width: 32ch; color: var(--ss-muted); font-size: 0.8125rem; line-height: 1.4; } .ss-call-recording-row { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ss-border) 65%, transparent); background: color-mix(in srgb, var(--ss-surface, var(--ss-glass)) 70%, transparent); transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, opacity 0.18s ease; } .ss-call-recording-row:hover { background: var(--ss-tab-hover-bg, color-mix(in srgb, var(--ss-brand) 10%, transparent)); border-color: color-mix(in srgb, var(--ss-brand) 28%, var(--ss-border)); } .ss-call-recording-row--highlight { border-color: color-mix(in srgb, var(--ss-brand) 55%, transparent); background: color-mix(in srgb, var(--ss-brand) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ss-brand) 25%, transparent); } .ss-call-recording-row.is-removing { opacity: 0; transform: translateX(8px) scale(0.98); } .ss-call-recording-row__avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; background: linear-gradient( 145deg, color-mix(in srgb, var(--ss-brand) 92%, #fff), color-mix(in srgb, var(--ss-brand) 55%, #1a1028) ); box-shadow: 0 6px 16px color-mix(in srgb, var(--ss-brand) 28%, transparent); } .ss-call-recording-row__body { flex: 1; min-width: 0; } .ss-call-recording-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .ss-call-recording-row__title { font-size: 0.9rem; font-weight: 650; color: var(--ss-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-call-recording-row__time { flex-shrink: 0; font-size: 0.6875rem; color: var(--ss-muted); } .ss-call-recording-row__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .ss-call-recording-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; color: var(--ss-muted); background: color-mix(in srgb, var(--ss-border) 35%, transparent); } .ss-call-recording-chip--source svg { width: 12px; height: 12px; } .ss-call-recording-chip--source.is-cloud, .ss-call-recording-chip--source.is-synced { color: color-mix(in srgb, var(--ss-brand) 85%, #fff); background: color-mix(in srgb, var(--ss-brand) 16%, transparent); } .ss-call-recording-chip--source.is-local { color: var(--ss-muted); } .ss-call-recording-actions { display: flex; gap: 4px; flex-shrink: 0; } .ss-call-recording-act { width: 36px; height: 36px; border: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: transparent; color: var(--ss-brand); transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease; } .ss-call-recording-act:hover { background: color-mix(in srgb, var(--ss-brand) 16%, transparent); } .ss-call-recording-act--delete { color: var(--ss-danger, #f87171); } .ss-call-recording-act--delete:hover { background: color-mix(in srgb, var(--ss-danger, #f87171) 16%, transparent); } .ss-call-recording-act.is-busy { opacity: 0.55; pointer-events: none; } body > [data-ui='ss-call-recordings-modal'].ss-modal-backdrop { z-index: 1000005; } @media (max-width: 520px) { .ss-call-recording-row { flex-wrap: wrap; } .ss-call-recording-actions { width: 100%; justify-content: flex-end; padding-top: 2px; } } /* —— Friends (estilo Messenger / WhatsApp) —— */ .ss-friends-subtabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 2px 0 12px 0; box-sizing: border-box; } .ss-subtab { border-radius: var(--ss-radius-pill); border: 1px solid var(--ss-border); background: rgba(255, 255, 255, 0.06); color: var(--ss-muted); min-height: 42px; padding: 10px 14px; font-size: 0.875rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--ss-transition), color var(--ss-transition), border-color var(--ss-transition), box-shadow var(--ss-transition); } .ss-subtab.active { color: var(--ss-text); border-color: rgba(123, 97, 255, 0.4); background: var(--ss-brand-soft); box-shadow: 0 0 0 1px rgba(123, 97, 255, 0.2); } .ss-subtab:disabled { opacity: 0.45; cursor: not-allowed; } .ss-friends-search-wrap { position: relative; margin: 0 10px 12px; flex-shrink: 0; } .ss-friends-search-wrap .ss-search, .ss-friends-search-wrap .ss-friends-search-input { width: 100%; min-height: 44px; margin: 0; border-radius: var(--ss-radius-pill); padding: 11px 14px 11px 42px; font-size: 0.9375rem; background: rgba(255, 255, 255, 0.03); } .ss-friends-search-wrap .ss-search::-webkit-search-decoration, .ss-friends-search-wrap .ss-search::-webkit-search-cancel-button, .ss-friends-search-wrap .ss-friends-search-input::-webkit-search-decoration, .ss-friends-search-wrap .ss-friends-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } #soulfulsync-web-chat-ui .ss-friends-search-wrap .ss-icon { left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ss-muted); pointer-events: none; display: flex; align-items: center; justify-content: center; line-height: 0; } #soulfulsync-web-chat-ui .ss-friends-search-wrap .ss-icon svg { width: 18px; height: 18px; display: block; flex-shrink: 0; stroke: currentColor; fill: none; } #soulfulsync-web-chat-ui.ss-compact .ss-friends-search-wrap .ss-search, #soulfulsync-web-chat-ui.ss-compact .ss-friends-search-wrap .ss-friends-search-input { min-height: 40px; padding: 8px 12px 8px 38px; font-size: 0.875rem; } #soulfulsync-web-chat-ui.ss-compact .ss-friends-search-wrap .ss-icon { left: 12px; } @media (max-width: 560px) { .ss-friends-subtabs { gap: 8px; padding-bottom: 10px; } .ss-subtab { min-height: 40px; padding: 9px 10px; font-size: 0.84rem; } } .ss-friend-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 4px 2px; border-radius: 12px; border: none; background: transparent; cursor: pointer; transition: background var(--ss-transition); } .ss-friend-row:hover, .ss-friend-row:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; } .ss-friend-avatar-wrap { position: relative; flex-shrink: 0; } .ss-friend-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--ss-avatar-gradient); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; border: 2px solid var(--ss-glass-border); overflow: hidden; } .ss-friend-avatar .ss-avatar-img { width: 100%; height: 100%; object-fit: cover; } .ss-friend-online { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ss-success); border: 2px solid var(--ss-bg-card, var(--ss-surface, #1a1625)); z-index: 2; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ss-success) 35%, transparent); } .ss-friend-meta { flex: 1; min-width: 0; } .ss-friend-name { font-weight: 600; font-size: 0.9375rem; color: var(--ss-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-friend-hint { font-size: 0.8125rem; color: var(--ss-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-friend-hint--online { color: var(--ss-success); font-weight: 600; } .ss-friend-more { flex-shrink: 0; width: 36px; height: 36px; border: none; border-radius: 50%; background: transparent; color: var(--ss-muted); cursor: pointer; display: grid; place-items: center; transition: background 0.15s ease, color 0.15s ease; } .ss-friend-more:hover, .ss-friend-more:focus-visible { background: color-mix(in srgb, var(--ss-brand) 16%, transparent); color: var(--ss-text); outline: none; } /* Legacy action stack (por si queda en caché) */ .ss-friend-row-actions { display: none !important; } .ss-friend-action { display: none !important; } .ss-friend-profile__remove-friend { width: 100%; max-width: 320px; margin: 12px auto 0; min-height: 42px; color: var(--ss-danger, #f87171); border: 1px solid color-mix(in srgb, var(--ss-danger, #e74c3c) 35%, transparent); background: color-mix(in srgb, var(--ss-danger, #e74c3c) 10%, transparent); } .ss-friend-profile__remove-friend:hover { background: color-mix(in srgb, var(--ss-danger, #e74c3c) 18%, transparent); } .ss-section-label { margin: 16px 0 8px 0; color: var(--ss-muted); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; } .ss-request-row.ss-thread { padding-right: 12px; } .ss-request-actions { display: flex; gap: 8px; align-items: center; } .ss-request-row .ss-avatar { border-radius: 50%; } .ss-request-row .ss-btn.primary, .ss-request-row .ss-btn.danger { padding: 8px 14px; font-size: 0.8125rem; } .ss-friends-requests-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--ss-radius-pill); background: var(--ss-brand); color: #fff; font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; } .ss-tab-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--ss-radius-pill); background: var(--ss-brand); color: #fff; font-size: 0.6875rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; vertical-align: middle; } /* —— Load older —— */ .ss-load-older { align-self: flex-start; margin-bottom: 12px; } .ss-history-loading-banner { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 12px 12px; padding: 10px 14px; border-radius: 12px; font-size: 0.875rem; font-weight: 600; color: var(--ss-muted); background: color-mix(in srgb, var(--ss-surface-elevated, #1e1e2e) 88%, transparent); border: 1px solid color-mix(in srgb, var(--ss-border, #333) 70%, transparent); } .ss-history-loading-banner__spinner { width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--ss-muted) 35%, transparent); border-top-color: var(--ss-accent); border-radius: 50%; animation: ss-history-spin 0.75s linear infinite; flex-shrink: 0; } @keyframes ss-history-spin { to { transform: rotate(360deg); } } /* —— Empty / loading / error states —— */ .ss-loading-msg, .ss-empty-msg { color: var(--ss-muted); font-size: 0.9375rem; padding: 1rem; text-align: center; } .ss-empty-threads { display: flex; flex-direction: column; gap: 10px; max-width: 280px; margin: 0 auto; padding: 1.25rem 1rem; } .ss-empty-title { font-weight: 600; color: var(--ss-text); font-size: 1rem; } .ss-empty-hint { font-size: 0.875rem; line-height: 1.45; color: var(--ss-muted); } .ss-error-msg { color: rgba(255, 180, 180, 0.95); font-size: 0.9375rem; padding: 1rem; text-align: center; } .ss-error-wrap { padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .ss-error-wrap .ss-loading-msg { color: rgba(255, 180, 180, 0.95); } /* —— Attachments in messages (paridad app: 320×170; extremos/GIF sin recorte agresivo) —— */ .ss-attach-img-wrap { position: relative; display: block; width: 100%; max-width: min(100%, 320px); margin-top: 8px; border: none; padding: 0; background: rgba(0, 0, 0, 0.28); cursor: pointer; border-radius: 12px; overflow: hidden; } .ss-attach-img-wrap:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; } .ss-attach-img-wrap .ss-attach-img { display: block; width: 100%; height: 170px; max-height: min(200px, 38vh); margin-top: 0; object-fit: cover; object-position: center; } .ss-attach-img-wrap--wide, .ss-attach-img-wrap--tall, .ss-attach-img-wrap--gif { display: flex; align-items: center; justify-content: center; min-height: 120px; max-height: min(220px, 40vh); } .ss-attach-img-wrap--wide .ss-attach-img, .ss-attach-img-wrap--tall .ss-attach-img, .ss-attach-img-wrap--gif .ss-attach-img, .ss-attach-img-wrap--gif .ss-attach-gif-video { width: auto; max-width: 100%; height: auto; max-height: min(220px, 40vh); object-fit: contain; } .ss-attachment-preview.ss-attach-img-wrap--wide, .ss-attachment-preview.ss-attach-img-wrap--tall, .ss-attachment-preview.ss-attach-img-wrap--gif { max-height: min(170px, 32vh); } .ss-attach-img-fs { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(0, 0, 0, 0.45); color: #fff; pointer-events: none; } .ss-msg-text + .ss-attach-img-wrap, .ss-msg-text + .ss-msg-voice, .ss-msg-text + .ss-attach-video, .ss-msg-text + .ss-attach-link { margin-top: 8px; } .ss-attach-img, .ss-attach-video { display: block; width: 100%; max-width: min(100%, 320px); border-radius: 12px; border: 1px solid var(--ss-border); background: #000; } .ss-attach-video { height: auto; max-height: min(240px, 42vh); object-fit: contain; } .ss-attach-audio { width: 100%; max-width: 520px; } .ss-attach-link { display: inline-block; color: #A5B4FC; font-weight: 600; text-decoration: none; border: 1px solid rgba(165, 180, 252, 0.35); padding: 10px 14px; border-radius: var(--ss-radius-sm); font-size: 0.875rem; } .ss-attach-img-wrap--view-once { position: relative; overflow: hidden; min-height: 120px; min-width: 160px; } .ss-attach-img-wrap--view-once .ss-attach-img--blurred { filter: blur(22px); transform: scale(1.08); pointer-events: none; } .ss-view-once-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.45); z-index: 2; cursor: pointer; } .ss-view-once-label { font-size: 0.8125rem; font-weight: 600; color: var(--ss-text, #f8fafc); padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.2); } .ss-view-once-consumed { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ss-text-muted) 35%, var(--ss-border)); background: color-mix(in srgb, var(--ss-text-muted) 8%, var(--ss-bg-card)); color: var(--ss-text-muted); font-size: 0.8125rem; font-weight: 600; font-style: italic; } .ss-inbox-folder-tabs { display: flex; gap: 6px; padding: 8px 12px 4px; overflow-x: auto; scrollbar-width: none; } .ss-inbox-folder-tabs::-webkit-scrollbar { display: none; } .ss-inbox-folder-tab { flex: 0 0 auto; border: 1px solid var(--ss-border); background: var(--ss-tab-inactive-bg); color: var(--ss-muted); border-radius: 999px; padding: 6px 12px; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .ss-inbox-folder-tab.active { color: var(--ss-brand); border-color: color-mix(in srgb, var(--ss-brand) 42%, transparent); background: var(--ss-brand-soft); } .ss-view-once-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--ss-text-muted, #94a3b8); margin-left: 8px; white-space: nowrap; } .ss-qr-link-row { display: flex; gap: 8px; align-items: center; margin: 12px 0; } .ss-qr-slot { display: flex; justify-content: center; margin: 8px 0 4px; } .ss-qr-canvas-wrap { padding: 12px; border-radius: 16px; background: var(--ss-surface, #fff); border: 1px solid var(--ss-outline-variant, rgba(255, 255, 255, 0.12)); } .ss-qr-canvas-wrap img, .ss-qr-canvas-wrap canvas { display: block; } .ss-referrals-modal { max-width: 420px; } .ss-referrals-stats { display: flex; gap: 10px; justify-content: center; margin: 8px 0 12px; flex-wrap: wrap; } .ss-referrals-stat { padding: 8px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; background: rgba(124, 108, 255, 0.14); color: var(--ss-text, #f4f7fb); } .ss-referrals-foot { display: flex; gap: 8px; margin-top: 12px; } .ss-referrals-foot .ss-btn { flex: 1; } .ss-referrals-code { margin-top: 8px; text-align: center; } .ss-qr-link-input { flex: 1; min-width: 0; } .ss-folder-picker-list { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 16px; } /* —— Reactions —— */ .ss-msg-reaction-summary { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; } /* Píldoras de reacción ya aplicadas (estilo cercano a WhatsApp) */ .ss-reaction-chip { border-radius: 999px; border: 1px solid var(--ss-border); background: var(--ss-pill-surface); color: var(--ss-text); padding: 4px 10px; cursor: pointer; font-weight: 600; font-size: 0.8125rem; line-height: 1.25; transition: background var(--ss-transition), transform 0.12s ease, border-color var(--ss-transition); box-shadow: var(--ss-shadow-sm); } .ss-reaction-chip:hover { background: var(--ss-tab-hover-bg); transform: translateY(-1px); } .ss-reaction-chip.active { background: var(--ss-brand-soft); border-color: var(--ss-brand-tab-border); box-shadow: 0 0 0 1px var(--ss-brand-tab-ring); } /* Popover contextual: pulsación larga / clic (ver chat-client.js) */ .ss-msg--contextable { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer; } .ss-msg--contextable:active { opacity: 0.92; } @media (hover: hover) and (pointer: fine) { .ss-msg--contextable { cursor: context-menu; } } .ss-msg--contextable.ss-msg--longpress-hint { animation: ss-msg-longpress-pulse 0.35s ease; } @keyframes ss-msg-longpress-pulse { 0% { transform: scale(1); } 50% { transform: scale(0.98); } 100% { transform: scale(1); } } /* Menú contextual de mensaje — paridad app (barra reacciones + lista con iconos) */ /* Montado en document.body: temas WP/BuddyPress suelen forzar button[disabled] y bloquear clics. */ .ss-msg-context-backdrop { position: fixed; inset: 0; z-index: 500070; background: var(--ss-overlay-scrim); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: ss-msg-context-fade-in 0.18s ease; pointer-events: auto; touch-action: manipulation; } .ss-msg-context-backdrop[hidden] { display: none !important; } .ss-msg-context-popover { position: fixed; z-index: 500080; min-width: 0; max-width: min(360px, calc(100% - 16px)); padding: 0; margin: 0; border: none; background: transparent; pointer-events: auto; touch-action: manipulation; animation: ss-msg-context-pop-in 0.2s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center bottom; } .ss-msg-context-popover[hidden] { display: none !important; } .ss-msg-context-popover__inner { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: max-content; min-width: min(280px, calc(100vw - 24px)); max-width: min(360px, calc(100vw - 24px)); } .ss-msg-context-reactions { display: flex; justify-content: center; width: 100%; } .ss-msg-context-popover__emojis { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 6px; min-height: 48px; border-radius: 999px; background: var(--ss-glass); border: 1px solid var(--ss-glass-border); box-shadow: var(--ss-shadow); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .ss-msg-context-popover__emojis--disabled { opacity: 0.55; } .ss-msg-context-emoji { width: 38px; height: 38px; min-width: 38px; border: none; border-radius: 50%; background: transparent; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-size: 1.375rem; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform 0.15s ease, background 0.15s ease; } .ss-msg-context-emoji:hover { transform: scale(1.14); background: var(--ss-tab-hover-bg); } .ss-msg-context-emoji.active { background: var(--ss-brand-soft); box-shadow: 0 0 0 2px var(--ss-brand-tab-ring); } .ss-msg-context-panel { width: 100%; border-radius: 16px; background: var(--ss-glass); border: 1px solid var(--ss-glass-border); box-shadow: var(--ss-shadow); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow: hidden; } .ss-msg-context-panel__actions, .ss-msg-context-panel__footer { display: flex; flex-direction: column; } .ss-msg-context-panel__footer { border-top: 1px solid var(--ss-border); background: color-mix(in srgb, var(--ss-glass) 88%, var(--ss-pill-surface) 12%); } .ss-msg-context-action { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 10px 16px; border: none; border-radius: 0; background: transparent; color: var(--ss-text); font-family: var(--ss-font); font-size: 0.9375rem; font-weight: 500; text-align: left; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease; } .ss-msg-context-action + .ss-msg-context-action { border-top: 1px solid color-mix(in srgb, var(--ss-border) 65%, transparent); } .ss-msg-context-action:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--ss-tab-hover-bg); } .ss-msg-context-action:active:not(:disabled):not([aria-disabled="true"]) { background: var(--ss-pill-surface-strong); } .ss-msg-context-action__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: var(--ss-pill-surface); color: var(--ss-muted); } .ss-msg-context-action__label { flex: 1; min-width: 0; line-height: 1.25; } .ss-msg-context-action--danger .ss-msg-context-action__icon { background: var(--ss-danger-soft); color: var(--ss-danger); } .ss-msg-context-action--danger .ss-msg-context-action__label { color: var(--ss-danger); font-weight: 600; } .ss-msg-context-action--brand .ss-msg-context-action__icon { background: var(--ss-brand-soft); color: var(--ss-brand); } .ss-msg-context-action--disabled, .ss-msg-context-action:disabled, .ss-msg-context-action[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .ss-msg-context-popover .ss-msg-context-action:not(.ss-msg-context-action--disabled):not([aria-disabled="true"]) { opacity: 1 !important; pointer-events: auto !important; cursor: pointer !important; color: var(--ss-text) !important; } .ss-msg-context-hint { margin: 0; padding: 6px 16px 12px; font-size: 0.75rem; line-height: 1.35; color: var(--ss-muted); text-align: center; } @keyframes ss-msg-context-pop-in { from { opacity: 0; transform: translateY(8px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes ss-msg-context-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Compatibilidad con rutas que aún usan clases antiguas */ .ss-msg-context-reply, .ss-msg-context-delete, .ss-msg-context-edit { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 10px 16px; border: none; border-radius: 0; background: transparent; color: var(--ss-text); font-size: 0.9375rem; font-weight: 500; text-align: left; cursor: pointer; margin-top: 0; align-self: stretch; } .ss-msg-context-voice { font-weight: 600; } .ss-thread-settings-actions { display: flex; flex-direction: column; gap: 12px; } /* Modal “opciones de chat”: cabecera fija + cuerpo con scroll suave (no barra del sistema en todo el panel). */ .ss-thread-settings-sheet { width: min(400px, 94vw); max-height: min(88vh, 640px); overflow: hidden; padding: 0; display: flex; flex-direction: column; box-sizing: border-box; } .ss-thread-settings-head { display: flex; flex-direction: row; align-items: flex-start; gap: 14px; width: 100%; box-sizing: border-box; margin-bottom: 0; position: relative; padding: 20px 56px 12px 20px; flex-shrink: 0; } .ss-thread-settings-avatar { width: 52px; height: 52px; min-width: 52px; min-height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--ss-border); line-height: 1; } .ss-thread-settings-avatar .ss-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Circle preset art must not expand the flex header avatar to full row width. */ .ss-thread-settings-avatar.ss-circle-preset-art, .ss-thread-settings-avatar.ss-avatar--circle-space { width: 52px; height: 52px; min-width: 52px; min-height: 52px; max-width: 52px; flex: 0 0 52px; } .ss-thread-settings-head-text { flex: 1 1 0; min-width: 0; overflow: hidden; } .ss-thread-settings-head-text h3 { margin: 0 0 4px 0; font-size: 1.125rem; font-weight: 700; line-height: 1.25; overflow-wrap: break-word; word-break: normal; } .ss-thread-settings-sub, p.ss-thread-settings-sub { margin: 0; font-size: 0.8125rem; color: var(--ss-muted); line-height: 1.4; } .ss-thread-settings-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: var(--ss-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; margin: 0; line-height: 0; box-sizing: border-box; flex-shrink: 0; transition: background var(--ss-transition); } .ss-thread-settings-close:hover { background: rgba(255, 255, 255, 0.12); } .ss-thread-settings-close .ss-icon { width: 20px; height: 20px; min-width: 20px; min-height: 20px; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; } .ss-thread-settings-close .ss-icon svg { width: 20px; height: 20px; display: block; margin: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ss-thread-settings-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 24px; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; } .ss-thread-settings-body::-webkit-scrollbar { width: 8px; } .ss-thread-settings-body::-webkit-scrollbar-track { background: transparent; } .ss-thread-settings-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } .ss-thread-settings-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); border: 2px solid transparent; background-clip: padding-box; } .ss-thread-settings-body .ss-section-label { margin-top: 14px; margin-bottom: 4px; } .ss-thread-settings-body .ss-section-label:first-child { margin-top: 4px; } .ss-settings-row.ss-btn { width: 100%; box-sizing: border-box; display: flex; flex-direction: row; justify-content: flex-start; text-align: left; padding: 10px 12px; border-radius: 12px; gap: 10px; align-items: center; } /* Iconos del modal: el .ss-btn global usa 18×18; forzamos caja 40×40 centrada (también fuera de #soulfulsync-web-chat-ui). */ .ss-modal-backdrop[data-ui="thread-settings-backdrop"] .ss-thread-settings-body .ss-settings-row.ss-btn > .ss-icon, .ss-account-page-shell[data-ui="account-settings-page"] .ss-thread-settings-body .ss-settings-row.ss-btn > .ss-icon, .ss-thread-settings-body .ss-settings-row.ss-btn > .ss-icon { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; flex-shrink: 0; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px; background: rgba(255, 255, 255, 0.08); box-sizing: border-box; padding: 0 !important; margin: 0; /* Fuera de #soulfulsync-web-chat-ui los path SVG quedan en negro por defecto */ color: var(--ss-text); } .ss-modal-backdrop[data-ui="thread-settings-backdrop"] .ss-thread-settings-body .ss-settings-row.ss-btn.danger > .ss-icon, .ss-thread-settings-body .ss-settings-row.ss-btn.danger > .ss-icon { background: rgba(239, 68, 68, 0.18); color: rgba(254, 202, 202, 0.95); } .ss-modal-backdrop[data-ui="thread-settings-backdrop"] .ss-thread-settings-body .ss-settings-row.ss-btn.primary > .ss-icon, .ss-thread-settings-body .ss-settings-row.ss-btn.primary > .ss-icon { background: rgba(123, 97, 255, 0.2); color: var(--ss-brand); } .ss-modal-backdrop[data-ui="thread-settings-backdrop"] .ss-thread-settings-body .ss-settings-row.ss-btn > .ss-icon svg, .ss-account-page-shell[data-ui="account-settings-page"] .ss-thread-settings-body .ss-settings-row.ss-btn > .ss-icon svg, .ss-thread-settings-body .ss-settings-row.ss-btn > .ss-icon svg { width: 20px !important; height: 20px !important; display: block; flex-shrink: 0; margin: auto; color: inherit; } /* Relleno: path/circle suelen ser siluetas Material-style */ .ss-modal-backdrop[data-ui="thread-settings-backdrop"] .ss-thread-settings-body .ss-settings-row.ss-btn > .ss-icon svg :is(path, circle):not([fill="none"]), .ss-account-page-shell[data-ui="account-settings-page"] .ss-thread-settings-body .ss-settings-row.ss-btn > .ss-icon svg :is(path, circle):not([fill="none"]), .ss-thread-settings-body .ss-settings-row.ss-btn > .ss-icon svg :is(path, circle):not([fill="none"]) { fill: currentColor; stroke: none; } /* Líneas y polilíneas (p. ej. salir del grupo) */ .ss-modal-backdrop[data-ui="thread-settings-backdrop"] .ss-thread-settings-body .ss-settings-row.ss-btn > .ss-icon svg :is(line, polyline), .ss-account-page-shell[data-ui="account-settings-page"] .ss-thread-settings-body .ss-settings-row.ss-btn > .ss-icon svg :is(line, polyline), .ss-thread-settings-body .ss-settings-row.ss-btn > .ss-icon svg :is(line, polyline) { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Trazos explícitos en path (plus, chart) */ .ss-modal-backdrop[data-ui="thread-settings-backdrop"] .ss-thread-settings-body .ss-settings-row.ss-btn > .ss-icon svg [fill="none"], .ss-account-page-shell[data-ui="account-settings-page"] .ss-thread-settings-body .ss-settings-row.ss-btn > .ss-icon svg [fill="none"], .ss-thread-settings-body .ss-settings-row.ss-btn > .ss-icon svg [fill="none"] { fill: none !important; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ss-settings-row-icon { opacity: 0.95; } .ss-settings-row-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; flex: 1; } .ss-settings-row-title { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; } .ss-settings-row-sub { font-size: 0.8125rem; font-weight: 500; color: var(--ss-muted); line-height: 1.35; } /* —— Iconos: centrado óptico (SVG inline + 100% rompía el eje en flex) —— */ #soulfulsync-web-chat-ui .ss-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: currentColor; line-height: 0; vertical-align: middle; box-sizing: border-box; } #soulfulsync-web-chat-ui .ss-icon svg { display: block; flex-shrink: 0; overflow: visible; vertical-align: top; /* Tamaño por atributos width/height del SVG o reglas más específicas arriba */ stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* —— Responsive móvil / tablet (≤1023px): lista ↔ conversación a pantalla completa —— * Clases ss-mobile-layout / ss-mobile-conversation las pone chat-client.js (matchMedia igual). */ #soulfulsync-web-chat-ui.ss-mobile-layout { max-width: none; width: 100%; margin: 0; height: 100dvh; max-height: 100dvh; min-height: 100dvh; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-chat-sidebar { width: 100%; min-width: 0; max-width: none; flex: 1 1 auto; border-right: none; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-chat-main { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; width: 100%; max-width: none; } #soulfulsync-web-chat-ui.ss-mobile-layout.ss-mobile-conversation .ss-chat-sidebar { display: none !important; } #soulfulsync-web-chat-ui.ss-mobile-layout:not(.ss-mobile-conversation) .ss-chat-main { display: none !important; } #soulfulsync-web-chat-ui:not(.ss-mobile-layout) .ss-conv-back, #soulfulsync-web-chat-ui.ss-mobile-layout:not(.ss-mobile-conversation) .ss-conv-back { display: none !important; } #soulfulsync-web-chat-ui.ss-mobile-layout.ss-mobile-conversation .ss-conv-back { display: inline-flex !important; } .ss-conv-back { flex-shrink: 0; padding: 0 !important; min-width: 44px; min-height: 44px; width: 44px; height: 44px; display: inline-flex !important; align-items: center; justify-content: center; line-height: 0; box-sizing: border-box; } .ss-conv-back .ss-icon { width: 24px; height: 24px; min-width: 24px; min-height: 24px; } .ss-conv-back .ss-icon svg { width: 22px; height: 22px; display: block; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-topbar { padding: 10px 12px; gap: 8px; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-inbox-nav { padding: 6px 10px 8px; gap: 6px; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-segmented.ss-tabs { padding: 2px; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-tab { padding: 6px 8px; font-size: 0.75rem; min-height: 30px; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-inbox-nav-action { width: 34px; height: 34px; min-width: 34px; min-height: 34px; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-thread-list { padding: 10px 12px 20px; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-header { padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top, 0px)); gap: 8px; flex-wrap: wrap; justify-content: flex-start; backdrop-filter: blur(10px); background: var(--ss-panel-blur-bg); } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-title { flex: 1; min-width: 0; gap: 10px; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-title .ss-thread-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } /* Cabecera: solo iconos (el texto Video/Audio se oculta) */ #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn { font-size: 0; line-height: 0; padding: 10px; gap: 0; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn .ss-icon { width: 20px; height: 20px; min-width: 20px; min-height: 20px; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn .ss-icon svg { width: 20px; height: 20px; display: block; } /* Mantener círculos 44px en móvil (el bloque anterior metía padding en todos los .ss-btn) */ #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn[data-ui="header-btn-audio"], #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn[data-ui="header-btn-video"], #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn[data-ui="header-btn-info"], #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn[data-ui="header-btn-more"], #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn[data-ui="header-btn-add-participants"] { padding: 0; width: 44px; height: 44px; min-width: 44px; min-height: 44px; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn[data-ui="header-btn-audio"] .ss-icon, #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn[data-ui="header-btn-video"] .ss-icon, #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn[data-ui="header-btn-info"] .ss-icon, #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn[data-ui="header-btn-more"] .ss-icon, #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn[data-ui="header-btn-add-participants"] .ss-icon { width: 22px; height: 22px; min-width: 22px; min-height: 22px; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn[data-ui="header-btn-audio"] .ss-icon svg, #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn[data-ui="header-btn-video"] .ss-icon svg, #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn[data-ui="header-btn-info"] .ss-icon svg, #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn[data-ui="header-btn-more"] .ss-icon svg, #soulfulsync-web-chat-ui.ss-mobile-layout .ss-conv-actions .ss-btn[data-ui="header-btn-add-participants"] .ss-icon svg { width: 22px; height: 22px; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-messages { padding: 12px 12px 16px; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-msg { max-width: 88%; padding: 10px 14px; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-composer { padding: 12px 12px 16px; padding-bottom: max( 16px, calc(12px + var(--ss-theme-bottom-nav-height) + env(safe-area-inset-bottom, 0px)) ); } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-composer-row { gap: 8px; } #soulfulsync-web-chat-ui.ss-mobile-layout .ss-composer-pill { min-width: 0; flex: 1; } /* Panel “Información del chat” a pantalla completa en móvil */ #soulfulsync-web-chat-ui.ss-mobile-layout .ss-contact-info-sidebar[data-ui="contact-info"] { position: fixed !important; inset: 0; z-index: 100003; width: 100% !important; max-width: none !important; min-width: 0 !important; border-left: none; } @media screen and (max-width: 1024px) { .ss-modal { width: min(380px, 94vw); padding: 20px 16px; } .ss-modal-wide { width: min(720px, 96vw); } #soulfulsync-web-chat-ui { max-width: none; } } /* ===== Hybrid UI refresh (tokens; sin hex legacy) ===== */ .ss-chat-sidebar { background: var(--ss-sidebar-bg, var(--ss-bg-card)); border-right: 1px solid var(--ss-border); } .ss-chat-main { background: var(--ss-main-area-bg); } .ss-topbar { padding: 12px 14px 10px; gap: 8px; border-bottom: 1px solid var(--ss-border); background: transparent; } .ss-search { border-radius: var(--ss-radius-sm); padding: 9px 11px 9px 38px; font-size: 0.875rem; background: var(--ss-pill-surface); } .ss-thread-list { padding: 8px 10px 14px; } .ss-thread { border-radius: var(--ss-radius-md); padding: 10px 12px; min-height: 58px; border: 1px solid transparent; } .ss-thread:hover { background: var(--ss-tab-hover-bg); border-color: var(--ss-border); } .ss-thread.active { background: var(--ss-thread-active-bg); border-color: var(--ss-thread-active-border); box-shadow: var(--ss-shadow-sm); } .ss-conv-header { padding: 12px 16px; background: var(--ss-panel-blur-bg); border-bottom: 1px solid var(--ss-glass-border); backdrop-filter: blur(10px); } .ss-conv-actions { gap: 8px; } .ss-conv-actions .ss-btn[data-ui="header-btn-info"], .ss-conv-actions .ss-btn[data-ui="header-btn-more"], .ss-conv-actions .ss-btn[data-ui="header-btn-add-participants"] { width: 40px; height: 40px; min-width: 40px; min-height: 40px; } .ss-messages { padding: 16px 18px; gap: 10px; } .ss-msg { border-radius: 14px 14px 14px 6px; padding: 10px 13px; border-color: rgba(255, 255, 255, 0.08); backdrop-filter: none; } .ss-msg.me { border-radius: 14px 14px 6px 14px; } .ss-composer { padding: 10px 14px 14px; gap: 8px; background: var(--ss-panel-blur-bg); border-top: 1px solid var(--ss-border); backdrop-filter: none; } .ss-composer-row { gap: 8px; } .ss-composer-plus, .ss-composer-chart { width: 40px; height: 40px; border-radius: 10px; } .ss-composer-pill { min-height: 42px; border-radius: 22px; padding: 4px 10px 4px 12px; background: var(--ss-pill-surface); } .ss-composer-pill-btn { width: 36px; height: 36px; } .ss-composer-action { width: 42px; height: 42px; border-radius: 11px; box-shadow: none; } /* --- Account settings page (premium compact) --- */ .ss-account-page-shell[data-ui="account-settings-page"] { background: rgba(5, 9, 16, 0.72); backdrop-filter: blur(6px); padding: 12px; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-settings-page { width: min(640px, 100%); max-width: 100%; height: min(92vh, 880px); margin: auto; border-radius: 16px; background: linear-gradient(165deg, rgba(17, 24, 39, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; background: rgba(15, 23, 42, 0.92); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-page-head h3 { margin: 0; font-size: 1.125rem; font-weight: 700; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-page-head-sub { margin: 4px 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--ss-muted); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-settings-body { padding: 14px 16px 20px; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-sections { display: flex; flex-direction: column; gap: 10px; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-accordion { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); overflow: hidden; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-accordion + .ss-account-accordion { margin-top: 0; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-accordion-head { min-height: 48px; padding: 10px 12px; background: rgba(255, 255, 255, 0.04); font-size: 0.9375rem; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-accordion-head-left .ss-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; border-radius: 8px; background: rgba(124, 156, 255, 0.14); color: var(--ss-brand, #7c9cff); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-accordion-content { padding: 12px; gap: 10px; background: rgba(0, 0, 0, 0.14); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-fields-grid--pair { margin-top: 8px; } @media (max-width: 560px) { .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-fields-grid { grid-template-columns: 1fr; } } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-field-label { font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 2px; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-field-input { width: 100%; border-radius: 10px; min-height: 42px; padding: 10px 12px; box-sizing: border-box; font-size: 0.9375rem; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-field-input:not([readonly]) { background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(255, 255, 255, 0.12); color: #f3f4f6; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-field-input[readonly] { background: rgba(15, 23, 42, 0.35); border: 1px dashed rgba(255, 255, 255, 0.1); color: rgba(209, 213, 219, 0.75); opacity: 1; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-profile-footer { margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-profile-save { width: 100%; min-height: 44px; border-radius: 10px; font-weight: 600; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-toggle-list { display: flex; flex-direction: column; gap: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.18); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-toggle-row { display: flex; align-items: center; gap: 10px; padding: 12px 12px; border: 0; background: transparent; text-align: left; transition: background 0.15s ease; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-toggle-row + .ss-account-toggle-row { border-top: 1px solid rgba(255, 255, 255, 0.06); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-toggle-row__icon { flex-shrink: 0; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: var(--ss-text); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-toggle-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-toggle-row__title { font-size: 0.9rem; font-weight: 600; line-height: 1.3; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-toggle-row__sub { font-size: 0.78rem; line-height: 1.35; color: var(--ss-muted); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-switch { position: relative; flex-shrink: 0; width: 46px; height: 26px; cursor: pointer; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-switch__track { position: relative; display: block; width: 46px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); transition: background 0.2s ease; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-toggle-row__icon svg, .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-secondary-action__icon svg { width: 18px !important; height: 18px !important; stroke: currentColor; fill: none; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-switch input:checked + .ss-account-switch__track { background: var(--ss-brand); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-switch input:checked + .ss-account-switch__track::after { transform: translateX(20px); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-action-chip { flex-shrink: 0; padding: 7px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; border: 1px solid rgba(124, 156, 255, 0.35); background: rgba(124, 156, 255, 0.12); color: var(--ss-brand, #a5b4fc); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-secondary-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-secondary-action { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.2); text-align: left; transition: background 0.15s ease, border-color 0.15s ease; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-secondary-action:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-secondary-action.danger { border-color: rgba(239, 68, 68, 0.25); background: rgba(239, 68, 68, 0.08); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-secondary-action__icon { flex-shrink: 0; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; border-radius: 8px; background: rgba(255, 255, 255, 0.06); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-secondary-action__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-secondary-action__title { font-size: 0.875rem; font-weight: 600; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-secondary-action__sub { font-size: 0.75rem; color: var(--ss-muted); line-height: 1.35; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-settings-hint { margin: 0 0 8px; font-size: 0.8125rem; line-height: 1.45; color: var(--ss-muted); } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-settings-hint--compact { margin-bottom: 10px; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-e2e-block { padding: 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 8px; } @media (max-width: 900px) { .ss-account-page-shell[data-ui="account-settings-page"] { padding: 8px; } .ss-account-page-shell[data-ui="account-settings-page"] .ss-account-settings-page { width: 100%; height: calc(100vh - 16px); border-radius: 12px; } } /* —— Bottom sheet: selector de participantes (paridad app) —— */ .ss-picker-sheet-backdrop { align-items: flex-end; justify-content: center; padding: 0; } .ss-picker-sheet { width: 100%; max-width: 560px; max-height: min(88vh, 720px); min-height: 280px; display: flex; flex-direction: column; background: var(--ss-bg-card); border: 1px solid var(--ss-glass-border); border-bottom: none; border-radius: 20px 20px 0 0; box-shadow: var(--ss-shadow-lg, 0 24px 48px rgba(0, 0, 0, 0.42)); overflow: hidden; opacity: 0; transform: translateY(28px); transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .ss-picker-sheet-handle { flex-shrink: 0; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 4px; background: var(--ss-border); } .ss-picker-sheet-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 8px 20px; flex-shrink: 0; } .ss-picker-sheet-title { flex: 1; min-width: 0; margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--ss-text); letter-spacing: -0.02em; } .ss-picker-sheet-close { flex-shrink: 0; width: 40px; height: 40px; padding: 0; border-radius: 12px; border: 1px solid transparent; background: var(--ss-surface-subtle); color: var(--ss-muted); display: inline-flex; align-items: center; justify-content: center; } .ss-picker-sheet-close:hover { background: var(--ss-tab-hover-bg); color: var(--ss-text); } .ss-picker-sheet-search { display: flex; align-items: center; gap: 10px; margin: 4px 16px 8px; padding: 0 14px; min-height: 46px; border-radius: 14px; background: var(--ss-surface-subtle); border: 1px solid var(--ss-border); flex-shrink: 0; } .ss-picker-sheet-search:focus-within { border-color: var(--ss-brand-glow); box-shadow: 0 0 0 3px var(--ss-brand-soft); } .ss-picker-sheet-search-icon { flex-shrink: 0; color: var(--ss-muted); line-height: 0; } .ss-picker-sheet-search-input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--ss-text); font-size: 0.9375rem; padding: 12px 0; outline: none; } .ss-picker-sheet-search-input::placeholder { color: var(--ss-muted); } .ss-picker-sheet-counter { padding: 0 20px 6px; font-size: 0.8125rem; font-weight: 600; color: var(--ss-brand); flex-shrink: 0; } .ss-picker-sheet-counter.is-empty { color: var(--ss-muted); font-weight: 500; } .ss-picker-sheet-list { flex: 1; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 12px 8px; scrollbar-gutter: stable; } .ss-picker-sheet-list.is-empty { display: flex; align-items: center; justify-content: center; } .ss-picker-sheet-empty { padding: 32px 20px; text-align: center; font-size: 0.9rem; color: var(--ss-muted); line-height: 1.45; } .ss-picker-sheet-list .ss-pick-user-row { background: var(--ss-surface-subtle); } .ss-picker-sheet-foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ss-border); background: var(--ss-panel-blur-bg); flex-shrink: 0; } .ss-picker-sheet-cancel { background: transparent; border: none; color: var(--ss-muted); font-weight: 600; padding: 10px 12px; } .ss-picker-sheet-cancel:hover { color: var(--ss-text); } .ss-picker-sheet-confirm { margin-left: auto; min-height: 44px; padding: 10px 20px; border-radius: 12px; font-weight: 700; } /* Lista (reenvío, etc.) */ .ss-list-picker-sheet { max-height: min(82vh, 640px); } .ss-list-picker-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; margin-bottom: 4px; border-radius: 14px; border: 1px solid transparent; background: var(--ss-surface-subtle); text-align: left; color: var(--ss-text); transition: background 0.2s ease, border-color 0.2s ease; } .ss-list-picker-row:hover { background: var(--ss-brand-soft); border-color: var(--ss-brand-tab-border); } .ss-list-picker-row-avatar { width: 44px; height: 44px; min-width: 44px; flex-shrink: 0; } .ss-list-picker-row-avatar.ss-circle-preset-art, .ss-list-picker-row-avatar.ss-avatar--circle-space { width: 44px; height: 44px; min-width: 44px; max-width: 44px; flex: 0 0 44px; } .ss-list-picker-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ss-list-picker-row-title { font-weight: 600; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-list-picker-row-sub { font-size: 0.75rem; color: var(--ss-muted); } /* Silenciar llamadas — bottom sheet premium */ .ss-calls-mute-sheet { max-height: min(78vh, 580px); } .ss-calls-mute-sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 12px; } .ss-calls-mute-sheet-hint { margin: 0 0 14px; font-size: 0.8125rem; line-height: 1.45; color: var(--ss-muted); } .ss-calls-mute-unmute { width: 100%; margin-bottom: 14px; min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(52, 211, 153, 0.38); background: rgba(52, 211, 153, 0.1); color: #a7f3d0; display: flex; align-items: center; gap: 12px; text-align: left; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .ss-calls-mute-unmute:hover { background: rgba(52, 211, 153, 0.16); border-color: rgba(52, 211, 153, 0.55); transform: translateY(-1px); } .ss-calls-mute-unmute__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(52, 211, 153, 0.18); color: #6ee7b7; } .ss-calls-mute-unmute__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ss-calls-mute-unmute__title { font-weight: 700; font-size: 0.9375rem; color: var(--ss-text); } .ss-calls-mute-unmute__sub { font-size: 0.75rem; color: var(--ss-muted); } .ss-calls-mute-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ss-calls-mute-chip { min-height: 56px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ss-border); background: var(--ss-surface-subtle); color: var(--ss-text); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; text-align: left; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .ss-calls-mute-chip:hover { background: var(--ss-brand-soft); border-color: var(--ss-brand-tab-border); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); } .ss-calls-mute-chip.is-wide { grid-column: 1 / -1; } .ss-calls-mute-chip.is-warning { border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08); } .ss-calls-mute-chip.is-warning:hover { border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.12); } .ss-calls-mute-chip__label { font-weight: 700; font-size: 0.9rem; line-height: 1.2; } .ss-calls-mute-chip__sub { font-size: 0.72rem; font-weight: 500; color: var(--ss-muted); line-height: 1.3; } .ss-calls-mute-sheet-foot { justify-content: center; border-top: 1px solid var(--ss-border); } .ss-calls-mute-cancel { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--ss-border); background: transparent; color: var(--ss-muted); font-weight: 600; } .ss-calls-mute-cancel:hover { color: var(--ss-text); background: var(--ss-surface-subtle); } @media (max-width: 420px) { .ss-calls-mute-grid { grid-template-columns: 1fr; } .ss-calls-mute-chip.is-wide { grid-column: auto; } } /* Crear grupo: formulario en sheet */ .ss-create-group-sheet { max-height: min(92vh, 720px); } .ss-create-group-sheet-body { flex: 1; overflow-y: auto; padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 10px; } .ss-create-group-participants-block { display: flex; flex-direction: column; gap: 8px; } .ss-create-group-pick-btn { width: 100%; justify-content: flex-start; min-height: 48px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ss-border); background: var(--ss-surface-subtle); color: var(--ss-muted); font-weight: 600; text-align: left; } .ss-create-group-pick-btn.has-selection { border-color: var(--ss-brand-tab-border); background: var(--ss-brand-soft); color: var(--ss-brand); } .ss-create-group-pick-btn:hover { border-color: var(--ss-brand-glow); } .ss-create-group-sheet-foot { justify-content: stretch; } .ss-create-group-sheet-foot .ss-picker-sheet-confirm { margin-left: 0; width: 100%; } /* Opciones de hilo / grupo en bottom sheet */ .ss-picker-sheet-backdrop[data-ui="thread-settings-backdrop"] .ss-thread-settings-sheet { width: 100%; max-width: 560px; max-height: min(88vh, 680px); } .ss-picker-sheet-backdrop .ss-thread-settings-head { padding-top: 16px; } .ss-picker-sheet-backdrop .ss-thread-settings-close { top: 16px; right: 16px; } .ss-picker-sheet-backdrop .ss-thread-settings-body .ss-settings-row:hover { background: var(--ss-brand-soft); } /* Skeleton mensajes en hilo */ .ss-msg-skeleton-list { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 20px; width: 100%; max-width: 720px; margin: 0 auto; } .ss-msg-skeleton-list .ss-msg-skeleton { max-width: 62%; } .ss-msg-skeleton-list .ss-msg-skeleton.me { margin-left: auto; } .ss-empty-reload-btn.primary { background: var(--ss-brand); border-color: var(--ss-brand); color: var(--ss-on-accent, #fff); } .ss-empty-reload-btn:not(.primary) { border: 1px solid var(--ss-border); background: var(--ss-surface-subtle); color: var(--ss-text); } @media (min-width: 901px) { .ss-picker-sheet-backdrop { align-items: center; padding: 24px; } .ss-picker-sheet { border-radius: 20px; border-bottom: 1px solid var(--ss-glass-border); max-height: min(86vh, 680px); transform: translateY(12px) scale(0.98); } .ss-modal-backdrop.ss-entered .ss-picker-sheet { transform: translateY(0) scale(1); } .ss-picker-sheet-backdrop[data-ui="thread-settings-backdrop"] .ss-thread-settings-sheet, .ss-picker-sheet-backdrop[data-ui="create-group-backdrop"] .ss-create-group-sheet { border-radius: 20px; } } /* —— Búsqueda en hilo, skeleton, toasts, velocidad voz —— */ .ss-msg-search-bar { padding: 8px 12px 0; } .ss-msg-search-bar[hidden] { display: none !important; } .ss-msg-search-input { width: 100%; } .ss-msg-skeleton { max-width: 62%; height: 52px; margin: 8px 0; border-radius: 16px 16px 16px 4px; background: linear-gradient(90deg, rgba(148,163,184,0.18), rgba(148,163,184,0.32), rgba(148,163,184,0.18)); background-size: 200% 100%; animation: ss-msg-skeleton-pulse 1.1s ease-in-out infinite; } .ss-msg-skeleton.me { margin-left: auto; border-radius: 16px 16px 4px 16px; } @keyframes ss-msg-skeleton-pulse { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .ss-chat-toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(12px); opacity: 0; pointer-events: none; z-index: 10050; padding: 11px 18px; border-radius: 999px; background: var(--ss-toast-bg); color: var(--ss-text); border: 1px solid var(--ss-border); box-shadow: var(--ss-shadow); font-size: 0.875rem; font-weight: 600; transition: opacity 0.2s ease, transform 0.2s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ss-chat-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); } .ss-chat-toast--error { background: var(--ss-toast-error-bg); color: var(--ss-toast-error-text); border-color: var(--ss-toast-error-border); } .ss-chat-toast--success { background: var(--ss-success-soft); color: var(--ss-success); border-color: rgba(22, 163, 74, 0.35); } .ss-voice-speed { flex-shrink: 0; font-size: 0.65rem; font-weight: 700; opacity: 0.8; min-width: 22px; } .ss-msg .ss-msg-ticks { cursor: help; } .ss-msg-ticks-sent, .ss-msg-ticks[title="Enviado"] { opacity: 0.55; } .ss-msg-ticks-delivered, .ss-msg-ticks[title="Entregado"] { opacity: 0.82; } .ss-msg-ticks-read, .ss-msg-ticks[title="Visto"] { color: #34b7f1 !important; opacity: 1; } .ss-msg-ticks-failed { color: var(--ss-danger) !important; font-weight: 800; letter-spacing: 0; } .ss-msg-failed { color: var(--ss-danger); font-size: 0.75rem; font-weight: 700; } .ss-confirm-body { margin: 0 0 8px; } .ss-confirm-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 0 16px 16px; } .ss-forward-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; } .ss-forward-row { width: 100%; text-align: left; justify-content: flex-start; } .ss-contact-demote-admin, .ss-contact-transfer-owner { margin-left: 6px; font-size: 0.75rem; padding: 4px 8px; } /* —— Premium empty states, banners, skeletons, modales —— */ .ss-empty-msg-wrap { display: flex; align-items: center; justify-content: center; min-height: min(320px, 42vh); padding: 1.5rem 1rem; width: 100%; } .ss-empty-msg-wrap--column { flex-direction: column; gap: 0; } .ss-empty-card-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; width: 100%; } .ss-empty-card-actions .ss-btn { width: 100%; justify-content: center; } .ss-empty-card { max-width: 320px; width: 100%; padding: 1.35rem 1.25rem; text-align: center; border-radius: var(--ss-radius-md); border: 1px solid var(--ss-glass-border); background: var(--ss-glass); box-shadow: var(--ss-shadow-sm); backdrop-filter: blur(10px); transition: border-color var(--ss-transition), box-shadow var(--ss-transition); } .ss-empty-card-icon { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ss-bg-card); border: 1px solid var(--ss-border); color: var(--ss-brand); } .ss-empty-card-icon svg { width: 28px; height: 28px; } .ss-empty-card-title { font-weight: 700; font-size: 1rem; color: var(--ss-text); margin-bottom: 6px; } .ss-empty-card-hint { font-size: 0.875rem; line-height: 1.5; color: var(--ss-muted); } .ss-thread-skeleton-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 8px; } .ss-thread-skeleton { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--ss-radius-md); border: 1px solid transparent; } .ss-thread-skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(90deg, var(--ss-pill-surface) 0%, var(--ss-pill-surface-strong) 50%, var(--ss-pill-surface) 100%); background-size: 200% 100%; animation: ss-thread-skeleton-shimmer 1.2s ease-in-out infinite; } .ss-thread-skeleton-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .ss-thread-skeleton-line { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--ss-pill-surface) 0%, var(--ss-pill-surface-strong) 50%, var(--ss-pill-surface) 100%); background-size: 200% 100%; animation: ss-thread-skeleton-shimmer 1.2s ease-in-out infinite; } .ss-thread-skeleton-line--title { width: 58%; height: 12px; } .ss-thread-skeleton-line--preview { width: 82%; } @keyframes ss-thread-skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .ss-thread-status-banner { align-self: stretch; width: 100%; max-width: 100%; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--ss-radius-sm); border: 1px solid transparent; font-size: 0.8125rem; font-weight: 600; line-height: 1.45; text-align: center; transition: opacity var(--ss-transition); } .ss-thread-status-banner--admin { background: var(--ss-brand-soft); border-color: var(--ss-brand-tab-border); color: var(--ss-text); } .ss-thread-status-banner--blocked { background: var(--ss-danger-soft); border-color: rgba(220, 38, 38, 0.28); color: var(--ss-danger); } .ss-composer-toast { position: absolute; bottom: calc(100% + 8px); left: 12px; right: 12px; padding: 10px 14px; border-radius: var(--ss-radius-sm); font-size: 0.8125rem; font-weight: 600; z-index: 12; border: 1px solid transparent; box-shadow: var(--ss-shadow-sm); animation: ss-composer-toast-in 0.2s ease; } .ss-composer-toast--error { background: var(--ss-toast-error-bg); color: var(--ss-toast-error-text); border-color: var(--ss-toast-error-border); } @keyframes ss-composer-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .ss-confirm-modal, .ss-prompt-modal { width: min(400px, 94vw); padding: 0; overflow: hidden; } .ss-confirm-modal .ss-modal-head, .ss-prompt-modal .ss-modal-head { padding: 16px 16px 0; margin: 0; } .ss-confirm-modal .ss-modal-body, .ss-prompt-modal .ss-modal-body { padding: 8px 16px 4px; } .ss-prompt-input { width: 100%; margin-top: 8px; min-height: 44px; resize: vertical; } .ss-confirm-foot .ss-btn { min-width: 88px; } .ss-msg a { color: var(--ss-link-color); text-decoration: underline; text-underline-offset: 2px; } .ss-msg a:hover { filter: brightness(1.08); } @media (prefers-reduced-motion: reduce) { .ss-thread-skeleton-avatar, .ss-thread-skeleton-line, .ss-composer-toast { animation: none; } } /* —— Conexión / diagnóstico / ticks bandeja —— */ .ss-connection-status[hidden], .ss-connection-status.ss-connection-status--hidden { display: none !important; margin: 0 !important; padding: 0 !important; border: none !important; min-height: 0 !important; height: 0 !important; overflow: hidden; } .ss-connection-status { display: flex; align-items: center; gap: 10px; margin: 0 12px 10px; padding: 8px 12px; border-radius: var(--ss-radius-sm); border: 1px solid var(--ss-glass-border); background: var(--ss-glass); font-size: 0.75rem; transition: border-color var(--ss-transition), background var(--ss-transition); } .ss-connection-status--ok { border-color: rgba(22, 163, 74, 0.35); background: var(--ss-success-soft); } .ss-connection-status--pending { border-color: rgba(123, 97, 255, 0.28); background: var(--ss-brand-soft); } .ss-connection-status--warn { border-color: rgba(220, 38, 38, 0.25); background: var(--ss-danger-soft); } .ss-connection-status__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ss-muted); } .ss-connection-status--ok .ss-connection-status__dot { background: var(--ss-success); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); } .ss-connection-status--pending .ss-connection-status__dot { background: var(--ss-brand); animation: ss-connection-pulse 1.4s ease-in-out infinite; } .ss-connection-status--warn .ss-connection-status__dot { background: var(--ss-danger); } @keyframes ss-connection-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } .ss-connection-status__text-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ss-connection-status__label { font-weight: 700; color: var(--ss-text); } .ss-connection-status__hint { color: var(--ss-muted); font-size: 0.6875rem; } .ss-connection-status__btn { flex-shrink: 0; padding: 4px 10px; font-size: 0.6875rem; } .ss-diagnostics-panel { display: flex; flex-direction: column; gap: 8px; } .ss-diagnostics-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: var(--ss-radius-sm); background: var(--ss-pill-surface); font-size: 0.8125rem; } .ss-diagnostics-row__label { color: var(--ss-muted); } .ss-diagnostics-row__value { font-weight: 600; color: var(--ss-text); text-align: right; word-break: break-all; } .ss-support-health-card { position: fixed; right: 16px; bottom: 16px; z-index: 30; width: min(360px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--ss-radius-md); border: 1px solid var(--ss-glass-border); background: color-mix(in srgb, var(--ss-card-bg) 88%, transparent); box-shadow: var(--ss-overlay-shadow); backdrop-filter: blur(8px); transition: all 0.2s ease; } .ss-support-health-card--ok { border-color: rgba(22, 163, 74, 0.35); } .ss-support-health-card--warn { border-color: rgba(220, 38, 38, 0.35); } .ss-support-health-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ss-support-health-card__title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; color: var(--ss-text); } .ss-support-health-card__btn { padding: 3px 10px; font-size: 0.6875rem; } .ss-support-health-card__chips { display: flex; flex-wrap: wrap; gap: 6px; } .ss-support-health-chip { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: var(--ss-radius-pill); border: 1px solid var(--ss-glass-border); background: var(--ss-pill-surface); color: var(--ss-text); font-size: 0.6875rem; font-weight: 600; line-height: 1; } .ss-support-health-chip--build { color: var(--ss-muted); background: color-mix(in srgb, var(--ss-brand) 8%, var(--ss-pill-surface)); } @media (max-width: 768px) { .ss-support-health-card { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; } } .ss-msg-ticks--compact { font-size: 0.75rem; line-height: 1; } .ss-msg-ticks--compact.ss-msg-ticks-pending, .ss-msg-ticks--compact.ss-msg-ticks-failed { font-weight: 700; } .ss-msg-context-retry { font-weight: 700; color: var(--ss-brand); } .ss-msg.me.ss-msg--failed-retry { cursor: pointer; transition: transform var(--ss-transition), box-shadow var(--ss-transition); } .ss-msg.me.ss-msg--failed-retry:active { transform: scale(0.985); } .ss-msg.me.ss-msg--failed-retry .ss-msg-text { text-decoration-style: wavy; } /* —— Paridad app: micro-animaciones premium —— */ .ss-thread, .ss-modal-card, .ss-incoming-call-card, .ss-global-incoming-banner { transition: transform var(--ss-transition), box-shadow var(--ss-transition), border-color var(--ss-transition), opacity var(--ss-transition); } .ss-modal-overlay { animation: ss-fade-in 0.22s ease; } @keyframes ss-fade-in { from { opacity: 0; } to { opacity: 1; } } .ss-modal-card { animation: ss-slide-up 0.26s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes ss-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ss-thread, .ss-modal-card, .ss-incoming-call-card, .ss-global-incoming-banner { transition: none; } .ss-modal-overlay, .ss-modal-card { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════ UI Pro — bandeja y conversación con el mismo lenguaje visual (menos “IA”) ═══════════════════════════════════════════════════════════════════════════ */ #soulfulsync-web-chat-ui:not([data-theme="dark"]) { --ss-sidebar-bg: var(--ss-feed-light-card); --ss-surface-subtle: #eee9ff; --ss-msg-in-bg: var(--ss-feed-light-card); --ss-msg-me-solid: linear-gradient(180deg, #f8f5ff 0%, #ede9f8 100%); --ss-chat-pattern: rgba(110, 92, 230, 0.05); --ss-msg-own-bg: linear-gradient(180deg, #f8f5ff 0%, #ede9f8 100%); --ss-msg-own-text: var(--ss-feed-light-text); --ss-msg-own-shadow: var(--ss-msg-shadow); --ss-glass: var(--ss-feed-light-card); --ss-main-area-bg: var(--ss-feed-light-bg); --ss-panel-blur-bg: rgba(255, 255, 255, 0.92); } #soulfulsync-web-chat-ui[data-theme="dark"] { --ss-sidebar-bg: #161324; --ss-surface-subtle: #161324; --ss-msg-in-bg: var(--ss-feed-glass); --ss-msg-me-solid: var(--ss-feed-gradient-msg); --ss-chat-pattern: rgba(184, 168, 255, 0.06); --ss-msg-own-bg: var(--ss-feed-gradient-msg); --ss-msg-own-shadow: 0 8px 24px rgba(110, 92, 230, 0.32); --ss-glass: var(--ss-feed-glass); --ss-main-area-bg: var(--ss-feed-bg); --ss-panel-blur-bg: var(--ss-feed-glass); --ss-tab-hover-bg: rgba(42, 36, 62, 0.72); --ss-thread-active-bg: rgba(110, 92, 230, 0.16); --ss-thread-active-border: rgba(155, 140, 255, 0.32); --ss-input-bg: var(--ss-feed-card-solid); --ss-input-border: var(--ss-feed-border); --ss-pill-surface: rgba(36, 32, 51, 0.55); --ss-msg-system-bg: rgba(36, 32, 51, 0.72); --ss-msg-system-text: var(--ss-feed-muted); --ss-bg-card: var(--ss-feed-card-solid); --ss-text: var(--ss-feed-text); --ss-muted: var(--ss-feed-muted); color: var(--ss-text); } /* —— Bandeja (sidebar) —— */ .ss-chat-sidebar { background: var(--ss-sidebar-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-right: 1px solid var(--ss-border); } .ss-topbar { padding: 18px 18px 14px; flex-direction: column; align-items: stretch; gap: 14px; border-bottom: 1px solid var(--ss-border); background: var(--ss-sidebar-bg); } .ss-brand { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.025em; gap: 12px; } .ss-brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .ss-brand-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.2; color: var(--ss-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-brand-sub { font-size: 0.75rem; font-weight: 500; color: var(--ss-muted); letter-spacing: 0; } .ss-brand-staff-id, .ss-brand-session-id { display: block; margin-top: 2px; font-size: 0.68rem; font-weight: 600; color: var(--ss-accent); letter-spacing: 0.02em; } .ss-empty-session-hint { margin: 10px 12px 0; font-size: 0.78rem; line-height: 1.45; color: var(--ss-muted); text-align: center; } .ss-empty-msg-wrap .ss-btn { margin: 10px 12px 0; width: calc(100% - 24px); } .ss-mark-all-read { width: 100%; margin-bottom: 8px; justify-content: center; } .ss-brand-icon { width: 36px; height: 36px; border-radius: 11px; background: var(--ss-brand); box-shadow: none; } .ss-topbar .ss-search-wrap { width: 100%; } .ss-search { background: var(--ss-surface-subtle); border-color: transparent; padding: 11px 14px 11px 42px; font-size: 0.875rem; border-radius: 12px; } .ss-search:focus { background: var(--ss-bg-card); border-color: var(--ss-border-strong); box-shadow: var(--ss-composer-focus-ring); } .ss-topbar-row { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; } .ss-topbar-row .ss-brand { flex: 1; min-width: 0; } .ss-topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .ss-topbar-actions .ss-topbar-account, .ss-topbar-actions .ss-topbar-starred { position: static; top: auto; right: auto; width: 40px; height: 40px; min-width: 40px; padding: 0; border-radius: 11px; background: var(--ss-surface-subtle); border-color: transparent; } .ss-topbar { position: relative; } /* Pestañas: alineado con ss-inbox-nav (ver bloque base) */ .ss-inbox-nav .ss-tab.active { color: var(--ss-brand); } .ss-thread-list { padding: 8px 12px 20px; } .ss-thread { gap: 12px; padding: 10px 12px; min-height: 64px; margin-bottom: 2px; border-radius: 12px; border: 1px solid transparent; position: relative; } .ss-thread:hover { background: var(--ss-surface-subtle); border-color: var(--ss-border); transform: none; } .ss-thread.active { background: var(--ss-brand-soft); border-color: transparent; box-shadow: none; } .ss-thread.active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ss-brand); } .ss-avatar { width: 46px; height: 46px; font-size: 1rem; font-weight: 600; background: var(--ss-surface-subtle); border: 1px solid var(--ss-border); color: var(--ss-brand); border-radius: 50%; overflow: hidden; box-sizing: border-box; } .ss-avatar:has(.ss-avatar-img) { background: var(--ss-surface-subtle); border-color: var(--ss-border); color: transparent; } /* Bandeja: el borde debe seguir la forma del avatar (no caja cuadrada). */ .ss-thread .ss-avatar-wrap { display: flex; align-items: center; justify-content: center; } .ss-thread .ss-avatar { width: 48px; height: 48px; min-width: 48px; max-width: 48px; flex: 0 0 48px; border-radius: 50%; overflow: hidden; box-sizing: border-box; } .ss-thread--group .ss-avatar--group { border-radius: 14px; } .ss-thread--circle .ss-avatar--circle-space, .ss-thread .ss-avatar.ss-circle-preset-art { border-radius: 18px; } .ss-thread .ss-avatar.ss-circle-preset-art { border: none; background: transparent; padding: 0; } .ss-thread .ss-avatar.ss-circle-preset-art .ss-circle-preset-art-inner { width: 100%; height: 100%; border-radius: 18px; } .ss-thread .ss-avatar:has(.ss-avatar-img) { border-color: transparent; background: transparent; } .ss-thread-name { font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; } .ss-thread-preview { font-size: 0.8125rem; line-height: 1.35; margin-top: 3px; display: flex; align-items: center; gap: 4px; min-width: 0; } .ss-unread { min-width: 20px; height: 20px; font-size: 0.6875rem; font-weight: 700; box-shadow: none; background: var(--ss-unread-badge, var(--ss-brand)); } .ss-create-group-btn { border-radius: 12px; font-size: 0.875rem; font-weight: 600; margin-bottom: 10px; border: 1px dashed var(--ss-border-strong); background: transparent; color: var(--ss-text); } .ss-create-group-btn:hover { border-color: var(--ss-brand); background: var(--ss-brand-soft); color: var(--ss-brand); } .ss-thread-list > .ss-active-now:first-child { margin-top: 0; } /* —— Panel de conversación —— */ .ss-chat-main { background: var(--ss-main-area-bg); backdrop-filter: none; -webkit-backdrop-filter: none; } .ss-conv-header { padding: 14px 20px; background: var(--ss-panel-blur-bg); backdrop-filter: none; border-bottom: 1px solid var(--ss-border); } .ss-conv-title .ss-thread-name { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; } .ss-conv-actions .ss-btn[data-ui="header-btn-info"], .ss-conv-actions .ss-btn[data-ui="header-btn-more"], .ss-conv-actions .ss-btn[data-ui="header-btn-add-participants"] { border-radius: 11px; background: var(--ss-surface-subtle); border-color: var(--ss-border); color: var(--ss-brand); } .ss-messages { padding: 20px 20px 16px; gap: 8px; background-color: var(--ss-main-area-bg); background-image: radial-gradient(circle at 1px 1px, var(--ss-chat-pattern) 1px, transparent 0); background-size: 22px 22px; } .ss-msg { max-width: min(78%, 480px); padding: 10px 14px 8px; border-radius: 16px 16px 16px 4px; background: var(--ss-msg-in-bg); border: 1px solid var(--ss-border); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .ss-msg.me { border-radius: 16px 16px 4px 16px; background: var(--ss-msg-me-solid); border-color: color-mix(in srgb, var(--ss-brand) 22%, var(--ss-border)); box-shadow: var(--ss-msg-own-shadow); } @media (hover: hover) and (pointer: fine) { .ss-msg--contextable:hover { transform: none; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); } .ss-msg.me.ss-msg--contextable:hover { box-shadow: var(--ss-msg-own-shadow); } } .ss-msg-text { font-size: 0.9375rem; line-height: 1.45; letter-spacing: 0.01em; } .ss-msg-day-separator { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--ss-radius-pill); background: var(--ss-bg-card); border: 1px solid var(--ss-border); color: var(--ss-muted); box-shadow: none; } /* —— Composer —— */ .ss-composer { padding: 12px 18px 18px; background: var(--ss-panel-blur-bg); backdrop-filter: none; border-top: 1px solid var(--ss-border); } .ss-composer-row { align-items: center; gap: 8px; } .ss-composer-pill { min-height: 46px; border-radius: 14px; background: var(--ss-bg-card); border-color: var(--ss-border); box-shadow: none; } .ss-composer-pill-input, .ss-composer-input, .ss-composer textarea { font-size: 0.9375rem; line-height: 1.4; } .ss-composer-pill-btn { background: var(--ss-surface-subtle); color: var(--ss-muted); border: 1px solid transparent; } .ss-composer-pill-btn:hover { background: var(--ss-brand-soft); color: var(--ss-brand); } .ss-composer-pill-btn, .ss-composer-plus, .ss-composer-chart { background: var(--ss-surface-subtle); color: var(--ss-brand); border: 1px solid var(--ss-border); } .ss-composer-pill-btn:hover, .ss-composer-plus:hover, .ss-composer-chart:hover { background: var(--ss-brand-soft); border-color: color-mix(in srgb, var(--ss-brand) 32%, var(--ss-border)); color: var(--ss-brand); } .ss-composer-action { border-radius: 12px; background: var(--ss-surface-subtle); border: 1px solid var(--ss-border); color: var(--ss-brand); box-shadow: none; } .ss-composer-action:hover:not(:disabled) { transform: none; filter: none; background: var(--ss-brand-soft); border-color: color-mix(in srgb, var(--ss-brand) 35%, var(--ss-border)); } .ss-btn.primary { background: var(--ss-brand); border-color: transparent; color: #fff; } .ss-btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ss-brand) 88%, #000); filter: none; } /* Panel lateral info / contacto */ .ss-contact-info-sidebar { background: var(--ss-sidebar-bg); backdrop-filter: none; border-left: 1px solid var(--ss-border); } .ss-contact-info-section-title { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ss-muted); } /* Ajustes de cuenta: respeta tema claro/oscuro */ .ss-account-page-shell { background: var(--ss-overlay-scrim); backdrop-filter: blur(4px); } .ss-account-settings-page { background: var(--ss-bg-card); border: 1px solid var(--ss-border); color: var(--ss-text); box-shadow: var(--ss-shadow); } .ss-account-settings-page .ss-modal-head { background: var(--ss-bg-card); } .ss-account-accordion { background: var(--ss-surface-subtle); border-color: var(--ss-border); } .ss-account-accordion-head { background: transparent; } .ss-account-accordion-content { background: transparent; } /* Modales */ .ss-modal-card { border-radius: var(--ss-radius-lg); border: 1px solid var(--ss-border); box-shadow: var(--ss-shadow); background: var(--ss-bg-card); } .ss-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid var(--ss-border); } .ss-modal-head h3 { margin: 0; } .ss-modal-close { flex-shrink: 0; align-self: flex-start; margin: 0 0 0 auto; padding: 0 !important; width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 10px; gap: 0; position: static !important; float: none !important; inset: auto !important; top: auto !important; right: auto !important; transform: none !important; } .ss-modal-close .ss-icon { width: 20px; height: 20px; min-width: 20px; min-height: 20px; } .ss-modal-close .ss-icon svg { width: 20px; height: 20px; } .ss-modal-body { padding: 0; } /* Estado vacío conversación */ .ss-empty-conversation { color: var(--ss-muted); font-size: 0.9375rem; line-height: 1.5; max-width: 280px; text-align: center; margin: auto; padding: 24px; } body.soulfulsync-chat-fullscreen #soulfulsync-web-chat-ui { border-radius: 0; border: none; } .ss-brand-icon-img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; display: block; } .ss-archived-toggle { width: 100%; margin-bottom: 10px; font-size: 0.8125rem; font-weight: 600; } .ss-archived-toggle.active { background: var(--ss-brand-soft); border-color: var(--ss-brand-tab-border); color: var(--ss-brand); } .ss-inbox-hub { padding: 8px 10px 4px; flex-shrink: 0; } .ss-inbox-hub-row { display: flex; gap: 10px; } .ss-inbox-hub-tile { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; text-align: left; background: var(--ss-glass, var(--ss-bg-card)); border: 1px solid var(--ss-glass-border, var(--ss-border)); box-shadow: var(--ss-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06)); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .ss-inbox-hub-tile:hover { border-color: var(--ss-brand-tab-border, var(--ss-brand)); transform: translateY(-1px); } .ss-inbox-hub-tile__icon { flex-shrink: 0; color: var(--ss-brand); } .ss-inbox-hub-tile__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ss-inbox-hub-tile__label { font-size: 0.875rem; font-weight: 700; color: var(--ss-text); line-height: 1.2; } .ss-inbox-hub-tile__hint { font-size: 0.75rem; color: var(--ss-muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-inbox-hub-tile__badge { flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ss-brand); color: var(--ss-on-accent, #fff); font-size: 0.6875rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .ss-inbox-hub--archived-head { padding-bottom: 8px; } .ss-inbox-hub-back { width: 100%; } .ss-inbox-ctx { position: fixed; z-index: 12000; min-width: 180px; padding: 6px; border-radius: 12px; background: var(--ss-surface-elevated, #1e2430); border: 1px solid var(--ss-outline-variant, rgba(255, 255, 255, 0.12)); box-shadow: var(--ss-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.35)); } .ss-inbox-ctx-btn { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ss-text-primary, #f1f5f9); font: inherit; font-size: 0.875rem; cursor: pointer; transition: background 0.15s ease; } .ss-inbox-ctx-btn:hover { background: var(--ss-surface-hover, rgba(255, 255, 255, 0.06)); } .ss-inbox-thread-ctx-backdrop { position: fixed; inset: 0; z-index: 11990; background: color-mix(in srgb, var(--ss-overlay, #000) 48%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: ss-inbox-ctx-fade-in 0.18s ease; } .ss-inbox-thread-ctx { position: fixed; z-index: 12000; max-width: min(300px, calc(100vw - 24px)); animation: ss-inbox-ctx-pop-in 0.2s ease; } .ss-inbox-thread-ctx-panel { border-radius: 14px; background: var(--ss-surface-elevated, var(--ss-bg-card, #1a1d24)); border: 1px solid var(--ss-glass-border); box-shadow: var(--ss-shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.48)); overflow: hidden; } .ss-inbox-thread-ctx-sheet-backdrop { z-index: 12010; } .ss-inbox-thread-ctx-sheet { width: 100%; max-width: 560px; max-height: min(86vh, 640px); } .ss-inbox-thread-ctx-sheet-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 0 calc(8px + env(safe-area-inset-bottom, 0px)); } .ss-inbox-thread-ctx-sheet-body .ss-inbox-thread-ctx-panel { border: none; border-radius: 0; box-shadow: none; max-height: none; background: transparent; } .ss-inbox-thread-ctx-panel__actions, .ss-inbox-thread-ctx-panel__danger { display: flex; flex-direction: column; } .ss-inbox-thread-ctx-panel__danger { border-top: 1px solid var(--ss-border); background: color-mix(in srgb, var(--ss-glass) 88%, var(--ss-pill-surface) 12%); } .ss-inbox-thread-ctx-action { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 46px; padding: 10px 16px; border: none; border-radius: 0; background: transparent; color: var(--ss-text); font-family: var(--ss-font); font-size: 0.9375rem; font-weight: 500; text-align: left; cursor: pointer; transition: background 0.15s ease; } .ss-inbox-thread-ctx-action + .ss-inbox-thread-ctx-action { border-top: 1px solid color-mix(in srgb, var(--ss-border) 65%, transparent); } .ss-inbox-thread-ctx-action:hover { background: var(--ss-tab-hover-bg); } .ss-inbox-thread-ctx-action--danger { color: var(--ss-danger, #f87171); } .ss-inbox-thread-ctx-action__icon { display: flex; flex-shrink: 0; opacity: 0.92; } .ss-inbox-thread-ctx-sep { height: 1px; margin: 4px 0; background: color-mix(in srgb, var(--ss-border) 80%, transparent); } .ss-thread--ctx-open { background: var(--ss-tab-hover-bg) !important; outline: 1px solid var(--ss-brand-tab-ring, rgba(123, 97, 255, 0.35)); outline-offset: -1px; } .ss-thread-time-wrap { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } .ss-thread-mute-time-icon { opacity: 0.72; color: var(--ss-text-muted, #94a3b8); } .ss-thread-preview--muted .ss-thread-preview-muted-label { flex-shrink: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ss-text-muted, #94a3b8); } .ss-thread-preview-muted-dot { margin: 0 4px 0 0; color: var(--ss-text-muted, #94a3b8); flex-shrink: 0; } @keyframes ss-inbox-ctx-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ss-inbox-ctx-pop-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* —— Layout WhatsApp: rail + compacto —— */ #soulfulsync-web-chat-ui.ss-wa-layout { --ss-sidebar-width: 300px; } #soulfulsync-web-chat-ui.ss-compact .ss-chat-sidebar { width: var(--ss-sidebar-width, 300px); min-width: 260px; } .ss-wa-rail { width: 52px; min-width: 52px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 8px 4px; background: var(--ss-sidebar-bg); border-right: 1px solid var(--ss-glass-border); } .ss-wa-rail__top, .ss-wa-rail__bottom { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; } .ss-wa-rail__brand { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; overflow: hidden; background: var(--ss-surface-subtle); border: 1px solid var(--ss-border); } .ss-wa-rail__brand-img { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; } .ss-wa-rail-btn { position: relative; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ss-brand); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; box-sizing: border-box; line-height: 0; } .ss-wa-rail-btn:hover { background: var(--ss-surface-subtle); border-color: var(--ss-border); color: var(--ss-brand); } .ss-wa-rail-btn.active { background: var(--ss-bg-card); border-color: color-mix(in srgb, var(--ss-brand) 34%, var(--ss-border)); color: var(--ss-brand); } .ss-wa-rail-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ss-unread-badge, var(--ss-brand)); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .ss-wa-rail-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; } .ss-wa-rail-btn--avatar { height: auto; padding: 4px 0 2px; } #soulfulsync-web-chat-ui.ss-compact .ss-topbar--compact { padding: 8px 10px 6px; } #soulfulsync-web-chat-ui.ss-compact .ss-brand-bar--compact .ss-brand-bar__name { font-size: 1.05rem; font-weight: 800; } #soulfulsync-web-chat-ui.ss-compact .ss-search-wrap--compact { margin-top: 4px; padding: 0 2px; } #soulfulsync-web-chat-ui.ss-compact .ss-search { min-height: 34px; font-size: 0.8125rem; padding: 6px 10px 6px 32px; } #soulfulsync-web-chat-ui.ss-compact .ss-thread { padding: 8px 10px; gap: 8px; } #soulfulsync-web-chat-ui.ss-compact .ss-avatar { width: 44px; height: 44px; min-width: 44px; font-size: 0.95rem; } #soulfulsync-web-chat-ui.ss-compact .ss-thread-name { font-size: 0.875rem; } #soulfulsync-web-chat-ui.ss-compact .ss-thread-preview { font-size: 0.75rem; } .ss-calls-inbox-head { padding: 8px 10px 6px; flex-shrink: 0; } .ss-calls-inbox-tools { display: flex; align-items: center; gap: 8px; } .ss-calls-inbox-search { flex: 1; min-width: 0; } .ss-calls-new-btn { flex-shrink: 0; width: 38px; height: 38px; min-width: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ss-radius-sm); border: 1px solid var(--ss-border); background: rgba(255, 255, 255, 0.04); color: var(--ss-brand); } .ss-calls-new-btn:hover:not(:disabled) { background: var(--ss-brand-soft); border-color: rgba(123, 97, 255, 0.35); } .ss-calls-inbox-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .ss-calls-inbox-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--ss-text); } .ss-calls-section-title { margin: 8px 10px 4px; font-size: 0.75rem; font-weight: 700; color: var(--ss-muted); text-transform: uppercase; letter-spacing: 0.04em; } .ss-call-history-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--ss-border) 55%, transparent); transition: background 0.15s ease; } .ss-call-history-row:hover { background: var(--ss-tab-hover-bg); } .ss-call-ongoing-row { cursor: default; align-items: center; } .ss-call-ongoing-row .ss-active-call-join-bar__avatars { margin-top: 6px; } .ss-call-ongoing-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; flex-shrink: 0; } .ss-call-ongoing-info { padding: 4px 10px; font-size: 0.75rem; border-radius: 999px; } .ss-call-ongoing-row:hover { background: transparent; } .ss-call-ongoing-join { flex-shrink: 0; padding: 6px 14px; font-size: 0.8rem; border-radius: 999px; } .ss-call-history-meta { flex: 1; min-width: 0; } .ss-call-history-name { font-size: 0.875rem; font-weight: 600; color: var(--ss-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-call-history-sub { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 0.75rem; color: var(--ss-muted); } .ss-call-history-dir-icon.is-missed { color: var(--ss-danger, #f87171); } .ss-call-history-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; } .ss-call-history-time { font-size: 0.6875rem; color: var(--ss-muted); } .ss-call-history-act-row { display: flex; gap: 2px; } .ss-call-history-act { width: 34px; height: 34px; border: none; border-radius: 50%; background: transparent; color: var(--ss-brand); cursor: pointer; display: flex; align-items: center; justify-content: center; } .ss-call-history-act:hover { background: var(--ss-brand-soft); } /* Escritorio con rail: logo y cuenta solo en rail (no duplicar en sidebar). */ #soulfulsync-web-chat-ui.ss-wa-layout:not(.ss-mobile-layout):not(.ss-portable-layout) .ss-inbox-nav { display: none !important; } #soulfulsync-web-chat-ui.ss-wa-layout:not(.ss-mobile-layout) .ss-brand-bar__logo { display: none !important; } #soulfulsync-web-chat-ui.ss-wa-layout:not(.ss-mobile-layout) .ss-topbar-row { display: none !important; } #soulfulsync-web-chat-ui.ss-wa-layout:not(.ss-mobile-layout) .ss-topbar-archived { display: none !important; } #soulfulsync-web-chat-ui.ss-wa-layout:not(.ss-mobile-layout) .ss-brand-bar { padding-bottom: 8px; margin-bottom: 0; border-bottom: none; } #soulfulsync-web-chat-ui.ss-wa-layout:not(.ss-mobile-layout) .ss-brand-bar__name { font-size: 1.25rem; font-weight: 800; } /* Móvil: cuenta vía rail inferior; ocultar tarjeta de perfil y botón persona duplicados. */ #soulfulsync-web-chat-ui.ss-wa-layout.ss-mobile-layout .ss-user-profile, #soulfulsync-web-chat-ui.ss-wa-layout.ss-mobile-layout .ss-topbar-account { display: none !important; } #soulfulsync-web-chat-ui.ss-wa-layout.ss-mobile-layout .ss-topbar-row { justify-content: flex-end; margin-bottom: 0; } /* Rail inferior tipo WhatsApp móvil (ss-mobile-layout desde chat-client.js) */ #soulfulsync-web-chat-ui .ss-wa-bottom-nav { display: none; } #soulfulsync-web-chat-ui.ss-mobile-layout.ss-wa-layout .ss-wa-rail { display: none !important; } #soulfulsync-web-chat-ui.ss-mobile-layout.ss-wa-layout .ss-wa-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; flex-direction: row; align-items: stretch; justify-content: space-around; gap: 2px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--ss-sidebar-bg); border-top: 1px solid var(--ss-glass-border, var(--ss-outline-variant, rgba(255, 255, 255, 0.08))); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18); } #soulfulsync-web-chat-ui.ss-mobile-layout.ss-wa-layout .ss-chat-sidebar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } #soulfulsync-web-chat-ui.ss-mobile-layout.ss-wa-layout.ss-mobile-conversation .ss-wa-bottom-nav { display: none !important; } #soulfulsync-web-chat-ui.ss-mobile-layout.ss-wa-layout.ss-mobile-friend-profile .ss-wa-bottom-nav { display: none !important; } #soulfulsync-web-chat-ui.ss-mobile-layout.ss-wa-layout.ss-mobile-conversation .ss-chat-sidebar { padding-bottom: 0; } #soulfulsync-web-chat-ui.ss-mobile-layout.ss-wa-layout.ss-mobile-friend-profile .ss-chat-sidebar { padding-bottom: 0; } .ss-friend-profile { display: flex; flex-direction: column; min-height: calc(100dvh - env(safe-area-inset-top, 0px)); padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px)); gap: 20px; } .ss-friend-profile__top { display: flex; align-items: center; min-height: 44px; } .ss-friend-profile__back { margin-left: -4px; } .ss-friend-profile__hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 12px 8px 8px; } .ss-friend-profile__avatar { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; box-shadow: var(--ss-soft-shadow, 0 8px 32px rgba(0, 0, 0, 0.28)); } .ss-friend-profile__name { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--ss-text); line-height: 1.25; } .ss-friend-profile__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; margin: 8px auto 0; } .ss-friend-profile__actions .ss-btn { width: 100%; min-height: 44px; justify-content: center; } .ss-friend-profile__connections-wrap { width: 100%; margin-top: 18px; padding: 0 4px 8px; text-align: left; } .ss-friend-profile__connections-loading, .ss-friend-profile__connections-muted { margin: 0; font-size: 0.82rem; color: var(--ss-muted); } .ss-friend-profile__connections { margin-top: 14px; } .ss-friend-profile__connections-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .ss-friend-profile__connections-title { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--ss-text); } .ss-friend-profile__connections-count { font-size: 0.82rem; font-weight: 700; color: var(--ss-brand); } .ss-friend-profile__connections-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .ss-friend-profile__connection-chip { flex: 0 0 auto; width: 68px; border: none; background: transparent; color: var(--ss-text); cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; } .ss-friend-profile__connection-chip:hover .ss-friend-profile__connection-name { color: var(--ss-brand); } .ss-friend-profile__connection-avatar { width: 52px; height: 52px; } .ss-friend-profile__connection-name { font-size: 0.72rem; line-height: 1.2; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ss-wa-bottom-nav-btn { position: relative; flex: 1; min-width: 0; max-width: 96px; border: none; border-radius: 10px; background: transparent; color: var(--ss-muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; transition: background 0.15s ease, color 0.15s ease; } .ss-wa-bottom-nav-btn.active { color: var(--ss-brand); } .ss-wa-bottom-nav-btn:hover { background: var(--ss-tab-hover-bg); color: var(--ss-text); } .ss-wa-bottom-nav-label { font-size: 10px; font-weight: 600; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-call-favorites-row { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; -webkit-overflow-scrolling: touch; } .ss-call-favorite-tile { flex: 0 0 auto; width: 72px; border: none; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; color: inherit; } .ss-call-favorite-avatar { width: 52px; height: 52px; } .ss-call-favorite-name { font-size: 11px; font-weight: 600; text-align: center; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ss-text); } @media (max-width: 720px) { #soulfulsync-web-chat-ui.ss-wa-layout:not(.ss-mobile-layout) .ss-wa-rail { width: 48px; min-width: 48px; } } .ss-msg-virtual-spacer { width: 100%; flex-shrink: 0; pointer-events: none; } .ss-outbound-queue-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; border: 1px solid var(--ss-border-strong); background: color-mix(in srgb, var(--ss-brand) 10%, var(--ss-bg-card)); font-size: 0.8125rem; font-weight: 600; color: var(--ss-text); } .ss-outbound-queue-banner .ss-btn { padding: 6px 12px; font-size: 0.75rem; } .ss-disappearing-banner { font-size: 0.75rem; font-weight: 600; color: var(--ss-brand); margin-top: 2px; } .ss-legacy-group-banner { padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; border: 1px dashed var(--ss-border-strong); background: var(--ss-surface-subtle); font-size: 0.8125rem; line-height: 1.4; color: var(--ss-muted); } .ss-msg-reply-preview--jump { cursor: pointer; } .ss-msg-reply-preview--jump:hover { filter: brightness(1.04); } .ss-mention-popover { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 40; max-height: 200px; overflow-y: auto; border-radius: 12px; border: 1px solid var(--ss-border); background: var(--ss-bg-card); box-shadow: var(--ss-shadow); padding: 6px; } .ss-mention-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px; border: none; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; color: var(--ss-text); } .ss-mention-row:hover { background: var(--ss-brand-soft); } .ss-mention-row-name { font-size: 0.875rem; font-weight: 600; } .ss-mention-row-handle { font-size: 0.75rem; color: var(--ss-muted); } .ss-composer--dragover { outline: 2px dashed var(--ss-brand); outline-offset: 4px; } .ss-empty-conversation__title { font-size: 1.0625rem; font-weight: 700; color: var(--ss-text); margin-bottom: 6px; } .ss-empty-conversation__sub { font-size: 0.875rem; color: var(--ss-muted); line-height: 1.45; } .ss-empty-conversation__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; } .ss-msg-text .ss-mention { color: var(--ss-mention-badge, var(--ss-soft-accent)); font-weight: 600; } .ss-multi-select-bar { position: relative; z-index: 20; display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--ss-surface-elevated, rgba(22, 24, 32, 0.96)); border-top: 1px solid var(--ss-border, rgba(255, 255, 255, 0.08)); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.22); } #soulfulsync-web-chat-ui.ss-multi-select-active .ss-composer { display: none !important; } #soulfulsync-web-chat-ui.ss-multi-select-active .ss-multi-select-bar { margin-top: auto; } /* Salir del modo selección: atrás (móvil/portátil) y ✕ en cabecera (también escritorio). */ #soulfulsync-web-chat-ui.ss-multi-select-active .ss-conv-back { display: inline-flex !important; } .ss-conv-actions [data-ui="header-btn-cancel-select"] { display: none !important; } .ss-conv-actions.ss-conv-actions--select-mode [data-ui="header-btn-cancel-select"] { display: inline-flex !important; } .ss-conv-actions.ss-conv-actions--select-mode [data-ui^="header-btn-"]:not([data-ui="header-btn-cancel-select"]) { display: none !important; } .ss-conv-select-cancel { min-width: 44px; min-height: 44px; padding: 0 !important; align-items: center; justify-content: center; } .ss-msg-selectable { position: relative; padding-left: 28px; } .ss-msg-row.ss-msg-selectable > .ss-msg-select-chk { top: 50%; transform: translateY(-50%); } .ss-msg-row.ss-msg-selectable .ss-msg { padding-left: 0; } .ss-msg-select-chk { position: absolute; left: 4px; top: 12px; z-index: 2; } .ss-msg-selected { outline: 1px solid var(--ss-accent, #7c9cff); } .ss-chat-update-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: none; align-items: center; justify-content: center; gap: 12px; padding: 10px 14px; background: var(--ss-accent, #5b7cfa); color: #fff; font-size: 0.875rem; } .ss-chat-update-bar.is-visible { display: flex; } .ss-topbar-starred { flex-shrink: 0; color: var(--ss-accent, #7c9cff); } .ss-topbar-archived { flex-shrink: 0; color: var(--ss-muted); } .ss-topbar-archived:hover:not(:disabled), .ss-topbar-archived.active { color: var(--ss-text); background: rgba(255, 255, 255, 0.08); } .ss-topbar-starred:hover:not(:disabled) { color: var(--ss-accent, #7c9cff); background: rgba(124, 156, 255, 0.12); } .ss-starred-list { display: flex; flex-direction: column; gap: 8px; } .ss-starred-row { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ss-border, rgba(255, 255, 255, 0.08)); background: var(--ss-surface-2, rgba(255, 255, 255, 0.04)); transition: background 0.2s ease; } .ss-starred-row__preview-row { display: flex; align-items: flex-start; gap: 6px; width: 100%; min-width: 0; } .ss-starred-row__preview-row .ss-thread-preview-ticks-wrap { margin-top: 2px; } .ss-starred-row:hover { background: var(--ss-surface-hover, rgba(255, 255, 255, 0.08)); } .ss-starred-row__preview { font-size: 0.9rem; line-height: 1.35; } .ss-starred-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.75rem; opacity: 0.65; margin-top: 6px; width: 100%; } .ss-starred-row__meta-edited { font-style: italic; } .ss-profile-shared-host { margin-top: 8px; } .ss-profile-shared-skeleton { display: flex; flex-direction: column; gap: 10px; } .ss-profile-shared-skeleton__line { height: 72px; border-radius: 14px; background: linear-gradient( 90deg, var(--ss-surface-2, rgba(255, 255, 255, 0.06)) 0%, var(--ss-surface-3, rgba(255, 255, 255, 0.12)) 50%, var(--ss-surface-2, rgba(255, 255, 255, 0.06)) 100% ); background-size: 200% 100%; animation: ss-shimmer 1.2s ease-in-out infinite; } .ss-profile-shared-list { display: flex; flex-direction: column; gap: 10px; } .ss-profile-shared-card { display: flex; align-items: stretch; gap: 8px; border-radius: 14px; border: 1px solid var(--ss-outline-variant, rgba(255, 255, 255, 0.1)); background: var(--ss-surface-1, rgba(255, 255, 255, 0.04)); overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; } .ss-profile-shared-card:hover { border-color: var(--ss-primary); } .ss-profile-shared-card__main { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; text-align: left; background: transparent; border: none; color: inherit; min-width: 0; } .ss-profile-shared-card__author { font-weight: 700; font-size: 0.9rem; } .ss-profile-shared-card__preview { font-size: 0.85rem; opacity: 0.88; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ss-profile-shared-card__meta { font-size: 0.75rem; opacity: 0.55; } .ss-profile-shared-card__remove { align-self: center; margin-right: 10px; padding: 8px 12px; border-radius: 10px; font-size: 0.8rem; font-weight: 700; color: var(--ss-error, #f87171); background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.25); flex-shrink: 0; transition: background 0.2s ease; } .ss-profile-shared-card__remove:hover { background: rgba(248, 113, 113, 0.2); } .ss-profile-shared-more { margin-top: 10px; } @media (max-width: 900px) { .ss-attach-img-wrap, .ss-attach-img-wrap .ss-attach-img, .ss-attach-img, .ss-attach-video { max-width: min(100%, 280px); } .ss-attachment-preview, .ss-attachment-preview-img { max-width: min(100%, 180px); } .ss-topbar-actions .ss-topbar-account, .ss-topbar-actions .ss-topbar-starred { width: 38px; height: 38px; min-width: 38px; } .ss-messages { padding: 16px 14px 12px; } .ss-composer { padding: 10px 14px 14px; } } /* Visor de directos (#/live/{socket_room}) */ .ss-live-viewer { position: fixed; inset: 0; z-index: 12000; display: flex; flex-direction: column; background: var(--ss-page-bg, #0f0e0c); color: var(--ss-text, #f5f0e8); } .ss-live-viewer__header { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--ss-outline-variant, rgba(255, 255, 255, 0.08)); } .ss-live-viewer__title { margin: 0; font: 600 1.1rem/1.3 'Plus Jakarta Sans', system-ui, sans-serif; flex: 1; } .ss-live-viewer__meta { margin: 4px 0 0; font-size: 0.85rem; opacity: 0.75; } .ss-live-viewer__close { border: none; background: rgba(255, 255, 255, 0.08); color: inherit; width: 40px; height: 40px; border-radius: 12px; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background 0.2s ease; } .ss-live-viewer__close:hover { background: rgba(255, 255, 255, 0.14); } .ss-live-viewer__stage { flex: 1; min-height: 180px; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.35); position: relative; } .ss-live-viewer__video { width: 100%; max-height: 50vh; border-radius: 12px; background: #000; object-fit: contain; } .ss-live-viewer__video--dimmed { opacity: 0.18; filter: blur(2px); } .ss-live-viewer__media-badges { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 8px; } .ss-live-viewer__media-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); } .ss-live-viewer__cam-off { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; background: rgba(0, 0, 0, 0.35); } .ss-live-viewer__cam-off-icon { width: 72px; height: 72px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); } .ss-live-viewer__cam-off-title { margin: 0; color: #fff; font-size: 1rem; font-weight: 700; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); } .ss-live-viewer__placeholder { max-width: 420px; text-align: center; padding: 20px 24px; border-radius: 16px; background: var(--ss-card-surface, rgba(255, 255, 255, 0.04)); border: 1px solid var(--ss-outline-variant, rgba(255, 255, 255, 0.08)); font-size: 0.95rem; line-height: 1.5; } .ss-live-viewer__hls-hint { margin: 8px 16px 0; padding: 8px 12px; border-radius: 10px; font-size: 0.85rem; line-height: 1.4; color: rgba(255, 255, 255, 0.88); background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.12); } .ss-live-viewer__rail { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 8px 16px 0; } .ss-live-viewer__heart { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(0, 0, 0, 0.35); color: inherit; font: inherit; cursor: pointer; transition: transform 0.18s ease, background 0.18s ease; } .ss-live-viewer__heart:hover { background: rgba(0, 0, 0, 0.5); } .ss-live-viewer__heart--pulse { transform: scale(1.08); } .ss-live-viewer__heart-icon { font-size: 1.15rem; line-height: 1; color: #f472b6; } .ss-live-viewer__hearts-count { font-size: 0.9rem; font-weight: 700; min-width: 1.2em; text-align: center; } .ss-live-viewer__comments { display: flex; flex-direction: column; max-height: 42vh; border-top: 1px solid var(--ss-outline-variant, rgba(255, 255, 255, 0.08)); } .ss-live-viewer__comments-list { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; } .ss-live-viewer__comment { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); } .ss-live-viewer__comment-body { font-size: 0.9rem; opacity: 0.92; } .ss-live-viewer__comment--system { background: rgba(232, 180, 160, 0.12); border: 1px solid rgba(232, 180, 160, 0.35); } .ss-live-viewer__comment-body--system { font-weight: 600; opacity: 0.95; color: #f3d2c4; } .ss-live-viewer__empty { margin: 0; opacity: 0.65; font-size: 0.9rem; } .ss-live-viewer__composer { display: flex; gap: 8px; padding: 12px 16px 16px; } .ss-live-viewer__input { flex: 1; border-radius: 12px; border: 1px solid var(--ss-outline-variant, rgba(255, 255, 255, 0.12)); background: rgba(0, 0, 0, 0.2); color: inherit; padding: 10px 14px; font: inherit; } .ss-live-viewer__send { border: none; border-radius: 12px; padding: 10px 16px; font-weight: 600; cursor: pointer; background: var(--ss-accent, #8b5cf6); color: #fff; transition: opacity 0.2s ease; } .ss-live-viewer__send:disabled { opacity: 0.5; cursor: not-allowed; } .ss-live-viewer--ended { position: fixed; inset: 0; z-index: 10050; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; } .ss-live-viewer__ended-actions { margin-top: 8px; } /* Cola de reportes (moderadores) */ .ss-topbar-reports { position: relative; } .ss-topbar-reports-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #f59e0b; color: #1a1208; font-size: 0.65rem; font-weight: 700; line-height: 16px; text-align: center; pointer-events: none; box-shadow: 0 0 0 2px var(--ss-surface, #141824); } .ss-mod-report-section { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ss-outline-variant, rgba(255, 255, 255, 0.08)); } .ss-mod-report-section-title { margin: 0 0 8px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; } .ss-mod-report-moderate-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ss-mod-report-select { flex: 1; min-width: 140px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--ss-outline-variant, rgba(255, 255, 255, 0.12)); background: rgba(0, 0, 0, 0.2); color: inherit; font: inherit; } .ss-mod-report-action--danger { background: rgba(239, 68, 68, 0.2); color: #fca5a5; } .ss-mod-reports-header-title { display: flex; flex-direction: column; gap: 4px; } .ss-mod-reports-header-badge { font-size: 0.75rem; font-weight: 600; color: #fbbf24; } .ss-mod-reports-overlay { position: fixed; inset: 0; z-index: 12000; background: rgba(8, 10, 18, 0.72); backdrop-filter: blur(6px); display: flex; align-items: stretch; justify-content: flex-end; padding: 0; } .ss-mod-reports-panel { width: min(420px, 100vw); max-width: 100%; height: 100%; background: var(--ss-surface, #141824); border-left: 1px solid var(--ss-outline-variant, rgba(255, 255, 255, 0.1)); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; animation: ss-mod-slide-in 0.22s ease; } @keyframes ss-mod-slide-in { from { transform: translateX(100%); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } } .ss-mod-reports-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; border-bottom: 1px solid var(--ss-outline-variant, rgba(255, 255, 255, 0.08)); } .ss-mod-reports-header h2 { margin: 0; font-size: 1.1rem; font-weight: 700; } .ss-mod-reports-close { font-size: 1.5rem; line-height: 1; min-width: 40px; min-height: 40px; } .ss-mod-reports-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; } .ss-mod-reports-filter.is-active { background: var(--ss-accent, #8b5cf6); color: #fff; } .ss-mod-reports-list { flex: 1; overflow: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 10px; } .ss-mod-report-card { border: 1px solid var(--ss-outline-variant, rgba(255, 255, 255, 0.1)); border-radius: 14px; padding: 12px; background: rgba(255, 255, 255, 0.03); transition: border-color 0.2s ease, background 0.2s ease; } .ss-mod-report-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .ss-mod-report-badge { font-size: 0.72rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; } .ss-mod-report-badge--open { background: rgba(251, 191, 36, 0.2); color: #fbbf24; } .ss-mod-report-badge--reviewing { background: rgba(96, 165, 250, 0.2); color: #60a5fa; } .ss-mod-report-badge--resolved { background: rgba(52, 211, 153, 0.2); color: #34d399; } .ss-mod-report-badge--dismissed { background: rgba(148, 163, 184, 0.2); color: #94a3b8; } .ss-mod-report-reason { margin: 0 0 4px; font-size: 0.9rem; line-height: 1.45; } .ss-mod-report-meta { margin: 0 0 8px; font-size: 0.78rem; opacity: 0.72; } .ss-mod-report-target-label { margin: 0 0 6px; font-size: 0.82rem; opacity: 0.88; } .ss-mod-report-wp-link { display: inline-block; margin-bottom: 8px; font-size: 0.8rem; font-weight: 600; color: var(--ss-accent, #a78bfa); text-decoration: none; } .ss-mod-report-wp-link:hover { text-decoration: underline; } .ss-mod-report-actions { display: flex; flex-wrap: wrap; gap: 6px; } .ss-mod-report-action { font-size: 0.78rem; padding: 6px 10px; } .ss-mod-reports-footer { padding: 12px 16px 16px; border-top: 1px solid var(--ss-outline-variant, rgba(255, 255, 255, 0.08)); } .ss-mod-reports-loading, .ss-mod-reports-empty { text-align: center; opacity: 0.75; padding: 24px 8px; } body.ss-mod-reports-open { overflow: hidden; } /* —— Llamada grupal (Mediasoup SFU) —— */ body.ss-group-call-active { overflow: hidden; } body.ss-group-call-active .ss-group-call-overlay[data-ui="group-call-overlay"] { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; z-index: 100060 !important; padding: 0 !important; margin: 0 !important; border: none !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; } body.ss-group-call-active .ss-group-call-overlay .ss-group-call-panel { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; border: none !important; margin: 0 !important; flex: 1 !important; } .ss-group-call-overlay { position: fixed; inset: 0; z-index: 100060; background: #080c14; display: flex; align-items: stretch; justify-content: stretch; padding: 0; } .ss-group-call-panel { width: 100%; height: 100%; max-width: none; max-height: none; display: flex; flex-direction: column; background: radial-gradient(ellipse at top, rgba(42, 36, 62, 0.55), rgba(8, 6, 16, 0.98)); border: none; border-radius: 0; overflow: hidden; box-shadow: none; } .ss-group-call-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .ss-group-call-header-copy { min-width: 0; flex: 1; } .ss-group-call-header-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ss-group-call-title { margin: 0; font-size: 18px; color: #eef2ff; } .ss-group-call-status-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; border: 1px solid transparent; } .ss-group-call-status-badge--connecting { color: #fde68a; background: rgba(251, 191, 36, 0.14); border-color: rgba(251, 191, 36, 0.35); } .ss-group-call-status-badge--live { color: #86efac; background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.35); } .ss-group-call-status-badge--error { color: #fca5a5; background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.35); } .ss-group-call-status { margin: 6px 0 0; font-size: 13px; color: rgba(238, 242, 255, 0.62); } .ss-group-call-back, .ss-group-call-close { border: 0; background: rgba(255, 255, 255, 0.08); color: #eef2ff; width: 36px; height: 36px; border-radius: 999px; cursor: pointer; flex-shrink: 0; transition: background 0.2s ease, transform 0.2s ease; } .ss-group-call-back:hover, .ss-group-call-close:hover { background: rgba(255, 255, 255, 0.14); } .ss-group-call-back { font-size: 18px; line-height: 1; font-weight: 600; } .ss-group-call-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 12px; } .ss-group-call-grid { flex: 1; min-height: 0; display: grid; gap: 8px; padding: 8px; overflow: hidden; align-content: stretch; box-sizing: border-box; } .ss-group-call-grid[data-count="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; } .ss-group-call-grid[data-count="2"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } @media (min-width: 900px) { .ss-group-call-grid[data-count="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } } .ss-group-call-grid[data-count="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .ss-group-call-grid[data-count="3"] .ss-group-call-tile:nth-child(3) { grid-column: 1 / -1; } .ss-group-call-grid[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .ss-group-call-grid[data-count="5"], .ss-group-call-grid[data-count="6"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; } .ss-group-call-grid[data-count="7"], .ss-group-call-grid[data-count="8"], .ss-group-call-grid[data-count="9"] { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; } .ss-group-call-tile { position: relative; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); min-height: 0; height: 100%; aspect-ratio: unset; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .ss-group-call-tile:hover { transform: translateY(-2px); border-color: rgba(124, 108, 255, 0.45); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); } .ss-group-call-tile video { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center center; background: #0a0e14; z-index: 2; transition: opacity 0.2s ease; } .ss-group-call-tile-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #141a24 0%, #0a0e14 100%); z-index: 1; transition: opacity 0.2s ease; } .ss-group-call-tile-fallback-letter { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800; color: #eef2ff; background: rgba(124, 108, 255, 0.32); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } .ss-group-call-tile video.is-mirror { transform: scaleX(-1); } .ss-group-call-tile-avatar { display: none !important; } .ss-group-call-tile.is-local { border-color: rgba(124, 108, 255, 0.45); } .ss-group-call-tile.is-speaking { border-color: #23a559 !important; border-width: 3px; box-shadow: 0 0 0 2px rgba(35, 165, 89, 0.5), 0 0 22px rgba(35, 165, 89, 0.42), 0 8px 28px rgba(0, 0, 0, 0.28); z-index: 2; } .ss-group-call-tile.is-speaking:hover { transform: none; border-color: #23a559 !important; box-shadow: 0 0 0 2px rgba(35, 165, 89, 0.5), 0 0 22px rgba(35, 165, 89, 0.42), 0 8px 28px rgba(0, 0, 0, 0.28); } .ss-group-call-tile-label { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px; z-index: 3; } .ss-group-call-controls { display: flex; justify-content: center; align-items: center; padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); margin: 0 auto 8px; width: 100%; max-width: none; border: none; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; flex-wrap: nowrap; flex-shrink: 0; pointer-events: auto; } .ss-group-call-controls .ss-call-controls-dock-inner { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 10px; width: 100%; max-width: min(440px, calc(100vw - 24px)); margin: 0 auto; padding: 12px 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .ss-group-call-controls .ss-call-controls-dock-inner::-webkit-scrollbar { display: none; } .ss-group-call-controls.ss-call-controls--dock { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); background: transparent; border-top: none; } .ss-group-call-controls .ss-call-control-btn { flex: 0 0 auto; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; box-shadow: none; } .ss-group-call-controls .ss-call-control-btn.active { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.28); } .ss-group-call-controls .ss-call-control-btn.end { width: 52px; height: 52px; margin-left: 0; background: #d86b6b; border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .ss-group-call-controls .ss-call-control-btn.info { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); } .ss-group-call-btn { border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: #eef2ff; border-radius: 999px; padding: 10px 16px; cursor: pointer; font-weight: 600; } .ss-group-call-btn--danger { background: rgba(255, 59, 48, 0.2); border-color: rgba(255, 59, 48, 0.55); } /* —— Pulido global chat (paridad app / design system) —— */ .ss-chat-sidebar { background: linear-gradient(180deg, var(--ss-sidebar-bg) 0%, var(--ss-glass) 100%); } .ss-brand { padding-bottom: 4px; } .ss-search { border-radius: 12px; min-height: 42px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .ss-composer-pill { border-radius: 16px; border: 1px solid var(--ss-border); background: var(--ss-surface-subtle); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .ss-composer-pill:focus-within { border-color: var(--ss-brand-tab-border); box-shadow: 0 0 0 2px var(--ss-brand-soft); } .ss-composer-action.ss-send, .ss-composer-action[data-ui="composer-send"] { box-shadow: none; } .ss-thread-preview { font-size: 0.8125rem; line-height: 1.35; } .ss-msg-bubble { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .ss-topbar { border-bottom: 1px solid var(--ss-glass-border); background: transparent; } /* Sidebar refresh 2026 */ body.soulfulsync-web-chat-page .ss-chat-sidebar { background: var(--ss-sidebar-bg, var(--ss-bg-card)); } .ss-brand-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; } /* ===== Premium polish 2026 — glass, presencia, detalle visual ===== */ #soulfulsync-web-chat-ui { position: relative; isolation: isolate; } #soulfulsync-web-chat-ui::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 50% at 0% 0%, var(--ss-body-glow-1) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 100% 100%, var(--ss-body-glow-2) 0%, transparent 50%); opacity: 0.85; } #soulfulsync-web-chat-ui > * { position: relative; z-index: 1; } .ss-chat-sidebar { background: color-mix(in srgb, var(--ss-sidebar-bg, var(--ss-bg-card)) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-right: 1px solid var(--ss-glass-border); } .ss-chat-main { background: radial-gradient(ellipse 120% 80% at 50% -20%, var(--ss-body-glow-1) 0%, transparent 45%), var(--ss-main-area-bg); } .ss-topbar { padding: 14px 14px 10px; background: transparent; border-bottom: 1px solid var(--ss-glass-border); } .ss-user-profile { padding: 2px 4px; } .ss-user-profile__avatar { box-shadow: none; } .ss-brand-icon { box-shadow: 0 4px 16px var(--ss-brand-glow); } .ss-sync-pill { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 2px 8px; border-radius: var(--ss-radius-pill); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; border: 1px solid transparent; } .ss-sync-pill::before { content: none; } .ss-topbar-actions .ss-sync-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; } .ss-sync-pill--live { color: var(--ss-success); background: var(--ss-success-soft); border-color: color-mix(in srgb, var(--ss-success) 35%, transparent); } .ss-sync-pill--live::before { animation: ss-online-dot-pulse 2s ease-in-out infinite; background: var(--ss-success); } .ss-sync-pill--rest { color: var(--ss-brand); background: var(--ss-brand-soft); border-color: var(--ss-brand-tab-border); } .ss-sync-pill--pending { color: var(--ss-brand); background: var(--ss-brand-soft); border-color: var(--ss-brand-tab-border); } .ss-sync-pill--pending::before { animation: ss-connection-pulse 1.4s ease-in-out infinite; } .ss-sync-pill--warn { color: var(--ss-danger); background: var(--ss-danger-soft); border-color: color-mix(in srgb, var(--ss-danger) 30%, transparent); } .ss-inbox-nav { border-bottom-color: var(--ss-glass-border); } .ss-segmented.ss-tabs { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06); } #soulfulsync-web-chat-ui[data-theme="dark"] .ss-segmented.ss-tabs { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25); } .ss-inbox-nav-action:hover { border-color: var(--ss-brand-tab-border); color: var(--ss-brand); box-shadow: 0 0 12px var(--ss-brand-soft); } .ss-thread { transition: background var(--ss-transition), border-color var(--ss-transition), transform 0.18s ease, box-shadow var(--ss-transition); } @media (hover: hover) and (pointer: fine) { .ss-thread:hover { transform: translateX(2px); box-shadow: 0 4px 14px color-mix(in srgb, var(--ss-brand) 12%, transparent); } } .ss-thread.active { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ss-brand) 25%, transparent), 0 6px 20px color-mix(in srgb, var(--ss-brand) 14%, transparent); } .ss-conv-header { background: color-mix(in srgb, var(--ss-panel-blur-bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ss-glass-border); box-shadow: 0 4px 24px color-mix(in srgb, #000 8%, transparent); } .ss-conv-title .ss-avatar { position: relative; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-brand) 22%, transparent); } .ss-conv-header-online-dot { right: -1px; bottom: -1px; width: 12px; height: 12px; border: 2px solid var(--ss-bg-card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ss-online) 40%, transparent); } .ss-typing-line.ss-presence-line--online, .ss-typing-line.ss-presence-line--idle, .ss-typing-line.ss-presence-line--offline, .ss-typing-line.ss-presence-line--muted { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-weight: 600; font-size: 0.8125rem; max-width: 100%; overflow: visible; white-space: nowrap; text-overflow: clip; } .ss-presence-line__text { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ss-presence-line__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ss-muted); } .ss-presence-line--online .ss-presence-line__dot { background: var(--ss-online); box-shadow: 0 0 8px color-mix(in srgb, var(--ss-online) 55%, transparent); animation: ss-online-dot-pulse 2.4s ease-in-out infinite; } .ss-presence-line--online .ss-presence-line__text { color: var(--ss-online); } .ss-presence-line--idle .ss-presence-line__dot { background: #eab308; } .ss-presence-line--idle .ss-presence-line__text { color: #ca8a04; } #soulfulsync-web-chat-ui[data-theme="dark"] .ss-presence-line--idle .ss-presence-line__text { color: #facc15; } .ss-presence-line--offline .ss-presence-line__text { color: var(--ss-muted); } .ss-presence-line--muted .ss-presence-line__text { color: var(--ss-muted); } .ss-conv-actions .ss-btn { border-radius: 12px; transition: transform 0.15s ease, box-shadow 0.15s ease, background var(--ss-transition); } @media (hover: hover) and (pointer: fine) { .ss-conv-actions .ss-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--ss-brand) 18%, transparent); } } .ss-conv-actions .ss-btn.primary { background: var(--ss-gradient-brand); border-color: transparent; color: #fff; box-shadow: 0 4px 16px var(--ss-brand-glow); } .ss-msg-day-separator-wrap { margin: 16px 0 12px; } .ss-msg-day-separator { padding: 5px 14px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--ss-radius-pill); background: color-mix(in srgb, var(--ss-bg-card) 85%, transparent); border: 1px solid var(--ss-glass-border); box-shadow: 0 2px 8px color-mix(in srgb, #000 6%, transparent); backdrop-filter: blur(8px); } #soulfulsync-web-chat-ui[data-theme="dark"] .ss-msg.me { background: var(--ss-msg-me-solid); border-color: var(--ss-msg-own-border); } .ss-composer { background: color-mix(in srgb, var(--ss-panel-blur-bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--ss-glass-border); } .ss-composer-pill:focus-within { box-shadow: var(--ss-composer-focus-ring), 0 0 20px var(--ss-brand-soft); } .ss-composer-action.ss-send, .ss-composer-action[data-ui="composer-send"] { background: var(--ss-surface-subtle); border: 1px solid var(--ss-border); color: var(--ss-brand); box-shadow: none; } .ss-composer-action.ss-send:hover:not(:disabled), .ss-composer-action[data-ui="composer-send"]:hover:not(:disabled) { background: var(--ss-brand-soft); border-color: color-mix(in srgb, var(--ss-brand) 35%, var(--ss-border)); color: var(--ss-brand); } .ss-online-avatars__avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-online) 50%, transparent), 0 4px 12px color-mix(in srgb, var(--ss-online) 20%, transparent); } .ss-search { background: color-mix(in srgb, var(--ss-bg-card) 65%, transparent); border-color: var(--ss-glass-border); box-shadow: inset 0 1px 2px color-mix(in srgb, #000 4%, transparent); } .ss-search:focus { border-color: var(--ss-brand-tab-border); box-shadow: var(--ss-composer-focus-ring); } @media (prefers-reduced-motion: reduce) { .ss-thread-online-dot, .ss-conv-header-online-dot, .ss-presence-line--online .ss-presence-line__dot, .ss-sync-pill--live::before { animation: none; } .ss-thread:hover { transform: none; } } /* —— Perfil del usuario (cabecera lateral) —— */ .ss-user-profile { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 4px 6px 4px 4px; margin: 0; border: none; background: transparent; cursor: pointer; text-align: left; color: inherit; font: inherit; border-radius: 12px; transition: background var(--ss-transition); } .ss-user-profile:hover { background: var(--ss-tab-hover-bg); } .ss-user-profile__avatar { position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-brand) 28%, transparent); } .ss-user-profile__avatar .ss-avatar, .ss-user-profile__avatar .ss-avatar-img { width: 100%; height: 100%; border-radius: inherit; } .ss-user-profile__online-dot { position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--ss-success); border: 2px solid var(--ss-bg-card); } .ss-user-profile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .ss-user-profile__name { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-user-profile__status { font-size: 0.75rem; font-weight: 500; color: var(--ss-muted); } .ss-user-profile__staff { font-size: 0.65rem; color: var(--ss-muted); } .ss-topbar-actions .ss-sync-pill { margin: 0; align-self: center; } .ss-user-profile__status[hidden] { display: none !important; } .ss-user-profile__status--warn { color: var(--ss-danger); } .ss-user-profile__status--pending { color: var(--ss-muted); } /* —— Amigos (pestaña distinta de «Nuevo chat») —— */ .ss-friends-intro { display: none; } .ss-friend-name-line { display: flex; align-items: center; gap: 8px; min-width: 0; } .ss-friend-presence-pill { display: none; } /* —— Modal mensajes destacados —— */ .ss-starred-modal { width: min(480px, 94vw); max-height: min(85vh, 720px); display: flex; flex-direction: column; padding: 0; overflow: hidden; } .ss-starred-modal-head { align-items: flex-start; gap: 12px; padding: 20px 20px 16px; margin: 0; } .ss-starred-modal-head .ss-modal-close { margin-top: 2px; } .ss-starred-modal-head-text { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; } .ss-starred-modal-head-text .ss-icon { color: #eab308; flex-shrink: 0; width: 22px; height: 22px; min-width: 22px; min-height: 22px; margin-top: 0; } .ss-starred-modal-head-text .ss-icon svg { width: 22px; height: 22px; } .ss-starred-modal-title-wrap h3 { margin: 0 0 4px; font-size: 1.125rem; } .ss-starred-modal-sub { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--ss-muted); font-weight: 500; } .ss-starred-modal-body { overflow-y: auto; flex: 1; min-height: 0; padding: 0 20px 20px; } .ss-starred-loading { display: flex; flex-direction: column; gap: 10px; } .ss-starred-skeleton { padding: 12px; border-radius: 12px; background: var(--ss-surface-subtle); border: 1px solid var(--ss-border); } .ss-starred-skeleton__line, .ss-starred-skeleton__meta { display: block; height: 10px; border-radius: 6px; background: linear-gradient( 90deg, var(--ss-tab-inactive-bg) 0%, var(--ss-tab-hover-bg) 50%, var(--ss-tab-inactive-bg) 100% ); background-size: 200% 100%; animation: ss-shimmer 1.2s ease-in-out infinite; } .ss-starred-skeleton__line { width: 85%; margin-bottom: 8px; } .ss-starred-skeleton__meta { width: 40%; height: 8px; } @keyframes ss-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .ss-starred-row { width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ss-border); background: var(--ss-surface-subtle); margin-bottom: 8px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; } .ss-starred-row__head { display: flex; align-items: center; gap: 10px; } .ss-starred-row__avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--ss-brand-soft); font-size: 0.875rem; } .ss-starred-row__thread { font-size: 0.875rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* —— Marca SoulfulSync (cabecera bandeja) —— */ .ss-brand-bar { display: flex; align-items: center; gap: 10px; padding: 0 2px 10px; margin-bottom: 2px; border-bottom: 1px solid var(--ss-glass-border); } .ss-brand-bar__logo { flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--ss-surface-subtle); border: 1px solid var(--ss-border); overflow: hidden; line-height: 0; } .ss-brand-bar__logo-img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 10px; } .ss-brand-bar__logo .ss-icon svg { width: 20px; height: 20px; color: var(--ss-brand); } .ss-brand-bar__copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .ss-brand-bar__name { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ss-text); line-height: 1.15; } #soulfulsync-web-chat-ui[data-theme="dark"] .ss-brand-bar__logo { background: var(--ss-feed-gradient-brand); border-color: rgba(184, 168, 255, 0.22); box-shadow: 0 8px 20px rgba(110, 92, 230, 0.35); } #soulfulsync-web-chat-ui[data-theme="dark"] .ss-brand-bar__logo .ss-icon svg { color: #fff; } #soulfulsync-web-chat-ui[data-theme="dark"] .ss-brand-bar__name { background: linear-gradient(135deg, #ebe6ff, var(--ss-feed-rose)); -webkit-background-clip: text; background-clip: text; color: transparent; } #soulfulsync-web-chat-ui:not([data-theme="dark"]) .ss-brand-bar__logo { background: var(--ss-feed-gradient-brand); border-color: rgba(110, 92, 230, 0.22); box-shadow: 0 6px 16px rgba(110, 92, 230, 0.22); } #soulfulsync-web-chat-ui:not([data-theme="dark"]) .ss-brand-bar__logo .ss-icon svg { color: #fff; } .ss-brand-bar__site { font-size: 0.6875rem; font-weight: 500; color: var(--ss-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-brand-bar--compact { justify-content: space-between; } .ss-brand-bar__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .ss-brand-bar__action { width: 36px; height: 36px; min-width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ss-radius-sm); border: 1px solid var(--ss-border); background: var(--ss-surface-subtle); color: var(--ss-brand); transition: background var(--ss-transition), border-color var(--ss-transition), color var(--ss-transition); } .ss-brand-bar__action:hover:not(:disabled) { color: var(--ss-brand); background: var(--ss-brand-soft); border-color: color-mix(in srgb, var(--ss-brand) 32%, var(--ss-border)); } .ss-topbar .ss-topbar-row { padding-top: 4px; } /* —— Activos (franja moderna, sin bloque verde neón) —— */ .ss-active-now { margin: 0 0 14px; padding: 0; } .ss-active-now__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 0 2px; } .ss-active-now__title { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ss-text); } .ss-active-now__count { font-size: 0.6875rem; font-weight: 700; color: var(--ss-muted); padding: 2px 8px; border-radius: var(--ss-radius-pill); background: var(--ss-tab-inactive-bg); border: 1px solid var(--ss-border); } .ss-active-now__scroll { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; scroll-snap-type: x proximity; } .ss-active-now__chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: none; background: transparent; cursor: pointer; scroll-snap-align: start; max-width: 64px; transition: transform 0.18s ease; } @media (hover: hover) and (pointer: fine) { .ss-active-now__chip:hover { transform: translateY(-2px); } } .ss-active-now__ring { position: relative; padding: 2px; border-radius: 50%; background: linear-gradient( 145deg, color-mix(in srgb, var(--ss-success) 70%, transparent), color-mix(in srgb, var(--ss-brand) 40%, transparent) ); } .ss-active-now__avatar { display: block; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--ss-bg-card); border: 2px solid var(--ss-sidebar-bg, var(--ss-bg-card)); } .ss-active-now__avatar .ss-avatar, .ss-active-now__avatar .ss-avatar-img { width: 100%; height: 100%; border-radius: 50%; } .ss-active-now__dot { position: absolute; right: 4px; bottom: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ss-success); border: 2px solid var(--ss-bg-card); box-sizing: border-box; } .ss-active-now__name { font-size: 0.6875rem; font-weight: 600; color: var(--ss-muted); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-active-now__chip:hover .ss-active-now__name { color: var(--ss-text); } /* Pre-join grupal (WhatsApp) */ .ss-group-prejoin-backdrop { z-index: 10050; } .ss-group-prejoin-modal { width: min(360px, 92vw); padding: 22px 20px 18px; text-align: center; border-radius: 20px; background: linear-gradient(165deg, rgba(28, 24, 48, 0.96), rgba(12, 14, 22, 0.98)); border: 1px solid rgba(255, 255, 255, 0.12); } .ss-group-prejoin-title { margin: 0 0 12px; font-size: 1.1rem; font-weight: 700; color: #f8fafc; } .ss-group-prejoin-preview { border-radius: 16px; overflow: hidden; background: rgba(0, 0, 0, 0.35); margin-bottom: 12px; min-height: 200px; display: flex; align-items: center; justify-content: center; } .ss-group-prejoin-video { width: 100%; max-height: 280px; object-fit: cover; transform: scaleX(-1); } .ss-group-prejoin-audio-icon { font-size: 3rem; opacity: 0.85; } .ss-group-prejoin-hint { margin: 0 0 16px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.78); line-height: 1.4; } .ss-group-prejoin-actions { display: flex; gap: 10px; justify-content: center; } .ss-group-prejoin-ignore { flex: 1; } .ss-group-prejoin-join { flex: 1; } /* Call info grupal */ .ss-group-call-info-backdrop { z-index: 100100; } .ss-group-call-info-modal { width: min(400px, 94vw); max-height: 80vh; overflow: auto; padding: 18px 16px; border-radius: 16px; background: var(--ss-bg-card, #1a1d28); border: 1px solid var(--ss-border, rgba(255, 255, 255, 0.1)); } .ss-group-call-info-title { margin: 0 0 12px; font-size: 1rem; font-weight: 800; } .ss-group-call-info-section { margin: 12px 0 8px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ss-muted, #94a3b8); } .ss-group-call-info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--ss-border, #334155) 55%, transparent); font-size: 0.875rem; } .ss-group-call-info-avatar { width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, rgba(123, 97, 255, 0.35), rgba(26, 30, 51, 0.85)); color: #f8fafc; font-weight: 700; font-size: 0.85rem; overflow: hidden; } .ss-group-call-info-avatar img { width: 100%; height: 100%; object-fit: cover; } .ss-group-call-info-name { flex: 1; min-width: 0; font-weight: 600; } .ss-group-call-info-row--pending { padding-right: 4px; } .ss-group-call-ring-btn { padding: 4px 12px; font-size: 0.75rem; border-radius: 999px; } .ss-group-call-info-close { margin-top: 14px; width: 100%; } /* ——— Círculos privados (paridad app) ——— */ :root { --ss-circle-warm: #e8789a; } .ss-thread--circle, .ss-conv-header--circle, .ss-group-thread-banner--circle, .ss-contact-info-avatar-wrap--circle, .ss-circles-list-row--circle { --ss-circle-accent: var(--ss-circle-warm); } .ss-thread--circle .ss-thread-name-wrap { gap: 4px; } .ss-thread-circle-badge { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 6px; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.02em; color: var(--ss-circle-accent, var(--ss-circle-warm)); background: var( --ss-circle-badge-bg, color-mix(in srgb, var(--ss-circle-accent, var(--ss-circle-warm)) 16%, transparent) ); border: 1px solid var( --ss-circle-badge-border, color-mix(in srgb, var(--ss-circle-accent, var(--ss-circle-warm)) 48%, transparent) ); } .ss-thread-circle-icon { color: var(--ss-circle-accent, var(--ss-circle-warm)); } .ss-avatar--circle-space { border-radius: 38%; overflow: hidden; } .ss-avatar--circle-space.ss-avatar--circle-photo { border: 2px solid var( --ss-circle-surface-border, color-mix(in srgb, var(--ss-circle-accent, var(--ss-circle-warm)) 85%, transparent) ); } .ss-circle-preset-art-inner { width: 100%; height: 100%; border-radius: inherit; } .ss-circle-preset-art { display: flex; align-items: center; justify-content: center; /* Size comes from parent (.ss-avatar, .ss-thread-settings-avatar, inline style). */ } .ss-circle-preset-art-inner { position: relative; overflow: hidden; display: block; color: rgba(255, 255, 255, 0.95); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 4px 10px var(--ss-circle-shadow, rgba(0, 0, 0, 0.18)); } .ss-circle-preset-art__accent { position: absolute; top: 10%; right: 12%; opacity: 0.35; line-height: 0; pointer-events: none; z-index: 0; } .ss-circle-preset-art__blob { position: absolute; bottom: 12%; left: 14%; width: 22%; height: 22%; border-radius: 50%; background: rgba(255, 255, 255, 0.14); pointer-events: none; z-index: 0; } .ss-circle-preset-art__main { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; line-height: 0; } .ss-group-thread-banner--circle { border-color: var( --ss-circle-surface-border, color-mix(in srgb, var(--ss-circle-accent, var(--ss-circle-warm)) 35%, var(--ss-border)) ); background: linear-gradient( 145deg, var(--ss-circle-surface-tint, color-mix(in srgb, var(--ss-circle-accent, var(--ss-circle-warm)) 14%, var(--ss-bg-card))) 0%, var(--ss-bg-card) 58% ); } .ss-group-thread-banner--circle .ss-group-thread-banner-label, .ss-group-thread-banner--circle .ss-group-thread-banner-link { color: var(--ss-circle-accent, var(--ss-circle-warm)); } .ss-group-thread-banner--circle .ss-group-thread-banner-avatar { border-radius: 34%; } .ss-circles-sheet-body { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 10px; } .ss-circles-sheet-body--scroll { max-height: min(62vh, 520px); overflow: auto; } .ss-circles-sheet--tall { max-height: min(88vh, 720px); } .ss-circles-create-chooser-title { margin: 0 0 8px; font-size: 0.9375rem; font-weight: 700; } .ss-circles-create-cards { display: flex; flex-direction: column; gap: 8px; } .ss-circles-create-card { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ss-border); background: var(--ss-bg-card); text-align: left; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .ss-circles-create-card:hover { border-color: color-mix(in srgb, var(--ss-brand) 35%, var(--ss-border)); box-shadow: var(--ss-soft-card-shadow, 0 8px 24px rgba(0, 0, 0, 0.1)); } .ss-circles-create-card--circle { border-color: color-mix(in srgb, var(--ss-circle-warm) 30%, var(--ss-border)); } .ss-circles-create-card--circle .ss-circles-create-card-icon { color: var(--ss-circle-warm); } .ss-circles-create-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ss-circles-create-card-title { font-size: 0.9375rem; font-weight: 700; color: var(--ss-fg); } .ss-circles-create-card-body { font-size: 0.8125rem; line-height: 1.35; color: var(--ss-muted); } .ss-circles-list-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--ss-border); background: var(--ss-bg-card); text-align: left; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .ss-circles-list-row:hover { border-color: color-mix(in srgb, var(--ss-brand) 35%, var(--ss-border)); } .ss-circles-list-row--circle:hover { border-color: var( --ss-circle-surface-border, color-mix(in srgb, var(--ss-circle-accent, var(--ss-circle-warm)) 38%, var(--ss-border)) ); } .ss-circles-list-row--action { margin-top: 2px; } .ss-circles-list-avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 38%; overflow: hidden; } .ss-circles-list-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ss-circles-list-row-title { font-size: 0.9375rem; font-weight: 700; color: var(--ss-fg); } .ss-circles-list-row-sub { font-size: 0.8125rem; color: var(--ss-muted); line-height: 1.35; } .ss-circles-trust-hero, .ss-circles-detail-hero { padding: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--ss-circle-warm) 30%, var(--ss-border)); background: linear-gradient( 135deg, color-mix(in srgb, var(--ss-circle-warm) 18%, var(--ss-bg-card)), color-mix(in srgb, var(--ss-brand) 10%, var(--ss-bg-card)) ); } .ss-circles-trust-hero-title { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: var(--ss-fg); } .ss-circles-trust-hero-body, .ss-circles-section-sub, .ss-circles-empty-body { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--ss-muted); } .ss-circles-empty-title { margin: 8px 0 4px; font-weight: 700; } .ss-circles-loading, .ss-circles-error { padding: 12px 4px; font-size: 0.875rem; color: var(--ss-muted); } .ss-circles-error { color: var(--ss-danger, #e57373); } .ss-circles-type-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; } .ss-circles-type-chip { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ss-border); background: var(--ss-bg-card); text-align: left; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .ss-circles-type-chip.active { border-color: color-mix(in srgb, var(--ss-circle-warm) 55%, var(--ss-border)); background: color-mix(in srgb, var(--ss-circle-warm) 10%, var(--ss-bg-card)); } .ss-circles-type-chip-title { font-size: 0.875rem; font-weight: 700; } .ss-circles-type-chip-sub { font-size: 0.75rem; color: var(--ss-muted); } .ss-circles-preset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; } .ss-circles-preset-btn { aspect-ratio: 1; padding: 0; border-radius: 14px; border: 2px solid transparent; background: transparent; cursor: pointer; } .ss-circles-preset-btn.active { border-color: var(--ss-circle-warm); } .ss-circles-preset-btn-art { width: 100%; height: 100%; border-radius: 12px; overflow: hidden; } .ss-circles-card { padding: 14px; border-radius: 16px; border: 1px solid var(--ss-border); background: var(--ss-bg-card); box-shadow: var(--ss-soft-card-shadow, 0 6px 18px rgba(0, 0, 0, 0.08)); } .ss-circles-card-title { margin: 0 0 6px; font-size: 0.9375rem; font-weight: 700; } .ss-circles-card-kpi { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; color: var(--ss-circle-warm); } .ss-circles-card-subtitle { margin: 10px 0 6px; font-size: 0.8125rem; font-weight: 700; } .ss-circles-card-actions { margin-top: 10px; } .ss-circles-warm-btn.primary, .ss-circles-warm-btn.ss-btn.primary { background: var(--ss-circle-warm); border-color: var(--ss-circle-warm); color: #fff; } .ss-circles-info-banner { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ss-brand) 12%, var(--ss-bg-card)); border: 1px solid color-mix(in srgb, var(--ss-brand) 25%, var(--ss-border)); font-size: 0.8125rem; } .ss-circles-checkin-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 0.875rem; } .ss-circles-checkin-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ss-circle-warm); flex-shrink: 0; } .ss-circles-detail-head-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; } .ss-circles-detail-hero { display: flex; gap: 12px; align-items: flex-start; } .ss-circles-detail-avatar { width: 56px; height: 56px; flex-shrink: 0; border-radius: 38%; overflow: hidden; } .ss-circles-detail-meta, .ss-circles-detail-desc, .ss-circles-goal-text { margin: 4px 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--ss-muted); } .ss-circles-goal-text { color: var(--ss-fg); font-weight: 600; } @media (min-width: 520px) { .ss-circles-type-grid { grid-template-columns: 1fr 1fr; } } /* Un solo header: en desktop no forzar el menú móvil (eso duplicaba la barra). */ @media (min-width: 1024px) { body.soulfulsync-web-chat-page .ssx-desktop-header { display: flex !important; visibility: visible !important; pointer-events: auto !important; } body.soulfulsync-web-chat-page .ssx-mobile-header, body.soulfulsync-web-chat-page .ssx-mobile-topbar { display: none !important; visibility: hidden !important; pointer-events: none !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } } @media (max-width: 1023px) { body.soulfulsync-web-chat-page .ssx-desktop-header, body.soulfulsync-web-chat-page .ssx-desktop-header-spacer { display: none !important; } body.soulfulsync-web-chat-page .ssx-mobile-header { display: flex !important; visibility: visible !important; pointer-events: auto !important; } body.soulfulsync-web-chat-page #soulfulsync-web-chat-ui { width: calc(100% - 16px); max-width: none; margin: 8px auto 16px; border-radius: 12px; } } body.soulfulsync-web-chat-page #soulfulsync-web-chat-ui .ss-chat-appbar { display: none !important; }