/* ============================================
SHADOW SYSTEM
============================================ */
:root {
/* ==========================================
BOX SHADOW VARIABLES
========================================== */
/* Subtle shadows for UI elements */
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-md: 0 6px 12px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* Custom extended shadows */
--shadow-3xl: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
--shadow-4xl: 0 45px 80px -20px rgba(0, 0, 0, 0.35);
/* Special shadows */
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
--shadow-none: 0 0 #0000;
/* ==========================================
DROP SHADOW VARIABLES (for images/icons)
========================================== */
/* Warm-tinted drop shadows (brand-specific) */
--drop-shadow-sm: drop-shadow(0 2px 4px rgba(60, 46, 3, 0.2));
--drop-shadow-md: drop-shadow(0 6px 12px rgba(60, 46, 3, 0.3));
--drop-shadow-lg: drop-shadow(0 15px 15px rgba(60, 46, 3, 0.5));
--drop-shadow-xl: drop-shadow(0 25px 25px rgba(60, 46, 3, 0.4));
--drop-shadow-2xl: drop-shadow(0 25px 25px rgba(60, 46, 3, 0.63));
/* Neutral drop shadows (for general use) */
--drop-shadow-neutral-sm: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
--drop-shadow-neutral-md: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
--drop-shadow-neutral-lg: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.2));
--drop-shadow-neutral-xl: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.25));
/* ==========================================
HOVER STATE SHADOWS
========================================== */
--shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.13);
--shadow-hover-strong: 0 8px 24px rgba(0, 0, 0, 0.18);
}
/* ==========================================
TAILWIND SHADOW UTILITY OVERRIDES
========================================== */
.shadow-xs {
box-shadow: var(--shadow-xs);
}
.shadow-sm {
box-shadow: var(--shadow-sm);
}
.shadow {
box-shadow: var(--shadow);
}
.shadow-md {
box-shadow: var(--shadow-md);
}
.shadow-lg {
box-shadow: var(--shadow-lg);
}
.shadow-xl {
box-shadow: var(--shadow-xl);
}
.shadow-2xl {
box-shadow: var(--shadow-2xl);
}
.shadow-3xl {
box-shadow: var(--shadow-3xl);
}
.shadow-4xl {
box-shadow: var(--shadow-4xl);
}
.shadow-inner {
box-shadow: var(--shadow-inner);
}
.shadow-none {
box-shadow: var(--shadow-none);
}
/* ==========================================
DROP SHADOW UTILITY CLASSES
========================================== */
/* Warm-tinted drop shadows (brand colors) */
.drop-shadow-sm {
filter: var(--drop-shadow-sm);
}
.drop-shadow-md {
filter: var(--drop-shadow-md);
}
.drop-shadow-lg {
filter: var(--drop-shadow-lg);
}
.drop-shadow-xl {
filter: var(--drop-shadow-xl);
}
.drop-shadow-2xl {
filter: var(--drop-shadow-2xl);
}
/* Neutral drop shadows */
.drop-shadow-neutral-sm {
filter: var(--drop-shadow-neutral-sm);
}
.drop-shadow-neutral-md {
filter: var(--drop-shadow-neutral-md);
}
.drop-shadow-neutral-lg {
filter: var(--drop-shadow-neutral-lg);
}
.drop-shadow-neutral-xl {
filter: var(--drop-shadow-neutral-xl);
}
.drop-shadow-none {
filter: drop-shadow(0 0 #0000);
}
/* ==========================================
HOVER STATE UTILITIES
========================================== */
.hover\:shadow-hover:hover {
box-shadow: var(--shadow-hover);
}
.hover\:shadow-hover-strong:hover {
box-shadow: var(--shadow-hover-strong);
}
.hover\:shadow-lg:hover {
box-shadow: var(--shadow-lg);
}
.hover\:shadow-xl:hover {
box-shadow: var(--shadow-xl);
}
/* ==========================================
SPECIALIZED SHADOW PATTERNS
========================================== */
/* Icon/Image shadow (from design) */
.shadow-icon {
filter: drop-shadow(0 25px 25px rgba(60, 46, 3, 0.63));
}
/* Desktop image shadow */
.shadow-image-desktop {
filter: drop-shadow(0 25px 25px rgba(60, 46, 3, 0.63));
}
/* Mobile image shadow */
.shadow-image-mobile {
filter: drop-shadow(0 15px 15px rgba(60, 46, 3, 0.5));
}
/* Card/Button shadow */
.shadow-card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}
.shadow-card-hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
}
/* Badge/Pill shadow */
.shadow-badge {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* ==========================================
RENDERING OPTIMIZATIONS
========================================== */
/* Apply to elements using drop-shadow to prevent rendering issues */
.optimize-shadow {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* ==========================================
END OF SHADOW SYSTEM
========================================== */
/* ==========================================
FIXELTEXT FONT FAMILY - FORCEFUL VERSION
========================================== */
@font-face {
font-family: 'FixelText';
src: url(/assets/FixelText-Light-2aca4af0f911dcb1f539bbedf4809bdeed1fb220c4256d4559693be148bdae87.woff2) format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'FixelText';
src: url(/assets/FixelText-Regular-66039fd0688fd50e702eaf5b2cb1ab065312674a70055a8d3e59a39830a40d3e.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'FixelText';
src: url(/assets/FixelText-Medium-8b9431da206f95b48a4e105093933a63e7ac2a798836df1024a5b3fc63b0571c.woff2) format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'FixelText';
src: url(/assets/FixelText-SemiBold-36864e8d81dc615a1e2c7c6745c4561da31796a246bd7717d17e2b4b04641d60.woff2) format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'FixelText';
src: url(/assets/FixelText-Bold-a264e2e63d3047dac4cede0cd56a0a01ada4f55e104d21e201b0e3b57fb1d440.woff2) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ==========================================
CSS CUSTOM PROPERTIES
========================================== */
:root {
--font-primary: 'FixelText', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-prose: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
}
/* ==========================================
FORCEFUL APPLICATION - OVERRIDE EVERYTHING
========================================== */
body {
font-family: var(--font-primary) !important;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Force on all common elements */
h1, h2, h3, h4, h5, h6,
p, a, button, input, textarea, select,
label, span, div, nav, header, footer,
table, th, td, li, ul, ol,
section, article, aside, main {
font-family: var(--font-primary) !important;
}
/* Force on all headings */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-primary) !important;
font-weight: 600 !important;
}
/* Force on form elements */
input, textarea, select, button {
font-family: var(--font-primary) !important;
}
/* ==========================================
PROSE EXCEPTION - RICH TEXT EDITOR ONLY
========================================== */
.prose,
.prose * {
font-family: var(--font-prose) !important;
}
.prose p,
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6,
.prose blockquote,
.prose li,
.prose td,
.prose th,
.prose a,
.prose strong,
.prose em {
font-family: var(--font-prose) !important;
}
/* ==========================================
UTILITY CLASSES
========================================== */
.font-light { font-weight: 300 !important; }
.font-regular { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-primary {
font-family: var(--font-primary) !important;
}
.font-prose {
font-family: var(--font-prose) !important;
}
/* ============================================
BASE COLOR SYSTEM
============================================
CSS custom properties for consistent color usage
across the application
============================================ */
:root {
/* ==========================================
PRIMARY COLORS - Main Actions & Buttons
========================================== */
--primary: #171717;
--primary-hover: #262626;
--primary-active: #404040;
/* ==========================================
SECONDARY COLORS - Brand Gold
========================================== */
--brand-gold: #d6b72f;
--brand-gold-light: #E4DAAA;
--brand-gold-dark: #6c5c1c;
/* ==========================================
ACCENT COLORS - Blue (Interactive States)
========================================== */
--accent-blue: #3B82F6;
--accent-blue-hover: #2563EB;
--accent-blue-light: #60A5FA;
/* Additional Accent Colors */
--accent-amber: #F59E0B;
--accent-amber-light: #FCD34D;
--accent-green: #10B981;
--accent-green-light: #34D399;
--accent-red: #EF4444;
--accent-red-light: #F87171;
--accent-purple: #8B5CF6;
--accent-purple-light: #A78BFA;
/* ==========================================
NEUTRAL GRAYS
========================================== */
--gray-50: #F9FAFB;
--gray-100: #F3F4F6;
--gray-200: #E5E7EB;
--gray-300: #D1D5DB;
--gray-400: #9CA3AF;
--gray-500: #6B7280;
--gray-600: #4B5563;
--gray-700: #374151;
--gray-800: #1F2937;
--gray-900: #111827;
/* ==========================================
BACKGROUND COLORS
========================================== */
--bg-base: #f2f2f2;
--bg-white: #ffffff;
--bg-surface: rgba(255, 255, 255, 0.9);
--bg-surface-hover: rgba(255, 255, 255, 0.95);
--bg-overlay: rgba(0, 0, 0, 0.4);
/* Gray Backgrounds */
--bg-gray-50: #F9FAFB;
--bg-gray-100: #F3F4F6;
--bg-gray-200: #E5E7EB;
/* Accent Backgrounds (Light Tints) */
--bg-blue-50: rgba(59, 130, 246, 0.05);
--bg-blue-100: rgba(59, 130, 246, 0.1);
--bg-gold-50: rgba(214, 183, 47, 0.05);
--bg-gold-100: rgba(214, 183, 47, 0.1);
/* ==========================================
BORDER COLORS
========================================== */
--border-light: rgba(229, 231, 235, 0.6);
--border-default: #D1D5DB;
--border-gray-200: #E5E7EB;
--border-gray-300: #D1D5DB;
--border-focus: var(--accent-blue);
/* ==========================================
TEXT COLORS
========================================== */
--text-primary: #111827;
--text-secondary: #6B7280;
--text-tertiary: #9CA3AF;
--text-disabled: #D1D5DB;
--text-inverse: #ffffff;
/* ==========================================
SHADOW COLORS
========================================== */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--shadow-custom: 0 12px 32px rgba(0, 0, 0, 0.02), 0 0 0 1px rgba(0, 0, 0, 0.05);
/* ==========================================
STATE COLORS
========================================== */
--state-success: #10B981;
--state-warning: #F59E0B;
--state-error: #EF4444;
--state-info: #3B82F6;
/* State Backgrounds */
--state-success-bg: #D1FAE5;
--state-warning-bg: #FEF3C7;
--state-error-bg: #FEE2E2;
--state-info-bg: #DBEAFE;
/* ==========================================
INTERACTIVE STATES
========================================== */
--hover-overlay: rgba(0, 0, 0, 0.05);
--active-overlay: rgba(0, 0, 0, 0.1);
--focus-ring: rgba(59, 130, 246, 0.2);
--focus-ring-gold: rgba(214, 183, 47, 0.2);
}
/* ==========================================
UTILITY CLASSES
========================================== */
.bg-primary { background-color: var(--primary); }
.bg-brand-gold { background-color: var(--brand-gold); }
.bg-accent-blue { background-color: var(--accent-blue); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-brand-gold { color: var(--brand-gold); }
.border-default { border-color: var(--border-default); }
.border-light { border-color: var(--border-light); }
/* ==========================================
END OF COLOR SYSTEM
========================================== */
/* ═══════════════════════════════════════════════════
Notifications — Notion × iOS Native
═══════════════════════════════════════════════════ */
.notifications-root {
/* Design system: FixelText with the -apple-system fallback stack. */
font-family: 'FixelText', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.01em;
}
/* ─── Segmented Control ─── */
.notification-segment {
flex: 1;
position: relative;
z-index: 1;
padding: 7px 12px;
/* Segment / micro type: 11 / 700 / uppercase. */
font-family: inherit;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(55, 53, 47, 0.5);
text-align: center;
border-radius: 8px;
cursor: pointer;
transition: color 0.2s ease;
background: transparent;
border: none;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.notification-segment.is-active {
color: #37352f;
font-weight: 600;
}
/* ─── Badge ─── */
.notification-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 11px;
font-weight: 700;
line-height: 1;
color: white;
background-color: #eb5757;
border-radius: 9px;
letter-spacing: 0;
}
/* ─── Filter Chips ─── */
.notification-chip {
display: inline-flex;
align-items: center;
padding: 5px 12px;
font-size: 13px;
font-weight: 500;
font-family: inherit;
color: rgba(55, 53, 47, 0.5);
border-radius: 999px;
cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease, transform 0.08s ease;
background: transparent;
border: none;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.notification-chip:hover {
color: #37352f;
background: rgba(55, 53, 47, 0.04);
}
.notification-chip:active { transform: scale(0.95); }
.notification-chip.is-active {
color: #37352f;
background: rgba(55, 53, 47, 0.06);
font-weight: 600;
}
/* ─── Icon Button ─── */
.notification-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
/* Design system: prev/next-style icon buttons are fully round. */
border-radius: 999px;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.08s ease;
background: transparent;
border: none;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.notification-icon-btn:hover {
background-color: rgba(55, 53, 47, 0.06);
}
.notification-icon-btn:active {
/* Signature 08 — tap scales down to 0.90. */
transform: scale(0.90);
}
/* ─── Hover Action Buttons ─── */
.notification-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
color: #787774;
cursor: pointer;
transition: all 0.15s ease;
background: transparent;
border: none;
outline: none;
}
.notification-action-btn:hover {
background-color: rgba(55, 53, 47, 0.06);
color: #37352f;
}
/* ─── Row Base ─── */
.notification-row-base {
position: relative;
display: block;
cursor: pointer;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
}
.notification-row-base:hover {
background-color: rgba(55, 53, 47, 0.02);
}
.notification-row-base + .notification-row-base {
border-top: 1px solid rgba(55, 53, 47, 0.04);
}
/* ─── Stagger animation for rows ─── */
@keyframes notifSlideUp {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.notification-row-base {
animation: notifSlideUp 0.3s ease both;
}
/* ─── iOS safe areas ─── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.notifications-root {
padding-bottom: env(safe-area-inset-bottom);
}
}
/* ─── Touch device tweaks ─── */
@media (hover: none) and (pointer: coarse) {
.notification-icon-btn {
width: 40px;
height: 40px;
}
}
/* ─── Website notifications overrides ─── */
.notifications-root--web {
color: #37352f;
}
.notifications-root--web .notification-segment {
color: rgba(55, 53, 47, 0.5);
}
.notifications-root--web .notification-segment.is-active {
color: #37352f;
}
.notifications-root--web .notification-chip {
color: rgba(55, 53, 47, 0.5);
}
.notifications-root--web .notification-chip:hover {
color: #37352f;
background: rgba(55, 53, 47, 0.04);
}
.notifications-root--web .notification-chip.is-active {
color: #37352f;
background: rgba(55, 53, 47, 0.06);
}
.notifications-root--web .notification-icon-btn:hover {
background-color: rgba(55, 53, 47, 0.06);
}
.notifications-root--web .notification-action-btn:hover {
background-color: rgba(55, 53, 47, 0.06);
color: #37352f;
}
.notifications-root--web .notification-row-base:hover {
background-color: rgba(55, 53, 47, 0.02);
}
.notifications-root--web .notification-row-base + .notification-row-base {
border-top-color: rgba(55, 53, 47, 0.04);
}
/* Temporarily hide non-functional menu in notifications.
Remove this when menu functionality is implemented. */
.notifications-root--web [data-notification-actions-target="menuWrapper"] {
display: none !important;
}
/* ═══════════════════════════════════════════════════
Messages — Notion-native palette
═══════════════════════════════════════════════════ */
.messages-index-shell,
.mobile-message-container {
--messages-accent: #2383E2;
--messages-accent-hover: #1B6DBF;
--messages-composer-focus-ring: rgba(35, 131, 226, 0.15);
--message-media-tile: 132px;
}
.messages-index-shell {
--messages-nav-offset: 48px;
height: calc(100dvh - var(--messages-nav-offset));
min-height: calc(100dvh - var(--messages-nav-offset));
max-height: calc(100dvh - var(--messages-nav-offset));
overflow: hidden;
background: #ffffff;
}
.messages-index-frame {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
max-height: 100%;
overflow: hidden;
}
.messages-index-frame--thread {
height: 100%;
min-height: 0;
max-height: 100%;
overflow: hidden;
}
/* ─── Sidebar (Notion-native light) ─── */
.messages-sidebar {
width: 100%;
height: 100%;
min-height: calc(100vh - 48px);
background: #F7F7F5;
color: #37352F;
display: flex;
flex-direction: column;
border-right: 1px solid rgba(55, 53, 47, 0.09);
}
.messages-sidebar-header {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 10px 12px 8px;
border-bottom: 1px solid rgba(55, 53, 47, 0.08);
gap: 8px;
}
.messages-sidebar-headline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
}
.messages-sidebar-header-actions {
display: flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
}
.messages-sidebar-iconbtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: none;
border-radius: 6px;
color: #787774;
background: transparent;
transition: background-color 0.12s ease, color 0.12s ease;
}
.messages-sidebar-iconbtn:hover {
background: rgba(55, 53, 47, 0.07);
color: #37352F;
}
.messages-sidebar-eyebrow {
display: none;
}
.messages-sidebar-title {
margin: 0;
font-size: 15px;
line-height: 1.2;
font-weight: 700;
color: #37352F;
letter-spacing: -0.01em;
}
.messages-sidebar-compose {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
gap: 5px;
border-radius: 6px;
border: none;
padding: 5px 8px;
font-size: 12px;
font-weight: 500;
color: #787774;
background: transparent;
transition: background-color 0.12s ease, color 0.12s ease;
}
.messages-sidebar-compose:hover {
background: rgba(55, 53, 47, 0.07);
color: #37352F;
}
.messages-sidebar-list-wrap {
flex: 1;
overflow-y: auto;
padding: 6px 0 18px;
}
.messages-sidebar-threads {
display: flex;
flex-direction: column;
gap: 1px;
}
/* Infinite-scroll sentinels (sidebar + conversation) */
.messages-sidebar-load-more,
.messages-load-older {
display: flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 10px 0;
}
.messages-sidebar-load-more-spinner,
.messages-load-older-spinner {
width: 16px;
height: 16px;
border-radius: 9999px;
border: 2px solid rgba(55, 53, 47, 0.18);
border-top-color: rgba(55, 53, 47, 0.55);
animation: messages-loader-spin 0.7s linear infinite;
}
@keyframes messages-loader-spin {
to { transform: rotate(360deg); }
}
/* The lazy sidebar-list frame must not introduce a layout box — keep the
inner .messages-sidebar-list-wrap as the real flex child of the aside. */
turbo-frame#messages_sidebar_list,
.messages-sidebar-list-frame {
display: contents;
}
.messages-sidebar-list-wrap:not([aria-busy="true"]) .messages-sidebar-skeleton {
display: none;
}
.messages-sidebar .notification-row-base {
animation: none;
}
.messages-sidebar-skeleton {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px 8px;
}
.messages-sidebar-skeleton-row {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 10px;
animation: messages-skeleton-pulse 1.2s ease-in-out infinite;
}
.messages-sidebar-skeleton-avatar {
flex: none;
width: 24px;
height: 24px;
border-radius: 4px;
background: rgba(55, 53, 47, 0.08);
}
.messages-sidebar-skeleton-line {
flex: 1;
height: 10px;
border-radius: 6px;
background: rgba(55, 53, 47, 0.08);
}
.messages-sidebar-skeleton-line--lg { max-width: 72%; }
@keyframes messages-skeleton-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
.messages-sidebar-section-title {
margin: 0;
padding: 8px 10px 4px;
font-size: 13px;
letter-spacing: -0.01em;
text-transform: none;
color: #9b9a97;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
cursor: default;
user-select: none;
}
.messages-sidebar-section-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
opacity: 0.85;
}
.messages-sidebar-empty {
margin: 12px;
border-radius: 10px;
padding: 14px;
background: rgba(55, 53, 47, 0.04);
border: 1px solid rgba(55, 53, 47, 0.06);
}
.messages-sidebar-empty h3 {
margin: 0 0 2px;
font-size: 14px;
font-weight: 700;
color: #37352F;
}
.messages-sidebar-empty p {
margin: 0;
font-size: 12px;
line-height: 1.45;
color: #787774;
}
.messages-sidebar-empty-cta {
margin-top: 10px;
display: inline-flex;
border-radius: 8px;
border: 1px solid rgba(55, 53, 47, 0.12);
padding: 6px 10px;
font-size: 12px;
font-weight: 600;
color: #37352F;
background: rgba(55, 53, 47, 0.04);
transition: background-color 0.15s ease;
}
.messages-sidebar-empty-cta:hover {
background: rgba(55, 53, 47, 0.08);
}
/* ─── Thread rows (Slack-style) ─── */
.messages-thread-row {
margin: 0 6px;
color: inherit;
border-radius: 6px;
}
.messages-thread-item:hover .messages-thread-row:not(.is-active) {
background: rgba(55, 53, 47, 0.06) !important;
}
.messages-thread-row:focus-visible {
outline: 2px solid color-mix(in srgb, var(--messages-accent) 35%, transparent);
outline-offset: 1px;
}
.messages-thread-row.is-active {
background: color-mix(in srgb, var(--messages-accent) 10%, transparent) !important;
}
.messages-thread-row.is-active .message-thread-title {
color: var(--messages-accent) !important;
}
.messages-thread-row.is-active .message-thread-unread-count {
color: #ffffff;
background: var(--messages-accent);
}
.messages-thread-row + .messages-thread-row {
border-top: none !important;
margin-top: 1px;
}
.messages-thread-item + .messages-thread-item {
margin-top: 1px;
}
.messages-thread-item:hover {
z-index: 25;
}
.messages-thread-dismiss {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: none;
border-radius: 4px;
background: transparent;
color: rgba(55, 53, 47, 0.55);
cursor: pointer;
opacity: 0;
transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.messages-thread-item:hover .messages-thread-dismiss,
.messages-thread-item:has(.messages-thread-row.is-active) .messages-thread-dismiss,
.messages-thread-dismiss:focus-visible {
opacity: 1;
}
@media (hover: none), (pointer: coarse) {
.messages-thread-dismiss {
opacity: 0.55;
}
}
.messages-thread-dismiss:hover {
background: rgba(55, 53, 47, 0.16);
color: rgba(55, 53, 47, 0.92);
}
.messages-thread-participants-tooltip {
position: absolute;
left: 6px;
right: 6px;
bottom: calc(100% + 6px);
z-index: 30;
padding: 7px 10px;
border-radius: 8px;
background: #1a1d21;
color: #ffffff;
font-size: 12px;
font-weight: 600;
line-height: 1.35;
text-align: center;
box-shadow: 0 6px 18px rgba(15, 15, 15, 0.22);
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}
.messages-thread-participants-tooltip::after {
content: "";
position: absolute;
left: 50%;
bottom: -5px;
transform: translateX(-50%) rotate(45deg);
width: 10px;
height: 10px;
background: #1a1d21;
}
.messages-thread-item:hover .messages-thread-participants-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.messages-thread-item:has(.messages-thread-dismiss:hover) .messages-thread-participants-tooltip {
opacity: 0;
visibility: hidden;
transform: translateY(4px);
}
/* Unread left indicator bar */
.messages-thread-row.is-unread-row {
position: relative;
}
.messages-thread-row.is-unread-row::before {
content: '';
position: absolute;
left: -6px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background: var(--messages-accent);
border-radius: 0 3px 3px 0;
}
.message-thread-prefix {
opacity: 0.55;
margin-right: 1px;
font-size: 12px;
}
.message-thread-title {
margin: 0;
font-size: 13px;
line-height: 1.35;
font-weight: 400;
color: #6b6b69;
}
.message-thread-title.is-unread {
color: #37352F;
font-weight: 600;
}
.message-thread-group-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 4px;
background: #8b8a87;
font-size: 11px;
font-weight: 600;
line-height: 1;
color: #ffffff;
letter-spacing: 0;
}
.messages-thread-row.is-active .message-thread-group-avatar {
background: var(--messages-accent);
color: #ffffff;
}
.message-thread-avatar {
flex: none;
width: 24px;
height: 24px;
border-radius: 4px;
overflow: hidden;
}
.message-thread-avatar--photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.message-thread-avatar--initial {
display: flex;
align-items: center;
justify-content: center;
background: #ececea;
color: #616060;
font-size: 11px;
font-weight: 600;
line-height: 1;
}
.message-thread-unread-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9999px;
font-size: 10px;
font-weight: 700;
color: #ffffff;
background: var(--messages-accent);
flex-shrink: 0;
}
/* ─── Stage (empty state / compose) ─── */
.messages-stage {
display: none;
flex: 1;
min-height: 0;
align-items: center;
justify-content: center;
padding: 24px;
background: #ffffff;
}
.messages-stage--thread {
display: flex;
align-items: stretch;
justify-content: stretch;
min-height: 0;
overflow: hidden;
padding: 0;
background: transparent;
}
/* Slack-style "Recent conversations" card */
.messages-recents-card {
width: min(560px, 100%);
border-radius: 18px;
border: 1px solid rgba(55, 53, 47, 0.09);
background: #ffffff;
overflow: hidden;
box-shadow: 0 1px 2px rgba(55, 53, 47, 0.04), 0 12px 30px -20px rgba(55, 53, 47, 0.22);
}
.messages-recents-head {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px 14px;
}
.messages-recents-badge {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 12px;
background: color-mix(in srgb, var(--messages-accent) 12%, transparent);
color: var(--messages-accent);
}
.messages-recents-title {
margin: 0;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
color: #37352F;
}
.messages-recents-subtitle {
margin: 2px 0 0;
font-size: 13px;
color: #787774;
}
.messages-recents-list {
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px 8px 6px;
}
.messages-recent-row {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 10px;
border-radius: 12px;
text-decoration: none;
transition: background-color 0.14s ease, transform 0.12s ease;
}
.messages-recent-row:hover { background: color-mix(in srgb, var(--messages-accent) 7%, transparent); }
.messages-recent-row:focus-visible {
outline: 2px solid color-mix(in srgb, var(--messages-accent) 35%, transparent);
outline-offset: 2px;
background: color-mix(in srgb, var(--messages-accent) 7%, transparent);
}
.messages-recent-row:active { transform: scale(0.99); }
.messages-recent-avatar { position: relative; flex: none; width: 40px; height: 40px; }
.messages-recent-avatar img { width: 40px; height: 40px; border-radius: 9999px; }
.messages-recent-avatar-fallback {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 9999px;
background: linear-gradient(135deg, #3b3a37, #5b5954);
color: #ffffff;
font-size: 15px;
font-weight: 600;
}
.messages-recent-dot {
position: absolute;
top: -1px;
right: -1px;
width: 11px;
height: 11px;
border-radius: 9999px;
background: var(--messages-accent);
border: 2px solid #ffffff;
}
.messages-recent-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.messages-recent-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.messages-recent-name {
min-width: 0;
font-size: 14.5px;
font-weight: 500;
color: #37352F;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.messages-recent-name.is-unread { font-weight: 700; }
.messages-recent-time {
flex: none;
font-size: 12px;
color: #B4B4B0;
font-variant-numeric: tabular-nums;
}
.messages-recent-time.is-unread { color: var(--messages-accent); font-weight: 600; }
.messages-recent-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.messages-recent-snippet {
min-width: 0;
font-size: 13px;
line-height: 1.35;
color: #787774;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.messages-recent-snippet.is-unread { color: #37352F; }
.messages-recent-you { color: #B4B4B0; }
.messages-recent-badge-count {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 9999px;
background: var(--messages-accent);
color: #ffffff;
font-size: 11px;
font-weight: 700;
}
.messages-recents-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 4px 12px 14px;
padding: 11px 16px;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--messages-accent) 25%, transparent);
color: var(--messages-accent);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.14s ease;
}
.messages-recents-cta:hover { background: color-mix(in srgb, var(--messages-accent) 8%, transparent); }
.messages-stage-card {
width: min(540px, 100%);
border-radius: 16px;
border: 1px solid rgba(55, 53, 47, 0.09);
background: #ffffff;
text-align: center;
padding: 42px 30px;
box-shadow: 0 1px 3px rgba(55, 53, 47, 0.04);
}
.messages-stage-icon {
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 14px;
color: var(--messages-accent);
background: color-mix(in srgb, var(--messages-accent) 8%, transparent);
}
.messages-stage-card h2 {
margin: 0;
color: #37352F;
font-size: 20px;
font-weight: 700;
}
.messages-stage-card p {
margin: 8px 0 0;
color: #787774;
font-size: 14px;
line-height: 1.5;
}
.messages-stage-cta {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 8px;
padding: 10px 14px;
color: #ffffff;
background: var(--messages-accent);
font-size: 13px;
font-weight: 600;
transition: background-color 0.15s ease;
}
.messages-stage-cta:hover {
background: var(--messages-accent-hover);
}
.messages-thread-compose-shell {
width: 100%;
height: 100%;
overflow-y: auto;
padding: 24px 20px;
}
.messages-thread-compose-wrap {
width: min(760px, 100%);
}
.messages-thread-compose-submit {
background: var(--messages-accent);
color: #ffffff;
}
.messages-thread-compose-submit:hover {
background: var(--messages-accent-hover);
}
/* ─── Slack-style new-message composer ─── */
.messages-compose-shell {
min-height: 420px;
display: flex;
flex-direction: column;
}
.messages-compose-shell.is-ready .messages-compose-body {
flex: 1;
min-height: 0;
}
.messages-compose-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
background: #ffffff;
}
.messages-compose-header {
position: relative;
}
.messages-compose-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
color: #787774;
transition: background 0.12s ease, color 0.12s ease;
}
.messages-compose-close:hover {
color: #37352F;
background: rgba(55, 53, 47, 0.06);
}
.messages-compose-quick {
padding: 10px 14px 4px;
border-bottom: 1px solid rgba(55, 53, 47, 0.06);
background: #ffffff;
}
.messages-compose-quick-label {
margin: 0 0 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #9B9A97;
}
.messages-compose-quick-list {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 6px;
scrollbar-width: none;
}
.messages-compose-quick-list::-webkit-scrollbar { display: none; }
.messages-compose-quick-pick {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 56px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
transition: transform 0.12s ease;
}
.messages-compose-quick-pick:hover { transform: translateY(-1px); }
.messages-compose-quick-pick:hover .messages-compose-quick-avatar,
.messages-compose-quick-pick:hover .messages-compose-quick-avatar--fallback {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--messages-accent) 30%, transparent);
}
.messages-compose-quick-pick:focus-visible {
outline: 2px solid color-mix(in srgb, var(--messages-accent) 40%, transparent);
outline-offset: 3px;
border-radius: 12px;
}
.messages-compose-quick-pick.is-loading { opacity: 0.55; pointer-events: none; }
.messages-compose-quick-avatar {
width: 44px;
height: 44px;
border-radius: 14px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(55, 53, 47, 0.08);
}
.messages-compose-quick-avatar--fallback {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 600;
color: #ffffff;
background: #9B9A97;
}
.messages-compose-quick-name {
max-width: 64px;
font-size: 11px;
font-weight: 500;
color: #37352F;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.messages-compose-placeholder {
flex: 1;
min-height: 0;
}
.messages-compose-results-heading {
margin: 6px 8px 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #9B9A97;
}
.messages-compose-result.is-highlighted,
.messages-compose-result.is-highlighted:hover {
background: color-mix(in srgb, var(--messages-accent) 10%, transparent);
}
.messages-compose-result.is-loading {
opacity: 0.55;
pointer-events: none;
}
.messages-composer-shell.is-disabled {
opacity: 0.45;
pointer-events: none;
user-select: none;
}
/* Native app full-screen wrapper for the composer. */
.messages-compose-mobile-app {
/* Fixed + flush to the top so it escapes the mobile layout's mt-24 wrapper
(which was leaving a large white gap above the composer) and clears the
iOS status bar via the safe-area inset. */
position: fixed;
inset: 0;
top: 0;
z-index: 50;
height: 100dvh;
max-height: 100dvh;
padding-top: env(safe-area-inset-top, 0px);
display: flex;
flex-direction: column;
background: #ffffff;
}
body:has(.messages-compose-mobile-app) { overflow: hidden; }
/* The .messages-compose-mobile-app container already adds the safe-area inset,
so the compose header must NOT add it again (the generic mobile
.messages-conversation-header rule does), or it leaves a large white gap. */
.messages-compose-mobile-app .messages-compose-header {
padding-top: 10px;
}
/* Dismissable header for the recipient dropdown — shown on mobile so the
full-width results list can be closed without an outside tap. */
.messages-compose-results-header { display: none; }
.messages-compose-results-dismiss {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: none;
border-radius: 8px;
background: rgba(55, 53, 47, 0.06);
color: #37352F;
flex-shrink: 0;
}
.messages-compose-results-dismiss:active { transform: scale(0.92); }
@media (max-width: 767px) {
.messages-compose-results-header {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 8px 6px;
margin: -4px -4px 4px;
background: #ffffff;
border-bottom: 1px solid rgba(55, 53, 47, 0.07);
}
.messages-compose-results-header-label {
font-size: 12px;
font-weight: 700;
color: #9b9a97;
text-transform: uppercase;
letter-spacing: 0.04em;
padding-left: 4px;
}
}
/* To: row */
.messages-compose-to {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid rgba(55, 53, 47, 0.09);
background: #ffffff;
}
.messages-compose-to-label {
flex-shrink: 0;
padding-top: 8px;
font-size: 13px;
font-weight: 600;
color: #787774;
}
.messages-compose-to-control {
position: relative;
flex: 1;
min-width: 0;
}
.messages-compose-to-field {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid rgba(55, 53, 47, 0.12);
border-radius: 10px;
background: #ffffff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.messages-compose-to-field:focus-within {
border-color: var(--messages-accent);
box-shadow: 0 0 0 3px var(--messages-composer-focus-ring);
}
.messages-compose-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.messages-compose-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 6px 4px 10px;
font-size: 13px;
font-weight: 500;
color: var(--messages-accent-hover);
background: color-mix(in srgb, var(--messages-accent) 10%, transparent);
border-radius: 9999px;
}
.messages-compose-chip button {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--messages-accent-hover);
cursor: pointer;
border-radius: 9999px;
padding: 2px;
}
.messages-compose-chip button:hover { background: color-mix(in srgb, var(--messages-accent) 18%, transparent); }
.messages-compose-to-input {
flex: 1;
min-width: 140px;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent;
padding: 8px 2px;
font-size: 14px;
color: #37352F;
}
.messages-compose-to-input:focus,
.messages-compose-to-input:focus-visible {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
.messages-compose-to-input::placeholder { color: #B4B4B0; }
/* Results dropdown */
.messages-compose-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 6px;
padding: 4px;
background: #ffffff;
border: 1px solid rgba(55, 53, 47, 0.09);
border-radius: 12px;
box-shadow: 0 12px 28px rgba(55, 53, 47, 0.16);
max-height: 280px;
overflow-y: auto;
z-index: 30;
}
.messages-compose-result {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
text-align: left;
transition: background-color 0.12s ease;
}
.messages-compose-result:hover { background: rgba(55, 53, 47, 0.05); }
.messages-compose-result-avatar {
width: 32px;
height: 32px;
border-radius: 9999px;
object-fit: cover;
flex-shrink: 0;
}
.messages-compose-result-avatar--fallback {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(55, 53, 47, 0.08);
color: #787774;
font-size: 13px;
font-weight: 700;
}
.messages-compose-result-meta { display: flex; flex-direction: column; min-width: 0; }
.messages-compose-result-name {
font-size: 14px;
font-weight: 600;
color: #37352F;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.messages-compose-result-username {
font-size: 12px;
color: #B4B4B0;
line-height: 1.25;
}
.messages-compose-empty {
margin: 0;
padding: 12px 10px;
font-size: 13px;
color: #787774;
}
.messages-compose-cancel {
font-size: 13px;
font-weight: 500;
color: #787774;
text-decoration: none;
padding: 6px 10px;
border-radius: 8px;
transition: color 0.15s ease, background-color 0.15s ease;
}
.messages-compose-cancel:hover { color: #37352F; background: rgba(55, 53, 47, 0.05); }
/* ─── Conversation shell ─── */
.messages-conversation-shell {
height: 100%;
min-height: 0;
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background: #ffffff;
}
.messages-conversation-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(55, 53, 47, 0.09);
padding: 12px 14px;
background: #ffffff;
}
.messages-conversation-header-actions {
display: flex;
align-items: center;
gap: 6px;
}
.messages-conversation-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
border: none;
color: #787774;
background: transparent;
transition: background-color 0.15s ease, color 0.15s ease;
}
.messages-conversation-info:hover {
background: rgba(55, 53, 47, 0.06);
color: #37352F;
}
.messages-conversation-info:focus-visible {
outline: 2px solid color-mix(in srgb, var(--messages-accent) 40%, transparent);
outline-offset: 2px;
}
.messages-conversation-body {
position: relative;
flex: 1;
min-height: 0;
display: flex;
overflow: hidden;
}
.messages-conversation-main {
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
transition: margin-right 0.24s ease;
}
/* ─── Details drawer ─── */
.messages-details-drawer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 320px;
max-width: min(92vw, 340px);
transform: translateX(102%);
transition: transform 0.24s ease;
border-left: 1px solid rgba(55, 53, 47, 0.09);
background: #ffffff;
box-shadow: -4px 0 16px rgba(55, 53, 47, 0.06);
z-index: 18;
display: flex;
flex-direction: column;
}
.messages-conversation-shell.is-details-open .messages-conversation-main {
margin-right: 320px;
}
.messages-conversation-shell.is-details-open .messages-details-drawer {
transform: translateX(0);
}
.messages-details-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid rgba(55, 53, 47, 0.09);
}
.messages-details-title {
margin: 0;
color: #37352F;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
}
.messages-details-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 8px;
color: #787774;
background: transparent;
transition: background-color 0.15s ease, color 0.15s ease;
}
.messages-details-close:hover {
background: rgba(55, 53, 47, 0.06);
color: #37352F;
}
.messages-details-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 14px;
display: flex;
flex-direction: column;
gap: 14px;
}
.messages-details-section {
border: 1px solid rgba(55, 53, 47, 0.09);
border-radius: 10px;
background: #ffffff;
padding: 12px;
}
.messages-details-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.messages-details-label {
margin: 0 0 6px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #B4B4B0;
font-weight: 700;
}
.messages-details-section-header .messages-details-label {
margin-bottom: 0;
}
.messages-details-count {
color: #B4B4B0;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
}
.messages-details-thread-name {
margin: 0;
color: #37352F;
font-size: 15px;
font-weight: 700;
line-height: 1.25;
}
.messages-details-meta {
margin: 4px 0 0;
color: #787774;
font-size: 12px;
}
.messages-details-participant-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.messages-details-participant-item {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
padding: 4px 2px 4px 4px;
margin: 0 -4px;
border-radius: 8px;
transition: background 0.12s ease;
}
.messages-details-participant-item:hover {
background: rgba(55, 53, 47, 0.04);
}
.messages-details-participant-info {
flex: 1;
min-width: 0;
}
.messages-details-participant-avatar {
width: 30px;
height: 30px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.messages-details-participant-avatar--fallback {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: #787774;
background: rgba(55, 53, 47, 0.06);
}
.messages-details-participant-name {
margin: 0;
color: #37352F;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 6px;
}
.messages-details-participant-username {
margin: 0;
color: #787774;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Live availability + custom-status chip under each participant. */
.messages-presence-chip {
display: flex;
align-items: center;
gap: 6px;
margin-top: 3px;
min-width: 0;
}
.messages-presence-chip-dot {
width: 8px;
height: 8px;
border-radius: 9999px;
flex-shrink: 0;
background: #B4B4B0;
box-shadow: inset 0 0 0 1.5px rgba(55, 53, 47, 0.08);
}
.messages-presence-chip-dot[data-status="active"] { background: #2EA86B; }
.messages-presence-chip-dot[data-status="away"] { background: #E5A53B; }
.messages-presence-chip-dot[data-status="offline"] { background: transparent; box-shadow: inset 0 0 0 1.5px #B4B4B0; }
.messages-presence-chip-status {
display: inline-flex;
align-items: center;
gap: 4px;
min-width: 0;
color: #787774;
font-size: 11.5px;
}
.messages-presence-chip-icon { width: 13px; height: 13px; flex-shrink: 0; color: var(--messages-accent); }
.messages-presence-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-details-pill {
display: inline-flex;
align-items: center;
border-radius: 9999px;
border: 1px solid rgba(55, 53, 47, 0.09);
padding: 1px 6px;
font-size: 10px;
color: #787774;
font-weight: 600;
}
.messages-details-participant-message {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 7px;
color: #787774;
opacity: 0;
transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.messages-details-participant-item:hover .messages-details-participant-message,
.messages-details-participant-message:focus-visible {
opacity: 1;
}
.messages-details-participant-message:hover {
background: color-mix(in srgb, var(--messages-accent) 12%, transparent);
color: var(--messages-accent);
}
.messages-details-participant-message.is-loading {
opacity: 0.45;
pointer-events: none;
}
@media (hover: none) {
.messages-details-participant-message {
opacity: 0.55;
}
}
.messages-details-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.messages-details-stat {
border: 1px solid rgba(55, 53, 47, 0.09);
border-radius: 8px;
background: #F7F7F5;
padding: 8px 6px;
text-align: center;
display: flex;
flex-direction: column;
gap: 2px;
}
.messages-details-stat span {
color: #B4B4B0;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.messages-details-stat strong {
color: #37352F;
font-size: 14px;
font-weight: 700;
line-height: 1.1;
}
.messages-details-empty {
margin: 0;
color: #787774;
font-size: 12px;
line-height: 1.4;
}
.messages-details-media-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.messages-details-media-card {
min-width: 0;
}
.messages-details-media-link {
position: relative;
display: block;
width: 100%;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(55, 53, 47, 0.09);
aspect-ratio: 1 / 1;
background: #F7F7F5;
text-decoration: none;
}
.messages-details-media-image,
.messages-details-media-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: rgba(55, 53, 47, 0.06);
}
.messages-details-media-play {
position: absolute;
left: 6px;
bottom: 6px;
width: 22px;
height: 22px;
border-radius: 9999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
background: rgba(55, 53, 47, 0.8);
z-index: 2;
}
.messages-details-media-view {
position: absolute;
right: 6px;
bottom: 6px;
border-radius: 9999px;
padding: 2px 7px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #ffffff;
background: rgba(55, 53, 47, 0.78);
z-index: 2;
}
.messages-details-media-meta {
margin: 5px 0 0;
color: #787774;
font-size: 10px;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.messages-details-file-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.messages-details-file-item {
min-width: 0;
}
.messages-details-file-link {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
border: 1px solid rgba(55, 53, 47, 0.09);
border-radius: 8px;
background: #F7F7F5;
padding: 7px 8px;
text-decoration: none;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.messages-details-file-link:hover {
border-color: rgba(55, 53, 47, 0.15);
background: rgba(55, 53, 47, 0.04);
}
.messages-details-file-icon {
width: 16px;
height: 16px;
color: #787774;
flex-shrink: 0;
}
.messages-details-file-name {
margin: 0;
color: #37352F;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.messages-details-file-meta {
margin: 1px 0 0;
color: #787774;
font-size: 10px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-message-details-toggle {
display: none;
}
.mobile-message-details-backdrop {
display: none;
}
.messages-details-backdrop {
display: none;
}
.messages-conversation-back {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
color: #787774;
transition: background-color 0.15s ease;
}
.messages-conversation-back:hover {
background: rgba(55, 53, 47, 0.06);
}
.messages-conversation-title {
margin: 0;
color: #37352F;
font-size: 15px;
font-weight: 700;
line-height: 1.2;
}
.messages-conversation-subtitle {
margin: 1px 0 0;
color: #787774;
font-size: 12px;
line-height: 1.2;
}
.messages-conversation-title-wrap.is-editing + .messages-conversation-subtitle {
margin-top: 8px;
}
.messages-conversation-title-wrap {
min-width: 0;
}
.messages-conversation-title-wrap.is-editable .messages-group-thread-name {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.messages-group-thread-name-form {
display: none;
align-items: center;
gap: 8px;
min-width: 0;
}
.messages-conversation-title-wrap.is-editing .messages-group-thread-name {
display: none;
}
.messages-conversation-title-wrap.is-editing .messages-group-thread-name-form {
display: flex;
}
.messages-group-thread-name-edit {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 24px;
height: 24px;
border: none;
border-radius: 6px;
color: #787774;
background: transparent;
opacity: 0;
transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
cursor: pointer;
}
.messages-conversation-title-wrap.is-editable:hover .messages-group-thread-name-edit {
opacity: 1;
}
.messages-group-thread-name-edit:hover {
color: var(--messages-accent);
background: color-mix(in srgb, var(--messages-accent) 10%, transparent);
}
.messages-group-thread-name-editor {
position: relative;
flex: 1;
min-width: 0;
border: 1px solid rgba(55, 53, 47, 0.12);
border-radius: 10px;
background: #ffffff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.messages-group-thread-name-editor:focus-within {
border-color: var(--messages-accent) !important;
box-shadow: 0 0 0 3px var(--messages-composer-focus-ring) !important;
outline: none !important;
}
.messages-group-thread-name-input {
display: block;
width: 100%;
height: 30px;
padding: 0 10px;
border: none !important;
border-radius: 10px;
background: transparent;
color: #37352F;
font-size: 14px;
font-weight: 600;
outline: none !important;
box-shadow: none !important;
}
.messages-conversation-title-wrap.has-reset .messages-group-thread-name-input {
padding-right: 34px;
}
.messages-group-thread-name-input:focus,
.messages-group-thread-name-input:focus-visible,
.messages-group-thread-name-input:active {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
.messages-group-thread-name-input::placeholder {
color: #B4B4B0;
font-weight: 500;
}
.messages-group-thread-name-reset {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
border-radius: 9999px;
background: rgba(55, 53, 47, 0.08);
color: #787774;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.messages-group-thread-name-reset.hidden {
display: none;
}
.messages-group-thread-name-reset:hover {
background: rgba(55, 53, 47, 0.14);
color: #37352F;
}
.messages-group-thread-name-done {
flex: none;
border: none;
border-radius: 6px;
background: var(--messages-accent);
color: #ffffff;
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 5px 10px;
white-space: nowrap;
transition: background-color 0.15s ease;
}
.messages-group-thread-name-done:hover:not(:disabled) {
background: var(--messages-accent-hover);
}
.messages-group-thread-name-done:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.messages-conversation-danger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
border: none;
color: #EB5757;
background: transparent;
transition: background-color 0.15s ease;
}
.messages-conversation-danger:hover {
background: rgba(235, 87, 87, 0.06);
}
/* ─── Message stream ─── */
.messages-stream {
position: relative;
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior-y: contain;
background: #ffffff;
padding: 12px 0 10px;
}
.messages-stream-loading {
position: absolute;
inset: 0;
z-index: 8;
display: block;
padding: 18px 18px;
background: #ffffff;
pointer-events: none;
opacity: 0;
visibility: hidden;
}
.messages-stream-loading-pill,
.messages-stream-loading-bar {
position: relative;
overflow: hidden;
background: rgba(55, 53, 47, 0.07);
}
.messages-stream-loading-pill::after,
.messages-stream-loading-bar::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.35) 42%,
rgba(255, 255, 255, 0.75) 50%,
rgba(255, 255, 255, 0.35) 58%,
transparent 100%
);
transform: translateX(-120%);
animation: messages-stream-shimmer 1.35s ease-in-out infinite;
}
.messages-stream-loading-bar:nth-of-type(2)::after {
animation-delay: 0.12s;
}
.messages-stream-loading-bar:nth-of-type(3)::after {
animation-delay: 0.24s;
}
.messages-stream-loading-bar:nth-of-type(4)::after {
animation-delay: 0.36s;
}
.messages-stream-loading-pill {
display: block;
width: 70px;
height: 20px;
border-radius: 9999px;
margin: 0 auto 18px;
}
.messages-stream-loading-bar {
display: block;
height: 11px;
border-radius: 9999px;
margin-bottom: 10px;
}
.messages-stream-loading-bar--lg {
width: 74%;
}
.messages-stream-loading-bar--md {
width: 58%;
}
.messages-stream-loading-bar--sm {
width: 43%;
}
.messages-stream.is-hydrating > :not(.messages-stream-loading) {
visibility: hidden;
}
.messages-stream.is-hydrating .messages-stream-loading {
visibility: visible;
opacity: 1;
}
@keyframes messages-stream-shimmer {
0% {
transform: translateX(-120%);
}
100% {
transform: translateX(120%);
}
}
/* ─── Date separator ─── */
.messages-date-separator {
position: relative;
margin: 14px 0;
max-width: none;
display: flex;
justify-content: center;
pointer-events: none;
}
.messages-date-separator.is-sticky-active {
position: sticky;
top: 8px;
z-index: 14;
}
.messages-date-separator::before {
content: "";
position: absolute;
left: 16px;
right: 16px;
top: 50%;
height: 1px;
background: rgba(55, 53, 47, 0.09);
transform: translateY(-50%);
}
.messages-date-separator.is-sticky-active::before {
opacity: 0;
}
.messages-date-separator span {
position: relative;
z-index: 1;
border-radius: 9999px;
border: 1px solid rgba(55, 53, 47, 0.12);
background: #F7F6F3;
padding: 3px 10px;
color: #787774;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
}
/* ─── Empty state ─── */
.messages-empty-state {
display: flex;
align-items: flex-start;
justify-content: flex-start;
min-height: 100%;
padding: 26px 20px;
}
.messages-empty-state-card {
width: min(620px, 100%);
text-align: left;
border: 1px solid rgba(55, 53, 47, 0.09);
border-radius: 14px;
background: #ffffff;
padding: 22px 20px;
box-shadow: 0 1px 3px rgba(55, 53, 47, 0.04);
}
.messages-empty-state-icon {
margin: 0 0 10px;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: #F7F7F5;
color: #787774;
font-size: 20px;
font-weight: 700;
}
.messages-empty-state-title {
margin: 0;
color: #37352F;
font-size: 16px;
font-weight: 700;
}
.messages-empty-state-text {
margin: 6px 0 0;
color: #787774;
font-size: 13px;
}
/* ─── Message rows ─── */
.message-row {
margin: 0;
max-width: none;
transition: background-color 0.15s ease;
}
.message-row:hover,
.message-row:focus-within {
background: rgba(55, 53, 47, 0.035);
}
.message-row--jump-highlight {
background: color-mix(in srgb, var(--messages-accent) 8%, transparent) !important;
transition: background-color 0.45s ease;
}
.message-row-author {
font-size: 14px;
font-weight: 700;
color: #37352F;
}
.message-row-time {
font-size: 11px;
color: #B4B4B0;
font-family: 'FixelText', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-variant-numeric: normal;
white-space: nowrap;
}
.message-row-content {
color: #37352F;
line-height: 1.45;
font-family: 'FixelText', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-size: 14px;
}
/* ─── Reply quote ─── */
.message-reply-quote {
margin: 0 0 8px;
width: min(520px, 100%);
border: 1px solid rgba(55, 53, 47, 0.09);
border-left: 3px solid #B4B4B0;
border-radius: 8px;
background: #F7F7F5;
padding: 7px 9px;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 2px;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.message-reply-quote:hover {
background: rgba(55, 53, 47, 0.04);
border-color: rgba(55, 53, 47, 0.12);
}
.message-reply-quote-label {
color: #37352F;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
}
.message-reply-quote-snippet {
color: #787774;
font-size: 12px;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.message-row-content .trix-content,
.message-row-content .trix-content * {
font-family: inherit !important;
}
.message-row-content .trix-content {
color: inherit;
}
.message-row-content p {
margin: 0 0 0.3rem;
}
.message-row-content p:last-child {
margin-bottom: 0;
}
.message-row-content :where(h1, h2, h3, h4, h5, h6) {
margin: 0 0 0.3rem;
color: #37352F;
font-size: 14px;
line-height: 1.45;
font-weight: 600;
}
.message-row-content .trix-content a {
color: var(--messages-accent);
font-weight: 500;
font-size: inherit !important;
text-decoration: underline;
text-underline-offset: 2px;
}
.message-row-content figure,
.message-row-content action-text-attachment {
display: inline-block;
vertical-align: top;
margin: 0.35rem 0.35rem 0.35rem 0;
padding: 0;
}
.message-row-content .trix-content .attachment--preview {
display: inline-block;
width: var(--message-media-tile, 132px);
height: var(--message-media-tile, 132px);
max-width: var(--message-media-tile, 132px);
margin: 0.35rem 0.35rem 0.35rem 0;
padding: 0;
overflow: hidden;
border-radius: 10px;
border: 1px solid rgba(55, 53, 47, 0.09);
background: #F7F7F5;
text-align: left;
line-height: 0;
}
.message-row-content .trix-content .attachment--preview img,
.message-row-content .trix-content action-text-attachment img,
.message-row-content .trix-content figure img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover;
background: #F7F7F5;
}
.message-row-content .trix-content .attachment-gallery {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: none;
}
.message-row-content .trix-content .attachment-gallery .attachment {
flex: 0 0 var(--message-media-tile, 132px);
width: var(--message-media-tile, 132px);
max-width: var(--message-media-tile, 132px);
padding: 0;
}
.message-row-content .attachment__caption {
display: none;
}
/* ─── Inline images (rich-text embeds) ─── */
.message-inline-image-trigger {
position: relative;
display: inline-block;
width: var(--message-media-tile, 132px);
height: var(--message-media-tile, 132px);
margin: 0.35rem 0.35rem 0.35rem 0;
border-radius: 10px;
border: 1px solid rgba(55, 53, 47, 0.09);
background: #F7F7F5;
vertical-align: top;
text-decoration: none;
overflow: hidden;
line-height: 0;
}
.message-inline-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: #F7F7F5;
}
.message-inline-image-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: 8px;
background: linear-gradient(to top, rgba(55, 53, 47, 0.5), rgba(55, 53, 47, 0.06));
color: #ffffff;
font-size: 12px;
font-weight: 600;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
.message-row-content .trix-content .message-inline-image-overlay {
padding: 8px !important;
line-height: 1;
}
.message-inline-image-trigger:hover .message-inline-image-overlay {
opacity: 1;
}
.message-lightbox-trigger {
cursor: zoom-in;
}
.message-attachment-link:hover {
background: rgba(55, 53, 47, 0.04) !important;
border-color: rgba(55, 53, 47, 0.14) !important;
}
.message-lightbox-trigger:hover {
border-color: rgba(55, 53, 47, 0.16) !important;
}
/* ─── Uploaded photo grid — uniform squares ─── */
.messages-photo-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: calc(var(--message-media-tile, 132px) * 3 + 12px);
}
.messages-photo-card {
position: relative;
display: block;
flex: 0 0 var(--message-media-tile, 132px);
width: var(--message-media-tile, 132px);
height: var(--message-media-tile, 132px);
overflow: hidden;
border-radius: 10px;
border: 1px solid rgba(55, 53, 47, 0.09);
background: #F7F7F5;
line-height: 0;
text-decoration: none;
}
.messages-photo-image {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: #F7F7F5;
}
.messages-photo-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: 8px;
background: linear-gradient(to top, rgba(55, 53, 47, 0.45), transparent 55%);
color: #ffffff;
font-size: 12px;
font-weight: 600;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
line-height: 1.2;
}
.messages-photo-card:hover .messages-photo-overlay {
opacity: 1;
}
/* ─── Video players — stacked, comfortable size ─── */
.messages-video-stack {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
max-width: 32rem;
}
.messages-video-player {
position: relative;
overflow: hidden;
border-radius: 10px;
border: 1px solid rgba(55, 53, 47, 0.09);
background: #000;
box-shadow: 0 1px 3px rgba(55, 53, 47, 0.06);
}
.messages-video-player-element {
display: block;
width: 100%;
max-height: 360px;
background: #000;
}
/* Expand-to-viewer control, top-right of an inline video. */
.messages-video-expand {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
border: none;
color: #fff;
background: rgba(15, 15, 15, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
cursor: pointer;
opacity: 0;
transition: opacity 0.18s ease, background 0.18s ease;
}
.messages-video-player:hover .messages-video-expand,
.messages-video-expand:focus-visible {
opacity: 1;
}
.messages-video-expand:hover {
background: rgba(15, 15, 15, 0.78);
}
.messages-video-expand svg {
width: 16px;
height: 16px;
}
/* Touch devices have no hover — keep the affordance visible. */
@media (hover: none) {
.messages-video-expand { opacity: 1; }
}
/* ─── Slack-style in-page media viewer (lightbox) ─── */
.messages-lightbox {
-webkit-tap-highlight-color: transparent;
}
.messages-lightbox-stage {
display: flex;
align-items: center;
justify-content: center;
max-width: min(96vw, 1400px);
max-height: 88vh;
}
.messages-lightbox-media {
display: block;
max-width: min(96vw, 1400px);
max-height: 88vh;
width: auto;
height: auto;
border-radius: 8px;
object-fit: contain;
background: #000;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.messages-lightbox-toolbar {
position: absolute;
top: 12px;
right: 12px;
display: flex;
align-items: center;
gap: 8px;
max-width: calc(100vw - 24px);
}
.messages-lightbox-title {
max-width: 42vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
}
.messages-lightbox-tool {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 999px;
color: #fff;
background: rgba(255, 255, 255, 0.15);
transition: background 0.18s ease;
cursor: pointer;
}
.messages-lightbox-tool:hover {
background: rgba(255, 255, 255, 0.28);
}
.messages-lightbox-tool svg {
width: 18px;
height: 18px;
}
.messages-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 999px;
color: #fff;
background: rgba(255, 255, 255, 0.15);
border: none;
cursor: pointer;
transition: background 0.18s ease, opacity 0.18s ease;
}
.messages-lightbox-nav:hover {
background: rgba(255, 255, 255, 0.28);
}
.messages-lightbox-nav svg {
width: 20px;
height: 20px;
}
.messages-lightbox-nav--prev { left: 12px; }
.messages-lightbox-nav--next { right: 12px; }
.messages-lightbox-nav.is-disabled {
opacity: 0.35;
cursor: not-allowed;
}
.messages-lightbox-counter {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
padding: 4px 10px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 12px;
font-weight: 500;
}
@media (max-width: 640px) {
.messages-lightbox-nav {
width: 38px;
height: 38px;
}
.messages-lightbox-nav--prev { left: 6px; }
.messages-lightbox-nav--next { right: 6px; }
.messages-lightbox-title { display: none; }
}
.message-upload-tile--video {
background: #000;
}
.message-upload-video {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: #000;
}
/* ─── Message editing ─── */
.message-edit-row:hover {
background: transparent;
}
.message-edit-card {
border: 1px solid rgba(55, 53, 47, 0.12);
border-radius: 10px;
background: #ffffff;
box-shadow: 0 2px 8px rgba(55, 53, 47, 0.06);
overflow: hidden;
}
.message-edit-card trix-toolbar {
display: none !important;
}
.message-edit-card trix-editor {
border: 0 !important;
margin: 0 !important;
min-height: 74px;
max-height: 240px;
overflow-y: auto;
padding: 0.5rem 0.7rem !important;
outline: none !important;
color: #37352F;
line-height: 1.45;
}
.message-edit-card trix-editor,
.message-edit-card trix-editor * {
font-family: 'FixelText', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
}
.message-edit-card trix-editor:empty:not(:focus)::before,
.message-edit-card trix-editor::before {
font-family: inherit !important;
}
.message-edit-actions {
display: flex;
align-items: center;
gap: 8px;
}
.message-edit-save {
border: none;
border-radius: 8px;
background: var(--messages-accent);
color: #ffffff;
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
transition: background-color 0.15s ease;
}
.message-edit-save:hover {
background: var(--messages-accent-hover);
}
.message-edit-cancel {
border: 1px solid rgba(55, 53, 47, 0.12);
border-radius: 8px;
background: #ffffff;
color: #37352F;
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.message-edit-cancel:hover {
background: #F7F7F5;
border-color: rgba(55, 53, 47, 0.18);
}
.message-edit-hint {
color: #B4B4B0;
font-size: 11px;
margin-left: 2px;
}
/* ─── Message row actions ─── */
.message-row-actions {
position: absolute;
top: 4px;
right: 10px;
z-index: 20;
display: flex;
align-items: center;
gap: 1px;
border: 1px solid rgba(55, 53, 47, 0.1);
border-radius: 9px;
padding: 3px;
background: #ffffff;
box-shadow:
0 1px 2px rgba(55, 53, 47, 0.06),
0 4px 14px rgba(55, 53, 47, 0.1);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-1px);
transition:
opacity 0.14s ease,
visibility 0.14s ease,
transform 0.14s ease,
box-shadow 0.14s ease;
}
.message-row:hover .message-row-actions,
.message-row:focus-within .message-row-actions,
.message-row-actions:focus-within {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
box-shadow:
0 1px 3px rgba(55, 53, 47, 0.08),
0 6px 18px rgba(55, 53, 47, 0.14);
}
.message-row-actions .notification-action-btn {
width: 30px;
height: 30px;
border-radius: 7px;
color: #6f6f6c;
}
.message-row-actions .notification-action-btn:hover {
background-color: rgba(55, 53, 47, 0.07);
color: #37352F;
}
.message-row-actions .notification-action-btn--danger {
color: #EB5757;
}
.message-row-actions .notification-action-btn--danger:hover {
background-color: rgba(235, 87, 87, 0.1);
color: #D64545;
}
.message-row-actions .notification-action-btn:focus-visible {
outline: 2px solid color-mix(in srgb, var(--messages-accent) 45%, transparent);
outline-offset: 1px;
}
/* ─── Mobile web message UX ─── */
@media (max-width: 767px) {
#internal-body-wrapper:has(.messages-index-frame--thread),
#internal-body-wrapper:has(.mobile-message-container) {
padding-bottom: 0 !important;
}
.messages-index-shell {
height: calc(100dvh - var(--messages-nav-offset, 48px));
min-height: calc(100dvh - var(--messages-nav-offset, 48px));
max-height: calc(100dvh - var(--messages-nav-offset, 48px));
}
.messages-stage--thread {
height: 100%;
min-height: 0;
max-height: 100%;
}
.messages-conversation-shell {
height: 100%;
min-height: 0;
max-height: 100%;
}
.messages-conversation-body {
min-height: 0;
}
.messages-conversation-main {
flex: 1;
min-height: 0;
max-height: 100%;
overflow: hidden;
}
.message-row {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.message-row.is-actions-open {
background: rgba(55, 53, 47, 0.04);
}
.message-row-actions {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(2px);
top: 6px;
right: 8px;
padding: 2px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(55, 53, 47, 0.12);
}
.message-row.is-actions-open .message-row-actions {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.message-row-actions .notification-action-btn {
width: 34px;
height: 34px;
}
.messages-composer-shell {
flex-shrink: 0;
z-index: 12;
padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
background: #ffffff;
border-top: 1px solid rgba(55, 53, 47, 0.08);
}
.messages-composer {
overflow: visible;
}
.messages-composer-emoji-popover:not(.hidden) {
position: fixed;
left: 10px;
right: 10px;
bottom: calc(76px + env(safe-area-inset-bottom, 0px));
margin-bottom: 0;
z-index: 120;
}
.messages-composer-emoji-card {
/* Height is set on open from the space that actually exists — see
message_form_controller#positionComposerEmojiPicker. */
max-width: none;
}
.emoji-picker-popup {
position: fixed !important;
z-index: 130;
}
.messages-composer-toolbar {
gap: 8px;
padding: 4px 6px 6px;
}
.messages-composer-toolbar-tools {
flex: 1;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex-wrap: nowrap;
}
.messages-composer-toolbar-tools::-webkit-scrollbar {
display: none;
}
.messages-composer-toolbar-submit {
flex-shrink: 0;
margin-left: auto;
}
.messages-composer-format-group {
display: none;
}
.messages-composer-toolbar-tools label,
.messages-composer-toolbar-tools button:not(.messages-format-button) {
flex-shrink: 0;
}
.messages-send-button {
min-width: 64px;
padding: 8px 14px !important;
font-size: 14px !important;
white-space: nowrap;
}
.messages-composer-editor trix-editor,
.messages-composer trix-editor {
min-height: 44px !important;
/* Lower than desktop: the on-screen keyboard already takes half the
screen, so a composer that grows past this leaves nothing to read. */
max-height: 96px !important;
font-size: 16px !important;
}
.messages-video-stack {
max-width: 100%;
}
.messages-conversation-header {
padding: 10px 12px;
padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.messages-stream {
padding-left: 4px;
padding-right: 4px;
}
.mobile-message-container .message-row-actions {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.mobile-message-container .message-row.is-actions-open .message-row-actions {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.mobile-message-container .messages-composer-format-group {
display: none;
}
}
/* ─── Reactions ─── */
.message-reactions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
position: relative;
}
.message-reaction-pill {
position: relative;
cursor: pointer;
user-select: none;
border: 1px solid rgba(55, 53, 47, 0.09);
border-radius: 9999px;
background: #F7F7F5;
min-height: 28px;
padding: 4px 9px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.message-reaction-pill:hover {
border-color: rgba(55, 53, 47, 0.15);
background: rgba(55, 53, 47, 0.04);
transform: translateY(-1px);
}
.message-reaction-pill.is-active {
border-color: color-mix(in srgb, var(--messages-accent) 30%, transparent);
background: color-mix(in srgb, var(--messages-accent) 6%, transparent);
}
.message-reaction-emoji {
font-size: 15px;
line-height: 1;
display: inline-flex;
}
.message-reaction-count {
min-width: 12px;
color: #787774;
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.message-reaction-pill.is-active .message-reaction-count {
color: var(--messages-accent);
}
/* Slack-style hover tooltip: who reacted (comma-separated) + the emoji. */
.message-reaction-tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
z-index: 70;
min-width: max-content;
max-width: min(260px, 80vw);
padding: 7px 10px;
border-radius: 8px;
background: #1f1f1f;
color: #ffffff;
box-shadow: 0 8px 24px rgba(15, 15, 15, 0.24);
text-align: center;
line-height: 1.35;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.message-reaction-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #1f1f1f;
}
.message-reaction-tooltip-names {
display: block;
font-size: 12px;
font-weight: 600;
white-space: normal;
word-break: break-word;
}
.message-reaction-tooltip-action {
display: block;
margin-top: 1px;
font-size: 11px;
font-weight: 400;
color: rgba(255, 255, 255, 0.66);
}
.message-reaction-tooltip-emoji {
font-size: 12px;
}
.message-reaction-pill:hover .message-reaction-tooltip,
.message-reaction-pill:focus-visible .message-reaction-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* On touch devices a hover tooltip would stick after a tap — hide it. */
@media (hover: none) {
.message-reaction-tooltip { display: none; }
}
.message-reaction-add {
width: 28px;
height: 28px;
border-radius: 9999px;
border: 1px solid rgba(55, 53, 47, 0.09);
background: #F7F7F5;
color: #787774;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.message-reaction-add:hover {
border-color: rgba(55, 53, 47, 0.15);
background: rgba(55, 53, 47, 0.04);
color: #37352F;
}
/* ─── Emoji picker ─── */
.emoji-picker-popup {
position: fixed;
z-index: 60;
pointer-events: auto;
/* Give the popup an intrinsic width so getBoundingClientRect() measures
the card — not the full page width — when we position it. Without this
the picker mis-measures and lands flush against the viewport edge. */
width: min(260px, calc(100vw - 20px));
}
.emoji-picker-popup-card {
width: 100%;
border-radius: 12px;
border: 1px solid rgba(55, 53, 47, 0.09);
background: #ffffff;
padding: 9px;
box-shadow: 0 8px 24px rgba(55, 53, 47, 0.12);
}
.emoji-picker-popup-title {
margin: 0 0 7px;
color: #B4B4B0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.emoji-reaction-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 4px;
}
.emoji-reaction-btn {
width: 100%;
height: 34px;
border: none;
border-radius: 8px;
background: transparent;
font-size: 20px;
line-height: 1;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.emoji-reaction-btn:hover {
background: rgba(55, 53, 47, 0.04);
transform: translateY(-1px);
}
/* ─── Composer ─── */
.messages-composer-shell {
border-top: 1px solid rgba(55, 53, 47, 0.09);
background: #ffffff;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
}
.messages-composer {
overflow: hidden;
border: 1px solid rgba(55, 53, 47, 0.12);
border-radius: 10px;
background: #ffffff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.messages-reply-context {
border-bottom: 1px solid rgba(55, 53, 47, 0.06);
background: #F7F7F5;
padding: 7px 9px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.messages-reply-context.hidden {
display: none !important;
}
.messages-reply-context-copy {
min-width: 0;
}
.messages-reply-context-title {
margin: 0;
color: #37352F;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.messages-reply-context-snippet {
margin: 2px 0 0;
color: #787774;
font-size: 12px;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.messages-reply-context-close {
margin-top: 1px;
width: 22px;
height: 22px;
border: none;
border-radius: 6px;
background: transparent;
color: #787774;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background-color 0.15s ease, color 0.15s ease;
}
.messages-reply-context-close:hover {
background: rgba(55, 53, 47, 0.06);
color: #37352F;
}
.messages-composer:focus-within {
border-color: var(--messages-accent);
box-shadow: 0 0 0 3px var(--messages-composer-focus-ring);
}
.messages-composer-editor {
padding: 2px 4px;
font-family: 'FixelText', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.messages-composer-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border-top: 1px solid rgba(55, 53, 47, 0.06);
background: #ffffff;
padding: 6px 8px;
}
.messages-composer-toolbar-tools {
display: flex;
align-items: center;
gap: 2px;
min-width: 0;
}
.messages-composer-toolbar-submit {
display: flex;
align-items: center;
flex-shrink: 0;
}
.messages-composer-format-group {
display: inline-flex;
align-items: center;
gap: 2px;
margin-right: 3px;
padding-right: 4px;
border-right: 1px solid rgba(55, 53, 47, 0.06);
}
.messages-format-button {
width: 28px;
height: 28px;
border: none;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: #787774;
font-size: 12px;
font-weight: 700;
line-height: 1;
transition: background-color 0.15s ease, color 0.15s ease;
}
.messages-format-button:hover {
background: rgba(55, 53, 47, 0.06);
color: #37352F;
}
.messages-format-button:focus-visible,
.messages-composer-toolbar button:focus-visible,
.messages-composer-toolbar label:focus-visible {
outline: 2px solid color-mix(in srgb, var(--messages-accent) 40%, transparent);
outline-offset: 1px;
}
.messages-format-button.is-active {
background: color-mix(in srgb, var(--messages-accent) 8%, transparent);
color: var(--messages-accent);
}
.messages-format-glyph-italic {
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: 700;
font-size: 13px;
line-height: 1;
text-transform: lowercase;
}
.messages-send-button {
background: var(--messages-accent) !important;
display: block;
}
.messages-send-button:hover {
background: var(--messages-accent-hover);
}
.messages-send-button:focus-visible {
outline: 2px solid color-mix(in srgb, var(--messages-accent) 50%, white);
outline-offset: 2px;
}
.messages-composer trix-toolbar {
display: none !important;
}
.messages-composer trix-editor {
border: 0 !important;
margin: 0 !important;
padding: 0.35rem 0.45rem !important;
outline: none !important;
min-height: 46px;
/* The draft grows until it hits this, then scrolls. 280px plus a row of
attachment thumbnails made the composer nearly half the pane, which is
what left the emoji picker nowhere to go. Eight lines is still a
generous draft, and the rest scrolls. */
max-height: 176px;
overflow-y: auto;
color: #37352F;
font-size: 15px;
line-height: 1.45;
}
.messages-composer trix-editor,
.messages-composer trix-editor * {
font-family: inherit !important;
}
.messages-composer trix-editor:empty:not(:focus)::before,
.messages-composer trix-editor::before {
font-family: inherit !important;
color: #B4B4B0;
font-size: 15px;
line-height: 1.45;
}
.messages-composer trix-editor a,
.message-edit-card trix-editor a {
color: var(--messages-accent) !important;
text-decoration: underline !important;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
}
/* Pasted/dropped images belong in the upload preview strip, not inline. */
.messages-composer trix-editor figure.attachment,
.messages-composer trix-editor action-text-attachment,
.messages-composer trix-editor .attachment--preview {
display: none !important;
}
/* ─── Composer emoji popover ───
The popover hangs off the TOP of the composer form and grows upward, and
the conversation pane clips anything above it (overflow: hidden). So a tall
composer — a long draft, or a draft plus a row of attachment thumbnails —
used to push the card off the top of the pane: its title and first rows of
emoji were simply gone, with nothing to scroll. Bounding the card to the
space that actually exists, and letting the GRID take up the slack, keeps
the whole picker reachable however tall the composer gets. */
.messages-composer-emoji-popover {
position: absolute;
left: 0;
bottom: 100%;
z-index: 40;
margin-bottom: 8px;
}
.messages-composer-emoji-card {
width: min(320px, calc(100vw - 24px));
max-height: min(44vh, 320px);
display: flex;
flex-direction: column;
min-height: 0;
border-radius: 12px;
border: 1px solid rgba(55, 53, 47, 0.09);
background: #ffffff;
padding: 10px;
box-shadow: 0 8px 24px rgba(55, 53, 47, 0.12);
}
.messages-composer-emoji-title {
margin: 0 0 8px;
color: #B4B4B0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* The scroller, one grid per category inside it. Fills whatever the card has
left and scrolls, rather than fixing a height the card may not have room
for. The card's own max-height is set on open from the space actually
available, so a second cap here would only give it less room than it has. */
.messages-composer-emoji-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 2px;
}
.messages-composer-emoji-group-title {
position: sticky;
top: 0;
z-index: 1;
margin: 0;
padding: 6px 0 4px;
background: #ffffff;
color: #B4B4B0;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.messages-composer-emoji-group-title:first-child {
padding-top: 0;
}
.messages-composer-emoji-grid {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 4px;
}
.messages-composer-emoji-btn {
width: 100%;
height: 30px;
border: none;
border-radius: 8px;
background: transparent;
font-size: 20px;
line-height: 1;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.messages-composer-emoji-btn:hover {
background: rgba(55, 53, 47, 0.04);
transform: translateY(-1px);
}
/* ─── Upload previews ─── */
.message-upload-preview-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
/* Attaching a stack of files used to grow the composer without limit,
eating the conversation above it and shoving the emoji popover off the
top of the pane. Cap it and scroll the thumbnails instead. */
max-height: 120px;
overflow-y: auto;
overscroll-behavior: contain;
}
.message-upload-tile {
position: relative;
width: 82px;
height: 82px;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(55, 53, 47, 0.09);
background: #F7F7F5;
flex-shrink: 0;
}
.message-upload-tile--file {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 8px 6px;
background: #F7F7F5;
}
.message-upload-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.message-upload-remove {
position: absolute;
top: 4px;
right: 4px;
z-index: 10;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: none;
border-radius: 9999px;
background: rgba(55, 53, 47, 0.78);
color: #ffffff;
font-size: 13px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background-color 0.15s ease;
}
.message-upload-remove:hover {
background: rgba(55, 53, 47, 0.92);
}
.message-upload-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
background: linear-gradient(to top, rgba(55, 53, 47, 0.62), rgba(55, 53, 47, 0.08));
padding: 6px 4px;
}
.message-upload-overlay-label {
color: #ffffff;
font-size: 10px;
font-weight: 600;
}
.message-upload-file-icon {
width: 18px;
height: 18px;
color: #B4B4B0;
margin-bottom: 4px;
}
.message-upload-file-name {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #787774;
font-size: 10px;
line-height: 1.2;
}
.message-upload-file-size {
color: #B4B4B0;
font-size: 10px;
line-height: 1.2;
}
@keyframes messageSlideInBottom {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-slide-in-bottom {
animation: messageSlideInBottom 0.26s ease-out;
}
/* ─── Desktop breakpoint ─── */
@media (min-width: 768px) {
.messages-index-frame {
flex-direction: row;
min-height: 0;
}
.messages-sidebar {
width: 260px;
min-width: 240px;
min-height: 0;
}
.messages-stage {
display: flex;
}
.messages-index-frame--thread .messages-stage {
display: flex;
}
.messages-conversation-header {
padding: 11px 18px;
}
.messages-stream {
padding-bottom: 10px;
}
.messages-composer-shell {
padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
}
}
/* ─── Mobile breakpoint ─── */
@media (max-width: 767px) {
.mobile-message-container {
position: fixed;
inset: 0;
/* Native app: there's no web navbar, so the old 48px nav offset was just
dead white space. Sit flush to the top and use the iOS safe-area inset
(status bar / notch) so the header isn't cut off. */
top: 0;
display: flex;
flex-direction: column;
background: #ffffff;
height: 100dvh;
max-height: 100dvh;
padding-top: env(safe-area-inset-top, 0px);
}
body:has(.mobile-message-container) {
overflow: hidden;
}
.mobile-message-container .message-scroll-container {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
}
.mobile-message-container .message-input-container {
flex-shrink: 0;
z-index: 10;
padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
background: #ffffff;
border-top: 1px solid rgba(55, 53, 47, 0.06);
}
.mobile-message-container trix-toolbar,
.messages-conversation-shell trix-toolbar {
display: none !important;
}
.messages-index-frame--thread .messages-sidebar {
display: none;
}
.messages-index-frame--thread .messages-stage {
display: flex;
padding: 0;
}
.messages-conversation-shell.is-details-open .messages-conversation-main {
margin-right: 0;
}
.messages-index-frame--thread .messages-conversation-info {
display: inline-flex;
}
.messages-index-frame--thread .messages-details-backdrop {
position: absolute;
inset: 0;
display: block;
z-index: 17;
background: rgba(55, 53, 47, 0.34);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.messages-index-frame--thread .messages-details-backdrop.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.messages-index-frame--thread .messages-details-drawer {
display: flex;
width: min(90vw, 340px);
max-width: 340px;
transform: translateX(104%);
box-shadow: -4px 0 16px rgba(55, 53, 47, 0.12);
z-index: 18;
}
.mobile-message-details-toggle {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 12px);
right: 14px;
z-index: 42;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid rgba(55, 53, 47, 0.09);
color: #37352F;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 2px 8px rgba(55, 53, 47, 0.1);
backdrop-filter: blur(6px);
}
.mobile-message-details-backdrop {
position: fixed;
inset: 0;
display: block;
z-index: 39;
background: rgba(55, 53, 47, 0.34);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.mobile-message-details-backdrop.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.mobile-message-container .messages-details-drawer {
display: flex;
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 40;
width: min(90vw, 340px);
max-width: 340px;
transform: translateX(104%);
transition: transform 0.24s ease;
box-shadow: -4px 0 16px rgba(55, 53, 47, 0.12);
/* Clear the iOS status bar so the drawer's "Conversation details" header
isn't cut off / overflowing at the top. */
padding-top: env(safe-area-inset-top, 0px);
}
.mobile-message-container.is-details-open .messages-details-drawer {
transform: translateX(0);
}
.mobile-message-container .messages-details-body {
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
}
/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
.notification-row-base { animation: none !important; }
* { transition-duration: 0.01s !important; }
}
/* ─── Scrollbar (Notion style) ─── */
.notifications-root ::-webkit-scrollbar { width: 6px; }
.notifications-root ::-webkit-scrollbar-track { background: transparent; }
.notifications-root ::-webkit-scrollbar-thumb { background: rgba(55,53,47,0.12); border-radius: 3px; }
/* ═══════════════════════════════════════════════════
Realtime presence — typing · online · seen
(additive; reuses the existing Notion palette)
═══════════════════════════════════════════════════ */
/* ─── Header avatar + online dot ─── */
.messages-conversation-avatar {
position: relative;
flex-shrink: 0;
line-height: 0;
}
.messages-presence-dot {
position: absolute;
right: -2px;
bottom: -2px;
width: 11px;
height: 11px;
border-radius: 9999px;
background: #B4B4B0;
border: 2px solid #ffffff;
box-shadow: 0 0 0 0 rgba(46, 168, 107, 0.45);
transition: background-color 0.2s ease, transform 0.2s ease;
transform: scale(0.85);
}
.messages-presence-dot.is-online {
background: #2EA86B;
transform: scale(1);
animation: messagesPresencePulse 2.4s ease-out infinite;
}
.messages-presence-dot.is-away {
background: #E5A53B;
transform: scale(1);
animation: none;
}
@keyframes messagesPresencePulse {
0% { box-shadow: 0 0 0 0 rgba(46, 168, 107, 0.45); }
70% { box-shadow: 0 0 0 5px rgba(46, 168, 107, 0); }
100% { box-shadow: 0 0 0 0 rgba(46, 168, 107, 0); }
}
/* ─── Live strip (sits between stream and composer) ─── */
.messages-live-strip {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 18px;
background: #ffffff;
pointer-events: none;
}
.messages-live-strip--mobile {
padding: 0 14px;
}
/* ─── Typing indicator ─── */
.messages-typing-indicator {
display: flex;
align-items: center;
gap: 8px;
height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease, height 0.2s ease, padding 0.2s ease;
}
.messages-typing-indicator.is-active {
height: 22px;
padding: 1px 0 3px;
opacity: 1;
transform: translateY(0);
}
.messages-typing-dots {
display: inline-flex;
align-items: flex-end;
gap: 3px;
padding: 5px 9px;
border-radius: 9999px;
background: #F7F7F5;
border: 1px solid rgba(55, 53, 47, 0.06);
}
.messages-typing-dots span {
width: 5px;
height: 5px;
border-radius: 9999px;
background: #B4B4B0;
display: inline-block;
animation: messagesTypingBounce 1.2s ease-in-out infinite;
}
.messages-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.messages-typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes messagesTypingBounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
30% { transform: translateY(-4px); opacity: 1; }
}
.messages-typing-label {
font-size: 12px;
font-weight: 500;
color: #787774;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ─── Seen / read receipt ─── */
.messages-seen-receipt {
display: none;
align-items: center;
justify-content: flex-end;
gap: 6px;
height: 0;
opacity: 0;
transform: translateY(3px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.messages-seen-receipt.is-active {
display: flex;
height: 20px;
opacity: 1;
transform: translateY(0);
padding-bottom: 2px;
}
.messages-seen-avatars {
display: inline-flex;
align-items: center;
}
.messages-seen-avatar {
width: 16px;
height: 16px;
border-radius: 9999px;
overflow: hidden;
border: 1.5px solid #ffffff;
background: #F7F7F5;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: -5px;
}
.messages-seen-avatar:first-child { margin-left: 0; }
.messages-seen-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.messages-seen-avatar--fallback {
font-size: 9px;
font-weight: 700;
color: #787774;
}
.messages-seen-label {
font-size: 11px;
font-weight: 500;
color: #B4B4B0;
letter-spacing: 0.01em;
}
/* ─── Micro-interactions (humanization & polish) ─── */
/* Satisfying press on emoji + reaction controls */
.emoji-reaction-btn:active,
.messages-composer-emoji-btn:active {
transform: scale(0.86);
}
.message-reaction-pill:active {
transform: scale(0.94);
}
.message-reaction-add:active {
transform: scale(0.9);
}
/* Emoji picker entrance */
.emoji-picker-popup-card {
transform-origin: bottom right;
animation: messagesPickerPop 0.16s ease-out;
}
@keyframes messagesPickerPop {
from { opacity: 0; transform: translateY(6px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Send button — gentle lift + press feedback */
.messages-send-button {
transition: background-color 0.15s ease, transform 0.12s ease, box-shadow 0.2s ease;
}
.messages-send-button:not(:disabled):hover {
transform: translateY(-1px);
}
.messages-send-button:not(:disabled):active {
transform: translateY(0) scale(0.97);
}
/* Composer attachment / tool buttons — subtle press */
.messages-composer-toolbar label:active,
.messages-composer-toolbar button:not(.messages-send-button):active {
transform: scale(0.92);
}
@media (prefers-reduced-motion: reduce) {
.messages-presence-dot.is-online { animation: none; }
.messages-typing-dots span { animation: none; opacity: 0.7; }
.emoji-picker-popup-card { animation: none; }
}
/* ═══════════════════════════════════════════════════
Messages — presence status menu (sidebar header)
═══════════════════════════════════════════════════ */
.messages-status-menu {
position: relative;
}
.messages-status-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 3px 7px;
border: none;
border-radius: 6px;
background: transparent;
color: #787774;
font-size: 12px;
font-weight: 500;
transition: background-color 0.12s ease, color 0.12s ease;
}
.messages-status-trigger:hover { background: rgba(55, 53, 47, 0.06); color: #37352F; }
.messages-status-caret { width: 13px; height: 13px; opacity: 0.7; }
.messages-status-dot {
width: 9px;
height: 9px;
border-radius: 9999px;
flex-shrink: 0;
background: #B4B4B0;
box-shadow: inset 0 0 0 1.5px rgba(55, 53, 47, 0.08);
}
.messages-status-dot[data-status="active"] { background: #2EA86B; }
.messages-status-dot[data-status="away"] { background: #E5A53B; }
.messages-status-dot[data-status="offline"] { background: transparent; box-shadow: inset 0 0 0 1.5px #B4B4B0; }
.messages-status-popover {
position: absolute;
z-index: 40;
top: calc(100% + 4px);
left: 0;
min-width: 184px;
padding: 5px;
border-radius: 10px;
background: #ffffff;
border: 1px solid rgba(55, 53, 47, 0.1);
box-shadow: 0 10px 30px rgba(55, 53, 47, 0.16);
}
.messages-status-option {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 7px 9px;
border: none;
border-radius: 7px;
background: transparent;
color: #37352F;
font-size: 13px;
text-align: left;
transition: background-color 0.12s ease;
}
.messages-status-option:hover { background: rgba(55, 53, 47, 0.06); }
.messages-status-option.is-selected { background: color-mix(in srgb, var(--messages-accent) 10%, transparent); color: var(--messages-accent); }
/* ═══════════════════════════════════════════════════
Messages — sidebar footer (avatar menu + focus mode)
═══════════════════════════════════════════════════ */
.messages-sidebar-footer {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid rgba(55, 53, 47, 0.09);
background: #F7F7F5;
}
/* ── Avatar menu ── */
.messages-avatar-menu { position: relative; flex: 1 1 auto; min-width: 0; }
.messages-avatar-trigger {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
min-width: 0;
padding: 5px 7px;
border: none;
border-radius: 8px;
background: transparent;
text-align: left;
transition: background-color 0.12s ease;
}
.messages-avatar-trigger:hover { background: rgba(55, 53, 47, 0.06); }
.messages-avatar-figure { position: relative; flex-shrink: 0; width: 30px; height: 30px; }
.messages-avatar-img,
.messages-avatar-fallback {
width: 30px; height: 30px; border-radius: 9999px;
object-fit: cover; display: flex; align-items: center; justify-content: center;
}
.messages-avatar-fallback {
background: color-mix(in srgb, var(--messages-accent) 16%, #fff);
color: var(--messages-accent); font-size: 13px; font-weight: 700;
}
.messages-avatar-presence {
position: absolute; right: -1px; bottom: -1px;
width: 11px; height: 11px; border-radius: 9999px;
background: #B4B4B0; box-shadow: 0 0 0 2px #F7F7F5;
}
.messages-avatar-presence[data-status="active"] { background: #2EA86B; }
.messages-avatar-presence[data-status="away"] { background: #E5A53B; }
.messages-avatar-presence[data-status="offline"] { background: #fff; box-shadow: 0 0 0 2px #F7F7F5, inset 0 0 0 1.5px #B4B4B0; }
.messages-avatar-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.messages-avatar-name { font-size: 13px; font-weight: 600; color: #37352F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-avatar-status { font-size: 11.5px; color: #37352F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-avatar-status-muted { color: #908F8B; }
.messages-avatar-caret { width: 14px; height: 14px; flex-shrink: 0; margin-left: auto; opacity: 0.55; color: #787774; }
.messages-avatar-popover {
position: absolute;
z-index: 60;
bottom: calc(100% + 8px);
left: 0;
width: 240px;
max-width: calc(100vw - 28px);
max-height: min(440px, calc(100vh - 120px));
overflow-y: auto;
padding: 10px;
border-radius: 12px;
background: #ffffff;
border: 1px solid rgba(55, 53, 47, 0.1);
box-shadow: 0 16px 44px rgba(55, 53, 47, 0.22);
}
.messages-avatar-section { display: flex; flex-direction: column; gap: 6px; }
.messages-avatar-section-title {
margin: 2px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
text-transform: uppercase; color: #908F8B;
}
.messages-avatar-divider { height: 1px; margin: 8px 0; background: rgba(55, 53, 47, 0.08); }
.messages-avatar-status-row {
display: flex; align-items: center; gap: 8px;
padding: 7px 9px; border-radius: 8px;
background: color-mix(in srgb, var(--messages-accent) 8%, transparent);
}
.messages-avatar-status-current { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: #37352F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-avatar-status-clear {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border: none; border-radius: 6px; background: transparent; color: #787774;
}
.messages-avatar-status-clear:hover { background: rgba(55, 53, 47, 0.08); color: #37352F; }
.messages-avatar-status-form { display: flex; flex-direction: column; gap: 8px; }
.messages-avatar-status-input {
display: flex; align-items: center; gap: 6px;
border: 1px solid rgba(55, 53, 47, 0.14); border-radius: 9px; padding: 4px 6px;
}
.messages-avatar-status-input:focus-within { border-color: var(--messages-accent); }
.messages-avatar-text-input {
flex: 1; min-width: 0; border: none; background: transparent; font-size: 13px; color: #37352F; padding: 4px 0;
}
.messages-avatar-text-input:focus { outline: none; box-shadow: none; }
/* Status emoji picker trigger + its empty state. */
.messages-avatar-emoji-button {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; padding: 0;
border: none; border-radius: 7px; background: transparent; cursor: pointer;
transition: background-color 0.12s ease;
}
.messages-avatar-emoji-button:hover { background: rgba(55, 53, 47, 0.07); }
.messages-avatar-emoji-glyph { font-size: 17px; line-height: 1; }
.messages-avatar-emoji-placeholder { width: 18px; height: 18px; color: #B4B4B0; }
/* Empty state: show the muted smiley outline, hide the (blank) glyph. */
.messages-avatar-emoji-button:not(.is-empty) .messages-avatar-emoji-placeholder { display: none; }
.messages-avatar-emoji-button.is-empty .messages-avatar-emoji-glyph { display: none; }
.messages-avatar-emoji-popover {
border: 1px solid rgba(55, 53, 47, 0.12);
border-radius: 10px;
background: #fff;
padding: 6px;
box-shadow: 0 6px 20px rgba(55, 53, 47, 0.1);
}
.messages-avatar-emoji-popover[hidden] { display: none; }
.messages-avatar-emoji-none {
display: flex; align-items: center; gap: 6px; width: 100%;
padding: 5px 7px; margin-bottom: 5px;
border: none; border-radius: 7px; background: transparent;
color: #787774; font-size: 12px; cursor: pointer;
}
.messages-avatar-emoji-none:hover { background: rgba(55, 53, 47, 0.06); color: #37352F; }
.messages-avatar-emoji-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 2px;
max-height: 176px;
overflow-y: auto;
}
.messages-avatar-emoji-choice {
display: inline-flex; align-items: center; justify-content: center;
aspect-ratio: 1 / 1; padding: 0;
border: none; border-radius: 6px; background: transparent;
font-size: 17px; line-height: 1; cursor: pointer;
transition: background-color 0.1s ease, transform 0.1s ease;
}
.messages-avatar-emoji-choice:hover { background: rgba(55, 53, 47, 0.08); transform: scale(1.12); }
.messages-avatar-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.messages-avatar-preset {
display: flex; align-items: center; gap: 7px;
padding: 6px 8px; border: 1px solid rgba(55, 53, 47, 0.1); border-radius: 8px;
background: #fff; color: #37352F; font-size: 12.5px; text-align: left; min-width: 0;
transition: background-color 0.12s ease, border-color 0.12s ease;
}
.messages-avatar-preset:hover { background: rgba(55, 53, 47, 0.05); border-color: rgba(55, 53, 47, 0.16); }
.messages-avatar-preset-emoji { flex-shrink: 0; font-size: 14px; }
.messages-avatar-preset-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-avatar-expiry {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: 12px; color: #787774; padding: 0 2px;
}
.messages-avatar-expiry-select {
border: 1px solid rgba(55, 53, 47, 0.14); border-radius: 7px;
padding: 4px 8px; font-size: 12px; color: #37352F; background: #fff;
}
.messages-avatar-status-save {
margin-top: 2px; padding: 8px 10px; border: none; border-radius: 8px;
background: var(--messages-accent); color: #fff; font-size: 13px; font-weight: 600;
transition: filter 0.12s ease;
}
.messages-avatar-status-save:hover { filter: brightness(0.96); }
.messages-avatar-presence-option {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 7px 9px; border: none; border-radius: 7px; background: transparent;
color: #37352F; font-size: 13px; text-align: left; transition: background-color 0.12s ease;
}
.messages-avatar-presence-option:hover { background: rgba(55, 53, 47, 0.06); }
.messages-avatar-presence-option.is-selected { background: color-mix(in srgb, var(--messages-accent) 10%, transparent); color: var(--messages-accent); }
.messages-avatar-presence-hint { margin-left: auto; font-size: 11px; color: #908F8B; }
/* ── Focus mode toggle ── */
.messages-focus { flex-shrink: 0; }
.messages-focus-trigger {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px; border: 1px solid rgba(55, 53, 47, 0.12); border-radius: 999px;
background: #fff; color: #787774; font-size: 12px; font-weight: 600;
transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.messages-focus-trigger:hover { background: rgba(55, 53, 47, 0.05); color: #37352F; }
.messages-focus-icon { width: 15px; height: 15px; }
.messages-focus.is-on .messages-focus-trigger {
background: color-mix(in srgb, var(--messages-accent) 14%, #fff);
border-color: color-mix(in srgb, var(--messages-accent) 38%, transparent);
color: var(--messages-accent);
}
/* ═══════════════════════════════════════════════════
Messages — avatar presence badge (availability + status)
Overlaid bottom-right of any user avatar across the messages UI.
═══════════════════════════════════════════════════ */
.messages-presence-badge {
position: absolute;
right: -3px;
bottom: -3px;
z-index: 2;
width: 11px;
height: 11px;
border-radius: 9999px;
background: #B4B4B0;
box-shadow: 0 0 0 2px #fff;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.messages-presence-badge[data-availability="active"] { background: #2EA86B; }
.messages-presence-badge[data-availability="away"] { background: #E5A53B; }
.messages-presence-badge[data-availability="offline"] { background: #fff; box-shadow: 0 0 0 2px #fff, inset 0 0 0 1.5px #B4B4B0; }
/* Auto-decided "inactive" — a muted grey dot (filled, distinct from the hollow
"appear offline"). */
.messages-presence-badge[data-availability="inactive"] { background: #B4B4B0; box-shadow: 0 0 0 2px #fff; }
/* With a custom status the badge becomes a white chip holding the comment
icon; availability is conveyed by the ring colour. */
.messages-presence-badge.has-status { width: 16px; height: 16px; background: #fff; }
.messages-presence-badge.has-status[data-availability="active"] { box-shadow: 0 0 0 2px #fff, inset 0 0 0 1.6px #2EA86B; }
.messages-presence-badge.has-status[data-availability="away"] { box-shadow: 0 0 0 2px #fff, inset 0 0 0 1.6px #E5A53B; }
.messages-presence-badge.has-status[data-availability="offline"] { box-shadow: 0 0 0 2px #fff, inset 0 0 0 1.6px #B4B4B0; }
.messages-presence-badge.has-status[data-availability="inactive"] { box-shadow: 0 0 0 2px #fff, inset 0 0 0 1.6px #B4B4B0; }
/* Realtime wrapper for a single-instance badge (e.g. the header). */
.messages-presence-badge-slot { display: contents; }
.messages-presence-badge-icon { width: 10px; height: 10px; color: var(--messages-accent, #2383E2); }
.messages-presence-badge--lg { width: 14px; height: 14px; right: -2px; bottom: -2px; }
.messages-presence-badge--lg.has-status { width: 18px; height: 18px; }
.messages-presence-badge--lg .messages-presence-badge-icon { width: 11px; height: 11px; }
/* Relative wrappers so the badge can overlay avatars without being clipped. */
.mobile-messages-person-avatar-wrap,
.messages-compose-quick-avatar-wrap,
.messages-compose-result-avatar-wrap,
.channel-create-member-avatar-wrap {
position: relative;
display: inline-flex;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════
Messages — avatar menu popover head + status expiry
═══════════════════════════════════════════════════ */
.messages-avatar-pop-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 2px 4px 8px;
}
.messages-avatar-pop-title { font-size: 13px; font-weight: 700; color: #37352F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-avatar-pop-close {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border: none; border-radius: 6px; background: transparent; color: #787774;
}
.messages-avatar-pop-close:hover { background: rgba(55, 53, 47, 0.08); color: #37352F; }
.messages-avatar-status-current { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.messages-avatar-status-current > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-avatar-status-clearat { font-size: 11px; font-weight: 400; color: #908F8B; margin-top: 1px; }
.messages-avatar-status-clearat:empty { display: none; }
.messages-avatar-expiry-hint { margin: 2px 2px 0; font-size: 11.5px; color: var(--messages-accent, #2383E2); }
.messages-avatar-expiry-hint[hidden] { display: none; }
/* DM partner's custom status line in the conversation header. */
.messages-conversation-status { display: flex; align-items: center; gap: 5px; min-width: 0; }
.messages-conversation-status-icon { width: 13px; height: 13px; flex-shrink: 0; color: var(--messages-accent, #2383E2); }
.messages-conversation-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Native index header: avatar menu + focus replace the old "Messages" title. */
.mobile-messages-index-headleft { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.mobile-messages-index-headleft .messages-avatar-trigger { padding: 4px 6px; }
.mobile-messages-index-header .messages-avatar-popover { top: calc(100% + 8px); bottom: auto; left: 0; }
.mobile-messages-index-header .messages-avatar-caret { transform: rotate(180deg); }
/* ═══════════════════════════════════════════════════
Messages — collapsible sidebar sections (Channels)
═══════════════════════════════════════════════════ */
.messages-sidebar-section { margin-top: 4px; }
.messages-sidebar-section-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 8px 2px 6px;
}
.messages-sidebar-section-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 1;
min-width: 0;
padding: 4px 4px;
border: none;
border-radius: 6px;
background: transparent;
color: #9b9a97;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.01em;
transition: background-color 0.12s ease, color 0.12s ease;
}
.messages-sidebar-section-toggle:hover { background: rgba(55, 53, 47, 0.05); color: #37352F; }
.messages-sidebar-section-caret {
width: 14px;
height: 14px;
flex-shrink: 0;
transition: transform 0.15s ease;
}
.messages-sidebar-section:not(.is-collapsed) .messages-sidebar-section-caret { transform: rotate(90deg); }
.messages-sidebar-section-add {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
border: none;
border-radius: 5px;
background: transparent;
color: #9b9a97;
transition: background-color 0.12s ease, color 0.12s ease;
}
.messages-sidebar-section-add:hover { background: rgba(55, 53, 47, 0.08); color: #37352F; }
.messages-sidebar-section-body { display: flex; flex-direction: column; gap: 1px; }
.messages-channel-row { padding: 0; }
.messages-channel-hash {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
flex-shrink: 0;
font-size: 15px;
font-weight: 600;
color: #9b9a97;
}
.messages-channel-row.is-active .messages-channel-hash,
.messages-channel-row.is-unread-row .messages-channel-hash { color: var(--messages-accent); }
.messages-channels-empty {
display: flex;
align-items: center;
gap: 7px;
width: calc(100% - 12px);
margin: 2px 6px 4px;
padding: 7px 9px;
border: 1px dashed rgba(55, 53, 47, 0.16);
border-radius: 8px;
background: transparent;
color: #787774;
font-size: 12.5px;
transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.messages-channels-empty:hover {
background: color-mix(in srgb, var(--messages-accent) 6%, transparent);
border-color: color-mix(in srgb, var(--messages-accent) 30%, transparent);
color: var(--messages-accent);
}
/* ═══════════════════════════════════════════════════
Messages — modal shell + create-channel modal
═══════════════════════════════════════════════════ */
.messages-modal {
position: fixed;
inset: 0;
z-index: 120;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
background: rgba(15, 15, 15, 0.42);
backdrop-filter: blur(2px);
animation: messagesModalFade 0.14s ease-out;
}
.messages-modal[hidden] { display: none; }
@keyframes messagesModalFade { from { opacity: 0; } to { opacity: 1; } }
.messages-modal-card {
width: min(440px, 100%);
max-height: min(86vh, 660px);
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 14px;
border: 1px solid rgba(55, 53, 47, 0.1);
box-shadow: 0 24px 60px rgba(15, 15, 15, 0.28);
overflow: hidden;
animation: messagesModalPop 0.16s ease-out;
}
@keyframes messagesModalPop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.messages-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid rgba(55, 53, 47, 0.08);
}
.messages-modal-title { margin: 0; font-size: 15px; font-weight: 700; color: #37352F; }
.messages-modal-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 6px;
background: transparent;
color: #787774;
transition: background-color 0.12s ease, color 0.12s ease;
}
.messages-modal-close:hover { background: rgba(55, 53, 47, 0.07); color: #37352F; }
.channel-create-form { display: flex; flex-direction: column; min-height: 0; padding: 14px 16px 16px; gap: 14px; }
.channel-create-field { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.channel-create-label { font-size: 12px; font-weight: 600; color: #787774; }
.channel-create-name-wrap {
display: flex;
align-items: center;
gap: 4px;
padding: 9px 11px;
border: 1px solid rgba(55, 53, 47, 0.14);
border-radius: 9px;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.channel-create-name-wrap:focus-within {
border-color: var(--messages-accent);
box-shadow: 0 0 0 3px var(--messages-composer-focus-ring);
}
.channel-create-hash { font-size: 16px; font-weight: 600; color: #9b9a97; }
.channel-create-name { flex: 1; border: none; outline: none; font-size: 14px; color: #37352F; background: transparent; }
.channel-create-members-head { display: flex; align-items: center; justify-content: space-between; }
.channel-create-count { font-size: 11.5px; font-weight: 600; color: var(--messages-accent); }
.channel-create-search {
width: 100%;
padding: 8px 10px;
border: 1px solid rgba(55, 53, 47, 0.12);
border-radius: 8px;
font-size: 13px;
color: #37352F;
outline: none;
}
.channel-create-search:focus { border-color: var(--messages-accent); }
.channel-create-members-scroll {
flex: 1;
min-height: 120px;
max-height: 280px;
overflow-y: auto;
border: 1px solid rgba(55, 53, 47, 0.08);
border-radius: 9px;
padding: 4px;
}
.channel-create-members-loading,
.channel-create-empty { display: flex; align-items: center; gap: 8px; padding: 16px; color: #9b9a97; font-size: 13px; }
.channel-create-member {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 9px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.12s ease;
}
.channel-create-member:hover { background: rgba(55, 53, 47, 0.05); }
.channel-create-member input { position: absolute; opacity: 0; pointer-events: none; }
.channel-create-member-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 7px;
overflow: hidden;
background: rgba(55, 53, 47, 0.07);
color: #787774;
font-size: 12px;
font-weight: 700;
}
.channel-create-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.channel-create-member-name { flex: 1; min-width: 0; font-size: 13.5px; color: #37352F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-create-member-check {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--messages-accent);
opacity: 0;
transform: scale(0.6);
transition: opacity 0.12s ease, transform 0.12s ease;
}
.channel-create-member input:checked ~ .channel-create-member-check { opacity: 1; transform: scale(1); }
.channel-create-member input:checked ~ .channel-create-member-avatar { background: color-mix(in srgb, var(--messages-accent) 16%, transparent); color: var(--messages-accent); }
.channel-create-footer { display: flex; justify-content: flex-end; gap: 8px; }
.channel-create-cancel {
padding: 8px 14px;
border: 1px solid rgba(55, 53, 47, 0.14);
border-radius: 8px;
background: #ffffff;
color: #37352F;
font-size: 13px;
font-weight: 500;
}
.channel-create-cancel:hover { background: rgba(55, 53, 47, 0.05); }
.channel-create-submit {
padding: 8px 16px;
border: none;
border-radius: 8px;
background: var(--messages-accent);
color: #ffffff;
font-size: 13px;
font-weight: 600;
transition: background-color 0.12s ease, opacity 0.12s ease;
}
.channel-create-submit:hover:not(:disabled) { background: var(--messages-accent-hover); }
.channel-create-submit:disabled { opacity: 0.5; cursor: not-allowed; }
body.messages-modal-open { overflow: hidden; }
/* ═══════════════════════════════════════════════════
Messages — pop-out window chrome
═══════════════════════════════════════════════════ */
.messages-index-shell--popout { display: flex; flex-direction: column; }
.messages-popout-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
padding: 7px 12px;
border-bottom: 1px solid rgba(55, 53, 47, 0.08);
background: #fbfbfa;
-webkit-app-region: drag;
}
.messages-popout-bar-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #37352F; }
.messages-popout-bar-actions { display: inline-flex; gap: 2px; -webkit-app-region: no-drag; }
.messages-popout-bar-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 6px;
background: transparent;
color: #787774;
transition: background-color 0.12s ease, color 0.12s ease;
}
.messages-popout-bar-btn:hover { background: rgba(55, 53, 47, 0.08); color: #37352F; }
.messages-popout-bar-btn.is-pinned { background: color-mix(in srgb, var(--messages-accent) 14%, transparent); color: var(--messages-accent); }
/* Dark variant — the huddle pop-out, which sits on the huddle's dark shell. */
.messages-popout-bar--dark {
border-bottom-color: rgba(255, 255, 255, 0.08);
background: #171512;
}
.messages-popout-bar--dark .messages-popout-bar-title { color: rgba(255, 255, 255, 0.92); }
.messages-popout-bar--dark .messages-popout-bar-btn { color: rgba(255, 255, 255, 0.6); }
.messages-popout-bar--dark .messages-popout-bar-btn:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
.popout-toast {
position: fixed;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
z-index: 200;
padding: 8px 14px;
border-radius: 9px;
background: #1f1f1f;
color: #ffffff;
font-size: 12.5px;
box-shadow: 0 10px 30px rgba(15, 15, 15, 0.3);
transition: opacity 0.3s ease;
}
/* ═══════════════════════════════════════════════════
Messages — huddles (voice / screen-share calls)
═══════════════════════════════════════════════════ */
.messages-huddle-trigger {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
border: 1px solid rgba(55, 53, 47, 0.12);
border-radius: 8px;
background: #ffffff;
color: #37352F;
font-size: 12.5px;
font-weight: 600;
transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.messages-huddle-trigger:hover {
background: rgba(55, 53, 47, 0.04);
border-color: rgba(55, 53, 47, 0.2);
}
.messages-huddle-trigger.is-active {
border-color: color-mix(in srgb, var(--messages-accent) 40%, transparent);
background: color-mix(in srgb, var(--messages-accent) 8%, transparent);
color: var(--messages-accent);
}
.messages-huddle-trigger-count:not(:empty) {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 9999px;
background: var(--messages-accent);
color: #ffffff;
font-size: 10.5px;
font-weight: 700;
}
.messages-huddle-trigger-badge {
position: absolute;
top: -3px;
left: -3px;
}
.huddle-live-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 9999px;
background: #2EA86B;
box-shadow: 0 0 0 0 rgba(46, 168, 107, 0.5);
animation: huddlePulse 1.8s ease-out infinite;
}
@keyframes huddlePulse {
0% { box-shadow: 0 0 0 0 rgba(46, 168, 107, 0.5); }
70% { box-shadow: 0 0 0 6px rgba(46, 168, 107, 0); }
100% { box-shadow: 0 0 0 0 rgba(46, 168, 107, 0); }
}
/* Expanded panel — bottom-right floating card */
.huddle-panel {
position: fixed;
z-index: 130;
right: 18px;
bottom: 18px;
width: min(340px, calc(100vw - 24px));
display: flex;
flex-direction: column;
border-radius: 16px;
background: #1f1d1b;
color: #ffffff;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
overflow: hidden;
animation: huddlePop 0.18s ease-out;
}
@keyframes huddlePop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
.huddle-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.huddle-panel-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; min-width: 0; }
.huddle-panel-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.huddle-iconbtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 7px;
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
.huddle-iconbtn:hover { background: rgba(255, 255, 255, 0.16); }
.huddle-iconbtn svg { width: 16px; height: 16px; }
.huddle-screen {
position: relative;
background: #000000;
aspect-ratio: 16 / 9;
}
.huddle-screen-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.huddle-screen-label {
position: absolute;
left: 8px;
bottom: 8px;
padding: 3px 8px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.55);
font-size: 11px;
font-weight: 600;
}
.huddle-tiles {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 16px 14px;
}
.huddle-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; }
.huddle-tile-avatar {
position: relative;
width: 52px;
height: 52px;
border-radius: 16px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
font-size: 18px;
font-weight: 700;
color: #ffffff;
}
.huddle-tile.is-self .huddle-tile-avatar { box-shadow: 0 0 0 2px #2EA86B; }
.huddle-tile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.huddle-tile-mute {
position: absolute;
right: -2px;
bottom: -2px;
width: 18px;
height: 18px;
border-radius: 9999px;
background: #e0533d;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #1f1d1b;
}
.huddle-tile-mute svg { width: 10px; height: 10px; color: #fff; }
.huddle-tile-name { font-size: 11px; font-weight: 500; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.huddle-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 14px 8px;
}
.huddle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
transition: background-color 0.12s ease, transform 0.1s ease;
}
.huddle-btn:hover { background: rgba(255, 255, 255, 0.2); }
.huddle-btn:active { transform: scale(0.94); }
.huddle-btn svg { width: 20px; height: 20px; }
.huddle-btn.is-off { background: #e0533d; }
.huddle-btn.is-on { background: var(--messages-accent); }
.huddle-btn--leave { background: #e0533d; }
.huddle-btn--leave:hover { background: #c8442f; }
.huddle-count { margin: 0; padding: 0 0 12px; text-align: center; font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }
/* Minimized — persistent floating footer toolbar */
.huddle-bar {
position: fixed;
z-index: 130;
right: 18px;
bottom: 18px;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px 8px 14px;
border-radius: 9999px;
background: #1f1d1b;
color: #ffffff;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
animation: huddlePop 0.16s ease-out;
}
.huddle-bar-info {
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
background: transparent;
color: #ffffff;
font-size: 12.5px;
font-weight: 600;
}
.huddle-bar-text { white-space: nowrap; }
.huddle-bar-controls { display: inline-flex; align-items: center; gap: 6px; }
.huddle-bar-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: none;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
}
.huddle-bar-btn:hover { background: rgba(255, 255, 255, 0.2); }
.huddle-bar-btn svg { width: 16px; height: 16px; }
.huddle-bar-btn.is-off { background: #e0533d; }
.huddle-bar-btn.is-on { background: var(--messages-accent); }
.huddle-bar-btn--leave { background: #e0533d; }
/* Placeholder bar left in the originating tab while the call is popped out */
.huddle-bar--popped { background: #2b2724; }
.huddle-bar-back {
flex-shrink: 0;
padding: 7px 13px;
border: none;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.14);
color: #ffffff;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.huddle-bar-back:hover { background: rgba(255, 255, 255, 0.24); }
/* ═══════════════════════════════════════════════════
Huddle — pop-out window
═══════════════════════════════════════════════════ */
/* Fixed to the viewport so the huddle fills its window whatever padding the
app layout would otherwise impose. */
.huddle-popout-shell {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
flex-direction: column;
background: #1f1d1b;
color: #ffffff;
overflow: hidden;
}
.huddle-popout-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* The panel docks to the window instead of floating in a corner. */
.huddle-panel--docked {
position: static;
flex: 1;
width: 100%;
min-height: 0;
border-radius: 0;
box-shadow: none;
animation: none;
}
.huddle-panel--docked .huddle-tiles { flex: 1; align-content: flex-start; overflow-y: auto; }
.huddle-panel--docked .huddle-screen { flex-shrink: 0; }
.huddle-panel-actions { display: inline-flex; align-items: center; gap: 4px; }
.huddle-popout-idle {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 24px;
text-align: center;
}
.huddle-popout-idle-title { margin: 0; font-size: 14px; font-weight: 700; }
.huddle-popout-idle-meta { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.huddle-popout-idle-btn {
margin-top: 10px;
padding: 8px 16px;
border: none;
border-radius: 9px;
background: rgba(255, 255, 255, 0.14);
color: #ffffff;
font-size: 12.5px;
font-weight: 700;
}
.huddle-popout-idle-btn:hover { background: rgba(255, 255, 255, 0.24); }
/* Huddle "ended" message card */
.message-huddle-row { display: flex; justify-content: center; }
.message-huddle-card {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border-radius: 10px;
background: color-mix(in srgb, var(--messages-accent) 7%, transparent);
border: 1px solid color-mix(in srgb, var(--messages-accent) 18%, transparent);
}
.message-huddle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
background: color-mix(in srgb, var(--messages-accent) 14%, transparent);
color: var(--messages-accent);
flex-shrink: 0;
}
.message-huddle-text { display: flex; flex-direction: column; line-height: 1.25; }
.message-huddle-title { font-size: 13px; font-weight: 600; color: #37352F; }
.message-huddle-meta { font-size: 11.5px; color: #787774; }
@media (max-width: 767px) {
.huddle-panel { right: 10px; left: 10px; bottom: 10px; width: auto; }
.huddle-bar { right: 10px; left: 10px; bottom: 10px; justify-content: space-between; }
.messages-huddle-trigger-label { display: none; }
}
/* Lazy details-drawer frame — display:contents so the frame adds no box and
the inner body keeps the drawer's existing scroll/layout behaviour. */
turbo-frame.messages-details-frame { display: contents; }
.messages-details-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 40px 0;
}
/* ═══════════════════════════════════════════════════
Huddle invites — global banner + sidebar section
═══════════════════════════════════════════════════ */
.huddle-invite-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
background: #1f1d1b;
color: #ffffff;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
transition: opacity 0.25s ease, transform 0.25s ease;
animation: slideInDown 0.28s ease-out;
}
@keyframes slideInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.huddle-invite-banner-dot { display: inline-flex; }
.huddle-invite-banner-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.huddle-invite-banner-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.huddle-invite-banner-meta { font-size: 11.5px; color: rgba(255, 255, 255, 0.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.huddle-invite-banner-join {
flex-shrink: 0;
padding: 6px 14px;
border: none;
border-radius: 8px;
background: #2EA86B;
color: #ffffff;
font-size: 12.5px;
font-weight: 700;
}
.huddle-invite-banner-join:hover { background: #279c61; }
.huddle-invite-banner-close {
flex-shrink: 0;
width: 24px;
height: 24px;
border: none;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 16px;
line-height: 1;
}
.huddle-invite-banner-close:hover { background: rgba(255, 255, 255, 0.2); }
.messages-huddles-section-title { color: #37352F; cursor: default; gap: 6px; }
.messages-huddle-invite {
display: flex;
align-items: center;
gap: 9px;
margin: 1px 6px;
padding: 7px 9px;
border-radius: 8px;
background: color-mix(in srgb, var(--messages-accent) 7%, transparent);
border: 1px solid color-mix(in srgb, var(--messages-accent) 18%, transparent);
transition: background-color 0.12s ease, border-color 0.12s ease;
}
.messages-huddle-invite:hover {
background: color-mix(in srgb, var(--messages-accent) 12%, transparent);
border-color: color-mix(in srgb, var(--messages-accent) 30%, transparent);
}
.messages-huddle-invite-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 8px;
background: color-mix(in srgb, var(--messages-accent) 16%, transparent);
color: var(--messages-accent);
}
.messages-huddle-invite-icon svg { width: 16px; height: 16px; }
.messages-huddle-invite-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.messages-huddle-invite-title { font-size: 13px; font-weight: 600; color: #37352F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-huddle-invite-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #787774; }
.messages-huddle-invite-join {
flex-shrink: 0;
padding: 4px 11px;
border-radius: 7px;
background: var(--messages-accent);
color: #ffffff;
font-size: 11.5px;
font-weight: 700;
}
/* Mobile conversation parity — header/live-strip/composer are fixed-height
bookends around the scrolling stream (matches desktop structure). */
@media (max-width: 767px) {
.mobile-message-container .messages-conversation-header {
flex-shrink: 0;
position: sticky;
top: 0;
z-index: 11;
background: #ffffff;
/* The .mobile-message-container already adds the safe-area inset, so the
header must NOT add it again — the generic mobile rule's
`padding-top: calc(10px + env(safe-area-inset-top))` was doubling it
and leaving a large white gap above the header on the native app. */
padding-top: 10px;
}
.mobile-message-container .messages-live-strip { flex-shrink: 0; }
.mobile-message-container .message-scroll-container { padding: 4px 0 8px; }
/* The huddle panel/toolbar sit above the composer on small screens. */
.mobile-message-container .messages-conversation-header-actions { gap: 2px; }
}
/* ═══════════════════════════════════════════════════
Native-app messages index (full-screen conversation list)
═══════════════════════════════════════════════════ */
.mobile-messages-index {
--messages-accent: #2383E2;
display: flex;
flex-direction: column;
background: #ffffff;
}
@media (max-width: 1023px) {
.mobile-messages-index {
position: fixed;
inset: 0;
/* Flush to the top + iOS safe-area inset (no web navbar on the native
app) so there's no white gap and the header / create button clear the
status bar and stay tappable. */
top: 0;
height: 100dvh;
max-height: 100dvh;
padding-top: env(safe-area-inset-top, 0px);
}
body:has(.mobile-messages-index) { overflow: hidden; }
}
.mobile-messages-index-header {
position: relative;
z-index: 2;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px 10px;
border-bottom: 1px solid rgba(55, 53, 47, 0.07);
background: #ffffff;
}
.mobile-messages-index-title { margin: 0; font-size: 20px; font-weight: 700; color: #37352F; letter-spacing: -0.02em; }
.mobile-messages-index-compose {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
color: var(--messages-accent);
background: color-mix(in srgb, var(--messages-accent) 10%, transparent);
}
.mobile-messages-index-compose:active { transform: scale(0.94); }
.mobile-messages-index-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.mobile-messages-index-list { display: flex; flex-direction: column; }
/* ── Recent-people widget (mirrors new-message quick picks) ── */
.mobile-messages-widget { padding: 12px 4px 10px; border-bottom: 1px solid rgba(55, 53, 47, 0.06); }
.mobile-messages-widget-label {
margin: 0 0 8px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
text-transform: uppercase; color: #908F8B;
}
.mobile-messages-widget-row {
display: flex; gap: 16px; padding: 0 14px 2px; overflow-x: auto;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.mobile-messages-widget-row::-webkit-scrollbar { display: none; }
.mobile-messages-person { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 60px; flex-shrink: 0; }
.mobile-messages-person-avatar {
width: 52px; height: 52px; border-radius: 9999px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 3px rgba(55, 53, 47, 0.12);
}
.mobile-messages-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mobile-messages-person-fallback {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--messages-accent) 16%, #fff);
color: var(--messages-accent); font-size: 19px; font-weight: 700;
}
.mobile-messages-person:active .mobile-messages-person-avatar { transform: scale(0.95); }
.mobile-messages-person-name {
max-width: 100%; font-size: 11.5px; color: #37352F; text-align: center;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ── Channels + DMs in the sidebar aesthetic ── */
.mobile-messages-sidebar { padding: 8px 8px 4px; }
.mobile-messages-section { margin-top: 4px; }
.mobile-messages-sidebar .messages-sidebar-section-title { padding: 8px 8px 4px; }
.mobile-messages-sidebar .messages-thread-row { padding-top: 3px; padding-bottom: 3px; }
.mobile-messages-dm-empty { padding: 14px 12px 6px; text-align: center; }
.mobile-messages-dm-empty p { margin: 0 0 8px; font-size: 13px; color: #787774; }
.mobile-messages-dm-empty-cta {
display: inline-block; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
color: var(--messages-accent); background: color-mix(in srgb, var(--messages-accent) 10%, transparent);
}
/* Inbox "Messages" tab — recent chats in the messages-index aesthetic. */
.mobile-inbox-messages { padding-top: 2px; }
.mobile-inbox-messages .mobile-messages-sidebar { padding: 4px 12px 2px; }
.mobile-thread-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid rgba(55, 53, 47, 0.05);
color: inherit;
text-decoration: none;
transition: background-color 0.12s ease;
}
.mobile-thread-row:active { background: rgba(55, 53, 47, 0.05); }
.mobile-thread-avatar {
position: relative;
flex-shrink: 0;
width: 46px;
height: 46px;
border-radius: 9999px;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2383E2, #6940CE);
color: #ffffff;
font-size: 16px;
font-weight: 600;
}
.mobile-thread-avatar.is-channel {
background: color-mix(in srgb, var(--messages-accent) 12%, #f1efe9);
color: var(--messages-accent);
font-size: 20px;
font-weight: 700;
}
.mobile-thread-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mobile-thread-unread {
position: absolute;
top: -1px;
right: -1px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 9999px;
background: var(--messages-accent);
color: #ffffff;
font-size: 10px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #ffffff;
}
.mobile-thread-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mobile-thread-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mobile-thread-name { font-size: 15px; font-weight: 500; color: #37352F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-thread-name.is-unread { font-weight: 700; }
.mobile-thread-time { flex-shrink: 0; font-size: 12px; color: #B4B4B0; font-variant-numeric: tabular-nums; }
.mobile-thread-time.is-unread { color: var(--messages-accent); font-weight: 600; }
.mobile-thread-snippet { font-size: 13px; color: #787774; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-thread-snippet.is-unread { color: #37352F; }
.mobile-thread-you { color: #B4B4B0; }
.mobile-thread-chevron { width: 16px; height: 16px; flex-shrink: 0; color: #D3D3D0; }
.mobile-messages-index-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 64px 32px;
gap: 6px;
}
.mobile-messages-index-empty-icon { font-size: 34px; }
.mobile-messages-index-empty h3 { margin: 8px 0 0; font-size: 16px; font-weight: 700; color: #37352F; }
.mobile-messages-index-empty p { margin: 0; font-size: 13px; color: #787774; }
.mobile-messages-index-empty-cta {
margin-top: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
border-radius: 10px;
background: var(--messages-accent);
color: #ffffff;
font-size: 14px;
font-weight: 600;
}
/* ═══════════════════════════════════════════════════
Schedule send — split send button + scheduled strip
═══════════════════════════════════════════════════ */
.messages-send-split {
position: relative;
display: inline-flex;
align-items: stretch;
border-radius: 6px;
overflow: visible;
}
.messages-send-split.is-busy { opacity: 0.65; pointer-events: none; }
/* The Send half loses its right radius so the caret sits flush against it. */
.messages-send-button--split {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.messages-send-caret {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
padding: 0;
border: 0;
border-left: 1px solid rgba(255, 255, 255, 0.28);
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
background: var(--messages-accent);
color: #ffffff;
cursor: pointer;
transition: background-color 0.15s ease;
}
.messages-send-caret:hover { background: var(--messages-accent-hover); }
.messages-send-caret:disabled { cursor: not-allowed; opacity: 0.6; }
.messages-send-caret:focus-visible {
outline: 2px solid color-mix(in srgb, var(--messages-accent) 50%, white);
outline-offset: 2px;
}
/* The composer clips its overflow; the schedule menu opens above it, so the
controller unclips the box while the menu is open (see schedule_send). */
.messages-composer.is-schedule-open {
overflow: visible;
}
.messages-schedule-popover {
position: absolute;
z-index: 70;
right: 0;
bottom: calc(100% + 8px);
width: 268px;
max-width: calc(100vw - 28px);
padding: 10px;
border-radius: 12px;
background: #ffffff;
border: 1px solid rgba(55, 53, 47, 0.1);
box-shadow: 0 12px 32px rgba(15, 15, 15, 0.14);
}
.messages-schedule-popover[hidden] { display: none; }
.messages-schedule-title {
margin: 2px 4px 8px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #9B9A97;
}
.messages-schedule-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 7px 8px;
border: 0;
border-radius: 8px;
background: transparent;
text-align: left;
cursor: pointer;
transition: background-color 0.12s ease;
}
.messages-schedule-option:hover:not(:disabled) { background: rgba(55, 53, 47, 0.05); }
.messages-schedule-option:disabled { opacity: 0.4; cursor: not-allowed; }
.messages-schedule-option-label { font-size: 13px; color: #37352F; }
.messages-schedule-option-time {
font-size: 12px;
color: #787774;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.messages-schedule-divider {
height: 1px;
margin: 6px 4px;
background: rgba(55, 53, 47, 0.08);
}
.messages-schedule-fields {
display: flex;
gap: 8px;
padding: 2px 4px 0;
}
.messages-schedule-field {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 0;
min-width: 0;
}
.messages-schedule-field-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #9B9A97;
}
.messages-schedule-field-input {
width: 100%;
min-width: 0;
padding: 6px 8px;
border: 1px solid rgba(55, 53, 47, 0.14);
border-radius: 8px;
font-size: 13px;
color: #37352F;
background: #ffffff;
}
.messages-schedule-field-input:focus {
outline: none;
border-color: var(--messages-accent);
box-shadow: 0 0 0 3px var(--messages-composer-focus-ring);
}
.messages-schedule-confirm {
width: calc(100% - 8px);
margin: 10px 4px 0;
padding: 8px 12px;
border: 0;
border-radius: 8px;
background: var(--messages-accent);
color: #ffffff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.12s ease;
}
.messages-schedule-confirm:hover { background: var(--messages-accent-hover); }
.messages-schedule-hint {
margin: 8px 4px 0;
font-size: 11px;
line-height: 1.4;
color: #9B9A97;
}
.messages-schedule-hint--recipient { color: #787774; }
.messages-schedule-status {
margin: 8px 4px 0;
font-size: 12px;
line-height: 1.4;
color: #2EA86B;
}
.messages-schedule-status.is-error { color: #D4453B; }
.messages-schedule-status[hidden] { display: none; }
/* The sender's parked messages, sitting directly under the transcript in the
same gutter as a message row so they read as the tail of the conversation.
The container collapses to nothing when there's nothing scheduled. */
.messages-scheduled-container { display: block; }
.messages-scheduled-stack {
padding: 2px 0 6px;
}
.messages-scheduled-row {
position: relative;
padding: 8px 12px;
}
/* iOS draws a scheduled message with a blue outline around the bubble: it's
in the conversation, it's yours, and it hasn't gone out. Same idea here,
drawn around the message body so the row still matches the transcript. */
.messages-scheduled-outline {
margin-top: 2px;
padding: 8px 11px;
border: 1.5px solid var(--messages-accent);
border-radius: 12px;
background: color-mix(in srgb, var(--messages-accent) 4%, #ffffff);
}
.messages-scheduled-row.is-sending .messages-scheduled-outline {
border-style: dashed;
opacity: 0.65;
}
.messages-scheduled-row.is-editing { padding-bottom: 12px; }
.messages-scheduled-empty { color: #9B9A97; font-style: italic; }
.messages-scheduled-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 7px 1px 5px;
border-radius: 999px;
background: color-mix(in srgb, var(--messages-accent) 11%, transparent);
color: var(--messages-accent);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.messages-scheduled-pill svg { width: 12px; height: 12px; }
.messages-scheduled-attachments {
display: inline-flex;
align-items: center;
gap: 4px;
margin: 4px 0 0;
font-size: 11.5px;
color: #9B9A97;
}
.messages-scheduled-actions {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
/* Revealed on hover on the desktop; always visible where there's no hover
(see the pointer query below), because a hidden control on a touch
screen is no control at all. */
opacity: 0;
transition: opacity 0.12s ease;
}
.messages-scheduled-row:hover .messages-scheduled-actions,
.messages-scheduled-row:focus-within .messages-scheduled-actions {
opacity: 1;
}
.messages-scheduled-action {
padding: 3px 9px;
border: 1px solid rgba(55, 53, 47, 0.12);
border-radius: 6px;
background: #ffffff;
font-size: 12px;
font-weight: 500;
color: #37352F;
cursor: pointer;
transition: background-color 0.12s ease, color 0.12s ease;
}
.messages-scheduled-action:hover { background: rgba(55, 53, 47, 0.05); }
.messages-scheduled-action:disabled { opacity: 0.5; cursor: not-allowed; }
.messages-scheduled-action--danger { color: #D4453B; border-color: rgba(212, 69, 59, 0.24); }
.messages-scheduled-action--danger:hover { background: rgba(212, 69, 59, 0.07); }
@media (hover: none) {
.messages-scheduled-actions { opacity: 1; }
}
/* Inline editor */
.messages-scheduled-edit-error {
margin: 0 0 8px;
padding: 6px 9px;
border-radius: 8px;
background: rgba(212, 69, 59, 0.08);
color: #B93A31;
font-size: 12.5px;
line-height: 1.4;
}
/* Date + time side by side under the text. */
.messages-scheduled-edit-when {
display: flex;
gap: 8px;
margin-top: 8px;
}
/* ═══════════════════════════════════════════════════
Profile hovercard (Slack-style avatar preview)
═══════════════════════════════════════════════════ */
/* Avatars become buttons so they're keyboard-reachable — strip the button
chrome so the transcript looks exactly as it did before. */
.messages-avatar-trigger-button {
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
line-height: 0;
border-radius: 8px;
}
.messages-avatar-trigger-button:focus-visible,
.messages-conversation-avatar.is-clickable:focus-visible {
outline: 2px solid color-mix(in srgb, var(--messages-accent) 45%, transparent);
outline-offset: 2px;
}
.messages-conversation-avatar.is-clickable { cursor: pointer; }
.messages-profile-card-layer {
position: fixed;
/* Above the details drawer (40) and the composer's popovers (120), below
the huddle bar (130) — an in-progress call stays reachable. */
z-index: 125;
}
.messages-profile-card {
position: relative;
width: 288px;
max-width: calc(100vw - 24px);
padding: 16px;
border-radius: 14px;
background: #ffffff;
border: 1px solid rgba(55, 53, 47, 0.1);
box-shadow: 0 18px 44px rgba(15, 15, 15, 0.18);
font-family: 'FixelText', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.messages-profile-card-close {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: 0;
border-radius: 6px;
background: transparent;
color: #9B9A97;
cursor: pointer;
}
.messages-profile-card-close:hover { background: rgba(55, 53, 47, 0.06); color: #37352F; }
.messages-profile-card-head { display: flex; align-items: center; gap: 12px; }
.messages-profile-card-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
flex-shrink: 0;
border-radius: 12px;
overflow: hidden;
background: rgba(55, 53, 47, 0.06);
}
.messages-profile-card-photo { width: 100%; height: 100%; object-fit: cover; }
.messages-profile-card-initial { font-size: 20px; font-weight: 700; color: #787774; }
.messages-profile-card-identity { min-width: 0; }
.messages-profile-card-name {
margin: 0;
font-size: 15px;
font-weight: 700;
color: #37352F;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.messages-profile-card-handle {
margin: 1px 0 0;
font-size: 12.5px;
color: #787774;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.messages-profile-card-presence {
display: flex;
align-items: center;
gap: 6px;
margin: 5px 0 0;
font-size: 12px;
color: #787774;
}
.messages-profile-card-status {
margin: 12px 0 0;
padding: 7px 9px;
border-radius: 8px;
background: rgba(55, 53, 47, 0.04);
font-size: 13px;
color: #37352F;
}
.messages-profile-card-bio {
margin: 10px 0 0;
font-size: 12.5px;
line-height: 1.45;
color: #787774;
}
.messages-profile-card-time {
display: flex;
align-items: center;
gap: 6px;
margin: 12px 0 0;
font-size: 12.5px;
color: #37352F;
font-variant-numeric: tabular-nums;
}
.messages-profile-card-time svg { flex-shrink: 0; color: #9B9A97; }
.messages-profile-card-time-zone {
color: #9B9A97;
font-size: 11.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.messages-profile-card-actions {
display: flex;
gap: 6px;
margin-top: 14px;
}
.messages-profile-card-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
flex: 1 1 0;
padding: 7px 10px;
border: 1px solid rgba(55, 53, 47, 0.12);
border-radius: 8px;
background: #ffffff;
font-size: 12.5px;
font-weight: 600;
color: #37352F;
text-align: center;
transition: background-color 0.12s ease;
}
.messages-profile-card-button:hover { background: rgba(55, 53, 47, 0.05); }
.messages-profile-card-button--primary {
background: var(--messages-accent);
border-color: transparent;
color: #ffffff;
}
.messages-profile-card-button--primary:hover { background: var(--messages-accent-hover); }
.messages-profile-card-connect {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(55, 53, 47, 0.08);
}
/* ─── Profile hovercard on phones: a bottom sheet, not a popover ───
A 288px card anchored to a 36px avatar has nowhere to go on a 375px
screen, and a sheet matches the overlays the native app already uses. */
.messages-profile-card-layer.is-sheet {
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.messages-profile-card-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 15, 15, 0.38);
/* Dragging the scrim must dismiss-or-nothing, never scroll the transcript
underneath it. */
touch-action: none;
animation: messages-profile-card-fade 0.16s ease-out;
}
.messages-profile-card-layer.is-sheet .messages-profile-card {
width: 100%;
max-width: 100%;
border-radius: 18px 18px 0 0;
/* Clear the home indicator / gesture bar. */
padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
/* Never taller than the screen; long bios scroll inside the sheet. */
max-height: min(78vh, 560px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Scrolling to the end of the sheet must not hand the gesture to the
conversation behind it. */
overscroll-behavior: contain;
box-shadow: 0 -10px 40px rgba(15, 15, 15, 0.22);
animation: messages-profile-card-rise 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
/* Grab handle, drawn rather than marked up. */
.messages-profile-card-layer.is-sheet .messages-profile-card::before {
content: "";
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 4px;
border-radius: 999px;
background: rgba(55, 53, 47, 0.18);
}
/* Bigger touch targets on the sheet's controls. */
.messages-profile-card-layer.is-sheet .messages-profile-card-close {
width: 34px;
height: 34px;
top: 14px;
right: 12px;
}
.messages-profile-card-layer.is-sheet .messages-profile-card-avatar {
width: 64px;
height: 64px;
}
.messages-profile-card-layer.is-sheet .messages-profile-card-actions {
flex-wrap: wrap;
}
.messages-profile-card-layer.is-sheet .messages-profile-card-button {
min-height: 44px;
font-size: 14px;
}
/* The sheet owns the screen while it's open — stop the transcript behind the
scrim from scrolling under the user's finger on iOS. */
body.messages-profile-card-open {
overflow: hidden;
}
@keyframes messages-profile-card-rise {
from { transform: translateY(14%); opacity: 0.6; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes messages-profile-card-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.messages-profile-card-layer.is-sheet .messages-profile-card,
.messages-profile-card-backdrop {
animation: none;
}
}
/* Error surface for the scheduled-message actions. Lives on so a
turbo-frame reload can't wipe it, and replaces window.alert(), which the
native app's WKWebView may never show. */
.messages-inline-toast {
position: fixed;
left: 50%;
bottom: calc(24px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
/* Above everything else in the messaging UI — an error the user can't see
is the same as no error at all. */
z-index: 140;
max-width: min(420px, calc(100vw - 32px));
padding: 11px 16px;
border-radius: 10px;
background: #37352F;
color: #ffffff;
font-size: 13px;
line-height: 1.4;
text-align: center;
box-shadow: 0 10px 30px rgba(15, 15, 15, 0.26);
animation: messages-inline-toast-in 0.18s ease-out;
}
@keyframes messages-inline-toast-in {
from { opacity: 0; transform: translate(-50%, 8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
.messages-inline-toast { animation: none; }
}
@media (max-width: 767px) {
/* The mobile conversation is a flex column (header / stream / composer);
the parked rows are a flex item between the stream and the composer, so
pin their height instead of letting the stream squeeze them. */
.messages-scheduled-container {
flex: 0 0 auto;
}
.messages-scheduled-stack {
/* Never let a pile of parked messages eat the transcript. */
max-height: 46vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.messages-scheduled-row {
padding: 8px 10px;
}
/* No hover on a phone, so the row's actions are always out — and sized for
a thumb. */
.messages-scheduled-actions {
opacity: 1;
gap: 8px;
margin-top: 8px;
}
.messages-scheduled-action {
flex: 1 1 0;
min-height: 40px;
font-size: 13px;
}
.messages-scheduled-edit-when {
gap: 8px;
}
/* Schedule menu: a full-width panel above the composer rather than a 268px
popover pinned to the caret — same fixed placement the composer's emoji
picker already uses on phones. Capped in height and scrollable so it
still fits with the keyboard up. */
.messages-schedule-popover:not([hidden]) {
position: fixed;
left: 10px;
right: 10px;
bottom: calc(76px + env(safe-area-inset-bottom, 0px));
width: auto;
max-width: none;
max-height: min(56vh, 420px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 120;
}
.messages-schedule-option {
min-height: 44px;
}
.messages-schedule-option-label {
font-size: 14px;
}
.messages-schedule-field-input {
min-height: 44px;
/* < 16px makes iOS Safari zoom the page on focus. */
font-size: 16px;
}
.messages-schedule-confirm {
min-height: 44px;
font-size: 15px;
}
.messages-send-caret {
width: 40px;
}
}
/* ═══════════════════════════════════════════════════
Native app — header chrome sits flush.
Turbo Native already draws a nav bar above the WebView. A conversation
header that closes itself with a hairline then reads as a second bar
directly under the real one, so in the app the header carries no surface
or edge of its own and runs into the conversation behind it.
`.native-app` is stamped on by the layouts only when `mobile_app?`
is true (see MobileAppHelper#native_app_body_class), so none of this
reaches the web.
═══════════════════════════════════════════════════ */
.native-app .messages-conversation-header,
.native-app .mobile-message-container .messages-conversation-header,
.native-app .messages-compose-header {
background: transparent;
border-bottom-color: transparent;
}
/* The messages index header sits at the top of its own full-screen surface;
in the app the nav bar above it already marks that edge. */
.native-app .mobile-messages-index-header {
background: transparent;
border-bottom-color: transparent;
}
/* ═══════════════════════════════════════════════════
Optimistic message rows.
The composer paints your message the moment you send it, before the
server has answered (see message_form_controller#send). A pending row is
the real row's twin, dimmed a little so the difference is legible without
being loud; it steps aside when the saved row arrives over the thread's
stream.
A send that fails keeps its row — with the text still in it — and offers
a retry. Dropping what someone wrote because the network blinked is worse
than any amount of visual noise.
═══════════════════════════════════════════════════ */
.message-row--pending { opacity: 0.62; }
.message-row--pending .message-row-content { color: inherit; }
.message-row-time--pending {
font-style: italic;
color: #B4B4B0;
}
.message-row-pending-attachments {
margin: 6px 0 0;
font-size: 12px;
color: #787774;
}
.message-row--failed { opacity: 1; }
.message-row--failed .message-row-time--pending {
font-style: normal;
color: #B23A3A;
font-weight: 600;
}
.message-row-failed {
display: flex;
align-items: center;
gap: 10px;
margin-top: 6px;
font-size: 12px;
}
.message-row-failed.hidden { display: none; }
.message-row-failed__text { color: #B23A3A; }
.message-row-failed__retry,
.message-row-failed__discard {
border: 0;
background: none;
padding: 0;
font-size: 12px;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.message-row-failed__retry { color: var(--messages-accent, #2383E2); }
.message-row-failed__discard { color: #787774; }
/* A retry that is already running. Dimmed and unclickable rather than removed,
so the press that landed is visible and a second one is impossible — the
silence after a press is what had people tapping Retry over and over. */
.message-row-failed__retry:disabled {
color: #B4B4B0;
cursor: default;
pointer-events: none;
}
/* A row on its way out — dimmed the moment Delete is tapped, restored if the
request fails. */
.message-row--removing {
opacity: 0.35;
pointer-events: none;
transition: opacity 0.12s ease;
}
#dash-nav li {
border-bottom: solid;
margin: auto;
}
#dash-nav li.inactive {
border-bottom: none;
}
#dash-nav {
min-width: 75%;
text-align: center;
margin: auto;
}
@media only screen and (max-width: 790px) {
#dash-nav {
min-width: 100%;
text-align: center;
margin: auto;
display: block;
}
}
.login-with-btn {
transition: background-color 0.3s, box-shadow 0.3s;
padding: 12px 16px 12px 42px;
border: none;
border-radius: 3px;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
color: #757575;
font-size: 14px;
font-weight: 500;
font-family: 'FixelText', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
background-color: white;
background-repeat: no-repeat;
background-position: 12px 11px;
min-width: 48%;
}
.login-with-x-btn {
color: #fff;
background-image: url(https://res.cloudinary.com/designs-9th/image/upload/v1700812960/x_logo_whobu4.webp);
background-color: #000000;
background-repeat: no-repeat;
background-position: 12px 15px;
background-size: 13%;
}
.login-with-linkedin-btn {
color: #fff;
background-image: url(https://res.cloudinary.com/designs-9th/image/upload/v1700849677/LinkedIn_logo_initials_c5usjf.png);
background-color: #0a66c2;
background-repeat: no-repeat;
background-position: 12px 11px 5px;
background-size: 12%;
}
.login-with-zoom-btn {
color: #fff;
background-image: url(https://res.cloudinary.com/designs-9th/image/upload/v1706327388/m0ve/5e8ce318664eae0004085461.png);
background-color: #2d8cff;
background-repeat: no-repeat;
background-position: 12px 11px 5px;
background-size: 12%;
}
.login-with-outlook-btn {
color: #fff;
background-image: url(https://res.cloudinary.com/designs-9th/image/upload/v1713147410/m0ve/Microsoft_Office_Outlook__2013_2019_.svg.png);
background-color: #034fa0;
background-repeat: no-repeat;
background-position: 12px 11px 5px;
background-size: 12%;
}
.login-with-hey-btn {
color: #fff;
background-image: url(https://res.cloudinary.com/designs-9th/image/upload/v1715100169/icons/hey_calendar_logo.jpg), linear-gradient(135deg, rgb(85, 34, 250) 0%, rgb(0, 116, 228) 100%);
background-repeat: no-repeat;
background-position: 12px 11px 5px, center;
background-size: 12%, cover;
}
.login-with-google-icon-btn {
color: #fff;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
background-color: white;
background-repeat: no-repeat;
background-position: 12px 11px 5px;
background-size: 12%;
}
.login-with-instagram-btn {
color: #757575;
background-image: url(https://res.cloudinary.com/designs-9th/image/upload/v1700849681/Instagram_logo_2022.svg_wbiogl.png);
background-color: white;
background-repeat: no-repeat;
background-position: 12px 11px 5px;
background-size: 12%;
}
.login-with-google-btn {
transition: background-color 0.3s, box-shadow 0.3s;
padding: 12px 19px 12px 35px;
border: none;
border-radius: 3px;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.25);
color: #757575;
font-size: 15px;
font-weight: 600;
font-family: 'FixelText', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
background-color: white;
background-repeat: no-repeat;
background-position: 90px 9px;
background-size: 7%;
}
.login-with-apple-btn {
color: #fff;
background-image: url(https://res.cloudinary.com/designs-9th/image/upload/v1714170812/applelogo_ka4x0g.jpg);
background-color: #000000;
background-repeat: no-repeat;
background-position: 12px 15px;
background-size: 13%;
}
.login-with-android-btn {
color: #fff;
background-image: url(https://res.cloudinary.com/designs-9th/image/upload/v1714170903/android_xv0j9v.png);
background-color: white;
background-repeat: no-repeat;
background-position: 12px 11px 5px;
background-size: 12%;
}
.login-with-btn:hover {
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25);
}
.login-with-google-btn:active, .login-with-instagram-btn:active {
background-color: #eeeeee;
}
.login-with-btn:focus {
outline: none;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 3px #c8dafc;
}
/* Manual address entry fallback when Google Places is unavailable */
.places--manual .pac-container,
.places-manual-input + .pac-container {
display: none !important;
}
.places--manual gmp-place-autocomplete,
.places--manual gmp-internal-attribution,
.places--manual [class*="gmp-"] {
display: none !important;
}
.places-manual-input {
background-image: none !important;
}
.places-manual-hint {
margin-top: 0.375rem;
font-size: 12px;
line-height: 1.4;
color: #787774;
}
.dark .places-manual-hint {
color: #9b9a97;
}
.turbolinks-progress-bar, .turbo-progress-bar {
background-color: #d6b72f !important;
}
#recaptcha_error {
color: red;
}
.required:before {
content:" *";
color: red;
}
.field_with_errors input {
border: solid 1px red;
}
.field_with_errors {
margin: 0px !important;
padding: 0px !important;
display: block;
position: relative;
float: left;
width: 100%;
}
body, html {
height: 100vh !important;
}
body {
height: 100vh !important;
overflow-x: hidden;
}
/* Light custimaztions */
.primary-bg {
background-color: #CFB431;
}
.primary-color-ovr {
color: #6c5c1c !important;
}
a.primary-bg:hover, a.primary-bg:focus, button.primary-bg:hover, button.primary-bg:focus {
background-color: #E4DAAA;
color: #000;
}
.text-center a:hover, p a {
text-decoration-line: underline !important;
text-decoration-style: dotted !important;
}
.text-center a:hover, p a:hover {
text-decoration-line: underline !important;
text-decoration-style: solid !important;
}
li a:active, li label:active {
background-color: #E4DAAA !important;
color: #000;
}
select:focus, select:active,
textarea:focus,
textarea:active,
input[type='text']:focus,
input[type='text']:active,
input[type='email']:focus,
input[type='email']:active,
input[type='password']:focus,
input[type='password']:active,
input[type='number']:focus,
input[type='number']:active,
input[type='tel']:focus,
input[type='tel']:active,
input[type='url']:focus,
input[type='url']:active,
input[type='search']:focus,
input[type='search']:active,
input[type='date']:focus,
input[type='date']:active,
input[type='time']:focus,
input[type='time']:active,
input[type='datetime']:focus,
input[type='datetime']:active,
input[type='datetime-local']:focus,
input[type='datetime-local']:active,
input[type='month']:focus,
input[type='month']:active,
input[type='week']:focus,
input[type='week']:active,
input[type='color']:focus,
input[type='color']:active,
input[type='file']:focus,
input[type='file']:active,
input[type='range']:focus,
input[type='range']:active,
input[type='checkbox']:focus,
input[type='checkbox']:active,
input[type='image']:focus,
input[type='image']:active,
input[type='file']:focus,
input[type='file']:active {
outline: none !important;
border-color: rgba(207, 180, 49, 0.55) !important;
box-shadow: 0 0 0 3px rgba(207, 180, 49, 0.22), 0 0 8px rgba(207, 180, 49, 0.28) !important;
transition: box-shadow 150ms ease, border-color 150ms ease;
}
multi-select:focus, multi-select:active, input.dropdown-input, input.dropdown-input:focus, input.dropdown-input:active, input.dropdown-input:focus-within, input.dropdown-input:focus-visible {
outline-color: transparent !important;
border: none;
box-shadow: none;
outline-offset: none;
}
.primary.select:focus, .primary.select:active, .primary.textarea:focus, .primary.textarea:active, .primary.input:focus, .primary.input:active, .primary.input:focus-within, .primary.input:focus-visible {
outline: none !important;
border-color: rgba(207, 180, 49, 0.55) !important;
box-shadow: 0 0 0 3px rgba(207, 180, 49, 0.22), 0 0 8px rgba(207, 180, 49, 0.28) !important;
transition: box-shadow 150ms ease, border-color 150ms ease;
}
.brand-text-color {
color: #CFB431;
}
.primary-color { color: #6c5c1c !important;}
a.primary-color:hover { text-decoration: underline; }
#master-nav-drop { z-index: 999 !important }
.toggle-custom-label {
position: relative;
cursor: pointer;
}
.toggle-custom-label:before {
position: absolute;
top: 0.125rem;
left: 0.125rem;
display: block;
content: "";
width: 1.25rem;
height: 1.25rem;
border-radius: 9999%;
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: 40%;
background-image: url('data:image/svg+xml;charset=UTF-8,');
transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1);
transform: translateX(0);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.toggle-custom-label.toggle-lg:before {
width: 2.25rem;
height: 2.25rem;
}
.toggle-custom-checkbox.toggle-lg:checked + .toggle-custom-label.toggle-lg:before {
transform: translateX(2.5rem);
}
.toggle-custom-checkbox:checked + .toggle-custom-label:before {
transform: translateX(1.5rem);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
.toggle-custom.slim .toggle-custom-label:before {
top: -0.15rem;
left: 0;
}
.toggle-custom.slim .toggle-custom-checkbox:checked + .toggle-custom-label:before {
transform: translateX(1.75rem);
}
.toggle-custom.colour .toggle-custom-label {
background-color: #feb2b2;
}
.toggle-custom.colour .toggle-custom-checkbox:checked + .toggle-custom-label {
background-color: #9ae6b4;
}
.avatar.large.online:before {
top: 0%;
}
.text-primary {
color: #d6b72f !important;
}
.text-brand {
color: #d6b72f !important;
}
.border-color-primary {
border-color: #d6b72f !important;
}
/* Strada — hide elements for registered bridge components */
/*
* Hide elements with "hide-on-native" when strada is registered.
*/
[data-bridge-platform] .hide-on-native {
display: none;
}
/*
* Hide the submit button when the "form" component is registered.
*/
[data-bridge-components~=form] [data-controller~=bridge--form] [type=submit] {
display: none;
}
/*
* Hide when the "nav-button" component is registered.
*/
[data-bridge-components~=nav-button] [data-controller~=bridge--nav-button] {
display: none;
}
/*
* Hide when the "menu" component is registered.
*/
[data-bridge-components~=menu] [data-controller~=bridge--menu] {
display: none;
}
/*
* Hide when the "flash-message" component is registered.
*/
[data-bridge-components~=flash-message] [data-controller~=bridge--flash-message] {
display: none;
}
/**
* tom-select.css (v2.4.3)
* Copyright (c) contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
*/
.ts-control {
border: 1px solid #d0d0d0;
padding: 8px 8px;
width: 100%;
overflow: hidden;
position: relative;
z-index: 1;
box-sizing: border-box;
box-shadow: none;
border-radius: 3px;
display: flex;
flex-wrap: wrap;
}
.ts-wrapper.multi.has-items .ts-control {
padding: calc(8px - 2px - 0) 8px calc(8px - 2px - 3px - 0);
}
.full .ts-control {
background-color: #fff;
}
.disabled .ts-control, .disabled .ts-control * {
cursor: default !important;
}
.focus .ts-control {
box-shadow: none;
}
.ts-control > * {
vertical-align: baseline;
display: inline-block;
}
.ts-wrapper.multi .ts-control > div {
cursor: pointer;
margin: 0 3px 3px 0;
padding: 2px 6px;
background: #f2f2f2;
color: #303030;
border: 0 solid #d0d0d0;
}
.ts-wrapper.multi .ts-control > div.active {
background: #e8e8e8;
color: #303030;
border: 0 solid #cacaca;
}
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
color: rgb(124.5, 124.5, 124.5);
background: white;
border: 0 solid white;
}
.ts-control > input {
flex: 1 1 auto;
min-width: 7rem;
display: inline-block !important;
padding: 0 !important;
min-height: 0 !important;
max-height: none !important;
max-width: 100% !important;
margin: 0 !important;
text-indent: 0 !important;
border: 0 none !important;
background: none !important;
line-height: inherit !important;
-webkit-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
user-select: auto !important;
box-shadow: none !important;
}
.ts-control > input::-ms-clear {
display: none;
}
.ts-control > input:focus {
outline: none !important;
}
.has-items .ts-control > input {
margin: 0 4px !important;
}
.ts-control.rtl {
text-align: right;
}
.ts-control.rtl.single .ts-control:after {
left: 15px;
right: auto;
}
.ts-control.rtl .ts-control > input {
margin: 0 4px 0 -2px !important;
}
.disabled .ts-control {
opacity: 0.5;
background-color: #fafafa;
}
.input-hidden .ts-control > input {
opacity: 0;
position: absolute;
left: -10000px;
}
.ts-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 10;
border: 1px solid #d0d0d0;
background: #fff;
margin: 0.25rem 0 0;
border-top: 0 none;
box-sizing: border-box;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border-radius: 0 0 3px 3px;
}
.ts-dropdown [data-selectable] {
cursor: pointer;
overflow: hidden;
}
.ts-dropdown [data-selectable] .highlight {
background: rgba(125, 168, 208, 0.2);
border-radius: 1px;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
padding: 5px 8px;
}
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
cursor: inherit;
opacity: 0.5;
}
.ts-dropdown [data-selectable].option {
opacity: 1;
cursor: pointer;
}
.ts-dropdown .optgroup:first-child .optgroup-header {
border-top: 0 none;
}
.ts-dropdown .optgroup-header {
color: #303030;
background: #fff;
cursor: default;
}
.ts-dropdown .active {
background-color: #f5fafd;
color: #495c68;
}
.ts-dropdown .active.create {
color: #495c68;
}
.ts-dropdown .create {
color: rgba(48, 48, 48, 0.5);
}
.ts-dropdown .spinner {
display: inline-block;
width: 30px;
height: 30px;
margin: 5px 8px;
}
.ts-dropdown .spinner::after {
content: " ";
display: block;
width: 24px;
height: 24px;
margin: 3px;
border-radius: 50%;
border: 5px solid #d0d0d0;
border-color: #d0d0d0 transparent #d0d0d0 transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.ts-dropdown-content {
overflow: hidden auto;
max-height: 200px;
scroll-behavior: smooth;
}
.ts-wrapper.plugin-drag_drop .ts-dragging {
color: transparent !important;
}
.ts-wrapper.plugin-drag_drop .ts-dragging > * {
visibility: hidden !important;
}
.plugin-checkbox_options:not(.rtl) .option input {
margin-right: 0.5rem;
}
.plugin-checkbox_options.rtl .option input {
margin-left: 0.5rem;
}
/* stylelint-disable function-name-case */
.plugin-clear_button {
--ts-pr-clear-button: 1em;
}
.plugin-clear_button .clear-button {
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: calc(8px - 6px);
margin-right: 0 !important;
background: transparent !important;
transition: opacity 0.5s;
cursor: pointer;
}
.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
right: max(var(--ts-pr-caret), 8px);
}
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
opacity: 1;
}
.ts-wrapper .dropdown-header {
position: relative;
padding: 10px 8px;
border-bottom: 1px solid #d0d0d0;
background: color-mix(#fff, #d0d0d0, 85%);
border-radius: 3px 3px 0 0;
}
.ts-wrapper .dropdown-header-close {
position: absolute;
right: 8px;
top: 50%;
color: #303030;
opacity: 0.4;
margin-top: -12px;
line-height: 20px;
font-size: 20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
color: black;
}
.plugin-dropdown_input.focus.dropdown-active .ts-control {
box-shadow: none;
border: 1px solid #d0d0d0;
}
.plugin-dropdown_input .dropdown-input {
border: 1px solid #d0d0d0;
border-width: 0 0 1px;
display: block;
padding: 8px 8px;
box-shadow: none;
width: 100%;
background: transparent;
}
.plugin-dropdown_input .items-placeholder {
border: 0 none !important;
box-shadow: none !important;
width: 100%;
}
.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
display: none !important;
}
.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
flex: none;
min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
color: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
color: transparent;
}
.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
border-right: 1px solid #f2f2f2;
border-top: 0 none;
flex-grow: 1;
flex-basis: 0;
min-width: 0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup::before {
display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
border-top: 0 none;
}
.ts-wrapper.plugin-remove_button .item {
display: inline-flex;
align-items: center;
}
.ts-wrapper.plugin-remove_button .item .remove {
color: inherit;
text-decoration: none;
vertical-align: middle;
display: inline-block;
padding: 0 6px;
border-radius: 0 2px 2px 0;
box-sizing: border-box;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
background: rgba(0, 0, 0, 0.05);
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
background: none;
}
.ts-wrapper.plugin-remove_button .remove-single {
position: absolute;
right: 0;
top: 0;
font-size: 23px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item {
padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
border-left: 1px solid #d0d0d0;
margin-left: 6px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
border-left-color: #cacaca;
}
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
border-left-color: white;
}
.ts-wrapper.plugin-remove_button.rtl .item {
padding-left: 0 !important;
}
.ts-wrapper.plugin-remove_button.rtl .item .remove {
border-right: 1px solid #d0d0d0;
margin-right: 6px;
}
.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
border-right-color: #cacaca;
}
.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
border-right-color: white;
}
:root {
--ts-pr-clear-button: 0px;
--ts-pr-caret: 0px;
--ts-pr-min: .75rem;
}
.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
cursor: pointer;
}
.ts-control:not(.rtl) {
padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}
.ts-control.rtl {
padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}
.ts-wrapper {
position: relative;
}
.ts-dropdown,
.ts-control,
.ts-control input {
color: #303030;
font-family: inherit;
font-size: 13px;
line-height: 18px;
}
.ts-control,
.ts-wrapper.single.input-active .ts-control {
background: #fff;
cursor: text;
}
.ts-hidden-accessible {
border: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
/*# sourceMappingURL=tom-select.css.map */
trix-editor {
border: 1px solid #bbb;
border-radius: 3px;
margin: 0;
padding: 0.4em 0.6em;
min-height: 5em;
outline: none;
}
trix-toolbar * {
box-sizing: border-box;
}
trix-toolbar .trix-button-row {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
overflow-x: auto;
}
trix-toolbar .trix-button-group {
display: flex;
margin-bottom: 10px;
border: 1px solid #bbb;
border-top-color: #ccc;
border-bottom-color: #888;
border-radius: 3px;
}
trix-toolbar .trix-button-group:not(:first-child) {
margin-left: 1.5vw;
}
@media (max-width: 768px) {
trix-toolbar .trix-button-group:not(:first-child) {
margin-left: 0;
}
}
trix-toolbar .trix-button-group-spacer {
flex-grow: 1;
}
@media (max-width: 768px) {
trix-toolbar .trix-button-group-spacer {
display: none;
}
}
trix-toolbar .trix-button {
position: relative;
float: left;
color: rgba(0, 0, 0, 0.6);
font-size: 0.75em;
font-weight: 600;
white-space: nowrap;
padding: 0 0.5em;
margin: 0;
outline: none;
border: none;
border-bottom: 1px solid #ddd;
border-radius: 0;
background: transparent;
}
trix-toolbar .trix-button:not(:first-child) {
border-left: 1px solid #ccc;
}
trix-toolbar .trix-button.trix-active {
background: #cbeefa;
color: rgb(0, 0, 0);
}
trix-toolbar .trix-button:not(:disabled) {
cursor: pointer;
}
trix-toolbar .trix-button:disabled {
color: rgba(0, 0, 0, 0.125);
}
@media (max-width: 768px) {
trix-toolbar .trix-button {
letter-spacing: -0.01em;
padding: 0 0.3em;
}
}
trix-toolbar .trix-button--icon {
font-size: inherit;
width: 2.6em;
height: 1.6em;
max-width: calc(0.8em + 4vw);
text-indent: -9999px;
}
@media (max-width: 768px) {
trix-toolbar .trix-button--icon {
height: 2em;
max-width: calc(0.8em + 3.5vw);
}
}
trix-toolbar .trix-button--icon::before {
display: inline-block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.6;
content: "";
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
@media (max-width: 768px) {
trix-toolbar .trix-button--icon::before {
right: 6%;
left: 6%;
}
}
trix-toolbar .trix-button--icon.trix-active::before {
opacity: 1;
}
trix-toolbar .trix-button--icon:disabled::before {
opacity: 0.125;
}
trix-toolbar .trix-button--icon-attach::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
top: 8%;
bottom: 4%;
}
trix-toolbar .trix-button--icon-bold::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-italic::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-link::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-strike::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-quote::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-heading-1::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-code::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-bullet-list::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-number-list::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-undo::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-redo::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-increase-nesting-level::before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-dialogs {
position: relative;
}
trix-toolbar .trix-dialog {
position: absolute;
top: 0;
left: 0;
right: 0;
font-size: 0.75em;
padding: 15px 10px;
background: #fff;
box-shadow: 0 0.3em 1em #ccc;
border-top: 2px solid #888;
border-radius: 5px;
z-index: 5;
}
trix-toolbar .trix-input--dialog {
font-size: inherit;
font-weight: normal;
padding: 0.5em 0.8em;
margin: 0 10px 0 0;
border-radius: 3px;
border: 1px solid #bbb;
background-color: #fff;
box-shadow: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
}
trix-toolbar .trix-input--dialog.validate:invalid {
box-shadow: #F00 0px 0px 1.5px 1px;
}
trix-toolbar .trix-button--dialog {
font-size: inherit;
padding: 0.5em;
border-bottom: none;
}
trix-toolbar .trix-dialog--link {
max-width: 600px;
}
trix-toolbar .trix-dialog__link-fields {
display: flex;
align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
flex: 1;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
flex: 0 0 content;
margin: 0;
}
trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
trix-editor [data-trix-mutable] ::-moz-selection, trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection {
background: none;
}
trix-editor [data-trix-mutable] ::selection, trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection {
background: none;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
background: highlight;
}
trix-editor [data-trix-mutable].attachment.attachment--file {
box-shadow: 0 0 0 2px highlight;
border-color: transparent;
}
trix-editor [data-trix-mutable].attachment img {
box-shadow: 0 0 0 2px highlight;
}
trix-editor .attachment {
position: relative;
}
trix-editor .attachment:hover {
cursor: default;
}
trix-editor .attachment--preview .attachment__caption:hover {
cursor: text;
}
trix-editor .attachment__progress {
position: absolute;
z-index: 1;
height: 20px;
top: calc(50% - 10px);
left: 5%;
width: 90%;
opacity: 0.9;
transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value="100"] {
opacity: 0;
}
trix-editor .attachment__caption-editor {
display: inline-block;
width: 100%;
margin: 0;
padding: 0;
font-size: inherit;
font-family: inherit;
line-height: inherit;
color: inherit;
text-align: center;
vertical-align: top;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
}
trix-editor .attachment__toolbar {
position: absolute;
z-index: 1;
top: -0.9em;
left: 0;
width: 100%;
text-align: center;
}
trix-editor .trix-button-group {
display: inline-flex;
}
trix-editor .trix-button {
position: relative;
float: left;
color: #666;
white-space: nowrap;
font-size: 80%;
padding: 0 0.8em;
margin: 0;
outline: none;
border: none;
border-radius: 0;
background: transparent;
}
trix-editor .trix-button:not(:first-child) {
border-left: 1px solid #ccc;
}
trix-editor .trix-button.trix-active {
background: #cbeefa;
}
trix-editor .trix-button:not(:disabled) {
cursor: pointer;
}
trix-editor .trix-button--remove {
text-indent: -9999px;
display: inline-block;
padding: 0;
outline: none;
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
border-radius: 50%;
background-color: #fff;
border: 2px solid highlight;
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button--remove::before {
display: inline-block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.7;
content: "";
background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 90%;
}
trix-editor .trix-button--remove:hover {
border-color: #333;
}
trix-editor .trix-button--remove:hover::before {
opacity: 1;
}
trix-editor .attachment__metadata-container {
position: relative;
}
trix-editor .attachment__metadata {
position: absolute;
left: 50%;
top: 2em;
transform: translate(-50%, 0);
max-width: 90%;
padding: 0.1em 0.6em;
font-size: 0.8em;
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
display: inline-block;
max-width: 100%;
vertical-align: bottom;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
margin-left: 0.2em;
white-space: nowrap;
}
.trix-content {
line-height: 1.5;
overflow-wrap: break-word;
word-break: break-word;
}
.trix-content * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.trix-content h1 {
font-size: 1.2em;
line-height: 1.2;
}
.trix-content blockquote {
border: 0 solid #ccc;
border-left-width: 0.3em;
margin-left: 0.3em;
padding-left: 0.6em;
}
.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
border-width: 0;
border-right-width: 0.3em;
margin-right: 0.3em;
padding-right: 0.6em;
}
.trix-content li {
margin-left: 1em;
}
.trix-content [dir=rtl] li {
margin-right: 1em;
}
.trix-content pre {
display: inline-block;
width: 100%;
vertical-align: top;
font-family: monospace;
font-size: 0.9em;
padding: 0.5em;
white-space: pre;
background-color: #eee;
overflow-x: auto;
}
.trix-content img {
max-width: 100%;
height: auto;
}
.trix-content .attachment {
display: inline-block;
position: relative;
max-width: 100%;
}
.trix-content .attachment a {
color: inherit;
text-decoration: none;
}
.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
color: inherit;
}
.trix-content .attachment__caption {
text-align: center;
}
.trix-content .attachment__caption .attachment__name + .attachment__size::before {
content: " •";
}
.trix-content .attachment--preview {
width: 100%;
text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
color: #666;
font-size: 0.9em;
line-height: 1.2;
}
.trix-content .attachment--file {
color: #333;
line-height: 1;
margin: 0 2px 2px 2px;
padding: 0.4em 1em;
border: 1px solid #bbb;
border-radius: 5px;
}
.trix-content .attachment-gallery {
display: flex;
flex-wrap: wrap;
position: relative;
}
.trix-content .attachment-gallery .attachment {
flex: 1 0 33%;
padding: 0 0.5em;
max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
flex-basis: 50%;
max-width: 50%;
}
/*
* We need to override trix.css’s image gallery styles to accommodate the
* element we wrap around attachments. Otherwise,
* images in galleries will be squished by the max-width: 33%; rule.
*/
trix-editor {
border: 1px solid #bbb;
border-radius: 3px;
margin: 0;
padding: 0.4em 0.6em;
min-height: 5em;
outline: none;
}
trix-toolbar * {
box-sizing: border-box;
}
trix-toolbar .trix-button-row {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
overflow-x: auto;
}
trix-toolbar .trix-button-group {
display: flex;
margin-bottom: 10px;
border: 1px solid #bbb;
border-top-color: #ccc;
border-bottom-color: #888;
border-radius: 3px;
}
trix-toolbar .trix-button-group:not(:first-child) {
margin-left: 1.5vw;
}
@media (max-width: 768px) {
trix-toolbar .trix-button-group:not(:first-child) {
margin-left: 0;
}
}
trix-toolbar .trix-button-group-spacer {
flex-grow: 1;
}
@media (max-width: 768px) {
trix-toolbar .trix-button-group-spacer {
display: none;
}
}
trix-toolbar .trix-button {
position: relative;
float: left;
color: rgba(0, 0, 0, 0.6);
font-size: 0.75em;
font-weight: 600;
white-space: nowrap;
padding: 0 0.5em;
margin: 0;
outline: none;
border: none;
border-bottom: 1px solid #ddd;
border-radius: 0;
background: transparent;
}
trix-toolbar .trix-button:not(:first-child) {
border-left: 1px solid #ccc;
}
trix-toolbar .trix-button.trix-active {
background: #cbeefa;
color: black;
}
trix-toolbar .trix-button:not(:disabled) {
cursor: pointer;
}
trix-toolbar .trix-button:disabled {
color: rgba(0, 0, 0, 0.125);
}
@media (max-width: 768px) {
trix-toolbar .trix-button {
letter-spacing: -0.01em;
padding: 0 0.3em;
}
}
trix-toolbar .trix-button--icon {
font-size: inherit;
width: 2.6em;
height: 1.6em;
max-width: calc(0.8em + 4vw);
text-indent: -9999px;
}
@media (max-width: 768px) {
trix-toolbar .trix-button--icon {
height: 2em;
max-width: calc(0.8em + 3.5vw);
}
}
trix-toolbar .trix-button--icon::before {
display: inline-block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.6;
content: "";
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
@media (max-width: 768px) {
trix-toolbar .trix-button--icon::before {
right: 6%;
left: 6%;
}
}
trix-toolbar .trix-button--icon.trix-active::before {
opacity: 1;
}
trix-toolbar .trix-button--icon:disabled::before {
opacity: 0.125;
}
trix-toolbar .trix-dialogs {
position: relative;
}
trix-toolbar .trix-dialog {
position: absolute;
top: 0;
left: 0;
right: 0;
font-size: 0.75em;
padding: 15px 10px;
background: #fff;
box-shadow: 0 0.3em 1em #ccc;
border-top: 2px solid #888;
border-radius: 5px;
z-index: 5;
}
trix-toolbar .trix-input--dialog {
font-size: inherit;
font-weight: normal;
padding: 0.5em 0.8em;
margin: 0 10px 0 0;
border-radius: 3px;
border: 1px solid #bbb;
background-color: #fff;
box-shadow: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
}
trix-toolbar .trix-input--dialog.validate:invalid {
box-shadow: #F00 0px 0px 1.5px 1px;
}
trix-toolbar .trix-button--dialog {
font-size: inherit;
padding: 0.5em;
border-bottom: none;
}
trix-toolbar .trix-dialog--link {
max-width: 600px;
}
trix-toolbar .trix-dialog__link-fields {
display: flex;
align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
flex: 1;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
flex: 0 0 content;
margin: 0;
}
trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection,
trix-editor [data-trix-mutable] ::-moz-selection {
background: none;
}
trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection,
trix-editor [data-trix-mutable] ::selection {
background: none;
}
trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
background: highlight;
}
trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
background: highlight;
}
trix-editor [data-trix-mutable].attachment.attachment--file {
box-shadow: 0 0 0 2px highlight;
border-color: transparent;
}
trix-editor [data-trix-mutable].attachment img {
box-shadow: 0 0 0 2px highlight;
}
trix-editor .attachment {
position: relative;
}
trix-editor .attachment:hover {
cursor: default;
}
trix-editor .attachment--preview .attachment__caption:hover {
cursor: text;
}
trix-editor .attachment__progress {
position: absolute;
z-index: 1;
height: 20px;
top: calc(50% - 10px);
left: 5%;
width: 90%;
opacity: 0.9;
transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value="100"] {
opacity: 0;
}
trix-editor .attachment__caption-editor {
display: inline-block;
width: 100%;
margin: 0;
padding: 0;
font-size: inherit;
font-family: inherit;
line-height: inherit;
color: inherit;
text-align: center;
vertical-align: top;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
}
trix-editor .attachment__toolbar {
position: absolute;
z-index: 1;
top: -0.9em;
left: 0;
width: 100%;
text-align: center;
}
trix-editor .trix-button-group {
display: inline-flex;
}
trix-editor .trix-button {
position: relative;
float: left;
color: #666;
white-space: nowrap;
font-size: 80%;
padding: 0 0.8em;
margin: 0;
outline: none;
border: none;
border-radius: 0;
background: transparent;
}
trix-editor .trix-button:not(:first-child) {
border-left: 1px solid #ccc;
}
trix-editor .trix-button.trix-active {
background: #cbeefa;
}
trix-editor .trix-button:not(:disabled) {
cursor: pointer;
}
trix-editor .trix-button--remove {
text-indent: -9999px;
display: inline-block;
padding: 0;
outline: none;
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
border-radius: 50%;
background-color: #fff;
border: 2px solid highlight;
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button--remove::before {
display: inline-block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.7;
content: "";
background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 90%;
}
trix-editor .trix-button--remove:hover {
border-color: #333;
}
trix-editor .trix-button--remove:hover::before {
opacity: 1;
}
trix-editor .attachment__metadata-container {
position: relative;
}
trix-editor .attachment__metadata {
position: absolute;
left: 50%;
top: 2em;
transform: translate(-50%, 0);
max-width: 90%;
padding: 0.1em 0.6em;
font-size: 0.8em;
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
display: inline-block;
max-width: 100%;
vertical-align: bottom;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
margin-left: 0.2em;
white-space: nowrap;
}
.trix-content {
line-height: 1.5;
overflow-wrap: break-word;
word-break: break-word;
}
.trix-content * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.trix-content blockquote {
border: 0 solid #ccc;
border-left-width: 0.3em;
margin-left: 0.3em;
padding-left: 0.6em;
}
.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
border-width: 0;
border-right-width: 0.3em;
margin-right: 0.3em;
padding-right: 0.6em;
}
.trix-content li {
margin-left: 1em;
}
.trix-content [dir=rtl] li {
margin-right: 1em;
}
.trix-content pre {
display: inline-block;
width: 100%;
vertical-align: top;
font-family: monospace;
font-size: 0.9em;
padding: 0.5em;
white-space: pre;
background-color: #eee;
overflow-x: auto;
}
.trix-content img {
max-width: 100%;
height: auto;
}
.trix-content .attachment {
display: inline-block;
position: relative;
max-width: 100%;
}
.trix-content .attachment a {
color: inherit;
text-decoration: none;
}
.trix-content .attachment a:hover,
.trix-content .attachment a:visited:hover {
color: inherit;
}
.trix-content .attachment__caption {
text-align: center;
}
.trix-content .attachment__caption .attachment__name+.attachment__size::before {
content: ' \2022 ';
}
.trix-content .attachment--preview {
width: 100%;
text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
color: #666;
font-size: 0.9em;
line-height: 1.2;
}
.trix-content .attachment--file {
color: #333;
line-height: 1;
margin: 0 2px 2px 2px;
padding: 0.4em 1em;
border: 1px solid #bbb;
border-radius: 5px;
}
.trix-content .attachment-gallery {
display: flex;
flex-wrap: wrap;
position: relative;
}
.trix-content .attachment-gallery .attachment {
flex: 1 0 33%;
padding: 0 0.5em;
max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 .attachment {
flex-basis: 50%;
max-width: 50%;
}
.trix-content .attachment-gallery>action-text-attachment,
.trix-content .attachment-gallery>.attachment {
flex: 1 0 33%;
padding: 0 0.5em;
max-width: 33%;
}
trix-editor {
width: 100%;
min-width: 100%;
}
.trix-content .attachment-gallery.attachment-gallery--2>action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2>.attachment,
.trix-content .attachment-gallery.attachment-gallery--4>action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4>.attachment {
flex-basis: 50%;
max-width: 50%;
}
.trix-content action-text-attachment .attachment {
padding: 0 !important;
max-width: 100% !important;
}
.trix-content {
line-height: 1.5;
overflow-wrap: break-word;
word-break: break-word;
}
.trix-content h1, .trix-editor h1 {
font-size: 1.9em;
padding-bottom: 10px;
line-height: 1.2;
font-weight: 500;
}
.trix-content a, .trix-editor a {
color: blue;
font-weight: 300;
font-size: calc(0.50em + 0.5vw);
}
.trix-content blockquote {
border: 0 solid #ccc;
border-left-width: 0.3em;
margin-left: 0.3em;
padding-left: 0.6em;
}
.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
border-width: 0;
border-right-width: 0.3em;
margin-right: 0.3em;
padding-right: 0.6em;
}
.trix-content li {
margin-left: 1em;
}
.trix-content ul,
.trix-content ol {
margin-left: 1em;
padding: 10px;
}
.trix-content [dir=rtl] ul,
.trix-content [dir=rtl] ol {
margin-left: 1em;
padding: 10px;
}
.trix-content [dir=rtl] li {
margin-right: 1em;
}
.trix-content pre {
display: inline-block;
width: 100%;
vertical-align: top;
font-family: monospace;
font-size: 0.9em;
padding: 0.5em;
white-space: pre;
background-color: rgb(30 41 59);
overflow-x: auto;
}
.trix-content img {
max-width: 100%;
height: auto;
}
.trix-content .attachment {
display: inline-block;
position: relative;
max-width: 100%;
}
.trix-content .attachment a {
color: inherit;
text-decoration: none;
}
.trix-content .attachment a:hover,
.trix-content .attachment a:visited:hover {
color: inherit;
}
.trix-content .attachment__caption {
text-align: center;
}
.trix-content .attachment__caption .attachment__name+.attachment__size::before {
content: ' \2022 ';
}
.trix-content .attachment--preview {
width: 100%;
text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
color: #666;
font-size: 0.9em;
line-height: 1.2;
}
.trix-content .attachment--file {
color: #333;
line-height: 1;
margin: 0 2px 2px 2px;
padding: 0.4em 1em;
border: 1px solid #bbb;
border-radius: 5px;
}
.trix-content .attachment-gallery {
display: flex;
flex-wrap: wrap;
position: relative;
}
.trix-content .attachment-gallery .attachment {
flex: 1 0 33%;
padding: 0 0.5em;
max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 .attachment {
flex-basis: 50%;
max-width: 50%;
}
.social-share-button .ssb-icon {
background-position: center center;
background-repeat: no-repeat;
background-size: 18px 18px;
display: inline-block;
height: 18px;
width: 18px;
}
.social-share-button .ssb-twitter {
background-image: url(/assets/social-share-button/twitter-5c7eebf52f8f6ee09fb179dce95ee709eaedc0de40514a4b30a53d874926cd51.svg);
}
.social-share-button .ssb-facebook {
background-image: url(/assets/social-share-button/facebook-ff026d808da378c18d2de4d2df1d29f868d945d137bdfca27e861cfe9b16ab54.svg);
}
.social-share-button .ssb-google_bookmark {
background-image: url(/assets/social-share-button/google_bookmark-131ca38ee28939ec1c29061e57aca9d453b0edc3237fc484cff9d0cf47ef3eff.svg);
}
.social-share-button .ssb-weibo {
background-image: url(/assets/social-share-button/weibo-945f45de7fa460680be34db39c44b408dd17338a10a1a666d504bffd7a1d292e.svg);
}
.social-share-button .ssb-qq {
background-image: url(/assets/social-share-button/qq-909e08911488246bf95c7e721cfced9d1781a2bb3f2186fbd96b233c46af51b9.svg);
}
.social-share-button .ssb-delicious {
background-image: url(/assets/social-share-button/delicious-3b30084f180909b7476b2195173dc5f79cbad9ae6888188c2109ebc41c5c64c9.svg);
}
.social-share-button .ssb-linkedin {
background-image: url(/assets/social-share-button/linkedin-9659650958cc7581a1790261fe0e73ba6928ec5d0d78eb31247f8b0c4972e589.svg);
}
.social-share-button .ssb-tumblr {
background-image: url(/assets/social-share-button/tumblr-0b7b9f05f5a9e3799d2733b7adca1d508a7b1c05d38492b71f76eb4fa4ffc355.svg);
}
.social-share-button .ssb-pinterest {
background-image: url(/assets/social-share-button/pinterest-eeb4908f0f584a70134cd084d1e6d1e8863cff21c004b2e1f40c587314a19b15.svg);
}
.social-share-button .ssb-douban {
background-image: url(/assets/social-share-button/douban-71fc9f56cc9295336971ca1f403f6eb2ba59de9d730a952930de0f786646cfbf.svg);
}
.social-share-button .ssb-wechat {
background-image: url(/assets/social-share-button/wechat-d3be0c57971f293aae057b7a20d9a0a19c1aa016df5c64532b91413622470372.svg);
}
.social-share-button .ssb-vkontakte {
background-image: url(/assets/social-share-button/vkontakte-7edf9d4e1f7c82f41871c85430c02ab07fb7e1c9f70e81e5013345d392c3ca90.svg);
}
.social-share-button .ssb-odnoklassniki {
background-image: url(/assets/social-share-button/odnoklassniki-640d05d31ec88b468ef27fc626d4e7f384b80607954b990c1a00bdfc4e03627b.svg);
}
.social-share-button .ssb-xing {
background-image: url(/assets/social-share-button/xing-d413735746bb5fca5c34678531fd9ea565e8ce10842f2d8aee443ca08b66c58a.svg);
}
.social-share-button .ssb-email {
background-image: url(/assets/social-share-button/email-c4f19b6432a6e9a388531031254bf43d90cf853b33d0fb72e5ac239bcbbbe86b.svg);
}
.social-share-button .ssb-reddit {
background-image: url(/assets/social-share-button/reddit-70f4ae56b71a9490a100a08cfd67a815affe9ee665bb3615e1dd1f387b865748.svg);
}
.social-share-button .ssb-hacker_news {
background-image: url(/assets/social-share-button/hacker_news-40341ca62f7b73e25dc9bae06542da6555c7e3db1e43ac3aa2ee3c206927ee26.svg);
}
.social-share-button .ssb-telegram {
background-image: url(/assets/social-share-button/telegram-23046845a6fb13f7754c8eea5c362f858262ef1b72ef2e15a6becaec9aed6ab6.svg);
}
.social-share-button .ssb-whatsapp_app,
.social-share-button .ssb-whatsapp_web {
background-image: url(/assets/social-share-button/whatsapp-ece233927e522cb01d25296c4559edd4d38548722b955a450a6ddfb4f3084f62.svg);
}
.ss-wechat-dialog {
width: 300px;
position: fixed;
background: #fff;
padding: 15px;
border-radius: 3px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
z-index: 11001;
font-size: 14px;
line-height: 1.2em;
}
.ss-wechat-dialog .wechat-popup-header {
font-weight: bold;
}
.ss-wechat-dialog .wechat-dialog-qr {
text-align: center;
margin: 25px 0;
}
.ss-wechat-dialog .wechat-popup-close {
width: 16px;
height: 16px;
position: absolute;
right: 10px;
top: 10px;
color: #999;
text-decoration: none;
font-size: 16px;
}
.ss-wechat-dialog .wechat-popup-footer {
text-align: left;
line-height: 22px;
color: #666;
}
.richer-text table {
border-collapse: collapse;
margin: 0;
overflow: hidden;
table-layout: fixed;
width: 100%;
}
richer-text-editor {
max-width: 100% !important;
}
richer-text-editor .text-editor-wrapper > div {
max-width: 100% !important;
}
.richer-text table td,
.richer-text table th {
border: 2px solid #ced4da;
box-sizing: border-box;
min-width: 1em;
padding: 3px 5px;
position: relative;
vertical-align: top;
}
.richer-text table td>*,
.richer-text table th>* {
margin-top: 0;
margin-bottom: 0;
}
.richer-text table th {
background-color: #f1f3f5;
font-weight: bold;
text-align: left;
}
.richer-text p {
margin: 0;
}
.richer-text img {
width: auto;
}
.richer-text blockquote {
border-left: 2px solid #ced4da;
margin: 1rem 0.5rem;
padding: 0 0 0 10px;
}
/* Embedded players (YouTube, Vimeo, Loom, Spotify) written by the document
editor. The width/height attributes stay as a fallback; aspect-ratio keeps
the frame in shape at any column width. */
.richer-text iframe {
max-width: 100%;
border: 0;
border-radius: 0.5rem;
margin: 1rem 0;
display: block;
}
.richer-text iframe.rich-embed-video {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
.richer-text iframe.rich-embed-audio {
width: 100%;
height: 152px;
}
/* app/assets/stylesheets/mentions.css */
/* Smooth transitions for dropdown */
[data-mention-target="dropdown"] {
transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Custom scrollbar for dropdown */
[data-mention-target="dropdown"]::-webkit-scrollbar {
width: 6px;
}
[data-mention-target="dropdown"]::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
[data-mention-target="dropdown"]::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
[data-mention-target="dropdown"]::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Highlight mentioned users in displayed content */
.mention {
@apply text-blue-600 font-medium hover:text-blue-800 hover:underline cursor-pointer;
}
/* Mobile responsive adjustments */
@media (max-width: 640px) {
[data-mention-target="dropdown"] {
max-width: calc(100vw - 2rem) !important;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
}
@keyframes fade-out {
to {
opacity: 0;
}
}
@keyframes slide-from-right {
from {
transform: translateX(60px);
}
}
@keyframes slide-up {
from {
transform: translateY(130px);
}
}
@keyframes slide-to-left {
to {
transform: translateX(-30px);
}
}
/* app/assets/stylesheets/application.css or your main stylesheet */
.message-slide-in {
animation: messageSlideIn 0.3s ease-out;
}
.message-slide-out {
animation: messageSlideOut 0.3s ease-in forwards;
}
@keyframes messageSlideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes messageSlideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
/* ==========================================================================
Desktop app (Electron shell) chrome
Scoped to body.desktop-app, which the layouts set when the request comes
from the app (DesktopAppHelper#desktop_app?). Nothing here applies on the
web or in the native mobile app.
========================================================================== */
body.desktop-app {
--desktop-titlebar-height: 38px;
/* The strip sits over the top of the viewport; page content starts below it. */
padding-top: var(--desktop-titlebar-height);
}
/* The draggable strip under the macOS traffic lights / Windows caption
buttons. Transparent, so it takes the page's own background. */
body.desktop-app .desktop-titlebar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--desktop-titlebar-height);
z-index: 10000;
-webkit-app-region: drag;
-webkit-user-select: none;
user-select: none;
pointer-events: auto;
}
/* Anything the page pins to the top of the viewport has to sit under the
strip rather than behind it: the app nav, sticky headers, toasts. Tailwind's
.top-0 is a single class, so these compound selectors win regardless of
stylesheet order. */
body.desktop-app .sticky.top-0,
body.desktop-app .fixed.top-0 {
top: var(--desktop-titlebar-height);
}
/* Interactive controls never live inside the strip, but if one is ever placed
there it must stay clickable. */
body.desktop-app .desktop-titlebar * {
-webkit-app-region: no-drag;
}
/* Signed-out screens (welcome, sign in, sign up, password reset) fill the
window and centre vertically. */
body.desktop-app .desktop-center {
min-height: calc(100dvh - var(--desktop-titlebar-height));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
body.desktop-app .desktop-center > * {
width: 100%;
}
/* Neutralise the inner full-height wrappers and top margins the auth screens
carry for the web, which would otherwise push them off centre or add a
second screen height of scrolling. */
body.desktop-app .desktop-center .min-h-full,
body.desktop-app .desktop-center .min-h-screen,
body.desktop-app .desktop-center .h-screen {
min-height: 0 !important;
height: auto !important;
}
body.desktop-app .desktop-center .mt-24,
body.desktop-app .desktop-center .sm\:mt-20,
body.desktop-app .desktop-center .mt-6 {
margin-top: 0 !important;
}
body.desktop-app .desktop-center .py-12 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* A page's own chrome behaves like an app, not a document. */
body.desktop-app {
-webkit-tap-highlight-color: transparent;
}
body.desktop-app img,
body.desktop-app a {
-webkit-user-drag: none;
}
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/
/* Global slight fade */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.5s;
}
.back-to-top-container {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 1px; /* MS Edge requires a nominal dimension */
}
.back-to-top__button {
position: fixed;
bottom: 1rem;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
}
.back-to-top-container--intersecting .back-to-top__button {
opacity: 1;
visibility: visible;
}
@max-width 768px {
body, html {
-ms-overflow-style: none !important; /* Internet Explorer 10+ */
scrollbar-width: none !important; /* Firefox */
}
::-webkit-scrollbar {
display: none !important; /* Safari and Chrome */
}
::-webkit-scrollbar {
-webkit-appearance: none !important;
width: 0 !important;
height: 0 !important;
}
}
.display-scroll * {
scrollbar-width: auto !important;
-ms-overflow-style: auto !important;
}
.display-scroll::-webkit-scrollbar {
-webkit-appearance: none;
display: block;
width: 8px;
height: 8px;
}
.display-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.display-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.display-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Embed widget animations */
.animate-fade-in {
animation: fadeIn 0.2s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Embed scrollbar styling */
.task-embed-widget::-webkit-scrollbar {
width: 6px;
}
.task-embed-widget::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.task-embed-widget::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
.task-embed-widget::-webkit-scrollbar-thumb:hover {
background: #a1a1a1;
}
/* Sortable drag and drop styles */
.sortable-dragging {
opacity: 0.95;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: scale(1.02);
z-index: 1000;
position: relative;
}
.sortable-placeholder {
background: #f3f4f6;
border: 2px dashed #d1d5db;
border-radius: 8px;
margin-bottom: 0.75rem;
}
.handle,
.sortable-handle {
cursor: grab;
touch-action: none;
user-select: none;
}
.handle:active,
.sortable-handle:active {
cursor: grabbing;
}
/* Prevent text selection during drag */
[data-sortable-item] {
user-select: none;
}
[data-sortable-item] * {
user-select: text;
}
[data-sortable-item] .handle,
[data-sortable-item] .sortable-handle {
user-select: none;
}
/* ============================================================================
HALO — DESKTOP AESTHETIC LAYER (v1)
============================================================================
Loaded LAST from default.css so it can refine (not replace) the existing
design system. It reuses the colors already established across the app:
• Brand gold ........ #d6b72f / #CFB431 / #b89a23 (dark) / #E4DAAA (light)
• Primary ink ....... #171717 (buttons / strong actions)
• Notion text ....... #37352F (primary copy)
• Notion subtle ..... #787774 (secondary copy)
• Surfaces .......... #ffffff on a #f2f2f2 canvas
• Accent blue ....... #2383E2 / #3B82F6 (interactive highlights)
GOAL (per product pillars): a calmer, lighter, more approachable surface —
soft shadows, generous radius, smooth premium motion, instant feedback —
without touching the global nav bar, the dashboard tab bar, or the primary
sidebar navigation links.
============================================================================ */
:root {
/* Reuse, don't redefine — alias the established palette into a halo-* scale
so component rules read consistently. */
--halo-ink: #171717;
--halo-text: #37352F;
--halo-text-subtle: #787774;
--halo-text-faint: #9B9A97;
--halo-gold: #d6b72f;
--halo-gold-strong: #b89a23;
--halo-gold-soft: #E4DAAA;
--halo-blue: #2383E2;
--halo-surface: #ffffff;
--halo-canvas: #f2f2f2;
--halo-hairline: rgba(55, 53, 47, 0.08);
--halo-hairline-soft: rgba(55, 53, 47, 0.04);
--halo-hover: rgba(55, 53, 47, 0.05);
--halo-active: rgba(55, 53, 47, 0.09);
/* Radius scale — soft, friendly corners. */
--halo-radius-sm: 8px;
--halo-radius: 12px;
--halo-radius-lg: 16px;
--halo-radius-pill: 100px;
/* Calm, layered shadows rather than hard borders. */
--halo-shadow-xs: 0 1px 2px rgba(15, 20, 25, 0.04);
--halo-shadow-sm: 0 1px 3px rgba(15, 20, 25, 0.06), 0 0 0 1px rgba(15, 20, 25, 0.04);
--halo-shadow: 0 4px 16px rgba(15, 20, 25, 0.06), 0 0 0 1px rgba(15, 20, 25, 0.04);
--halo-shadow-lg: 0 12px 32px rgba(15, 20, 25, 0.10), 0 0 0 1px rgba(15, 20, 25, 0.05);
/* Premium, expressive easing (pillars: trust + humanization). */
--halo-ease: cubic-bezier(0.16, 1, 0.3, 1);
--halo-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--halo-dur: 0.22s;
}
/* ============================================================================
1. FLOATING HOME SIDEBAR ACTIONS (greeting + quick-action pills)
============================================================================
A light, floating greeting + quick-action button stack used at the top of
the desktop dashboard home. Renders as a calm card of pill buttons. */
.halo-home {
display: block;
}
.halo-home__greeting {
margin: 4px 0 14px;
}
.halo-home__greeting h2 {
font-size: 26px;
line-height: 1.15;
font-weight: 600 !important;
letter-spacing: -0.02em;
color: var(--halo-text);
margin: 0;
}
.halo-home__greeting p {
margin: 4px 0 0;
font-size: 14px;
color: var(--halo-text-subtle);
}
.halo-home__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 6px;
padding: 0;
list-style: none;
}
.halo-action-btn {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
color: var(--halo-text);
background: var(--halo-surface);
border: none;
border-radius: var(--halo-radius-pill);
box-shadow: var(--halo-shadow-sm);
cursor: pointer;
text-decoration: none;
transition: transform var(--halo-dur) var(--halo-ease),
box-shadow var(--halo-dur) var(--halo-ease),
background-color 0.15s ease;
white-space: nowrap;
}
.halo-action-btn:hover {
transform: translateY(-1px);
box-shadow: var(--halo-shadow);
background: #fff;
text-decoration: none;
}
.halo-action-btn:active {
transform: translateY(0) scale(0.98);
}
/* Accessible, premium focus ring (trust through polish). */
.halo-action-btn:focus-visible {
outline: none;
box-shadow: var(--halo-shadow), 0 0 0 3px rgba(184, 154, 35, 0.35);
}
.halo-action-btn svg,
.halo-action-btn i {
width: 16px;
height: 16px;
font-size: 15px;
color: var(--halo-text-subtle);
flex-shrink: 0;
/* Expressive icon micro-motion — the glyph feels alive on hover. */
transition: transform 0.25s var(--halo-ease), color 0.15s ease;
}
.halo-action-btn:hover svg,
.halo-action-btn:hover i { color: var(--halo-text); transform: scale(1.12) rotate(-4deg); }
.halo-action-btn:active svg,
.halo-action-btn:active i { transform: scale(0.96); }
/* Primary (filled) variant — strong ink action, e.g. "New event". */
.halo-action-btn--primary {
position: relative;
overflow: hidden;
color: #fff;
background: var(--halo-ink);
box-shadow: 0 2px 6px rgba(15, 20, 25, 0.18);
}
/* Premium sheen — a soft light sweeps across the CTA on hover (Revolut-style
polish) to signal a high-value, trustworthy primary action. */
.halo-action-btn--primary::after {
content: '';
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
transform: skewX(-18deg);
transition: none;
pointer-events: none;
}
.halo-action-btn--primary:hover::after {
animation: haloSheen 0.85s var(--halo-ease) forwards;
}
@keyframes haloSheen {
from { left: -120%; }
to { left: 140%; }
}
.halo-action-btn--primary:hover {
background: #262626;
box-shadow: 0 6px 16px rgba(15, 20, 25, 0.22);
}
.halo-action-btn--primary:hover svg,
.halo-action-btn--primary:hover i { transform: scale(1.12) rotate(90deg); }
.halo-action-btn--primary svg,
.halo-action-btn--primary i,
.halo-action-btn--primary:hover svg,
.halo-action-btn--primary:hover i { color: rgba(255, 255, 255, 0.85); }
/* Gold accent variant — celebratory / brand action (e.g. Quick Setup). */
.halo-action-btn--gold {
color: #4a3f10;
background: var(--halo-gold-soft);
box-shadow: inset 0 0 0 1px rgba(184, 154, 35, 0.35);
}
.halo-action-btn--gold:hover { background: #ecdfae; }
.halo-action-btn--gold svg,
.halo-action-btn--gold i { color: var(--halo-gold-strong); }
/* ── Soft variant ─────────────────────────────────────────────────────────
Subtle, low-emphasis CTA — a faint tinted fill, no shadow, no lift. Used
for the sidebar quick-actions ("Start something" / "Quick setup") so they
read as calm, secondary actions rather than loud buttons. */
.halo-action-btn--soft {
color: var(--halo-text);
background: rgba(55, 53, 47, 0.045);
box-shadow: none;
}
.halo-action-btn--soft:hover {
background: rgba(55, 53, 47, 0.08);
box-shadow: none;
transform: none;
}
.halo-action-btn--soft:active { transform: scale(0.98); }
.halo-action-btn--soft .halo-ic { color: var(--halo-text-subtle); background: transparent; }
.halo-action-btn--soft:hover .halo-ic { color: var(--halo-text); }
/* ── "Start something" inline reveal ──────────────────────────────────────
Toggles its create options open directly below the trigger, exactly like
the category accordions. Native — no JS. */
.halo-start__details { width: 100%; }
.halo-start__trigger { width: 100%; list-style: none; cursor: pointer; }
.halo-start__trigger::-webkit-details-marker { display: none; }
.halo-start__caret {
width: 13px; height: 13px;
margin-left: auto;
color: var(--halo-text-subtle);
flex-shrink: 0;
transition: transform 0.25s var(--halo-ease);
}
.halo-start__details[open] > .halo-start__trigger .halo-start__caret { transform: rotate(180deg); }
.halo-start__menu {
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px 0 2px;
}
.halo-start__form { margin: 0; display: block; }
.halo-start__item { width: 100%; }
/* Smooth, staggered reveal when opened (mirrors the category reveal). */
.halo-start__details[open] > .halo-start__menu > .halo-start__item,
.halo-start__details[open] > .halo-start__menu > .halo-start__form {
animation: haloNavReveal 0.3s var(--halo-ease) both;
}
.halo-start__details[open] > .halo-start__menu > *:nth-child(1) { animation-delay: 0.02s; }
.halo-start__details[open] > .halo-start__menu > *:nth-child(2) { animation-delay: 0.05s; }
.halo-start__details[open] > .halo-start__menu > *:nth-child(3) { animation-delay: 0.08s; }
.halo-start__details[open] > .halo-start__menu > *:nth-child(4) { animation-delay: 0.11s; }
[data-sidebar-toggle-collapsed-value="true"] .halo-start__caret { display: none; }
@media (prefers-reduced-motion: reduce) {
.halo-start__caret { transition: none !important; }
.halo-start__details[open] > .halo-start__menu > * { animation: none !important; }
}
/* ── Sidebar variant ──────────────────────────────────────────────────────
Floating greeting + full-width button stack pinned to the top of the
dashboard left sidebar (Basecamp home__sidebar pattern). */
.halo-home--sidebar {
margin: 4px 8px 10px;
padding: 14px;
width: 232px;
max-width: 100%;
background: var(--halo-surface);
border-radius: var(--halo-radius-lg);
box-shadow: var(--halo-shadow);
}
.halo-home--sidebar .halo-home__greeting { margin: 0 0 12px; }
.halo-home--sidebar .halo-home__greeting h2 { font-size: 18px; line-height: 1.2; }
.halo-home--sidebar .halo-home__greeting p { font-size: 12.5px; margin-top: 3px; }
/* Vertical, full-width pills. */
.halo-home__actions--stack {
flex-direction: column;
flex-wrap: nowrap;
gap: 8px;
}
.halo-home__actions--stack > li { width: 100%; }
/* Compact CTAs — "New event" / "Quick setup" sit smaller than nav rows. */
.halo-home__actions--stack .halo-action-btn {
width: 100%;
justify-content: flex-start;
gap: 8px;
padding: 7px 12px;
font-size: 13px;
border-radius: var(--halo-radius);
}
.halo-home__actions--stack .halo-action-btn .halo-ic {
width: 24px;
height: 24px;
}
.halo-home__actions--stack .halo-action-btn .halo-ic-svg {
width: 16px;
height: 16px;
}
/* ── Ghost button variant ─────────────────────────────────────────────────
Used for the categorized nav links so the ENTIRE sidebar (greeting +
quick actions + nav) reads as one Halo section. Lighter than the filled
pills: transparent, no shadow, subtle hover — same shape + motion. */
.halo-action-btn--ghost {
width: 100%;
justify-content: flex-start;
gap: 13px;
padding: 9px 13px;
font-weight: 500;
background: transparent;
box-shadow: none;
border-radius: var(--halo-radius);
}
.halo-action-btn--ghost {
color: var(--halo-text);
font-size: 14px;
font-weight: 500;
}
.halo-action-btn--ghost:hover {
background: var(--halo-hover);
box-shadow: none;
transform: none;
}
/* Icon tile lifts subtly on hover for a tactile, modern feel. */
.halo-action-btn--ghost:hover .halo-ic {
background: rgba(255, 255, 255, 0.9);
box-shadow: var(--halo-shadow-sm);
color: var(--halo-text);
}
.halo-action-btn--ghost:hover .halo-ic-svg { transform: scale(1.06); }
.halo-action-btn--ghost:active { transform: scale(0.985); }
/* Icon slot — a soft rounded tile that carries the SVG glyph + badge. */
.halo-ic {
position: relative;
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
border-radius: 9px;
color: var(--halo-text-subtle);
background: transparent;
transition: background-color 0.15s ease, box-shadow var(--halo-dur) var(--halo-ease), color 0.15s ease;
}
.halo-ic-svg {
width: 18px; height: 18px;
display: block;
transition: transform 0.2s var(--halo-ease);
}
/* Filled CTAs keep their light glyph and no tile chrome. */
.halo-action-btn--primary .halo-ic,
.halo-action-btn--gold .halo-ic { background: transparent; box-shadow: none; }
.halo-action-btn--primary .halo-ic { color: rgba(255, 255, 255, 0.92); }
.halo-action-btn--gold .halo-ic { color: var(--halo-gold-strong); }
.halo-badge {
position: absolute;
top: -4px; right: -4px;
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px;
font-size: 10px; font-weight: 700; line-height: 1;
color: #fff; border-radius: 9999px;
box-shadow: 0 0 0 2px var(--halo-surface);
}
/* Honor the `hidden` utility / JS toggle: .halo-badge's own `display` would
otherwise tie with Tailwind's `.hidden` and win on source order, leaving a
"0" badge visible when there's nothing to show. */
.halo-badge.hidden { display: none; }
/* ── Halo edge "nub" collapse toggle ──────────────────────────────────────
A small round control that pops out of the card's right edge — like a
button budding out of the Halo surface. It overlaps the edge (half on the
card, half off) so it reads as part of the card, not a separate UI chip. */
.halo-home--sidebar { position: relative; }
.halo-rail-toggle {
position: absolute;
top: 18px;
right: -13px;
z-index: 20;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: none;
border-radius: 9999px;
color: var(--halo-text-subtle);
background: var(--halo-surface);
box-shadow: var(--halo-shadow);
cursor: pointer;
transition: transform 0.28s var(--halo-ease),
box-shadow var(--halo-dur) var(--halo-ease),
color 0.15s ease, background-color 0.15s ease;
}
/* The "pop": nub eases outward + scales up on hover, like it's budding out. */
.halo-rail-toggle:hover {
color: var(--halo-text);
background: #fff;
box-shadow: var(--halo-shadow-lg);
transform: translateX(2px) scale(1.12);
}
.halo-rail-toggle:active { transform: translateX(2px) scale(0.94); }
.halo-rail-toggle__chevron {
width: 13px;
height: 13px;
transition: transform 0.32s var(--halo-ease);
}
/* Expanded: chevron points left ("collapse"). */
.halo-rail-toggle__chevron { transform: rotate(0deg); }
/* ── Collapsed rail — stays a FLOATING Halo card of icon pills ─────────────
When collapsed, the section keeps its card chrome (surface + shadow +
radius) and simply narrows to an icon rail. Greeting text + CTAs hide; the
wave becomes the opener and nav links become centered icon pills. */
[data-sidebar-toggle-collapsed-value="true"] .halo-home--sidebar {
width: 64px;
margin: 4px 6px 10px;
padding: 8px;
border-radius: var(--halo-radius-lg);
background: var(--halo-surface);
box-shadow: var(--halo-shadow);
}
/* Nub flips to point right ("expand") and keeps its edge-pop position. */
[data-sidebar-toggle-collapsed-value="true"] .halo-rail-toggle__chevron {
transform: rotate(180deg);
}
[data-sidebar-toggle-collapsed-value="true"] .halo-home__divider {
display: block;
margin: 8px 6px;
}
[data-sidebar-toggle-collapsed-value="true"] .halo-home--sidebar .halo-action-btn {
width: 46px;
height: 46px;
padding: 0;
margin: 0 auto;
gap: 0;
justify-content: center;
border-radius: var(--halo-radius);
box-shadow: none;
transition: transform var(--halo-dur) var(--halo-ease),
background-color 0.15s ease;
}
[data-sidebar-toggle-collapsed-value="true"] .halo-home--sidebar .halo-action-btn:hover {
transform: translateY(-1px);
}
[data-sidebar-toggle-collapsed-value="true"] .halo-ic { width: 24px; height: 24px; }
[data-sidebar-toggle-collapsed-value="true"] .halo-ic-svg { width: 20px; height: 20px; }
[data-sidebar-toggle-collapsed-value="true"] .halo-group { margin-top: 0; }
/* ============================================================================
2. MODERN PAGINATION (Pagy nav — /all-calendars, /all-spaces, /all-events)
============================================================================
Pagy 6 renders