/* Enhanced Chat Design Tokens - Professional UI System */
/* Building on top of existing Telegram-inspired tokens */
:root {
/* === ENHANCED CHAT TOKENS === */
/* Base Spacing System (8px grid) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
/* Enhanced Chat Colors - Light Theme */
--bg-muted: #F2F4F7;
--bg-hover: rgba(10, 20, 30, 0.04);
--bg-drag-over: rgba(42, 165, 228, 0.08);
--bg-drag-overlay: rgba(42, 165, 228, 0.12);
--bg-reply: rgba(42, 165, 228, 0.08);
/* Enhanced Text Colors */
--text-primary: #0B1220;
--text-secondary: #5B6B81;
--text-tertiary: #8A94A6;
--text-muted: #B8C2CC;
--text-inverse: #FFFFFF;
/* Chat Bubble Colors */
--bubble-mine-hover: #D1E9FF;
--bubble-their-hover: #E8EAED;
/* Accent & Brand Enhancement */
--accent-alpha-20: rgba(42, 165, 228, 0.2);
/* Status Colors */
--status-sent: #8A94A6;
--status-delivered: #8A94A6;
--status-read: #2AA5E4;
--status-error: #E74C3C;
--success-color: #27AE60;
--error-color: #E74C3C;
--error-bg: rgba(231, 76, 60, 0.1);
/* Enhanced Borders & Shadows */
--border-subtle: rgba(10, 20, 30, 0.08);
--border-light: rgba(10, 20, 30, 0.12);
--border-contrast: #2AA5E4;
--shadow-elev: 0 4px 18px rgba(0, 0, 0, 0.08);
--shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.12);
/* Chat-specific Layout */
--bubble-padding-x: 12px;
--bubble-padding-y: 8px;
--bubble-spacing-normal: 8px;
--bubble-spacing-grouped: 2px;
--bubble-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
--bubble-border: 1px solid var(--border-subtle);
/* Enhanced Typography */
--font-size-title: 16px;
--font-size-body: 14px;
--font-size-message: 15px;
--font-size-small: 12px;
--font-size-tiny: 11px;
--line-height-message: 1.4;
--font-weight-medium: 500;
--font-weight-semibold: 600;
/* Animation Timing */
--duration-fast: 0.12s;
--duration-normal: 0.2s;
--duration-slow: 0.3s;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
/* Component Specific */
--header-height: 72px;
--composer-min-height: 56px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
/* === BRAND COLORS === */
--wk-color-brand-50: #E8F4FB;
--wk-color-brand-100: #D1E9F7;
--wk-color-brand-200: #A3D3EF;
--wk-color-brand-300: #75BDE7;
--wk-color-brand-400: #47A7DF;
--wk-color-brand-500: #1E96D5;
--wk-color-brand-600: #177CB5;
--wk-color-brand-700: #106295;
--wk-color-brand-800: #0A4875;
--wk-color-brand-900: #032E55;
/* === NEUTRAL GRAYS === */
--wk-color-neutral-50: #F9FAFB;
--wk-color-neutral-100: #F3F4F6;
--wk-color-neutral-200: #E5E7EB;
--wk-color-neutral-300: #D1D5DB;
--wk-color-neutral-400: #9CA3AF;
--wk-color-neutral-500: #6B7280;
--wk-color-neutral-600: #4B5563;
--wk-color-neutral-700: #374151;
--wk-color-neutral-800: #1F2937;
--wk-color-neutral-900: #111827;
/* === SEMANTIC COLORS === */
--wk-color-success: #16A34A;
--wk-color-success-50: #F0FDF4;
--wk-color-success-100: #DCFCE7;
--wk-color-success-500: #16A34A;
--wk-color-success-600: #15803D;
--wk-color-warning: #F59E0B;
--wk-color-danger: #EF4444;
--wk-color-danger-500: #EF4444;
--wk-color-info: #3B82F6;
--wk-color-amber-50: #FFFBEB;
/* === INTERACTION TOKENS === */
--wk-hover-subtle: rgba(0, 0, 0, 0.04);
--wk-hover-muted: rgba(0, 0, 0, 0.08);
--wk-active-subtle: rgba(0, 0, 0, 0.08);
--wk-active-muted: rgba(0, 0, 0, 0.12);
/* === TEXT COLORS === */
--wk-text-primary: #0F172A;
--wk-text-secondary: #1F2937;
--wk-text-muted: #6B7280;
--wk-text-placeholder: #9CA3AF;
--wk-text-disabled: #D1D5DB;
--wk-text-inverse: #FFFFFF;
/* === BORDER COLORS === */
--wk-border-default: #E5E7EB;
--wk-border-muted: #F3F4F6;
--wk-border-subtle: #F3F4F6;
--wk-border-focus: #93C5FD;
--wk-border-error: #FCA5A5;
/* === SPACING SCALE === */
--wk-space-0: 0px;
--wk-space-1: 4px;
--wk-space-2: 8px;
--wk-space-3: 12px;
--wk-space-4: 16px;
--wk-space-5: 20px;
--wk-space-6: 24px;
--wk-space-8: 32px;
--wk-space-10: 40px;
--wk-space-12: 48px;
--wk-space-16: 64px;
/* === RADIUS === */
--wk-radius-sm: 4px;
--wk-radius-md: 8px;
--wk-radius-lg: 12px;
--wk-radius-xl: 16px;
--wk-radius-bubble: 18px;
--wk-radius-full: 50%;
/* === SHADOWS === */
--wk-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--wk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--wk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--wk-shadow-overlay: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* === TYPOGRAPHY === */
--wk-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
--wk-font-size-xs: 12px;
--wk-font-size-sm: 14px;
--wk-font-size-base: 15px;
--wk-font-size-lg: 16px;
--wk-font-size-xl: 18px;
--wk-line-height-tight: 1.25;
--wk-line-height-normal: 1.45;
--wk-line-height-relaxed: 1.6;
/* === MOTION === */
--wk-duration-fast: 160ms;
--wk-duration-normal: 220ms;
--wk-duration-slow: 320ms;
--wk-ease-out: cubic-bezier(0.2, 0, 0.2, 1);
--wk-ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
/* === LAYOUT === */
--wk-sidebar-width: 288px;
--wk-sidebar-collapsed-width: 80px;
--wk-chat-header-height: 60px;
--wk-composer-min-height: 48px;
--wk-info-panel-width: 320px;
--wk-conversation-footer: 80px;
/* === Z-INDEX === */
--wk-z-dropdown: 10;
--wk-z-footer: 40;
--wk-z-modal: 50;
--wk-z-tooltip: 60;
--wk-z-overlay: 100;
/* === ENHANCED CHAT TOKENS === */
/* Background Colors - Chat specific */
--bg-canvas: #F7F9FC;
--bg-elev-1: #FFFFFF;
--bg-elev-2: #FAFBFC;
--bg-chat-header: #FFFFFF;
--bg-chat-composer: #FFFFFF;
/* Message Bubble Colors */
--bubble-mine: #E6F3FF;
--bubble-their: #F2F4F7;
--bubble-system: #F0F0F0;
--bubble-hover-overlay: rgba(0, 0, 0, 0.04);
/* Text Colors - Chat specific */
--text-bubble-mine: #0B1220;
--text-bubble-their: #0B1220;
--text-system: #6B7280;
--text-timestamp: #9CA3AF;
/* Interactive States */
--accent: #2AA5E4;
--accent-hover: #1E7FB8;
--accent-active: #1A6BA3;
/* Message Status Colors */
--status-sent: #9CA3AF;
--status-delivered: #9CA3AF;
--status-read: var(--accent);
--status-error: var(--wk-color-danger-500);
/* Online Status */
--online-active: #16A34A;
--online-away: #F59E0B;
--online-offline: #9CA3AF;
/* Layout Dimensions - Chat specific */
--chat-subheader-height: 44px;
--composer-max-height: 144px;
--bubble-max-width: 68%;
--bubble-radius: 16px;
--bubble-radius-small: 6px;
/* Animation Timing */
--duration-message-send: 160ms;
--duration-bubble-hover: 120ms;
--duration-typing: 1500ms;
--ease-message: cubic-bezier(0.2, 0, 0.2, 1);
/* === EXISTING VARIABLE MAPPING === */
/* Map new tokens to existing variables for compatibility */
--wk-color-theme: var(--wk-color-brand-500);
--wk-color-secondary: var(--wk-surface-secondary);
--wk-color-secondary-2: var(--wk-color-neutral-100);
--wk-color-tertiary: var(--wk-color-neutral-200);
--wk-color-item: var(--wk-surface-primary);
--wk-color-border: var(--wk-border-default);
--wk-color-font-tip: var(--wk-text-muted);
--wk-text-item: var(--wk-text-primary);
--wk-line: 1px solid var(--wk-border-default);
--background-color: var(--wk-surface-secondary);
/* Enhanced surface mappings */
--wk-surface-primary: var(--bg-elev-1);
--wk-surface-secondary: var(--bg-canvas);
--wk-surface-tertiary: var(--bg-elev-2);
--wk-border-light: var(--wk-border-subtle);
--wk-border-dark: var(--wk-border-default);
/* Layout dimensions */
--wk-wdith-conversation-list: var(--wk-sidebar-width);
--wk-wdith-chat-channelsetting: var(--wk-info-panel-width);
--wk-height-chat-search: var(--wk-chat-header-height);
}
/* === DARK MODE OVERRIDES === */
body[theme-mode="dark"] {
/* Enhanced Dark Theme Chat Colors */
--bg-canvas: #0B0E13;
--bg-elev-1: #121722;
--bg-elev-1-dark: #121722;
--bg-elev-2: #1A2230;
--bg-muted: #252B3A;
--bg-canvas-dark: #0F1419;
--bg-hover: rgba(230, 240, 255, 0.04);
--bg-drag-over: rgba(42, 165, 228, 0.12);
/* Dark Text Colors */
--text-primary: #E6EAF2;
--text-secondary: #A8B3C7;
--text-tertiary: #7A8699;
--text-muted: #5A6478;
/* Dark Bubble Colors */
--bubble-mine: #16324F;
--bubble-their: #1A2230;
--bubble-mine-hover: #1E3A57;
--bubble-their-hover: #202938;
/* Dark Borders & Shadows */
--border-subtle: rgba(230, 240, 255, 0.12);
--border-subtle-dark: rgba(230, 240, 255, 0.12);
--border-light: rgba(230, 240, 255, 0.16);
--border-dark: rgba(230, 240, 255, 0.12);
--shadow-elev: 0 4px 18px rgba(0, 0, 0, 0.35);
--shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.45);
/* Dark Error States */
--error-bg: rgba(231, 76, 60, 0.15);
/* Legacy compatibility */
--bg-chat-header: #121722;
--bg-chat-composer: #121722;
}
/* === WUKONGIM COMPATIBILITY MAPPING === */
:root {
/* Map enhanced tokens to existing WK variables for backward compatibility */
--wk-surface-primary: var(--bg-elev-1);
--wk-surface-secondary: var(--bg-elev-2);
--wk-border-light: var(--border-subtle);
--wk-border-dark: var(--border-light);
--wk-space-1: var(--space-1);
--wk-space-2: var(--space-2);
--wk-space-3: var(--space-3);
--wk-space-4: var(--space-4);
--wk-space-5: var(--space-5);
--wk-space-6: var(--space-6);
--wk-duration-normal: var(--duration-normal);
--wk-ease-out: var(--ease-out);
}
/* === ACCESSIBILITY ENHANCEMENTS === */
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
:root {
--border-subtle: #2AA5E4;
--border-light: #2AA5E4;
--text-secondary: #000000;
--bubble-mine: #E6F3FF;
--bubble-their: #FFFFFF;
--border-contrast: #2AA5E4;
}
body[theme-mode="dark"] {
--border-subtle: #42A5F5;
--border-light: #42A5F5;
--text-secondary: #FFFFFF;
--bubble-mine: #1A365D;
--bubble-their: #2D3748;
--border-contrast: #42A5F5;
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0.01ms;
--duration-normal: 0.01ms;
--duration-slow: 0.01ms;
}
}
/* Print Styles */
@media print {
:root {
--bg-canvas: #FFFFFF;
--bg-elev-1: #FFFFFF;
--text-primary: #000000;
--text-secondary: #333333;
--bubble-mine: #F0F0F0;
--bubble-their: #FFFFFF;
--border-subtle: #CCCCCC;
--shadow-elev: none;
--shadow-hover: none;
}
}
/* === ENHANCED CONVERSATION STYLES === */
.wk-conversation-enhanced {
--chat-header-height: 68px;
--composer-min-height: 60px;
--message-spacing: var(--space-4);
--message-bubble-radius: 18px;
--message-padding: var(--space-3) var(--space-4);
--avatar-size: 36px;
--status-indicator-size: 10px;
}
/* Enhanced Header Styles */
.wk-enhanced-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--chat-header-height);
background: var(--wk-bg-elev-1);
border-bottom: 1px solid #F3F4F6;
border-bottom: 1px solid var(--wk-border-subtle);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
z-index: 100;
padding: 0 16px;
padding: 0 var(--space-4);
display: flex;
align-items: center;
gap: 12px;
gap: var(--space-3);
}
.wk-enhanced-header-avatar {
position: relative;
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.wk-enhanced-header-status {
position: absolute;
bottom: 2px;
right: 2px;
width: var(--status-indicator-size);
height: var(--status-indicator-size);
border-radius: 50%;
background: var(--wk-green-500);
border: 2px solid var(--wk-bg-elev-1);
}
.wk-enhanced-header-info {
flex: 1 1;
min-width: 0;
}
.wk-enhanced-header-name {
font-size: 15px;
font-size: var(--wk-font-size-base);
font-weight: 600;
color: #0F172A;
color: var(--wk-text-primary);
margin: 0;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-enhanced-header-subtitle {
font-size: 14px;
font-size: var(--wk-font-size-sm);
color: #1F2937;
color: var(--wk-text-secondary);
margin: 0;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-enhanced-header-actions {
display: flex;
align-items: center;
gap: 8px;
gap: var(--space-2);
flex-shrink: 0;
}
.wk-enhanced-header-action {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: transparent;
color: #1F2937;
color: var(--wk-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 160ms;
transition: all var(--wk-duration-fast);
}
.wk-enhanced-header-action:hover {
background: var(--wk-bg-hover);
color: #0F172A;
color: var(--wk-text-primary);
transform: scale(1.05);
}
/* Enhanced Message Container */
.wk-conversation-enhanced .wk-conversation-content {
padding-top: var(--chat-header-height);
background: linear-gradient(180deg,
var(--wk-bg-canvas) 0%,
rgba(var(--wk-bg-canvas-rgb), 0.95) 100%);
}
.wk-conversation-enhanced .wk-conversation-messages {
padding: 24px 16px;
padding: var(--space-6) var(--space-4);
max-width: 100%;
background: transparent;
}
/* Enhanced Message Bubbles */
.wk-message-item-enhanced {
margin-bottom: var(--message-spacing);
transition: all 160ms;
transition: all var(--wk-duration-fast);
position: relative;
padding: 4px 0;
padding: var(--space-1) 0;
}
.wk-message-item-enhanced:hover {
transform: translateY(-1px);
}
.wk-message-item-enhanced.wk-message-item-last {
margin-bottom: 32px;
margin-bottom: var(--space-8);
}
.wk-message-bubble {
position: relative;
max-width: 70%;
margin: 0 auto;
display: flex;
align-items: flex-end;
gap: 8px;
gap: var(--space-2);
}
.wk-message-bubble.wk-message-mine {
flex-direction: row-reverse;
margin-left: auto;
margin-right: 0;
}
.wk-message-bubble.wk-message-theirs {
flex-direction: row;
margin-left: 0;
margin-right: auto;
}
.wk-message-bubble-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
margin-bottom: 4px;
margin-bottom: var(--space-1);
}
.wk-message-bubble-content {
position: relative;
background: var(--wk-bg-elev-1);
border-radius: var(--message-bubble-radius);
padding: var(--message-padding);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
box-shadow: var(--wk-shadow-sm);
transition: all 160ms;
transition: all var(--wk-duration-fast);
max-width: 100%;
word-wrap: break-word;
}
.wk-message-mine .wk-message-bubble-content {
background: var(--wk-blue-500);
color: var(--wk-white);
border-bottom-right-radius: 6px;
}
.wk-message-theirs .wk-message-bubble-content {
background: var(--wk-bg-elev-2);
color: #0F172A;
color: var(--wk-text-primary);
border-bottom-left-radius: 6px;
}
.wk-message-bubble-content:hover {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
box-shadow: var(--wk-shadow-md);
transform: translateY(-1px);
}
/* Message Actions on Hover */
.wk-message-bubble-actions {
position: absolute;
top: 50%;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
transition: all 160ms;
transition: all var(--wk-duration-fast);
background: var(--wk-bg-elev-1);
border-radius: 20px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--wk-shadow-lg);
padding: 4px;
padding: var(--space-1);
display: flex;
gap: 4px;
gap: var(--space-1);
z-index: 10;
}
.wk-message-mine .wk-message-bubble-actions {
left: -60px;
}
.wk-message-theirs .wk-message-bubble-actions {
right: -60px;
}
.wk-message-item-enhanced:hover .wk-message-bubble-actions {
opacity: 1;
visibility: visible;
}
.wk-message-action-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: transparent;
color: #1F2937;
color: var(--wk-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 160ms;
transition: all var(--wk-duration-fast);
font-size: 14px;
}
.wk-message-action-btn:hover {
background: var(--wk-bg-hover);
color: #0F172A;
color: var(--wk-text-primary);
transform: scale(1.1);
}
/* Message Status & Time */
.wk-message-meta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
gap: var(--space-1);
margin-top: 4px;
margin-top: var(--space-1);
font-size: 12px;
font-size: var(--wk-font-size-xs);
color: var(--wk-text-tertiary);
}
.wk-message-mine .wk-message-meta {
color: rgba(255, 255, 255, 0.7);
}
.wk-message-status {
display: flex;
align-items: center;
gap: 2px;
}
.wk-message-status-icon {
width: 12px;
height: 12px;
opacity: 0.8;
}
/* Enhanced Composer Styles */
.wk-enhanced-composer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--wk-bg-elev-1);
border-top: 1px solid #F3F4F6;
border-top: 1px solid var(--wk-border-subtle);
padding: 16px;
padding: var(--space-4);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
z-index: 99;
}
.wk-enhanced-composer-container {
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-end;
gap: 12px;
gap: var(--space-3);
background: var(--wk-bg-canvas);
border-radius: 24px;
padding: 8px;
padding: var(--space-2);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
box-shadow: var(--wk-shadow-sm);
transition: all 160ms;
transition: all var(--wk-duration-fast);
}
.wk-enhanced-composer-container:focus-within {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
box-shadow: var(--wk-shadow-md);
transform: translateY(-2px);
}
.wk-enhanced-composer-attachments {
display: flex;
gap: 8px;
gap: var(--space-2);
flex-shrink: 0;
}
.wk-enhanced-composer-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: transparent;
color: #1F2937;
color: var(--wk-text-secondary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 160ms;
transition: all var(--wk-duration-fast);
font-size: 18px;
}
.wk-enhanced-composer-btn:hover {
background: var(--wk-bg-hover);
color: var(--wk-blue-500);
transform: scale(1.1);
}
.wk-enhanced-composer-input-wrapper {
flex: 1 1;
position: relative;
}
.wk-enhanced-composer-input {
width: 100%;
border: none;
outline: none;
background: transparent;
font-size: 15px;
font-size: var(--wk-font-size-base);
line-height: 1.4;
padding: 8px 12px;
padding: var(--space-2) var(--space-3);
min-height: 20px;
max-height: 120px;
resize: none;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
font-family: var(--wk-font-family);
color: #0F172A;
color: var(--wk-text-primary);
}
.wk-enhanced-composer-input::placeholder {
color: var(--wk-text-tertiary);
}
.wk-enhanced-composer-send {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: var(--wk-blue-500);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 160ms;
transition: all var(--wk-duration-fast);
flex-shrink: 0;
}
.wk-enhanced-composer-send:hover {
background: var(--wk-blue-600);
transform: scale(1.05);
}
.wk-enhanced-composer-send:disabled {
background: var(--wk-gray-300);
cursor: not-allowed;
transform: none;
}
/* File Upload Styles */
.wk-file-upload-preview {
display: flex;
gap: 8px;
gap: var(--space-2);
padding: 12px;
padding: var(--space-3);
margin-bottom: 8px;
margin-bottom: var(--space-2);
background: var(--wk-bg-elev-2);
border-radius: 12px;
flex-wrap: wrap;
}
.wk-file-preview {
position: relative;
padding: 8px;
padding: var(--space-2);
background: var(--wk-bg-elev-1);
border-radius: 8px;
display: flex;
align-items: center;
gap: 8px;
gap: var(--space-2);
font-size: 14px;
font-size: var(--wk-font-size-sm);
max-width: 200px;
}
.wk-file-preview-remove {
position: absolute;
top: -6px;
right: -6px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--wk-red-500);
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
/* Typing Indicator */
.wk-typing-indicator {
display: flex;
align-items: center;
gap: 8px;
gap: var(--space-2);
padding: 8px 16px;
padding: var(--space-2) var(--space-4);
color: #1F2937;
color: var(--wk-text-secondary);
font-size: 14px;
font-size: var(--wk-font-size-sm);
opacity: 0;
transform: translateY(10px);
transition: all 0.2s;
transition: all var(--wk-duration-normal);
}
.wk-typing-indicator.active {
opacity: 1;
transform: translateY(0);
}
.wk-typing-dots {
display: flex;
gap: 2px;
}
.wk-typing-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: #1F2937;
background: var(--wk-text-secondary);
/* Animation kept for loading indicator */
animation: typingDot 1.4s infinite;
}
.wk-typing-dot:nth-child(2) {
animation-delay: 0.2s;
}
.wk-typing-dot:nth-child(3) {
animation-delay: 0.4s;
}
/* Kept: typingDot is a loading indicator */
@keyframes typingDot {
0%,
60%,
100% {
opacity: 0.3;
transform: scale(0.8);
}
30% {
opacity: 1;
transform: scale(1);
}
}
/* Decorative animations removed for performance */
/* Drag and Drop Effects */
.wk-enhanced-composer-container.drag-over {
border: 2px dashed var(--wk-blue-500);
background: var(--wk-blue-50);
transform: scale(1.02);
}
.wk-drag-drop-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(42, 165, 228, 0.1);
border: 2px dashed var(--wk-blue-500);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
z-index: 1000;
}
.wk-drag-drop-content {
text-align: center;
color: var(--wk-blue-600);
}
.wk-drag-drop-content h3 {
margin: 8px 0;
margin: var(--space-2) 0;
font-size: 16px;
font-size: var(--wk-font-size-lg);
font-weight: 600;
}
.wk-drag-drop-content p {
margin: 0;
font-size: 14px;
font-size: var(--wk-font-size-sm);
opacity: 0.8;
}
/* Status Indicators */
.wk-message-status-sending {
color: var(--wk-gray-400);
}
.wk-message-status-sent {
color: var(--wk-gray-500);
}
.wk-message-status-delivered {
color: var(--wk-blue-500);
}
.wk-message-status-read {
color: var(--wk-green-500);
}
/* Emoji Picker Styles */
.wk-emoji-picker {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
grid-gap: 8px;
grid-gap: var(--space-2);
gap: var(--space-2);
padding: 12px;
padding: var(--space-3);
background: var(--wk-bg-elev-1);
border-radius: 12px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--wk-shadow-lg);
max-width: 200px;
}
.wk-emoji-btn {
width: 36px;
height: 36px;
border: none;
background: transparent;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
transition: all 160ms;
transition: all var(--wk-duration-fast);
}
.wk-emoji-btn:hover {
background: var(--wk-bg-hover);
transform: scale(1.1);
}
/* Quick Reactions */
.wk-quick-reactions {
display: flex;
gap: 8px;
gap: var(--space-2);
padding: 8px;
padding: var(--space-2);
background: var(--wk-bg-elev-1);
border-radius: 20px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--wk-shadow-lg);
}
.wk-quick-reaction-btn {
width: 32px;
height: 32px;
border: none;
background: transparent;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
transition: all 160ms;
transition: all var(--wk-duration-fast);
}
.wk-quick-reaction-btn:hover {
background: var(--wk-bg-hover);
transform: scale(1.2);
}
/* File Preview Styles */
.wk-file-preview {
border: 1px solid #F3F4F6;
border: 1px solid var(--wk-border-subtle);
transition: all 160ms;
transition: all var(--wk-duration-fast);
}
.wk-file-preview:hover {
border-color: var(--wk-blue-500);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
box-shadow: var(--wk-shadow-sm);
}
.wk-file-name {
font-weight: 500;
color: #0F172A;
color: var(--wk-text-primary);
}
.wk-file-size {
color: #1F2937;
color: var(--wk-text-secondary);
margin-left: 4px;
margin-left: var(--space-1);
}
/* Upload Progress */
.wk-upload-progress {
width: 100%;
height: 4px;
background: var(--wk-gray-200);
border-radius: 2px;
overflow: hidden;
margin-top: 4px;
margin-top: var(--space-1);
}
.wk-progress-bar {
height: 100%;
background: var(--wk-blue-500);
border-radius: 2px;
transition: width 0.2s;
transition: width var(--wk-duration-normal);
}
/* Shortcuts Hint */
.wk-shortcuts-hint {
position: absolute;
bottom: 100%;
left: 12px;
left: var(--space-3);
font-size: 12px;
font-size: var(--wk-font-size-xs);
color: var(--wk-text-tertiary);
opacity: 0;
transform: translateY(4px);
transition: all 160ms;
transition: all var(--wk-duration-fast);
pointer-events: none;
}
.wk-enhanced-composer-input:focus+.wk-shortcuts-hint {
opacity: 1;
transform: translateY(0);
}
/* Loading States */
.wk-loading-dots::after {
content: '';
animation: loadingDots 1.5s infinite;
}
@keyframes loadingDots {
0%,
20% {
content: '';
}
40% {
content: '.';
}
60% {
content: '..';
}
80%,
100% {
content: '...';
}
}
.wk-conversation-enhanced .wk-conversation-content {
padding-top: var(--chat-header-height);
}
.wk-conversation-enhanced .wk-conversation-messages {
padding: 16px 24px;
padding: var(--space-4) var(--space-6);
max-width: 100%;
}
.wk-message-item-enhanced {
margin-bottom: var(--message-spacing);
/* Transition removed */
}
.wk-message-item-enhanced:hover {
/* Transform removed */
}
.wk-message-item-enhanced.wk-message-item-last {
margin-bottom: 24px;
margin-bottom: var(--space-6);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.wk-conversation-enhanced .wk-conversation-messages {
padding: 12px 16px;
padding: var(--space-3) var(--space-4);
}
.wk-message-item-enhanced {
margin-bottom: 8px;
margin-bottom: var(--space-2);
}
}
@media (max-width: 480px) {
.wk-conversation-enhanced {
--chat-header-height: 56px;
--composer-min-height: 48px;
}
.wk-conversation-enhanced .wk-conversation-messages {
padding: 8px 12px;
padding: var(--space-2) var(--space-3);
}
}
/* @tailwind base;
@tailwind components;
@tailwind utilities; */
/* Import Telegram-inspired design tokens */
/**
* =====================================
* 滚动条美化
**/
/* 亮色 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #b8b8b8;
background-clip: padding-box;
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #878787;
}
/* 暗色 */
body[theme-mode=dark] ::-webkit-scrollbar-thumb {
background: #565656;
}
body[theme-mode=dark] ::-webkit-scrollbar-thumb:hover {
background: #424242;
/* 更深的灰色 */
}
/**
* =====================================
* Window Title Bar Overlay Support
**/
/* Ensure app content doesn't overlap with window controls */
.app-region-drag {
-webkit-app-region: drag;
}
.app-region-no-drag {
-webkit-app-region: no-drag;
}
/* Add padding for title bar overlay on Windows/Linux */
@media not (-webkit-appearance: none) {
/* This targets Windows/Linux (not Safari/WebKit on macOS) */
body {
padding-top: env(titlebar-area-height, 32px);
}
}
/* For Electron apps, we can use specific CSS environment variables */
body {
/* Use CSS environment variables for title bar overlay */
--title-bar-height: env(titlebar-area-height, 0px);
--title-bar-width: env(titlebar-area-width, 100%);
/* Add top padding equal to title bar height */
padding-top: var(--title-bar-height);
}
.scrollbar-small::-webkit-scrollbar {
height: 3px;
}
.scrollbar-small::-webkit-scrollbar-thumb {
background: #9ca3af;
border-radius: 8px;
}
.scrollbar-small::-webkit-scrollbar-track {
background: transparent;
}
.wk-message-time-box {
width: 85%;
margin: 0 auto;
padding: 0;
text-align: center;
display: flex;
align-items: center;
gap: 12px;
height: 1px;
}
.wk-message-time {
color: rgba(9, 30, 66, .74);
padding: 0 8px;
white-space: nowrap;
font-size: 11px;
font-weight: 500;
line-height: 1;
background: #fff;
background: var(--wk-surface-primary, #fff);
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.wk-message-time {
z-index: 0;
}
}
.wk-message-item:has(.wk-message-time) {
margin: 16px 0;
}
body[theme-mode=dark] .wk-message-time {
color: #999;
background: #0f172a;
background: var(--wk-surface-primary, #0f172a);
}
.wk-message-time-line1 {
flex: 1 1;
height: 0;
border: none;
border-top: 0.5px solid rgba(9, 30, 66, .08);
margin: 0;
}
.wk-message-time-line2 {
flex: 1 1;
height: 0;
border: none;
border-top: 0.5px solid rgba(9, 30, 66, .08);
margin: 0;
}
.wk-message-split-box {
width: 85%;
margin: 0 auto;
padding: 20px;
text-align: center;
display: table;
}
.wk-message-split-content {
color: rgba(9,30,66,.74);
padding: 5px 8px;
white-space: nowrap;
width: auto;
font-size: 12px;
font-weight: 600;
}
.wk-message-split-line1 {
flex: 1 1;
height: 0;
border: none;
border-top: 0.5px solid rgba(9, 30, 66, .08);
margin: 0;
}
.wk-message-split-line2 {
flex: 1 1;
height: 0;
border: none;
border-top: 0.5px solid rgba(9, 30, 66, .08);
margin: 0;
}
.wk-avatar-container {
position: relative;
display: inline-block;
}
.wk-avatar {
width: 50px;
height: 50px;
border-radius: 40%;
display: block;
}
/* Avatar status badges */
.wk-avatar-status {
position: absolute;
bottom: 0;
right: 0;
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
z-index: 1;
}
/* Online status - green */
.wk-avatar-status-online {
background-color: #22c55e;
animation: pulse-green 2s infinite;
}
/* Offline status - gray */
.wk-avatar-status-offline {
background-color: #9ca3af;
}
/* Pulse animation for online status */
@keyframes pulse-green {
0% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}
70% {
box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
}
}
/* Dark mode support */
body[theme-mode=dark] .wk-avatar-status {
border-color: var(--wk-surface-primary);
}
body[theme-mode=dark] .wk-avatar-status-online {
background-color: #10b981;
}
body[theme-mode=dark] .wk-avatar-status-offline {
background-color: #6b7280;
}
/* Hover effects */
.wk-avatar-container:hover .wk-avatar-status {
transform: scale(1.1);
}
/* Modern ViewQueue Header Styles */
:root {
--wk-height-viewqueueheader: 56px;
/* Increased for better touch targets */
}
/* Legacy styles for backward compatibility */
.wk-viewqueueheader {
background-color: var(--wk-color-secondary);
height: 56px;
height: var(--wk-height-viewqueueheader);
width: 100%;
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
backdrop-filter: blur(8px);
}
.wk-viewqueueheader-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.wk-viewqueueheader-content-title {
font-size: 18px;
font-weight: 600;
max-width: 280px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #1f2937;
letter-spacing: -0.025em;
}
body[theme-mode=dark] .wk-viewqueueheader {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
body[theme-mode=dark] .wk-viewqueueheader-content-title {
color: #ffffff;
}
.wk-viewqueueheader-back-btn {
width: 40px;
height: 40px;
margin-right: 12px;
border: 1px solid var(--wk-border-light);
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.02);
background: var(--wk-surface-elevated, rgba(0, 0, 0, 0.02));
color: var(--wk-text-secondary);
transition: background-color 0.2s ease, border-color 0.2s ease,
color 0.2s ease, transform 0.2s ease;
/* Ensure clickable on mobile */
cursor: pointer;
position: relative;
z-index: 10;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
-moz-user-select: none;
user-select: none;
-webkit-user-select: none;
}
.wk-viewqueueheader-back-btn:hover {
background: var(--wk-color-neutral-100);
border-color: rgba(0, 0, 0, 0.12);
border-color: var(--wk-border-strong, rgba(0, 0, 0, 0.12));
color: var(--wk-text-primary);
transform: translateY(-1px);
}
.wk-viewqueueheader-back-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 100, 250, 0.25);
}
body[theme-mode='dark'] .wk-viewqueueheader-back-btn {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.8);
}
body[theme-mode='dark'] .wk-viewqueueheader-back-btn:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
.wk-viewqueueheader-back-icon {
width: 18px;
height: 18px;
transition: inherit;
}
.wk-viewqueueheader-back {
position: absolute;
left: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0 16px;
border-radius: 8px;
margin: 0 8px;
transition: background-color 0.2s ease;
}
.wk-viewqueueheader-back:hover {
background-color: rgba(0, 0, 0, 0.05);
}
body[theme-mode=dark] .wk-viewqueueheader-back:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.wk-viewqueueheader-back img {
width: 12px;
height: 18px;
opacity: 0.8;
transition: opacity 0.2s ease;
}
.wk-viewqueueheader-back:hover img {
opacity: 1;
}
.wk-viewqueueheader-content-action {
position: absolute;
right: 16px;
}
/* Modern button enhancements */
.wk-viewqueueheader-content-action .semi-button {
border-radius: 8px !important;
font-weight: 500 !important;
padding: 8px 16px !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.wk-viewqueueheader-content-action .semi-button:hover {
color: white !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
/* Modern MergeforwardMessageList Styles */
/* Legacy styles for backward compatibility */
.wk-mergeforwardmessagelist {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: white;
}
.wk-mergeforwardmessagelist-header {
flex-shrink: 0;
border-bottom: 1px solid #e5e7eb;
}
.wk-mergeforwardmessagelist-content {
width: 100%;
flex: 1 1;
background-color: #f9fafb;
overflow-y: auto;
padding: 1rem;
}
.wk-mergeforwardmessagelist-content-timeline {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
font-size: 0.75rem;
color: #6b7280;
background-color: #f3f4f6;
padding: 0.5rem 0.75rem;
border-radius: 9999px;
display: inline-block;
}
.wk-mergeforwardmessagelist-content-msgs {
width: 100%;
max-width: 42rem;
margin: 0 auto;
}
.wk-mergeforwardmessagelist-content-msg {
display: flex;
width: 100%;
padding: 0.75rem;
background-color: transparent;
border-radius: 0.5rem;
transition: background-color 0.2s ease;
gap: 0.75rem;
align-items: flex-start;
}
.wk-mergeforwardmessagelist-content-msg:hover {
background-color: rgba(249, 250, 251, 0.8);
}
.wk-mergeforwardmessagelist-content-msg-avatar {
width: 2.5rem;
height: 2.5rem;
flex-shrink: 0;
}
.wk-mergeforwardmessagelist-content-msg-info {
display: flex;
width: 100%;
flex-direction: column;
min-width: 0;
}
.wk-mergeforwardmessagelist-content-msg-info-first {
display: flex;
width: 100%;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.wk-mergeforwardmessagelist-content-msg-info-first-name {
font-size: 0.875rem;
font-weight: 500;
color: #1f2937;
}
.wk-mergeforwardmessagelist-content-msg-info-first-time {
font-size: 0.75rem;
color: #6b7280;
}
.wk-mergeforwardmessagelist-content-msg-info-second {
width: 100%;
}
.wk-mergeforwardmessagelist-content-msg-info-second-msgcontent {
font-size: 0.875rem;
color: #374151;
line-height: 1.5;
}
.wk-mergeforwards-call-bubble {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background-color: var(--wk-color-brand-600);
color: #fff;
padding: 0.35rem 0.9rem;
border-radius: 9999px;
font-size: 0.8125rem;
line-height: 1.2;
}
.wk-mergeforwards-call-text {
display: inline-block;
}
.wk-mergeforwards-call-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.wk-mergeforwards-call-icon svg {
width: 16px;
height: 16px;
fill: currentColor;
opacity: 0.85;
}
.wk-mergeforwards-text {
font-size: 0.875rem;
color: var(--wk-text-secondary);
line-height: 1.6;
word-break: break-word;
}
.wk-mergeforwards-text a,
.wk-mergeforwards-text-link {
color: var(--wk-color-brand-600);
color: var(--wk-color-theme, var(--wk-color-brand-600));
text-decoration: underline;
word-break: break-all;
}
.wk-mergeforwards-video {
position: relative;
border-radius: 0.75rem;
overflow: hidden;
}
.wk-mergeforwards-video-wrapper {
position: relative;
border-radius: 0.75rem;
overflow: hidden;
background-color: #000;
}
.wk-mergeforwards-video-wrapper video {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.wk-mergeforwards-video-duration {
position: absolute;
right: 8px;
bottom: 8px;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.75rem;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
letter-spacing: 0.05em;
}
.wk-mergeforwards-file {
display: flex;
width: 300px;
min-height: 72px;
border-radius: 12px;
overflow: hidden;
background-color: #ffffff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
border: 1px solid rgba(148, 163, 184, 0.2);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wk-mergeforwards-file:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.wk-mergeforwards-file-header {
width: 78px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--wk-color-brand-600);
background-color: var(--wk-color-theme, var(--wk-color-brand-600));
}
.wk-mergeforwards-file-header img {
width: 48px;
height: 48px;
}
.wk-mergeforwards-file-ext {
font-size: 14px;
font-weight: 600;
color: #ffffff;
letter-spacing: 0.1em;
}
.wk-mergeforwards-file-content {
flex: 1 1;
padding: 14px 18px;
display: flex;
flex-direction: column;
justify-content: center;
background: rgba(248, 250, 252, 0.9);
}
.wk-mergeforwards-file-name {
font-size: 14px;
font-weight: 600;
color: var(--wk-text-primary);
margin-bottom: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-mergeforwards-file-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--wk-text-muted);
}
.wk-mergeforwards-file-action {
color: var(--wk-color-brand-600);
color: var(--wk-color-theme, var(--wk-color-brand-600));
font-weight: 500;
}
.wk-mergeforwards-file-video {
width: 320px;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
.wk-mergeforwards-file-video video {
width: 100%;
display: block;
border-radius: 12px;
background-color: #000;
}
.wk-mergeforwards-file-video-info {
display: flex;
flex-direction: column;
gap: 6px;
}
.wk-mergeforwards-file-video-info .wk-mergeforwards-file-name {
margin-bottom: 0;
white-space: normal;
line-height: 1.4;
}
.wk-mergeforwards-file-video-info .wk-mergeforwards-file-meta {
justify-content: flex-start;
gap: 10px;
}
/* Dark mode support */
body[theme-mode=dark] .wk-mergeforwardmessagelist {
background-color: #1e293b;
}
body[theme-mode=dark] .wk-mergeforwardmessagelist-header {
border-bottom-color: #374151;
}
body[theme-mode=dark] .wk-mergeforwardmessagelist-content {
background-color: #0f172a;
}
body[theme-mode=dark] .wk-mergeforwardmessagelist-content-timeline {
color: #9ca3af;
background-color: #374151;
}
body[theme-mode=dark] .wk-mergeforwardmessagelist-content-msg:hover {
background-color: rgba(55, 65, 81, 0.3);
}
body[theme-mode=dark] .wk-mergeforwardmessagelist-content-msg-info-first-name {
color: white;
}
body[theme-mode=dark] .wk-mergeforwardmessagelist-content-msg-info-first-time {
color: #9ca3af;
}
body[theme-mode=dark] .wk-mergeforwardmessagelist-content-msg-info-second-msgcontent {
color: #d1d5db;
}
body[theme-mode=dark] .wk-mergeforwards-call-bubble {
background-color: #2563eb;
}
body[theme-mode=dark] .wk-mergeforwards-video-duration {
background-color: rgba(15, 23, 42, 0.75);
}
body[theme-mode=dark] .wk-mergeforwards-file {
background-color: rgba(15, 23, 42, 0.9);
border-color: rgba(71, 85, 105, 0.6);
box-shadow: 0 6px 16px rgba(2, 6, 23, 0.55);
}
body[theme-mode=dark] .wk-mergeforwards-file-content {
background: rgba(30, 41, 59, 0.85);
}
body[theme-mode=dark] .wk-mergeforwards-file-name {
color: #e2e8f0;
}
body[theme-mode=dark] .wk-mergeforwards-file-meta {
color: #94a3b8;
}
body[theme-mode=dark] .wk-mergeforwards-file-action {
color: #38bdf8;
}
body[theme-mode=dark] .wk-mergeforwards-file-video-info .wk-mergeforwards-file-meta {
color: #94a3b8;
}
.wk-message-location {
cursor: pointer;
max-width: 280px;
min-width: 200px;
width: 100%;
}
.wk-message-location-content {
width: 100%;
background-color: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.wk-message-location:hover .wk-message-location-content {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
body[theme-mode=dark] .wk-message-location-content {
background-color: var(--wk-color-secondary);
border-color: rgba(255, 255, 255, 0.1);
}
body[theme-mode=dark] .wk-message-location:hover .wk-message-location-content {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Map Image Container */
.wk-message-location-content-locationimg {
width: 100%;
height: 140px;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #f0f0f0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
body[theme-mode=dark] .wk-message-location-content-locationimg {
background-color: #2a2a2a;
}
/* Location Icon Overlay */
.wk-message-location-overlay {
position: absolute;
top: 8px;
right: 8px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(4px);
}
body[theme-mode=dark] .wk-message-location-overlay {
background-color: rgba(0, 0, 0, 0.6);
}
.wk-message-location-icon {
width: 20px;
height: 20px;
color: #0084ff;
}
body[theme-mode=dark] .wk-message-location-icon {
color: #4da6ff;
}
/* Location Info Container */
.wk-message-location-info {
padding: 12px;
}
.wk-message-location-content-title {
color: var(--wk-text-item);
font-size: 15px;
font-weight: 600;
line-height: 1.4;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
body[theme-mode=dark] .wk-message-location-content-title {
color: var(--wk-text-item);
}
.wk-message-location-content-address {
color: #666;
font-size: 13px;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
body[theme-mode=dark] .wk-message-location-content-address {
color: rgba(255, 255, 255, 0.7);
}
/* Responsive adjustments */
@media (max-width: 640px) {
.wk-message-location {
max-width: 85%;
min-width: 200px;
}
.wk-message-location-content-locationimg {
height: 120px;
}
}
.wk-message-card {
background: #ffffff;
background: var(--wk-surface-primary, #ffffff);
width: 280px;
max-width: 100%;
cursor: pointer;
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.wk-message-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
border-color: rgba(0, 132, 255, 0.2);
}
body[theme-mode=dark] .wk-message-card {
background: #1e1e1e;
background: var(--wk-surface-primary-dark, #1e1e1e);
border-color: rgba(255, 255, 255, 0.1);
}
body[theme-mode=dark] .wk-message-card:hover {
border-color: rgba(0, 132, 255, 0.3);
box-shadow: 0 4px 16px rgba(0, 132, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.wk-message-card-content {
display: flex;
padding: 16px;
align-items: center;
gap: 14px;
position: relative;
}
.wk-message-card-content::after {
content: '';
position: absolute;
bottom: 0;
left: 16px;
right: 16px;
height: 1px;
background: rgba(0, 0, 0, 0.08);
}
body[theme-mode=dark] .wk-message-card-content::after {
background: rgba(255, 255, 255, 0.1);
}
.wk-message-card-avatar {
width: 56px;
height: 56px;
border-radius: 12px;
-o-object-fit: cover;
object-fit: cover;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
border: 2px solid rgba(255, 255, 255, 0.8);
}
body[theme-mode=dark] .wk-message-card-avatar {
border-color: rgba(255, 255, 255, 0.2);
}
.wk-message-card-content-name {
flex: 1 1;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
color: var(--wk-text-item, #1a1a1a);
margin: 0;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body[theme-mode=dark] .wk-message-card-content-name {
color: #ffffff;
color: var(--wk-text-item, #ffffff);
}
.wk-message-card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
gap: 8px;
}
.wk-message-card-bottom-flag {
font-size: 12px;
color: #6b7280;
background: rgba(0, 132, 255, 0.08);
padding: 4px 10px;
border-radius: 12px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
}
body[theme-mode=dark] .wk-message-card-bottom-flag {
color: #a0a0a0;
background: rgba(0, 132, 255, 0.15);
}
.wk-message-card-bottom-time {
font-size: 11px;
color: #9ca3af !important;
opacity: 0.7;
}
body[theme-mode=dark] .wk-message-card-bottom-time {
color: #6b7280 !important;
}
:root {
--wk-width-max-message: 540px;
}
.wk-message-base {
width: 100%;
height: 100%;
display: flex;
}
.wk-message-base-send,
.wk-message-base-recv {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
transition: margin 0.2s ease-out;
}
.wk-message-base-send {
align-items: flex-end;
margin-right: 5px;
/* Default margin-bottom will be overridden by inline styles for grouped messages */
}
.wk-message-base-recv {
margin-left: 15px;
transform: translate3d(0, 0, 0);
transition: transform var(--wk-layer-transition), margin 0.2s ease-out;
}
.wk-message-base-check-open .wk-message-base-recv {
transform: translate3d(30px, 0, 0);
}
.senderName {
color: rgba(9, 30, 66, .74);
font-size: 12px;
font-weight: 400;
/* text-transform: capitalize; */
padding-bottom: 1px;
}
.senderAvatar {
width: 34px;
height: 34px;
cursor: pointer;
position: absolute;
left: 0;
bottom: 5px;
}
.senderAvatar img {
width: 34px;
height: 34px;
border-radius: 40%;
}
.wk-message-base-box {
display: flex;
align-items: center;
position: relative;
}
.wk-message-base-send .wk-message-base-box {
flex-direction: row-reverse;
justify-content: center;
margin-left: 0px;
margin-right: 20px;
}
.wk-message-base-send .senderName {
padding-right: 41px;
}
.wk-message-base-recv .senderName {
padding-left: 41px;
}
.wk-message-base-send .senderAvatar {
display: none;
text-align: center;
}
.wk-message-base-bubble-box {
display: flex;
position: relative;
}
.wk-message-base-bubble-box.recv {
margin-left: 40px;
}
.wk-message-base-bubble {
color: rgba(9, 30, 66, .87);
display: flex;
/* margin-bottom: 4px; */
padding: 8px 10px;
position: relative;
word-wrap: break-word;
max-width: 540px;
max-width: var(--wk-width-max-message);
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 1px 2px rgba(114, 114, 114, 0.25098);
font-size: 15px;
}
.wk-message-base-bubble-box.hide .wk-message-base-bubble {
padding: 0px;
}
body[theme-mode=dark] .wk-message-base-bubble {
box-shadow: none;
}
@media screen and (max-width: 640px) {
.wk-message-base-bubble {
max-width: calc(100vw - 80px);
}
}
.wk-message-base-bubble-box.send .wk-message-base-bubble {
background-color: var(--wk-color-theme);
border-radius: 0.75rem 0.75rem 0rem 0.75rem;
color: white;
}
.wk-message-base-bubble-box.recv .wk-message-base-bubble {
border-radius: 0.75rem 0.75rem 0.75rem 0rem;
background-color: white;
color: black;
}
.wk-message-base-bubble-box.recv .wk-message-text-content a {
color: var(--wk-color-brand-500);
}
body[theme-mode=dark] .wk-message-base-bubble-box.recv .wk-message-base-bubble {
color: white;
background-color: var(--wk-color-secondary);
}
.wk-message-base-bubble-box.send.middle .wk-message-base-bubble {
border-radius: 0.75rem 0.375rem 0.375rem 0.75rem;
}
.wk-message-base-bubble-box.send.first .wk-message-base-bubble {
border-radius: 0.75rem 0.75rem 0.375rem 0.75rem;
}
.wk-message-base-bubble-box.recv.middle .wk-message-base-bubble {
border-radius: 0.375rem 0.75rem 0.75rem 0.375rem;
}
.wk-message-base-bubble-box.recv.first .wk-message-base-bubble {
border-radius: 0.75rem 0.75rem 0.75rem 0.375rem;
}
.wk-message-base-bubble-box.hide .wk-message-base-bubble {
background-color: transparent !important;
box-shadow: none;
}
.svgAppendix {
display: none;
overflow: hidden;
position: absolute;
width: 0.5625rem;
height: 1.125rem;
font-size: 1rem !important;
bottom: -1px;
}
.wk-message-base-bubble-box.last .svgAppendix {
display: block;
}
.wk-message-base-bubble-box.single .svgAppendix {
display: block;
}
.wk-message-base-bubble-box.send .svgAppendix {
right: -0.551rem;
}
.wk-message-base-bubble-box.recv .svgAppendix {
left: -0.52rem;
}
.wk-message-base-bubble-box.send .svgAppendix .corner {
fill: var(--wk-color-theme);
}
.wk-message-base-bubble-box.recv .svgAppendix .corner {
fill: white;
}
body[theme-mode=dark] .wk-message-base-bubble-box.recv .svgAppendix .corner {
fill: var(--wk-color-secondary);
}
/* .wk-message-base-recv .wk-message-base-bubble {
margin-left: 5px;
background-color: #bedbf5;
}
.wk-message-base-send .wk-message-base-bubble {
margin-right: 5px;
background-color: #fff;
box-shadow: -1px 1px 1px rgba(0,0,0,.12);
color: rgba(9,30,66,.87) !important;
border-radius: 20px 4px 8px 20px;
}*/
.messageNameBox {
display: flex;
margin-bottom: 1px;
}
.wk-message-base-send .messageNameBox {
flex-direction: row-reverse;
justify-content: end;
}
.wk-message-base-recv .messageNameBox {
flex-direction: row;
}
/*.messageTime {
color: rgba(9,30,66,.74);
font-size: 12px;
font-weight: 400;
text-transform: capitalize;
display: none;
}
.wk-message-base-send:hover .messageTime {
display: block;
}
.wk-message-base-recv:hover .messageTime {
display: block;
}
.wk-message-base-recv .messageTime {
margin-left: 8px;
}
.wk-message-base-send .messageTime {
margin-right: 8px;
}*/
.wk-message-base-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.popupMenusContaner {
display: none;
}
.wk-message-base-box:hover .popupMenusContaner {
display: block;
}
.wk-message-base-checkBox {
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: transform var(--wk-layer-transition);
transform: translate3d(-90px, 0, 0);
}
.wk-message-base-check-open {
cursor: pointer;
}
.wk-message-base-check-open .wk-message-base-checkBox {
transform: translate3d(15px, 0, 0);
}
.wk-message-base-send .checkBox {
left: auto;
right: -30px;
}
.wk-message-base-send .wk-message-base-box.checked {
margin-left: 0;
margin-right: 30px;
}
.wk-message-base-recv .wk-message-base-box.checked .senderAvatar {
left: -30px;
}
.replyBox {
width: 100%;
}
.reply {
position: relative;
color: #666;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 12px;
margin-bottom: 4px;
max-width: 100%;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
.reply::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 2px;
height: 100%;
border-radius: 50px;
background-color: var(--wk-color-theme);
}
.messageMeta {
position: relative;
top: 0.375rem;
bottom: auto !important;
float: right;
line-height: 1;
height: 19px;
margin-left: 0.4375rem;
margin-right: -0.2rem;
}
.wk-message-base-bubble-box.send .messageMeta {
top: 0rem;
}
.messageTime {
margin-inline-end: 0.1875rem;
font-size: .75rem;
white-space: nowrap;
}
.wk-message-base-bubble-box.recv .messageTime {
color: rgb(104, 108, 114, 0.75);
}
.wk-message-base-bubble-box.send .messageTime {
color: rgb(255, 255, 255, 0.75);
}
.textTitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: calc(1rem - .125rem);
font-size: calc(var(--message-text-size, 1rem) - .125rem);
font-weight: 500;
color: var(--accent-color);
unicode-bidi: plaintext;
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.textTitle__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.textTitle__badge {
flex: 0 0 auto;
padding: 0 6px;
border-radius: 4px;
font-size: 0.75rem;
line-height: 1.6;
background-color: rgba(9, 30, 66, 0.08);
color: rgba(9, 30, 66, 0.74);
text-transform: uppercase;
}
.textTitle__badge--ban {
background-color: rgba(255, 77, 79, 0.16);
color: #ff4d4f;
}
.textTitle__badge--mute {
background-color: rgba(250, 173, 20, 0.18);
color: #fa8c16;
}
.textTitle__badge--removed {
background-color: rgba(120, 120, 120, 0.18);
color: #5f6d7a;
}
body[theme-mode=dark] .textTitle__badge {
background-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.85);
}
body[theme-mode=dark] .textTitle__badge--ban {
background-color: rgba(255, 77, 79, 0.24);
color: #ff7875;
}
body[theme-mode=dark] .textTitle__badge--mute {
background-color: rgba(250, 173, 20, 0.24);
color: #ffc069;
}
body[theme-mode=dark] .textTitle__badge--removed {
background-color: rgba(120, 120, 120, 0.28);
color: rgba(255, 255, 255, 0.65);
}
.icon-message-read::before {
content: "";
position: absolute;
bottom: -4px;
color: rgb(255, 255, 255, 0.7);
}
.icon-message-succeeded::before {
content: "";
position: absolute;
bottom: -4px;
color: rgb(255, 255, 255, 0.7);
}
.icon-message-pending::before {
content: "";
position: absolute;
bottom: -4px;
}
.messageStatus {
width: 1.19rem;
height: 1.19rem;
overflow: hidden;
display: inline-block;
line-height: 1;
margin-left: -0.1875rem;
font-size: 1.1875rem;
border-radius: 0.625rem;
}
.messageFail {
cursor: pointer;
}
.messageFail img {
width: 20px;
height: 20px;
margin-left: 10px;
}
.wk-message-fail-actions {
display: flex;
align-items: center;
gap: 4px;
}
.wk-message-fail-actions .semi-button {
min-width: auto;
padding: 4px;
}
.wk-message-fail-actions .semi-button:hover {
background-color: rgba(255, 77, 79, 0.1);
}
.wk-message-error-reason {
font-size: 13px;
margin-right: 10px;
margin-top: 5px;
color: var(--wk-color-font-tip);
}
/* ============================================
MESSAGE GROUPING STYLES
============================================ */
/* Messages grouped by time (within 3 minutes) */
/* 3px spacing for grouped messages */
.wk-message-item-grouped-with-previous .wk-message-base-send,
.wk-message-item-grouped-with-previous .wk-message-base-recv {
margin-top: 3px !important;
margin-bottom: 3px !important;
}
.wk-message-item-grouped-with-next .wk-message-base-send,
.wk-message-item-grouped-with-next .wk-message-base-recv {
margin-bottom: 3px !important;
}
/* Hide avatar for grouped messages that are NOT the last in a group */
/* Avatar should be shown at the last message of a group, so we only hide it */
/* when the message is grouped with previous AND has a next message in the group */
.wk-message-item-grouped-with-previous.wk-message-item-grouped-with-next .senderAvatar {
opacity: 0;
pointer-events: none;
}
/* Smooth transition for grouped messages */
.wk-message-base-send,
.wk-message-base-recv {
transition: margin 0.2s ease-out;
}
/* Animation for new grouped messages */
.wk-message-item-grouped-with-previous {
animation: slideInGrouped 0.25s ease-out;
}
@keyframes slideInGrouped {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wk-check {
cursor: pointer;
}
/* Message Hover Actions */
.wk-message-hover-actions {
position: absolute;
top: 50%; /* Center vertically */
transform: translateY(-50%) translateX(0); /* Center alignment */
display: flex;
align-items: center;
gap: 4px;
background: #ffffff;
background: var(--semi-color-bg-2, #ffffff);
border: 1px solid rgba(0, 0, 0, 0.08);
border: 1px solid var(--semi-color-border, rgba(0, 0, 0, 0.08));
border-radius: 20px;
padding: 4px 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transition:
opacity 0.15s ease 0.2s,
visibility 0.15s ease 0.2s; /* Longer delay before hiding - 200ms */
z-index: 100;
pointer-events: none; /* Allow clicks to pass through when hidden */
}
/* Show on hover - with expanded hover area */
.wk-message-base-bubble-wrapper:hover .wk-message-hover-actions,
.wk-message-base-bubble:hover .wk-message-hover-actions,
.wk-message-hover-actions:hover {
pointer-events: auto;
opacity: 1;
visibility: visible;
transition-delay: 0s; /* Remove delay when showing */
}
/* Extend hover area with pseudo-element bridge */
.wk-message-hover-actions::before {
content: '';
position: absolute;
top: -8px; /* Extend above */
bottom: -8px; /* Extend below */
width: 24px; /* Wider bridge gap to prevent losing hover */
z-index: -1;
}
/* Position for mine (right) - place to the left of the message bubble */
.wk-message-hover-actions.mine {
right: calc(100% + 8px); /* Place to the left with 8px gap */
}
.wk-message-hover-actions.mine::before {
right: -24px; /* Bridge extends to the right toward bubble */
}
/* Position for their (left) - place to the right of the message bubble */
.wk-message-hover-actions.their {
left: calc(100% + 8px); /* Place to the right with 8px gap */
}
.wk-message-hover-actions.their::before {
left: -24px; /* Bridge extends to the left toward bubble */
}
/* Reactions container */
.wk-message-hover-reactions {
display: flex;
align-items: center;
gap: 2px;
margin-right: 4px;
padding-right: 4px;
border-right: 1px solid rgba(0, 0, 0, 0.08);
border-right: 1px solid var(--semi-color-border, rgba(0, 0, 0, 0.08));
}
/* Buttons container */
.wk-message-hover-buttons {
display: flex;
align-items: center;
gap: 2px;
}
/* Action button styles */
.wk-hover-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: transparent;
border-radius: 50%;
cursor: pointer;
transition:
background-color 0.2s ease,
transform 0.1s ease;
color: #1d2129;
color: var(--semi-color-text-1, #1d2129);
}
.wk-hover-action-btn:hover {
background-color: rgba(0, 0, 0, 0.04);
background-color: var(--semi-color-fill-1, rgba(0, 0, 0, 0.04));
transform: scale(1.1);
}
.wk-hover-action-btn:active {
transform: scale(0.95);
}
/* Reaction buttons */
.wk-hover-action-btn.reaction-btn {
font-size: 18px;
line-height: 1;
padding: 0;
}
.wk-hover-action-btn.reaction-btn:hover {
transform: scale(1.2);
}
/* Remove reactions button (X) */
.wk-hover-action-btn.remove-reactions-btn {
font-size: 16px;
font-weight: bold;
color: #f82c2c;
color: var(--semi-color-danger, #f82c2c);
border-left: 1px solid rgba(0, 0, 0, 0.08);
border-left: 1px solid var(--semi-color-border, rgba(0, 0, 0, 0.08));
border-radius: 0;
margin-left: 4px;
padding-left: 8px;
width: 36px;
}
.wk-hover-action-btn.remove-reactions-btn:hover {
background-color: rgba(248, 44, 44, 0.1);
background-color: var(
--semi-color-danger-light-default,
rgba(248, 44, 44, 0.1)
);
color: #f82c2c;
color: var(--semi-color-danger, #f82c2c);
transform: scale(1.15);
}
body[theme-mode='dark'] .wk-hover-action-btn.remove-reactions-btn {
color: #f82c2c;
color: var(--semi-color-danger, #f82c2c);
border-left-color: rgba(255, 255, 255, 0.08);
border-left-color: var(--semi-color-border, rgba(255, 255, 255, 0.08));
}
body[theme-mode='dark'] .wk-hover-action-btn.remove-reactions-btn:hover {
background-color: rgba(248, 44, 44, 0.2);
background-color: var(
--semi-color-danger-light-default,
rgba(248, 44, 44, 0.2)
);
}
/* Dark mode support */
body[theme-mode='dark'] .wk-message-hover-actions {
background: #232324;
background: var(--semi-color-bg-2, #232324);
border-color: rgba(255, 255, 255, 0.08);
border-color: var(--semi-color-border, rgba(255, 255, 255, 0.08));
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
body[theme-mode='dark'] .wk-hover-action-btn {
color: #e8e8e8;
color: var(--semi-color-text-1, #e8e8e8);
}
body[theme-mode='dark'] .wk-hover-action-btn:hover {
background-color: rgba(255, 255, 255, 0.08);
background-color: var(--semi-color-fill-1, rgba(255, 255, 255, 0.08));
}
body[theme-mode='dark'] .wk-message-hover-reactions {
border-right-color: rgba(255, 255, 255, 0.08);
border-right-color: var(--semi-color-border, rgba(255, 255, 255, 0.08));
}
/* hoverActionsIn animation removed for performance */
/* ==========================================================================
MOBILE RESPONSIVE - Action bar positioned above bubble, aligned with it
========================================================================== */
@media (max-width: 768px) {
/* Base mobile styles */
.wk-message-hover-actions {
position: absolute;
top: auto;
bottom: calc(100% + 4px); /* Position above the bubble with some gap */
z-index: 9999; /* Higher than time box */
padding: 4px 6px;
border-radius: 16px;
gap: 2px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
/* Their messages (left-aligned bubbles) - action bar aligned left */
.wk-message-hover-actions.their {
left: 0;
right: auto;
transform: none;
}
/* Mine messages (right-aligned bubbles) - action bar aligned right */
.wk-message-hover-actions.mine {
left: auto;
right: 0;
transform: none;
}
/* Hide the bridge pseudo-element on mobile */
.wk-message-hover-actions::before {
display: none;
}
/* Compact button size for mobile */
.wk-hover-action-btn {
width: 28px;
height: 28px;
}
.wk-hover-action-btn.reaction-btn {
font-size: 16px;
}
/* Compact reactions container */
.wk-message-hover-reactions {
gap: 1px;
margin-right: 2px;
padding-right: 4px;
}
/* Compact buttons container */
.wk-message-hover-buttons {
gap: 1px;
}
/* Smaller remove button */
.wk-hover-action-btn.remove-reactions-btn {
width: 28px;
font-size: 12px;
padding-left: 4px;
margin-left: 2px;
}
}
/* Message Reactions Display - Absolute position below bubble */
.wk-message-reactions {
position: absolute;
bottom: -15px; /* Position below bubble */
left: 0;
display: flex;
align-items: center;
gap: 3px;
flex-wrap: wrap;
max-width: 400px;
z-index: 1;
pointer-events: auto; /* Allow clicks */
}
/* Align reactions based on message direction */
.wk-message-reactions.mine {
right: 0;
left: auto;
justify-content: flex-end; /* Align right for sent messages */
padding-right: 8px;
}
.wk-message-reactions.their {
left: 35px;
right: auto;
justify-content: flex-start; /* Align left for received messages */
padding-left: 8px;
}
/* Individual reaction bubble - smaller, more compact */
.wk-reaction-bubble {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
background: rgba(0, 0, 0, 0.04);
background: var(--semi-color-bg-1, rgba(0, 0, 0, 0.04));
border: 1px solid rgba(0, 0, 0, 0.08);
border: 1px solid var(--semi-color-border, rgba(0, 0, 0, 0.08));
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 12px;
line-height: 1;
min-height: 22px;
max-height: 22px;
}
.wk-reaction-bubble:hover {
background: rgba(0, 0, 0, 0.08);
background: var(--semi-color-fill-1, rgba(0, 0, 0, 0.08));
transform: scale(1.05);
border-color: #3370ff;
border-color: var(--semi-color-primary, #3370ff);
}
.wk-reaction-bubble:active {
transform: scale(0.98);
}
/* Reacted by current user */
.wk-reaction-bubble.reacted {
background: rgba(51, 112, 255, 0.1);
background: var(--semi-color-primary-light-default, rgba(51, 112, 255, 0.1));
border-color: #3370ff;
border-color: var(--semi-color-primary, #3370ff);
color: #3370ff;
color: var(--semi-color-primary, #3370ff);
}
/* Emoji - smaller size */
.wk-reaction-emoji {
font-size: 14px;
line-height: 1;
display: inline-block;
}
/* Count - smaller font */
.wk-reaction-count {
font-size: 11px;
font-weight: 600;
color: #666;
color: var(--semi-color-text-2, #666);
line-height: 1;
min-width: 10px;
text-align: center;
}
.wk-reaction-bubble.reacted .wk-reaction-count {
color: #3370ff;
color: var(--semi-color-primary, #3370ff);
}
/* Dark mode */
body[theme-mode='dark'] .wk-reaction-bubble {
background: rgba(255, 255, 255, 0.08);
background: var(--semi-color-bg-1, rgba(255, 255, 255, 0.08));
border-color: rgba(255, 255, 255, 0.12);
border-color: var(--semi-color-border, rgba(255, 255, 255, 0.12));
}
body[theme-mode='dark'] .wk-reaction-bubble:hover {
background: rgba(255, 255, 255, 0.12);
background: var(--semi-color-fill-1, rgba(255, 255, 255, 0.12));
}
body[theme-mode='dark'] .wk-reaction-bubble.reacted {
background: rgba(51, 112, 255, 0.2);
background: var(--semi-color-primary-light-default, rgba(51, 112, 255, 0.2));
border-color: #3370ff;
border-color: var(--semi-color-primary, #3370ff);
}
body[theme-mode='dark'] .wk-reaction-count {
color: #aaa;
color: var(--semi-color-text-2, #aaa);
}
/* Animation when reaction is added */
@keyframes reactionBounceIn {
0% {
opacity: 0;
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.wk-reaction-bubble {
animation: reactionBounceIn 0.3s ease-out;
}
.wk-mergeforwards {
width: 320px;
border-radius: 12px;
background-color: var(--wk-message-item);
border: 1px solid rgba(15, 23, 42, 0.15);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.wk-mergeforwards:hover {
transform: translateY(-1px);
box-shadow: 0 12px 20px rgba(15, 23, 42, 0.12);
border-color: rgba(15, 23, 42, 0.3);
}
.wk-mergeforwards-content {
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.wk-mergeforwards-content-header {
display: flex;
flex-direction: column;
gap: 6px;
}
.wk-mergeforwards-content-title {
font-size: 16px;
font-weight: 600;
color: rgba(17, 24, 39, 0.92);
line-height: 1.4;
}
.wk-mergeforwards-content-tip {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: rgba(55, 65, 81, 0.68);
}
.wk-mergeforwards-content-tip span:last-child {
display: inline-flex;
align-items: center;
gap: 6px;
}
.wk-mergeforwards-content-line {
height: 1px;
width: 100%;
background-color: rgba(148, 163, 184, 0.35);
}
.wk-mergeforwards-content-items {
display: flex;
flex-direction: column;
gap: 8px;
}
.wk-mergeforwards-content-item {
display: flex;
align-items: baseline;
font-size: 13px;
color: rgba(30, 41, 59, 0.82);
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-mergeforwards-content-item::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgba(55, 65, 81, 0.35);
margin-right: 8px;
}
.wk-mergeforwards-content-footer {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: rgba(55, 65, 81, 0.85);
font-weight: 500;
margin-top: 4px;
}
.wk-mergeforwards-content-footer svg {
fill: currentColor;
}
body[theme-mode=dark] .wk-mergeforwards {
background-color: rgba(17, 24, 39, 0.92);
border-color: rgba(71, 85, 105, 0.55);
box-shadow: 0 10px 24px rgba(2, 6, 23, 0.5);
}
body[theme-mode=dark] .wk-mergeforwards:hover {
border-color: rgba(148, 163, 184, 0.6);
}
body[theme-mode=dark] .wk-mergeforwards-content-title {
color: rgba(226, 232, 240, 0.92);
}
body[theme-mode=dark] .wk-mergeforwards-content-tip {
color: rgba(148, 163, 184, 0.75);
}
body[theme-mode=dark] .wk-mergeforwards-content-item {
color: rgba(226, 232, 240, 0.82);
}
body[theme-mode=dark] .wk-mergeforwards-content-footer {
color: rgba(226, 232, 240, 0.82);
}
/* ==========================================================================
ACCESSIBILITY UTILITIES
========================================================================== */
/* Screen reader only - visually hidden but accessible to assistive technology */
.wk-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Focus visible styles for keyboard navigation */
.wk-conversation-messages:focus-visible,
.wk-message-item:focus-visible {
outline: 2px solid #3b82f6;
outline: 2px solid var(--wk-focus-ring, #3b82f6);
outline-offset: 2px;
}
/* Reduce motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.wk-conversation *,
.wk-conversation *::before,
.wk-conversation *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Empty State Styling */
.wk-conversation-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 48px;
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wk-conversation-empty-icon {
font-size: 4rem;
line-height: 1;
margin-bottom: 24px;
animation: bounce 2s infinite ease-in-out;
opacity: 0.8;
}
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.wk-conversation-empty-title {
font-size: 1.25rem;
font-weight: 600;
color: #1f2937;
color: var(--wk-text-primary, #1f2937);
margin: 0 0 12px 0;
line-height: 1.5;
}
.wk-conversation-empty-description {
font-size: 0.875rem;
color: #6b7280;
color: var(--wk-text-secondary, #6b7280);
margin: 0;
line-height: 1.5;
text-align: center;
max-width: 300px;
}
/* ==========================================================================
CSS Variables
========================================================================== */
:root {
--wk-conversation-footer: 120px;
--wk-height-conversation-replyview: 50px;
}
.wk-conversation {
width: 100%;
height: 100%;
position: relative;
}
.wk-conversation-content {
width: 100%;
height: calc(100% - 120px);
height: calc(100% - var(--wk-conversation-footer));
position: relative;
transition:
height 150ms ease-out,
opacity 150ms ease-out;
}
body[theme-mode='dark'] .wk-conversation-content {
background-color: var(--wk-color-secondary-2);
}
.wk-conversation-hasreply .wk-conversation-content {
height: calc(
100% - 120px -
50px
);
height: calc(
100% - var(--wk-conversation-footer) -
var(--wk-height-conversation-replyview)
);
}
.wk-conversation-messages {
width: 100%;
height: 100%;
overflow-y: auto;
animation: wk-conversation-messages-fade-in 0.25s ease-out;
}
@keyframes wk-conversation-messages-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wk-message-item {
width: 100%;
display: flex;
position: relative;
animation: messageSlideIn 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
/* Message grouping: reduce spacing for grouped messages */
.wk-message-item-grouped-with-previous {
margin-top: 3px !important;
animation: messageSlideInGrouped 0.35s ease-in-out;
}
.wk-message-item-grouped-with-next {
margin-bottom: 3px !important;
}
/* Smooth animation for regular messages */
@keyframes messageSlideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Subtle animation for grouped messages */
@keyframes messageSlideInGrouped {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wk-message-item-last {
margin-bottom: 15px;
}
.wk-conversation-dragover .wk-message-item {
pointer-events: none;
}
/* Loading states */
.wk-conversation-loading {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 200px;
}
.wk-conversation-loading-spinner {
display: flex;
align-items: center;
justify-content: center;
}
/* Pull down loading indicator (top of messages) */
.wk-conversation-pulldown-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 16px;
gap: 8px;
color: #6b7280;
font-size: 14px;
}
.wk-conversation-pulldown-loading .wk-conversation-loading-text {
color: #6b7280;
font-size: 14px;
}
/* Pull up loading indicator (bottom of messages) */
.wk-conversation-pullup-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 16px;
gap: 8px;
color: #6b7280;
font-size: 14px;
}
.wk-conversation-pullup-loading .wk-conversation-loading-text {
color: #6b7280;
font-size: 14px;
}
.wk-conversation-footer {
width: 100%;
height: 120px;
height: var(--wk-conversation-footer);
display: flex;
justify-content: center;
flex-direction: column;
position: absolute;
bottom: 0px;
}
.wk-conversation-footer-content {
width: 100%;
height: 100%;
}
.wk-conversation-chattoolbars {
height: 100%;
margin-bottom: 0px;
display: flex;
align-items: center;
}
.wk-conversation-chattoolbars-item {
cursor: pointer;
}
.wk-conversation-content-fileupload-mask {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
padding: 15px;
}
.wk-conversation-content-fileupload-mask-content {
width: 100%;
height: 100%;
border: 1px dashed #999;
border-radius: 4px;
background-color: rgb(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 500;
padding: 20px;
}
.wk-replyview {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.wk-replyview-content {
flex: 1 1;
min-width: 0; /* Allow text truncation */
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 15px;
color: var(--wk-color-font-tip);
}
.wk-replyview-content-msg {
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-replyview-content-first {
width: 100%;
margin-top: 2px;
}
.wk-replyview-content-second {
margin-top: 2px;
}
.wk-replyview-content-userinfo {
display: flex;
}
.wk-replyview-content-userinfo-name {
display: flex;
align-items: center;
margin-left: 5px;
}
.wk-conversation-topview {
transform: translate3d(0, 100%, 0);
transition: transform var(--wk-layer-transition);
background-color: white;
}
body[theme-mode='dark'] .wk-conversation-topview {
background-color: var(--wk-color-secondary);
}
.wk-conversation-hasreply .wk-conversation-topview {
transform: translate3d(0, 0, 0);
height: 50px;
height: var(--wk-height-conversation-replyview);
box-shadow: 0.3rem -0.2rem 0.8rem 0.05rem rgb(114 114 114 / 5%);
border-left: none;
}
.wk-conversation-hasreply .wk-messageinput-box {
box-shadow: none;
}
.wk-replyview-close {
height: 100%;
padding: 0px 12px;
display: flex;
align-items: center;
justify-content: center;
border-right: var(--wk-line);
cursor: pointer;
flex-shrink: 0;
}
/* Last close button (the X button) - remove border and style differently */
.wk-replyview-close:last-child {
border-right: none;
border-left: var(--wk-line);
padding: 0px 15px;
}
/* Mobile specific: ensure close button is visible */
@media screen and (max-width: 767px) {
.wk-replyview-close {
padding: 0px 10px;
}
.wk-replyview-close:last-child {
padding: 0px 12px;
min-width: 40px;
}
.wk-replyview-content {
margin-left: 8px;
}
}
.wk-conversation-multiplepanel {
height: 120px;
height: var(--wk-conversation-footer);
background-color: var(--wk-color-secondary);
width: 100%;
z-index: 999;
position: absolute;
bottom: 0px;
/* Use display:none by default to completely remove from layout on iOS Safari mobile
This prevents transform from causing viewport calculation issues with virtual keyboard */
display: none;
visibility: hidden;
pointer-events: none;
}
.wk-conversation-multiplepanel-show {
display: block;
transform: translate3d(0, 0, 0);
visibility: visible;
pointer-events: auto;
}
.wk-multiplepanel {
width: 100%;
height: 100%;
}
.wk-multiplepanel-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.wk-multiplepanel-content-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 60px;
cursor: pointer;
}
.wk-multiplepanel-content-item:first-child {
margin-left: 0px;
}
.wk-multiplepanel-content-item-icon {
background-color: var(--wk-color-item);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.wk-multiplepanel-content-item-icon-svg {
width: 24px;
height: 24px;
fill: var(--wk-text-item);
}
.wk-multiplepanel-content-item-title {
color: var(--wk-text-item);
font-size: 14px;
margin-top: 4px;
}
.wk-multiplepanel-close {
position: absolute;
top: 20px;
left: 40px;
padding: 10px;
cursor: pointer;
}
.wk-conversationpositionview {
position: absolute;
bottom: 1rem;
right: 1.5rem;
z-index: 1;
}
.wk-conversationpositionview ul {
margin-bottom: 0px;
}
.wk-conversationpositionview-item {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
box-shadow: 0 1px 2px rgba(114, 114, 114, 0.25098);
color: rgba(112, 117, 121, 0.8);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transform: scale(0.5, 0.5);
transition:
transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.2s ease;
opacity: 0;
}
@media (max-width: 768px) {
.wk-conversationpositionview-item {
width: 32px;
height: 32px;
}
}
.wk-conversationpositionview-item img {
width: 16px;
height: 16px;
}
body[theme-mode='dark'] .wk-conversationpositionview-item {
background-color: var(--wk-color-secondary);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.wk-conversationpositionview-item.wk-reveale {
transform: scale(1, 1);
opacity: 1;
pointer-events: all;
}
.wk-conversationpositionview-item i {
font-size: 1.75rem;
}
.icon-arrow-down::before {
content: '';
}
.wk-conversationpositionview-item .wk-conversation-unread-count {
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.45rem;
border-radius: 0.75rem;
font-size: 0.875rem;
line-height: 1.5rem;
font-weight: 500;
text-align: center;
position: absolute;
top: -0.3rem;
right: -0.3rem;
background: red;
color: #fff;
pointer-events: none;
}
@media (max-width: 768px) {
.wk-conversationpositionview-item .wk-conversation-unread-count {
min-width: 1rem;
height: 1rem;
width: 2rem;
padding: 0;
line-height: normal;
font-size: smaller;
font-weight: bold;
}
.wk-conversationpositionview-item .reminders-count {
width: 1rem;
}
}
.wk-conversationpositionview ul li {
margin-top: 20px;
}
.wk-message-item-reminder {
animation: wk-message-item-reminder-move 2s;
-webkit-animation: wk-message-item-reminder-move 2s;
}
@keyframes wk-message-item-reminder-move {
to {
background-color: var(--wk-color-theme);
}
}
/*Safari 和 Chrome:*/
.wk-message-item-uploadplaceholder .wk-message-base-bubble {
min-width: 220px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
align-items: flex-start;
padding: 12px 16px;
}
.wk-message-item-uploadplaceholder .wk-message-base-bubble .svgAppendix {
display: none;
}
.wk-conversation-uploadbubble-title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 13px;
}
.wk-conversation-uploadbubble-name {
font-weight: 600;
max-width: 65%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wk-conversation-uploadbubble-status {
font-size: 12px;
opacity: 0.85;
}
.wk-conversation-uploadbubble-desc {
margin-top: 6px;
font-size: 13px;
opacity: 0.85;
}
.wk-conversation-uploadbubble-actions {
width: 100%;
margin-top: 10px;
display: flex;
justify-content: flex-end;
}
.wk-conversation-uploadbubble-dismiss,
.wk-conversation-uploadbubble-retry {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 999px;
color: inherit;
font-size: 12px;
padding: 4px 12px;
cursor: pointer;
}
.wk-conversation-uploadbubble-retry {
margin-right: 8px;
background: rgba(82, 196, 26, 0.2);
border-color: rgba(82, 196, 26, 0.6);
color: #52c41a;
}
.wk-conversation-uploadbubble-retry:hover {
background: rgba(82, 196, 26, 0.3);
}
.wk-message-item-uploadplaceholder.is-failed
.wk-message-base-bubble-box.send
.wk-message-base-bubble {
background: rgba(209, 67, 67, 0.12);
color: #d14343;
box-shadow: none;
}
.wk-message-item-uploadplaceholder.is-failed
.wk-conversation-uploadbubble-dismiss {
background: transparent;
border-color: rgba(209, 67, 67, 0.4);
color: #d14343;
}
.wk-message-item-uploadplaceholder.is-failed
.wk-conversation-uploadbubble-retry {
background: rgba(82, 196, 26, 0.15);
border-color: rgba(82, 196, 26, 0.5);
color: #52c41a;
}
body[theme-mode='dark']
.wk-message-item-uploadplaceholder.is-failed
.wk-message-base-bubble-box.send
.wk-message-base-bubble {
background: rgba(209, 67, 67, 0.22);
color: #ffdede;
}
/* ==========================================================================
Mobile Responsive: Safe area handling (BottomNav hidden in chat view)
========================================================================== */
/* @media screen and (max-width: 767px) {
.wk-conversation-content {
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
}
} */
/* ==========================================================================
iOS VIRTUAL KEYBOARD FIX
Ensures proper layout when iOS virtual keyboard opens/closes
Prevents whitespace issues when closing search panel
========================================================================== */
@supports (-webkit-touch-callout: none) {
@media screen and (max-width: 767px) {
.wk-conversation {
height: 100%;
height: 100svh;
height: -webkit-fill-available;
display: flex;
flex-direction: column;
/* Prevent iOS from adding extra space */
overflow: hidden;
}
.wk-conversation-content {
flex: 1 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Force proper height recalculation */
/* height: auto !important; */
}
.wk-conversation-footer {
flex-shrink: 0;
/* Ensure footer stays at bottom even when keyboard closes */
position: sticky;
bottom: 0;
z-index: 100;
background: inherit;
}
}
}
/* Dynamic viewport units for better keyboard handling */
@supports (height: 100dvh) {
@media screen and (max-width: 767px) {
.wk-conversation {
max-height: 100dvh;
/* Force layout recalculation when keyboard opens/closes */
height: 100dvh;
}
/* Fix for whitespace when keyboard closes */
.wk-conversation-footer {
/* Use sticky positioning to prevent floating */
position: sticky;
bottom: 0;
z-index: 100;
}
}
}
/* Additional fix: prevent body scroll on iOS when in chat */
@media screen and (max-width: 767px) {
.wk-conversation {
/* Prevent overscroll bounce that can cause layout issues */
overscroll-behavior: none;
-webkit-overflow-scrolling: touch;
}
.wk-conversation-footer {
/* Force footer to stay at bottom */
margin-top: auto;
/* Prevent transform from causing layout issues */
transform: none !important;
will-change: auto;
}
/* Ensure message input area doesn't get pushed up incorrectly */
.wk-conversation-messages {
min-height: 0;
flex-shrink: 1;
}
}
.mentions {
margin: 1em 0;
}
.mentions--singleLine .mentions__control {
display: inline-block;
width: 130px;
}
.mentions--singleLine .mentions__highlighter {
padding: 1px;
border: 2px inset transparent;
}
.mentions--singleLine .mentions__input {
padding: 1px;
border: 2px inset;
}
.mentions--multiLine .mentions__control {
font-family: monospace;
font-size: 14pt;
}
.mentions--multiLine .mentions__highlighter {
border: 1px solid transparent;
padding: 9px;
min-height: 63px;
}
.mentions--multiLine .mentions__input {
border: 1px solid silver;
padding: 9px;
outline: 0;
}
.mentions__suggestions__list {
background-color: #ffffff;
background-color: var(--wk-surface-primary, #ffffff);
border: 1px solid rgba(0, 0, 0, 0.08);
border: 1px solid var(--wk-border-default, rgba(0, 0, 0, 0.08));
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 8px;
font-size: var(--wk-font-size-sm);
z-index: 10000;
overflow-y: auto;
overflow-x: hidden;
max-height: 320px;
min-width: 240px;
/* Smooth scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
/* Smooth scroll behavior for keyboard navigation */
scroll-behavior: smooth;
}
/* Custom scrollbar for webkit */
.mentions__suggestions__list::-webkit-scrollbar {
width: 6px;
}
.mentions__suggestions__list::-webkit-scrollbar-track {
background: transparent;
border-radius: 10px;
}
.mentions__suggestions__list::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
-webkit-transition: background 0.2s ease;
transition: background 0.2s ease;
}
.mentions__suggestions__list::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
/* Dark mode */
body[theme-mode=dark] .mentions__suggestions__list {
background-color: #1f2937;
background-color: var(--wk-surface-secondary, #1f2937);
border-color: rgba(255, 255, 255, 0.1);
border-color: var(--wk-border-default, rgba(255, 255, 255, 0.1));
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}
body[theme-mode=dark] .mentions__suggestions__list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
}
body[theme-mode=dark] .mentions__suggestions__list::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
.mentions__suggestions__item {
padding: 0;
border: none;
cursor: pointer;
background: transparent;
outline: none;
box-shadow: none;
border-radius: 8px;
transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
margin-bottom: 4px;
/* Ensure item scrolls into view with some padding */
scroll-margin: 8px;
}
.mentions__suggestions__item:last-child {
margin-bottom: 0;
}
.mentions__suggestions__item--focused {
background: rgba(59, 130, 246, 0.08) !important;
background: var(--wk-surface-hover, rgba(59, 130, 246, 0.08)) !important;
color: inherit;
border: none !important;
outline: none !important;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1) !important;
transform: translateX(2px);
}
/* Dark mode */
body[theme-mode=dark] .mentions__suggestions__item--focused {
background: rgba(59, 130, 246, 0.15) !important;
background: var(--wk-surface-hover-dark, rgba(59, 130, 246, 0.15)) !important;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important;
}
.mentions__mention {
position: relative;
z-index: 1;
/* color: var(--wk-color-brand-600); */
text-decoration: none;
font-weight: 500;
pointer-events: none;
}
/* ===== MODERN MESSAGE INPUT DESIGN ===== */
/* Clean, Professional, Intuitive - Inspired by Modern Chat Apps */
.wk-messageinput-box {
background-color: transparent;
width: 100%;
height: 100%;
padding: 8px 16px 0;
position: relative;
border-top: none;
box-shadow: none;
backdrop-filter: none;
transition: all 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}
/* === RICH TEXT MODE ACTIVE === */
.wk-messageinput-box.wk-richtext-active {
max-height: 500px;
overflow: visible;
animation: expandIn 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}
@keyframes expandIn {
from {
max-height: 100px;
opacity: 0.9;
}
to {
max-height: 500px;
opacity: 1;
}
}
.wk-messageinput-inputbox.wk-messageinput-richtext-mode {
max-height: 400px;
overflow-y: auto;
animation: slideUpFade 0.25s ease-out;
}
@keyframes slideUpFade {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* === ACTION ITEM - CLEAN ACTIVE STATE === */
.wk-messageinput-actionitem {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
background: transparent;
color: #6b7280;
color: var(--wk-text-secondary, #6b7280);
border: none;
position: relative;
}
.wk-messageinput-actionitem svg {
width: 18px;
height: 18px;
transition: transform 0.2s ease;
}
.wk-messageinput-actionitem:hover {
background: #f3f4f6;
background: var(--wk-surface-hover, #f3f4f6);
color: #1f2937;
color: var(--wk-text-primary, #1f2937);
transform: scale(1.05);
}
.wk-messageinput-actionitem:hover svg {
transform: scale(1.1);
}
.wk-messageinput-actionitem:active {
transform: scale(0.95);
}
/* Active state - Subtle and clean with pulse effect */
.wk-messageinput-actionitem-active {
background: rgba(59, 130, 246, 0.1) !important;
background: var(--wk-accent-light, rgba(59, 130, 246, 0.1)) !important;
color: var(--wk-color-brand-500) !important;
color: var(--wk-accent, var(--wk-color-brand-500)) !important;
border: 1px solid rgba(59, 130, 246, 0.2) !important;
animation: pulseActive 0.3s ease-out;
}
@keyframes pulseActive {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.wk-messageinput-actionitem-active:hover {
background: rgba(59, 130, 246, 0.15) !important;
background: var(--wk-accent-light, rgba(59, 130, 246, 0.15)) !important;
border-color: rgba(59, 130, 246, 0.3) !important;
}
.wk-messageinput-actionitem-active svg {
fill: currentColor !important;
stroke: currentColor !important;
}
/* Dark mode */
body[theme-mode=dark] .wk-messageinput-actionitem {
color: #9ca3af;
color: var(--wk-text-secondary-dark, #9ca3af);
}
body[theme-mode=dark] .wk-messageinput-actionitem:hover {
background: #2d3139;
background: var(--wk-surface-hover-dark, #2d3139);
color: #f3f4f6;
color: var(--wk-text-primary-dark, #f3f4f6);
}
body[theme-mode=dark] .wk-messageinput-actionitem-active {
background: rgba(59, 130, 246, 0.15) !important;
color: var(--wk-color-brand-400) !important;
color: var(--wk-accent, var(--wk-color-brand-400)) !important;
border-color: rgba(59, 130, 246, 0.3) !important;
}
body[theme-mode=dark] .wk-messageinput-actionitem-active:hover {
background: rgba(59, 130, 246, 0.2) !important;
border-color: rgba(59, 130, 246, 0.4) !important;
}
/* === DRAG AND DROP ENHANCEMENT === */
.wk-messageinput-box.drag-over {
background-color: var(--bg-drag-over);
border-color: var(--accent);
transform: scale(1.01);
transition: all 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}
.wk-messageinput-drag-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(59, 130, 246, 0.08);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 10;
opacity: 0;
animation: fadeIn 0.2s ease forwards;
border: 2px dashed var(--wk-color-brand-500);
border: 2px dashed var(--wk-accent, var(--wk-color-brand-500));
border-radius: 12px;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.98);
}
to {
opacity: 1;
transform: scale(1);
}
}
.wk-messageinput-drag-overlay-text {
font-size: 18px;
font-weight: 500;
color: var(--wk-color-brand-500);
color: var(--wk-accent, var(--wk-color-brand-500));
display: flex;
align-items: center;
gap: 10px;
padding: 20px 30px;
background: #ffffff;
background: var(--wk-surface, #ffffff);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
animation: bounceIn 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}
@keyframes bounceIn {
0% {
transform: scale(0.8);
opacity: 0;
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.wk-messageinput-drag-overlay-icon {
width: 32px;
height: 32px;
animation: float 2s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-8px);
}
}
/* === UPLOAD QUEUE - FILE PREVIEW CARDS === */
.wk-messageinput-upload-queue {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 12px;
background: #f9fafb;
background: var(--wk-surface-secondary, #f9fafb);
border-radius: 12px;
margin-bottom: 12px;
animation: slideDown 0.25s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
max-height: 500px;
transform: translateY(0);
}
}
.wk-messageinput-upload-item {
position: relative;
width: 100px;
height: 100px;
border-radius: 10px;
overflow: hidden;
background: #ffffff;
background: var(--wk-surface, #ffffff);
border: 1px solid #e5e7eb;
border: 1px solid var(--wk-border, #e5e7eb);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
animation: scaleIn 0.25s cubic-bezier(0.2, 0, 0.2, 1);
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
.wk-messageinput-upload-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
border-color: var(--wk-color-brand-500);
border-color: var(--wk-accent, var(--wk-color-brand-500));
}
.wk-messageinput-upload-item img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: transform 0.3s ease;
}
.wk-messageinput-upload-item:hover img {
transform: scale(1.1);
}
.wk-messageinput-upload-remove {
position: absolute;
top: 4px;
right: 4px;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: all 0.2s ease;
color: white;
}
.wk-messageinput-upload-item:hover .wk-messageinput-upload-remove {
opacity: 1;
transform: scale(1);
}
.wk-messageinput-upload-remove:hover {
background: rgba(239, 68, 68, 0.9);
transform: scale(1.15) !important;
}
.wk-messageinput-upload-remove:active {
transform: scale(0.9) !important;
}
.wk-messageinput-upload-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(59, 130, 246, 0.2);
overflow: hidden;
}
.wk-messageinput-upload-progress-bar {
height: 100%;
background: var(--wk-color-brand-500);
background: var(--wk-accent, var(--wk-color-brand-500));
transition: width 0.3s ease;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% {
background-position: -200% center;
}
100% {
background-position: 200% center;
}
}
/* === SEND BUTTON - MODERN WITH ANIMATION === */
.wk-messageinput-send-button {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--wk-color-brand-500);
background: var(--wk-accent, var(--wk-color-brand-500));
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
position: relative;
overflow: hidden;
}
.wk-messageinput-send-button:hover {
background: #2563eb;
background: var(--wk-accent-dark, #2563eb);
transform: scale(1.08) rotate(-5deg);
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
}
.wk-messageinput-send-button:active {
transform: scale(0.95) rotate(0deg);
}
.wk-messageinput-send-button svg {
width: 18px;
height: 18px;
color: white;
transition: transform 0.2s ease;
}
.wk-messageinput-send-button:hover svg {
transform: translateX(2px);
}
/* Ripple effect on click */
.wk-messageinput-send-button::after {
content: '';
position: absolute;
inset: 0;
background: white;
border-radius: 50%;
opacity: 0;
transform: scale(0);
transition: all 0.5s ease;
}
.wk-messageinput-send-button:active::after {
opacity: 0.3;
transform: scale(1.5);
transition: all 0s;
}
/* Disabled state */
.wk-messageinput-send-button:disabled {
background: #d1d5db;
background: var(--wk-surface-disabled, #d1d5db);
box-shadow: none;
cursor: not-allowed;
opacity: 0.5;
}
.wk-messageinput-send-button:disabled:hover {
transform: none;
}
/* === VOICE RECORDING - MODERN ANIMATED === */
.wk-messageinput-voice-recording {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
background: #f9fafb;
background: var(--wk-surface-secondary, #f9fafb);
border-radius: 12px;
animation: slideInRight 0.25s ease-out;
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.wk-messageinput-voice-wave {
display: flex;
align-items: center;
gap: 3px;
height: 24px;
}
.wk-messageinput-voice-wave-bar {
width: 3px;
background: var(--wk-color-brand-500);
background: var(--wk-accent, var(--wk-color-brand-500));
border-radius: 2px;
animation: waveAnimation 1s ease-in-out infinite;
}
.wk-messageinput-voice-wave-bar:nth-child(1) {
height: 12px;
animation-delay: 0s;
}
.wk-messageinput-voice-wave-bar:nth-child(2) {
height: 18px;
animation-delay: 0.1s;
}
.wk-messageinput-voice-wave-bar:nth-child(3) {
height: 24px;
animation-delay: 0.2s;
}
.wk-messageinput-voice-wave-bar:nth-child(4) {
height: 18px;
animation-delay: 0.3s;
}
.wk-messageinput-voice-wave-bar:nth-child(5) {
height: 12px;
animation-delay: 0.4s;
}
@keyframes waveAnimation {
0%,
100% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.5);
}
}
.wk-messageinput-voice-time {
font-size: 14px;
font-weight: 600;
color: #1f2937;
color: var(--wk-text-primary, #1f2937);
min-width: 50px;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
.wk-messageinput-voice-cancel {
padding: 6px 12px;
border-radius: 8px;
background: #f3f4f6;
background: var(--wk-surface-hover, #f3f4f6);
color: #6b7280;
color: var(--wk-text-secondary, #6b7280);
font-size: 13px;
cursor: pointer;
transition: all 0.2s ease;
}
.wk-messageinput-voice-cancel:hover {
background: rgba(239, 68, 68, 0.1);
background: var(--wk-danger-light, rgba(239, 68, 68, 0.1));
color: #ef4444;
color: var(--wk-danger, #ef4444);
transform: translateX(-2px);
}
/* === EMOJI PICKER ANIMATION === */
.wk-emoji-picker-overlay {
animation: fadeIn 0.2s ease;
}
.wk-emoji-picker-container {
animation: slideUpScale 0.25s cubic-bezier(0.2, 0, 0.2, 1);
transform-origin: bottom left;
}
@keyframes slideUpScale {
from {
opacity: 0;
transform: translateY(10px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* === TYPING INDICATOR === */
.wk-messageinput-typing-indicator {
padding: 8px 12px;
font-size: 13px;
color: #6b7280;
color: var(--wk-text-secondary, #6b7280);
font-style: italic;
animation: fadeIn 0.2s ease;
}
/* === QUICK REPLIES - ENHANCED === */
.wk-messageinput-quick-replies {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px;
background: #f9fafb;
background: var(--wk-surface-secondary, #f9fafb);
border-radius: 12px;
margin-bottom: 12px;
animation: slideDown 0.25s ease-out;
}
.wk-messageinput-quick-reply-chip {
padding: 8px 16px;
border-radius: 20px;
background: #ffffff;
background: var(--wk-surface, #ffffff);
border: 1px solid #e5e7eb;
border: 1px solid var(--wk-border, #e5e7eb);
color: #1f2937;
color: var(--wk-text-primary, #1f2937);
font-size: 14px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
white-space: nowrap;
}
.wk-messageinput-quick-reply-chip:hover {
background: rgba(59, 130, 246, 0.1);
background: var(--wk-accent-light, rgba(59, 130, 246, 0.1));
border-color: var(--wk-color-brand-500);
border-color: var(--wk-accent, var(--wk-color-brand-500));
color: var(--wk-color-brand-500);
color: var(--wk-accent, var(--wk-color-brand-500));
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.wk-messageinput-quick-reply-chip:active {
transform: scale(0.95);
}
/* === DRAG AND DROP HELPERS === */
.wk-drag-content {
text-align: center;
color: var(--accent);
}
.wk-drag-icon {
font-size: 48px;
margin-bottom: 8px;
animation: float 2s ease-in-out infinite;
}
.wk-drag-text {
font-size: 16px;
font-weight: 600;
}
/* === REPLY PREVIEW - ENHANCED === */
.wk-messageinput-reply-preview {
display: flex;
align-items: center;
padding: 12px 16px;
background: #f9fafb;
background: var(--wk-surface-secondary, #f9fafb);
border-left: 4px solid var(--wk-color-brand-500);
border-left: 4px solid var(--wk-accent, var(--wk-color-brand-500));
margin-bottom: 12px;
border-radius: 10px;
gap: 12px;
animation: slideDown 0.25s ease-out;
position: relative;
overflow: hidden;
}
.wk-messageinput-reply-preview::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--wk-color-brand-500);
background: var(--wk-accent, var(--wk-color-brand-500));
animation: shimmerVertical 2s ease-in-out infinite;
}
@keyframes shimmerVertical {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.wk-reply-indicator {
width: 3px;
height: 32px;
background: var(--wk-color-brand-500);
background: var(--wk-accent, var(--wk-color-brand-500));
border-radius: 2px;
flex-shrink: 0;
}
.wk-reply-content {
flex: 1 1;
min-width: 0;
}
.wk-reply-author {
font-size: 12px;
font-weight: 600;
color: var(--wk-color-brand-500);
color: var(--wk-accent, var(--wk-color-brand-500));
margin-bottom: 2px;
}
.wk-reply-message {
font-size: 14px;
color: #6b7280;
color: var(--wk-text-secondary, #6b7280);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wk-reply-close {
width: 24px;
height: 24px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #6b7280;
color: var(--wk-text-secondary, #6b7280);
transition: all 0.2s ease;
flex-shrink: 0;
}
.wk-reply-close:hover {
background: #f3f4f6;
background: var(--wk-surface-hover, #f3f4f6);
color: #1f2937;
color: var(--wk-text-primary, #1f2937);
transform: rotate(90deg);
}
/* === INPUT BOX - MODERN TEXTAREA === */
.wk-messageinput-inputbox {
min-height: 44px;
max-height: 200px;
padding: 12px 16px;
border: 1px solid #e5e7eb;
border: 1px solid var(--wk-border, #e5e7eb);
border-radius: 12px;
background: #ffffff;
background: var(--wk-surface, #ffffff);
font-size: 15px;
line-height: 1.5;
color: #1f2937;
color: var(--wk-text-primary, #1f2937);
resize: none;
overflow-y: auto;
transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.wk-messageinput-inputbox:focus {
outline: none;
border-color: var(--wk-color-brand-500);
border-color: var(--wk-accent, var(--wk-color-brand-500));
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
background: #ffffff;
background: var(--wk-surface, #ffffff);
}
.wk-messageinput-inputbox::-moz-placeholder {
color: #9ca3af;
color: var(--wk-text-placeholder, #9ca3af);
}
.wk-messageinput-inputbox::placeholder {
color: #9ca3af;
color: var(--wk-text-placeholder, #9ca3af);
}
.wk-messageinput-inputbox::-webkit-scrollbar {
width: 6px;
}
.wk-messageinput-inputbox::-webkit-scrollbar-thumb {
background: #e5e7eb;
background: var(--wk-border, #e5e7eb);
border-radius: 3px;
}
.wk-messageinput-inputbox::-webkit-scrollbar-thumb:hover {
background: #6b7280;
background: var(--wk-text-secondary, #6b7280);
}
/* Dark mode */
body[theme-mode=dark] .wk-messageinput-inputbox {
background: #1f2937;
background: var(--wk-surface-dark, #1f2937);
border-color: #374151;
border-color: var(--wk-border-dark, #374151);
color: #f3f4f6;
color: var(--wk-text-primary-dark, #f3f4f6);
}
body[theme-mode=dark] .wk-messageinput-inputbox:focus {
border-color: var(--wk-color-brand-400);
border-color: var(--wk-accent, var(--wk-color-brand-400));
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}
/* === RICH TEXT EDITOR STYLING === */
.wk-messageinput-richtext {
border: 1px solid #e5e7eb;
border: 1px solid var(--wk-border, #e5e7eb);
border-radius: 12px;
background: #ffffff;
background: var(--wk-surface, #ffffff);
overflow: hidden;
transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}
.wk-messageinput-richtext:focus-within {
border-color: var(--wk-color-brand-500);
border-color: var(--wk-accent, var(--wk-color-brand-500));
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.wk-messageinput-richtext .ql-toolbar {
border: none;
border-bottom: 1px solid #e5e7eb;
border-bottom: 1px solid var(--wk-border, #e5e7eb);
background: #f9fafb;
background: var(--wk-surface-secondary, #f9fafb);
padding: 10px;
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.wk-messageinput-richtext .ql-toolbar button {
width: 32px;
height: 32px;
border-radius: 8px;
transition: all 0.2s ease;
}
.wk-messageinput-richtext .ql-toolbar button:hover {
background: #f3f4f6;
background: var(--wk-surface-hover, #f3f4f6);
}
.wk-messageinput-richtext .ql-toolbar button.ql-active {
background: rgba(59, 130, 246, 0.1);
background: var(--wk-accent-light, rgba(59, 130, 246, 0.1));
color: var(--wk-color-brand-500);
color: var(--wk-accent, var(--wk-color-brand-500));
}
.wk-messageinput-richtext .ql-editor {
min-height: 100px;
max-height: 300px;
padding: 16px;
font-size: 15px;
line-height: 1.5;
}
.wk-messageinput-richtext .ql-editor.ql-blank::before {
color: #9ca3af;
color: var(--wk-text-placeholder, #9ca3af);
font-style: normal;
}
/* === UPLOAD QUEUE === */
.wk-messageinput-upload-queue {
display: flex;
gap: 8px;
padding: 8px 0;
margin-bottom: 8px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.wk-messageinput-upload-queue::-webkit-scrollbar {
display: none;
}
.wk-upload-item {
position: relative;
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
background: var(--bg-muted);
border: 1px solid var(--border);
}
.wk-upload-preview {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.wk-upload-image {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.wk-upload-file {
text-align: center;
padding: 8px;
}
.wk-file-icon {
font-size: 24px;
margin-bottom: 4px;
}
.wk-file-name {
font-size: 10px;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wk-upload-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: var(--bg-muted);
}
.wk-progress-bar {
height: 100%;
background: var(--accent);
transition: width 0.3s ease;
}
.wk-upload-error {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--status-error);
color: white;
font-size: 10px;
text-align: center;
padding: 2px;
}
.wk-upload-remove {
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
min-width: 20px;
background: rgba(0, 0, 0, 0.6);
color: white;
border-radius: 50%;
font-size: 10px;
}
/* === VOICE RECORDING === */
.wk-messageinput-recording {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--status-error);
color: white;
border-radius: 20px;
margin-bottom: 8px;
animation: pulse 1s infinite;
}
.wk-recording-dot {
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
animation: blink 1s infinite;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
body[theme-mode=dark] .wk-messageinput-box {
background-color: var(--wk-surface-primary);
border-top-color: var(--wk-border-dark);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
}
/* === MAIN INPUT CONTAINER === */
.wk-messageinput-bar {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
margin-bottom: 4px;
}
/* === TOOLBAR === */
.wk-messageinput-toolbar {
display: flex;
align-items: center;
gap: 2px;
}
.wk-messageinput-actionbox {
display: flex;
align-items: center;
gap: 2px;
}
/* === INPUT FIELD CONTAINER - MODERN & CLEAN === */
.wk-messageinput-inputbox {
flex: 1 1;
min-height: 70px;
/* max-height: 160px; */
background: #f3f4f6;
background: var(--wk-surface-secondary, #f3f4f6);
border: 1px solid transparent;
border-radius: 10px;
padding: 8px;
position: relative;
transition: all 0.2s ease;
box-shadow: none;
overflow: hidden;
}
.wk-messageinput-inputbox::before {
display: none;
}
.wk-messageinput-inputbox:focus-within {
background: #ffffff;
background: var(--wk-surface-primary, #ffffff);
border-color: var(--wk-color-brand-500);
border-color: var(--wk-accent, var(--wk-color-brand-500));
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}
body[theme-mode=dark] .wk-messageinput-inputbox {
background: #2d3139;
background: var(--wk-surface-secondary-dark, #2d3139);
border-color: transparent;
}
body[theme-mode=dark] .wk-messageinput-inputbox:focus-within {
background: #1a1d21;
background: var(--wk-surface-primary-dark, #1a1d21);
border-color: var(--wk-color-brand-500);
border-color: var(--wk-accent, var(--wk-color-brand-500));
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
/* === INPUT TEXT FIELD === */
.wk-messageinput-input {
width: 100%;
min-height: 53px;
border: none;
background: transparent;
color: #1f2937;
color: var(--wk-text-primary, #1f2937);
font-size: 14px;
line-height: 1.5;
resize: none;
outline: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
font-weight: 400;
}
.wk-messageinput-input::-moz-placeholder {
color: var(--wk-text-placeholder);
font-weight: var(--wk-font-weight-normal);
opacity: 0.8;
}
.wk-messageinput-input::placeholder {
color: var(--wk-text-placeholder);
font-weight: var(--wk-font-weight-normal);
opacity: 0.8;
}
body[theme-mode=dark] .wk-messageinput-input {
color: var(--wk-text-primary);
caret-color: var(--wk-color-brand-400);
}
.wk-messageinput-input textarea {
outline: none;
border: none;
background: transparent;
resize: none;
font-family: inherit;
}
.wk-messageinput-input:empty:before {
content: attr(data-placeholder);
color: var(--wk-text-placeholder);
opacity: 0.8;
}
/* === TOOLBAR SECTION === */
.wk-messageinput-toolbar {
display: flex;
align-items: center;
gap: var(--wk-space-2);
}
.wk-messageinput-actionbox {
display: flex;
align-items: center;
gap: var(--wk-space-1);
}
/* === ACTION BUTTONS === */
.wk-messageinput-actionitem {
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--wk-radius-full);
color: var(--wk-text-muted);
cursor: pointer;
transition: all var(--wk-duration-fast) cubic-bezier(0.4, 0, 0.2, 1);
border: none;
background: transparent;
position: relative;
overflow: hidden;
}
.wk-messageinput-actionitem::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--wk-color-neutral-100);
opacity: 0;
transform: scale(0);
transition: all var(--wk-duration-fast) ease;
}
.wk-messageinput-actionitem:hover::before {
opacity: 1;
transform: scale(1);
}
.wk-messageinput-actionitem:hover {
color: var(--wk-text-primary);
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.wk-messageinput-actionitem:active {
transform: translateY(0) scale(0.95);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* === SEND BUTTON SPECIAL STYLING === */
.wk-messageinput-actionitem.send-button,
.wk-messageinput-sendbtn,
.wk-messageinput-hasValue {
background-color: var(--wk-color-brand-500);
color: white;
box-shadow: 0 2px 8px rgba(30, 150, 213, 0.25);
border: none;
transition: all var(--wk-duration-fast) ease;
}
/* Remove gradient from pseudo-element */
.wk-messageinput-actionitem.send-button::before,
.wk-messageinput-sendbtn::before,
.wk-messageinput-hasValue::before {
display: none;
}
.wk-messageinput-actionitem.send-button:hover,
.wk-messageinput-sendbtn:hover,
.wk-messageinput-hasValue:hover {
background-color: var(--wk-color-brand-600);
transform: translateY(-2px) scale(1.05);
box-shadow: 0 4px 12px rgba(30, 150, 213, 0.35);
}
.wk-messageinput-actionitem.send-button:active,
.wk-messageinput-sendbtn:active,
.wk-messageinput-hasValue:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 2px 8px rgba(30, 150, 213, 0.3);
}
body[theme-mode=dark] .wk-messageinput-actionitem:hover {
background-color: var(--wk-color-neutral-700);
}
body[theme-mode=dark] .wk-messageinput-actionitem::before {
background: rgba(255, 255, 255, 0.1);
}
/* === SEND BUTTON LEGACY STYLES === */
.wk-messageinput-sendbtn {
width: 32px;
height: 32px;
border-radius: var(--wk-radius-full);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border: none;
position: relative;
overflow: hidden;
}
.wk-messageinput-sendbtn svg {
width: 16px;
height: 16px;
}
/* === MEMBER SUGGESTIONS === */
.wk-messageinput-member {
display: flex;
align-items: center;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
padding: 10px 12px;
margin: 0;
border-radius: 8px;
gap: 10px;
}
.wk-messageinput-member:hover {
background-color: rgba(59, 130, 246, 0.08);
transform: translateX(2px);
}
.wk-messageinput-suggestion-text {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1;
gap: 2px;
}
.wk-messageinput-suggestion-primary {
font-weight: 600;
font-size: 14px;
color: #1f2937;
color: var(--wk-color-text-primary, #1f2937);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wk-messageinput-suggestion-secondary {
font-size: 12px;
color: #6b7280;
color: var(--wk-color-text-tertiary, #6b7280);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wk-messageinput-iconbox {
flex-shrink: 0;
}
.wk-messageinput-icon {
width: 32px;
height: 32px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
border: 2px solid transparent;
transition: border-color 0.2s ease;
}
.wk-messageinput-member:hover .wk-messageinput-icon {
border-color: rgba(59, 130, 246, 0.3);
}
.wk-messageinput-selected {
background-color: rgba(59, 130, 246, 0.12) !important;
color: #1f2937;
color: var(--wk-color-text-primary, #1f2937);
}
.wk-messageinput-selected .wk-messageinput-icon {
border-color: var(--wk-color-brand-500);
border-color: var(--wk-accent, var(--wk-color-brand-500));
}
.wk-messageinput-selected .wk-messageinput-suggestion-primary {
color: var(--wk-color-brand-500);
color: var(--wk-accent, var(--wk-color-brand-500));
}
.wk-messageinput-selected .wk-messageinput-suggestion-secondary {
color: #2563eb;
color: var(--wk-accent-dark, #2563eb);
}
/* Dark mode */
body[theme-mode=dark] .wk-messageinput-member:hover {
background-color: rgba(59, 130, 246, 0.15);
}
body[theme-mode=dark] .wk-messageinput-suggestion-primary {
color: #f3f4f6;
color: var(--wk-text-primary-dark, #f3f4f6);
}
body[theme-mode=dark] .wk-messageinput-suggestion-secondary {
color: #9ca3af;
color: var(--wk-text-secondary-dark, #9ca3af);
}
body[theme-mode=dark] .wk-messageinput-selected {
background-color: rgba(59, 130, 246, 0.2) !important;
}
body[theme-mode=dark] .wk-messageinput-selected .wk-messageinput-suggestion-primary {
color: var(--wk-color-brand-400);
color: var(--wk-accent-light, var(--wk-color-brand-400));
}
body[theme-mode=dark] .wk-messageinput-selected .wk-messageinput-suggestion-secondary {
color: var(--wk-color-brand-400);
color: var(--wk-accent-light, var(--wk-color-brand-400));
}
/* === QUICK REPLY PANEL === */
.quickReplyPanel {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: var(--wk-surface-primary);
border: 1px solid var(--wk-border-default);
border-radius: var(--wk-radius-xl) var(--wk-radius-xl) 0 0;
box-shadow:
0 -8px 32px rgba(0, 0, 0, 0.08),
0 -4px 16px rgba(0, 0, 0, 0.04);
max-height: 320px;
overflow-y: auto;
z-index: 1000;
backdrop-filter: blur(20px);
animation: slideUpFade 0.3s var(--wk-ease-out);
}
@keyframes slideUpFade {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.quickReplyPanel ul {
margin: 0;
padding: var(--wk-space-2);
list-style: none;
}
.quickReplyPanel ul li {
padding: var(--wk-space-3) var(--wk-space-4);
border-bottom: 1px solid var(--wk-border-subtle);
cursor: pointer;
transition: all var(--wk-duration-fast) var(--wk-ease-out);
border-radius: var(--wk-radius-lg);
margin-bottom: var(--wk-space-1);
}
.quickReplyItem:hover {
background-color: var(--wk-color-neutral-50);
transform: translateX(4px);
}
.quickReplySelect {
background-color: var(--wk-color-brand-50) !important;
color: var(--wk-color-brand-700) !important;
box-shadow: 0 2px 8px rgba(30, 150, 213, 0.2);
border-left: 3px solid var(--wk-color-brand-500);
}
/* === REPLY VIEW === */
.wk-messageinput-reply {
display: flex;
align-items: center;
padding: var(--wk-space-3) var(--wk-space-4);
background-color: var(--wk-color-neutral-50);
border-left: 4px solid var(--wk-color-brand-500);
margin-bottom: var(--wk-space-3);
border-radius: 0 var(--wk-radius-lg) var(--wk-radius-lg) 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
animation: slideInLeft 0.3s var(--wk-ease-out);
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.wk-messageinput-closeicon {
margin-left: var(--wk-space-3);
cursor: pointer;
color: var(--wk-text-muted);
padding: var(--wk-space-2);
border-radius: var(--wk-radius-lg);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.wk-messageinput-closeicon:hover {
background-color: var(--wk-color-neutral-100);
color: var(--wk-text-primary);
transform: scale(1.1);
}
.wk-messageinput-replycontent {
flex: 1 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--wk-text-secondary);
font-size: var(--wk-font-size-sm);
font-weight: var(--wk-font-weight-medium);
}
/* === MENTIONS INPUT STYLING === */
.wk-messageinput-input__control {
height: 53px !important;
background: transparent;
border: none;
border-radius: var(--wk-radius-xl);
}
.wk-messageinput-input__suggestions {
background-color: var(--wk-surface-primary);
border: 1px solid var(--wk-border-default);
border-radius: var(--wk-radius-xl);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.12),
0 4px 16px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(20px);
overflow-x: hidden;
overflow-y: auto;
height: 300px;
bottom: 0;
}
body[theme-mode=dark] .wk-messageinput-input__control {
background: transparent;
border: none;
}
body[theme-mode=dark] .wk-messageinput-input__input {
color: var(--wk-text-primary);
caret-color: var(--wk-color-brand-500);
}
body[theme-mode=dark] .wk-messageinput-input__suggestions {
background-color: var(--wk-surface-secondary);
border-color: var(--wk-border-default);
}
/* === TOP VIEW STYLING === */
.wk-messageinput-box-top {
margin-bottom: var(--wk-space-3);
animation: slideDown 0.3s var(--wk-ease-out);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
.wk-messageinput-box {
padding: var(--wk-space-3) var(--wk-space-4);
}
.wk-messageinput-inputbox {
min-height: 44px;
border-radius: 22px;
padding: var(--wk-space-2) var(--wk-space-3);
}
.wk-messageinput-actionitem,
.wk-messageinput-sendbtn {
width: 44px;
height: 44px;
}
.wk-messageinput-bar {
gap: var(--wk-space-2);
}
}
/* === ACCESSIBILITY === */
.wk-messageinput-actionitem:focus,
.wk-messageinput-sendbtn:focus {
outline: 2px solid var(--wk-color-brand-500);
outline-offset: 2px;
}
.wk-messageinput-inputbox:focus-within {
outline: none;
}
/* === LOADING STATE === */
.wk-messageinput-loading {
opacity: 0.7;
pointer-events: none;
}
.wk-messageinput-loading .wk-messageinput-actionitem {
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 0.7;
}
50% {
opacity: 1;
}
}
/* === DRAG AND DROP === */
.wk-messageinput-dragover {
border-color: var(--wk-color-brand-500);
background-color: rgba(30, 150, 213, 0.08);
box-shadow:
0 0 0 4px rgba(30, 150, 213, 0.15),
0 8px 32px rgba(30, 150, 213, 0.2);
}
/* === GLASSMORPHISM EFFECTS === */
@supports (backdrop-filter: blur(10px)) {
.wk-messageinput-box {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(15px) saturate(180%);
}
body[theme-mode=dark] .wk-messageinput-box {
background: rgba(20, 20, 20, 0.9);
backdrop-filter: blur(15px) saturate(180%);
}
}
/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
.wk-messageinput-inputbox {
border-width: 3px;
}
.wk-messageinput-actionitem {
border: 2px solid transparent;
}
.wk-messageinput-actionitem:focus,
.wk-messageinput-actionitem:hover {
border-color: var(--wk-color-brand-500);
}
}
/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
.wk-messageinput-inputbox,
.wk-messageinput-actionitem,
.wk-messageinput-member,
.quickReplyPanel ul li {
transition: none;
animation: none;
}
}
.wk-messageinput-input::-moz-placeholder {
color: var(--wk-text-placeholder);
font-weight: var(--wk-font-weight-normal);
}
.wk-messageinput-input::placeholder {
color: var(--wk-text-placeholder);
font-weight: var(--wk-font-weight-normal);
}
body[theme-mode=dark] .wk-messageinput-input {
color: var(--wk-text-primary);
caret-color: var(--wk-color-brand-400);
}
/* .wk-messageinput-input textarea {
outline: none;
border: none;
background: transparent;
resize: none;
} */
.wk-messageinput-input:empty:before {
content: attr(data-placeholder);
color: var(--wk-text-placeholder);
}
.wk-messageinput-bar {
display: flex;
align-items: flex-end;
gap: var(--wk-space-2);
}
.wk-messageinput-toolbar {
display: flex;
align-items: center;
gap: var(--wk-space-1);
}
.wk-messageinput-actionbox {
display: flex;
align-items: center;
gap: var(--wk-space-1);
}
.wk-messageinput-actionitem {
width: 26px;
height: 26px;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--wk-radius-full);
color: var(--wk-text-muted);
cursor: pointer;
transition: all var(--wk-duration-fast) var(--wk-ease-out);
border: none;
background: transparent;
}
.wk-messageinput-actionitem:hover {
background-color: var(--wk-color-neutral-100);
color: var(--wk-text-primary);
transform: scale(1.05);
}
.wk-messageinput-actionitem:active {
transform: scale(0.95);
background-color: var(--wk-color-neutral-200);
}
/* Send button styling */
.wk-messageinput-actionitem.send-button {
background: var(--wk-color-brand-500);
color: white;
box-shadow: 0 2px 8px rgba(30, 150, 213, 0.3);
}
.wk-messageinput-actionitem.send-button:hover {
background: var(--wk-color-brand-600);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(30, 150, 213, 0.4);
}
.wk-messageinput-actionitem.send-button:active {
transform: scale(0.95);
}
body[theme-mode=dark] .wk-messageinput-actionitem:hover {
background-color: var(--wk-color-neutral-700);
}
.wk-messageinput-actionitem:hover {
background-color: var(--wk-color-neutral-100);
color: var(--wk-text-primary);
}
.wk-messageinput-sendbtn {
width: 40px;
height: 40px;
border-radius: var(--wk-radius-full);
background-color: var(--wk-color-brand-500);
color: var(--wk-text-inverse);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all var(--wk-duration-fast) var(--wk-ease-out);
border: none;
}
.wk-messageinput-sendbtn:hover {
background-color: var(--wk-color-brand-600);
transform: scale(1.05);
}
.wk-messageinput-hasValue {
background-color: var(--wk-color-brand-500);
}
.wk-messageinput-hasValue:hover {
background-color: var(--wk-color-brand-600);
}
.wk-messageinput-member {
display: flex;
align-items: center;
padding: var(--wk-space-3) var(--wk-space-4);
cursor: pointer;
transition: background-color var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-messageinput-member:hover {
background-color: var(--wk-color-neutral-50);
}
.wk-messageinput-iconbox {
margin-right: var(--wk-space-2);
flex-shrink: 0;
}
.wk-messageinput-icon {
width: 32px;
height: 32px;
border-radius: var(--wk-radius-full);
-o-object-fit: cover;
object-fit: cover;
}
.wk-messageinput-selected {
background-color: var(--wk-color-brand-50);
color: var(--wk-color-brand-700);
}
.quickReplyPanel {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: var(--wk-surface-primary);
border: 1px solid var(--wk-border-default);
border-radius: var(--wk-radius-lg) var(--wk-radius-lg) 0 0;
box-shadow: var(--wk-shadow-lg);
max-height: 320px;
overflow-y: auto;
z-index: 1000;
}
.quickReplyPanel ul {
margin: 0;
padding: 0;
list-style: none;
}
.quickReplyPanel ul li {
padding: var(--wk-space-3) var(--wk-space-4);
border-bottom: 1px solid var(--wk-border-subtle);
cursor: pointer;
transition: background-color var(--wk-duration-fast) var(--wk-ease-out);
}
.quickReplyItem:hover {
background-color: var(--wk-color-neutral-50);
}
.quickReplySelect {
background-color: var(--wk-color-brand-50) !important;
color: var(--wk-color-brand-700) !important;
}
.wk-messageinput-reply {
display: flex;
align-items: center;
padding: var(--wk-space-2) var(--wk-space-3);
background-color: var(--wk-color-neutral-50);
border-left: 3px solid var(--wk-color-brand-500);
margin-bottom: var(--wk-space-3);
border-radius: 0 var(--wk-radius-sm) var(--wk-radius-sm) 0;
}
.wk-messageinput-closeicon {
margin-left: var(--wk-space-2);
cursor: pointer;
color: var(--wk-text-muted);
padding: var(--wk-space-1);
border-radius: var(--wk-radius-sm);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-messageinput-closeicon:hover {
background-color: var(--wk-color-neutral-100);
color: var(--wk-text-primary);
}
.wk-messageinput-replycontent {
flex: 1 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--wk-text-secondary);
font-size: var(--wk-font-size-sm);
}
.wk-messageinput-input__control {
background-color: var(--wk-surface-secondary);
border-radius: var(--wk-radius-lg);
border: 1px solid var(--wk-border-default);
}
.wk-messageinput-input__suggestions {
background-color: var(--wk-surface-primary);
border: 1px solid var(--wk-border-default);
border-radius: var(--wk-radius-lg);
box-shadow: var(--wk-shadow-lg);
}
body[theme-mode=dark] .wk-messageinput-input__control {
background-color: var(--wk-surface-secondary);
border-color: var(--wk-border-default);
}
body[theme-mode=dark] .wk-messageinput-input__input {
color: var(--wk-text-primary);
caret-color: var(--wk-color-brand-500);
}
/* ===== RICH TEXT EDITOR INTEGRATION ===== */
.wk-messageinput-richtext {
width: 100%;
border: none;
border-radius: 12px;
overflow: hidden;
transition: all 0.2s ease;
background: #f3f4f6;
background: var(--wk-surface-secondary, #f3f4f6);
}
.wk-messageinput-richtext:focus-within {
background: #ffffff;
background: var(--wk-surface-primary, #ffffff);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}
.wk-messageinput-richtext .wk-rich-text-editor {
border: none;
border-radius: 12px;
background: transparent;
}
.wk-messageinput-richtext .ql-toolbar {
background: transparent;
border: none;
border-bottom: 1px solid #e5e7eb;
border-bottom: 1px solid var(--wk-border-light, #e5e7eb);
padding: 8px 12px;
}
.wk-messageinput-richtext .ql-container {
min-height: 60px;
max-height: 200px;
overflow-y: auto;
border: none;
}
.wk-messageinput-richtext .ql-editor {
padding: 12px 16px;
font-size: 14px;
line-height: 1.6;
color: #1f2937;
color: var(--wk-text-primary, #1f2937);
}
.wk-messageinput-richtext .ql-editor.ql-blank::before {
color: #9ca3af;
color: var(--wk-text-tertiary, #9ca3af);
font-style: normal;
}
/* Dark mode for Rich Text Editor in Message Input */
body[theme-mode=dark] .wk-messageinput-richtext {
background: #2d3139;
background: var(--wk-surface-secondary-dark, #2d3139);
}
body[theme-mode=dark] .wk-messageinput-richtext:focus-within {
background: #1a1d21;
background: var(--wk-surface-primary-dark, #1a1d21);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
body[theme-mode=dark] .wk-messageinput-richtext .ql-toolbar {
border-bottom-color: #374151;
border-bottom-color: var(--wk-border-dark, #374151);
}
body[theme-mode=dark] .wk-messageinput-richtext .ql-editor {
color: #f3f4f6;
color: var(--wk-text-primary-dark, #f3f4f6);
}
body[theme-mode=dark] .wk-messageinput-richtext .ql-editor.ql-blank::before {
color: #6b7280;
color: var(--wk-text-tertiary-dark, #6b7280);
}
/* Toolbar buttons in richtext mode */
.wk-messageinput-richtext .ql-toolbar button {
width: 28px !important;
height: 28px !important;
padding: 4px !important;
border-radius: 6px;
transition: all 0.15s ease;
}
.wk-messageinput-richtext .ql-toolbar button:hover {
background: #e5e7eb;
background: var(--wk-surface-hover, #e5e7eb);
}
.wk-messageinput-richtext .ql-toolbar button.ql-active {
background: #eff6ff;
background: var(--wk-accent-light, #eff6ff);
}
.wk-messageinput-richtext .ql-toolbar button.ql-active .ql-stroke {
stroke: var(--wk-color-brand-500) !important;
stroke: var(--wk-accent, var(--wk-color-brand-500)) !important;
}
.wk-messageinput-richtext .ql-toolbar button.ql-active .ql-fill {
fill: var(--wk-color-brand-500) !important;
fill: var(--wk-accent, var(--wk-color-brand-500)) !important;
}
body[theme-mode=dark] .wk-messageinput-richtext .ql-toolbar button:hover {
background: #374151;
background: var(--wk-surface-hover-dark, #374151);
}
body[theme-mode=dark] .wk-messageinput-richtext .ql-toolbar button.ql-active {
background: rgba(59, 130, 246, 0.15);
}
/* === TOOLTIP STYLING FOR ACTION ITEMS === */
/* Override Semi UI Tooltip for cleaner look */
.wk-messageinput-actionbox .semi-tooltip-wrapper {
display: inline-flex;
}
.wk-messageinput-actionbox .semi-portal .semi-tooltip {
padding: 4px 8px !important;
font-size: 11px !important;
border-radius: 4px !important;
background: rgba(0, 0, 0, 0.85) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
max-width: 200px !important;
}
.wk-messageinput-actionbox .semi-portal .semi-tooltip-content {
padding: 0 !important;
font-weight: 500 !important;
}
body[theme-mode=dark] .wk-messageinput-actionbox .semi-portal .semi-tooltip {
background: rgba(0, 0, 0, 0.9) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.wk-messageinput-box {
padding: 8px;
}
.wk-messageinput-actionitem {
width: 20px;
height: 20px;
}
.wk-messageinput-actionitem svg {
width: 20px;
height: 20px;
}
.wk-messageinput-richtext .ql-toolbar {
padding: 6px 8px;
}
.wk-messageinput-richtext .ql-toolbar button {
width: 30px !important;
height: 30px !important;
}
.wk-messageinput-richtext .ql-container {
max-height: 150px;
}
.wk-messageinput-richtext .ql-editor {
padding: 10px 12px;
font-size: 14px;
min-height: 80px;
}
.wk-messageinput-upload-item {
width: 80px;
height: 80px;
}
.wk-messageinput-quick-reply-chip {
font-size: 13px;
padding: 6px 12px;
}
.wk-messageinput-send-button {
width: 40px;
height: 40px;
}
}
/* === ACCESSIBILITY IMPROVEMENTS === */
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.wk-messageinput-actionitem {
border: 1px solid currentColor;
}
.wk-messageinput-actionitem-active {
border-width: 2px;
}
.wk-messageinput-inputbox:focus {
outline: 2px solid currentColor;
outline-offset: 2px;
}
}
/* === PERFORMANCE OPTIMIZATIONS === */
/* GPU acceleration for animated elements */
.wk-messageinput-actionitem,
.wk-messageinput-send-button,
.wk-messageinput-upload-item,
.wk-messageinput-quick-reply-chip {
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
/* Smooth scrolling for upload queue */
.wk-messageinput-upload-queue {
scroll-behavior: smooth;
}
/* === LOADING STATES === */
.wk-messageinput-loading {
pointer-events: none;
opacity: 0.6;
position: relative;
}
.wk-messageinput-loading::after {
content: '';
position: absolute;
inset: 0;
background: #ffffff;
background: var(--wk-surface, #ffffff);
opacity: 0.5;
z-index: 10;
}
.wk-messageinput-loading-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
border: 3px solid #e5e7eb;
border: 3px solid var(--wk-border, #e5e7eb);
border-top-color: var(--wk-color-brand-500);
border-top-color: var(--wk-accent, var(--wk-color-brand-500));
border-radius: 50%;
animation: spin 0.8s linear infinite;
z-index: 11;
}
@keyframes spin {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* === MENTIONS DROPDOWN === */
.wk-messageinput-mentions-dropdown {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
max-height: 200px;
margin-bottom: 8px;
background: #ffffff;
background: var(--wk-surface, #ffffff);
border: 1px solid #e5e7eb;
border: 1px solid var(--wk-border, #e5e7eb);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow-y: auto;
z-index: 20;
animation: slideUpScale 0.2s ease-out;
}
.wk-messageinput-mention-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
cursor: pointer;
transition: all 0.15s ease;
}
.wk-messageinput-mention-item:hover,
.wk-messageinput-mention-item.selected {
background: #f3f4f6;
background: var(--wk-surface-hover, #f3f4f6);
}
.wk-messageinput-mention-item:active {
transform: scale(0.98);
}
.wk-messageinput-mention-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.wk-messageinput-mention-name {
font-size: 14px;
font-weight: 500;
color: #1f2937;
color: var(--wk-text-primary, #1f2937);
}
.wk-messageinput-mention-username {
font-size: 13px;
color: #6b7280;
color: var(--wk-text-secondary, #6b7280);
}
/* Dark mode for mentions */
body[theme-mode=dark] .wk-messageinput-mentions-dropdown {
background: #1f2937;
background: var(--wk-surface-dark, #1f2937);
border-color: #374151;
border-color: var(--wk-border-dark, #374151);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
body[theme-mode=dark] .wk-messageinput-mention-item:hover,
body[theme-mode=dark] .wk-messageinput-mention-item.selected {
background: #2d3139;
background: var(--wk-surface-hover-dark, #2d3139);
}
body[theme-mode=dark] .wk-messageinput-mention-name {
color: #f3f4f6;
color: var(--wk-text-primary-dark, #f3f4f6);
}
body[theme-mode=dark] .wk-messageinput-mention-username {
color: #9ca3af;
color: var(--wk-text-secondary-dark, #9ca3af);
}
/* === CHARACTER COUNTER === */
.wk-messageinput-char-counter {
display: flex;
justify-content: flex-end;
padding: 4px 12px 8px;
font-size: 12px;
font-weight: 500;
color: #9ca3af;
color: var(--wk-text-secondary, #9ca3af);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
transition: all 0.2s ease;
}
.wk-messageinput-char-counter.warning {
color: #F59E0B;
}
.wk-messageinput-char-counter.danger {
color: #EF4444;
animation: charCounterPulse 1s ease-in-out infinite;
}
@keyframes charCounterPulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
body[theme-mode=dark] .wk-messageinput-char-counter {
color: #6b7280;
color: var(--wk-text-secondary-dark, #6b7280);
}
body[theme-mode=dark] .wk-messageinput-char-counter.warning {
color: #FBBF24;
}
body[theme-mode=dark] .wk-messageinput-char-counter.danger {
color: #F87171;
}
/* ==========================================================================
Mobile Compact MessageInput (BottomNav hidden in chat view)
========================================================================== */
@media screen and (max-width: 767px) {
.wk-messageinput-box {
padding: 4px 12px;
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
}
/* Compact toolbar */
.wk-messageinput-toolbar {
gap: 12px;
min-height: 28px;
padding: 4px 0;
}
.wk-messageinput-toolbar-item {
padding: 4px;
}
.wk-messageinput-toolbar-item svg {
width: 20px;
height: 20px;
}
/* Compact input box - flat style, not rounded */
.wk-messageinput-inputbox {
min-height: 32px !important;
max-height: 100px;
padding: 6px 12px;
font-size: 15px;
border-radius: 4px !important;
border: 1px solid #e5e7eb;
}
/* Compact send button */
.wk-messageinput-send-btn {
width: 28px;
height: 28px;
}
.wk-messageinput-send-btn svg {
width: 16px;
height: 16px;
}
}
/* ==========================================================================
iOS VIRTUAL KEYBOARD FIX
Ensures message input stays properly positioned when iOS keyboard opens
========================================================================== */
@supports (-webkit-touch-callout: none) {
@media screen and (max-width: 767px) {
.wk-messageinput-box {
position: relative;
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
}
.wk-messageinput-mentions-portal {
position: fixed;
bottom: auto;
}
}
}
@media screen and (max-width: 767px) {
.wk-messageinput-box {
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
position: relative;
z-index: 10;
}
.wk-messageinput-inputbox {
font-size: 16px; /* iOS requires 16px+ to prevent zoom */
touch-action: manipulation;
}
}
/* ==========================================================================
MOBILE SEND BUTTON - INLINE WITH INPUT
========================================================================== */
/* Input row container - flex layout for inline send button */
.wk-messageinput-input-row {
display: flex;
align-items: center;
gap: 8px;
}
.wk-messageinput-input-row--mobile {
gap: 10px;
}
.wk-messageinput-input-row--mobile .wk-messageinput-inputbox {
flex: 1 1;
min-width: 0;
}
/* Send button - positioned inline with input */
.wk-messageinput-send-btn {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 50%;
border: none;
background: #007AFF;
background: var(--wk-color-brand-500, #007AFF);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
opacity: 0.4;
transform: scale(0.9);
flex-shrink: 0;
margin-bottom: 2px;
}
.wk-messageinput-send-btn:disabled {
background: #d1d5db;
cursor: not-allowed;
}
.wk-messageinput-send-btn--active {
opacity: 1;
transform: scale(1);
box-shadow: 0 2px 12px rgba(0, 122, 255, 0.35);
}
.wk-messageinput-send-btn--active:hover {
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.4);
}
.wk-messageinput-send-btn--active:active {
transform: scale(0.95);
}
.wk-messageinput-send-btn--sending {
opacity: 0.7;
cursor: wait;
}
.wk-messageinput-send-icon {
width: 20px;
height: 20px;
}
.wk-messageinput-send-icon.spinning {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Dark mode */
body[theme-mode=dark] .wk-messageinput-send-btn {
background: #4da3ff;
background: var(--wk-color-brand-400, #4da3ff);
}
body[theme-mode=dark] .wk-messageinput-send-btn:disabled {
background: #374151;
}
body[theme-mode=dark] .wk-messageinput-send-btn--active {
box-shadow: 0 2px 12px rgba(77, 163, 255, 0.35);
}
/* ===== MODERN QUICK REPLIES DESIGN ===== */
/* Clean, Professional, Premium UI */
/* Modal Styling Override */
.wk-quick-replies-modal .semi-modal-content {
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 16px;
}
.wk-quick-replies-modal .semi-modal-header {
border-bottom: 1px solid #e5e7eb;
border-bottom: 1px solid var(--wk-border-light, #e5e7eb);
padding-bottom: 12px;
}
.wk-quick-replies-modal .semi-modal-body {
padding: 0;
}
/* Container */
.wk-quick-replies-container {
display: flex;
flex-direction: column;
height: 100%;
min-height: 400px;
max-height: 600px;
/* padding: 16px 20px 20px; */
}
/* Header with Search */
.wk-quick-replies-header {
display: flex;
gap: 12px;
margin-bottom: 20px;
align-items: center;
}
.wk-quick-replies-search {
flex: 1 1;
}
.wk-quick-replies-search .semi-input-wrapper {
border-radius: 10px;
border: 1px solid #e5e7eb;
border: 1px solid var(--wk-border-light, #e5e7eb);
background: #f9fafb;
background: var(--wk-surface-secondary, #f9fafb);
transition: all 0.2s ease;
}
.wk-quick-replies-search .semi-input-wrapper:focus-within {
background: white;
border-color: #3b82f6;
border-color: var(--wk-accent, #3b82f6);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.wk-quick-replies-search .semi-input-prefix {
opacity: 0.5;
width: 30px;
font-size: 16px;
}
/* Template List - Scroll Container */
.wk-quick-replies-list {
flex: 1 1;
overflow-y: auto;
overflow-x: hidden;
padding-right: 8px;
scroll-behavior: smooth;
max-height: calc(100% - 60px); /* Reserve space for header */
min-height: 200px;
}
.wk-quick-replies-list::-webkit-scrollbar {
width: 5px;
}
.wk-quick-replies-list::-webkit-scrollbar-track {
background: transparent;
}
.wk-quick-replies-list::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
border-radius: 3px;
}
.wk-quick-replies-list::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.25);
}
/* Category Section */
.wk-quick-replies-category {
margin-bottom: 24px;
}
.wk-quick-replies-category:last-child {
margin-bottom: 0;
}
/* Category Title - Pill Badge Style */
.wk-quick-replies-category-title {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 600;
color: #3b82f6;
color: var(--wk-accent, #3b82f6);
background: rgba(59, 130, 246, 0.1);
padding: 4px 12px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
body[theme-mode=dark] .wk-quick-replies-category-title {
background: rgba(96, 165, 250, 0.15);
color: #93c5fd;
}
/* Template Card */
.wk-quick-reply-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: white;
border: 1px solid #e5e7eb;
border: 1px solid var(--wk-border-light, #e5e7eb);
border-radius: 12px;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.wk-quick-reply-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #3b82f6;
background: var(--wk-accent, #3b82f6);
opacity: 0;
transform: scaleY(0);
transition: all 0.2s ease;
}
.wk-quick-reply-item:hover {
background: #fafbfc;
border-color: rgba(59, 130, 246, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.wk-quick-reply-item:hover::before {
opacity: 1;
transform: scaleY(1);
}
.wk-quick-reply-item:active {
transform: translateY(0);
}
/* Card Content */
.wk-quick-reply-item-content {
flex: 1 1;
min-width: 0;
}
.wk-quick-reply-item-title {
font-size: 14px;
font-weight: 600;
color: #111827;
color: var(--wk-text-primary, #111827);
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 8px;
}
.wk-quick-reply-item-text {
font-size: 13px;
color: #6b7280;
color: var(--wk-text-secondary, #6b7280);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.4;
}
/* Action Buttons */
.wk-quick-reply-item-actions {
display: flex;
gap: 4px;
opacity: 0;
transform: translateX(10px);
transition: all 0.2s ease;
}
.wk-quick-reply-item:hover .wk-quick-reply-item-actions {
opacity: 1;
transform: translateX(0);
}
.wk-quick-reply-item-actions .semi-button {
width: 32px;
height: 32px;
border-radius: 8px;
}
.wk-quick-reply-item-actions .semi-button:hover {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
color: var(--wk-accent, #3b82f6);
}
/* Empty State */
.wk-quick-replies-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
text-align: center;
}
.wk-quick-replies-empty-icon {
font-size: 56px;
margin-bottom: 16px;
animation: floatBounce 3s ease-in-out infinite;
}
@keyframes floatBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.wk-quick-replies-empty-text {
font-size: 15px;
color: #9ca3af;
color: var(--wk-text-tertiary, #9ca3af);
margin-bottom: 20px;
}
/* Editor Modal */
.wk-quick-reply-editor {
display: flex;
flex-direction: column;
gap: 20px;
}
.wk-quick-reply-form-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.wk-quick-reply-form-item label {
font-size: 13px;
font-weight: 600;
color: #4b5563;
color: var(--wk-text-secondary, #4b5563);
}
.wk-quick-reply-form-item .semi-input-wrapper,
.wk-quick-reply-form-item .semi-textarea-wrapper {
border-radius: 10px;
}
/* Dark Mode */
body[theme-mode=dark] .wk-quick-replies-modal .semi-modal-header {
border-bottom-color: #374151;
border-bottom-color: var(--wk-border-dark, #374151);
}
body[theme-mode=dark] .wk-quick-replies-search .semi-input-wrapper {
background: rgba(255, 255, 255, 0.06);
border-color: #374151;
border-color: var(--wk-border-dark, #374151);
}
body[theme-mode=dark] .wk-quick-replies-search .semi-input-wrapper:focus-within {
background: rgba(255, 255, 255, 0.1);
border-color: #3b82f6;
border-color: var(--wk-accent, #3b82f6);
}
body[theme-mode=dark] .wk-quick-reply-item {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
body[theme-mode=dark] .wk-quick-reply-item:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(59, 130, 246, 0.4);
}
body[theme-mode=dark] .wk-quick-reply-item-title {
color: #f3f4f6;
}
body[theme-mode=dark] .wk-quick-reply-item-text {
color: #9ca3af;
}
body[theme-mode=dark] .wk-quick-replies-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
/* Keyboard Navigation */
.wk-quick-reply-item:focus-within {
outline: 2px solid #3b82f6;
outline: 2px solid var(--wk-accent, #3b82f6);
outline-offset: 2px;
}
/* Responsive */
@media (max-width: 768px) {
.wk-quick-replies-container {
padding: 16px;
}
.wk-quick-replies-header {
flex-direction: column;
}
.wk-quick-replies-search {
width: 100%;
}
.wk-quick-reply-item {
padding: 12px;
}
.wk-quick-reply-item-actions {
opacity: 1;
transform: none;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.wk-quick-reply-item,
.wk-quick-reply-item-actions {
transition: none;
}
.wk-quick-reply-item:hover {
transform: none;
}
.wk-quick-replies-empty-icon {
animation: none;
}
}
/* High Contrast */
@media (prefers-contrast: high) {
.wk-quick-reply-item {
border-width: 2px;
}
.wk-quick-reply-item:focus-within {
outline-width: 3px;
}
}
/* ===== RICH TEXT EDITOR STYLES ===== */
/* Professional Quill Editor - Modern Chat Interface */
.wk-rich-text-editor {
position: relative;
background: #ffffff;
background: var(--wk-surface-primary, #ffffff);
border-radius: 10px;
transition: all 0.2s ease;
width: 100%;
}
.wk-rich-text-editor.focused {
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
/* Quill Container */
.wk-rich-text-editor .quill {
position: relative;
display: flex;
flex-direction: column;
}
/* Toolbar Styling */
.wk-rich-text-editor .ql-toolbar {
border: none !important;
border-bottom: 1px solid #e5e7eb !important;
border-bottom: 1px solid var(--wk-border-light, #e5e7eb) !important;
background: #f9fafb;
background: var(--wk-surface-secondary, #f9fafb);
padding: 4px 8px;
border-radius: 10px 10px 0 0;
display: flex;
flex-wrap: wrap;
gap: 2px;
}
.wk-rich-text-editor .ql-toolbar.ql-snow {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
}
/* Toolbar Buttons */
.wk-rich-text-editor .ql-toolbar button {
width: 24px !important;
height: 24px !important;
padding: 2px !important;
border-radius: 4px;
transition: all 0.12s ease;
display: flex;
align-items: center;
justify-content: center;
}
.wk-rich-text-editor .ql-toolbar button svg {
width: 14px !important;
height: 14px !important;
}
.wk-rich-text-editor .ql-toolbar button:hover {
background: #e5e7eb;
background: var(--wk-surface-hover, #e5e7eb);
}
.wk-rich-text-editor .ql-toolbar button.ql-active {
background: #eff6ff;
background: var(--wk-accent-light, #eff6ff);
color: var(--wk-color-brand-500);
color: var(--wk-accent, var(--wk-color-brand-500));
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.15);
}
.wk-rich-text-editor .ql-toolbar button.ql-active svg,
.wk-rich-text-editor .ql-toolbar button.ql-active .ql-stroke {
stroke: var(--wk-color-brand-500) !important;
stroke: var(--wk-accent, var(--wk-color-brand-500)) !important;
}
.wk-rich-text-editor .ql-toolbar button.ql-active .ql-fill {
fill: var(--wk-color-brand-500) !important;
fill: var(--wk-accent, var(--wk-color-brand-500)) !important;
}
/* Toolbar Dropdowns */
.wk-rich-text-editor .ql-toolbar .ql-picker {
height: 24px;
border-radius: 4px;
transition: all 0.12s ease;
font-size: 12px;
}
.wk-rich-text-editor .ql-toolbar .ql-picker:hover {
background: #e5e7eb;
background: var(--wk-surface-hover, #e5e7eb);
}
.wk-rich-text-editor .ql-toolbar .ql-picker-label {
padding: 2px 6px;
border: none;
font-size: 12px;
}
.wk-rich-text-editor .ql-toolbar .ql-picker-options {
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 4px;
margin-top: 4px;
}
/* Editor Container */
.wk-rich-text-editor .ql-container {
border: none !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
font-size: 14px;
line-height: 1.5;
}
.wk-rich-text-editor .ql-editor {
padding: 12px;
min-height: 40px;
max-height: 200px;
overflow-y: auto;
color: #1f2937;
color: var(--wk-text-primary, #1f2937);
font-size: 14px;
}
.wk-rich-text-editor .ql-editor.ql-blank::before {
color: #9ca3af;
color: var(--wk-text-tertiary, #9ca3af);
font-style: normal;
left: 12px;
font-size: 14px;
}
/* Scrollbar Styling */
.wk-rich-text-editor .ql-editor::-webkit-scrollbar {
width: 6px;
}
.wk-rich-text-editor .ql-editor::-webkit-scrollbar-track {
background: transparent;
}
.wk-rich-text-editor .ql-editor::-webkit-scrollbar-thumb {
background: #e5e7eb;
background: var(--wk-border-light, #e5e7eb);
border-radius: 3px;
}
.wk-rich-text-editor .ql-editor::-webkit-scrollbar-thumb:hover {
background: #d1d5db;
background: var(--wk-border-medium, #d1d5db);
}
/* Text Formatting */
.wk-rich-text-editor .ql-editor strong {
font-weight: 600;
}
.wk-rich-text-editor .ql-editor em {
font-style: italic;
}
.wk-rich-text-editor .ql-editor u {
text-decoration: underline;
}
.wk-rich-text-editor .ql-editor s {
text-decoration: line-through;
}
/* Code Blocks */
.wk-rich-text-editor .ql-editor pre.ql-syntax {
background: #f3f4f6;
background: var(--wk-surface-code, #f3f4f6);
color: #1f2937;
color: var(--wk-text-code, #1f2937);
border-radius: 6px;
padding: 12px;
margin: 8px 0;
overflow-x: auto;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 13px;
}
/* Blockquotes */
.wk-rich-text-editor .ql-editor blockquote {
border-left: 4px solid var(--wk-color-brand-500);
border-left: 4px solid var(--wk-accent, var(--wk-color-brand-500));
padding-left: 16px;
margin: 8px 0;
color: #6b7280;
color: var(--wk-text-secondary, #6b7280);
font-style: italic;
}
/* Lists */
.wk-rich-text-editor .ql-editor ul,
.wk-rich-text-editor .ql-editor ol {
padding-left: 24px;
margin: 8px 0;
}
.wk-rich-text-editor .ql-editor li {
margin: 4px 0;
}
/* Links */
.wk-rich-text-editor .ql-editor a {
color: var(--wk-color-brand-500);
color: var(--wk-accent, var(--wk-color-brand-500));
text-decoration: none;
transition: all 0.15s ease;
}
.wk-rich-text-editor .ql-editor a:hover {
text-decoration: underline;
color: #2563eb;
color: var(--wk-accent-dark, #2563eb);
}
/* Images */
.wk-rich-text-editor .ql-editor img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 8px 0;
}
/* Mention Styles */
.wk-rich-text-editor .mention {
background: #dbeafe;
background: var(--wk-mention-bg, #dbeafe);
color: #1e40af;
color: var(--wk-mention-color, #1e40af);
padding: 2px 6px;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.wk-rich-text-editor .mention:hover {
background: #bfdbfe;
background: var(--wk-mention-hover-bg, #bfdbfe);
}
/* Mention Dropdown */
.ql-mention-list-container {
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 4px;
max-height: 200px;
overflow-y: auto;
z-index: 9999;
}
.ql-mention-list {
list-style: none;
margin: 0;
padding: 0;
}
.ql-mention-list-item {
padding: 8px 12px;
cursor: pointer;
border-radius: 6px;
transition: all 0.15s ease;
display: flex;
align-items: center;
gap: 8px;
}
.ql-mention-list-item:hover,
.ql-mention-list-item.selected {
background: #f3f4f6;
background: var(--wk-surface-hover, #f3f4f6);
}
.mention-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.mention-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.mention-name {
font-size: 14px;
color: #1f2937;
color: var(--wk-text-primary, #1f2937);
}
/* Character Count */
.wk-editor-char-count {
position: absolute;
bottom: 8px;
right: 12px;
font-size: 12px;
color: #9ca3af;
color: var(--wk-text-tertiary, #9ca3af);
pointer-events: none;
}
.wk-editor-char-count.exceeded {
color: #ef4444;
color: var(--wk-error, #ef4444);
font-weight: 600;
}
/* Dark Mode Support */
body[theme-mode=dark] .wk-rich-text-editor {
background: #1f2937;
background: var(--wk-surface-primary-dark, #1f2937);
}
body[theme-mode=dark] .wk-rich-text-editor .ql-toolbar {
background: #111827;
background: var(--wk-surface-secondary-dark, #111827);
border-bottom-color: #374151 !important;
border-bottom-color: var(--wk-border-dark, #374151) !important;
}
body[theme-mode=dark] .wk-rich-text-editor .ql-toolbar button:hover {
background: #374151;
background: var(--wk-surface-hover-dark, #374151);
}
body[theme-mode=dark] .wk-rich-text-editor .ql-toolbar .ql-stroke {
stroke: #d1d5db;
stroke: var(--wk-text-secondary-dark, #d1d5db);
}
body[theme-mode=dark] .wk-rich-text-editor .ql-toolbar .ql-fill {
fill: #d1d5db;
fill: var(--wk-text-secondary-dark, #d1d5db);
}
body[theme-mode=dark] .wk-rich-text-editor .ql-editor {
color: #f3f4f6;
color: var(--wk-text-primary-dark, #f3f4f6);
}
body[theme-mode=dark] .wk-rich-text-editor .ql-editor.ql-blank::before {
color: #6b7280;
color: var(--wk-text-tertiary-dark, #6b7280);
}
body[theme-mode=dark] .wk-rich-text-editor .ql-editor pre.ql-syntax {
background: #111827;
background: var(--wk-surface-code-dark, #111827);
color: #e5e7eb;
color: var(--wk-text-code-dark, #e5e7eb);
}
body[theme-mode=dark] .wk-rich-text-editor .mention {
background: #1e3a8a;
background: var(--wk-mention-bg-dark, #1e3a8a);
color: #93c5fd;
color: var(--wk-mention-color-dark, #93c5fd);
}
body[theme-mode=dark] .wk-rich-text-editor .mention:hover {
background: #1e40af;
background: var(--wk-mention-hover-bg-dark, #1e40af);
}
body[theme-mode=dark] .ql-mention-list-container {
background: #1f2937;
background: var(--wk-surface-secondary-dark, #1f2937);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
body[theme-mode=dark] .ql-mention-list-item:hover,
body[theme-mode=dark] .ql-mention-list-item.selected {
background: #374151;
background: var(--wk-surface-hover-dark, #374151);
}
body[theme-mode=dark] .mention-name {
color: #f3f4f6;
color: var(--wk-text-primary-dark, #f3f4f6);
}
/* Responsive Design */
@media (max-width: 768px) {
.wk-rich-text-editor .ql-toolbar {
padding: 4px 6px;
}
.wk-rich-text-editor .ql-toolbar button {
width: 22px !important;
height: 22px !important;
}
.wk-rich-text-editor .ql-toolbar button svg {
width: 12px !important;
height: 12px !important;
}
.wk-rich-text-editor .ql-editor {
padding: 10px;
max-height: 150px;
}
}
/* Compact Mode */
.wk-rich-text-editor.compact .ql-toolbar {
display: none;
}
.wk-rich-text-editor.compact .ql-container {
border-radius: 12px;
}
/* Focus Mode - Hide toolbar when not focused */
.wk-rich-text-editor.auto-hide-toolbar:not(.focused) .ql-toolbar {
display: none;
}
/* Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ql-mention-list-container {
animation: fadeIn 0.2s ease;
}
/* Tooltip Styles */
.ql-toolbar .ql-tooltip {
background: #1f2937;
background: var(--wk-surface-tooltip, #1f2937);
color: white;
border-radius: 6px;
padding: 8px 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.ql-toolbar .ql-tooltip input {
background: #374151;
background: var(--wk-surface-input, #374151);
border: 1px solid #4b5563;
border: 1px solid var(--wk-border-medium, #4b5563);
color: white;
border-radius: 4px;
padding: 6px 10px;
}
.ql-toolbar .ql-tooltip .ql-action,
.ql-toolbar .ql-tooltip .ql-remove {
color: var(--wk-color-brand-500);
color: var(--wk-accent, var(--wk-color-brand-500));
cursor: pointer;
transition: all 0.15s ease;
}
.ql-toolbar .ql-tooltip .ql-action:hover,
.ql-toolbar .ql-tooltip .ql-remove:hover {
color: #2563eb;
color: var(--wk-accent-dark, #2563eb);
}
/* Linebreak Blot - Soft breaks (
) */
.wk-rich-text-editor .ql-editor br[data-blot-name="linebreak"] {
display: inline;
}
/* Selection Highlight */
.wk-rich-text-editor .ql-editor ::-moz-selection {
background: rgba(59, 130, 246, 0.2);
background: var(--wk-selection, rgba(59, 130, 246, 0.2));
}
.wk-rich-text-editor .ql-editor ::selection {
background: rgba(59, 130, 246, 0.2);
background: var(--wk-selection, rgba(59, 130, 246, 0.2));
}
body[theme-mode=dark] .wk-rich-text-editor .ql-editor ::-moz-selection {
background: rgba(59, 130, 246, 0.3);
background: var(--wk-selection-dark, rgba(59, 130, 246, 0.3));
}
body[theme-mode=dark] .wk-rich-text-editor .ql-editor ::selection {
background: rgba(59, 130, 246, 0.3);
background: var(--wk-selection-dark, rgba(59, 130, 246, 0.3));
}
/* Context Menu - Using Design System Tokens */
.wk-contextmenus {
position: fixed;
top: 100px;
left: 0px;
background-color: #ffffff;
background-color: var(--surface-primary, #ffffff);
z-index: 100;
z-index: var(--z-dropdown, 100);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
border-radius: 12px;
border-radius: var(--radius-lg, 12px);
border: 1px solid rgba(0, 0, 0, 0.05);
border: 1px solid var(--border-light, rgba(0, 0, 0, 0.05));
transform: scale(0.95);
opacity: 0;
transition: all 200ms cubic-bezier(0.2, 0, 0.2, 1);
transition: all var(--duration-200, 200ms) var(--ease-out, cubic-bezier(0.2, 0, 0.2, 1));
visibility: hidden;
padding: 8px 0;
padding: var(--space-2, 8px) 0;
min-width: 120px;
backdrop-filter: blur(8px);
}
body[theme-mode=dark] .wk-contextmenus {
background-color: #1e293b;
background-color: var(--surface-primary-dark, #1e293b);
border-color: #334155;
border-color: var(--border-dark, #334155);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.wk-contextmenus-open {
transform: scale(1);
opacity: 1;
visibility: visible;
}
.wk-contextmenus ul {
margin: 0;
padding: 0;
list-style: none;
}
.wk-contextmenus li {
display: flex;
align-items: center;
gap: 8px;
gap: var(--space-2, 8px);
padding: 8px 16px;
padding: var(--space-2, 8px) var(--space-4, 16px);
cursor: pointer;
font-size: 14px;
font-size: var(--text-sm, 14px);
color: #0f172a;
color: var(--text-primary, #0f172a);
transition: background-color 150ms ease;
transition: background-color var(--duration-fast, 150ms) ease;
border-radius: 8px;
border-radius: var(--radius-md, 8px);
margin: 0 4px;
margin: 0 var(--space-1, 4px);
}
body[theme-mode=dark] .wk-contextmenus li {
color: #f1f5f9;
color: var(--text-primary-dark, #f1f5f9);
}
.wk-contextmenus li:hover {
background-color: #f1f5f9;
background-color: var(--surface-hover, #f1f5f9);
}
body[theme-mode=dark] .wk-contextmenus li:hover {
background-color: #334155;
background-color: var(--surface-hover-dark, #334155);
}
.wk-contextmenus li:active {
background-color: #e2e8f0;
background-color: var(--surface-active, #e2e8f0);
transform: scale(0.98);
}
/* Icon styling */
.wk-contextmenus li svg {
width: 18px;
height: 18px;
color: #64748b;
color: var(--text-secondary, #64748b);
flex-shrink: 0;
}
.wk-contextmenus li:hover svg {
color: var(--wk-color-brand-500);
color: var(--brand-500, var(--wk-color-brand-500));
}
/* Separator */
.wk-contextmenus-separator {
height: 1px;
background: #e2e8f0;
background: var(--border-light, #e2e8f0);
margin: 4px 8px;
margin: var(--space-1, 4px) var(--space-2, 8px);
}
body[theme-mode=dark] .wk-contextmenus-separator {
background: #334155;
background: var(--border-dark, #334155);
}
/* Mask/Backdrop */
.wk-contextmenus-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
visibility: hidden;
z-index: 50;
z-index: var(--z-overlay, 50);
}
/* Focus state for keyboard navigation */
.wk-contextmenus li:focus-visible {
outline: 2px solid var(--wk-color-brand-500);
outline: 2px solid var(--brand-500, var(--wk-color-brand-500));
outline-offset: -2px;
background-color: #f1f5f9;
background-color: var(--surface-hover, #f1f5f9);
}
.wk-global-mute-banner {
width: 100%;
box-sizing: border-box;
padding: 8px 12px;
border-bottom: 1px solid var(--semi-color-border);
background: var(--semi-color-fill-0);
}
.wk-global-mute-banner__text {
color: var(--semi-color-text-0);
font-size: 12px;
line-height: 16px;
}
/* Flame Message Styles - Disappearing Messages with Countdown */
.wk-flame-message {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background-color: rgba(239, 68, 68, 0.05);
border: 2px solid var(--wk-color-danger);
border-radius: var(--wk-radius-lg);
position: relative;
overflow: hidden;
}
.wk-flame-message::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
pointer-events: none;
}
.wk-flame-icon {
font-size: 32px;
flex-shrink: 0;
animation: flameFlicker 2s ease-in-out infinite;
z-index: 1;
}
@keyframes flameFlicker {
0%, 100% {
transform: scale(1) rotate(-5deg);
filter: brightness(1);
}
50% {
transform: scale(1.1) rotate(5deg);
filter: brightness(1.2);
}
}
.wk-flame-content {
flex: 1 1;
z-index: 1;
}
.wk-flame-title {
font-size: var(--wk-font-size-base);
font-weight: var(--wk-font-weight-semibold);
color: var(--wk-color-danger);
margin-bottom: 4px;
}
.wk-flame-description {
font-size: var(--wk-font-size-sm);
color: var(--wk-text-secondary);
margin-bottom: 8px;
}
.wk-flame-countdown {
display: flex;
align-items: center;
gap: 8px;
}
.wk-flame-countdown-ring {
position: relative;
width: 48px;
height: 48px;
}
.wk-flame-countdown-svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.wk-flame-countdown-bg {
fill: none;
stroke: var(--wk-color-neutral-200);
stroke-width: 3;
}
.wk-flame-countdown-progress {
fill: none;
stroke: var(--wk-color-danger);
stroke-width: 3;
stroke-linecap: round;
transition: stroke-dasharray 1s linear;
}
.wk-flame-countdown-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: var(--wk-font-size-xs);
font-weight: var(--wk-font-weight-semibold);
color: var(--wk-color-danger);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
/* Dark mode support */
body[theme-mode=dark] .wk-flame-message {
background-color: rgba(239, 68, 68, 0.1);
border-color: var(--wk-color-danger);
}
body[theme-mode=dark] .wk-flame-countdown-bg {
stroke: var(--wk-color-neutral-700);
}
/* Animation when countdown ends */
.wk-flame-message.wk-flame-expired {
opacity: 0;
transform: scale(0.95);
transition: all 0.5s ease;
}
/* Mobile responsive */
@media (max-width: 768px) {
.wk-flame-message {
padding: 12px;
gap: 12px;
}
.wk-flame-icon {
font-size: 24px;
}
.wk-flame-countdown-ring {
width: 40px;
height: 40px;
}
}
/* High contrast mode */
@media (prefers-contrast: high) {
.wk-flame-message {
border-width: 3px;
}
.wk-flame-countdown-progress {
stroke-width: 4;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.wk-flame-icon {
animation: none;
}
.wk-flame-countdown-progress {
transition: none;
}
.wk-flame-message.wk-flame-expired {
transition: opacity 0.2s ease;
}
}
/* Modal Styling */
.wk-read-members-modal .semi-modal-content {
padding: 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.wk-read-members-modal .semi-modal-body {
padding: 0;
}
.wk-read-members-modal .semi-modal-mask {
backdrop-filter: blur(4px);
background: rgba(0, 0, 0, 0.3);
}
/* Hide default close button */
.wk-read-members-modal .semi-modal-close {
display: none !important;
}
.wk-read-members-modal .semi-modal-close-btn {
display: none !important;
}
/* Simple Header */
.wk-read-members-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--semi-color-border);
background: var(--semi-color-bg-1);
}
.wk-read-members-title {
font-size: 18px;
font-weight: 600;
margin: 0;
color: var(--semi-color-text-0);
display: flex;
align-items: center;
}
.wk-read-members-close-btn {
width: 32px;
height: 32px;
background: var(--semi-color-fill-0);
border: none;
border-radius: 8px;
color: var(--semi-color-text-2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.wk-read-members-close-btn:hover {
background: var(--semi-color-fill-1);
color: var(--semi-color-text-0);
transform: scale(1.05);
}
/* Content Area */
.wk-read-members-content {
max-height: 400px;
overflow-y: auto;
padding: 0;
background: var(--semi-color-bg-0);
}
/* Custom scrollbar */
.wk-read-members-content::-webkit-scrollbar {
width: 6px;
}
.wk-read-members-content::-webkit-scrollbar-track {
background: var(--semi-color-fill-0);
}
.wk-read-members-content::-webkit-scrollbar-thumb {
background: var(--semi-color-fill-2);
border-radius: 3px;
}
.wk-read-members-content::-webkit-scrollbar-thumb:hover {
background: var(--semi-color-primary);
}
/* Loading State */
.wk-read-members-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px;
text-align: center;
}
.wk-loading-spinner {
margin-bottom: 12px;
}
.wk-loading-text {
color: var(--semi-color-text-2);
font-size: 14px;
margin: 0;
}
/* Empty State */
.wk-read-members-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px;
text-align: center;
}
.wk-empty-icon {
width: 48px;
height: 48px;
background: var(--semi-color-fill-1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
color: var(--semi-color-text-2);
}
.wk-read-members-empty h4 {
font-size: 16px;
font-weight: 600;
color: var(--semi-color-text-0);
margin: 0 0 6px;
}
.wk-read-members-empty p {
font-size: 14px;
color: var(--semi-color-text-2);
margin: 0;
line-height: 1.4;
}
/* Members List */
.wk-read-members-list {
padding: 8px 0;
}
/* Member Card - Compact */
.wk-read-member-card {
display: flex;
align-items: center;
padding: 12px 20px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
animation: slideInUp 0.3s ease-out both;
}
.wk-read-member-card:hover {
background: var(--semi-color-fill-0);
}
.wk-read-member-card:hover .wk-member-avatar {
transform: scale(1.05);
}
/* Avatar Container - Smaller */
.wk-member-avatar-container {
position: relative;
margin-right: 12px;
}
.wk-member-avatar {
transition: all 0.2s ease;
border: 2px solid var(--semi-color-bg-0);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.wk-member-online-indicator {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
background: #4CAF50;
border: 2px solid var(--semi-color-bg-0);
border-radius: 50%;
}
/* Member Info - Compact */
.wk-member-info {
flex: 1 1;
min-width: 0;
}
.wk-member-name {
font-size: 15px;
font-weight: 500;
color: var(--semi-color-text-0);
margin: 0 0 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-member-status {
font-size: 12px;
color: var(--semi-color-text-2);
margin: 0;
font-weight: 400;
display: flex;
align-items: center;
gap: 4px;
}
.wk-status-dot {
width: 3px;
height: 3px;
background: var(--semi-color-success);
border-radius: 50%;
}
/* Seen Icon */
.wk-member-seen-icon {
color: var(--semi-color-primary);
opacity: 0.7;
transition: all 0.2s ease;
}
.wk-read-member-card:hover .wk-member-seen-icon {
opacity: 1;
}
/* Load More */
.wk-read-members-loading-more {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px;
color: var(--semi-color-text-2);
font-size: 13px;
}
/* Animations */
@keyframes slideInUp {
from {
transform: translateY(10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Responsive */
@media (max-width: 768px) {
.wk-read-members-modal {
width: 90vw !important;
max-width: 400px;
}
.wk-read-members-header {
padding: 16px 20px;
}
.wk-read-member-card {
padding: 10px 16px;
}
}
.batch-progress-modal {
.semi-modal-content {
padding: 24px;
}
}
.batch-progress-content {
display: flex;
flex-direction: column;
gap: 20px;
}
.batch-progress-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: #f8f9fa;
border-radius: 8px;
}
.batch-progress-status {
flex: 1 1;
}
.status-text {
font-size: 16px;
font-weight: 500;
color: #1f2329;
margin-bottom: 4px;
}
.time-estimate {
font-size: 14px;
color: #86909c;
}
.batch-progress-spinner {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
.spinner {
width: 16px;
height: 16px;
border: 2px solid #e5e6eb;
border-top: 2px solid #3370ff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.batch-progress-bar {
margin: 8px 0;
}
.batch-progress-details {
display: flex;
flex-direction: column;
gap: 16px;
}
.progress-stats {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
background: #fafbfc;
border-radius: 6px;
border: 1px solid #e5e6eb;
}
.stat-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
}
.stat-label {
color: #86909c;
}
.stat-value {
color: #1f2329;
font-weight: 500;
}
.batch-progress-errors {
padding: 12px 16px;
background: #fff2f0;
border: 1px solid #ffccc7;
border-radius: 6px;
margin-top: 8px;
}
.error-message {
color: #ff4d4f;
font-size: 14px;
font-weight: 500;
text-align: center;
}
.batch-progress-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
}
/* Dark theme support */
body[theme-mode=dark] {
.batch-progress-header {
background: #2a2d33;
}
.status-text {
color: #e8e9ea;
}
.time-estimate {
color: #86909c;
}
.progress-stats {
background: #232529;
border-color: #3a3d44;
}
.stat-label {
color: #86909c;
}
.stat-value {
color: #e8e9ea;
}
.batch-progress-errors {
background: #2a1f1f;
border-color: #5c2626;
}
.spinner {
border-color: #3a3d44;
border-top-color: #3370ff;
}
}
/* Responsive design */
@media (max-width: 600px) {
.batch-progress-modal {
.semi-modal {
width: 90vw !important;
margin: 20px auto;
}
}
.progress-stats {
padding: 12px;
}
.stat-item {
font-size: 13px;
}
.batch-progress-header {
padding: 12px;
}
.status-text {
font-size: 15px;
}
}
/* Message Skeleton Loading States - Modern Shimmer Effect */
.wk-message-skeleton-container {
padding: 16px;
padding: var(--wk-space-4, 16px);
display: flex;
flex-direction: column;
gap: 12px;
gap: var(--wk-space-3, 12px);
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.wk-message-skeleton {
display: flex;
gap: 12px;
gap: var(--wk-space-3, 12px);
align-items: flex-start;
padding: 8px;
padding: var(--wk-space-2, 8px);
animation: slideIn 0.4s ease-out backwards;
}
/* Staggered animation for sequential loading effect */
.wk-message-skeleton:nth-child(1) { animation-delay: 0.05s; }
.wk-message-skeleton:nth-child(2) { animation-delay: 0.1s; }
.wk-message-skeleton:nth-child(3) { animation-delay: 0.15s; }
.wk-message-skeleton:nth-child(4) { animation-delay: 0.2s; }
.wk-message-skeleton:nth-child(5) { animation-delay: 0.25s; }
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wk-message-skeleton.mine {
flex-direction: row-reverse;
}
.wk-message-skeleton.their {
flex-direction: row;
}
/* Avatar skeleton with pulse */
.wk-skeleton-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e5e7eb;
background: var(--wk-color-neutral-200, #e5e7eb);
background-size: 200% 100%;
animation: shimmer 2s infinite ease-in-out;
flex-shrink: 0;
}
/* Enhanced shimmer animation */
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Content area */
.wk-skeleton-content {
flex: 1 1;
max-width: 60%;
display: flex;
flex-direction: column;
gap: 8px;
gap: var(--wk-space-2, 8px);
}
/* Skeleton lines with shimmer */
.wk-skeleton-line {
height: 16px;
border-radius: 4px;
border-radius: var(--wk-radius-sm, 4px);
background: #e5e7eb;
background: var(--wk-color-neutral-200, #e5e7eb);
background-size: 200% 100%;
animation: shimmer 2s infinite ease-in-out;
}
/* Varied widths for realistic look */
.wk-skeleton-line-full {
width: 100%;
animation-delay: 0.1s;
}
.wk-skeleton-line-medium {
width: 75%;
animation-delay: 0.2s;
}
.wk-skeleton-line-short {
width: 45%;
animation-delay: 0.3s;
}
/* Mine messages align right */
.wk-message-skeleton.mine .wk-skeleton-content {
align-items: flex-end;
}
/* Their messages align left */
.wk-message-skeleton.their .wk-skeleton-content {
align-items: flex-start;
}
/* Screen reader only text */
.wk-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Dark mode styles */
body[theme-mode="dark"] .wk-skeleton-avatar,
body[theme-mode="dark"] .wk-skeleton-line {
background: #374151;
background: var(--wk-color-neutral-700, #374151);
background-size: 200% 100%;
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.wk-message-skeleton,
.wk-skeleton-avatar,
.wk-skeleton-line {
animation: none;
}
.wk-skeleton-avatar,
.wk-skeleton-line {
background: #e5e7eb;
background: var(--wk-color-neutral-200, #e5e7eb);
}
body[theme-mode="dark"] .wk-skeleton-avatar,
body[theme-mode="dark"] .wk-skeleton-line {
background: #374151;
background: var(--wk-color-neutral-700, #374151);
}
}
/* Mobile responsive */
@media (max-width: 768px) {
.wk-message-skeleton {
margin-bottom: 16px;
}
.wk-skeleton-avatar {
width: 32px;
height: 32px;
}
.wk-skeleton-content {
max-width: 75%;
}
.wk-skeleton-line {
height: 12px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.wk-skeleton-avatar::after,
.wk-skeleton-line::after {
animation: none;
}
@keyframes shimmer {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
.wk-skeleton-avatar::after,
.wk-skeleton-line::after {
animation: shimmer 1.5s infinite;
left: 0;
width: 100%;
}
}
/* High contrast mode */
@media (prefers-contrast: high) {
.wk-skeleton-avatar,
.wk-skeleton-line {
background-color: var(--wk-color-neutral-400);
border: 1px solid var(--wk-border-default);
}
}
/* MessageLoadError Component Styles */
.wk-message-load-error {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 300px;
padding: 32px;
box-sizing: border-box;
}
.wk-message-load-error-content {
display: flex;
flex-direction: column;
align-items: center;
max-width: 360px;
padding: 40px 32px;
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
border-radius: 20px;
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.05),
0 10px 20px -2px rgba(0, 0, 0, 0.04),
0 0 0 1px rgba(0, 0, 0, 0.03);
text-align: center;
animation: wk-error-fade-in 0.3s ease-out;
}
@keyframes wk-error-fade-in {
from {
opacity: 0;
transform: translateY(10px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Error Icon */
.wk-message-load-error-icon {
width: 64px;
height: 64px;
margin-bottom: 20px;
padding: 16px;
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
border-radius: 50%;
color: #dc2626;
animation: wk-error-icon-pulse 2s ease-in-out infinite;
}
.wk-message-load-error-icon svg {
width: 100%;
height: 100%;
}
@keyframes wk-error-icon-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* Error Title */
.wk-message-load-error-title {
margin: 0 0 12px 0;
font-size: 18px;
font-weight: 600;
color: #1f2937;
letter-spacing: -0.02em;
}
/* Error Message */
.wk-message-load-error-message {
margin: 0 0 24px 0;
font-size: 14px;
color: #6b7280;
line-height: 1.6;
max-width: 280px;
}
/* Action Buttons Container */
.wk-message-load-error-actions {
display: flex;
gap: 12px;
margin-bottom: 20px;
}
/* Button Base Styles */
.wk-message-load-error-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
font-size: 14px;
font-weight: 500;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
min-width: 100px;
}
.wk-message-load-error-btn-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Primary Button - Retry */
.wk-message-load-error-btn-primary {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: white;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}
.wk-message-load-error-btn-primary:hover {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.45);
}
.wk-message-load-error-btn-primary:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}
/* Secondary Button - Reload */
.wk-message-load-error-btn-secondary {
background: #f1f5f9;
color: #475569;
border: 1px solid #e2e8f0;
}
.wk-message-load-error-btn-secondary:hover {
background: #e2e8f0;
border-color: #cbd5e1;
transform: translateY(-1px);
}
.wk-message-load-error-btn-secondary:active {
transform: translateY(0);
background: #cbd5e1;
}
/* Loading State */
.wk-message-load-error-btn-loading {
opacity: 0.8;
cursor: not-allowed;
}
.wk-message-load-error-btn:disabled {
cursor: not-allowed;
opacity: 0.7;
}
.wk-message-load-error-spinner {
animation: wk-error-spin 1s linear infinite;
}
@keyframes wk-error-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Help Text */
.wk-message-load-error-help {
margin: 0;
font-size: 12px;
color: #9ca3af;
line-height: 1.5;
}
/* Dark Mode Styles */
body[theme-mode='dark'] .wk-message-load-error-content {
background: linear-gradient(145deg, #1f2937 0%, #111827 100%);
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.2),
0 10px 20px -2px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.05);
}
body[theme-mode='dark'] .wk-message-load-error-icon {
background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
color: #fca5a5;
}
body[theme-mode='dark'] .wk-message-load-error-title {
color: #f9fafb;
}
body[theme-mode='dark'] .wk-message-load-error-message {
color: #9ca3af;
}
body[theme-mode='dark'] .wk-message-load-error-btn-secondary {
background: #374151;
color: #e5e7eb;
border-color: #4b5563;
}
body[theme-mode='dark'] .wk-message-load-error-btn-secondary:hover {
background: #4b5563;
border-color: #6b7280;
}
body[theme-mode='dark'] .wk-message-load-error-help {
color: #6b7280;
}
/* Responsive Styles */
@media (max-width: 480px) {
.wk-message-load-error {
padding: 16px;
}
.wk-message-load-error-content {
padding: 32px 24px;
}
.wk-message-load-error-icon {
width: 56px;
height: 56px;
padding: 14px;
}
.wk-message-load-error-title {
font-size: 16px;
}
.wk-message-load-error-message {
font-size: 13px;
}
.wk-message-load-error-actions {
flex-direction: column;
width: 100%;
}
.wk-message-load-error-btn {
width: 100%;
justify-content: center;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.wk-message-load-error-content {
animation: none;
}
.wk-message-load-error-icon {
animation: none;
}
.wk-message-load-error-btn {
transition: none;
}
}
.wk-conversationlist {
height: 100%;
overflow-y: auto;
/* padding: 0px 5px; */
}
.wk-conversationlist-item {
height: 80px;
width: 100%;
cursor: pointer;
padding: 0px 5px;
background-color: white;
box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.wk-conversationlist {
height: 100vh;
height: 100dvh;
height: -webkit-fill-available;
scroll-snap-type: y mandatory;
}
.wk-conversationlist-item {
scroll-snap-align: start;
}
}
body[theme-mode=dark] .wk-conversationlist-item {
background-color: var(--wk-color-secondary-2);
}
.wk-conversationlist-item-top {
background-color: var(--wk-color-secondary) !important;
}
.wk-conversationlist-item-content {
display: flex;
height: 100%;
border-radius: 12px;
}
.wk-conversationlist-item-content:hover {
background-color: var(--wk-color-theme);
color: white;
transition: background-color 0.35s;
}
.wk-conversationlist-item-content:hover .wk-conversationlist-item-lastmsg {
color: white;
}
.wk-conversationlist-item-content:hover .wk-conversationlist-item-time {
color: white;
}
.wk-conversationlist-item-left {
width: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.wk-conversationlist-item-right {
height: 100%;
width: calc(100% - 70px);
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 10px;
padding-left: 5px;
flex-grow: 1;
overflow: hidden;
box-sizing: border-box;
}
.wk-conversationlist-item-avatar-box {
margin-left: 4px;
position: relative;
}
.wk-conversationlist-item-right-first-line {
overflow: hidden;
display: flex;
justify-content: flex-start;
align-items: center;
}
.wk-conversationlist-item-right-second-line {
display: flex;
}
.wk-conversationlist-item-name {
display: flex;
width: 100%;
flex: 1 1;
align-items: center;
}
.wk-conversationlist-item-name h3 {
font-size: 1rem;
line-height: 1.6875rem;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: auto;
max-width: 80%;
}
body[theme-mode=dark] .wk-conversationlist-item-name h3 {
color: white;
}
.wk-conversationlist-item-selected .wk-conversationlist-item-name h3,
.wk-conversationlist-item-selected .wk-conversationlist-item-name {
color: white;
}
.wk-conversationlist-item-time {
color: #9b9b9b;
padding-left: 10px;
flex-shrink: 0;
font-size: .75rem;
line-height: 1;
display: flex;
align-items: center;
margin-left: auto;
}
.wk-conversationlist-item-selected .wk-conversationlist-item-time {
color: white;
}
.wk-conversationlist-item-lastmsg {
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--wk-color-font-tip);
overflow: hidden;
font-size: 14px;
min-height: 22px;
}
.wk-conversationlist-item-selected .wk-conversationlist-item-lastmsg {
color: white;
}
.wk-conversationlist-item-selected {
background-color: var(--wk-color-theme);
border-radius: 10px;
}
.wk-mention {
color: red;
}
.wk-reminder {
color: red;
}
.wk-onlinestatusbadge {
background-color: var(--wk-color-item);
position: absolute;
padding: 1.5px;
transform: scale(0.6);
right: -10px;
bottom: -5px;
border-radius: 10px;
}
.wk-onlinestatusbadge-empty.wk-onlinestatusbadge {
border-radius: 50%;
right: -1px;
bottom: -1px;
}
.wk-onlinestatusbadge-content {
background-color: rgb(238, 249, 233);
padding: 0px 5px;
border-radius: 10px;
}
.wk-onlinestatusbadge-content-tip {
padding: 0px;
font-size: 14px;
color: rgb(124, 208, 83);
}
.wk-onlinestatusbadge-empty .wk-onlinestatusbadge-content {
background-color: rgb(124, 208, 83);
border-radius: 50%;
padding: 0px;
}
.wk-onlinestatusbadge-empty .wk-onlinestatusbadge-content-tip {
padding: 8px;
}
/* ==========================================================================
SKELETON LOADING STYLES
========================================================================== */
.wk-conversationlist-skeleton {
padding: 8px;
}
.wk-conversationlist-skeleton-item {
display: flex;
align-items: center;
padding: 12px 16px;
gap: 12px;
animation: skeletonFadeIn 0.4s ease forwards;
opacity: 0;
}
@keyframes skeletonFadeIn {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.wk-conversationlist-skeleton .wk-skeleton-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(90deg,
#f3f4f6 25%,
#e5e7eb 50%,
#f3f4f6 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
flex-shrink: 0;
}
.wk-conversationlist-skeleton .wk-skeleton-content {
flex: 1 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.wk-conversationlist-skeleton .wk-skeleton-name {
width: 60%;
height: 16px;
border-radius: 4px;
background: linear-gradient(90deg,
#f3f4f6 25%,
#e5e7eb 50%,
#f3f4f6 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
}
.wk-conversationlist-skeleton .wk-skeleton-message {
width: 80%;
height: 12px;
border-radius: 4px;
background: linear-gradient(90deg,
#f3f4f6 25%,
#e5e7eb 50%,
#f3f4f6 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
animation-delay: 0.2s;
}
@keyframes shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Dark mode skeleton */
body[theme-mode=dark] .wk-conversationlist-skeleton .wk-skeleton-avatar,
body[theme-mode=dark] .wk-conversationlist-skeleton .wk-skeleton-name,
body[theme-mode=dark] .wk-conversationlist-skeleton .wk-skeleton-message {
background: linear-gradient(90deg,
#374151 25%,
#4b5563 50%,
#374151 75%
);
background-size: 200% 100%;
}
/* Reduced motion - disable shimmer */
@media (prefers-reduced-motion: reduce) {
.wk-conversationlist-skeleton .wk-skeleton-avatar,
.wk-conversationlist-skeleton .wk-skeleton-name,
.wk-conversationlist-skeleton .wk-skeleton-message,
.wk-conversationlist-skeleton-item {
animation: none !important;
opacity: 1;
}
.wk-conversationlist-skeleton .wk-skeleton-avatar,
.wk-conversationlist-skeleton .wk-skeleton-name,
.wk-conversationlist-skeleton .wk-skeleton-message {
background: #e5e7eb;
}
body[theme-mode=dark] .wk-conversationlist-skeleton .wk-skeleton-avatar,
body[theme-mode=dark] .wk-conversationlist-skeleton .wk-skeleton-name,
body[theme-mode=dark] .wk-conversationlist-skeleton .wk-skeleton-message {
background: #4b5563;
}
}
/* Screen reader only */
.wk-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Modern Chat Interface - Telegram Blue Professional Design */
/* === MAIN CHAT LAYOUT === */
.wk-chat {
display: flex;
height: 100vh;
/* iOS Safari dynamic viewport height - handles virtual keyboard */
height: 100dvh;
/* Fallback for older iOS Safari */
height: -webkit-fill-available;
width: 100%;
background: #F5F8FA;
background: var(--wk-surface-primary, #F5F8FA);
color: #2d3748;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
overflow: hidden;
position: relative;
}
.wk-chat::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
pointer-events: none;
}
/* === CHAT MENUS POPOVER === */
.wk-chatmenuspopover {
min-width: 180px;
padding: 8px;
animation: popoverSlideIn 0.2s ease-out;
}
@keyframes popoverSlideIn {
from {
opacity: 0;
transform: translateY(-8px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.wk-chatmenuspopover ul {
list-style: none;
margin: 0;
padding: 0;
}
.wk-chatmenuspopover li {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
cursor: pointer;
border-radius: 10px;
transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
margin-bottom: 4px;
}
.wk-chatmenuspopover li:last-child {
margin-bottom: 0;
}
.wk-chatmenuspopover li:hover {
background: rgba(25, 151, 238, 0.08);
transform: translateX(4px);
}
.wk-chatmenuspopover li:active {
transform: translateX(2px) scale(0.98);
}
.wk-chatmenuspopover-avatar {
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(25, 151, 238, 0.12);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s ease;
}
.wk-chatmenuspopover li:hover .wk-chatmenuspopover-avatar {
background: rgba(25, 151, 238, 0.2);
transform: scale(1.05);
}
.wk-chatmenuspopover-avatar img {
height: 20px;
width: 20px;
-o-object-fit: contain;
object-fit: contain;
}
.wk-chatmenuspopover-title {
font-size: 14px;
font-weight: 500;
color: #2d3748;
color: var(--wk-color-text, #2d3748);
transition: color 0.2s ease;
}
.wk-chatmenuspopover li:hover .wk-chatmenuspopover-title {
color: var(--wk-color-brand-500);
}
/* Dark mode */
body[theme-mode=dark] .wk-chatmenuspopover li:hover {
background: rgba(25, 151, 238, 0.12);
}
body[theme-mode=dark] .wk-chatmenuspopover-avatar {
background: rgba(25, 151, 238, 0.15);
}
body[theme-mode=dark] .wk-chatmenuspopover-title {
color: rgba(255, 255, 255, 0.9);
}
body[theme-mode=dark] .wk-chatmenuspopover li:hover .wk-chatmenuspopover-title {
color: var(--wk-color-brand-400);
}
/* Semi UI Popover container styling */
.semi-popover-wrapper-show .semi-popover {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
overflow: hidden;
}
body[theme-mode=dark] .semi-popover-wrapper-show .semi-popover {
background: rgba(30, 35, 45, 0.95) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
/* Modal styling improvements - removed to avoid conflicts with telegram-tokens.css */
/* Global modal styles are now in telegram-tokens.css */
.wk-chat-content {
display: flex;
height: 100%;
width: 100%;
position: relative;
transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* === LEFT SIDEBAR === */
.wk-chat-content-left {
width: 320px;
height: 100%;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-right: 1px solid rgba(25, 151, 238, 0.15);
flex-shrink: 0;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 2px 0 20px rgba(25, 151, 238, 0.1);
}
/* Sidebar collapsed state */
.wk-chat-content.wk-sidebar-collapsed .wk-chat-content-left {
width: 0;
transform: translateX(-100%);
border-right: none;
overflow: hidden;
visibility: hidden;
opacity: 0;
}
/* === MAIN CONTENT AREA === */
.wk-chat-content-right {
flex: 1 1;
height: 100%;
display: flex;
flex-direction: row;
/* Thay đổi thành row để chứa chat + sidebar */
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
min-width: 0;
position: relative;
transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
overflow: hidden;
}
/* Khi sidebar đóng, content mở rộng toàn bộ */
.wk-chat-content-right.wk-chat-channelsetting-closed {
width: 100%;
}
/* Khi sidebar mở, content chia sẻ không gian */
.wk-chat-content-right.wk-chat-channelsetting-open {
width: 100%;
}
/* === CHAT CONTENT CONTAINER === */
.wk-chat-content-chat {
flex: 1 1;
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
position: relative;
overflow: hidden;
transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* Khi sidebar đóng, chat có hiệu ứng mở rộng */
.wk-chat-content-right.wk-chat-channelsetting-closed .wk-chat-content-chat {
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 8px 32px rgba(25, 151, 238, 0.15);
}
/* Khi sidebar đóng, chat area mở rộng toàn bộ */
.wk-chat-content-right.wk-chat-channelsetting-closed .wk-chat-content-chat {
width: 100% !important;
max-width: 100% !important;
flex: 1 1;
}
/* Khi sidebar mở, chat area chia sẻ không gian */
.wk-chat-content-right.wk-chat-channelsetting-open .wk-chat-content-chat {
width: calc(100% - 320px);
max-width: calc(100% - 320px);
flex: 1 1;
}
/* === SIDEBAR TOGGLE BUTTON === */
.wk-sidebar-toggle {
position: fixed;
top: 1.5rem;
left: 1.5rem;
width: 44px;
height: 44px;
background: rgba(25, 151, 238, 0.9);
backdrop-filter: blur(10px);
border: none;
border-radius: 12px;
color: white;
cursor: pointer;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(25, 151, 238, 0.3);
transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.wk-sidebar-toggle:hover {
background: rgba(59, 130, 246, 0.95);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(25, 151, 238, 0.4);
}
.wk-sidebar-toggle svg {
width: 20px;
height: 20px;
transition: transform 300ms ease;
}
.wk-chat-content.wk-sidebar-collapsed .wk-sidebar-toggle svg {
transform: rotate(180deg);
}
/* === CHAT SEARCH HEADER === */
.wk-chat-search {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(25, 151, 238, 0.12);
padding: 1.25rem 1.5rem;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
box-shadow: 0 2px 16px rgba(25, 151, 238, 0.08);
}
.wk-chat-search-left {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1 1;
}
.wk-chat-search-right {
display: flex;
align-items: center;
gap: 0.5rem;
}
.wk-chat-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--wk-color-brand-500);
color: var(--wk-color-brand-500, var(--wk-color-brand-500));
margin: 0;
letter-spacing: -0.02em;
}
.wk-chat-title-connecting {
font-size: 1.5rem;
font-weight: 700;
color: #EF4444;
margin: 0;
letter-spacing: -0.02em;
}
.wk-chat-title-disconnected {
font-size: 1rem;
font-weight: 700;
color: #DC2626;
margin: 0;
letter-spacing: -0.02em;
}
.wk-chat-title-actionable {
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
color: #DC2626;
font-size: 18px;
font-weight: bold;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.wk-chat-title-actionable:focus-visible {
outline: 2px solid rgba(220, 38, 38, 0.6);
outline-offset: 2px;
}
.wk-chat-title-actionable span {
font: inherit;
color: inherit;
}
.wk-header-search-icon {
width: 40px;
height: 40px;
background: rgba(25, 151, 238, 0.1);
border: none;
border-radius: 10px;
color: var(--wk-color-brand-500);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
}
.wk-header-search-icon:hover {
background: rgba(25, 151, 238, 0.15);
color: var(--wk-color-brand-600);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(25, 151, 238, 0.2);
}
.wk-header-search-icon svg {
width: 18px;
height: 18px;
}
.wk-chat-search-add {
width: 40px;
height: 40px;
background: var(--wk-color-brand-500);
background: var(--wk-color-brand-500, var(--wk-color-brand-500));
border: none;
border-radius: 12px;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 2px 8px rgba(25, 151, 238, 0.3);
position: relative;
overflow: hidden;
}
/* Subtle glow pulse animation */
.wk-chat-search-add::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 14px;
background: var(--wk-color-brand-600);
background: var(--wk-color-brand-600, var(--wk-color-brand-600));
opacity: 0;
z-index: -1;
animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
0%,
100% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(1.1);
}
}
/* Ripple effect */
.wk-chat-search-add::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
transform: scale(0);
opacity: 0;
transition: transform 0.5s ease, opacity 0.3s ease;
}
.wk-chat-search-add:active::after {
transform: scale(2);
opacity: 1;
transition: transform 0s, opacity 0s;
}
.wk-chat-search-add:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 20px rgba(25, 151, 238, 0.45);
background: var(--wk-color-brand-600);
background: var(--wk-color-brand-600, var(--wk-color-brand-600));
}
.wk-chat-search-add:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 2px 8px rgba(25, 151, 238, 0.3);
}
.wk-chat-search-add svg {
width: 18px;
height: 18px;
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.wk-chat-search-add:hover svg {
transform: rotate(90deg);
}
/* === ACTIVE USERS LIST === */
.wk-active-users-list {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(25, 151, 238, 0.12);
padding: 0.75rem 1rem;
flex-shrink: 0;
}
.wk-active-users-list-content {
display: flex;
flex-wrap: nowrap;
gap: 0.75rem;
overflow-x: auto;
overflow-y: hidden;
padding: 0.25rem 0;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE and Edge */
}
.wk-active-users-list-content::-webkit-scrollbar {
display: none;
/* Chrome, Safari, Opera */
}
.wk-active-users-list-item {
position: relative;
cursor: pointer;
transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
width: 70px;
}
.wk-active-users-list-item:hover {
transform: translateY(-2px);
}
.wk-active-users-list-item-avatar {
position: relative;
width: 48px;
height: 48px;
flex-shrink: 0;
}
.wk-active-users-list-item-avatar .wk-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid rgba(25, 151, 238, 0.2);
transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.wk-active-users-list-item:hover .wk-active-users-list-item-avatar .wk-avatar {
border-color: rgba(25, 151, 238, 0.4);
box-shadow: 0 2px 8px rgba(25, 151, 238, 0.2);
}
.wk-active-users-list-item-status-badge {
background-color: rgba(255, 255, 255, 0.95);
position: absolute;
padding: 2px;
right: -2px;
bottom: -2px;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
z-index: 1;
}
.wk-active-users-list-item-status-badge-empty {
border-radius: 50%;
right: -2px;
bottom: -2px;
padding: 0;
}
.wk-active-users-list-item-status-badge-content {
background-color: #10b981;
padding: 1px 4px;
border-radius: 12px;
min-width: 12px;
min-height: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.wk-active-users-list-item-status-badge-empty .wk-active-users-list-item-status-badge-content {
background-color: #10b981;
border-radius: 50%;
padding: 0;
width: 12px;
height: 12px;
min-width: 12px;
min-height: 12px;
}
.wk-active-users-list-item-status-badge-text {
font-size: 8px;
color: white;
font-weight: 600;
white-space: nowrap;
line-height: 1;
padding: 0 2px;
}
.wk-active-users-list-item-status-badge-empty .wk-active-users-list-item-status-badge-text {
display: none;
}
.wk-active-users-list-item-name {
font-size: 12px;
color: #666;
color: var(--wk-text-muted, #666);
text-align: center;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
font-weight: 500;
}
body[theme-mode=dark] .wk-active-users-list-item-name {
color: #999;
color: var(--wk-text-muted, #999);
}
/* Dark mode support for active users list */
body[theme-mode=dark] .wk-active-users-list {
background: rgba(16, 20, 25, 0.95);
border-bottom-color: rgba(25, 151, 238, 0.15);
}
body[theme-mode=dark] .wk-active-users-list-item-avatar .wk-avatar {
border-color: rgba(25, 151, 238, 0.3);
}
body[theme-mode=dark] .wk-active-users-list-item:hover .wk-active-users-list-item-avatar .wk-avatar {
border-color: rgba(25, 151, 238, 0.5);
box-shadow: 0 2px 8px rgba(25, 151, 238, 0.3);
}
body[theme-mode=dark] .wk-active-users-list-item-status-badge {
background-color: rgba(16, 20, 25, 0.95);
box-shadow: 0 0 0 2px rgba(16, 20, 25, 0.95);
}
/* === CONVERSATION LIST === */
.wk-chat-conversation-list {
flex: 1 1;
overflow-y: auto;
background: transparent;
padding: 0.5rem 0;
}
.wk-chat-conversation-list-loading {
padding: 2rem;
text-align: center;
color: var(--wk-color-brand-500);
font-size: 0.875rem;
font-weight: 500;
}
/* === CONVERSATION AREA === */
.wk-chat-conversation {
flex: 1 1;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
position: relative;
overflow: hidden;
box-shadow: 0 8px 32px rgba(25, 151, 238, 0.1);
transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* Khi sidebar đóng, conversation area có thể mở rộng thêm */
.wk-chat-content-page:not(.wk-chat-channelsetting-open) .wk-chat-conversation {
box-shadow: 0 8px 32px rgba(25, 151, 238, 0.15);
background: rgba(255, 255, 255, 0.5);
}
.wk-chat-conversation::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
pointer-events: none;
z-index: 0;
}
/* === CHAT CONTENT PAGE LAYOUT === */
.wk-chat-content-page {
flex: 1 1;
height: 100%;
display: flex;
flex-direction: row;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
min-width: 0;
position: relative;
transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
overflow: hidden;
width: 100%;
}
/* Khi sidebar đóng, page mở rộng toàn bộ */
.wk-chat-content-page.wk-chat-channelsetting-closed {
width: 100%;
max-width: 100%;
}
.wk-chat-conversation-container {
flex: 1 1;
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
position: relative;
overflow: hidden;
transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* Khi sidebar đóng, conversation container mở rộng toàn bộ màn hình */
.wk-chat-content-page.wk-chat-channelsetting-closed .wk-chat-conversation-container {
width: 100%;
max-width: 100%;
flex: 1 1;
}
/* Khi sidebar mở, conversation container chia sẻ không gian */
.wk-chat-content-page.wk-chat-channelsetting-open .wk-chat-conversation-container {
width: calc(100% - 320px);
max-width: calc(100% - 320px);
}
/* === CHANNEL SETTING SIDEBAR === */
.wk-chat-channelsetting {
width: 320px;
background: #FFFFFF;
background: var(--wk-surface-elevated, #FFFFFF);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-left: 1px solid rgba(30, 150, 213, 0.15);
position: relative;
overflow-y: auto;
flex-shrink: 0;
transform: translateX(0);
/* Mặc định hiển thị */
transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
box-shadow:
-4px 0 30px rgba(30, 150, 213, 0.12),
-2px 0 15px rgba(30, 150, 213, 0.08),
inset 1px 0 0 rgba(255, 255, 255, 0.5);
z-index: 100;
z-index: var(--z-dropdown, 100);
will-change: transform;
}
/* Glass morphism overlay */
.wk-chat-channelsetting::before {
content: '';
position: absolute;
inset: 0;
background: transparent;
pointer-events: none;
z-index: 1;
z-index: var(--z-base, 1);
}
/* Khi mở sidebar */
.wk-chat-content-right.wk-chat-channelsetting-open .wk-chat-channelsetting {
transform: translateX(0);
width: 320px;
opacity: 1;
visibility: visible;
}
/* === COMPANY SELECTOR STYLES === */
.wk-company-selector-avatar {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
overflow: hidden;
border: 2px solid rgba(30, 150, 213, 0.2);
background: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
}
.wk-company-selector-avatar:hover {
border-color: rgba(30, 150, 213, 0.5);
box-shadow: 0 4px 12px rgba(30, 150, 213, 0.2);
transform: translateY(-2px) scale(1.05);
}
.wk-company-selector-avatar-img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
}
.wk-company-selector-avatar-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--wk-color-brand-600);
background: var(--wk-color-brand-500, var(--wk-color-brand-600));
color: white;
border-radius: 50%;
}
.wk-company-selector-avatar-loading {
cursor: not-allowed;
opacity: 0.7;
}
.wk-company-selector-avatar-loading:hover {
transform: none;
box-shadow: none;
}
.wk-company-selector-avatar-loading-spinner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(30, 150, 213, 0.1);
border-radius: 50%;
}
.wk-company-selector-avatar-disconnected {
border-color: #e53e3e !important;
}
.wk-company-selector-avatar-connecting {
border-color: #e53e3e !important;
animation: pulse-border 1.5s ease-in-out infinite;
}
@keyframes pulse-border {
0% {
border-color: #e53e3e;
box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4);
}
50% {
border-color: #fc8181;
box-shadow: 0 0 0 4px rgba(229, 62, 62, 0.2);
}
100% {
border-color: #e53e3e;
box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4);
}
}
.wk-company-selector-popover {
background: white;
border: none;
overflow: hidden;
min-width: 300px;
max-width: 360px;
backdrop-filter: blur(10px);
}
.wk-company-selector-header {
padding: 20px 24px 16px;
border-bottom: 1px solid rgba(30, 150, 213, 0.08);
background: #f8fbff;
background: var(--wk-surface-elevated, #f8fbff);
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.wk-company-selector-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: rgba(30, 150, 213, 0.2);
}
.wk-company-selector-header span {
font-size: 14px;
font-weight: 600;
color: #2d3748;
}
.wk-company-selector-list {
max-height: 300px;
overflow-y: auto;
}
.wk-company-selector-item {
display: flex;
align-items: center;
padding: 16px 24px;
cursor: pointer;
transition: all 0.3s ease;
border-bottom: 1px solid rgba(30, 150, 213, 0.03);
position: relative;
margin: 0 2px;
border-radius: 4px;
}
.wk-company-selector-item:hover {
background: rgba(30, 150, 213, 0.06);
transform: translateX(2px);
box-shadow: 0 2px 8px rgba(30, 150, 213, 0.1);
}
.wk-company-selector-item-active {
background: rgba(30, 150, 213, 0.08);
border-left: 4px solid var(--wk-color-brand-600);
box-shadow: 0 2px 12px rgba(30, 150, 213, 0.15);
}
.wk-company-selector-item-active:hover {
background: rgba(30, 150, 213, 0.12);
transform: translateX(2px);
}
.wk-company-selector-item-logo {
width: 36px;
height: 36px;
border-radius: 8px;
overflow: hidden;
margin-right: 14px;
flex-shrink: 0;
border: 2px solid rgba(30, 150, 213, 0.1);
transition: all 0.3s ease;
}
.wk-company-selector-item:hover .wk-company-selector-item-logo {
border-color: rgba(30, 150, 213, 0.2);
transform: scale(1.05);
}
.wk-company-selector-item-logo img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.wk-company-selector-item-info {
flex: 1 1;
min-width: 0;
}
.wk-company-selector-item-name {
font-size: 15px;
font-weight: 600;
color: #2d3748;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 3px;
transition: color 0.3s ease;
}
.wk-company-selector-item:hover .wk-company-selector-item-name {
color: var(--wk-color-brand-600);
}
.wk-company-selector-item-code {
font-size: 13px;
color: #718096;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
}
.wk-company-selector-item-indicator {
margin-left: 8px;
color: var(--wk-color-brand-600);
flex-shrink: 0;
}
.wk-company-selector-empty {
padding: 20px;
text-align: center;
color: #718096;
font-size: 14px;
}
.wk-company-selector-add-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(30, 150, 213, 0.1);
border: 1px solid rgba(30, 150, 213, 0.2);
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
color: var(--wk-color-brand-600);
font-size: 12px;
font-weight: 500;
white-space: nowrap;
}
.wk-company-selector-add-btn:hover {
background: rgba(30, 150, 213, 0.15);
border-color: rgba(30, 150, 213, 0.3);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(30, 150, 213, 0.15);
}
/* ==========================================================================
MOBILE RESPONSIVE - Compact Company Selector Popover
========================================================================== */
@media (max-width: 768px) {
.wk-company-selector-popover {
min-width: 220px;
max-width: 280px;
}
.wk-company-selector-header {
padding: 10px 12px 8px;
}
.wk-company-selector-header span {
font-size: 12px;
}
.wk-company-selector-add-btn {
padding: 4px 8px;
font-size: 10px;
gap: 4px;
}
.wk-company-selector-add-btn svg {
width: 10px;
height: 10px;
}
.wk-company-selector-list {
max-height: 200px;
}
.wk-company-selector-item {
padding: 8px 12px;
}
.wk-company-selector-item-logo {
width: 28px;
height: 28px;
margin-right: 10px;
border-radius: 6px;
}
.wk-company-selector-item-name {
font-size: 13px;
margin-bottom: 1px;
}
.wk-company-selector-item-code {
font-size: 11px;
}
.wk-company-selector-item-indicator {
margin-left: 6px;
}
.wk-company-selector-item-indicator svg {
width: 14px;
height: 14px;
}
.wk-company-selector-empty {
padding: 12px;
font-size: 12px;
}
.wk-company-selector-item-active {
border-left-width: 3px;
}
}
/* Toast z-index fix */
.semi-toast-container {
z-index: 9999 !important;
z-index: var(--z-max, 9999) !important;
}
.semi-toast {
z-index: 9999 !important;
z-index: var(--z-max, 9999) !important;
}
/* Toast wrapper z-index fix for dynamic classes */
[class*="toast-wrapper"] {
z-index: 9999 !important;
z-index: var(--z-max, 9999) !important;
}
.semi-portal {
z-index: 9999 !important;
z-index: var(--z-max, 9999) !important;
}
/* Join Company Modal Styles */
.wk-join-company-modal {
padding: 20px;
}
.wk-join-company-header {
text-align: center;
margin-bottom: 24px;
}
.wk-join-company-header h3 {
margin: 0 0 8px 0;
font-size: 18px;
font-weight: 600;
color: #2d3748;
}
.wk-join-company-header p {
margin: 0;
font-size: 14px;
color: #718096;
}
.wk-join-company-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.wk-join-company-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
}
/* Khi đóng sidebar - ẩn hoàn toàn để chat mở rộng hết màn hình */
.wk-chat-content-right.wk-chat-channelsetting-closed .wk-chat-channelsetting {
transform: translateX(100%);
width: 0 !important;
min-width: 0 !important;
opacity: 0;
visibility: hidden;
padding: 0;
margin: 0;
border: none;
box-shadow: none;
flex-shrink: 0;
position: absolute;
/* Đưa ra khỏi flow để không chiếm space */
right: -320px;
/* Di chuyển hoàn toàn ra khỏi view */
}
/* Channel setting backdrop for mobile only */
.wk-chat-channelsetting-backdrop {
display: none;
/* Ẩn mặc định trên desktop */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(4px);
z-index: 150;
opacity: 0;
transition: opacity 300ms ease;
}
/* Không hiển thị backdrop trên desktop khi sidebar mở */
@media (min-width: 1025px) {
.wk-chat-channelsetting-backdrop {
display: none !important;
}
}
.wk-chat-content-page.wk-chat-channelsetting-open .wk-chat-channelsetting-backdrop {
opacity: 1;
}
/* === CONVERSATION HEADER === */
.wk-chat-conversation-header {
padding: 1rem 1.5rem;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(25, 151, 238, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
cursor: pointer;
transition: all 300ms ease;
position: relative;
z-index: 10;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Glassmorphism scrolled state */
.wk-header-scrolled {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
box-shadow:
0 4px 20px rgba(25, 151, 238, 0.1),
0 1px 3px rgba(0, 0, 0, 0.05);
border-bottom-color: rgba(25, 151, 238, 0.2);
}
body[theme-mode=dark] .wk-header-scrolled {
background: rgba(16, 20, 25, 0.95);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.3),
0 1px 3px rgba(0, 0, 0, 0.2);
}
.wk-chat-conversation-header:focus {
outline: 2px solid var(--wk-color-brand-500);
outline-offset: -2px;
}
.wk-chat-conversation-header:hover {
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 8px rgba(25, 151, 238, 0.1);
}
.wk-chat-conversation-header:active {
transform: scale(0.998);
background: rgba(255, 255, 255, 1);
}
.wk-chat-conversation-header-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.wk-chat-conversation-header-left {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1 1;
min-width: 0;
}
.wk-chat-conversation-header-right {
display: flex;
align-items: center;
gap: 0.5rem;
}
.wk-chat-conversation-header-back {
display: none;
width: 36px;
height: 36px;
background: none;
border: none;
cursor: pointer;
border-radius: 8px;
transition: background-color 300ms ease;
align-items: center;
justify-content: center;
}
.wk-chat-conversation-header-back:hover {
background: rgba(25, 151, 238, 0.1);
}
.wk-chat-conversation-header-back-icon {
width: 20px;
height: 20px;
background: url("data:image/svg+xml,") center no-repeat;
}
.wk-chat-conversation-header-channel {
display: flex;
align-items: center;
gap: 0.75rem;
flex: 1 1;
min-width: 0;
}
.wk-chat-conversation-header-channel-avatar-wrapper {
flex-shrink: 0;
width: 44px;
height: 44px;
position: relative;
}
@media (max-width: 768px) {
.wk-chat-conversation-header-channel-avatar-wrapper {
width: auto;
height: auto;
}
}
.wk-chat-conversation-header-channel-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: visible;
position: relative;
}
.wk-chat-conversation-header-channel-avatar img {
width: 44px;
height: 44px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
border: 2px solid rgba(25, 151, 238, 0.2);
box-shadow: 0 4px 12px rgba(25, 151, 238, 0.1);
}
.wk-chat-conversation-header-channel-avatar-online-badge {
background-color: rgba(255, 255, 255, 0.95);
position: absolute;
padding: 2px;
right: -2px;
bottom: -2px;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
z-index: 1;
}
.wk-chat-conversation-header-channel-avatar-online-badge::before {
content: '';
display: block;
background-color: #10b981;
border-radius: 50%;
width: 12px;
height: 12px;
}
body[theme-mode=dark] .wk-chat-conversation-header-channel-avatar-online-badge {
background-color: rgba(16, 20, 25, 0.95);
box-shadow: 0 0 0 2px rgba(16, 20, 25, 0.95);
}
/* Online badge pulse animation */
.wk-chat-conversation-header-channel-avatar-online-badge::before {
animation: onlinePulse 2s ease-in-out infinite;
}
@keyframes onlinePulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
}
50% {
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
}
}
/* Quick action button active states */
.wk-header-quick-action {
padding: 8px;
}
.wk-header-action-active {
background: rgba(30, 150, 213, 0.15) !important;
border-color: rgba(30, 150, 213, 0.3) !important;
}
.wk-header-action-active:hover {
background: rgba(30, 150, 213, 0.25) !important;
}
.wk-chat-conversation-header-channel-info {
flex: 1 1;
min-width: 0;
}
.wk-chat-conversation-header-channel-info-name {
font-size: 1rem;
font-weight: 600;
color: #2d3748;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.25;
}
.wk-chat-conversation-header-channel-info-tip {
font-size: 0.8125rem;
color: var(--wk-color-brand-500);
margin: 0;
line-height: 1;
font-weight: 500;
}
.wk-chat-conversation-header-channel-info-status-online {
color: #10b981;
font-size: 0.8125rem;
font-weight: 500;
}
.wk-chat-conversation-header-channel-info-status-recent {
color: var(--wk-color-brand-400);
font-size: 0.8125rem;
font-weight: 500;
}
.wk-chat-conversation-header-channel-info-status-offline {
color: #9ca3af;
font-size: 0.8125rem;
font-weight: 500;
}
body[theme-mode=dark] .wk-chat-conversation-header-channel-info-status-online {
color: #34d399;
}
body[theme-mode=dark] .wk-chat-conversation-header-channel-info-status-recent {
color: #93c5fd;
}
body[theme-mode=dark] .wk-chat-conversation-header-channel-info-status-offline {
color: #6b7280;
}
/* Typing indicator styles */
.wk-chat-conversation-header-channel-info-status-typing {
color: #1E96D5;
color: var(--wk-color-brand-500, #1E96D5);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 2px;
}
.wk-typing-dots {
display: inline-flex;
align-items: center;
margin-left: 2px;
}
.wk-typing-dots span {
animation: typingDot 1.4s ease-in-out infinite;
opacity: 0.4;
}
.wk-typing-dots span:nth-child(1) {
animation-delay: 0s;
}
.wk-typing-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.wk-typing-dots span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes typingDot {
0%,
60%,
100% {
opacity: 0.4;
}
30% {
opacity: 1;
}
}
body[theme-mode=dark] .wk-chat-conversation-header-channel-info-status-typing {
color: #60a5fa;
}
/* Group status styles */
.wk-chat-conversation-header-channel-info-status-group {
color: #6b7280;
color: var(--wk-color-neutral-500, #6b7280);
font-size: 12px;
display: flex;
align-items: center;
gap: 4px;
}
body[theme-mode=dark] .wk-chat-conversation-header-channel-info-status-group {
color: #9ca3af;
}
/* Inline search bar */
.wk-chat-header-search-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(25, 151, 238, 0.1);
animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wk-header-search-input {
flex: 1 1;
}
.wk-header-search-input .semi-input-wrapper {
border-radius: 20px;
background: rgba(30, 150, 213, 0.05);
border-color: rgba(30, 150, 213, 0.15);
}
.wk-header-search-input .semi-input-wrapper:focus-within {
border-color: var(--wk-color-brand-500);
box-shadow: 0 0 0 3px rgba(30, 150, 213, 0.1);
}
body[theme-mode=dark] .wk-chat-header-search-bar {
background: rgba(16, 20, 25, 0.95);
}
/* Call button hover effects */
.wk-header-call-btn:hover {
background: rgba(16, 185, 129, 0.15) !important;
border-color: rgba(16, 185, 129, 0.3) !important;
}
.wk-header-call-btn:hover svg {
transform: scale(1.1);
}
/* Group Info Modal */
.wk-group-info-modal .semi-modal-content {
border-radius: 16px !important;
overflow: hidden;
}
.wk-group-info-modal .semi-modal-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
padding: 16px 20px !important;
}
.wk-group-info-modal .semi-modal-body {
padding: 0 !important;
}
.wk-group-modal-content {
padding: 0;
}
.wk-group-modal-header {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: linear-gradient(135deg, rgba(30, 150, 213, 0.05) 0%, rgba(30, 150, 213, 0.02) 100%);
}
.wk-group-modal-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
border: 3px solid rgba(30, 150, 213, 0.15);
flex-shrink: 0;
}
.wk-group-modal-info {
flex: 1 1;
min-width: 0;
}
.wk-group-modal-name {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #1f2937;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
}
.wk-group-modal-members {
margin: 6px 0 0;
font-size: 14px;
color: #6b7280;
}
/* Send Message Button */
.wk-group-modal-send-btn {
margin: 16px 20px !important;
width: calc(100% - 40px) !important;
border-radius: 8px !important;
height: 44px !important;
font-size: 15px !important;
font-weight: 500 !important;
background-color: #f3f4f6 !important;
color: #1f2937 !important;
border: none !important;
}
.wk-group-modal-send-btn:hover {
background-color: #e5e7eb !important;
}
/* Option Rows */
.wk-group-modal-option {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
cursor: pointer;
transition: background-color 0.2s ease;
color: #374151;
}
.wk-group-modal-option:hover {
background-color: rgba(0, 0, 0, 0.04);
}
.wk-group-modal-option-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(30, 150, 213, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #1E96D5;
}
.wk-group-modal-option span {
flex: 1 1;
font-size: 15px;
font-weight: 500;
}
.wk-group-modal-option-arrow {
color: #9ca3af;
}
/* Danger Option (Leave Group) */
.wk-group-modal-option-danger {
color: #ef4444;
border-top: 1px solid rgba(0, 0, 0, 0.06);
margin-top: 8px;
}
.wk-group-modal-option-danger .wk-group-modal-option-icon {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.wk-group-modal-option-danger:hover {
background-color: rgba(239, 68, 68, 0.04);
}
/* ========================================
GROUP INFO MODAL V2 - CLEAN DESIGN
(No gradients, matching MeInfo style)
======================================== */
/* Modal Container */
.wk-group-info-modal-v2 .semi-modal-content {
border-radius: 16px !important;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.wk-group-info-modal-v2 .semi-modal-header {
display: none !important;
}
.wk-group-info-modal-v2 .semi-modal-body {
padding: 0 !important;
}
.wk-group-modal-v2 {
padding: 0;
background: #ffffff;
}
body[theme-mode=dark] .wk-group-modal-v2 {
background: #1F2937;
background: var(--wk-color-neutral-800, #1F2937);
}
/* Header Section */
.wk-group-modal-v2-header {
display: flex;
align-items: center;
gap: 16px;
padding: 24px 20px;
border-bottom: 1px solid #E5E7EB;
border-bottom: 1px solid var(--wk-color-neutral-200, #E5E7EB);
}
body[theme-mode=dark] .wk-group-modal-v2-header {
border-bottom-color: #374151;
border-bottom-color: var(--wk-color-neutral-700, #374151);
}
/* Avatar */
.wk-group-modal-v2-avatar-wrapper {
flex-shrink: 0;
}
.wk-group-modal-v2-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
border: 3px solid #1E96D5;
border: 3px solid var(--wk-color-brand-500, #1E96D5);
box-shadow: 0 4px 12px rgba(30, 150, 213, 0.15);
transition: transform 0.2s ease;
}
.wk-group-modal-v2-avatar:hover {
transform: scale(1.03);
}
body[theme-mode=dark] .wk-group-modal-v2-avatar {
border-color: #47A7DF;
border-color: var(--wk-color-brand-400, #47A7DF);
}
/* Info */
.wk-group-modal-v2-info {
flex: 1 1;
min-width: 0;
}
.wk-group-modal-v2-name {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #111827;
color: var(--wk-color-neutral-900, #111827);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body[theme-mode=dark] .wk-group-modal-v2-name {
color: #F3F4F6;
color: var(--wk-color-neutral-100, #F3F4F6);
}
.wk-group-modal-v2-meta {
margin: 4px 0 0;
font-size: 14px;
color: #6B7280;
color: var(--wk-color-neutral-500, #6B7280);
}
body[theme-mode=dark] .wk-group-modal-v2-meta {
color: #9CA3AF;
color: var(--wk-color-neutral-400, #9CA3AF);
}
/* Actions Section */
.wk-group-modal-v2-actions {
padding: 16px 20px;
border-bottom: 1px solid #E5E7EB;
border-bottom: 1px solid var(--wk-color-neutral-200, #E5E7EB);
}
body[theme-mode=dark] .wk-group-modal-v2-actions {
border-bottom-color: #374151;
border-bottom-color: var(--wk-color-neutral-700, #374151);
}
/* Send Button */
.wk-group-modal-v2-send-btn {
width: 100% !important;
height: 44px !important;
border-radius: 10px !important;
font-size: 15px !important;
font-weight: 500 !important;
background: #1E96D5 !important;
background: var(--wk-color-brand-500, #1E96D5) !important;
border: none !important;
}
.wk-group-modal-v2-send-btn:hover {
background: #1a86c0 !important;
background: var(--wk-color-brand-600, #1a86c0) !important;
}
/* Toggle Actions */
.wk-group-modal-v2-toggles {
display: flex;
gap: 12px;
margin-top: 12px;
}
.wk-group-modal-v2-toggle {
flex: 1 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 8px;
background: #F9FAFB;
background: var(--wk-color-neutral-50, #F9FAFB);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.wk-group-modal-v2-toggle:hover {
background: #F3F4F6;
background: var(--wk-color-neutral-100, #F3F4F6);
}
.wk-group-modal-v2-toggle.wk-toggle-active {
background: rgba(30, 150, 213, 0.1);
border-color: rgba(30, 150, 213, 0.3);
}
.wk-group-modal-v2-toggle.wk-toggle-active .wk-toggle-icon {
color: #1E96D5;
color: var(--wk-color-brand-500, #1E96D5);
}
.wk-toggle-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: #F3F4F6;
background: var(--wk-color-neutral-100, #F3F4F6);
display: flex;
align-items: center;
justify-content: center;
color: #4B5563;
color: var(--wk-color-neutral-600, #4B5563);
transition: all 0.2s ease;
}
.wk-group-modal-v2-toggle:hover .wk-toggle-icon {
background: #E5E7EB;
background: var(--wk-color-neutral-200, #E5E7EB);
}
.wk-group-modal-v2-toggle.wk-toggle-active .wk-toggle-icon {
background: rgba(30, 150, 213, 0.15);
}
.wk-group-modal-v2-toggle span {
font-size: 12px;
font-weight: 500;
color: #374151;
color: var(--wk-color-neutral-700, #374151);
}
body[theme-mode=dark] .wk-group-modal-v2-toggle {
background: #374151;
background: var(--wk-color-neutral-700, #374151);
}
body[theme-mode=dark] .wk-group-modal-v2-toggle:hover {
background: #4B5563;
background: var(--wk-color-neutral-600, #4B5563);
}
body[theme-mode=dark] .wk-group-modal-v2-toggle.wk-toggle-active {
background: rgba(71, 167, 223, 0.15);
border-color: rgba(71, 167, 223, 0.3);
}
body[theme-mode=dark] .wk-toggle-icon {
background: #4B5563;
background: var(--wk-color-neutral-600, #4B5563);
color: #D1D5DB;
color: var(--wk-color-neutral-300, #D1D5DB);
}
body[theme-mode=dark] .wk-group-modal-v2-toggle span {
color: #D1D5DB;
color: var(--wk-color-neutral-300, #D1D5DB);
}
/* Menu Section */
.wk-group-modal-v2-menu {
padding: 8px 0;
}
.wk-group-modal-v2-menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
cursor: pointer;
transition: background-color 0.15s ease;
}
.wk-group-modal-v2-menu-item:hover {
background: #F9FAFB;
background: var(--wk-color-neutral-50, #F9FAFB);
}
body[theme-mode=dark] .wk-group-modal-v2-menu-item:hover {
background: #374151;
background: var(--wk-color-neutral-700, #374151);
}
.wk-menu-item-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(30, 150, 213, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #1E96D5;
color: var(--wk-color-brand-500, #1E96D5);
flex-shrink: 0;
}
body[theme-mode=dark] .wk-menu-item-icon {
background: rgba(71, 167, 223, 0.15);
color: #47A7DF;
color: var(--wk-color-brand-400, #47A7DF);
}
.wk-menu-item-label {
flex: 1 1;
font-size: 15px;
font-weight: 500;
color: #374151;
color: var(--wk-color-neutral-700, #374151);
}
body[theme-mode=dark] .wk-menu-item-label {
color: #E5E7EB;
color: var(--wk-color-neutral-200, #E5E7EB);
}
.wk-menu-item-arrow {
color: #9CA3AF;
color: var(--wk-color-neutral-400, #9CA3AF);
transition: transform 0.15s ease;
}
.wk-group-modal-v2-menu-item:hover .wk-menu-item-arrow {
transform: translateX(2px);
color: #6B7280;
color: var(--wk-color-neutral-500, #6B7280);
}
/* Danger Zone */
.wk-group-modal-v2-danger {
padding: 8px 0 16px;
border-top: 1px solid #E5E7EB;
border-top: 1px solid var(--wk-color-neutral-200, #E5E7EB);
}
body[theme-mode=dark] .wk-group-modal-v2-danger {
border-top-color: #374151;
border-top-color: var(--wk-color-neutral-700, #374151);
}
.wk-menu-item-danger {
color: #ef4444;
}
.wk-menu-item-danger:hover {
background: rgba(239, 68, 68, 0.05) !important;
}
body[theme-mode=dark] .wk-menu-item-danger:hover {
background: rgba(239, 68, 68, 0.1) !important;
}
.wk-menu-item-icon-danger {
background: rgba(239, 68, 68, 0.1) !important;
color: #ef4444 !important;
}
.wk-menu-item-danger .wk-menu-item-label {
color: #ef4444;
}
/* ========================================
GROUP INFO MODAL V3 - REFERENCE DESIGN
Centered layout with member avatars stack
======================================== */
/* Modal Container */
.wk-group-info-modal-v3 .semi-modal-content {
border-radius: 16px !important;
overflow-y: auto;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
max-height: calc(100vh - 80px);
display: flex;
flex-direction: column;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.wk-group-info-modal-v3 .semi-modal-content {
border-radius: 20px 20px 0 0 !important;
max-height: 90vh;
}
/* Position modal at bottom on mobile */
.wk-group-info-modal-v3.semi-modal {
display: flex !important;
align-items: flex-end !important;
}
.wk-group-info-modal-v3 .semi-modal-wrap {
align-items: flex-end !important;
}
}
.wk-group-info-modal-v3 .semi-modal-header {
display: none !important;
}
.wk-group-info-modal-v3 .semi-modal-body {
padding: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
flex: 1 1 auto !important;
min-height: 0 !important;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
.wk-group-info-modal-v3 .semi-modal-body {
max-height: none !important;
}
}
.wk-group-modal-v3 {
padding: 0;
background: #ffffff;
position: relative;
}
/* Mobile slide-up animation */
@media (max-width: 768px) {
.wk-group-info-modal-v3 .semi-modal-content {
animation: slideUpMobile 0.3s ease-out;
}
}
@keyframes slideUpMobile {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.wk-group-info-modal-v3 .semi-modal-body::-webkit-scrollbar {
width: 6px;
}
.wk-group-info-modal-v3 .semi-modal-body::-webkit-scrollbar-track {
background: transparent;
}
.wk-group-info-modal-v3 .semi-modal-body::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
border-radius: 3px;
}
.wk-group-info-modal-v3 .semi-modal-body::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.25);
}
body[theme-mode=dark] .wk-group-modal-v3 {
background: #1F2937;
background: var(--wk-color-neutral-800, #1F2937);
}
body[theme-mode=dark] .wk-group-info-modal-v3 .semi-modal-body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
body[theme-mode=dark] .wk-group-info-modal-v3 .semi-modal-body::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.25);
}
/* Close Button - Fixed at top right */
.wk-group-modal-v3-close-btn {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.05);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #6B7280;
color: var(--wk-color-neutral-500, #6B7280);
transition: all 0.2s ease;
z-index: 10;
}
@media (max-width: 768px) {
.wk-group-modal-v3-close-btn {
width: 40px;
height: 40px;
top: 12px;
right: 12px;
}
}
.wk-group-modal-v3-close-btn:hover {
background: rgba(0, 0, 0, 0.1);
color: #374151;
color: var(--wk-color-neutral-700, #374151);
}
body[theme-mode=dark] .wk-group-modal-v3-close-btn {
background: rgba(255, 255, 255, 0.1);
color: #9CA3AF;
color: var(--wk-color-neutral-400, #9CA3AF);
}
body[theme-mode=dark] .wk-group-modal-v3-close-btn:hover {
background: rgba(255, 255, 255, 0.15);
color: #E5E7EB;
color: var(--wk-color-neutral-200, #E5E7EB);
}
/* Centered Header Section */
.wk-group-modal-v3-header {
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 20px 16px;
text-align: center;
background: #ffffff;
}
@media (max-width: 768px) {
.wk-group-modal-v3-header {
padding: 40px 24px 20px;
}
}
body[theme-mode=dark] .wk-group-modal-v3-header {
background: #1F2937;
background: var(--wk-color-neutral-800, #1F2937);
}
/* Group Avatar */
.wk-group-modal-v3-avatar-wrapper {
margin-bottom: 12px;
}
.wk-group-modal-v3-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
border: 3px solid #ffffff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.wk-group-modal-v3-avatar {
width: 100px;
height: 100px;
border-width: 4px;
}
}
body[theme-mode=dark] .wk-group-modal-v3-avatar {
border-color: #374151;
border-color: var(--wk-color-neutral-700, #374151);
}
/* Group Name */
.wk-group-modal-v3-name {
margin: 0 0 4px 0;
font-size: 20px;
font-weight: 600;
color: #111827;
color: var(--wk-color-neutral-900, #111827);
line-height: 1.3;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 768px) {
.wk-group-modal-v3-name {
font-size: 22px;
max-width: calc(100vw - 80px);
}
}
body[theme-mode=dark] .wk-group-modal-v3-name {
color: #F3F4F6;
color: var(--wk-color-neutral-100, #F3F4F6);
}
/* Meta - Member Count + Created Date */
.wk-group-modal-v3-meta {
margin: 0 0 12px 0;
font-size: 13px;
color: #6B7280;
color: var(--wk-color-neutral-500, #6B7280);
line-height: 1.4;
}
@media (max-width: 768px) {
.wk-group-modal-v3-meta {
font-size: 14px;
margin: 0 0 14px 0;
}
}
body[theme-mode=dark] .wk-group-modal-v3-meta {
color: #9CA3AF;
color: var(--wk-color-neutral-400, #9CA3AF);
}
/* Member Avatars Stack */
.wk-group-modal-v3-members-stack {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 8px 16px;
border-radius: 24px;
background: #F3F4F6;
background: var(--wk-color-neutral-100, #F3F4F6);
transition: all 0.2s ease;
margin: 0 auto;
}
@media (max-width: 768px) {
.wk-group-modal-v3-members-stack {
padding: 10px 20px;
border-radius: 28px;
}
}
.wk-group-modal-v3-members-stack:hover {
background: #E5E7EB;
background: var(--wk-color-neutral-200, #E5E7EB);
transform: scale(1.02);
}
body[theme-mode=dark] .wk-group-modal-v3-members-stack {
background: #374151;
background: var(--wk-color-neutral-700, #374151);
}
body[theme-mode=dark] .wk-group-modal-v3-members-stack:hover {
background: #4B5563;
background: var(--wk-color-neutral-600, #4B5563);
}
/* Member Avatar */
.wk-group-modal-v3-member-avatar {
position: relative;
width: 36px;
height: 36px;
margin-left: -8px;
flex-shrink: 0;
}
.wk-group-modal-v3-member-avatar:first-child {
margin-left: 0;
}
.wk-group-modal-v3-member-avatar img {
width: 36px;
height: 36px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
border: 2px solid #ffffff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease;
}
@media (max-width: 768px) {
.wk-group-modal-v3-member-avatar {
width: 40px;
height: 40px;
margin-left: -10px;
}
.wk-group-modal-v3-member-avatar img {
width: 40px;
height: 40px;
border-width: 2.5px;
}
}
.wk-group-modal-v3-member-avatar:hover img {
transform: scale(1.08);
z-index: 10;
}
body[theme-mode=dark] .wk-group-modal-v3-member-avatar img {
border-color: #374151;
border-color: var(--wk-color-neutral-700, #374151);
}
/* N+ More Button */
.wk-group-modal-v3-member-more {
width: 36px;
height: 36px;
border-radius: 50%;
margin-left: -8px;
background: #1E96D5;
background: var(--wk-color-brand-500, #1E96D5);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #ffffff;
cursor: pointer;
transition: all 0.2s ease;
font-size: 11px;
font-weight: 600;
}
@media (max-width: 768px) {
.wk-group-modal-v3-member-more {
width: 40px;
height: 40px;
margin-left: -10px;
font-size: 12px;
border-width: 2.5px;
}
}
.wk-group-modal-v3-member-more:hover {
background: #1a86c0;
background: var(--wk-color-brand-600, #1a86c0);
color: #ffffff;
transform: scale(1.1);
}
body[theme-mode=dark] .wk-group-modal-v3-member-more {
background: #1E96D5;
background: var(--wk-color-brand-500, #1E96D5);
border-color: #374151;
border-color: var(--wk-color-neutral-700, #374151);
color: #ffffff;
}
body[theme-mode=dark] .wk-group-modal-v3-member-more:hover {
background: #1a86c0;
background: var(--wk-color-brand-600, #1a86c0);
color: #ffffff;
}
/* Actions Section */
.wk-group-modal-v3-actions {
padding: 0 16px 12px;
background: #ffffff;
}
@media (max-width: 768px) {
.wk-group-modal-v3-actions {
padding: 0 20px 20px;
}
}
body[theme-mode=dark] .wk-group-modal-v3-actions {
background: #1F2937;
background: var(--wk-color-neutral-800, #1F2937);
}
/* Send Button */
.wk-group-modal-v3-send-btn {
width: 100% !important;
height: 44px !important;
border-radius: 22px !important;
font-size: 15px !important;
font-weight: 600 !important;
background: #1E96D5 !important;
background: var(--wk-color-brand-500, #1E96D5) !important;
border: none !important;
box-shadow: 0 2px 8px rgba(30, 150, 213, 0.2);
}
@media (max-width: 768px) {
.wk-group-modal-v3-send-btn {
height: 50px !important;
border-radius: 25px !important;
font-size: 16px !important;
}
}
.wk-group-modal-v3-send-btn:hover {
background: #1a86c0 !important;
background: var(--wk-color-brand-600, #1a86c0) !important;
box-shadow: 0 4px 12px rgba(30, 150, 213, 0.3);
}
/* Toggle Actions Row */
.wk-group-modal-v3-toggles {
display: flex;
gap: 12px;
margin-top: 12px;
}
.wk-group-modal-v3-toggle {
flex: 1 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 8px;
background: #F9FAFB;
background: var(--wk-color-neutral-50, #F9FAFB);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
}
@media (max-width: 768px) {
.wk-group-modal-v3-toggles {
gap: 16px;
margin-top: 16px;
}
.wk-group-modal-v3-toggle {
padding: 16px 12px;
border-radius: 14px;
}
}
.wk-group-modal-v3-toggle:hover {
background: #F3F4F6;
background: var(--wk-color-neutral-100, #F3F4F6);
}
.wk-group-modal-v3-toggle.wk-toggle-active {
background: rgba(30, 150, 213, 0.1);
border-color: rgba(30, 150, 213, 0.3);
}
.wk-group-modal-v3-toggle.wk-toggle-active .wk-toggle-icon-v3 {
color: #1E96D5;
color: var(--wk-color-brand-500, #1E96D5);
}
.wk-toggle-icon-v3 {
width: 36px;
height: 36px;
border-radius: 50%;
background: #F3F4F6;
background: var(--wk-color-neutral-100, #F3F4F6);
display: flex;
align-items: center;
justify-content: center;
color: #4B5563;
color: var(--wk-color-neutral-600, #4B5563);
}
@media (max-width: 768px) {
.wk-toggle-icon-v3 {
width: 42px;
height: 42px;
}
}
.wk-group-modal-v3-toggle.wk-toggle-active .wk-toggle-icon-v3 {
background: rgba(30, 150, 213, 0.15);
}
.wk-group-modal-v3-toggle span {
font-size: 12px;
font-weight: 500;
color: #374151;
color: var(--wk-color-neutral-700, #374151);
}
@media (max-width: 768px) {
.wk-group-modal-v3-toggle span {
font-size: 13px;
}
}
body[theme-mode=dark] .wk-group-modal-v3-toggle {
background: #374151;
background: var(--wk-color-neutral-700, #374151);
}
body[theme-mode=dark] .wk-group-modal-v3-toggle:hover {
background: #4B5563;
background: var(--wk-color-neutral-600, #4B5563);
}
body[theme-mode=dark] .wk-toggle-icon-v3 {
background: #4B5563;
background: var(--wk-color-neutral-600, #4B5563);
color: #D1D5DB;
color: var(--wk-color-neutral-300, #D1D5DB);
}
body[theme-mode=dark] .wk-group-modal-v3-toggle span {
color: #D1D5DB;
color: var(--wk-color-neutral-300, #D1D5DB);
}
/* Menu Section */
.wk-group-modal-v3-menu {
padding: 4px 0;
border-top: 1px solid #F3F4F6;
border-top: 1px solid var(--wk-color-neutral-100, #F3F4F6);
margin: 0 8px;
}
@media (max-width: 768px) {
.wk-group-modal-v3-menu {
margin: 0 12px;
padding: 8px 0;
}
}
body[theme-mode=dark] .wk-group-modal-v3-menu {
border-top-color: #374151;
border-top-color: var(--wk-color-neutral-700, #374151);
}
.wk-group-modal-v3-menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
cursor: pointer;
transition: all 0.2s ease;
border-radius: 10px;
margin: 2px 0;
}
@media (max-width: 768px) {
.wk-group-modal-v3-menu-item {
padding: 14px 12px;
gap: 14px;
border-radius: 12px;
}
}
.wk-group-modal-v3-menu-item:hover {
background: #F9FAFB;
background: var(--wk-color-neutral-50, #F9FAFB);
}
body[theme-mode=dark] .wk-group-modal-v3-menu-item:hover {
background: #374151;
background: var(--wk-color-neutral-700, #374151);
}
.wk-menu-item-icon-v3 {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(30, 150, 213, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #1E96D5;
color: var(--wk-color-brand-500, #1E96D5);
flex-shrink: 0;
}
@media (max-width: 768px) {
.wk-menu-item-icon-v3 {
width: 38px;
height: 38px;
border-radius: 10px;
}
}
body[theme-mode=dark] .wk-menu-item-icon-v3 {
background: rgba(71, 167, 223, 0.15);
color: #47A7DF;
color: var(--wk-color-brand-400, #47A7DF);
}
.wk-menu-item-label-v3 {
flex: 1 1;
font-size: 14px;
font-weight: 500;
color: #374151;
color: var(--wk-color-neutral-700, #374151);
}
@media (max-width: 768px) {
.wk-menu-item-label-v3 {
font-size: 15px;
}
}
body[theme-mode=dark] .wk-menu-item-label-v3 {
color: #E5E7EB;
color: var(--wk-color-neutral-200, #E5E7EB);
}
.wk-menu-item-arrow-v3 {
color: #9CA3AF;
color: var(--wk-color-neutral-400, #9CA3AF);
transition: transform 0.15s ease;
}
.wk-group-modal-v3-menu-item:hover .wk-menu-item-arrow-v3 {
transform: translateX(2px);
}
/* Danger Zone */
.wk-group-modal-v3-danger {
border-top: 1px solid #F3F4F6;
border-top: 1px solid var(--wk-color-neutral-100, #F3F4F6);
margin: 0 8px;
padding-bottom: 16px;
}
@media (max-width: 768px) {
.wk-group-modal-v3-danger {
margin: 0 12px;
/* padding: 8px 12px; */
padding-bottom: max(32px, calc(20px + env(safe-area-inset-bottom, 0)));
}
}
body[theme-mode=dark] .wk-group-modal-v3-danger {
border-top-color: #374151;
border-top-color: var(--wk-color-neutral-700, #374151);
}
.wk-menu-item-danger-v3 {
color: #ef4444;
}
.wk-menu-item-danger-v3:hover {
background: rgba(239, 68, 68, 0.05) !important;
}
body[theme-mode=dark] .wk-menu-item-danger-v3:hover {
background: rgba(239, 68, 68, 0.1) !important;
}
.wk-menu-item-icon-danger-v3 {
background: rgba(239, 68, 68, 0.1) !important;
color: #ef4444 !important;
}
.wk-menu-item-danger-v3 .wk-menu-item-label-v3 {
color: #ef4444;
}
/* ========================================
REDESIGNED GROUP INFO MODAL (OLD)
======================================== */
/* Redesigned Modal Container */
.wk-group-info-modal-redesigned .semi-modal-content {
border-radius: 20px !important;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.wk-group-info-modal-redesigned .semi-modal-header {
display: none !important;
}
.wk-group-info-modal-redesigned .semi-modal-body {
padding: 0 !important;
}
.wk-group-modal-content-redesigned {
padding: 0;
animation: modalFadeIn 0.3s ease-out;
max-height: 85vh;
overflow-y: auto;
}
@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.95) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Gradient Header */
.wk-group-modal-header-redesigned {
position: relative;
padding: 0;
text-align: center;
}
.wk-group-modal-header-gradient {
height: 80px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
position: relative;
}
.wk-group-modal-header-gradient::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background: linear-gradient(to top, rgba(255, 255, 255, 1), transparent);
}
body[theme-mode=dark] .wk-group-modal-header-gradient::after {
background: linear-gradient(to top, rgba(32, 36, 42, 1), transparent);
}
/* Avatar Container */
.wk-group-modal-avatar-container {
position: relative;
margin-top: -50px;
z-index: 10;
}
.wk-group-modal-avatar-redesigned {
width: 80px;
height: 80px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
border: 4px solid #ffffff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wk-group-modal-avatar-redesigned:hover {
transform: scale(1.05);
box-shadow: 0 12px 32px rgba(102, 126, 234, 0.3);
}
body[theme-mode=dark] .wk-group-modal-avatar-redesigned {
border-color: #2d3138;
}
/* Info Section */
.wk-group-modal-info-redesigned {
padding: 12px 20px 0;
text-align: center;
}
.wk-group-modal-name-redesigned {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #1f2937;
line-height: 1.3;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body[theme-mode=dark] .wk-group-modal-name-redesigned {
color: #f3f4f6;
}
.wk-group-modal-meta {
margin-top: 6px;
}
.wk-group-modal-member-count {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #6b7280;
background: rgba(30, 150, 213, 0.08);
padding: 4px 12px;
border-radius: 20px;
}
.wk-group-modal-member-count svg {
color: #1E96D5;
}
body[theme-mode=dark] .wk-group-modal-member-count {
color: #9ca3af;
background: rgba(30, 150, 213, 0.15);
}
/* Members Preview */
.wk-group-modal-members-preview {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
margin: 16px 20px 0;
background: rgba(30, 150, 213, 0.05);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.wk-group-modal-members-preview:hover {
background: rgba(30, 150, 213, 0.1);
transform: translateY(-1px);
}
.wk-group-modal-members-stack {
display: flex;
align-items: center;
}
.wk-group-modal-member-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
margin-left: -8px;
border: 2px solid #ffffff;
overflow: hidden;
transition: transform 0.2s ease;
}
.wk-group-modal-member-avatar:first-child {
margin-left: 0;
}
.wk-group-modal-member-avatar:hover {
transform: scale(1.1);
z-index: 10 !important;
}
body[theme-mode=dark] .wk-group-modal-member-avatar {
border-color: #2d3138;
}
.wk-group-modal-member-more {
width: 28px;
height: 28px;
border-radius: 50%;
margin-left: -8px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #ffffff;
font-size: 10px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #ffffff;
}
body[theme-mode=dark] .wk-group-modal-member-more {
border-color: #2d3138;
}
.wk-group-modal-members-label {
flex: 1 1;
font-size: 14px;
font-weight: 500;
color: #374151;
}
body[theme-mode=dark] .wk-group-modal-members-label {
color: #e5e7eb;
}
.wk-group-modal-members-arrow {
color: #9ca3af;
transition: transform 0.2s ease;
}
.wk-group-modal-members-preview:hover .wk-group-modal-members-arrow {
transform: translateX(3px);
}
body[theme-mode=dark] .wk-group-modal-members-preview {
background: rgba(30, 150, 213, 0.1);
}
body[theme-mode=dark] .wk-group-modal-members-preview:hover {
background: rgba(30, 150, 213, 0.15);
}
/* Primary Action Button */
.wk-group-modal-primary-action {
padding: 16px 20px 8px;
}
.wk-group-modal-send-btn-redesigned {
width: 100% !important;
height: 48px !important;
border-radius: 12px !important;
font-size: 15px !important;
font-weight: 600 !important;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
}
.wk-group-modal-send-btn-redesigned:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
}
.wk-group-modal-send-btn-redesigned:active {
transform: translateY(0) !important;
}
.wk-group-modal-send-btn-redesigned svg {
stroke: currentColor;
}
/* Quick Actions Grid */
.wk-group-modal-quick-actions {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 12px;
gap: 12px;
padding: 8px 20px 16px;
}
.wk-group-modal-quick-action {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 12px;
background: #f9fafb;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.wk-group-modal-quick-action:hover {
background: #f3f4f6;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.wk-group-modal-quick-action.wk-quick-action-active {
background: rgba(30, 150, 213, 0.1);
border-color: rgba(30, 150, 213, 0.3);
}
.wk-group-modal-quick-action.wk-quick-action-active .wk-quick-action-icon {
background: linear-gradient(135deg, #667eea, #764ba2);
color: #ffffff;
}
.wk-quick-action-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(30, 150, 213, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #1E96D5;
transition: all 0.2s ease;
}
.wk-group-modal-quick-action span {
font-size: 13px;
font-weight: 500;
color: #374151;
}
body[theme-mode=dark] .wk-group-modal-quick-action {
background: rgba(255, 255, 255, 0.05);
}
body[theme-mode=dark] .wk-group-modal-quick-action:hover {
background: rgba(255, 255, 255, 0.08);
}
body[theme-mode=dark] .wk-group-modal-quick-action.wk-quick-action-active {
background: rgba(30, 150, 213, 0.2);
}
body[theme-mode=dark] .wk-group-modal-quick-action span {
color: #e5e7eb;
}
/* Divider */
.wk-group-modal-divider {
height: 1px;
background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.08), transparent);
margin: 0 20px;
}
body[theme-mode=dark] .wk-group-modal-divider {
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
}
/* Option Cards */
.wk-group-modal-options {
padding: 12px 20px;
}
.wk-group-modal-option-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
margin-bottom: 8px;
background: #f9fafb;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.wk-group-modal-option-card:last-child {
margin-bottom: 0;
}
.wk-group-modal-option-card:hover {
background: #f3f4f6;
transform: translateX(4px);
}
.wk-group-modal-option-icon-redesigned {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(30, 150, 213, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #1E96D5;
flex-shrink: 0;
transition: all 0.2s ease;
}
.wk-group-modal-option-card:hover .wk-group-modal-option-icon-redesigned {
background: rgba(30, 150, 213, 0.15);
transform: scale(1.05);
}
.wk-group-modal-option-label {
flex: 1 1;
font-size: 15px;
font-weight: 500;
color: #374151;
}
.wk-group-modal-option-arrow-redesigned {
color: #9ca3af;
transition: transform 0.2s ease;
}
.wk-group-modal-option-card:hover .wk-group-modal-option-arrow-redesigned {
transform: translateX(3px);
color: #6b7280;
}
body[theme-mode=dark] .wk-group-modal-option-card {
background: rgba(255, 255, 255, 0.05);
}
body[theme-mode=dark] .wk-group-modal-option-card:hover {
background: rgba(255, 255, 255, 0.08);
}
body[theme-mode=dark] .wk-group-modal-option-label {
color: #e5e7eb;
}
/* Danger Zone */
.wk-group-modal-danger-zone {
padding: 0 20px 20px;
margin-top: 8px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
padding-top: 16px;
}
body[theme-mode=dark] .wk-group-modal-danger-zone {
border-top-color: rgba(255, 255, 255, 0.08);
}
.wk-group-modal-option-danger-redesigned {
background: rgba(239, 68, 68, 0.05) !important;
margin-bottom: 0 !important;
}
.wk-group-modal-option-danger-redesigned:hover {
background: rgba(239, 68, 68, 0.1) !important;
}
.wk-group-modal-option-icon-danger {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(239, 68, 68, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #ef4444;
flex-shrink: 0;
transition: all 0.2s ease;
}
.wk-group-modal-option-danger-redesigned:hover .wk-group-modal-option-icon-danger {
background: rgba(239, 68, 68, 0.15);
transform: scale(1.05);
}
.wk-group-modal-option-danger-redesigned .wk-group-modal-option-label {
color: #ef4444;
}
body[theme-mode=dark] .wk-group-modal-option-danger-redesigned {
background: rgba(239, 68, 68, 0.1) !important;
}
body[theme-mode=dark] .wk-group-modal-option-danger-redesigned:hover {
background: rgba(239, 68, 68, 0.15) !important;
}
/* Dark Mode - Old styles preserved for backwards compatibility */
body[theme-mode=dark] .wk-group-info-modal .semi-modal-header {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
body[theme-mode=dark] .wk-group-modal-header {
background: linear-gradient(135deg, rgba(30, 150, 213, 0.08) 0%, rgba(30, 150, 213, 0.03) 100%);
}
body[theme-mode=dark] .wk-group-modal-name {
color: #f3f4f6;
}
body[theme-mode=dark] .wk-group-modal-members {
color: #9ca3af;
}
body[theme-mode=dark] .wk-group-modal-send-btn {
background-color: #374151 !important;
color: #f3f4f6 !important;
}
body[theme-mode=dark] .wk-group-modal-send-btn:hover {
background-color: #4b5563 !important;
}
body[theme-mode=dark] .wk-group-modal-option {
color: #e5e7eb;
}
body[theme-mode=dark] .wk-group-modal-option:hover {
background-color: rgba(255, 255, 255, 0.06);
}
body[theme-mode=dark] .wk-group-modal-option-danger {
border-top-color: rgba(255, 255, 255, 0.08);
}
body[theme-mode=dark] .wk-group-modal-option-danger:hover {
background-color: rgba(239, 68, 68, 0.08);
}
/* Channel info hover card */
.wk-channel-hover-card {
padding: 16px;
min-width: 240px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
border-radius: 12px;
}
.wk-channel-hover-card-header {
display: flex;
align-items: center;
gap: 12px;
}
.wk-channel-hover-card-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.wk-channel-hover-card-info {
flex: 1 1;
min-width: 0;
}
.wk-channel-hover-card-name {
font-size: 16px;
font-weight: 600;
color: #1f2937;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-channel-hover-card-id {
font-size: 12px;
color: #6b7280;
margin-top: 2px;
}
.wk-channel-hover-card-divider {
height: 1px;
background: rgba(30, 150, 213, 0.1);
margin: 12px 0;
}
.wk-channel-hover-card-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 8px;
gap: 8px;
}
.wk-channel-hover-card-stat {
display: flex;
justify-content: space-between;
padding: 6px 10px;
background: rgba(30, 150, 213, 0.05);
border-radius: 8px;
}
.wk-stat-label {
color: #6b7280;
font-size: 12px;
}
.wk-stat-value {
font-size: 12px;
font-weight: 500;
color: #1f2937;
}
.wk-stat-online {
color: #10b981;
}
.wk-stat-offline {
color: #6b7280;
}
body[theme-mode=dark] .wk-channel-hover-card {
background: rgba(30, 35, 45, 0.98);
}
body[theme-mode=dark] .wk-channel-hover-card-name {
color: #f3f4f6;
}
body[theme-mode=dark] .wk-stat-value {
color: #e5e7eb;
}
.wk-chat-conversation-header-right-item {
display: flex;
align-items: center;
cursor: pointer;
padding: 10px;
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
margin: 0 4px;
background: rgba(30, 150, 213, 0.05);
border: 1px solid rgba(30, 150, 213, 0.1);
backdrop-filter: blur(10px);
}
.wk-chat-conversation-header-right-item:hover {
background: rgba(30, 150, 213, 0.15);
border-color: rgba(30, 150, 213, 0.3);
transform: translateY(-2px) scale(1.02);
box-shadow:
0 8px 25px rgba(30, 150, 213, 0.15),
0 4px 10px rgba(0, 0, 0, 0.05);
}
.wk-chat-conversation-header-right-item:hover .wk-header-icon {
fill: var(--wk-color-brand-700) !important;
filter: drop-shadow(0 4px 12px rgba(30, 150, 213, 0.4)) !important;
transform: scale(1.1);
}
.wk-chat-conversation-header-right-item:active {
transform: translateY(-1px) scale(1.01);
background: rgba(30, 150, 213, 0.2);
}
/* Dark mode styles */
body[theme-mode=dark] .wk-chat-conversation-header-right-item {
background: rgba(30, 150, 213, 0.1);
border-color: rgba(30, 150, 213, 0.2);
}
body[theme-mode=dark] .wk-chat-conversation-header-right-item:hover {
background: rgba(30, 150, 213, 0.2);
border-color: rgba(30, 150, 213, 0.4);
box-shadow:
0 8px 25px rgba(30, 150, 213, 0.2),
0 4px 10px rgba(0, 0, 0, 0.3);
}
body[theme-mode=dark] .wk-chat-conversation-header-right-item:hover .wk-header-icon {
fill: var(--wk-color-brand-400) !important;
filter: drop-shadow(0 4px 12px rgba(96, 165, 250, 0.5)) !important;
}
.wk-action-btn {
width: 36px;
height: 36px;
background: rgba(25, 151, 238, 0.1);
border: none;
border-radius: 8px;
color: var(--wk-color-brand-500);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 300ms ease;
}
.wk-action-btn:hover {
background: rgba(25, 151, 238, 0.2);
transform: scale(1.05);
}
.wk-sidebar-toggle-btn {
width: 36px;
height: 36px;
background: rgba(25, 151, 238, 0.1);
border: none;
border-radius: 8px;
color: var(--wk-color-brand-500);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 300ms ease;
}
.wk-sidebar-toggle-btn:hover {
background: rgba(25, 151, 238, 0.2);
transform: scale(1.05);
}
.wk-sidebar-toggle-btn.active {
background: rgba(25, 151, 238, 0.2);
color: #0066aa;
}
.wk-action-btn {
width: 36px;
height: 36px;
background: rgba(25, 151, 238, 0.1);
border: none;
border-radius: 8px;
color: var(--wk-color-brand-500);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.wk-action-btn:hover {
background: rgba(25, 151, 238, 0.15);
color: var(--wk-color-brand-600);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(25, 151, 238, 0.2);
}
.wk-chat-action-button {
width: 36px;
height: 36px;
background: rgba(25, 151, 238, 0.1);
border: none;
border-radius: 8px;
color: var(--wk-color-brand-500);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.wk-chat-action-button:hover {
background: rgba(25, 151, 238, 0.15);
color: var(--wk-color-brand-600);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(25, 151, 238, 0.2);
}
/* === CONVERSATION ITEMS === */
.wk-conversation-item {
padding: 1rem 1.5rem;
border-bottom: 1px solid rgba(25, 151, 238, 0.08);
cursor: pointer;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 0;
margin: 0 0.5rem;
margin-bottom: 0.25rem;
border: 1px solid transparent;
transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
display: flex;
align-items: center;
gap: 1rem;
}
.wk-conversation-item:hover {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(25, 151, 238, 0.15);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(25, 151, 238, 0.1);
}
.wk-conversation-item.wk-conversation-item-active {
background: rgba(25, 151, 238, 0.1);
border-color: rgba(25, 151, 238, 0.3);
box-shadow: 0 4px 16px rgba(25, 151, 238, 0.15);
}
.wk-conversation-item-avatar {
width: 48px;
height: 48px;
border-radius: 14px;
overflow: hidden;
flex-shrink: 0;
position: relative;
border: 2px solid rgba(25, 151, 238, 0.15);
}
.wk-conversation-item-avatar img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.wk-conversation-item-content {
flex: 1 1;
min-width: 0;
margin-left: 1rem;
}
.wk-conversation-item-name {
font-size: 0.9375rem;
font-weight: 600;
color: #2d3748;
margin: 0 0 0.25rem 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-conversation-item-message {
font-size: 0.8125rem;
color: #718096;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}
.wk-conversation-item-time {
font-size: 0.75rem;
color: #a0aec0;
font-weight: 500;
white-space: nowrap;
}
.wk-conversation-item-badge {
background: var(--wk-color-brand-500);
background: var(--wk-color-brand-500, var(--wk-color-brand-500));
color: white;
border-radius: 12px;
min-width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
margin-top: 0.25rem;
box-shadow: 0 2px 8px rgba(25, 151, 238, 0.3);
}
/* === SEARCH BAR === */
.wk-search-input {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(25, 151, 238, 0.15);
border-radius: 16px;
padding: 0.75rem 1.25rem;
font-size: 0.875rem;
color: #2d3748;
width: 100%;
transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (max-width: 768px) {
.wk-search-input {
padding: 0;
}
}
.wk-search-input:focus {
outline: none;
background: rgba(255, 255, 255, 0.95);
border-color: rgba(25, 151, 238, 0.3);
box-shadow: 0 0 0 3px rgba(25, 151, 238, 0.1);
}
.wk-search-input::-moz-placeholder {
color: #a0aec0;
}
.wk-search-input::placeholder {
color: #a0aec0;
}
/* === CHAT INPUT AREA === */
.wk-chat-conversation-inputarea {
position: relative;
padding: 16px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid rgba(25, 151, 238, 0.15);
}
.wk-chat-input-container {
position: relative;
border-radius: 16px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(25, 151, 238, 0.2);
overflow: hidden;
box-shadow: 0 4px 20px rgba(25, 151, 238, 0.1);
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.wk-chat-input-container:focus-within {
border-color: rgba(25, 151, 238, 0.4);
box-shadow: 0 4px 24px rgba(25, 151, 238, 0.2);
}
.wk-chat-input-box {
display: flex;
align-items: center;
min-height: 48px;
padding: 0;
}
.wk-chat-input {
flex: 1 1;
border: none;
outline: none;
background: transparent;
padding: 12px 16px;
font-size: 0.9375rem;
color: #2d3748;
line-height: 1.5;
resize: none;
max-height: 120px;
}
.wk-chat-input::-moz-placeholder {
color: #a0aec0;
font-weight: 400;
}
.wk-chat-input::placeholder {
color: #a0aec0;
font-weight: 400;
}
.wk-chat-send-button {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 2px;
border: none;
border-radius: 12px;
background: var(--wk-color-brand-500);
background: var(--wk-color-brand-500, var(--wk-color-brand-500));
color: white;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 2px 8px rgba(25, 151, 238, 0.3);
}
.wk-chat-send-button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(25, 151, 238, 0.4);
}
.wk-chat-send-button:active {
transform: translateY(0);
}
/* === DARK MODE SUPPORT === */
body[theme-mode=dark] .wk-chat {
background: #0f1419;
background: var(--wk-surface-primary-dark, #0f1419);
color: #e2e8f0;
}
body[theme-mode=dark] .wk-chat::before {
background: transparent;
}
body[theme-mode=dark] .wk-chat-content-left {
background: rgba(16, 20, 25, 0.95);
backdrop-filter: blur(20px);
border-right-color: rgba(25, 151, 238, 0.15);
box-shadow: 2px 0 24px rgba(0, 0, 0, 0.3);
}
body[theme-mode=dark] .wk-chat-content-right {
background: rgba(16, 20, 25, 0.9);
backdrop-filter: blur(20px);
}
body[theme-mode=dark] .wk-chat-search {
background: rgba(16, 20, 25, 0.9);
backdrop-filter: blur(20px);
border-bottom-color: rgba(25, 151, 238, 0.15);
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}
body[theme-mode=dark] .wk-chat-title {
color: #40a4df;
color: var(--wk-color-brand-400, #40a4df);
}
body[theme-mode=dark] .wk-header-search-icon {
background: rgba(25, 151, 238, 0.15);
color: #40a4df;
}
body[theme-mode=dark] .wk-header-search-icon:hover {
background: rgba(25, 151, 238, 0.25);
color: #64b5f6;
box-shadow: 0 4px 12px rgba(25, 151, 238, 0.3);
}
body[theme-mode=dark] .wk-chat-search-add {
background: #40a4df;
background: var(--wk-color-brand-500, #40a4df);
box-shadow: 0 2px 8px rgba(25, 151, 238, 0.4);
}
body[theme-mode=dark] .wk-chat-conversation {
background: rgba(16, 20, 25, 0.8);
backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
body[theme-mode=dark] .wk-chat-conversation::before {
background: transparent;
}
body[theme-mode=dark] .wk-chat-channelsetting {
background: #0f0f0f;
background: var(--wk-surface-elevated-dark, #0f0f0f);
backdrop-filter: blur(20px);
border-left-color: rgba(96, 165, 250, 0.2);
box-shadow:
-4px 0 30px rgba(96, 165, 250, 0.15),
-2px 0 15px rgba(96, 165, 250, 0.1),
inset 1px 0 0 rgba(96, 165, 250, 0.1);
}
body[theme-mode=dark] .wk-chat-channelsetting::before {
background: transparent;
}
body[theme-mode=dark] .wk-chat-conversation-header {
background: rgba(16, 20, 25, 0.9);
border-bottom-color: rgba(25, 151, 238, 0.15);
}
body[theme-mode=dark] .wk-chat-conversation-header:hover {
background: rgba(16, 20, 25, 0.95);
}
body[theme-mode=dark] .wk-chat-conversation-header-channel-info-name {
color: #e2e8f0;
}
body[theme-mode=dark] .wk-chat-conversation-header-channel-info-tip {
color: #40a4df;
}
body[theme-mode=dark] .wk-action-btn {
background: rgba(25, 151, 238, 0.15);
color: #40a4df;
}
body[theme-mode=dark] .wk-action-btn:hover {
background: rgba(25, 151, 238, 0.25);
color: #64b5f6;
}
body[theme-mode=dark] .wk-chat-action-button {
background: rgba(25, 151, 238, 0.15);
color: #40a4df;
}
body[theme-mode=dark] .wk-chat-action-button:hover {
background: rgba(25, 151, 238, 0.25);
color: #64b5f6;
}
body[theme-mode=dark] .wk-conversation-item {
background: rgba(16, 20, 25, 0.6);
border-color: rgba(25, 151, 238, 0.1);
}
body[theme-mode=dark] .wk-conversation-item:hover {
background: rgba(16, 20, 25, 0.8);
box-shadow: 0 4px 16px rgba(25, 151, 238, 0.2);
}
body[theme-mode=dark] .wk-conversation-item.wk-conversation-item-active {
background: rgba(25, 151, 238, 0.15);
border-color: rgba(25, 151, 238, 0.3);
box-shadow: 0 4px 16px rgba(25, 151, 238, 0.25);
}
body[theme-mode=dark] .wk-conversation-item-name {
color: #e2e8f0;
}
body[theme-mode=dark] .wk-conversation-item-message {
color: #a0aec0;
}
body[theme-mode=dark] .wk-conversation-item-time {
color: #718096;
}
body[theme-mode=dark] .wk-conversation-item-badge {
background: #40a4df;
background: var(--wk-color-brand-500, #40a4df);
box-shadow: 0 2px 8px rgba(25, 151, 238, 0.4);
}
body[theme-mode=dark] .wk-search-input {
background: rgba(16, 20, 25, 0.8);
border-color: rgba(25, 151, 238, 0.2);
color: #e2e8f0;
}
body[theme-mode=dark] .wk-search-input:focus {
background: rgba(16, 20, 25, 0.95);
border-color: rgba(25, 151, 238, 0.4);
box-shadow: 0 0 0 3px rgba(25, 151, 238, 0.2);
}
body[theme-mode=dark] .wk-search-input::-moz-placeholder {
color: #718096;
}
body[theme-mode=dark] .wk-search-input::placeholder {
color: #718096;
}
body[theme-mode=dark] .wk-chat-conversation-inputarea {
background: rgba(16, 20, 25, 0.9);
border-top-color: rgba(25, 151, 238, 0.15);
}
body[theme-mode=dark] .wk-chat-input-container {
background: rgba(26, 32, 44, 0.9);
border-color: rgba(25, 151, 238, 0.2);
}
body[theme-mode=dark] .wk-chat-input-container:focus-within {
border-color: rgba(25, 151, 238, 0.4);
box-shadow: 0 4px 24px rgba(25, 151, 238, 0.3);
}
body[theme-mode=dark] .wk-chat-input {
color: #e2e8f0;
}
body[theme-mode=dark] .wk-chat-input::-moz-placeholder {
color: #718096;
}
body[theme-mode=dark] .wk-chat-input::placeholder {
color: #718096;
}
body[theme-mode=dark] .wk-chat-send-button {
background: #40a4df;
background: var(--wk-color-brand-500, #40a4df);
box-shadow: 0 2px 8px rgba(25, 151, 238, 0.4);
}
body[theme-mode=dark] .wk-chat-send-button:hover {
box-shadow: 0 4px 16px rgba(25, 151, 238, 0.5);
}
body[theme-mode=dark] .wk-sidebar-toggle {
background: rgba(25, 151, 238, 0.9);
box-shadow: 0 4px 16px rgba(25, 151, 238, 0.4);
}
body[theme-mode=dark] .wk-sidebar-toggle:hover {
background: rgba(64, 164, 223, 0.95);
box-shadow: 0 6px 20px rgba(25, 151, 238, 0.5);
}
/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
.wk-chat-content-left {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
max-width: 100%;
height: 100%;
background: #ffffff;
background: var(--wk-surface-primary, #ffffff);
box-shadow: 2px 0 24px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
transform: translateX(-100%);
display: flex;
flex-direction: column;
/* FIX: Parent must have overflow:hidden to constrain height for child scroll */
overflow: hidden;
}
.wk-chat-content.wk-conversation-open .wk-chat-content-left {
transform: translateX(-100%);
}
.wk-chat-content:not(.wk-sidebar-collapsed) .wk-chat-content-left {
transform: translateX(0);
}
.wk-chat-conversation-header-back {
display: flex;
}
/* PWA Mobile: Ensure conversation list can scroll */
/* iOS Safari/Chrome fix: Use absolute positioning for scroll in fixed container */
.wk-chat-conversation-list {
flex: 1 1 auto;
/* CRITICAL iOS FIX: Use absolute positioning instead of flex for reliable scroll */
min-height: 0;
max-height: 100%;
overflow-x: hidden;
scroll-snap-type: y proximity;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
/* GPU acceleration for smooth scroll */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* Safari-specific: Ensure flexbox child respects min-height: 0 */
.wk-chat-content-left > * {
flex-shrink: 0;
}
.wk-chat-content-left .wk-chat-conversation-list {
flex-shrink: 1;
}
.semi-modal-body-wrapper {
position: relative;
}
.semi-modal-body-wrapper .semi-modal-close {
position: absolute;
top: 0;
right: 0;
}
}
/* === CHAT EMPTY STATE - PROFESSIONAL MODERN DESIGN === */
.wk-chat-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background: #f8fafc;
background: var(--wk-surface-primary, #f8fafc);
position: relative;
overflow: hidden;
padding: 40px 32px;
box-sizing: border-box;
transition: all 0.3s ease;
}
/* Chat Pattern Background */
.wk-chat-empty::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
background-size: 400px 400px, 350px 350px, 500px 500px;
animation: floatingBubbles 25s ease-in-out infinite;
}
/* Subtle Chat Bubbles Pattern */
.wk-chat-empty::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
url("data:image/svg+xml,%3Csvg width=%2760%27 height=%2760%27 viewBox=%270 0 60 60%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cg fill=%27%230088cc%27 fill-opacity=%270.05%27%3E%3Cpath d=%27M15 25c5.5 0 10-4.5 10-10S20.5 5 15 5 5 9.5 5 15s4.5 10 10 10zm0-2c4.4 0 8-3.6 8-8s-3.6-8-8-8-8 3.6-8 8 3.6 8 8 8zm30 20c5.5 0 10-4.5 10-10s-4.5-10-10-10-10 4.5-10 10 4.5 10 10 10zm0-2c4.4 0 8-3.6 8-8s-3.6-8-8-8-8 3.6-8 8 3.6 8 8 8z%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
animation: patternMove 20s linear infinite;
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.wk-chat-empty {
background: #0f172a;
background: var(--wk-surface-primary-dark, #0f172a);
}
.wk-chat-empty::before {
background: transparent;
}
.wk-chat-empty::after {
background-image:
url("data:image/svg+xml,%3Csvg width=%2760%27 height=%2760%27 viewBox=%270 0 60 60%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cg fill=%27%232AABEE%27 fill-opacity=%270.08%27%3E%3Cpath d=%27M15 25c5.5 0 10-4.5 10-10S20.5 5 15 5 5 9.5 5 15s4.5 10 10 10zm0-2c4.4 0 8-3.6 8-8s-3.6-8-8-8-8 3.6-8 8 3.6 8 8 8zm30 20c5.5 0 10-4.5 10-10s-4.5-10-10-10-10 4.5-10 10 4.5 10 10 10zm0-2c4.4 0 8-3.6 8-8s-3.6-8-8-8-8 3.6-8 8 3.6 8 8 8z%27/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.2;
}
}
@keyframes floatingBubbles {
0%,
100% {
transform: translateY(0) rotate(0deg) scale(1);
opacity: 1;
}
25% {
transform: translateY(-15px) rotate(1deg) scale(1.02);
opacity: 0.8;
}
50% {
transform: translateY(-8px) rotate(-0.5deg) scale(0.98);
opacity: 0.9;
}
75% {
transform: translateY(-20px) rotate(0.8deg) scale(1.01);
opacity: 0.85;
}
}
@keyframes patternMove {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(60px) translateY(60px);
}
}
.wk-chat-empty-container {
position: relative;
z-index: 3;
text-align: center;
max-width: 420px;
width: 100%;
animation: fadeInUp 1.4s cubic-bezier(0.23, 1, 0.32, 1);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border-radius: 24px;
padding: 36px 32px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.08),
0 6px 20px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
@media (prefers-color-scheme: dark) {
.wk-chat-empty-container {
background: rgba(15, 23, 42, 0.9);
border-color: rgba(255, 255, 255, 0.1);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.4),
0 8px 25px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.wk-chat-empty-icon {
width: 100px;
height: 100px;
margin: 0 auto 28px;
background: var(--wk-color-brand-500);
background: var(--wk-color-brand-500, var(--wk-color-brand-500));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: iconPulse 4s ease-in-out infinite;
position: relative;
overflow: hidden;
box-shadow:
0 16px 32px rgba(59, 130, 246, 0.25),
0 6px 16px rgba(59, 130, 246, 0.15),
inset 0 2px 0 rgba(255, 255, 255, 0.3);
}
.wk-chat-empty-icon::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: transparent;
animation: iconShimmer 6s ease-in-out infinite;
}
.wk-chat-empty-icon svg {
width: 48px;
height: 48px;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.15));
z-index: 1;
position: relative;
}
@media (prefers-color-scheme: dark) {
.wk-chat-empty-icon {
background: #1e40af;
background: var(--wk-color-brand-600, #1e40af);
box-shadow:
0 20px 40px rgba(59, 130, 246, 0.4),
0 8px 20px rgba(59, 130, 246, 0.25),
inset 0 2px 0 rgba(255, 255, 255, 0.2);
}
.wk-chat-empty-icon svg {
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}
}
.wk-chat-empty-icon::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: transparent;
animation: iconShimmer 6s ease-in-out infinite;
}
@keyframes iconPulse {
0%,
100% {
transform: scale(1);
box-shadow:
0 20px 40px rgba(59, 130, 246, 0.25),
0 8px 20px rgba(59, 130, 246, 0.15),
inset 0 2px 0 rgba(255, 255, 255, 0.3);
}
50% {
transform: scale(1.05);
box-shadow:
0 25px 50px rgba(59, 130, 246, 0.35),
0 12px 25px rgba(59, 130, 246, 0.2),
inset 0 2px 0 rgba(255, 255, 255, 0.4);
}
}
@media (prefers-color-scheme: dark) {
@keyframes iconPulse {
0%,
100% {
transform: scale(1);
box-shadow:
0 20px 40px rgba(59, 130, 246, 0.4),
0 8px 20px rgba(59, 130, 246, 0.25),
inset 0 2px 0 rgba(255, 255, 255, 0.2);
}
50% {
transform: scale(1.05);
box-shadow:
0 25px 50px rgba(59, 130, 246, 0.5),
0 12px 25px rgba(59, 130, 246, 0.3),
inset 0 2px 0 rgba(255, 255, 255, 0.3);
}
}
}
@keyframes iconShimmer {
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
}
.wk-chat-empty-title {
font-size: 28px;
font-weight: 700;
color: #1e293b;
margin-bottom: 12px;
letter-spacing: -0.5px;
line-height: 1.2;
}
@media (prefers-color-scheme: dark) {
.wk-chat-empty-title {
color: #f1f5f9;
}
}
.wk-chat-empty-subtitle {
font-size: 16px;
font-weight: 400;
color: #64748b;
margin-bottom: 0;
line-height: 1.5;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
@media (prefers-color-scheme: dark) {
.wk-chat-empty-subtitle {
color: #94a3b8;
}
}
.wk-chat-empty-action {
background: rgba(255, 255, 255, 0.25);
border: 3px solid rgba(255, 255, 255, 0.4);
color: white;
padding: 18px 36px;
border-radius: 60px;
font-size: 17px;
font-weight: 600;
cursor: pointer;
transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 56px;
position: relative;
overflow: hidden;
box-shadow:
0 12px 24px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
@media (prefers-color-scheme: dark) {
.wk-chat-empty-action {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
}
.wk-chat-empty-action::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: transparent;
transition: left 600ms ease;
}
.wk-chat-empty-action:hover::before {
left: 100%;
}
.wk-chat-empty-action:hover {
background: rgba(255, 255, 255, 0.35);
border-color: rgba(255, 255, 255, 0.6);
transform: translateY(-3px);
box-shadow:
0 16px 32px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
@media (prefers-color-scheme: dark) {
.wk-chat-empty-action:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
}
.wk-chat-empty-action:active {
transform: translateY(-1px);
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.wk-chat-empty-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
grid-gap: 28px;
gap: 28px;
width: 100%;
max-width: 680px;
margin: 0 auto;
}
.wk-chat-empty-feature {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 2px solid rgba(255, 255, 255, 0.25);
border-radius: 20px;
padding: 28px 24px;
text-align: center;
transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
animation: fadeInUp 1.2s ease-out;
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
@media (prefers-color-scheme: dark) {
.wk-chat-empty-feature {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
}
.wk-chat-empty-feature:nth-child(1) {
animation-delay: 0.3s;
}
.wk-chat-empty-feature:nth-child(2) {
animation-delay: 0.5s;
}
.wk-chat-empty-feature:nth-child(3) {
animation-delay: 0.7s;
}
.wk-chat-empty-feature:hover {
background: rgba(255, 255, 255, 0.28);
border-color: rgba(255, 255, 255, 0.45);
transform: translateY(-6px);
box-shadow:
0 16px 35px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
@media (prefers-color-scheme: dark) {
.wk-chat-empty-feature:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
}
.wk-chat-empty-feature-icon {
font-size: 28px;
margin-bottom: 16px;
display: block;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
@media (prefers-color-scheme: dark) {
.wk-chat-empty-feature-icon {
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}
}
.wk-chat-empty-feature-title {
font-size: 18px;
font-weight: 600;
color: white;
margin-bottom: 10px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
@media (prefers-color-scheme: dark) {
.wk-chat-empty-feature-title {
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
}
.wk-chat-empty-feature-desc {
font-size: 15px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
@media (prefers-color-scheme: dark) {
.wk-chat-empty-feature-desc {
color: rgba(255, 255, 255, 0.75);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.wk-chat-empty {
padding: 24px 16px;
}
.wk-chat-empty-container {
padding: 32px 24px;
border-radius: 24px;
}
.wk-chat-empty-icon {
width: 100px;
height: 100px;
margin-bottom: 24px;
}
.wk-chat-empty-icon svg {
width: 48px;
height: 48px;
}
.wk-chat-empty-title {
font-size: 26px;
margin-bottom: 12px;
}
.wk-chat-empty-subtitle {
font-size: 16px;
max-width: 100%;
}
}
/* === RESPONSIVE DESIGN FOR CHANNEL SETTINGS === */
@media (max-width: 1024px) {
.wk-chat-channelsetting {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 100%;
max-width: 400px;
z-index: 200;
transform: translateX(0);
/* Mặc định hiển thị trên tablet/mobile */
box-shadow: -4px 0 32px rgba(25, 151, 238, 0.2);
}
/* Khi mở trên mobile/tablet */
.wk-chat-content-page.wk-chat-channelsetting-open .wk-chat-channelsetting {
transform: translateX(0);
width: 100%;
max-width: 400px;
opacity: 1;
visibility: visible;
}
/* Khi đóng trên mobile/tablet */
.wk-chat-content-page.wk-chat-channelsetting-closed .wk-chat-channelsetting {
transform: translateX(100%);
width: 0;
opacity: 0;
visibility: hidden;
}
/* Chat container mở rộng toàn màn hình khi sidebar đóng */
.wk-chat-content-page.wk-chat-channelsetting-closed .wk-chat-conversation-container {
width: 100vw !important;
max-width: 100vw !important;
}
.wk-chat-content-page.wk-chat-channelsetting-open .wk-chat-channelsetting-backdrop {
display: block;
opacity: 1;
}
}
@media (max-width: 768px) {
.wk-chat-channelsetting {
width: 100%;
max-width: 100vw;
}
.wk-chat-conversation-header-back {
display: flex !important;
}
}
@media (max-width: 480px) {
.wk-chat-empty {
padding: 16px 12px;
}
.wk-chat-empty-container {
padding: 24px 20px;
border-radius: 20px;
max-width: 100%;
}
.wk-chat-empty-icon {
width: 80px;
height: 80px;
margin-bottom: 20px;
}
.wk-chat-empty-icon svg {
width: 40px;
height: 40px;
}
.wk-chat-empty-title {
font-size: 22px;
margin-bottom: 10px;
}
.wk-chat-empty-subtitle {
font-size: 15px;
max-width: 100%;
}
.wk-chat-conversation-header {
padding: 0.75rem 1rem;
}
.wk-chat-conversation-header-channel-avatar {
width: 36px;
height: 36px;
}
.wk-chat-conversation-header-channel-avatar img {
width: 36px;
height: 36px;
border-radius: 10px;
}
.wk-chat-conversation-header-channel-info-name {
font-size: 0.875rem;
}
.wk-chat-conversation-header-channel-info-tip {
font-size: 0.75rem;
}
}
/* ==========================================================================
Mobile Compact Chat Header - WhatsApp/Telegram Style
========================================================================== */
@media screen and (max-width: 767px) {
/* Compact header padding */
.wk-chat-conversation-header {
padding: 8px 12px;
min-height: 48px;
}
/* Smaller avatar */
.wk-chat-conversation-header-channel-avatar {
width: 36px !important;
height: 36px !important;
}
.wk-chat-conversation-header-channel-avatar img {
width: 36px !important;
height: 36px !important;
}
/* Compact info */
.wk-chat-conversation-header-channel-info-name {
font-size: 15px;
max-width: 140px;
}
.wk-chat-conversation-header-channel-info-tip {
font-size: 12px;
}
/* Clean action items - no boxes, just icons */
.wk-chat-conversation-header-right-item {
padding: 6px;
margin: 0 2px;
border-radius: 50%;
background: transparent !important;
border: none !important;
backdrop-filter: none;
}
.wk-chat-conversation-header-right-item:hover {
background: rgba(0, 0, 0, 0.05) !important;
transform: none;
box-shadow: none;
}
.wk-chat-conversation-header-right-item:active {
background: rgba(0, 0, 0, 0.1) !important;
transform: scale(0.95);
}
/* Smaller icons */
.wk-chat-conversation-header-right-item svg,
.wk-chat-conversation-header-right-item .wk-header-icon {
width: 20px !important;
height: 20px !important;
}
/* Compact back button */
.wk-chat-conversation-header-back {
width: 32px;
height: 32px;
margin-right: 4px;
}
.wk-chat-conversation-header-back-icon {
width: 20px;
height: 20px;
}
/* Reduce gap */
.wk-chat-conversation-header-right {
gap: 0;
}
.wk-chat-conversation-header-left {
gap: 8px;
}
}
/* Dark mode mobile */
@media screen and (max-width: 767px) {
body[theme-mode=dark] .wk-chat-conversation-header-right-item {
background: transparent !important;
border: none !important;
}
body[theme-mode=dark] .wk-chat-conversation-header-right-item:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
}
/* ==========================================================================
iOS VIRTUAL KEYBOARD FIX
Fixes for iPhone Safari/Chrome when virtual keyboard opens:
1. Prevents large whitespace gap between input and keyboard
2. Keeps header visible/sticky at top
========================================================================== */
/* iOS-specific viewport handling */
@supports (-webkit-touch-callout: none) {
/* Only apply to iOS devices */
.wk-chat {
height: 100vh;
height: 100dvh;
height: -webkit-fill-available;
overflow: hidden;
}
.wk-chat-channelsetting {
height: 100vh;
height: 100dvh;
height: -webkit-fill-available;
}
}
/* Mobile iOS keyboard fixes */
@media screen and (max-width: 767px) {
/* Make header sticky on mobile to prevent it from being pushed off screen */
.wk-chat-conversation-header {
position: sticky;
top: 0;
z-index: 100;
will-change: transform;
}
/* Ensure the conversation container handles scrolling properly */
.wk-chat-conversation-container {
display: flex;
flex-direction: column;
height: 100%;
height: 100dvh;
height: -webkit-fill-available;
overflow: hidden;
}
/* Conversation content should be scrollable */
.wk-chat-conversation {
flex: 1 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
/* Messages area should scroll */
.wk-conversation-content {
flex: 1 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Footer/input area should be fixed at bottom */
.wk-conversation-footer {
/* flex-shrink: 0; */
/* position: absolute; */
padding-bottom: env(safe-area-inset-bottom, 0);
}
/* iOS Safari visual viewport adjustment */
.wk-messageinput-box {
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
}
}
/* Fix for iOS Safari address bar and keyboard interactions */
@supports (height: 100dvh) {
@media screen and (max-width: 767px) {
.wk-chat {
min-height: 100dvh;
max-height: 100dvh;
}
.wk-chat-content,
.wk-chat-content-right,
.wk-chat-content-chat {
height: 100%;
max-height: 100dvh;
}
}
}
/* Prevent iOS rubber band scrolling on chat container */
@media screen and (max-width: 767px) {
.wk-chat {
overscroll-behavior: none;
-webkit-overflow-scrolling: touch;
}
.wk-conversation-messages {
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
}
}
/* === SECTIONS - MODERN DESIGN (NO GRADIENTS) === */
.wk-sections {
padding: 0;
}
/* Section container */
.wk-section {
margin-bottom: 8px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
border: 1px solid var(--wk-color-neutral-200, #E5E7EB);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.wk-section:last-child {
margin-bottom: 0;
}
.wk-section:hover {
border-color: #D1D5DB;
border-color: var(--wk-color-neutral-300, #D1D5DB);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
/* Section title */
.wk-section-title {
padding: 12px 16px 8px 16px;
color: var(--wk-color-brand-600);
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Section rows container */
.wk-section-rows {
padding: 0;
}
/* Individual row */
.wk-section-row {
border-bottom: 1px solid #F3F4F6;
border-bottom: 1px solid var(--wk-color-neutral-100, #F3F4F6);
transition: background-color 0.15s ease;
}
.wk-section-row:last-child {
border-bottom: none;
}
.wk-section-row:hover {
background-color: #F9FAFB;
background-color: var(--wk-color-neutral-50, #F9FAFB);
}
.wk-section-row:active {
background-color: #F3F4F6;
background-color: var(--wk-color-neutral-100, #F3F4F6);
}
/* Subtitle */
.wk-section-subtitle {
padding: 10px 16px 12px 16px;
color: #9CA3AF;
color: var(--wk-color-neutral-400, #9CA3AF);
font-size: 12px;
font-weight: 400;
}
/* === DARK MODE === */
body[theme-mode=dark] .wk-sections {
padding: 0;
}
body[theme-mode=dark] .wk-section {
background: #1F2937;
background: var(--wk-color-neutral-800, #1F2937);
border-color: #374151;
border-color: var(--wk-color-neutral-700, #374151);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
body[theme-mode=dark] .wk-section:hover {
border-color: #4B5563;
border-color: var(--wk-color-neutral-600, #4B5563);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
body[theme-mode=dark] .wk-section-title {
color: #9CA3AF;
color: var(--wk-color-neutral-400, #9CA3AF);
}
body[theme-mode=dark] .wk-section-row {
border-bottom-color: #374151;
border-bottom-color: var(--wk-color-neutral-700, #374151);
}
body[theme-mode=dark] .wk-section-row:hover {
background-color: #374151;
background-color: var(--wk-color-neutral-700, #374151);
}
body[theme-mode=dark] .wk-section-row:active {
background-color: #4B5563;
background-color: var(--wk-color-neutral-600, #4B5563);
}
body[theme-mode=dark] .wk-section-subtitle {
color: #6B7280;
color: var(--wk-color-neutral-500, #6B7280);
}
:root {
--wk-channelsetting-header: 64px;
--wk-sidebar-gradient-light: var(--wk-surface-elevated, #ffffff);
--wk-sidebar-gradient-dark: var(--wk-surface-elevated-dark, #0f0f0f);
--wk-sidebar-border-light: rgba(30, 150, 213, 0.1);
--wk-sidebar-border-dark: rgba(96, 165, 250, 0.2);
}
/* Override RoutePage styling inside ChannelSetting with high specificity */
.wk-chat-channelsetting div.flex.flex-col.w-full.h-full.bg-white {
background: transparent !important;
}
.wk-chat-channelsetting div.flex.items-center.justify-between.h-14.px-4.bg-white {
background: transparent !important;
border-bottom-color: rgba(30, 150, 213, 0.15) !important;
}
.wk-chat-channelsetting button.hover\\:bg-neutral-100 {
border-radius: 12px !important;
transition: all 0.3s ease !important;
}
.wk-chat-channelsetting button.hover\\:bg-neutral-100:hover {
background: rgba(30, 150, 213, 0.1) !important;
transform: scale(1.05) !important;
}
.wk-chat-channelsetting h1.text-lg.font-semibold.text-neutral-900 {
color: var(--wk-color-brand-600) !important;
color: var(--wk-color-brand-500, var(--wk-color-brand-600)) !important;
font-weight: 600 !important;
}
.wk-chat-channelsetting svg.text-neutral-600 {
color: var(--wk-color-brand-600) !important;
}
/* Dark mode specific overrides */
body[theme-mode=dark] .wk-chat-channelsetting div.flex.flex-col.w-full.h-full.bg-white.dark\\:bg-neutral-900 {
background: transparent !important;
}
body[theme-mode=dark] .wk-chat-channelsetting div.flex.items-center.justify-between.h-14.px-4.bg-white.dark\\:bg-neutral-900 {
background: transparent !important;
border-bottom-color: rgba(96, 165, 250, 0.2) !important;
}
body[theme-mode=dark] .wk-chat-channelsetting button.hover\\:bg-neutral-100.dark\\:hover\\:bg-neutral-800:hover {
background: rgba(96, 165, 250, 0.15) !important;
}
body[theme-mode=dark] .wk-chat-channelsetting h1.text-lg.font-semibold.text-neutral-900.dark\:text-white {
color: var(--wk-color-brand-400) !important;
color: var(--wk-color-brand-400, var(--wk-color-brand-400)) !important;
}
body[theme-mode=dark] .wk-chat-channelsetting svg.text-neutral-600.dark\\:text-neutral-400 {
color: var(--wk-color-brand-400) !important;
}
/* Global override for all dark mode Tailwind classes inside sidebar */
body[theme-mode=dark] .wk-chat-channelsetting [class*="dark:bg-neutral"] {
background: transparent !important;
}
body[theme-mode=dark] .wk-chat-channelsetting [class*="dark:text-neutral"] {
color: var(--wk-color-brand-400) !important;
}
body[theme-mode=dark] .wk-chat-channelsetting [class*="dark:border-neutral"] {
border-color: rgba(96, 165, 250, 0.2) !important;
}
/* Light mode overrides */
.wk-chat-channelsetting [class*="bg-white"] {
background: transparent !important;
}
.wk-chat-channelsetting [class*="bg-neutral"] {
background: transparent !important;
}
.wk-chat-channelsetting [class*="text-neutral-900"] {
color: var(--wk-color-brand-600) !important;
color: var(--wk-color-brand-500, var(--wk-color-brand-600)) !important;
}
.wk-chat-channelsetting [class*="text-neutral-600"] {
color: var(--wk-color-brand-600) !important;
}
.wk-chat-channelsetting [class*="border-neutral"] {
border-color: rgba(30, 150, 213, 0.15) !important;
}
/* === TOGGLE SWITCHES - SOLID COLORS (NO GRADIENTS) === */
.wk-chat-channelsetting .semi-switch {
background: #D1D5DB !important;
background: var(--wk-color-neutral-300, #D1D5DB) !important;
border: none !important;
transition: background 0.2s ease !important;
}
.wk-chat-channelsetting .semi-switch-checked {
background: var(--wk-color-brand-600) !important;
background: var(--wk-color-brand-500, var(--wk-color-brand-600)) !important;
}
.wk-chat-channelsetting .semi-switch-knob {
top: 3px;
background: #FFFFFF !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
/* Dark mode toggle switches */
body[theme-mode=dark] .wk-chat-channelsetting .semi-switch {
background: #4B5563 !important;
background: var(--wk-color-neutral-600, #4B5563) !important;
}
body[theme-mode=dark] .wk-chat-channelsetting .semi-switch-checked {
background: #47A7DF !important;
background: var(--wk-color-brand-400, #47A7DF) !important;
}
body[theme-mode=dark] .wk-chat-channelsetting .semi-switch-knob {
background: #F3F4F6 !important;
background: var(--wk-color-neutral-100, #F3F4F6) !important;
}
/* === SECTION ROWS - CLEAN SOLID DESIGN === */
.wk-channelmanage .wk-section-row,
.wk-chat-channelsetting .wk-section-row {
padding: 14px 16px !important;
border-radius: 0 !important;
margin: 0 !important;
transition: background-color 0.15s ease !important;
cursor: pointer !important;
border: none !important;
border-bottom: 1px solid #F3F4F6 !important;
border-bottom: 1px solid var(--wk-color-neutral-100, #F3F4F6) !important;
background: transparent !important;
}
.wk-channelmanage .wk-section-row:last-child,
.wk-chat-channelsetting .wk-section-row:last-child {
border-bottom: none !important;
}
.wk-channelmanage .wk-section-row:hover,
.wk-chat-channelsetting .wk-section-row:hover {
background: #F9FAFB !important;
background: var(--wk-color-neutral-50, #F9FAFB) !important;
border-bottom: 1px solid #F3F4F6 !important;
border-bottom: 1px solid var(--wk-color-neutral-100, #F3F4F6) !important;
transform: none !important;
box-shadow: none !important;
}
.wk-channelmanage .wk-section-row:active,
.wk-chat-channelsetting .wk-section-row:active {
background: #F3F4F6 !important;
background: var(--wk-color-neutral-100, #F3F4F6) !important;
}
/* Dark mode section rows */
body[theme-mode=dark] .wk-channelmanage .wk-section-row,
body[theme-mode=dark] .wk-chat-channelsetting .wk-section-row {
background: transparent !important;
border-bottom-color: #374151 !important;
border-bottom-color: var(--wk-color-neutral-700, #374151) !important;
}
body[theme-mode=dark] .wk-channelmanage .wk-section-row:hover,
body[theme-mode=dark] .wk-chat-channelsetting .wk-section-row:hover {
background: #374151 !important;
background: var(--wk-color-neutral-700, #374151) !important;
}
body[theme-mode=dark] .wk-channelmanage .wk-section-row:active,
body[theme-mode=dark] .wk-chat-channelsetting .wk-section-row:active {
background: #4B5563 !important;
background: var(--wk-color-neutral-600, #4B5563) !important;
}
/* === BUTTONS - SOLID COLORS (NO GRADIENTS) === */
.wk-chat-channelsetting .semi-button {
background: rgba(30, 150, 213, 0.08) !important;
border: 1px solid rgba(30, 150, 213, 0.2) !important;
color: var(--wk-color-brand-600) !important;
color: var(--wk-color-brand-500, var(--wk-color-brand-600)) !important;
transition: all 0.15s ease !important;
}
.wk-chat-channelsetting .semi-button:hover {
background: rgba(30, 150, 213, 0.12) !important;
border-color: rgba(30, 150, 213, 0.3) !important;
transform: none !important;
box-shadow: none !important;
}
.wk-chat-channelsetting .semi-button:active {
background: rgba(30, 150, 213, 0.16) !important;
}
/* Dark mode buttons */
body[theme-mode=dark] .wk-chat-channelsetting .semi-button {
background: rgba(96, 165, 250, 0.1) !important;
border-color: rgba(96, 165, 250, 0.2) !important;
color: #47A7DF !important;
color: var(--wk-color-brand-400, #47A7DF) !important;
}
body[theme-mode=dark] .wk-chat-channelsetting .semi-button:hover {
background: rgba(96, 165, 250, 0.15) !important;
border-color: rgba(96, 165, 250, 0.3) !important;
}
/* Dark mode text overrides - solid colors */
body[theme-mode=dark] .wk-chat-channelsetting .text-neutral-900.dark\:text-white {
color: #F3F4F6 !important;
color: var(--wk-color-neutral-100, #F3F4F6) !important;
}
body[theme-mode=dark] .wk-chat-channelsetting .text-neutral-600.dark\:text-neutral-400 {
color: #9CA3AF !important;
color: var(--wk-color-neutral-400, #9CA3AF) !important;
}
body[theme-mode=dark] .wk-chat-channelsetting .hover\:bg-neutral-100.dark\:hover\:bg-neutral-800:hover {
background: #374151 !important;
background: var(--wk-color-neutral-700, #374151) !important;
}
body[theme-mode=dark] .wk-chat-channelsetting .semi-switch {
background: var(--wk-color-brand-400) !important;
background: var(--wk-color-brand-500, var(--wk-color-brand-400)) !important;
}
body[theme-mode=dark] .wk-chat-channelsetting .semi-button {
background: rgba(96, 165, 250, 0.1) !important;
border-color: rgba(96, 165, 250, 0.2) !important;
color: var(--wk-color-brand-400) !important;
}
body[theme-mode=dark] .wk-chat-channelsetting .semi-button:hover {
background: rgba(96, 165, 250, 0.15) !important;
border-color: rgba(96, 165, 250, 0.3) !important;
box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2) !important;
}
/* Glass morphism effect */
.wk-channelsetting::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: transparent !important;
pointer-events: none !important;
z-index: 1;
z-index: var(--z-base, 1);
}
/* Dark mode */
body[theme-mode=dark] .wk-channelsetting {
background: #0f0f0f !important;
background: var(--wk-sidebar-gradient-dark) !important;
border-left-color: rgba(96, 165, 250, 0.2) !important;
border-left-color: var(--wk-sidebar-border-dark) !important;
}
body[theme-mode=dark] .wk-channelsetting::before {
background: transparent;
}
.wk-channelsetting-header {
width: 100% !important;
height: 64px !important;
height: var(--wk-channelsetting-header) !important;
padding: 1rem 1.25rem !important;
display: flex !important;
align-items: center !important;
background: rgba(255, 255, 255, 0.8) !important;
backdrop-filter: blur(15px) !important;
border-bottom: 1px solid rgba(30, 150, 213, 0.1) !important;
position: relative !important;
z-index: 100;
z-index: var(--z-dropdown, 100);
}
body[theme-mode=dark] .wk-channelsetting-header {
background: rgba(15, 15, 15, 0.9) !important;
border-bottom-color: rgba(96, 165, 250, 0.2) !important;
}
.wk-channelsetting-close {
width: 48px !important;
height: 48px !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
border-radius: 14px !important;
background: rgba(30, 150, 213, 0.05) !important;
border: 1px solid rgba(30, 150, 213, 0.1) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
backdrop-filter: blur(10px) !important;
}
.wk-channelsetting-close:hover {
background: rgba(30, 150, 213, 0.15);
border-color: rgba(30, 150, 213, 0.3);
transform: translateY(-2px) scale(1.05);
box-shadow:
0 8px 25px rgba(30, 150, 213, 0.15),
0 4px 10px rgba(0, 0, 0, 0.05);
}
body[theme-mode=dark] .wk-channelsetting-close {
background: rgba(96, 165, 250, 0.1);
border-color: rgba(96, 165, 250, 0.2);
}
body[theme-mode=dark] .wk-channelsetting-close:hover {
background: rgba(96, 165, 250, 0.2);
border-color: rgba(96, 165, 250, 0.4);
box-shadow:
0 8px 25px rgba(96, 165, 250, 0.2),
0 4px 10px rgba(0, 0, 0, 0.3);
}
.wk-channelsetting-close-icon {
position: absolute;
transform: rotate(-45deg);
}
.wk-channelsetting-close-icon,
.wk-channelsetting-close-icon::before,
.wk-channelsetting-close-icon::after {
width: 1.125rem;
height: 0.125rem;
border-radius: 0.125rem;
background: var(--wk-color-brand-600);
background: var(--wk-color-brand-500, var(--wk-color-brand-600));
transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
}
body[theme-mode=dark] .wk-channelsetting-close-icon,
body[theme-mode=dark] .wk-channelsetting-close-icon::before,
body[theme-mode=dark] .wk-channelsetting-close-icon::after {
background: var(--wk-color-brand-400);
background: var(--wk-color-brand-400, var(--wk-color-brand-400));
}
.wk-channelsetting-close-icon::before {
transform: rotate(90deg);
}
.wk-channelsetting-close-icon::before,
.wk-channelsetting-close-icon::after {
position: absolute;
left: 0;
top: 0;
content: "";
}
.wk-state-back {
transform: rotate(180deg);
}
.wk-state-back::before {
transform: rotate(45deg) scaleX(0.75) translate(0, -0.375rem);
}
.wk-state-back::after {
transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem);
}
.wk-channelsetting-box {
width: 100%;
height: calc(100% - 64px);
height: calc(100% - var(--wk-channelsetting-header));
overflow: hidden;
position: relative;
}
.wk-channelsetting-content {
width: 100%;
height: 100%;
overflow: auto;
padding-bottom: 40px;
}
.wk-channelsetting-content .wk-section-row {
padding: var(--wk-space-1) !important;
}
.wk-channelsetting-channel-info {
display: flex !important;
align-items: center !important;
padding: 20px !important;
background: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(15px) !important;
border-radius: 16px !important;
margin: 16px !important;
border: 1px solid rgba(30, 150, 213, 0.1) !important;
box-shadow:
0 8px 32px rgba(30, 150, 213, 0.08),
0 2px 8px rgba(0, 0, 0, 0.04) !important;
position: relative !important;
z-index: 5;
z-index: var(--z-base, 5);
transition: all 0.3s ease !important;
}
.wk-channelsetting-channel-info:hover {
transform: translateY(-2px);
box-shadow:
0 12px 40px rgba(30, 150, 213, 0.12),
0 4px 12px rgba(0, 0, 0, 0.06);
border-color: rgba(30, 150, 213, 0.2);
}
body[theme-mode=dark] .wk-channelsetting-channel-info {
background: rgba(15, 15, 15, 0.9) !important;
border-color: rgba(96, 165, 250, 0.2) !important;
box-shadow:
0 8px 32px rgba(96, 165, 250, 0.1),
0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
body[theme-mode=dark] .wk-channelsetting-channel-info:hover {
box-shadow:
0 12px 40px rgba(96, 165, 250, 0.15),
0 4px 12px rgba(0, 0, 0, 0.3);
border-color: rgba(96, 165, 250, 0.3);
}
.wk-channelsetting-avatar {
width: 72px;
height: 72px;
position: relative;
border-radius: 20px;
overflow: hidden;
background: var(--wk-color-brand-600);
background: var(--wk-color-brand-500, var(--wk-color-brand-600));
padding: 2px;
box-shadow:
0 8px 25px rgba(30, 150, 213, 0.2),
0 4px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.wk-channelsetting-avatar:hover {
transform: scale(1.05);
box-shadow:
0 12px 35px rgba(30, 150, 213, 0.3),
0 6px 15px rgba(0, 0, 0, 0.1);
}
body[theme-mode=dark] .wk-channelsetting-avatar {
background: var(--wk-color-brand-400);
background: var(--wk-color-brand-400, var(--wk-color-brand-400));
box-shadow:
0 8px 25px rgba(96, 165, 250, 0.25),
0 4px 10px rgba(0, 0, 0, 0.2);
}
body[theme-mode=dark] .wk-channelsetting-avatar:hover {
box-shadow:
0 12px 35px rgba(96, 165, 250, 0.35),
0 6px 15px rgba(0, 0, 0, 0.3);
}
.wk-channelsetting-avatar img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 18px;
background: rgba(255, 255, 255, 0.9);
}
.wk-channelsetting-name {
color: var(--wk-color-brand-600);
color: var(--wk-color-brand-500, var(--wk-color-brand-600));
font-size: 18px;
font-weight: 600;
margin-left: 16px;
transition: all 0.3s ease;
}
body[theme-mode=dark] .wk-channelsetting-name {
color: var(--wk-color-brand-400);
color: var(--wk-color-brand-400, var(--wk-color-brand-400));
}
.wk-channelsetting-header-title-box {
color: #999;
display: flex;
align-items: center;
height: 100%;
position: relative;
flex: 1 1;
}
.wk-channelsetting-header-title-box-open {
opacity: 1;
}
.wk-channelsetting-header-title {
font-size: 20px;
font-weight: 600;
margin-left: 1.375rem;
color: var(--wk-color-brand-600);
color: var(--wk-color-brand-500, var(--wk-color-brand-600));
transition: all 0.3s ease;
}
body[theme-mode=dark] .wk-channelsetting-header-title {
color: var(--wk-color-brand-400);
color: var(--wk-color-brand-400, var(--wk-color-brand-400));
}
.wk-channelsetting-header-title-box-open .wk-channelsetting-header-title {
display: none;
}
.wk-channelsetting-header-title-route {
font-size: 20px;
font-weight: 600;
margin-left: 1.375rem;
color: var(--wk-color-brand-600);
color: var(--wk-color-brand-500, var(--wk-color-brand-600));
position: absolute;
transform: translate3d(100vw, 0, 0);
transition: transform var(--wk-layer-transition);
width: 240px;
}
body[theme-mode=dark] .wk-channelsetting-header-title-route {
color: var(--wk-color-brand-400);
color: var(--wk-color-brand-400, var(--wk-color-brand-400));
}
.wk-channelsetting-header-title-box-open .wk-channelsetting-header-title-route {
transform: translate3d(0, 0, 0);
}
.wk-channelsetting-route {
width: 100%;
height: 100%;
background: #ffffff;
background: var(--wk-sidebar-gradient-light);
border-left: 1px solid rgba(30, 150, 213, 0.1);
border-left: 1px solid var(--wk-sidebar-border-light);
backdrop-filter: blur(20px);
position: absolute;
top: 0px;
overflow: hidden;
transform: translate3d(100vw, 0, 0);
transition: transform var(--wk-layer-transition);
}
body[theme-mode=dark] .wk-channelsetting-route {
background: #0f0f0f;
background: var(--wk-sidebar-gradient-dark);
border-left-color: rgba(96, 165, 250, 0.2);
border-left-color: var(--wk-sidebar-border-dark);
}
.wk-channelsetting-route-open {
transform: translate3d(0, 0, 0);
}
.wk-channelsetting-route-content {
width: 100%;
height: 100%;
}
.wk-channelsetting-header-right-view {
opacity: 0;
transition: opacity 500ms ease-out;
}
.wk-channelsetting-header-right-view-open {
opacity: 1;
}
.wk-channelsetting-content-loading {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.wk-channelmanage {
width: 100%;
height: 100%;
overflow-y: auto;
}
/* ==========================================================================
Mobile Fullscreen ChannelSetting Panel
========================================================================== */
@media screen and (max-width: 767px) {
.wk-channelsetting,
.wk-chat-channelsetting {
position: fixed !important;
left: 0 !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 200 !important;
border: none !important;
border-radius: 0 !important;
}
/* Compact header */
.wk-channelsetting-header {
padding: 8px 12px !important;
height: 48px !important;
}
/* Smaller close button */
.wk-channelsetting-close {
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: transparent !important;
border: none !important;
}
/* Compact title */
.wk-channelsetting-header-title {
font-size: 16px !important;
margin-left: 12px !important;
}
/* Compact info card */
.wk-channelsetting-channel-info {
margin: 8px !important;
padding: 12px !important;
border-radius: 12px !important;
}
.wk-channelsetting-avatar {
width: 56px !important;
height: 56px !important;
border-radius: 14px !important;
}
.wk-channelsetting-name {
font-size: 15px !important;
margin-left: 12px !important;
}
/* Section rows */
.wk-channelmanage .wk-section-row,
.wk-chat-channelsetting .wk-section-row {
padding: 12px 16px !important;
}
/* Content */
.wk-channelsetting-content {
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
}
}
/* === ROUTE PAGE - MODERN MODAL DESIGN === */
.wk-route {
width: 100%;
height: 100%;
--wk-height-route-header: 60px;
background: #ffffff;
display: flex;
flex-direction: column;
overflow: hidden;
}
body[theme-mode=dark] .wk-route {
background: #1a1a2e;
}
/* Header */
.wk-route-header {
width: 100%;
height: var(--wk-height-route-header);
padding: 0 1.25rem;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(30, 150, 213, 0.1);
position: relative;
z-index: 10;
box-shadow: 0 2px 10px rgba(30, 150, 213, 0.05);
}
body[theme-mode=dark] .wk-route-header {
background: rgba(26, 26, 46, 0.9);
border-bottom-color: rgba(96, 165, 250, 0.15);
}
/* Content area */
.wk-route-box {
width: 100%;
height: calc(100% - var(--wk-height-route-header));
position: relative;
flex: 1 1;
}
.wk-route-content {
width: 100%;
height: 100%;
background: transparent;
position: relative;
overflow: visible; /* Changed from overflow-y: auto - let modal handle scroll */
}
.wk-route-content-route {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
transform: translate3d(100vw, 0, 0);
transition: transform var(--wk-layer-transition);
background: inherit;
}
.wk-route-content-next {
width: 100%;
height: 100%;
background: transparent;
overflow: auto;
}
body[theme-mode=dark] .wk-route-content-next {
background: transparent;
}
/* Close button */
.wk-route-header-close {
width: 44px;
height: 44px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 12px;
background: rgba(30, 150, 213, 0.06);
border: 1px solid transparent;
transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.wk-route-header-close:hover {
background: rgba(30, 150, 213, 0.12);
border-color: rgba(30, 150, 213, 0.2);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(30, 150, 213, 0.15);
}
.wk-route-header-close:active {
transform: translateY(0) scale(0.98);
}
body[theme-mode=dark] .wk-route-header-close {
background: rgba(96, 165, 250, 0.1);
}
body[theme-mode=dark] .wk-route-header-close:hover {
background: rgba(96, 165, 250, 0.2);
border-color: rgba(96, 165, 250, 0.3);
box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
}
/* Close icon */
.wk-route-header-close-icon {
position: absolute;
transform: rotate(-45deg);
transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wk-route-header-close-icon,
.wk-route-header-close-icon::before,
.wk-route-header-close-icon::after {
width: 1rem;
height: 0.125rem;
border-radius: 0.125rem;
background: var(--wk-color-brand-600);
background: var(--wk-color-brand-500, var(--wk-color-brand-600));
transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wk-route-header-close:hover .wk-route-header-close-icon,
.wk-route-header-close:hover .wk-route-header-close-icon::before,
.wk-route-header-close:hover .wk-route-header-close-icon::after {
background: var(--wk-color-brand-500);
background: var(--wk-color-brand-600, var(--wk-color-brand-500));
}
.wk-route-header-close-icon::before {
transform: rotate(90deg);
}
.wk-route-header-close-icon::before,
.wk-route-header-close-icon::after {
position: absolute;
left: 0;
top: 0;
content: "";
}
body[theme-mode=dark] .wk-route-header-close-icon,
body[theme-mode=dark] .wk-route-header-close-icon::before,
body[theme-mode=dark] .wk-route-header-close-icon::after {
background: var(--wk-color-brand-400);
background: var(--wk-color-brand-400, var(--wk-color-brand-400));
}
/* Back state */
.wk-state-back {
transform: rotate(180deg);
}
.wk-state-back::before {
transform: rotate(45deg) scaleX(0.75) translate(0, -0.375rem);
}
.wk-state-back::after {
transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem);
}
/* Title */
.wk-route-header-title-box {
color: #6b7280;
display: flex;
align-items: center;
height: 100%;
position: relative;
flex: 1 1;
justify-content: center;
}
.wk-route-header-title {
font-size: 18px;
font-weight: 600;
color: var(--wk-color-brand-600);
color: var(--wk-color-brand-500, var(--wk-color-brand-600));
transition: all 300ms ease-out;
}
body[theme-mode=dark] .wk-route-header-title {
color: var(--wk-color-brand-400);
color: var(--wk-color-brand-400, var(--wk-color-brand-400));
}
.wk-route-header-title-next {
font-size: 18px;
font-weight: 600;
color: var(--wk-color-brand-600);
color: var(--wk-color-brand-500, var(--wk-color-brand-600));
position: absolute;
opacity: 0;
transform: translate3d(32px, 0, 0);
transition: all 300ms ease-out;
width: 280px;
text-align: center;
}
body[theme-mode=dark] .wk-route-header-title-next {
color: var(--wk-color-brand-400);
color: var(--wk-color-brand-400, var(--wk-color-brand-400));
}
.wk-route-header-title-box-open .wk-route-header-title {
opacity: 0.7;
transform: translate3d(-32px, 0, 0);
}
.wk-route-header-title-box-open .wk-route-header-title-next {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.wk-route-content-route-open .wk-route-content-route {
transform: translate3d(0, 0, 0);
}
.wk-route-header-right-view {
opacity: 0;
transform: translate3d(16px, 0, 0);
transition: all 300ms ease-out;
}
.wk-route-header-right-view-open {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* === WK VIEW QUEUE - MODERN MODAL CONTAINER === */
/* Modern animations */
.wk-viewqueue-modern-in {
animation: modernRouteAnimationIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-webkit-animation: modernRouteAnimationIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
.wk-viewqueue-modern-out {
animation: modernRouteAnimationOut 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-webkit-animation: modernRouteAnimationOut 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
@keyframes modernRouteAnimationOut {
0% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
100% {
transform: translate3d(100%, 0, 0) scale(0.95);
opacity: 0.8;
}
}
@keyframes modernRouteAnimationIn {
0% {
transform: translate3d(100%, 0, 0) scale(0.95);
opacity: 0.8;
}
100% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
}
/* Container */
.wk-viewqueue {
width: 100%;
height: 100%;
position: relative;
}
.wk-viewqueue-route {
width: 100%;
height: 100%;
position: relative;
}
/* Modal view - DISTINCT VISUAL STYLE */
.wk-viewqueue-view {
width: 100%;
height: 100%;
position: absolute;
background: #ffffff;
transition: transform var(--wk-layer-transition);
overflow: hidden;
/* Clear modal distinction */
border-radius: 16px 0 0 16px;
box-shadow:
-8px 0 40px rgba(0, 0, 0, 0.15),
-2px 0 15px rgba(0, 0, 0, 0.08),
inset 1px 0 0 rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(30, 150, 213, 0.15);
}
body[theme-mode=dark] .wk-viewqueue-view {
background: #1a1a2e;
box-shadow:
-8px 0 40px rgba(0, 0, 0, 0.4),
-2px 0 15px rgba(0, 0, 0, 0.3),
inset 1px 0 0 rgba(96, 165, 250, 0.1);
border-left-color: rgba(96, 165, 250, 0.2);
}
/* Animation states */
.wk-viewqueue-view-in {
animation: routeAnimationIn 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-animation: routeAnimationIn 0.3s cubic-bezier(0.23, 1, 0.32, 1);
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
.wk-viewqueue-view-out {
animation: routeAnimationOut 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-animation: routeAnimationOut 0.3s cubic-bezier(0.23, 1, 0.32, 1);
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
@keyframes routeAnimationOut {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(100%, 0, 0);
opacity: 0.9;
}
}
@keyframes routeAnimationIn {
from {
transform: translate3d(100%, 0, 0);
opacity: 0.9;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
/* Last view (active modal) */
#wk-viewqueue-view-last {
background: #ffffff !important;
z-index: 10;
}
body[theme-mode=dark] #wk-viewqueue-view-last {
background: #1a1a2e !important;
}
#wk-viewqueue-view-last .wk-inputedit {
padding: 12px;
}
#wk-viewqueue-view-last canvas {
width: 128px !important;
height: auto !important;
}
/* Textarea styling */
.semi-input-textarea-wrapper:not(:has(textarea:focus-visible)) {
border: 1px solid rgba(30, 150, 213, 0.15);
border-radius: 12px;
}
.semi-input-textarea-wrapper:has(textarea:focus-visible) {
border: 1px solid rgba(30, 150, 213, 0.4);
border-radius: 12px;
box-shadow: 0 0 0 3px rgba(30, 150, 213, 0.1);
}
.wk-item-contacts {
display: flex;
align-items: center;
padding: 10px;
border-radius: 4px;
cursor: pointer;
}
.wk-item-contacts:hover {
background-color: #f0f0f0; /* Change this color to your desired hover color */
}
body[theme-mode=dark] .wk-item-contacts:hover {
background-color: #333333; /* Change this color to your desired hover color */
}
.wk-item-contacts-name {
margin-left: 15px;
color: var(--wk-text-item);
font-size: 14px;
font-weight: 500;
}
body[theme-mode=dark] .wk-item-contacts-name {
color: white;
}
mark {
background-color: transparent; /* 移除默认背景色 */
color: var(--wk-color-theme); /* 设置文本颜色为红色，可以根据需要更改 */
}
.wk-item-group {
display: flex;
align-items: center;
padding: 10px;
border-radius: 4px;
cursor: pointer;
}
body[theme-mode=dark] .wk-item-group:hover {
background-color: #333333; /* Change this color to your desired hover color */
}
.wk-item-group:hover {
background-color: #f0f0f0; /* Change this color to your desired hover color */
}
.wk-item-group-name {
margin-left: 15px;
color: #333;
font-size: 14px;
font-weight: 500;
}
body[theme-mode=dark] .wk-item-group-name {
color: white;
}
.wk-item-message {
display: flex;
align-items: center;
padding: 10px;
border-radius: 4px;
cursor: pointer;
}
.wk-item-message:hover {
background-color: #f0f0f0; /* Change this color to your desired hover color */
}
body[theme-mode=dark] .wk-item-message:hover {
background-color: #333333; /* Change this color to your desired hover color */
}
.wk-item-message-content {
display: grid;
grid-template-columns: 1fr; /* 两列，左边自适应，右边自动宽度 */
grid-template-rows: auto auto; /* 两行 */
grid-gap: 0px;
gap: 0px;
min-width: 200px;
max-width: 420px;
}
.wk-item-message-name {
margin-left: 15px;
color: #333;
font-size: 14px;
font-weight: 500;
grid-column: 1 / 2; /* 第一列 */
grid-row: 1 / 2; /* 第一行 */
}
body[theme-mode=dark] .wk-item-message-name {
color: white;
}
.wk-item-message-digest {
margin-left: 15px;
color: #999;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分以省略号显示 */
}
mark {
background-color: transparent; /* 移除默认背景色 */
color: var(--wk-color-theme); /* 设置文本颜色为红色，可以根据需要更改 */
}
.wk-tab-all {
width: 100%;
height: 50vh;
display: flex;
overflow: auto;
flex-direction: column;
}
.wk-tab-contacts {
width: 100%;
height: 50vh;
display: flex;
overflow: auto;
flex-direction: column;
}
.wk-tab-group {
width: 100%;
height: 50vh;
display: flex;
overflow: auto;
flex-direction: column;
}
.wk-item-file-icon {
width: 42px;
height: 42px;
display: flex;
justify-content: center;
align-items: center;
}
.wk-item-file {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto; /* 两行 */
grid-gap: 0px;
gap: 0px;
padding: 10px;
border-radius: 4px;
}
.wk-item-file:hover {
background-color: #f0f0f0; /* Change this color to your desired hover color */
}
body[theme-mode=dark] .wk-item-file:hover {
background-color: #333333; /* Change this color to your desired hover color */
}
.wk-item-file-icon {
grid-column: 1 / 2; /* 第一列 */
grid-row: 1 / 3; /* 第一行 */
}
.wk-item-file-name {
grid-column: 2 / 3; /* 第二列 */
grid-row: 1 / 2; /* 第一行 */
margin-left: 15px;
color: var(--wk-text-item);
font-size: 14px;
font-weight: 500;
}
.wk-item-file-desc {
grid-row: 2 / 3; /* 第二行 */
grid-column: 2 / 3; /* 第二列 */
display: flex;
margin-left: 15px;
color: #666;
font-size: 12px;
align-items: center;
}
.wk-item-file-line {
width: 1px;
height: 8px;
background-color: #666;
margin-top: 10px;
margin-bottom: 10px;
margin: 4px;
}
.wk-tab-file {
width: 100%;
height: 50vh;
display: flex;
overflow: auto;
flex-direction: column;
cursor: pointer;
}
/* Error Boundary Styling */
.wk-error-boundary {
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
width: 100%;
padding: 48px;
padding: var(--wk-space-8, 48px);
background-color: #ffffff;
background-color: var(--wk-surface-primary, #ffffff);
}
.wk-error-boundary-content {
max-width: 500px;
text-align: center;
animation: fadeInScale 0.4s ease-out;
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.wk-error-boundary-icon {
font-size: 4rem;
line-height: 1;
margin-bottom: 24px;
margin-bottom: var(--wk-space-4, 24px);
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-10px);
}
75% {
transform: translateX(10px);
}
}
.wk-error-boundary-title {
font-size: 1.5rem;
font-weight: 600;
color: #1f2937;
color: var(--wk-text-primary, #1f2937);
margin: 0 0 16px 0;
margin: 0 0 var(--wk-space-3, 16px) 0;
line-height: 1.4;
}
.wk-error-boundary-message {
font-size: 0.9375rem;
color: #6b7280;
color: var(--wk-text-secondary, #6b7280);
margin: 0 0 32px 0;
margin: 0 0 var(--wk-space-6, 32px) 0;
line-height: 1.6;
}
.wk-error-boundary-details {
margin-top: 32px;
margin-top: var(--wk-space-6, 32px);
margin-bottom: 32px;
margin-bottom: var(--wk-space-6, 32px);
text-align: left;
background-color: #f9fafb;
background-color: var(--wk-surface-secondary, #f9fafb);
border: 1px solid #e5e7eb;
border: 1px solid var(--wk-border-color, #e5e7eb);
border-radius: 8px;
border-radius: var(--wk-radius-md, 8px);
padding: 16px;
padding: var(--wk-space-4, 16px);
}
.wk-error-boundary-details summary {
cursor: pointer;
font-weight: 500;
color: #1f2937;
color: var(--wk-text-primary, #1f2937);
padding: 8px;
padding: var(--wk-space-2, 8px);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.wk-error-boundary-details summary:hover {
color: var(--wk-color-brand-500);
color: var(--wk-color-theme, var(--wk-color-brand-500));
}
.wk-error-boundary-stack {
margin: 16px 0 0 0;
margin: var(--wk-space-3, 16px) 0 0 0;
padding: 16px;
padding: var(--wk-space-3, 16px);
background-color: #ffffff;
background-color: var(--wk-surface-tertiary, #ffffff);
border: 1px solid #e5e7eb;
border: 1px solid var(--wk-border-color, #e5e7eb);
border-radius: 4px;
border-radius: var(--wk-radius-sm, 4px);
overflow-x: auto;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.75rem;
line-height: 1.5;
color: #dc2626;
color: var(--wk-text-error, #dc2626);
white-space: pre-wrap;
word-break: break-word;
}
.wk-error-boundary-actions {
display: flex;
gap: 12px;
gap: var(--wk-space-3, 12px);
justify-content: center;
flex-wrap: wrap;
}
/* Dark mode support */
body[theme-mode=dark] .wk-error-boundary {
background-color: #1f2937;
background-color: var(--wk-surface-primary, #1f2937);
}
body[theme-mode=dark] .wk-error-boundary-title {
color: #f9fafb;
color: var(--wk-text-primary, #f9fafb);
}
body[theme-mode=dark] .wk-error-boundary-message {
color: #9ca3af;
color: var(--wk-text-secondary, #9ca3af);
}
body[theme-mode=dark] .wk-error-boundary-details {
background-color: #374151;
background-color: var(--wk-surface-secondary, #374151);
border-color: #4b5563;
border-color: var(--wk-border-color, #4b5563);
}
body[theme-mode=dark] .wk-error-boundary-details summary {
color: #f9fafb;
color: var(--wk-text-primary, #f9fafb);
}
body[theme-mode=dark] .wk-error-boundary-stack {
background-color: #1f2937;
background-color: var(--wk-surface-tertiary, #1f2937);
border-color: #4b5563;
border-color: var(--wk-border-color, #4b5563);
color: #f87171;
color: var(--wk-text-error, #f87171);
}
/* Mobile responsive */
@media (max-width: 768px) {
.wk-error-boundary {
padding: 32px 16px;
padding: var(--wk-space-6, 32px) var(--wk-space-4, 16px);
min-height: 300px;
}
.wk-error-boundary-icon {
font-size: 3rem;
}
.wk-error-boundary-title {
font-size: 1.25rem;
}
.wk-error-boundary-message {
font-size: 0.875rem;
}
.wk-error-boundary-actions {
flex-direction: column;
}
.wk-error-boundary-actions button {
width: 100%;
}
}
.wk-chatpwd-prompt {
display: flex;
flex-direction: column;
gap: 12px;
}
.wk-chatpwd-prompt .semi-input {
letter-spacing: 6px;
text-align: center;
}
.wk-chatpwd-prompt-meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.wk-chatpwd-prompt-error {
margin-top: 4px;
}
.wk-chatpwd-prompt-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 4px;
}
.wk-chatpwd-form {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
}
.wk-chatpwd-form-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.wk-chatpwd-form-error {
margin-top: 8px;
}
.wk-chatpwd-form-hint {
font-size: 12px;
}
/* LiteChat Design System - CSS Custom Properties */
/* Version 2.0 - Modern Premium Design */
:root {
/* ========== COLOR PALETTE ========== */
/* Primary Brand Colors */
--brand-50: #eff6ff;
--brand-100: #dbeafe;
--brand-200: #bfdbfe;
--brand-300: #93c5fd;
--brand-400: #60a5fa;
--brand-500: #3b82f6;
--brand-600: #2563eb;
--brand-700: #1d4ed8;
--brand-800: #1e40af;
--brand-900: #1e3a8a;
/* Semantic Colors */
--color-success: #22c55e;
--color-success-light: #dcfce7;
--color-warning: #f59e0b;
--color-warning-light: #fef3c7;
--color-error: #ef4444;
--color-error-light: #fee2e2;
--color-info: #06b6d4;
--color-info-light: #cffafe;
/* Surface Colors - Light Theme */
--surface-primary: #ffffff;
--surface-secondary: #f8fafc;
--surface-tertiary: #f1f5f9;
--surface-elevated: #ffffff;
--surface-overlay: rgba(0, 0, 0, 0.5);
/* Text Colors - Light Theme */
--text-primary: #0f172a;
--text-secondary: #64748b;
--text-tertiary: #94a3b8;
--text-inverse: #ffffff;
--text-brand: var(--brand-600);
/* Border Colors */
--border-light: #e2e8f0;
--border-medium: #cbd5e1;
--border-dark: #94a3b8;
--border-focus: var(--brand-500);
/* ========== TYPOGRAPHY ========== */
/* Font Family */
--font-sans:
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
/* Font Sizes */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
/* Line Heights */
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
/* Font Weights */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
/* Letter Spacing */
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
/* ========== SPACING ========== */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem; /* 2px */
--space-1: 0.25rem; /* 4px */
--space-1-5: 0.375rem; /* 6px */
--space-2: 0.5rem; /* 8px */
--space-2-5: 0.625rem; /* 10px */
--space-3: 0.75rem; /* 12px */
--space-3-5: 0.875rem; /* 14px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-7: 1.75rem; /* 28px */
--space-8: 2rem; /* 32px */
--space-9: 2.25rem; /* 36px */
--space-10: 2.5rem; /* 40px */
--space-11: 2.75rem; /* 44px */
--space-12: 3rem; /* 48px */
--space-14: 3.5rem; /* 56px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
/* ========== BORDER RADIUS ========== */
--radius-none: 0;
--radius-sm: 0.25rem; /* 4px */
--radius-md: 0.375rem; /* 6px */
--radius-lg: 0.5rem; /* 8px */
--radius-xl: 0.75rem; /* 12px */
--radius-2xl: 1rem; /* 16px */
--radius-3xl: 1.5rem; /* 24px */
--radius-full: 9999px;
/* ========== SHADOWS ========== */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
--shadow-md:
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg:
0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl:
0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
/* Glow Shadows */
--shadow-glow-brand: 0 0 20px rgba(59, 130, 246, 0.4);
--shadow-glow-success: 0 0 20px rgba(34, 197, 94, 0.4);
--shadow-glow-error: 0 0 20px rgba(239, 68, 68, 0.4);
/* ========== TRANSITIONS ========== */
--duration-75: 75ms;
--duration-100: 100ms;
--duration-150: 150ms;
--duration-200: 200ms;
--duration-300: 300ms;
--duration-500: 500ms;
--duration-700: 700ms;
--duration-1000: 1000ms;
--ease-linear: linear;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* ========== Z-INDEX ========== */
--z-base: 0;
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-modal-backdrop: 400;
--z-modal: 500;
--z-popover: 600;
--z-tooltip: 700;
--z-notification: 800;
--z-max: 9999;
/* ========== ANIMATION ========== */
--animate-spin: spin 1s linear infinite;
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--animate-bounce: bounce 1s infinite;
--animate-fade-in: fadeIn 0.3s ease-out;
--animate-slide-up: slideUp 0.3s ease-out;
--animate-slide-down: slideDown 0.3s ease-out;
/* ========== GLASSMORPHISM ========== */
--glass-bg: rgba(255, 255, 255, 0.8);
--glass-blur: blur(16px);
--glass-border: 1px solid rgba(255, 255, 255, 0.2);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
/* ========== COMPONENT SIZES ========== */
--sidebar-width: 70px;
--sidebar-expanded: 240px;
--conversation-list-width: 320px;
--header-height: 60px;
--footer-height: 80px;
--bottom-nav-height: 60px;
--input-height: 44px;
--avatar-sm: 32px;
--avatar-md: 40px;
--avatar-lg: 48px;
--avatar-xl: 64px;
}
/* ========== DARK THEME ========== */
body[theme-mode='dark'],
[data-theme='dark'] {
/* Surface Colors - Dark Theme */
--surface-primary: #0f172a;
--surface-secondary: #1e293b;
--surface-tertiary: #334155;
--surface-elevated: #1e293b;
--surface-overlay: rgba(0, 0, 0, 0.7);
/* Text Colors - Dark Theme */
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-tertiary: #64748b;
--text-inverse: #0f172a;
--text-brand: var(--brand-400);
/* Border Colors - Dark Theme */
--border-light: #334155;
--border-medium: #475569;
--border-dark: #64748b;
/* Shadows - Dark Theme */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
/* Glassmorphism - Dark Theme */
--glass-bg: rgba(15, 23, 42, 0.8);
--glass-border: 1px solid rgba(255, 255, 255, 0.1);
}
/* ========== KEYFRAME ANIMATIONS ========== */
/* Only loading-related animations are kept */
/* KEPT: Loading spinner */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* KEPT: Loading ping effect */
@keyframes ping {
75%,
100% {
transform: scale(2);
opacity: 0;
}
}
/* KEPT: Loading pulse effect */
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* KEPT: Fade animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* REMOVED: Decorative animations (bounce, slideUp, slideDown, slideInRight, slideInLeft, scaleIn, shake, typingDot) */
/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ========== FOCUS STYLES ========== */
/* Strong focus ring for accessibility */
:focus-visible {
outline: 2px solid #3b82f6;
outline: 2px solid var(--brand-500);
outline-offset: 2px;
}
/* Remove focus ring for non-keyboard users */
:focus:not(:focus-visible) {
outline: none;
}
/* Custom focus class for components */
.focus-ring:focus,
.focus-ring:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
/* ========== SCROLLBAR STYLES ========== */
/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #94a3b8;
background: var(--text-tertiary);
border-radius: 9999px;
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: #64748b;
background: var(--text-secondary);
}
/* Firefox scrollbar */
* {
scrollbar-width: thin;
scrollbar-color: #94a3b8 transparent;
scrollbar-color: var(--text-tertiary) transparent;
}
/* ========== UTILITY CLASSES ========== */
/* Text truncation */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Visually hidden (for accessibility) */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Aspect ratios */
.aspect-square {
aspect-ratio: 1 / 1;
}
.aspect-video {
aspect-ratio: 16 / 9;
}
/* Selection */
::-moz-selection {
background: #bfdbfe;
background: var(--brand-200);
color: #1e3a8a;
color: var(--brand-900);
}
::selection {
background: #bfdbfe;
background: var(--brand-200);
color: #1e3a8a;
color: var(--brand-900);
}
body[theme-mode='dark'] ::-moz-selection {
background: #1d4ed8;
background: var(--brand-700);
color: #dbeafe;
color: var(--brand-100);
}
body[theme-mode='dark'] ::selection {
background: #1d4ed8;
background: var(--brand-700);
color: #dbeafe;
color: var(--brand-100);
}
/* Page Transitions - Removed for performance optimization */
/* All page transition animations have been disabled */
/* Classes are kept as no-ops for backward compatibility */
.wk-page-enter,
.wk-page-enter-active,
.wk-page-exit,
.wk-page-exit-active,
.wk-fade-enter,
.wk-fade-enter-active,
.wk-fade-exit,
.wk-fade-exit-active,
.wk-slide-up-enter,
.wk-slide-up-enter-active,
.wk-slide-up-exit,
.wk-slide-up-exit-active,
.wk-slide-right-enter,
.wk-slide-right-enter-active,
.wk-slide-right-exit,
.wk-slide-right-exit-active,
.wk-scale-enter,
.wk-scale-enter-active,
.wk-scale-exit,
.wk-scale-exit-active,
.wk-overlay-enter,
.wk-overlay-enter-active,
.wk-overlay-exit,
.wk-overlay-exit-active,
.wk-content-enter,
.wk-content-enter-active,
.wk-content-exit,
.wk-content-exit-active,
.wk-list-item {
/* No animations */
opacity: 1;
transform: none;
}
/* Telegram-inspired Design Tokens for React 17 Compatible Theme */
:root {
/* === CORE BRAND PALETTE === */
--wk-color-brand-50: #E8F4FB;
--wk-color-brand-100: #D1E9F7;
--wk-color-brand-200: #A3D3EF;
--wk-color-brand-300: #75BDE7;
--wk-color-brand-400: #47A7DF;
--wk-color-brand-500: #1E96D5;
--wk-color-brand-600: #177CB5;
--wk-color-brand-700: #106295;
--wk-color-brand-800: #0A4875;
--wk-color-brand-900: #032E55;
/* === NEUTRAL PALETTE === */
--wk-color-neutral-50: #F9FAFB;
--wk-color-neutral-100: #F3F4F6;
--wk-color-neutral-200: #E5E7EB;
--wk-color-neutral-300: #D1D5DB;
--wk-color-neutral-400: #9CA3AF;
--wk-color-neutral-500: #6B7280;
--wk-color-neutral-600: #4B5563;
--wk-color-neutral-700: #374151;
--wk-color-neutral-800: #1F2937;
--wk-color-neutral-900: #111827;
/* === SEMANTIC COLORS === */
--wk-color-success: #16A34A;
--wk-color-success-50: #F0FDF4;
--wk-color-success-100: #DCFCE7;
--wk-color-warning: #F59E0B;
--wk-color-warning-50: #FFFBEB;
--wk-color-warning-100: #FEF3C7;
--wk-color-danger: #EF4444;
--wk-color-danger-50: #FEF2F2;
--wk-color-danger-100: #FEE2E2;
--wk-color-info: #3B82F6;
--wk-color-info-50: #EFF6FF;
--wk-color-info-100: #DBEAFE;
/* === SURFACE COLORS === */
--wk-surface-primary: #FFFFFF;
--wk-surface-secondary: #F6F7F9;
--wk-surface-tertiary: #FFFFFF;
--wk-surface-overlay: rgba(0, 0, 0, 0.5);
--wk-surface-glass: rgba(255, 255, 255, 0.8);
/* === INTERACTION TOKENS === */
--wk-hover-subtle: rgba(0, 0, 0, 0.04);
--wk-hover-muted: rgba(0, 0, 0, 0.08);
--wk-active-subtle: rgba(0, 0, 0, 0.08);
--wk-active-muted: rgba(0, 0, 0, 0.12);
/* === TEXT COLORS === */
/* Improved contrast ratios for WCAG AAA compliance */
--wk-text-primary: #0F172A;
--wk-text-secondary: #1F2937;
--wk-text-muted: #4B5563;
/* Darkened from #6B7280 for better contrast (7:1) */
--wk-text-placeholder: #6B7280;
/* Moved old muted color here */
--wk-text-disabled: #9CA3AF;
/* Lightened for disabled state */
--wk-text-inverse: #FFFFFF;
--wk-text-brand: var(--wk-color-brand-600);
/* === BORDER COLORS === */
--wk-border-default: #E5E7EB;
--wk-border-light: #F3F4F6;
--wk-border-muted: #F3F4F6;
--wk-border-focus: #93C5FD;
--wk-border-error: #FCA5A5;
--wk-border-subtle: #F9FAFB;
/* === SPACING SCALE === */
--wk-space-0: 0px;
--wk-space-1: 4px;
--wk-space-2: 8px;
--wk-space-3: 12px;
--wk-space-4: 16px;
--wk-space-5: 20px;
--wk-space-6: 24px;
--wk-space-8: 32px;
--wk-space-10: 40px;
--wk-space-12: 48px;
--wk-space-16: 64px;
--wk-space-20: 80px;
/* === RADIUS === */
--wk-radius-sm: 4px;
--wk-radius-md: 8px;
--wk-radius-lg: 12px;
--wk-radius-xl: 16px;
--wk-radius-bubble: 18px;
--wk-radius-full: 50%;
/* === SHADOWS === */
--wk-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--wk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--wk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--wk-shadow-overlay: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--wk-shadow-focus: 0 0 0 3px var(--wk-color-brand-100);
/* === TYPOGRAPHY === */
--wk-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
--wk-font-size-xs: 12px;
--wk-font-size-sm: 14px;
--wk-font-size-base: 15px;
--wk-font-size-lg: 16px;
--wk-font-size-xl: 18px;
--wk-font-size-2xl: 20px;
--wk-line-height-tight: 1.25;
--wk-line-height-normal: 1.45;
--wk-line-height-relaxed: 1.6;
--wk-font-weight-normal: 400;
--wk-font-weight-medium: 500;
--wk-font-weight-semibold: 600;
/* === MOTION === */
--wk-duration-fast: 160ms;
--wk-duration-normal: 220ms;
--wk-duration-slow: 320ms;
--wk-ease-out: cubic-bezier(0.2, 0, 0.2, 1);
--wk-ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
/* === LAYOUT === */
--wk-sidebar-width: 288px;
--wk-sidebar-collapsed-width: 80px;
--wk-info-panel-width: 320px;
--wk-chat-header-height: 60px;
--wk-header-height: 56px;
--wk-composer-height: 56px;
--wk-max-content-width: 1200px;
/* === Z-INDEX === */
--wk-z-base: 0;
--wk-z-dropdown: 1000;
--wk-z-sticky: 1010;
--wk-z-modal: 1050;
--wk-z-popover: 1060;
--wk-z-tooltip: 1070;
/* === EXISTING VARIABLE MAPPING === */
/* Map new tokens to existing variables for compatibility */
--wk-color-theme: var(--wk-color-brand-500);
--wk-color-secondary: var(--wk-surface-secondary);
--wk-color-secondary-2: var(--wk-color-neutral-100);
--wk-color-tertiary: var(--wk-color-neutral-200);
--wk-color-item: var(--wk-surface-primary);
--wk-color-border: var(--wk-border-default);
--wk-color-font-tip: var(--wk-text-muted);
--wk-text-item: var(--wk-text-primary);
--wk-line: 1px solid var(--wk-border-default);
--background-color: var(--wk-surface-secondary);
/* Layout dimensions */
--wk-wdith-conversation-list: var(--wk-sidebar-width);
--wk-wdith-chat-channelsetting: var(--wk-info-panel-width);
--wk-height-chat-search: var(--wk-chat-header-height);
}
/* === DARK MODE OVERRIDES === */
body[theme-mode="dark"] {
/* Surface colors for dark mode */
--wk-surface-primary: #1F2937;
--wk-surface-secondary: #111827;
--wk-surface-tertiary: #374151;
--wk-surface-overlay: rgba(0, 0, 0, 0.7);
/* Text colors for dark mode */
--wk-text-primary: #F9FAFB;
--wk-text-secondary: #E5E7EB;
--wk-text-muted: #9CA3AF;
--wk-text-placeholder: #6B7280;
--wk-text-disabled: #4B5563;
--wk-text-inverse: #111827;
/* Border colors for dark mode */
--wk-border-default: #374151;
--wk-border-muted: #4B5563;
--wk-border-subtle: #4B5563;
--wk-border-focus: #60A5FA;
--wk-border-error: #F87171;
/* Interaction colors for dark mode */
--wk-hover-subtle: rgba(255, 255, 255, 0.04);
--wk-hover-muted: rgba(255, 255, 255, 0.08);
--wk-active-subtle: rgba(255, 255, 255, 0.08);
--wk-active-muted: rgba(255, 255, 255, 0.12);
/* Shadows for dark mode */
--wk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--wk-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--wk-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
/* Update existing variable mappings for dark mode */
--wk-color-secondary: var(--wk-surface-secondary);
--wk-color-secondary-2: var(--wk-color-neutral-800);
--wk-color-tertiary: var(--wk-color-neutral-700);
--wk-color-item: var(--wk-surface-primary);
--wk-text-item: var(--wk-text-primary);
--background-color: var(--wk-surface-secondary);
}
/* === COMPONENT-SPECIFIC OVERRIDES === */
/* Remove all outline and focus rings - use background/shadow instead */
*:focus {
outline: none !important;
}
/* Semi UI Component Theming */
.semi-input {
border-color: #E5E7EB;
border-color: var(--wk-border-default);
background-color: #FFFFFF;
background-color: var(--wk-surface-primary);
color: #0F172A;
color: var(--wk-text-primary);
border-radius: 8px;
border-radius: var(--wk-radius-md);
transition: all 160ms cubic-bezier(0.2, 0, 0.2, 1);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
}
.semi-input:hover {
background-color: transparent;
background-color: initial;
border-color: currentColor;
border-color: initial;
}
.semi-input:focus {
background-color: transparent;
background-color: initial;
border-color: currentColor;
border-color: initial;
box-shadow: none;
}
.semi-button {
border-radius: 8px;
border-radius: var(--wk-radius-md);
transition: all 160ms cubic-bezier(0.2, 0, 0.2, 1);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
}
.semi-button:focus {
outline: none;
box-shadow: none;
}
.semi-button-primary {
background-color: #1E96D5;
background-color: var(--wk-color-brand-500);
border-color: #1E96D5;
border-color: var(--wk-color-brand-500);
color: white !important;
transition: all 160ms cubic-bezier(0.2, 0, 0.2, 1);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
}
.semi-button-primary:hover {
background-color: #177CB5 !important;
background-color: var(--wk-color-brand-600) !important;
border-color: #177CB5 !important;
border-color: var(--wk-color-brand-600) !important;
transform: translateY(-1px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
box-shadow: var(--wk-shadow-md);
transition: all 160ms cubic-bezier(0.2, 0, 0.2, 1);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-company-selector-popover {
border-radius: 4px !important;
}
.semi-button-secondary {
background-color: transparent;
border-color: #E5E7EB;
border-color: var(--wk-border-default);
color: #1F2937;
color: var(--wk-text-secondary);
}
.semi-button-secondary:hover {
background-color: rgba(0, 0, 0, 0.04);
background-color: var(--wk-hover-subtle);
border-color: #F3F4F6;
border-color: var(--wk-border-muted);
color: #0F172A;
color: var(--wk-text-primary);
}
.semi-modal-content {
background-color: #FFFFFF;
background-color: var(--wk-surface-primary);
border-radius: 12px;
border-radius: var(--wk-radius-lg);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
box-shadow: var(--wk-shadow-overlay);
height: auto;
max-height: 80vh;
overflow-y: auto;
}
.semi-popover-content {
background-color: #FFFFFF;
background-color: var(--wk-surface-primary);
/* border: 1px solid var(--wk-border-default); */
border-radius: 8px;
border-radius: var(--wk-radius-md);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
box-shadow: var(--wk-shadow-lg);
}
.semi-avatar {
border-radius: 50%;
border-radius: var(--wk-radius-full);
}
/* Enhanced focus states */
.semi-input:focus,
.semi-textarea:focus {
border-color: currentColor;
border-color: initial;
box-shadow: none;
}
/* Enhanced button variants */
.semi-button-secondary {
background-color: #F3F4F6;
background-color: var(--wk-color-neutral-100);
border-color: #E5E7EB;
border-color: var(--wk-color-neutral-200);
color: #0F172A;
color: var(--wk-text-primary);
}
.semi-button-secondary:hover {
background-color: #E5E7EB;
background-color: var(--wk-color-neutral-200);
border-color: #D1D5DB;
border-color: var(--wk-color-neutral-300);
}
/* List item states */
.semi-list-item:hover {
background-color: #F9FAFB;
background-color: var(--wk-color-neutral-50);
}
.semi-list-item.semi-list-item-selected {
background-color: #E8F4FB;
background-color: var(--wk-color-brand-50);
border-left: 3px solid #1E96D5;
border-left: 3px solid var(--wk-color-brand-500);
}
/* === DARK MODE THEME === */
body[theme-mode=dark] {
/* === SURFACE COLORS === */
--wk-surface-primary: #1A1D23;
--wk-surface-secondary: #252932;
--wk-surface-tertiary: #2F3349;
--wk-surface-overlay: rgba(0, 0, 0, 0.7);
--wk-surface-glass: rgba(26, 29, 35, 0.9);
/* === TEXT COLORS === */
--wk-text-primary: #FFFFFF;
--wk-text-secondary: #B4BCD0;
--wk-text-muted: #8E96A7;
--wk-text-placeholder: #6C7383;
--wk-text-disabled: #4A5568;
--wk-text-inverse: #0F172A;
/* === BORDER COLORS === */
--wk-border-default: #3A3F4A;
--wk-border-light: #3A3F4A;
--wk-border-dark: #2A2F3A;
--wk-border-muted: #323741;
--wk-border-focus: #4A90E2;
--wk-border-subtle: #252932;
/* === INTERACTION COLORS === */
--wk-hover-subtle: rgba(255, 255, 255, 0.06);
--wk-hover-muted: rgba(255, 255, 255, 0.1);
--wk-active-subtle: rgba(255, 255, 255, 0.1);
--wk-active-muted: rgba(255, 255, 255, 0.15);
/* === EXISTING VARIABLE MAPPING FOR DARK === */
--wk-color-secondary: var(--wk-surface-secondary);
--wk-color-secondary-2: #3A3F4A;
--wk-color-tertiary: #4A5568;
--wk-color-item: var(--wk-surface-primary);
--wk-color-border: var(--wk-border-default);
--wk-color-font-tip: var(--wk-text-muted);
--wk-text-item: var(--wk-text-primary);
--wk-line: 1px solid var(--wk-border-default);
--background-color: var(--wk-surface-secondary);
/* === NEUTRAL COLORS OVERRIDE === */
--wk-color-neutral-25: #252932;
--wk-color-neutral-50: #2F3349;
--wk-color-neutral-100: #3A3F4A;
--wk-color-neutral-200: #4A5568;
--wk-color-neutral-700: #B4BCD0;
--wk-color-neutral-800: #252932;
--wk-color-neutral-900: #1A1D23;
}
/* Dark mode component overrides */
body[theme-mode=dark] .semi-input {
background-color: #F6F7F9;
background-color: var(--wk-surface-secondary);
border-color: #E5E7EB;
border-color: var(--wk-border-default);
color: #0F172A;
color: var(--wk-text-primary);
}
body[theme-mode=dark] .semi-input:hover {
background-color: #FFFFFF;
background-color: var(--wk-surface-tertiary);
border-color: #F3F4F6;
border-color: var(--wk-border-muted);
}
body[theme-mode=dark] .semi-button-secondary {
background-color: #F6F7F9;
background-color: var(--wk-surface-secondary);
border-color: #E5E7EB;
border-color: var(--wk-border-default);
color: #0F172A;
color: var(--wk-text-primary);
}
body[theme-mode=dark] .semi-button-secondary:hover {
background-color: #FFFFFF;
background-color: var(--wk-surface-tertiary);
border-color: #F3F4F6;
border-color: var(--wk-border-muted);
}
body[theme-mode=dark] .semi-modal-content {
background-color: #FFFFFF;
background-color: var(--wk-surface-primary);
border-color: #E5E7EB;
border-color: var(--wk-border-default);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
}
/* ==========================================================================
Mobile Bottom Sheet Modal Styles
========================================================================== */
@media screen and (max-width: 767px) {
/* All semi-modals become bottom sheets */
.semi-modal-content {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
border-radius: 20px 20px 0 0 !important;
max-height: 85vh !important;
animation: slideUpModal 0.3s ease-out !important;
}
@keyframes slideUpModal {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Modal body scrollable */
.semi-modal-body {
max-height: calc(85vh - 60px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
}
/* Compact close button */
.semi-modal-close {
top: 12px;
right: 12px;
width: 32px;
height: 32px;
}
/* Handle bar at top */
.semi-modal-content::before {
content: '';
display: block;
width: 40px;
height: 4px;
background: #e5e7eb;
border-radius: 2px;
margin: 8px auto 0;
}
/* Compact header */
.semi-modal-header {
padding: 12px 16px !important;
}
.semi-modal-header-text {
font-size: 16px !important;
}
/* Group info modal specific */
.wk-group-info-modal .semi-modal-content,
.wk-group-info-modal-v2 .semi-modal-content,
.wk-group-info-modal-v3 .semi-modal-content,
.wk-group-info-modal-redesigned .semi-modal-content,
.wk-base-modal-userinfo .semi-modal-content {
max-height: 80vh !important;
}
.wk-group-modal-header {
padding: 16px !important;
gap: 12px !important;
}
.wk-group-modal-avatar {
width: 56px !important;
height: 56px !important;
}
.wk-group-modal-name {
font-size: 16px !important;
max-width: 200px !important;
}
.wk-group-modal-members {
font-size: 13px !important;
}
.wk-group-modal-send-btn {
margin: 12px 16px !important;
width: calc(100% - 32px) !important;
height: 40px !important;
}
.wk-group-modal-option {
padding: 12px 16px !important;
}
/* ==========================================================================
VIRTUAL KEYBOARD HANDLING - iOS Safari / Chrome Mobile
========================================================================== */
/* Adjust modal when keyboard is open (uses --keyboard-height from JS) */
.semi-modal-content {
transition: bottom 0.2s ease, max-height 0.2s ease, top 0.2s ease;
}
/* When keyboard is detected open via body class */
body.keyboard-open .semi-modal-content {
/* Move modal up to sit above keyboard */
/* bottom: var(--keyboard-height, 0) !important; */
/* Expand modal to fill available viewport height above keyboard */
/* max-height: calc(100vh - var(--keyboard-height, 0) - 20px) !important; */
/* Remove top constraint when keyboard is open - allow modal to expand upward */
/* top: 40px !important; */
/* Ensure smooth transition */
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Adjust modal body scroll area when keyboard is open */
body.keyboard-open .semi-modal-body {
/* max-height: calc(100vh - var(--keyboard-height, 0) - 100px) !important; */
padding-bottom: 20px !important;
}
/* Ensure focused inputs scroll into view properly */
body.keyboard-open .semi-modal-content input:focus,
body.keyboard-open .semi-modal-content textarea:focus {
scroll-margin-bottom: 20px;
}
/* Ensure inputs scroll into view when focused */
.semi-modal-body input:focus,
.semi-modal-body textarea:focus,
.semi-input-wrapper input:focus {
scroll-margin-bottom: 150px;
}
/* Smooth scroll for modal body */
.semi-modal-body {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* Input containers should have enough bottom padding */
.semi-modal-body .semi-input-wrapper,
.semi-modal-body .semi-form-field {
scroll-padding-bottom: 100px;
}
/* Specific fix for password prompt modal */
.wk-chatpwd-prompt,
.wk-chatpwd-reset-modal {
padding-bottom: calc(20px + 0);
padding-bottom: calc(20px + var(--keyboard-height, 0));
}
}
/* ===================================
TELEGRAM-INSPIRED CHAT COMPONENTS
Compatible with React 17 & Semi UI
=================================== */
/* === COLLAPSIBLE SIDEBAR COMPONENT === */
.wk-chat-content-left {
width: 100%;
transition: width var(--wk-duration-normal) var(--wk-ease-out);
background-color: var(--wk-surface-primary);
border-right: 1px solid var(--wk-border-default);
overflow: hidden;
position: relative;
}
.wk-chat-content.wk-sidebar-collapsed .wk-chat-content-left {
width: var(--wk-sidebar-collapsed-width);
}
.wk-sidebar-collapse-btn {
background: none;
border: none;
padding: var(--wk-space-2);
border-radius: var(--wk-radius-md);
color: var(--wk-text-secondary);
cursor: pointer;
transition: all var(--wk-duration-fast) var(--wk-ease-out);
display: flex;
align-items: center;
justify-content: center;
}
.wk-sidebar-collapse-btn:hover {
background-color: var(--wk-hover-subtle);
color: var(--wk-text-primary);
}
.wk-sidebar-collapse-btn:focus {
outline: none;
background-color: var(--wk-active-subtle);
}
/* Hide text content when collapsed */
.wk-chat-content.wk-sidebar-collapsed .wk-chat-title,
.wk-chat-content.wk-sidebar-collapsed .wk-conversationlist-item-right {
opacity: 0;
visibility: hidden;
transition: opacity var(--wk-duration-fast) var(--wk-ease-out);
}
/* Center avatar when collapsed */
.wk-chat-content.wk-sidebar-collapsed .wk-conversationlist-item {
justify-content: center;
padding: var(--wk-space-3);
}
.wk-chat-content.wk-sidebar-collapsed .wk-conversationlist-item-avatar-box {
margin: 0;
}
/* Sidebar toggle button (floating) */
.wk-sidebar-toggle {
position: fixed;
top: var(--wk-space-4);
left: var(--wk-space-4);
width: 48px;
height: 48px;
border-radius: var(--wk-radius-full);
background: var(--wk-color-brand-500);
border: none;
display: flex;
align-items: center;
justify-content: center;
color: var(--wk-text-inverse);
box-shadow: var(--wk-shadow-md);
z-index: var(--wk-z-modal);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
opacity: 0;
visibility: hidden;
cursor: pointer;
}
.wk-sidebar-toggle:hover {
background: var(--wk-color-brand-600);
transform: translateY(-2px);
box-shadow: var(--wk-shadow-lg);
}
.wk-sidebar-toggle:focus {
outline: none;
}
/* Show toggle button when sidebar is collapsed */
.wk-chat-content.wk-sidebar-collapsed .wk-sidebar-toggle {
opacity: 1;
visibility: visible;
}
/* Hide toggle when sidebar is open on larger screens */
@media screen and (min-width: 769px) {
.wk-chat-content:not(.wk-sidebar-collapsed) .wk-sidebar-toggle {
opacity: 0;
visibility: hidden;
}
}
/* Search section responsive behavior */
.wk-chat-content.wk-sidebar-collapsed .wk-chat-search-left {
justify-content: center;
}
.wk-chat-content.wk-sidebar-collapsed .wk-chat-search-right {
display: none;
}
/* === SEARCH INPUT COMPONENT === */
/* Telegram-inspired Component Specifications */
/* === SEARCH INPUT COMPONENT === */
.wk-search-input {
position: relative;
width: 100%;
}
.wk-search-input-wrapper {
position: relative;
display: flex;
align-items: center;
background-color: var(--wk-color-neutral-100);
border: 1px solid transparent;
border-radius: var(--wk-radius-lg);
padding: var(--wk-space-3) var(--wk-space-4);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-search-input-wrapper:hover {
background-color: var(--wk-color-neutral-200);
}
.wk-search-input-wrapper:focus-within {
background-color: var(--wk-surface-primary);
border-color: var(--wk-color-brand-500);
box-shadow: 0 0 0 3px var(--wk-color-brand-100);
}
.wk-search-input input {
border: none;
background: transparent;
outline: none;
flex: 1 1;
font-size: var(--wk-font-size-sm);
color: var(--wk-text-primary);
/* margin-left: var(--wk-space-3); */
}
.wk-search-input input::-moz-placeholder {
color: var(--wk-text-placeholder);
}
.wk-search-input input::placeholder {
color: var(--wk-text-placeholder);
}
.wk-search-input-icon {
color: var(--wk-text-muted);
transition: color var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-search-input-wrapper:focus-within .wk-search-input-icon {
color: var(--wk-color-brand-500);
}
/* Keyboard shortcut indicator */
.wk-search-input-shortcut {
background-color: var(--wk-color-neutral-200);
border-radius: var(--wk-radius-sm);
padding: var(--wk-space-1) var(--wk-space-2);
font-size: var(--wk-font-size-xs);
color: var(--wk-text-muted);
font-family: monospace;
}
/* === CHAT LIST ITEM COMPONENT === */
.wk-chat-list-item {
display: flex;
align-items: center;
padding: var(--wk-space-3) var(--wk-space-4);
border-radius: var(--wk-radius-md);
cursor: pointer;
transition: all var(--wk-duration-fast) var(--wk-ease-out);
position: relative;
border: 1px solid transparent;
}
.wk-chat-list-item:focus {
outline: none;
}
.wk-chat-list-item:hover {
background-color: var(--wk-hover-subtle);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.wk-chat-list-item:active {
background-color: var(--wk-active-subtle);
}
.wk-chat-list-item.active {
background-color: var(--wk-color-brand-50);
border-color: var(--wk-color-brand-200);
box-shadow: inset 3px 0 0 var(--wk-color-brand-500);
}
.wk-chat-list-item.unread {
font-weight: var(--wk-font-weight-medium);
}
.wk-chat-list-item.pinned::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background-color: var(--wk-color-brand-500);
border-radius: 0 var(--wk-radius-sm) var(--wk-radius-sm) 0;
}
.wk-chat-list-item.muted {
opacity: 0.6;
}
.wk-chat-list-item.typing .wk-chat-list-item-preview {
color: var(--wk-color-brand-500);
font-style: italic;
}
/* Avatar section */
.wk-chat-list-item-avatar {
position: relative;
margin-right: var(--wk-space-3);
flex-shrink: 0;
}
.wk-chat-list-item-avatar img {
width: 48px;
height: 48px;
border-radius: var(--wk-radius-full);
-o-object-fit: cover;
object-fit: cover;
}
.wk-chat-list-item-online-indicator {
position: absolute;
bottom: 2px;
right: 2px;
width: 12px;
height: 12px;
background-color: var(--wk-color-success);
border: 2px solid var(--wk-surface-primary);
border-radius: var(--wk-radius-full);
}
/* Content section */
.wk-chat-list-item-content {
flex: 1 1;
min-width: 0;
}
.wk-chat-list-item-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--wk-space-1);
}
.wk-chat-list-item-name {
font-size: var(--wk-font-size-sm);
font-weight: var(--wk-font-weight-medium);
color: var(--wk-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1;
}
.wk-chat-list-item-time {
font-size: var(--wk-font-size-xs);
color: var(--wk-text-muted);
margin-left: var(--wk-space-2);
flex-shrink: 0;
}
.wk-chat-list-item-preview {
font-size: var(--wk-font-size-sm);
color: var(--wk-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: var(--wk-line-height-normal);
}
/* Badge section */
.wk-chat-list-item-badge {
display: flex;
align-items: center;
gap: var(--wk-space-1);
margin-left: var(--wk-space-2);
flex-shrink: 0;
}
.wk-chat-list-item-unread-count {
background-color: var(--wk-color-brand-500);
color: var(--wk-text-inverse);
font-size: var(--wk-font-size-xs);
font-weight: var(--wk-font-weight-medium);
padding: 2px var(--wk-space-2);
border-radius: var(--wk-radius-full);
min-width: 18px;
text-align: center;
line-height: 1.2;
}
.wk-chat-list-item-unread-count.muted {
background-color: var(--wk-color-neutral-400);
}
.wk-chat-list-item-pin-icon {
color: var(--wk-text-muted);
opacity: 0.7;
}
/* === MESSAGE BUBBLE COMPONENT === */
.wk-message-bubble {
max-width: 384px;
border-radius: var(--wk-radius-bubble);
padding: var(--wk-space-4);
position: relative;
box-shadow: var(--wk-shadow-sm);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-message-bubble.me {
background-color: var(--wk-color-brand-500);
color: var(--wk-text-inverse);
margin-left: auto;
border-bottom-right-radius: var(--wk-radius-md);
}
.wk-message-bubble.others {
background-color: var(--wk-surface-primary);
border: 1px solid var(--wk-border-default);
border-bottom-left-radius: var(--wk-radius-md);
}
.wk-message-bubble.image {
padding: var(--wk-space-1);
border-radius: var(--wk-radius-xl);
overflow: hidden;
}
.wk-message-bubble.file {
display: flex;
align-items: center;
gap: var(--wk-space-3);
padding: var(--wk-space-3);
}
.wk-message-bubble.voice {
display: flex;
align-items: center;
gap: var(--wk-space-3);
min-width: 120px;
}
.wk-message-bubble-content {
font-size: var(--wk-font-size-sm);
line-height: var(--wk-line-height-relaxed);
}
.wk-message-bubble-reply {
border-left: 2px solid var(--wk-color-neutral-300);
padding-left: var(--wk-space-3);
margin-bottom: var(--wk-space-2);
background-color: var(--wk-color-neutral-50);
border-radius: var(--wk-radius-md);
padding: var(--wk-space-2);
font-size: var(--wk-font-size-xs);
}
.wk-message-bubble-edited {
font-size: var(--wk-font-size-xs);
color: var(--wk-text-muted);
margin-top: var(--wk-space-1);
}
.wk-message-bubble-reactions {
display: flex;
gap: var(--wk-space-1);
margin-top: var(--wk-space-2);
}
.wk-message-bubble-reaction {
background-color: var(--wk-color-neutral-100);
border-radius: var(--wk-radius-full);
padding: var(--wk-space-1) var(--wk-space-2);
font-size: var(--wk-font-size-xs);
display: flex;
align-items: center;
gap: var(--wk-space-1);
cursor: pointer;
transition: background-color var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-message-bubble-reaction:hover {
background-color: var(--wk-color-neutral-200);
}
.wk-message-bubble-timestamp {
font-size: var(--wk-font-size-xs);
opacity: 0.7;
margin-top: var(--wk-space-1);
}
.wk-message-bubble-status {
display: flex;
align-items: center;
gap: var(--wk-space-1);
margin-top: var(--wk-space-1);
justify-content: flex-end;
}
.wk-message-bubble-read-receipt {
color: var(--wk-color-brand-400);
font-size: 12px;
}
.wk-message-bubble-read-receipt.unread {
color: var(--wk-text-muted);
}
/* === COMPOSER BAR COMPONENT === */
.wk-composer-bar {
background-color: var(--wk-surface-primary);
border-top: 1px solid var(--wk-border-default);
padding: var(--wk-space-4);
min-height: var(--wk-composer-height);
}
.wk-composer-bar-content {
display: flex;
align-items: flex-end;
gap: var(--wk-space-3);
max-width: var(--wk-max-content-width);
margin: 0 auto;
}
.wk-composer-bar-input {
flex: 1 1;
background-color: var(--wk-color-neutral-50);
border: 1px solid var(--wk-border-default);
border-radius: var(--wk-radius-lg);
padding: var(--wk-space-3) var(--wk-space-4);
min-height: 44px;
max-height: 120px;
overflow-y: auto;
resize: none;
outline: none;
font-size: var(--wk-font-size-sm);
line-height: var(--wk-line-height-normal);
color: var(--wk-text-primary);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-composer-bar-input:focus {
border-color: var(--wk-color-brand-500);
box-shadow: 0 0 0 3px var(--wk-color-brand-100);
background-color: var(--wk-surface-primary);
outline: none;
}
.wk-composer-bar-input::-moz-placeholder {
color: var(--wk-text-placeholder);
}
.wk-composer-bar-input::placeholder {
color: var(--wk-text-placeholder);
}
.wk-composer-bar-input.typing {
border-color: var(--wk-color-brand-500);
}
.wk-composer-bar-input.disabled {
background-color: var(--wk-color-neutral-100);
cursor: not-allowed;
opacity: 0.6;
}
.wk-composer-bar-input.error {
border-color: var(--wk-color-danger);
box-shadow: 0 0 0 3px var(--wk-color-danger-100);
}
.wk-composer-bar-actions {
display: flex;
align-items: flex-end;
gap: var(--wk-space-2);
}
.wk-composer-bar-action {
padding: var(--wk-space-2);
border-radius: var(--wk-radius-md);
cursor: pointer;
transition: all var(--wk-duration-fast) var(--wk-ease-out);
border: none;
background: none;
color: var(--wk-text-secondary);
}
.wk-composer-bar-action:hover {
background-color: var(--wk-hover-subtle);
color: var(--wk-text-primary);
}
.wk-composer-bar-action:focus {
outline: none;
background-color: var(--wk-active-subtle);
}
.wk-composer-bar-send {
background-color: var(--wk-color-brand-500);
color: var(--wk-text-inverse);
padding: var(--wk-space-3);
border-radius: var(--wk-radius-full);
border: none;
cursor: pointer;
transition: all var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-composer-bar-send:hover {
background-color: var(--wk-color-brand-600);
transform: scale(1.05);
}
.wk-composer-bar-send:focus {
outline: none;
box-shadow: 0 0 0 3px var(--wk-color-brand-100);
}
.wk-composer-bar-send:disabled {
background-color: var(--wk-color-neutral-300);
cursor: not-allowed;
transform: none;
}
.wk-composer-bar-action-button {
width: 40px;
height: 40px;
border: none;
background-color: transparent;
border-radius: var(--wk-radius-full);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--wk-text-muted);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-composer-bar-action-button:hover {
background-color: var(--wk-color-neutral-100);
color: var(--wk-text-primary);
}
.wk-composer-bar-send-button {
background-color: var(--wk-color-brand-500);
color: var(--wk-text-inverse);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-composer-bar-send-button:hover {
background-color: var(--wk-color-brand-600);
}
.wk-composer-bar-send-button:disabled {
background-color: var(--wk-color-neutral-300);
cursor: not-allowed;
}
/* Upload error state */
.wk-composer-bar-upload-error {
background-color: var(--wk-color-danger-50);
border: 1px solid var(--wk-color-danger-200);
border-radius: var(--wk-radius-md);
padding: var(--wk-space-3);
margin-bottom: var(--wk-space-3);
color: var(--wk-color-danger);
font-size: var(--wk-font-size-sm);
}
/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
.wk-chat-list-item {
padding: var(--wk-space-4);
}
.wk-chat-list-item-avatar img {
width: 44px;
height: 44px;
}
.wk-message-bubble {
max-width: 280px;
}
.wk-composer-bar {
padding: var(--wk-space-3);
}
}
/* === DARK MODE OVERRIDES === */
body[theme-mode="dark"] .wk-chat-list-item:hover {
background-color: var(--wk-color-neutral-800);
}
body[theme-mode="dark"] .wk-chat-list-item.active {
background-color: var(--wk-color-brand-900);
}
body[theme-mode="dark"] .wk-chat-list-item-name {
color: var(--wk-text-primary);
}
body[theme-mode="dark"] .wk-chat-list-item-preview {
color: var(--wk-text-muted);
}
.wk-chat-list-item-time {
font-size: var(--wk-font-size-xs);
color: var(--wk-text-muted);
flex-shrink: 0;
margin-left: var(--wk-space-2);
}
.wk-chat-list-item-preview {
font-size: var(--wk-font-size-sm);
color: var(--wk-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-chat-list-item-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--wk-space-1);
}
.wk-chat-list-item-badge {
background-color: var(--wk-color-brand-500);
color: var(--wk-text-inverse);
font-size: var(--wk-font-size-xs);
border-radius: var(--wk-radius-full);
padding: 2px 8px;
min-width: 20px;
text-align: center;
line-height: 16px;
}
body[theme-mode="dark"] .wk-chat-list-item {
border-bottom-color: var(--wk-border-default);
}
body[theme-mode="dark"] .wk-chat-list-item:hover {
background-color: var(--wk-color-neutral-800);
}
body[theme-mode="dark"] .wk-chat-list-item:active {
background-color: var(--wk-color-neutral-700);
}
body[theme-mode="dark"] .wk-chat-list-item-name {
color: var(--wk-text-primary);
}
body[theme-mode="dark"] .wk-chat-list-item-preview {
color: var(--wk-text-muted);
}
/* === MESSAGE BUBBLE COMPONENT === */
.wk-message-bubble {
max-width: 384px;
border-radius: var(--wk-radius-bubble);
padding: var(--wk-space-4);
position: relative;
box-shadow: var(--wk-shadow-sm);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-message-bubble.me {
background-color: var(--wk-color-brand-500);
color: var(--wk-text-inverse);
margin-left: auto;
border-bottom-right-radius: var(--wk-radius-md);
}
.wk-message-bubble.others {
background-color: var(--wk-surface-primary);
border: 1px solid var(--wk-border-default);
border-bottom-left-radius: var(--wk-radius-md);
}
.wk-message-bubble.image {
padding: var(--wk-space-1);
border-radius: var(--wk-radius-xl);
overflow: hidden;
}
.wk-message-bubble.file {
display: flex;
align-items: center;
gap: var(--wk-space-3);
padding: var(--wk-space-3);
}
.wk-message-bubble.voice {
display: flex;
align-items: center;
gap: var(--wk-space-3);
min-width: 120px;
}
.wk-message-bubble-content {
font-size: var(--wk-font-size-sm);
line-height: var(--wk-line-height-relaxed);
}
.wk-message-bubble-reply {
border-left: 2px solid var(--wk-color-neutral-300);
padding-left: var(--wk-space-3);
margin-bottom: var(--wk-space-2);
background-color: var(--wk-color-neutral-50);
border-radius: var(--wk-radius-md);
padding: var(--wk-space-2);
font-size: var(--wk-font-size-xs);
}
.wk-message-bubble-edited {
font-size: var(--wk-font-size-xs);
color: var(--wk-text-muted);
margin-top: var(--wk-space-1);
}
.wk-message-bubble-reactions {
display: flex;
gap: var(--wk-space-1);
margin-top: var(--wk-space-2);
}
.wk-message-bubble-reaction {
background-color: var(--wk-color-neutral-100);
border-radius: var(--wk-radius-full);
padding: var(--wk-space-1) var(--wk-space-2);
font-size: var(--wk-font-size-xs);
display: flex;
align-items: center;
gap: var(--wk-space-1);
cursor: pointer;
transition: background-color var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-message-bubble-reaction:hover {
background-color: var(--wk-color-neutral-200);
}
.wk-message-bubble-timestamp {
font-size: var(--wk-font-size-xs);
opacity: 0.7;
margin-top: var(--wk-space-1);
}
.wk-message-bubble-status {
display: inline-flex;
align-items: center;
margin-left: var(--wk-space-1);
}
body[theme-mode="dark"] .wk-message-bubble.others {
background-color: var(--wk-surface-tertiary);
border-color: var(--wk-border-default);
}
/* === COMPOSER BAR COMPONENT === */
.wk-composer-bar {
background-color: var(--wk-surface-primary);
border-top: 1px solid var(--wk-border-default);
padding: var(--wk-space-4);
}
.wk-composer-bar-input-container {
display: flex;
align-items: flex-end;
gap: var(--wk-space-3);
}
.wk-composer-bar-input-wrapper {
flex: 1 1;
position: relative;
}
.wk-composer-bar-input {
width: 100%;
resize: none;
background-color: var(--wk-color-neutral-50);
border: 1px solid var(--wk-border-default);
border-radius: var(--wk-radius-lg);
padding: var(--wk-space-3) var(--wk-space-12) var(--wk-space-3) var(--wk-space-4);
max-height: 128px;
font-size: var(--wk-font-size-sm);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-composer-bar-input:focus {
outline: none;
border-color: var(--wk-color-brand-500);
box-shadow: 0 0 0 3px var(--wk-color-brand-100);
}
.wk-composer-bar-input::-moz-placeholder {
color: var(--wk-text-placeholder);
}
.wk-composer-bar-input::placeholder {
color: var(--wk-text-placeholder);
}
.wk-composer-bar-input.typing {
border-color: var(--wk-color-brand-300);
}
.wk-composer-bar-input.disabled {
background-color: var(--wk-color-neutral-100);
cursor: not-allowed;
}
.wk-composer-bar-input.error {
border-color: var(--wk-color-danger);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.wk-composer-bar-actions {
position: absolute;
right: var(--wk-space-2);
bottom: var(--wk-space-2);
display: flex;
align-items: center;
gap: var(--wk-space-1);
}
.wk-composer-bar-action {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: var(--wk-text-muted);
border-radius: var(--wk-radius-md);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
cursor: pointer;
}
.wk-composer-bar-action:hover {
color: var(--wk-text-secondary);
background-color: var(--wk-color-neutral-100);
}
.wk-composer-bar-send {
width: 40px;
height: 40px;
background-color: var(--wk-color-brand-500);
color: var(--wk-text-inverse);
border-radius: var(--wk-radius-full);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color var(--wk-duration-fast) var(--wk-ease-out);
border: none;
}
.wk-composer-bar-send:hover {
background-color: var(--wk-color-brand-600);
}
.wk-composer-bar-send:disabled {
background-color: var(--wk-color-neutral-300);
cursor: not-allowed;
}
.wk-composer-bar-toolbar {
display: flex;
align-items: center;
gap: var(--wk-space-2);
margin-top: var(--wk-space-2);
}
body[theme-mode="dark"] .wk-composer-bar {
background-color: var(--wk-surface-secondary);
border-top-color: var(--wk-border-default);
}
body[theme-mode="dark"] .wk-composer-bar-input {
background-color: var(--wk-surface-tertiary);
border-color: var(--wk-border-default);
color: var(--wk-text-primary);
}
/* === HEADER BAR COMPONENT === */
.wk-header-bar {
background-color: var(--wk-surface-primary);
border-bottom: 1px solid var(--wk-border-default);
padding: var(--wk-space-3) var(--wk-space-4);
display: flex;
align-items: center;
justify-content: space-between;
height: var(--wk-chat-header-height);
}
.wk-header-bar-left {
display: flex;
align-items: center;
gap: var(--wk-space-3);
}
.wk-header-bar-back {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: var(--wk-text-muted);
border-radius: var(--wk-radius-md);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
cursor: pointer;
}
.wk-header-bar-back:hover {
color: var(--wk-text-secondary);
background-color: var(--wk-color-neutral-100);
}
@media (min-width: 1024px) {
.wk-header-bar-back {
display: none;
}
}
.wk-header-bar-avatar {
width: 40px;
height: 40px;
border-radius: var(--wk-radius-full);
}
.wk-header-bar-info {
flex: 1 1;
min-width: 0;
}
.wk-header-bar-title {
font-weight: 500;
color: var(--wk-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-header-bar-subtitle {
font-size: var(--wk-font-size-sm);
color: var(--wk-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-header-bar-actions {
display: flex;
align-items: center;
gap: var(--wk-space-2);
}
.wk-header-bar-action {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: var(--wk-text-muted);
border-radius: var(--wk-radius-md);
transition: all var(--wk-duration-fast) var(--wk-ease-out);
cursor: pointer;
}
.wk-header-bar-action:hover {
color: var(--wk-text-secondary);
background-color: var(--wk-color-neutral-100);
}
body[theme-mode="dark"] .wk-header-bar {
background-color: var(--wk-surface-secondary);
border-bottom-color: var(--wk-border-default);
}
body[theme-mode="dark"] .wk-header-bar-title {
color: var(--wk-text-primary);
}
/* === LAYOUT RESPONSIVE BEHAVIOR === */
.wk-layout-container {
display: flex;
height: 100vh;
width: 100%;
}
.wk-layout-sidebar {
width: var(--wk-sidebar-width);
background-color: var(--wk-surface-primary);
border-right: 1px solid var(--wk-border-default);
flex-shrink: 0;
}
.wk-layout-main {
flex: 1 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.wk-layout-info-panel {
width: var(--wk-info-panel-width);
background-color: var(--wk-surface-primary);
border-left: 1px solid var(--wk-border-default);
flex-shrink: 0;
}
/* Mobile: Single column, sidebar overlay */
@media (max-width: 767px) {
.wk-layout-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 40;
transform: translateX(-100%);
transition: transform var(--wk-duration-normal) var(--wk-ease-out);
}
.wk-layout-sidebar.open {
transform: translateX(0);
}
.wk-layout-info-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 40;
transform: translateX(100%);
transition: transform var(--wk-duration-normal) var(--wk-ease-out);
}
.wk-layout-info-panel.open {
transform: translateX(0);
}
}
/* Tablet: Two columns, info panel as overlay */
@media (min-width: 768px) and (max-width: 1439px) {
.wk-layout-info-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 30;
transform: translateX(100%);
transition: transform var(--wk-duration-normal) var(--wk-ease-out);
box-shadow: var(--wk-shadow-lg);
}
.wk-layout-info-panel.open {
transform: translateX(0);
}
}
/* Desktop: Three columns */
@media (min-width: 1440px) {
.wk-layout-info-panel {
position: relative;
transform: none;
transition: none;
}
}
/* === UTILITY CLASSES === */
.wk-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.wk-touch-target {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* === ANIMATION CLASSES === */
.wk-fade-in {
animation: fadeIn var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-slide-in-right {
animation: slideInRight var(--wk-duration-normal) var(--wk-ease-out);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* === ENHANCED DARK MODE OVERRIDES === */
body[theme-mode="dark"] .wk-chat-list-item:hover {
background-color: var(--wk-hover-subtle);
}
body[theme-mode="dark"] .wk-chat-list-item.active {
background-color: var(--wk-color-brand-900);
border-color: var(--wk-color-brand-700);
}
body[theme-mode="dark"] .wk-message-bubble.others {
background-color: var(--wk-surface-secondary);
border-color: var(--wk-border-default);
}
body[theme-mode="dark"] .wk-message-bubble.others:hover {
background-color: var(--wk-surface-tertiary);
border-color: var(--wk-border-muted);
}
body[theme-mode="dark"] .wk-composer-bar {
background-color: var(--wk-surface-secondary);
border-top-color: var(--wk-border-default);
}
body[theme-mode="dark"] .wk-composer-bar-input {
background-color: var(--wk-surface-tertiary);
border-color: var(--wk-border-default);
color: var(--wk-text-primary);
}
body[theme-mode="dark"] .wk-composer-bar-action:hover {
background-color: var(--wk-hover-subtle);
}
body[theme-mode="dark"] .wk-sidebar-toggle {
background: var(--wk-color-brand-500);
}
/* LiteChat Design System */
/* Import Telegram-inspired design system */
:root {
--wk-color-theme: var(--wk-color-brand-600);
--wk-color-border: #e5e5e5;
--wk-color-secondary: rgba(246, 246, 246);
--wk-color-secondary-2: rgba(246, 246, 246);
--wk-color-tertiary: rgb(171, 171, 171, 0.5);
--wk-color-hover: #eee;
/* 提示类型的字体颜色 */
--wk-color-font-tip: rgb(170, 170, 170);
--wk-width-layout-content-left: 300px;
--wk-wdith-conversation-list: var(--wk-width-layout-content-left);
/* --wk-height-chat-search: 65px; */
--wk-height-chat-search: 64px;
--wk-height-chat-conversation-header: 64px;
--wk-wdith-chat-channelsetting: 340px;
--wk-layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
--wk-slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
--wk-line: 1px solid #eee;
--wk-line-color: #eee;
--wk-color-item: white;
--wk-text-item: rgba(9, 30, 66, .87);
--wk-message-item: white;
--wk-message-color: #0F0F0F;
/* Chat Design Tokens - Telegram-inspired */
--chat-brand-50: #E8F4FB;
--chat-brand-500: var(--wk-color-brand-600);
--chat-brand-600: var(--wk-color-brand-700);
--chat-bg: #FFFFFF;
--chat-bg-soft: #F6F7F9;
--chat-surface: #FFFFFF;
--chat-text-strong: #0F172A;
--chat-text: #1F2937;
--chat-text-muted: #6B7280;
--chat-border: #E5E7EB;
--chat-focus: #93C5FD;
--chat-success: #16A34A;
--chat-danger: #EF4444;
/* Semi Design overrides */
--semi-color-primary: var(--wk-color-brand-600);
--semi-color-primary-hover: var(--wk-color-brand-700);
--semi-color-primary-active: #126295;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body[theme-mode=dark] {
--wk-color-secondary: #0F0F0F;
--wk-color-border: #444242;
--wk-color-secondary-2: rgb(33, 33, 33);
--wk-color-tertiary: rgb(212, 206, 206);
--wk-line: 1px solid rgb(255, 255, 255, 0.1);
--wk-line-color: rgb(255, 255, 255, 0.1);
--wk-color-item: rgb(33, 33, 33);
--wk-text-item: white;
color: white !important;
--wk-message-item: #0F0F0F;
--wk-message-color: white;
--semi-color-primary: #0064fa;
--semi-color-primary-hover: rgba(82, 127, 216, 0.5);
}
/* Tailwind CSS */
*, ::before, ::after{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
.\!container{
width: 100% !important;
}
.container{
width: 100%;
}
@media (min-width: 640px){
.\!container{
max-width: 640px !important;
}
.container{
max-width: 640px;
}
}
@media (min-width: 768px){
.\!container{
max-width: 768px !important;
}
.container{
max-width: 768px;
}
}
@media (min-width: 1024px){
.\!container{
max-width: 1024px !important;
}
.container{
max-width: 1024px;
}
}
@media (min-width: 1280px){
.\!container{
max-width: 1280px !important;
}
.container{
max-width: 1280px;
}
}
@media (min-width: 1440px){
.\!container{
max-width: 1440px !important;
}
.container{
max-width: 1440px;
}
}
@media (min-width: 1536px){
.\!container{
max-width: 1536px !important;
}
.container{
max-width: 1536px;
}
}
.sr-only{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.pointer-events-none{
pointer-events: none;
}
.\!visible{
visibility: visible !important;
}
.visible{
visibility: visible;
}
.static{
position: static;
}
.fixed{
position: fixed;
}
.absolute{
position: absolute;
}
.relative{
position: relative;
}
.sticky{
position: sticky;
}
.inset-0{
inset: 0px;
}
.inset-y-0{
top: 0px;
bottom: 0px;
}
.bottom-0{
bottom: 0px;
}
.left-0{
left: 0px;
}
.left-1\/2{
left: 50%;
}
.right-0{
right: 0px;
}
.right-2{
right: 0.5rem;
}
.right-4{
right: 1rem;
}
.top-0{
top: 0px;
}
.top-1\/2{
top: 50%;
}
.top-4{
top: 1rem;
}
.z-10{
z-index: 10;
}
.z-20{
z-index: 20;
}
.z-50{
z-index: 50;
}
.mx-2{
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mx-auto{
margin-left: auto;
margin-right: auto;
}
.mb-1{
margin-bottom: 0.25rem;
}
.mb-2{
margin-bottom: 0.5rem;
}
.mb-3{
margin-bottom: 0.75rem;
}
.mb-4{
margin-bottom: 1rem;
}
.mb-5{
margin-bottom: 1.25rem;
}
.mb-6{
margin-bottom: 1.5rem;
}
.mb-8{
margin-bottom: 2rem;
}
.ml-2{
margin-left: 0.5rem;
}
.mr-1{
margin-right: 0.25rem;
}
.mr-2{
margin-right: 0.5rem;
}
.mt-0\.5{
margin-top: 0.125rem;
}
.mt-1{
margin-top: 0.25rem;
}
.mt-2{
margin-top: 0.5rem;
}
.mt-3{
margin-top: 0.75rem;
}
.mt-4{
margin-top: 1rem;
}
.mt-5{
margin-top: 1.25rem;
}
.mt-8{
margin-top: 2rem;
}
.line-clamp-2{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.line-clamp-3{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.block{
display: block;
}
.inline-block{
display: inline-block;
}
.inline{
display: inline;
}
.flex{
display: flex;
}
.inline-flex{
display: inline-flex;
}
.table{
display: table;
}
.flow-root{
display: flow-root;
}
.grid{
display: grid;
}
.contents{
display: contents;
}
.hidden{
display: none;
}
.aspect-square{
aspect-ratio: 1 / 1;
}
.aspect-video{
aspect-ratio: 16 / 9;
}
.\!h-fit{
height: -moz-fit-content !important;
height: fit-content !important;
}
.h-10{
height: 2.5rem;
}
.h-12{
height: 3rem;
}
.h-14{
height: 3.5rem;
}
.h-16{
height: 4rem;
}
.h-2{
height: 0.5rem;
}
.h-20{
height: 5rem;
}
.h-3{
height: 0.75rem;
}
.h-4{
height: 1rem;
}
.h-48{
height: 12rem;
}
.h-5{
height: 1.25rem;
}
.h-6{
height: 1.5rem;
}
.h-8{
height: 2rem;
}
.h-full{
height: 100%;
}
.max-h-60{
max-height: 15rem;
}
.max-h-\[70px\]{
max-height: 70px;
}
.min-h-0{
min-height: 0px;
}
.min-h-\[calc\(100vh-4rem\)\]{
min-height: calc(100vh - 4rem);
}
.min-h-full{
min-height: 100%;
}
.min-h-screen{
min-height: 100vh;
}
.\!w-full{
width: 100% !important;
}
.w-1\/2{
width: 50%;
}
.w-10{
width: 2.5rem;
}
.w-12{
width: 3rem;
}
.w-16{
width: 4rem;
}
.w-2{
width: 0.5rem;
}
.w-20{
width: 5rem;
}
.w-3{
width: 0.75rem;
}
.w-4{
width: 1rem;
}
.w-48{
width: 12rem;
}
.w-5{
width: 1.25rem;
}
.w-6{
width: 1.5rem;
}
.w-8{
width: 2rem;
}
.w-full{
width: 100%;
}
.min-w-0{
min-width: 0px;
}
.max-w-2xl{
max-width: 42rem;
}
.max-w-full{
max-width: 100%;
}
.max-w-md{
max-width: 28rem;
}
.max-w-xl{
max-width: 36rem;
}
.max-w-xs{
max-width: 20rem;
}
.flex-1{
flex: 1 1;
}
.flex-shrink{
flex-shrink: 1;
}
.flex-shrink-0{
flex-shrink: 0;
}
.flex-grow{
flex-grow: 1;
}
.-translate-x-1\/2{
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-8{
--tw-translate-x: -2rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2{
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0{
--tw-translate-x: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-4{
--tw-translate-x: 1rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-8{
--tw-translate-x: 2rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0{
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-8{
--tw-translate-y: 2rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse{
50%{
opacity: .5;
}
}
.animate-pulse{
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin{
to{
transform: rotate(360deg);
}
}
.animate-spin{
animation: spin 1s linear infinite;
}
.cursor-not-allowed{
cursor: not-allowed;
}
.cursor-pointer{
cursor: pointer;
}
.resize{
resize: both;
}
.grid-cols-2{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col{
flex-direction: column;
}
.flex-wrap{
flex-wrap: wrap;
}
.items-start{
align-items: flex-start;
}
.items-end{
align-items: flex-end;
}
.items-center{
align-items: center;
}
.justify-end{
justify-content: flex-end;
}
.justify-center{
justify-content: center;
}
.justify-between{
justify-content: space-between;
}
.gap-1{
gap: 0.25rem;
}
.gap-2{
gap: 0.5rem;
}
.gap-3{
gap: 0.75rem;
}
.\!space-y-4 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0 !important;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))) !important;
margin-bottom: calc(1rem * var(--tw-space-y-reverse)) !important;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.overflow-auto{
overflow: auto;
}
.overflow-hidden{
overflow: hidden;
}
.overflow-x-auto{
overflow-x: auto;
}
.overflow-y-auto{
overflow-y: auto;
}
.truncate{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.whitespace-nowrap{
white-space: nowrap;
}
.text-wrap{
text-wrap: wrap;
}
.text-nowrap{
text-wrap: nowrap;
}
.rounded{
border-radius: 0.25rem;
}
.rounded-2xl{
border-radius: 1rem;
}
.rounded-3xl{
border-radius: 1.5rem;
}
.rounded-full{
border-radius: 9999px;
}
.rounded-lg{
border-radius: 0.5rem;
}
.rounded-xl{
border-radius: 0.75rem;
}
.border{
border-width: 1px;
}
.border-0{
border-width: 0px;
}
.border-2{
border-width: 2px;
}
.border-b{
border-bottom-width: 1px;
}
.border-l{
border-left-width: 1px;
}
.border-t{
border-top-width: 1px;
}
.border-t-2{
border-top-width: 2px;
}
.border-none{
border-style: none;
}
.border-blue-500{
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / 1);
border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-brand-500{
--tw-border-opacity: 1;
border-color: rgb(30 150 213 / 1);
border-color: rgb(30 150 213 / var(--tw-border-opacity, 1));
}
.border-gray-100{
--tw-border-opacity: 1;
border-color: rgb(243 244 246 / 1);
border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200{
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / 1);
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-200\/50{
border-color: rgb(229 231 235 / 0.5);
}
.border-gray-200\/60{
border-color: rgb(229 231 235 / 0.6);
}
.border-green-400{
--tw-border-opacity: 1;
border-color: rgb(74 222 128 / 1);
border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}
.border-neutral-200{
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / 1);
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-red-200{
--tw-border-opacity: 1;
border-color: rgb(254 202 202 / 1);
border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-transparent{
border-color: transparent;
}
.border-white{
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / 1);
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/20{
border-color: rgb(255 255 255 / 0.2);
}
.border-white\/30{
border-color: rgb(255 255 255 / 0.3);
}
.border-white\/40{
border-color: rgb(255 255 255 / 0.4);
}
.bg-\[\#0064fa\]{
--tw-bg-opacity: 1;
background-color: rgb(0 100 250 / 1);
background-color: rgb(0 100 250 / var(--tw-bg-opacity, 1));
}
.bg-blue-50{
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / 1);
background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500{
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / 1);
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-brand-500{
--tw-bg-opacity: 1;
background-color: rgb(30 150 213 / 1);
background-color: rgb(30 150 213 / var(--tw-bg-opacity, 1));
}
.bg-gray-100{
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / 1);
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-100\/80{
background-color: rgb(243 244 246 / 0.8);
}
.bg-gray-200{
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / 1);
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-50{
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / 1);
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-green-100{
--tw-bg-opacity: 1;
background-color: rgb(220 252 231 / 1);
background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-50{
--tw-bg-opacity: 1;
background-color: rgb(240 253 244 / 1);
background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500{
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / 1);
background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-neutral-100{
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / 1);
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-neutral-900{
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / 1);
background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-transparent{
background-color: transparent;
}
.bg-white{
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / 1);
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/20{
background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/25{
background-color: rgb(255 255 255 / 0.25);
}
.bg-white\/50{
background-color: rgb(255 255 255 / 0.5);
}
.bg-white\/80{
background-color: rgb(255 255 255 / 0.8);
}
.bg-white\/90{
background-color: rgb(255 255 255 / 0.9);
}
.bg-white\/95{
background-color: rgb(255 255 255 / 0.95);
}
.bg-gradient-to-br{
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r{
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-blue-100{
--tw-gradient-from: #dbeafe var(--tw-gradient-from-position);
--tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-400{
--tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
--tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-500{
--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-blue-900\/80{
--tw-gradient-from: rgb(30 58 138 / 0.8) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-400{
--tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-green-500{
--tw-gradient-from: #22c55e var(--tw-gradient-from-position);
--tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-100{
--tw-gradient-from: #ffedd5 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 237 213 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-sky-800\/70{
--tw-gradient-to: rgb(7 89 133 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(7 89 133 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-blue-500{
--tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
}
.to-cyan-100{
--tw-gradient-to: #cffafe var(--tw-gradient-to-position);
}
.to-cyan-600{
--tw-gradient-to: #0891b2 var(--tw-gradient-to-position);
}
.to-cyan-900\/80{
--tw-gradient-to: rgb(22 78 99 / 0.8) var(--tw-gradient-to-position);
}
.to-green-500{
--tw-gradient-to: #22c55e var(--tw-gradient-to-position);
}
.to-red-100{
--tw-gradient-to: #fee2e2 var(--tw-gradient-to-position);
}
.bg-cover{
background-size: cover;
}
.bg-center{
background-position: center;
}
.bg-no-repeat{
background-repeat: no-repeat;
}
.object-contain{
-o-object-fit: contain;
object-fit: contain;
}
.object-cover{
-o-object-fit: cover;
object-fit: cover;
}
.p-1{
padding: 0.25rem;
}
.p-2{
padding: 0.5rem;
}
.p-3{
padding: 0.75rem;
}
.p-4{
padding: 1rem;
}
.p-6{
padding: 1.5rem;
}
.p-8{
padding: 2rem;
}
.px-1\.5{
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.px-2{
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-2\.5{
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.px-3{
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4{
padding-left: 1rem;
padding-right: 1rem;
}
.px-6{
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-0\.5{
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.py-1{
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-1\.5{
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.py-12{
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-2{
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-2\.5{
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.py-3{
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4{
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-8{
padding-top: 2rem;
padding-bottom: 2rem;
}
.pl-12{
padding-left: 3rem;
}
.pl-4{
padding-left: 1rem;
}
.pr-16{
padding-right: 4rem;
}
.pr-28{
padding-right: 7rem;
}
.pr-4{
padding-right: 1rem;
}
.pt-4{
padding-top: 1rem;
}
.pt-6{
padding-top: 1.5rem;
}
.text-left{
text-align: left;
}
.text-center{
text-align: center;
}
.text-2xl{
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl{
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-base{
font-size: 15px;
line-height: 22px;
}
.text-lg{
font-size: 16px;
line-height: 24px;
}
.text-sm{
font-size: 14px;
line-height: 20px;
}
.text-xl{
font-size: 18px;
line-height: 28px;
}
.text-xs{
font-size: 12px;
line-height: 16px;
}
.font-bold{
font-weight: 700;
}
.font-medium{
font-weight: 500;
}
.font-semibold{
font-weight: 600;
}
.uppercase{
text-transform: uppercase;
}
.capitalize{
text-transform: capitalize;
}
.italic{
font-style: italic;
}
.leading-relaxed{
line-height: 1.625;
}
.\!text-white{
--tw-text-opacity: 1 !important;
color: rgb(255 255 255 / 1) !important;
color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}
.text-blue-500{
--tw-text-opacity: 1;
color: rgb(59 130 246 / 1);
color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600{
--tw-text-opacity: 1;
color: rgb(37 99 235 / 1);
color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-800{
--tw-text-opacity: 1;
color: rgb(30 64 175 / 1);
color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-gray-400{
--tw-text-opacity: 1;
color: rgb(156 163 175 / 1);
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500{
--tw-text-opacity: 1;
color: rgb(107 114 128 / 1);
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600{
--tw-text-opacity: 1;
color: rgb(75 85 99 / 1);
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700{
--tw-text-opacity: 1;
color: rgb(55 65 81 / 1);
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800{
--tw-text-opacity: 1;
color: rgb(31 41 55 / 1);
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900{
--tw-text-opacity: 1;
color: rgb(17 24 39 / 1);
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-500{
--tw-text-opacity: 1;
color: rgb(34 197 94 / 1);
color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600{
--tw-text-opacity: 1;
color: rgb(22 163 74 / 1);
color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-neutral-400{
--tw-text-opacity: 1;
color: rgb(156 163 175 / 1);
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-neutral-600{
--tw-text-opacity: 1;
color: rgb(75 85 99 / 1);
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-neutral-900{
--tw-text-opacity: 1;
color: rgb(17 24 39 / 1);
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-orange-500{
--tw-text-opacity: 1;
color: rgb(249 115 22 / 1);
color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-red-500{
--tw-text-opacity: 1;
color: rgb(239 68 68 / 1);
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-700{
--tw-text-opacity: 1;
color: rgb(185 28 28 / 1);
color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-white{
--tw-text-opacity: 1;
color: rgb(255 255 255 / 1);
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/90{
color: rgb(255 255 255 / 0.9);
}
.underline{
text-decoration-line: underline;
}
.antialiased{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.placeholder-gray-500::-moz-placeholder{
--tw-placeholder-opacity: 1;
color: rgb(107 114 128 / 1);
color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}
.placeholder-gray-500::placeholder{
--tw-placeholder-opacity: 1;
color: rgb(107 114 128 / 1);
color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}
.opacity-0{
opacity: 0;
}
.opacity-100{
opacity: 1;
}
.opacity-80{
opacity: 0.8;
}
.shadow{
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl{
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md{
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl{
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none{
outline: 2px solid transparent;
outline-offset: 2px;
}
.outline{
outline-style: solid;
}
.ring{
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1{
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-gray-200{
--tw-ring-opacity: 1;
--tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity, 1));
}
.blur{
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow{
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-lg{
--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale{
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-lg{
--tw-backdrop-blur: blur(16px);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm{
--tw-backdrop-blur: blur(4px);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter{
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition{
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all{
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-colors{
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-200{
transition-duration: 200ms;
}
.duration-300{
transition-duration: 300ms;
}
.duration-700{
transition-duration: 700ms;
}
.ease-in-out{
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out{
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/* Custom colors using CSS variables */
:root {
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-200: #bfdbfe;
--color-primary-300: #93c5fd;
--color-primary-400: var(--wk-color-brand-400);
--color-primary-500: var(--wk-color-brand-500);
--color-primary-600: #2563eb;
--color-primary-700: #1d4ed8;
--color-primary-800: #1e40af;
--color-primary-900: #1e3a8a;
}
/* Custom component classes */
.btn-primary {
background-color: #2563eb;
background-color: var(--color-primary-600);
color: white;
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
transition: background-color 0.2s;
}
.btn-primary:hover {
background-color: #1d4ed8;
background-color: var(--color-primary-700);
}
.btn-secondary {
background-color: #e5e7eb;
color: #374151;
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
transition: background-color 0.2s;
}
.btn-secondary:hover {
background-color: #d1d5db;
}
.card {
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
}
body[theme-mode=dark] .card {
background-color: #1f2937;
border-color: #374151;
}
.input-field {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
transition: all 0.2s;
}
.input-field:focus {
outline: none;
border-color: var(--wk-color-brand-500);
border-color: var(--color-primary-500);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
body[theme-mode=dark] .input-field {
background-color: #374151;
color: white;
border-color: #4b5563;
}
.modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
}
.modal-content {
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
max-width: 28rem;
width: 100%;
margin: 0 1rem;
}
body[theme-mode=dark] .modal-content {
background-color: #1f2937;
}
/* ::-webkit-scrollbar-thumb:window-inactive {
background:rgba(255,0,0,0.4);
} */
html {
height: 100%;
box-sizing: border-box;
}
body {
height: 100%;
margin: 0;
/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif; */
-moz-osx-font-smoothing: grayscale;
/* font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Cantarell,sans-serif; */
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Helvetica Neue", sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background: var(--background-color);
color: rgba(9, 30, 66, .87);
--semi-color-primary: #0064fa;
}
div {
outline: none;
/** 让div没有焦点边框 不加这个 第一次打开Modal会聚焦**/
}
#root {
height: 100%;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
.page {
width: 100%;
height: 100%;
background-color: rgb(236, 239, 243);
}
.pageContent {
padding: 0px 40px;
overflow-y: auto;
}
.pageContent.space {
padding-top: 40px;
width: 100%;
height: 100%;
}
@font-face {
font-family: "icomoon";
src: url(../../static/media/icomoon.536087723585cc76b849.woff2);
}
[class^=icon-],
[class*=" icon-"] {
font-family: "icomoon" !important;
speak: none;
font-style: normal;
font-weight: normal;
font-feature-settings: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
ul {
list-style-type: none;
margin-block-start: 0px;
margin-block-end: 0px;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
}
.wk-loading {
width: 100%;
display: flex;
justify-content: center;
padding: 15px 0px;
}
.wk-text-oneline {
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
body[theme-mode=dark] .semi-badge-count {
color: white;
}
/* .semi-modal-content styles moved to specific modal classes to avoid conflicts */
.wk-channelsetting-section-rows .wk-base {
height: auto !important;
max-height: 50vh;
overflow-y: auto;
}
.hover\:scale-\[1\.02\]:hover{
--tw-scale-x: 1.02;
--tw-scale-y: 1.02;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-\[\#0064fa\]:hover{
--tw-border-opacity: 1;
border-color: rgb(0 100 250 / 1);
border-color: rgb(0 100 250 / var(--tw-border-opacity, 1));
}
.hover\:border-brand-600:hover{
--tw-border-opacity: 1;
border-color: rgb(23 124 181 / 1);
border-color: rgb(23 124 181 / var(--tw-border-opacity, 1));
}
.hover\:border-red-300:hover{
--tw-border-opacity: 1;
border-color: rgb(252 165 165 / 1);
border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.hover\:bg-brand-600:hover{
--tw-bg-opacity: 1;
background-color: rgb(23 124 181 / 1);
background-color: rgb(23 124 181 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover{
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / 1);
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100\/50:hover{
background-color: rgb(243 244 246 / 0.5);
}
.hover\:bg-gray-200:hover{
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / 1);
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-50\/50:hover{
background-color: rgb(254 242 242 / 0.5);
}
.hover\:bg-white:hover{
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / 1);
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/30:hover{
background-color: rgb(255 255 255 / 0.3);
}
.hover\:bg-white\/80:hover{
background-color: rgb(255 255 255 / 0.8);
}
.hover\:bg-white\/95:hover{
background-color: rgb(255 255 255 / 0.95);
}
.hover\:from-blue-600:hover{
--tw-gradient-from: #2563eb var(--tw-gradient-from-position);
--tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:from-green-600:hover{
--tw-gradient-from: #16a34a var(--tw-gradient-from-position);
--tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-blue-600:hover{
--tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}
.hover\:to-cyan-700:hover{
--tw-gradient-to: #0e7490 var(--tw-gradient-to-position);
}
.hover\:\!text-\[\#0064fa\]:hover{
--tw-text-opacity: 1 !important;
color: rgb(0 100 250 / 1) !important;
color: rgb(0 100 250 / var(--tw-text-opacity, 1)) !important;
}
.hover\:text-\[\#0064fa\]:hover{
--tw-text-opacity: 1;
color: rgb(0 100 250 / 1);
color: rgb(0 100 250 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover{
--tw-text-opacity: 1;
color: rgb(55 65 81 / 1);
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-800:hover{
--tw-text-opacity: 1;
color: rgb(31 41 55 / 1);
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-900:hover{
--tw-text-opacity: 1;
color: rgb(17 24 39 / 1);
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.hover\:text-red-600:hover{
--tw-text-opacity: 1;
color: rgb(220 38 38 / 1);
color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover{
--tw-text-opacity: 1;
color: rgb(255 255 255 / 1);
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover{
text-decoration-line: underline;
}
.hover\:shadow-lg:hover{
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover{
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-xl:hover{
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:bg-white:focus{
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / 1);
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.focus\:outline-none:focus{
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-2:focus{
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
@media (min-width: 640px){
.sm\:p-6{
padding: 1.5rem;
}
.sm\:p-8{
padding: 2rem;
}
}
@media (min-width: 1024px){
.lg\:mb-12{
margin-bottom: 3rem;
}
.lg\:mb-4{
margin-bottom: 1rem;
}
.lg\:mb-8{
margin-bottom: 2rem;
}
.lg\:block{
display: block;
}
.lg\:hidden{
display: none;
}
.lg\:h-20{
height: 5rem;
}
.lg\:max-h-screen{
max-height: 100vh;
}
.lg\:min-h-screen{
min-height: 100vh;
}
.lg\:w-20{
width: 5rem;
}
.lg\:w-96{
width: 24rem;
}
.lg\:flex-row{
flex-direction: row;
}
.lg\:border-l{
border-left-width: 1px;
}
.lg\:p-8{
padding: 2rem;
}
.lg\:pt-0{
padding-top: 0px;
}
.lg\:text-4xl{
font-size: 2.25rem;
line-height: 2.5rem;
}
.lg\:text-xl{
font-size: 18px;
line-height: 28px;
}
}
@media (prefers-color-scheme: dark){
.dark\:border-neutral-700{
--tw-border-opacity: 1;
border-color: rgb(55 65 81 / 1);
border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
}
/* WK Color System - Unified Brand Colors */
/* Replaces all hardcoded brand colors with design tokens */
:root {
/* ========== BRAND COLOR MAPPING ========== */
/* Old hardcoded colors → New design tokens */
/* Primary Brand Colors */
--wk-color-brand-50: var(--brand-50, #eff6ff);
--wk-color-brand-100: var(--brand-100, #dbeafe);
--wk-color-brand-200: var(--brand-200, #bfdbfe);
--wk-color-brand-300: var(--brand-300, #93c5fd);
--wk-color-brand-400: var(--brand-400, #60a5fa);
--wk-color-brand-500: var(--brand-500, #3b82f6);
--wk-color-brand-600: var(--brand-600, #2563eb);
--wk-color-brand-700: var(--brand-700, #1d4ed8);
--wk-color-brand-800: var(--brand-800, #1e40af);
--wk-color-brand-900: var(--brand-900, #1e3a8a);
/* Legacy color compatibility (phased out) */
--wk-legacy-blue-light: #60a5fa; /* Maps to brand-400 */
--wk-legacy-blue-primary: #3b82f6; /* Maps to brand-500 */
--wk-legacy-blue-dark: #2563eb; /* Maps to brand-600 */
/* Semantic Colors */
--wk-color-success: var(--color-success, #22c55e);
--wk-color-warning: var(--color-warning, #f59e0b);
--wk-color-error: var(--color-error, #ef4444);
--wk-color-danger: var(--color-error, #ef4444);
--wk-color-info: var(--color-info, #06b6d4);
/* Surface Colors */
--wk-surface-primary: var(--surface-primary, #ffffff);
--wk-surface-secondary: var(--surface-secondary, #f8fafc);
--wk-surface-tertiary: var(--surface-tertiary, #f1f5f9);
--wk-surface-elevated: var(--surface-elevated, #ffffff);
--wk-surface-hover: rgba(0, 0, 0, 0.03);
/* Text Colors */
--wk-text-primary: var(--text-primary, #0f172a);
--wk-text-secondary: var(--text-secondary, #64748b);
--wk-text-tertiary: var(--text-tertiary, #94a3b8);
--wk-text-inverse: var(--text-inverse, #ffffff);
--wk-text-brand: var(--text-brand, var(--brand-600));
--wk-text-muted: var(--text-secondary, #64748b);
/* Border Colors */
--wk-border-light: var(--border-light, #e2e8f0);
--wk-border-medium: var(--border-medium, #cbd5e1);
--wk-border-dark: var(--border-dark, #94a3b8);
--wk-border-focus: var(--border-focus, var(--brand-500));
/* Interactive States */
--wk-hover-subtle: rgba(59, 130, 246, 0.08);
--wk-hover-medium: rgba(59, 130, 246, 0.12);
--wk-active-subtle: rgba(59, 130, 246, 0.15);
/* Shadows */
--wk-shadow-sm: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
--wk-shadow-md: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
--wk-shadow-lg: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
/* Transitions */
--wk-duration-fast: var(--duration-150, 150ms);
--wk-duration-normal: var(--duration-300, 300ms);
--wk-duration-slow: var(--duration-500, 500ms);
--wk-ease-out: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
--wk-ease-in-out: var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
/* Border Radius */
--wk-radius-sm: var(--radius-sm, 0.25rem);
--wk-radius-md: var(--radius-md, 0.375rem);
--wk-radius-lg: var(--radius-lg, 0.5rem);
--wk-radius-xl: var(--radius-xl, 0.75rem);
--wk-radius-2xl: var(--radius-2xl, 1rem);
--wk-radius-full: var(--radius-full, 9999px);
/* Spacing (commonly used) */
--wk-space-1: var(--space-1, 0.25rem);
--wk-space-2: var(--space-2, 0.5rem);
--wk-space-3: var(--space-3, 0.75rem);
--wk-space-4: var(--space-4, 1rem);
--wk-space-6: var(--space-6, 1.5rem);
--wk-space-8: var(--space-8, 2rem);
/* Z-Index */
--wk-z-dropdown: var(--z-dropdown, 100);
--wk-z-modal: var(--z-modal, 500);
--wk-z-tooltip: var(--z-tooltip, 700);
/* Component-specific */
--wk-accent: var(--brand-500, #3b82f6);
--wk-accent-light: var(--brand-400, #60a5fa);
--wk-color-theme: var(--brand-500, #3b82f6);
--wk-color-item: var(--surface-secondary, #f8fafc);
--wk-color-neutral-100: #f1f5f9;
--wk-color-neutral-200: #e2e8f0;
--wk-color-neutral-300: #cbd5e1;
--wk-color-neutral-700: #334155;
--wk-color-neutral-800: #1e293b;
--wk-color-neutral-900: #0f172a;
}
/* ========== DARK MODE OVERRIDES ========== */
body[theme-mode='dark'],
[data-theme='dark'] {
/* Surface Colors - Dark */
--wk-surface-primary: var(--surface-primary, #0f172a);
--wk-surface-secondary: var(--surface-secondary, #1e293b);
--wk-surface-tertiary: var(--surface-tertiary, #334155);
--wk-surface-elevated: var(--surface-elevated, #1e293b);
--wk-surface-primary-dark: #0f172a;
--wk-surface-elevated-dark: #1e293b;
--wk-surface-hover: rgba(255, 255, 255, 0.05);
/* Text Colors - Dark */
--wk-text-primary: var(--text-primary, #f1f5f9);
--wk-text-secondary: var(--text-secondary, #94a3b8);
--wk-text-tertiary: var(--text-tertiary, #64748b);
--wk-text-inverse: var(--text-inverse, #0f172a);
--wk-text-brand: var(--text-brand, var(--brand-400));
/* Border Colors - Dark */
--wk-border-light: var(--border-light, #334155);
--wk-border-medium: var(--border-medium, #475569);
--wk-border-dark: var(--border-dark, #64748b);
/* Interactive States - Dark */
--wk-hover-subtle: rgba(96, 165, 250, 0.1);
--wk-hover-medium: rgba(96, 165, 250, 0.15);
--wk-active-subtle: rgba(96, 165, 250, 0.2);
/* Component-specific - Dark */
--wk-color-item: #2d2d2d;
--wk-color-neutral-100: #334155;
--wk-color-neutral-200: #475569;
--wk-color-neutral-300: #64748b;
}
/* ========== UTILITY CLASSES ========== */
/* Brand Colors */
.wk-bg-brand { background-color: #3b82f6; background-color: var(--wk-color-brand-500); }
.wk-bg-brand-light { background-color: #60a5fa; background-color: var(--wk-color-brand-400); }
.wk-bg-brand-dark { background-color: #2563eb; background-color: var(--wk-color-brand-600); }
.wk-text-brand { color: #3b82f6; color: var(--wk-color-brand-500); }
.wk-text-brand-light { color: #60a5fa; color: var(--wk-color-brand-400); }
.wk-text-brand-dark { color: #2563eb; color: var(--wk-color-brand-600); }
.wk-border-brand { border-color: #3b82f6; border-color: var(--wk-color-brand-500); }
/* Semantic Colors */
.wk-bg-success { background-color: #22c55e; background-color: var(--wk-color-success); }
.wk-bg-warning { background-color: #f59e0b; background-color: var(--wk-color-warning); }
.wk-bg-error { background-color: #ef4444; background-color: var(--wk-color-error); }
.wk-text-success { color: #22c55e; color: var(--wk-color-success); }
.wk-text-warning { color: #f59e0b; color: var(--wk-color-warning); }
.wk-text-error { color: #ef4444; color: var(--wk-color-error); }
/* Interactive States */
.wk-hover-brand:hover {
background-color: rgba(59, 130, 246, 0.08);
background-color: var(--wk-hover-subtle);
transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1);
transition: background-color var(--wk-duration-fast) var(--wk-ease-out);
}
.wk-focus-brand:focus {
outline: 2px solid #3b82f6;
outline: 2px solid var(--wk-color-brand-500);
outline-offset: 2px;
}
/* Surface Variants */
.wk-surface-primary { background-color: #ffffff; background-color: var(--wk-surface-primary); }
.wk-surface-secondary { background-color: #f8fafc; background-color: var(--wk-surface-secondary); }
.wk-surface-elevated { background-color: #ffffff; background-color: var(--wk-surface-elevated); }
.real-name-auth-content {
padding: 20px 0;
}
.real-name-auth-content .form-section {
margin-bottom: 24px;
}
.real-name-auth-content .form-section .form-field {
margin-bottom: 20px;
}
.real-name-auth-content .form-section .form-field .field-label {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--semi-color-text-0);
margin-bottom: 8px;
}
.real-name-auth-content .form-section .form-field .required-mark {
color: var(--semi-color-danger);
margin-right: 4px;
}
.real-name-auth-content .upload-section {
margin-bottom: 24px;
}
.real-name-auth-content .upload-section .upload-label {
font-size: 14px;
font-weight: 500;
color: var(--semi-color-text-0);
margin-bottom: 12px;
}
.real-name-auth-content .upload-section .upload-container {
display: flex;
gap: 20px;
justify-content: center;
}
.real-name-auth-content .upload-section .upload-container .upload-item {
flex: 1 1;
max-width: 180px;
}
.real-name-auth-content .upload-section .upload-container .upload-item .upload-box {
width: 100%;
height: 120px;
border: 2px dashed var(--semi-color-border);
border-radius: 8px;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
background: var(--semi-color-fill-0);
}
.real-name-auth-content .upload-section .upload-container .upload-item .upload-box:hover {
border-color: var(--semi-color-primary);
background: var(--semi-color-fill-1);
}
.real-name-auth-content .upload-section .upload-container .upload-item .upload-box img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.real-name-auth-content .upload-section .upload-container .upload-item .upload-box .upload-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 8px;
}
.real-name-auth-content .upload-section .upload-container .upload-item .upload-box .upload-placeholder .semi-icon {
color: var(--semi-color-text-2);
}
.real-name-auth-content .upload-section .upload-container .upload-item .upload-box .upload-placeholder .upload-text {
font-size: 12px;
color: var(--semi-color-text-2);
}
.real-name-auth-content .upload-section .upload-container .upload-item .upload-hint {
margin-top: 8px;
text-align: center;
font-size: 12px;
color: var(--semi-color-text-2);
}
.real-name-auth-content .tips-section {
background: var(--semi-color-fill-0);
border-radius: 8px;
padding: 16px;
margin-bottom: 24px;
}
.real-name-auth-content .tips-section .tips-title {
font-size: 14px;
font-weight: 500;
color: var(--semi-color-warning);
margin-bottom: 8px;
}
.real-name-auth-content .tips-section .tips-list {
margin: 0;
padding-left: 20px;
}
.real-name-auth-content .tips-section .tips-list li {
font-size: 12px;
color: var(--semi-color-text-2);
line-height: 1.8;
}
.real-name-auth-content .button-group {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 24px;
}
.real-name-auth-content .button-group .semi-button {
min-width: 80px;
}
/* Dark mode support */
body[theme-mode='dark'] .real-name-auth-content .upload-section .upload-container .upload-item .upload-box {
background: var(--semi-color-fill-0);
border-color: var(--semi-color-border);
}
body[theme-mode='dark'] .real-name-auth-content .upload-section .upload-container .upload-item .upload-box:hover {
background: var(--semi-color-fill-1);
}
#wk-viewqueue-view-last {
overflow: auto !important;
scrollbar-width: none;
-ms-overflow-style: none;
}
#wk-viewqueue-view-last::-webkit-scrollbar {
display: none;
}
.real-name-authed-container {
width: 100%;
height: 100%;
background-color: #f7f8fa;
overflow-y: auto;
}
.real-name-authed-loading {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.real-name-authed-error {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #999;
font-size: 14px;
}
.real-name-authed-content {
padding: 20px;
}
.real-name-authed-status {
background-color: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 16px;
font-size: 16px;
font-weight: 500;
}
.status-label {
color: #333;
margin-right: 8px;
}
.status-value {
font-weight: 600;
}
.real-name-authed-reject {
background-color: #fff;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
border-left: 3px solid #ff4d4f;
}
.reject-label {
color: #333;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}
.reject-reason {
color: #666;
font-size: 14px;
line-height: 1.5;
}
.real-name-authed-info {
background-color: #fff;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
}
.info-item {
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.info-item:last-child {
border-bottom: none;
}
.info-label {
color: #999;
font-size: 13px;
margin-bottom: 8px;
}
.info-value {
color: #333;
font-size: 15px;
font-weight: 500;
}
.real-name-authed-images {
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.images-title {
color: #333;
font-size: 14px;
font-weight: 500;
margin-bottom: 16px;
}
.images-grid {
display: grid;
grid-template-columns: 1fr;
grid-gap: 16px;
gap: 16px;
}
.image-item {
display: flex;
flex-direction: column;
}
.image-label {
color: #999;
font-size: 13px;
margin-bottom: 8px;
}
.id-card-image {
width: 100%;
max-width: 400px;
height: auto;
border-radius: 8px;
border: 1px solid #e8e8e8;
-o-object-fit: contain;
object-fit: contain;
}
@media (min-width: 768px) {
.images-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ChannelQRCode - Modern Group QR Code Card */
.wk-channelqrcode {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: var(--wk-color-secondary);
}
.wk-channelqrcode-content {
flex: 1 1;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 20px;
/* Animation removed for performance */
}
/* channelQrFadeIn animation removed */
/* Main Card */
.wk-channelqrcode-box {
width: 100%;
max-width: 280px;
background-color: var(--wk-color-item);
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
flex-direction: column;
padding: 24px 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
@media screen and (max-width: 768px) {
.wk-channelqrcode-box {
max-width: 100%;
}
}
body[theme-mode='dark'] .wk-channelqrcode-box {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
/* Group Info Section */
.wk-channelqrcode-info {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.wk-channelqrcode-info-avatar {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.wk-channelqrcode-info-avatar img {
width: 64px;
height: 64px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
border: 3px solid var(--wk-color-theme);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
body[theme-mode='dark'] .wk-channelqrcode-info-avatar img {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.wk-channelqrcode-info-name {
text-align: center;
color: var(--wk-color-text);
font-size: 16px;
font-weight: 600;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body[theme-mode='dark'] .wk-channelqrcode-info-name {
color: #fff;
}
.wk-channelqrcode-info-member {
font-size: 12px;
color: var(--wk-color-text-secondary);
margin-top: 4px;
}
@media screen and (max-width: 768px) {
.wk-channelqrcode-info-member {
display: none;
}
}
body[theme-mode='dark'] .wk-channelqrcode-info-member {
color: rgba(255, 255, 255, 0.5);
}
/* QR Code Box */
.wk-channelqrcode-qrcode-box {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
position: relative;
}
/* QR Code Wrapper with Theme Border */
.wk-channelqrcode-qrcode-wrapper {
/* padding: 4px; */
border-radius: 12px;
background: linear-gradient(
135deg,
var(--wk-color-theme) 0%,
var(--wk-color-theme) 100%
);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
body[theme-mode='dark'] .wk-channelqrcode-qrcode-wrapper {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
/* QR Code Container */
.wk-channelqrcode-qrcode {
width: 180px;
height: 180px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 10px;
position: relative;
overflow: hidden;
}
/* Loading State */
.wk-channelqrcode-qrcode-loading {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Scan Animation */
.wk-channelqrcode-scan {
position: absolute;
left: 10px;
right: 10px;
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--wk-color-theme),
transparent
);
opacity: 0.7;
animation: channelQrScan 2.5s ease-in-out infinite;
}
@keyframes channelQrScan {
0%,
100% {
top: 10px;
opacity: 0;
}
15% {
opacity: 0.7;
}
50% {
top: calc(100% - 12px);
opacity: 0.7;
}
65% {
opacity: 0;
}
}
/* Expiry Info */
.wk-channelqrcode-expire {
font-size: 12px;
color: var(--wk-color-text-secondary);
text-align: center;
padding: 16px 0px 0px;
line-height: 1.5;
}
body[theme-mode='dark'] .wk-channelqrcode-expire {
color: rgba(255, 255, 255, 0.5);
}
/* Invite Validation Mask */
.wk-channelqrcode-qrcode-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.96);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 8px;
padding: 20px;
z-index: 10;
}
body[theme-mode='dark'] .wk-channelqrcode-qrcode-mask {
background-color: rgba(30, 30, 30, 0.96);
}
.wk-channelqrcode-qrcode-mask-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fee2e2;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
body[theme-mode='dark'] .wk-channelqrcode-qrcode-mask-icon {
background-color: rgba(239, 68, 68, 0.2);
}
.wk-channelqrcode-qrcode-mask-icon svg {
width: 20px;
height: 20px;
color: #ef4444;
}
.wk-channelqrcode-qrcode-mask p {
font-size: 13px;
margin: 0;
color: #666;
text-align: center;
line-height: 1.4;
}
body[theme-mode='dark'] .wk-channelqrcode-qrcode-mask p {
color: rgba(255, 255, 255, 0.7);
}
/* Action Buttons */
.wk-channelqrcode-actions {
display: flex;
gap: 10px;
margin-top: 18px;
width: 100%;
justify-content: center;
}
.wk-channelqrcode-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 8px 14px;
border-radius: 8px;
border: none;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
background-color: var(--wk-color-secondary);
color: var(--wk-color-text);
}
.wk-channelqrcode-btn:hover {
background-color: var(--wk-color-theme);
color: #fff;
transform: translateY(-1px);
}
.wk-channelqrcode-btn:active {
transform: translateY(0);
}
.wk-channelqrcode-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.wk-channelqrcode-btn svg {
width: 14px;
height: 14px;
}
.wk-channelqrcode-btn.primary {
background-color: var(--wk-color-theme);
color: #fff;
}
.wk-channelqrcode-btn.primary:hover {
opacity: 0.9;
background-color: var(--wk-color-theme);
}
body[theme-mode='dark'] .wk-channelqrcode-btn {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.85);
}
body[theme-mode='dark'] .wk-channelqrcode-btn:hover {
background-color: var(--wk-color-theme);
color: #fff;
}
/* Refresh spinning animation */
.wk-channelqrcode-btn.refreshing svg {
animation: channelQrRefreshSpin 0.8s linear infinite;
}
@keyframes channelQrRefreshSpin {
to {
transform: rotate(360deg);
}
}
/* Loading spinner container */
.wk-channelqrcode-qrcode .semi-spin {
display: flex;
align-items: center;
justify-content: center;
}
/* Tip text */
.wk-channelqrcode-tip {
font-size: 12px;
color: var(--wk-color-text-secondary);
text-align: center;
margin-top: 12px;
line-height: 1.4;
}
body[theme-mode='dark'] .wk-channelqrcode-tip {
color: rgba(255, 255, 255, 0.5);
}
.wk-inputedit {
width: 100%;
height: 50px;
}
.wk-inputedit .semi-input-textarea-wrapper {
background-color: var(--wk-color-item);
}
.wk-inputedit-placeholder {
font-size: 13px;
color: #999;
margin: 5px 0px 0px 5px;
}
/* === LIST ITEM - CLEAN DESIGN (NO GRADIENTS) === */
.wk-list-item {
width: 100%;
padding: 14px 16px;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
background-color: transparent;
justify-content: space-between;
box-sizing: border-box;
transition: background-color 0.15s ease;
}
.wk-list-item:hover {
background-color: #F9FAFB;
background-color: var(--wk-color-neutral-50, #F9FAFB);
}
.wk-list-item:active {
background-color: #F3F4F6;
background-color: var(--wk-color-neutral-100, #F3F4F6);
}
body[theme-mode=dark] .wk-list-item {
background-color: transparent;
}
body[theme-mode=dark] .wk-list-item:hover {
background-color: #374151;
background-color: var(--wk-color-neutral-700, #374151);
}
body[theme-mode=dark] .wk-list-item:active {
background-color: #4B5563;
background-color: var(--wk-color-neutral-600, #4B5563);
}
/* Simplified click feedback - no ripple */
.wk-list-item-ripple {
position: relative;
overflow: hidden;
}
/* Title */
.wk-list-item-title {
font-size: 14px;
font-weight: 500;
color: #111827;
color: var(--wk-color-neutral-900, #111827);
transition: color 0.15s ease;
flex-shrink: 0;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-list-item:hover .wk-list-item-title {
color: var(--wk-color-brand-600);
color: var(--wk-color-brand-500, var(--wk-color-brand-600));
}
body[theme-mode=dark] .wk-list-item-title {
color: #F3F4F6;
color: var(--wk-color-neutral-100, #F3F4F6);
}
body[theme-mode=dark] .wk-list-item:hover .wk-list-item-title {
color: #47A7DF;
color: var(--wk-color-brand-400, #47A7DF);
}
/* Action area */
.wk-list-item-action {
display: inline-flex;
align-items: center;
position: relative;
margin: 0;
margin-left: auto;
gap: 8px;
}
/* Subtitle */
.wk-list-item-subtitle {
flex: 1 1;
margin-left: 16px;
font-size: 14px;
color: #6B7280;
color: var(--wk-color-neutral-500, #6B7280);
text-align: end;
word-wrap: break-word;
word-break: normal;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
body[theme-mode=dark] .wk-list-item-subtitle {
color: #9CA3AF;
color: var(--wk-color-neutral-400, #9CA3AF);
}
.wk-list-item-subtitle-oneline {
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-list-item-subtitle-muliteline {
font-size: 14px;
color: #6B7280;
color: var(--wk-color-neutral-500, #6B7280);
margin-top: 8px;
white-space: pre-line;
word-wrap: break-word;
}
body[theme-mode=dark] .wk-list-item-subtitle-muliteline {
color: #9CA3AF;
color: var(--wk-color-neutral-400, #9CA3AF);
}
/* Arrow indicator */
.wk-list-item-arrow {
margin-left: 8px;
opacity: 0.4;
transition: opacity 0.15s ease, transform 0.15s ease;
display: flex;
align-items: center;
}
.wk-list-item:hover .wk-list-item-arrow {
opacity: 0.7;
transform: translateX(2px);
}
.wk-list-item-arrow img {
width: 9px;
height: 14px;
}
/* Chevron icon for clickable items */
.wk-list-item::after {
content: '';
width: 6px;
height: 6px;
border-right: 1.5px solid #9CA3AF;
border-right: 1.5px solid var(--wk-color-neutral-400, #9CA3AF);
border-bottom: 1.5px solid #9CA3AF;
border-bottom: 1.5px solid var(--wk-color-neutral-400, #9CA3AF);
transform: rotate(-45deg);
opacity: 0.5;
transition: opacity 0.15s ease, transform 0.15s ease;
flex-shrink: 0;
margin-left: 8px;
}
.wk-list-item:hover::after {
opacity: 0.8;
transform: rotate(-45deg) translateX(2px);
}
body[theme-mode=dark] .wk-list-item::after {
border-color: #6B7280;
border-color: var(--wk-color-neutral-500, #6B7280);
}
/* Hide arrow for items with switch */
.wk-list-item.wk-list-item-switch::after {
display: none;
}
/* Tip */
.wk-list-item-tip {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #9CA3AF;
color: var(--wk-color-neutral-400, #9CA3AF);
font-size: 13px;
padding: 12px 0;
}
body[theme-mode=dark] .wk-list-item-tip {
color: #6B7280;
color: var(--wk-color-neutral-500, #6B7280);
}
/* === SUBSCRIBERS GRID - MODERN DESIGN === */
.wk-subscribers {
width: 100%;
display: flex;
flex-direction: column;
padding: 8px;
}
.wk-subscribers-content {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns */
grid-gap: 8px;
gap: 8px;
}
/* Subscriber item */
.wk-subscribers-item {
width: 80px;
min-height: 100%;
padding: 8px 4px;
font-size: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
cursor: pointer;
position: relative;
transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 12px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.6);
border: 1px solid transparent;
}
.wk-subscribers-item:hover {
background: rgba(30, 150, 213, 0.08);
border-color: rgba(30, 150, 213, 0.2);
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(30, 150, 213, 0.1);
}
.wk-subscribers-item:active {
transform: translateY(-1px) scale(0.98);
}
/* Dark mode item */
body[theme-mode=dark] .wk-subscribers-item {
background: rgba(45, 55, 72, 0.4);
}
body[theme-mode=dark] .wk-subscribers-item:hover {
background: rgba(96, 165, 250, 0.12);
border-color: rgba(96, 165, 250, 0.3);
box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15);
}
/* Avatar container */
.wk-subscribers-item-avatar {
position: relative;
margin-bottom: 6px;
}
.wk-subscribers-item-avatar .wk-avatar {
transition: all 0.2s ease;
}
.wk-subscribers-item:hover .wk-subscribers-item-avatar .wk-avatar {
transform: scale(1.08);
}
/* Avatar image */
.wk-subscribers-item img {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid rgba(30, 150, 213, 0.15);
transition: border-color 0.2s ease;
}
.wk-subscribers-item:hover img {
border-color: rgba(30, 150, 213, 0.4);
}
body[theme-mode=dark] .wk-subscribers-item img {
border-color: rgba(96, 165, 250, 0.2);
}
body[theme-mode=dark] .wk-subscribers-item:hover img {
border-color: rgba(96, 165, 250, 0.5);
}
/* Owner badge */
.wk-subscribers-item-owner {
font-size: 10px;
font-weight: 600;
color: white;
background: var(--wk-color-brand-500);
background: var(--wk-color-brand-500, var(--wk-color-brand-500));
padding: 2px 6px;
border-radius: 8px;
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
text-align: center;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}
/* Manager badge */
.wk-subscribers-item-manager {
font-size: 10px;
font-weight: 600;
color: white;
background: #daa520;
padding: 2px 6px;
border-radius: 8px;
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
text-align: center;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(218, 165, 32, 0.3);
}
/* Name - proper ellipsis for long names */
.wk-subscribers-item-name {
font-size: 12px;
font-weight: 500;
color: #2d3748;
color: var(--wk-color-text, #2d3748);
width: 100%;
max-width: 100%;
padding: 0 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
line-height: 16px;
box-sizing: border-box;
transition: color 0.2s ease;
display: block;
}
/* Show full name on hover via title attribute */
.wk-subscribers-item:hover .wk-subscribers-item-name {
color: var(--wk-color-brand-600);
}
body[theme-mode=dark] .wk-subscribers-item-name {
color: rgba(255, 255, 255, 0.85);
}
body[theme-mode=dark] .wk-subscribers-item:hover .wk-subscribers-item-name {
color: var(--wk-color-brand-400);
}
/* "更多" link */
.wk-subscribers-more {
font-size: 14px;
font-weight: 500;
margin-top: 12px;
padding: 10px 16px;
color: var(--wk-color-brand-600);
color: var(--wk-color-theme, var(--wk-color-brand-600));
cursor: pointer;
text-align: center;
background: rgba(30, 150, 213, 0.08);
border-radius: 12px;
margin-left: 8px;
margin-right: 8px;
transition: all 0.2s ease;
}
.wk-subscribers-more:hover {
background: rgba(30, 150, 213, 0.15);
transform: translateY(-1px);
}
body[theme-mode=dark] .wk-subscribers-more {
background: rgba(96, 165, 250, 0.1);
color: var(--wk-color-brand-400);
}
body[theme-mode=dark] .wk-subscribers-more:hover {
background: rgba(96, 165, 250, 0.2);
}
/* Add/Remove buttons styling */
.wk-subscribers-item img[src*="icon_add"],
.wk-subscribers-item img[src*="icon_delete"] {
width: 36px;
height: 36px;
border: 2px dashed rgba(30, 150, 213, 0.3);
border-radius: 50%;
padding: 6px;
opacity: 0.6;
transition: all 0.2s ease;
}
.wk-subscribers-item:hover img[src*="icon_add"],
.wk-subscribers-item:hover img[src*="icon_delete"] {
opacity: 1;
border-color: rgba(30, 150, 213, 0.5);
}
/* ===== Forward Modal - Modern Redesign ===== */
.wk-conversationselect {
display: flex;
flex-direction: column;
height: calc(80vh - 60px);
max-height: 680px;
min-height: 480px;
overflow: hidden;
background: #fff;
background: var(--wk-color-bg, #fff);
}
/* Header / Title */
.wk-conversationselect-content-title {
display: flex;
align-items: center;
justify-content: center;
height: 56px;
flex-shrink: 0;
background: linear-gradient(135deg, #4a90d9 0%, #5ba3ec 100%);
background: linear-gradient(135deg, var(--wk-color-theme, #4a90d9) 0%, #5ba3ec 100%);
color: #fff;
font-weight: 600;
font-size: 16px;
letter-spacing: 0.5px;
border-radius: 0;
}
/* Selected items area */
.wk-conversationselect-content-searchBox {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
min-width: 100%;
min-height: 72px;
max-height: 180px;
padding: 12px 16px;
background: #f7f8fa;
background: var(--wk-color-secondary, #f7f8fa);
border-bottom: 1px solid rgba(0,0,0,0.06);
overflow-y: auto;
flex-shrink: 0;
}
.wk-conversationselect-content-searchBox::-webkit-scrollbar {
width: 6px;
}
.wk-conversationselect-content-searchBox::-webkit-scrollbar-track {
background: rgba(0,0,0,0.03);
}
.wk-conversationselect-content-searchBox::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.15);
border-radius: 3px;
}
.wk-conversationselect-content-searchBox::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.25);
}
/* Empty state styling */
.wk-conversationselect-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 8px 0;
text-align: center;
}
.wk-conversationselect-empty-icon {
font-size: 28px;
margin-bottom: 6px;
opacity: 0.5;
}
.wk-conversationselect-empty-text {
font-size: 13px;
font-weight: 500;
color: #888;
margin-bottom: 2px;
}
.wk-conversationselect-empty-subtext {
font-size: 11px;
color: #aaa;
line-height: 1.3;
}
/* Selected channel row */
.wk-conversationselect-content-selectedChannel {
display: flex;
flex-wrap: nowrap;
gap: 6px;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
max-width: 41rem;
min-width: 0;
padding-bottom: 8px;
scroll-behavior: smooth;
scrollbar-width: thin;
}
.wk-conversationselect-content-selectedChannel::-webkit-scrollbar {
height: 8px;
}
.wk-conversationselect-content-selectedChannel::-webkit-scrollbar-track {
background: rgba(0,0,0,0.06);
border-radius: 4px;
}
.wk-conversationselect-content-selectedChannel::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.25);
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.2);
-webkit-transition: background 0.2s ease;
transition: background 0.2s ease;
}
.wk-conversationselect-content-selectedChannel::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.35);
}
.wk-conversationselect-content-selectedAvatar {
position: relative;
padding: 3px;
cursor: pointer;
transition: transform 0.15s ease;
flex-shrink: 0;
}
.wk-conversationselect-content-selectedAvatar:hover {
transform: scale(1.08);
}
.wk-conversationselect-remove-btn {
position: absolute;
right: 0;
top: 0;
width: 16px;
height: 16px;
background: linear-gradient(135deg, #ff5c5c 0%, #ff3b3b 100%);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: bold;
cursor: pointer;
opacity: 0;
transition: all 0.2s ease;
z-index: 10;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.wk-conversationselect-content-selectedAvatar:hover .wk-conversationselect-remove-btn {
opacity: 1;
}
.wk-conversationselect-remove-btn:hover {
transform: scale(1.15);
background: linear-gradient(135deg, #ff3b3b 0%, #e02020 100%);
}
/* Search bar */
.wk-conversationselect-content-searchContent {
display: flex;
align-items: center;
height: 50px;
padding: 0 18px;
background: #ffffff;
border-bottom: 1px solid #e8eaed;
flex-shrink: 0;
}
.wk-conversationselect-content-searchIcon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: #f0f3f6;
border-radius: 8px 0 0 8px;
transition: background 0.2s ease;
}
/* .wk-conversationselect-content-searchContent:focus-within .wk-conversationselect-content-searchIcon {
background: #e3e8ed;
} */
.wk-conversationselect-content-searchInput {
flex: 1 1;
height: 36px;
background: #f0f3f6;
border-radius: 0 8px 8px 0;
display: flex;
align-items: center;
transition: background 0.2s ease;
}
/* .wk-conversationselect-content-searchContent:focus-within .wk-conversationselect-content-searchInput {
background: #e3e8ed;
} */
.wk-conversationselect-content-searchContent input {
width: 100%;
height: 100%;
font-size: 13px;
line-height: 36px;
background-color: transparent;
color: #1f2937;
padding: 0 14px 0 6px;
outline: none;
border: none;
}
/* .wk-conversationselect-content-searchContent input::placeholder {
color: #9ca3af;
} */
/* Lists container */
.wk-conversationselect-lists-wrapper {
flex: 1 1;
display: flex;
width: 100%;
gap: 1px;
background: #e8eaed;
min-height: 0;
overflow: hidden;
}
/* Section header */
.wk-conversationselect-content-header {
display: flex;
align-items: center;
gap: 6px;
background: #f8f9fa;
font-weight: 500;
font-size: 12px;
color: #5f6368;
padding: 10px 14px;
border-bottom: 1px solid #e8eaed;
flex-shrink: 0;
min-width: 0;
overflow: hidden;
}
.wk-conconversationselect-all {
display: flex;
align-items: center;
flex-shrink: 0;
}
.wk-conconversationselect-all .wk-check {
display: flex;
align-items: center;
flex-shrink: 0;
}
/* List items */
.wk-conversationselect-content-list {
flex: 1 1;
overflow-y: auto;
overflow-x: hidden;
position: relative;
min-height: 0;
}
.wk-conversationselect-content-list::-webkit-scrollbar {
width: 5px;
}
.wk-conversationselect-content-list::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.12);
border-radius: 3px;
}
.wk-conversationselect-content-list::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.2);
}
/* Row item */
.wk-conversationselect-content {
display: flex;
align-items: center;
padding: 10px 14px;
cursor: pointer;
transition: all 0.15s ease;
border-radius: 8px;
margin: 3px 8px;
}
.wk-conversationselect-content:hover {
background-color: rgba(74, 143, 217, 0.06);
transform: translateX(2px);
}
.wk-conversationselect-content:active {
background-color: rgba(74, 143, 217, 0.12);
}
.wk-conversationselect-content-box-data {
display: flex;
align-items: center;
margin-left: 10px;
flex: 1 1;
min-width: 0;
}
.wk-conversationselect-content-box-name {
margin-left: 12px;
font-size: 13px;
color: #1f2937;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-conversationselect-content-box {
padding: 0px 20px;
max-height: 400px;
overflow: auto;
}
/* Footer */
.wk-conversationselect-footer {
display: flex;
justify-content: center;
align-items: center;
height: 68px;
padding: 14px 18px;
background: #ffffff;
border-top: 1px solid #e8eaed;
flex-shrink: 0;
box-sizing: border-box;
border-radius: 0 0 12px 12px;
}
@media (max-width: 768px) {
.wk-conversationselect-footer {
border-radius: 0;
}
}
.wk-conversationselect-okBtn {
display: flex;
justify-content: center;
align-items: center;
min-width: 150px;
padding: 0 36px;
height: 42px;
background: linear-gradient(135deg, #4a8fd9 0%, #6ba3ec 100%);
color: #fff;
font-size: 14px;
font-weight: 500;
border-radius: 21px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 3px 10px rgba(74, 143, 217, 0.25);
}
.wk-conversationselect-okBtn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(74, 143, 217, 0.35);
background: linear-gradient(135deg, #5a9fe9 0%, #7bb3fc 100%);
}
.wk-conversationselect-okBtn:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(74, 143, 217, 0.25);
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.wk-conversationselect {
background: #1a1a1a;
background: var(--wk-color-bg, #1a1a1a);
}
.wk-conversationselect-content-searchBox {
background: #252525;
background: var(--wk-color-secondary, #252525);
}
.wk-conversationselect-content-searchContent {
/* background: var(--wk-color-bg, #1a1a1a); */
border-bottom-color: rgba(255,255,255,0.08);
}
.wk-conversationselect-content-searchIcon,
.wk-conversationselect-content-searchInput {
background: #2a2a2a;
background: var(--wk-color-secondary, #2a2a2a);
}
/* .wk-conversationselect-content-searchContent input {
color: #e0e0e0;
} */
.wk-conversationselect-content-box-name {
color: #e0e0e0;
}
.wk-conversationselect-content:hover {
background-color: rgba(255,255,255,0.06);
}
/* .wk-conversationselect-footer {
background: var(--wk-color-bg, #1a1a1a);
border-top-color: rgba(255,255,255,0.08);
} */
}
.wk-userinfo {
background: #ffffff;
position: relative;
--wk-height-userInfo-footer: 70px;
--wk-height-userInfo-nav: 44px;
width: 100%;
height: 100%;
}
.wk-userInfo-footer {
width: 100%;
min-height: var(--wk-height-userInfo-footer);
background: white;
position: absolute;
bottom: 0px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}
body[theme-mode=dark] .wk-userinfo {
background: #0f0f0f;
}
body[theme-mode=dark] .wk-userInfo-footer {
background-color: #1a1a1a;
border-top-color: rgba(255, 255, 255, 0.08);
}
/* Header Redesign */
.wk-userinfo-header {
position: relative;
padding: 40px 20px 24px 20px;
}
.wk-userinfo-header-cover {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.wk-userinfo-header-avatar {
width: 75px;
height: 75px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 8px 24px rgba(30, 150, 213, 0.25),
0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.wk-userinfo-header-avatar:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(30, 150, 213, 0.35),
0 6px 16px rgba(0, 0, 0, 0.15);
}
.wk-userinfo-header-avatar img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.wk-userinfo-header-info {
margin-top: 16px;
text-align: center;
}
.wk-userinfo-header-name {
font-size: 22px;
font-weight: 600;
color: var(--wk-text-item);
margin-bottom: 6px;
}
.wk-userinfo-header-id {
font-size: 13px;
color: var(--wk-color-font-tip);
background: rgba(30, 150, 213, 0.08);
padding: 4px 12px;
border-radius: 12px;
display: inline-block;
}
/* Info Cards */
.wk-userinfo-cards {
display: flex;
gap: 12px;
padding: 0 16px 16px 16px;
}
.wk-userinfo-card {
flex: 1 1;
background: white;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 12px;
padding: 14px;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.wk-userinfo-card:hover {
transform: translateY(-4px);
border-color: rgba(30, 150, 213, 0.3);
box-shadow: 0 8px 20px rgba(30, 150, 213, 0.15),
0 4px 12px rgba(0, 0, 0, 0.08);
}
.wk-userinfo-card-label {
font-size: 11px;
color: var(--wk-color-font-tip);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
}
.wk-userinfo-card-value {
font-size: 15px;
font-weight: 600;
color: var(--wk-text-item);
}
body[theme-mode=dark] .wk-userinfo-header-avatar {
box-shadow: 0 8px 24px rgba(30, 150, 213, 0.4),
0 4px 12px rgba(0, 0, 0, 0.3);
}
body[theme-mode=dark] .wk-userinfo-header-avatar:hover {
box-shadow: 0 12px 32px rgba(30, 150, 213, 0.5),
0 6px 16px rgba(0, 0, 0, 0.4);
}
body[theme-mode=dark] .wk-userinfo-header-id {
background: rgba(30, 150, 213, 0.15);
}
body[theme-mode=dark] .wk-userinfo-card {
background: rgba(30, 30, 30, 0.8);
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
body[theme-mode=dark] .wk-userinfo-card:hover {
border-color: rgba(30, 150, 213, 0.5);
box-shadow: 0 8px 20px rgba(30, 150, 213, 0.25),
0 4px 12px rgba(0, 0, 0, 0.3);
}
.wk-userinfo-content {
width: 100%;
height: calc(100% - var(--wk-height-userInfo-footer));
overflow: auto;
}
.wk-userinfo-footer-sendbutton {
width: 100%;
padding: 12px 16px;
}
.wk-userinfo-footer-sendbutton button {
width: 100%;
height: 44px;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
}
.wk-userinfo-sections {
padding: 0 16px 16px 16px;
}
.wk-userinfo-loading {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
}
/* Management Section - wk-section style */
.wk-userinfo-management-section {
margin-top: 16px;
}
.wk-userinfo-management-section-child {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(30, 150, 213, 0.15);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
.wk-userinfo-management-section-child:hover {
border-color: rgba(30, 150, 213, 0.3);
box-shadow: 0 2px 8px rgba(30, 150, 213, 0.08);
}
.wk-userinfo-management-title {
padding: 12px 20px;
background-color: var(--wk-color-brand-600);
color: white;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.3px;
}
.wk-userinfo-management-buttons {
padding: 0;
}
.wk-userinfo-management-row {
padding: 14px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
background: white;
}
.wk-userinfo-management-row:last-child {
border-bottom: none;
}
.wk-userinfo-management-row:hover {
background: rgba(30, 150, 213, 0.04);
}
.wk-userinfo-management-row-danger:hover {
background: rgba(239, 68, 68, 0.04);
}
.wk-userinfo-management-row-icon {
font-size: 20px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(30, 150, 213, 0.08);
border-radius: 6px;
flex-shrink: 0;
}
.wk-userinfo-management-row-danger .wk-userinfo-management-row-icon {
background: rgba(239, 68, 68, 0.08);
}
.wk-userinfo-management-row-text {
font-size: 14px;
font-weight: 500;
color: var(--wk-text-item);
flex: 1 1;
}
.wk-userinfo-management-row-subtitle {
font-size: 12px;
color: var(--wk-color-font-tip);
flex: 1 1;
}
.wk-userinfo-management-row-danger .wk-userinfo-management-row-text {
color: #ef4444;
}
/* Dark mode for management section */
body[theme-mode=dark] .wk-userinfo-management-section-child {
background: rgba(30, 30, 30, 0.95);
border-color: rgba(30, 150, 213, 0.3);
}
body[theme-mode=dark] .wk-userinfo-management-section-child:hover {
border-color: rgba(30, 150, 213, 0.5);
box-shadow: 0 2px 8px rgba(30, 150, 213, 0.15);
}
body[theme-mode=dark] .wk-userinfo-management-title {
background-color: var(--wk-color-brand-700);
}
body[theme-mode=dark] .wk-userinfo-management-row {
background: rgba(30, 30, 30, 0.5);
border-bottom-color: rgba(255, 255, 255, 0.05);
}
body[theme-mode=dark] .wk-userinfo-management-row:hover {
background: rgba(30, 150, 213, 0.1);
}
body[theme-mode=dark] .wk-userinfo-management-row-danger:hover {
background: rgba(239, 68, 68, 0.1);
}
body[theme-mode=dark] .wk-userinfo-management-row-icon {
background: rgba(30, 150, 213, 0.15);
}
body[theme-mode=dark] .wk-userinfo-management-row-danger .wk-userinfo-management-row-icon {
background: rgba(239, 68, 68, 0.15);
}
.wk-friendapply {
width: 100%;
height: 100%;
background-color:white;
}
body[theme-mode=dark] .wk-friendapply {
background-color:var(--wk-color-secondary);
}
.wk-friendapply-content {
padding: 15px;
}
.wk-friendapply-content-tip {
color: gray;
}
.wk-friendapply-content-message {
margin-top: 5px;
}
/* === WK BASE - MODAL CONTAINER STYLING === */
.wk-base {
width: 100%;
height: 100%;
}
/* === COMMON MODAL STYLES === */
.wk-base-modal .semi-modal-content {
border: none !important;
padding: 0px !important;
border-radius: 16px !important;
box-shadow:
0 30px 100px rgba(0, 0, 0, 0.35),
0 15px 50px rgba(0, 0, 0, 0.25),
0 5px 20px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(0, 0, 0, 0.05) !important;
/* overflow: hidden; */
}
body[theme-mode=dark] .wk-base-modal .semi-modal-content {
box-shadow:
0 25px 80px rgba(0, 0, 0, 0.5),
0 10px 30px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
.wk-base-modal .semi-modal-close {
display: none;
}
.wk-base-modal .semi-modal-body-wrapper {
margin: 0px;
}
/* === USER INFO MODAL === */
.wk-base-modal-userinfo .semi-modal-content {
/* width: 420px !important; */
max-width: 90vw;
/* height: 600px !important; Fixed height for consistent sizing */
/* max-height: 85vh; */
/* Ensure shadow is visible */
box-shadow:
0 30px 100px rgba(0, 0, 0, 0.4),
0 15px 50px rgba(0, 0, 0, 0.3),
0 5px 20px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}
.wk-base-modal-userinfo .semi-modal-body {
height: calc(600px - 56px) !important; /* Modal height minus header */
max-height: calc(85vh - 56px);
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* Single scrollbar fix */
.wk-base-modal-userinfo .semi-modal-body::-webkit-scrollbar {
width: 6px;
}
.wk-base-modal-userinfo .semi-modal-body::-webkit-scrollbar-track {
background: transparent;
}
.wk-base-modal-userinfo .semi-modal-body::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.wk-base-modal-userinfo .semi-modal-body::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.2);
}
body[theme-mode=dark] .wk-base-modal-userinfo .semi-modal-body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
body[theme-mode=dark] .wk-base-modal-userinfo .semi-modal-body::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.25);
}
/* === JOIN ORG MODAL === */
.wk-base-modal-join-org .semi-modal-content {
border: none !important;
padding: 12px !important;
}
.wk-base-modal-join-org .semi-modal-header {
margin: 12px !important;
}
.wk-base-modal-join-org .semi-modal-body-wrapper {
margin: 0px;
}
.wk-base-modal-join-org .semi-modal-body {
height: 420px;
}
/* === SUBSCRIBER LIST - MODERN DESIGN === */
.wk-subscrierlist {
background: #f5f5f5;
background: var(--wk-color-secondary, #f5f5f5);
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
body[theme-mode=dark] .wk-subscrierlist {
background: #1a1a1a;
background: var(--wk-color-secondary, #1a1a1a);
}
/* Search box */
.wk-subscrierlist .wk-indextable-search-box {
position: sticky;
top: 0;
z-index: 10;
background: white;
background: var(--wk-color-item, white);
margin: 12px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(30, 150, 213, 0.1);
}
body[theme-mode=dark] .wk-subscrierlist .wk-indextable-search-box {
background: #2d2d2d;
background: var(--wk-color-item, #2d2d2d);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
border-color: rgba(96, 165, 250, 0.2);
}
/* List container */
.wk-subscrierlist-list {
padding: 0 12px 12px 12px;
}
/* List item */
.wk-subscrierlist-list-item {
display: flex;
align-items: center;
padding: 12px 16px;
cursor: pointer;
background: white;
background: var(--wk-color-item, white);
margin-bottom: 8px;
border-radius: 14px;
border: 1px solid rgba(30, 150, 213, 0.08);
transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.wk-subscrierlist-list-item:last-child {
margin-bottom: 0;
}
.wk-subscrierlist-list-item:hover {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(30, 150, 213, 0.2);
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(30, 150, 213, 0.1);
}
.wk-subscrierlist-list-item:active {
transform: translateX(2px) scale(0.99);
}
body[theme-mode=dark] .wk-subscrierlist-list-item {
background: #2d2d2d;
background: var(--wk-color-item, #2d2d2d);
border-color: rgba(96, 165, 250, 0.1);
}
body[theme-mode=dark] .wk-subscrierlist-list-item:hover {
background: rgba(45, 45, 45, 0.95);
border-color: rgba(96, 165, 250, 0.3);
box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15);
}
/* Avatar */
.wk-subscrierlist-item-avatar {
flex-shrink: 0;
}
.wk-subscrierlist-item-avatar .wk-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid rgba(30, 150, 213, 0.15);
transition: all 0.2s ease;
}
.wk-subscrierlist-list-item:hover .wk-subscrierlist-item-avatar .wk-avatar {
border-color: rgba(30, 150, 213, 0.4);
transform: scale(1.05);
}
body[theme-mode=dark] .wk-subscrierlist-item-avatar .wk-avatar {
border-color: rgba(96, 165, 250, 0.2);
}
body[theme-mode=dark] .wk-subscrierlist-list-item:hover .wk-subscrierlist-item-avatar .wk-avatar {
border-color: rgba(96, 165, 250, 0.5);
}
/* Content */
.wk-subscrierlist-item-content {
display: flex;
flex: 1 1;
justify-content: space-between;
align-items: center;
min-width: 0;
margin-left: 14px;
}
/* Name */
.wk-subscrierlist-item-name {
font-size: 15px;
font-weight: 500;
color: #2d3748;
color: var(--wk-color-text, #2d3748);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 180px;
display: flex;
align-items: center;
gap: 8px;
transition: color 0.2s ease;
}
.wk-subscrierlist-list-item:hover .wk-subscrierlist-item-name {
color: var(--wk-color-brand-600);
}
body[theme-mode=dark] .wk-subscrierlist-item-name {
color: rgba(255, 255, 255, 0.9);
}
body[theme-mode=dark] .wk-subscrierlist-list-item:hover .wk-subscrierlist-item-name {
color: var(--wk-color-brand-400);
}
/* Role description */
.wk-subscrierlist-item-desc {
font-size: 13px;
font-weight: 500;
color: var(--wk-color-brand-600);
color: var(--wk-color-theme, var(--wk-color-brand-600));
background: rgba(30, 150, 213, 0.1);
padding: 4px 10px;
border-radius: 12px;
flex-shrink: 0;
}
.wk-subscrierlist-item-desc:empty {
display: none;
}
body[theme-mode=dark] .wk-subscrierlist-item-desc {
color: var(--wk-color-brand-400);
background: rgba(96, 165, 250, 0.15);
}
/* Checkbox for selection mode */
.wk-subscrierlist-list-item .wk-indextable-checkbox {
margin-right: 12px;
}
/* memberSlideIn animation removed for performance */
/* Context Menu Styling */
.wk-member-context-menu {
position: fixed;
background: #ffffff;
background: var(--wk-surface-primary, #ffffff);
border: 1px solid #e5e7eb;
border: 1px solid var(--wk-border, #e5e7eb);
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
z-index: 10000;
min-width: 160px;
padding: 4px 0;
/* Animation removed for performance */
}
/* contextMenuFadeIn animation removed */
.wk-member-context-menu-item {
padding: 10px 16px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #1f2937;
color: var(--wk-text-primary, #1f2937);
transition: all 0.15s ease;
border: none;
background: transparent;
width: 100%;
text-align: left;
}
.wk-member-context-menu-item:hover {
background-color: #f3f4f6;
background-color: var(--wk-surface-hover, #f3f4f6);
color: #1f2937;
color: var(--wk-text-primary, #1f2937);
}
.wk-member-context-menu-item.danger {
color: #dc2626;
color: var(--wk-color-danger-600, #dc2626);
}
.wk-member-context-menu-item.danger:hover {
background-color: rgba(220, 38, 38, 0.08);
color: #b91c1c;
color: var(--wk-color-danger-700, #b91c1c);
}
.wk-member-context-menu-item.disabled {
color: #d1d5db;
color: var(--wk-text-disabled, #d1d5db);
cursor: not-allowed;
opacity: 0.6;
}
.wk-member-context-menu-item.disabled:hover {
background-color: transparent;
}
.wk-member-context-menu-divider {
height: 1px;
background-color: #e5e7eb;
background-color: var(--wk-border, #e5e7eb);
margin: 4px 0;
}
/* Dark mode */
body[theme-mode=dark] .wk-member-context-menu {
background: #1f2937;
background: var(--wk-surface-primary-dark, #1f2937);
border-color: #374151;
border-color: var(--wk-border-dark, #374151);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
body[theme-mode=dark] .wk-member-context-menu-item {
color: #f3f4f6;
color: var(--wk-text-primary-dark, #f3f4f6);
}
body[theme-mode=dark] .wk-member-context-menu-item:hover {
background-color: #374151;
background-color: var(--wk-surface-hover-dark, #374151);
color: #f3f4f6;
color: var(--wk-text-primary-dark, #f3f4f6);
}
body[theme-mode=dark] .wk-member-context-menu-item.danger {
color: #f87171;
color: var(--wk-color-danger-400, #f87171);
}
body[theme-mode=dark] .wk-member-context-menu-item.danger:hover {
background-color: rgba(248, 113, 113, 0.15);
color: #fca5a5;
color: var(--wk-color-danger-300, #fca5a5);
}
body[theme-mode=dark] .wk-member-context-menu-item.disabled {
color: #6b7280;
color: var(--wk-text-disabled-dark, #6b7280);
}
body[theme-mode=dark] .wk-member-context-menu-divider {
background-color: #374151;
background-color: var(--wk-border-dark, #374151);
}
/* Mobile responsive */
@media (max-width: 768px) {
.wk-member-context-menu {
min-width: 140px;
font-size: 13px;
}
.wk-member-context-menu-item {
padding: 12px 14px;
font-size: 13px;
}
}
/* Loading state */
.wk-member-context-menu-item.loading {
opacity: 0.6;
pointer-events: none;
}
.wk-member-context-menu-item.loading::after {
content: '';
width: 12px;
height: 12px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-left: auto;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.wk-indextable {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
background-color: var(--wk-color-secondary);
}
/* Search area */
.wk-indextable-search {
padding: 12px 0;
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
background-color: var(--wk-color-secondary);
z-index: 10;
gap: 8px;
}
body[theme-mode=dark] .wk-indextable-search {
background-color: var(--wk-color-secondary);
}
/* Selected users row */
.wk-indextable-selected-box {
display: flex;
overflow-x: auto;
padding: 0 12px;
gap: 8px;
}
.wk-indextable-select-user {
padding: 4px;
cursor: pointer;
flex-shrink: 0;
border-radius: 50%;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.wk-indextable-select-user:hover {
transform: scale(1.1);
opacity: 0.8;
}
.wk-indextable-search .wk-indextable-select-user img {
border-radius: 50%;
width: 44px;
height: 44px;
}
/* Search box */
.wk-indextable-search-box {
display: flex;
align-items: center;
height: 44px;
background-color: var(--wk-color-item);
border-radius: 10px;
margin: 0 12px;
}
body[theme-mode=dark] .wk-indextable-search-box {
background-color: var(--wk-color-item);
}
.wk-indextable-search-icon {
display: flex;
align-items: center;
margin-left: 12px;
}
.wk-indextable-search-input {
flex: 1 1;
min-width: 0;
}
.wk-indextable-search-input input {
width: 100%;
height: 44px;
font-size: 15px;
line-height: 44px;
background-color: transparent;
color: var(--wk-color-text);
outline: none;
border: none;
padding: 0 12px;
}
.wk-indextable-search-input input::-moz-placeholder {
color: var(--wk-color-text-secondary);
}
.wk-indextable-search-input input::placeholder {
color: var(--wk-color-text-secondary);
}
body[theme-mode=dark] .wk-indextable-search-input input {
color: white;
}
/* Contacts list area */
.wk-indextable-contacts {
width: 100%;
height: calc(100% - 70px);
overflow-y: auto;
padding: 0 12px 20px 12px;
}
/* Section container */
.wk-indextable-section {
margin-bottom: 8px;
}
/* Section header */
.wk-indextable-section-title {
position: sticky;
top: 0;
z-index: 5;
padding: 8px 0 6px;
font-size: 13px;
font-weight: 600;
color: var(--wk-color-text-secondary);
background-color: var(--wk-color-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Items list */
.wk-indextable-list {
background-color: var(--wk-color-item);
border-radius: 12px;
overflow: hidden;
}
/* Individual item */
.wk-indextable-item {
display: flex;
align-items: center;
padding: 10px 16px;
cursor: pointer;
transition: background-color 0.15s ease;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 1px solid var(--wk-color-border-light, rgba(0, 0, 0, 0.05));
}
.wk-indextable-item:last-child {
border-bottom: none;
}
body[theme-mode=dark] .wk-indextable-item {
background-color: var(--wk-color-item);
border-bottom-color: rgba(255, 255, 255, 0.05);
}
.wk-indextable-item:hover {
background-color: var(--wk-color-hover);
}
/* Hide old index column - now using sticky headers */
.wk-indextable-item-index {
display: none;
}
/* Checkbox */
.wk-indextable-checkbox {
margin-right: 12px;
flex-shrink: 0;
}
/* Avatar */
.wk-indextable-item-avatar {
flex-shrink: 0;
}
.wk-indextable-item-avatar img {
width: 44px;
height: 44px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
background-color: var(--wk-color-hover);
}
/* Name */
.wk-indextable-item-name {
margin-left: 12px;
flex: 1 1;
min-width: 0;
font-size: 15px;
font-weight: 500;
color: var(--wk-color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body[theme-mode=dark] .wk-indextable-item-name {
color: white;
}
.wk-userselect {
width: 100%;
height: 100%;
}
.wk-contactsselect {
width: 100%;
height: 100%;
overflow: hidden;
}
.wk-contactsselect-content {
width: 100%;
height: calc(100% - var(--wk-height-viewqueueheader));
}
.wk-join-oraganization {
background-color: white;
cursor: pointer;
border-radius: 8px;
width: 100%;
}
body[theme-mode=dark] .wk-join-oraganization {
background-color: var(--wk-color-secondary);
}
.wk-join-oraganization-content {
display: flex;
padding: 10px;
align-items: center;
}
.wk-join-oraganization-content-name {
margin-left: 20px;
color: var(--wk-text-item);
}
.wk-join-oraganization-bottom {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 10px 5px 10px;
}
.wk-join-oraganization-bottom-flag {
font-size: 12px;
color: #999;
}
.wk-join-oraganization-bottom-time {
position: absolute;
right: 10px;
top: -5px;
color: #999 !important;
}
.wk-message-system {
padding: 10px 20px;
width: 85%;
margin: 0 auto;
text-align: center;
margin-top: 15px;
font-size: 12px;
color: rgba(9,30,66,.87);
white-space: pre-line;
}
body[theme-mode=dark] .wk-message-system {
color: #999;
}
.wk-message-text {
word-wrap: break-word;
word-break: break-all;
width: 100%;
}
.wk-message-text pre {
margin-bottom: 0;
white-space: pre-wrap;
/*css-3*/
white-space: -moz-pre-wrap;
/*Mozilla,since1999*/
white-space: -pre-wrap;
/*Opera4-6*/
white-space: -o-pre-wrap;
/*Opera7*/
word-wrap: break-word;
/*InternetExplorer5.5+*/
font-family: Helvetica;
}
.wk-message-text-richtext {
display: inline;
word-break: break-word;
}
.wk-message-text-richmention {
cursor: pointer;
text-decoration: underline;
}
.wk-message-text-send {
color: white;
}
.wk-message-text-recv {
color: black;
}
body[theme-mode=dark] .wk-message-text-recv {
color: white;
}
.wk-message-text-richemoji {}
.wk-message-text-richemoji img {
width: 22px;
height: 22px;
}
.wk-message-text-reply {
display: flex;
color: rgb(255, 255, 255, 0.5);
font-size: 14px;
flex-direction: column;
cursor: pointer;
}
.wk-message-base-recv .wk-message-text-reply {
border-left: 2px solid rgb(0, 0, 0, 0.5);
padding-left: 8px;
}
.wk-message-base-send .wk-message-text-reply {
border-left: 2px solid rgb(255, 255, 255, 0.5);
padding-left: 8px;
}
.wk-message-text-reply.wk-message-text-reply-recv {
color: rgb(0, 0, 0, 0.5);
}
.wk-message-text-reply-author {
display: flex;
align-items: center;
}
.wk-message-text-reply-authoravatar {
margin-right: 4px;
}
.wk-message-text-reply-content {
width: 100%;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wk-message-text-content {
margin: 0;
word-break: break-word;
line-height: 1.3125;
text-align: left;
text-align: initial;
display: flow-root;
unicode-bidi: plaintext;
}
.wk-message-text-content a {
color: white;
text-decoration: underline;
cursor: pointer;
}
/* Rich HTML content from Rich Text Editor */
.wk-message-text-richhtml {
display: inline;
word-break: break-word;
}
.wk-message-text-richhtml strong,
.wk-message-text-richhtml b {
font-weight: bold;
}
.wk-message-text-richhtml em,
.wk-message-text-richhtml i {
font-style: italic;
}
.wk-message-text-richhtml u {
text-decoration: underline;
}
.wk-message-text-richhtml s,
.wk-message-text-richhtml strike {
text-decoration: line-through;
}
.wk-message-text-richhtml a {
color: var(--wk-color-brand-500);
text-decoration: underline;
cursor: pointer;
}
.wk-message-text-richhtml a:hover {
color: #0066aa;
}
.wk-message-text-richhtml code {
background: rgba(0, 0, 0, 0.05);
padding: 2px 4px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
}
.wk-message-text-richhtml pre {
background: rgba(0, 0, 0, 0.05);
padding: 8px;
border-radius: 4px;
overflow-x: auto;
margin: 4px 0;
}
.wk-message-text-richhtml pre code {
background: none;
padding: 0;
}
.wk-message-text-richhtml ul,
.wk-message-text-richhtml ol {
margin: 4px 0;
padding-left: 20px;
}
.wk-message-text-richhtml li {
margin: 2px 0;
}
.wk-message-text-richhtml p {
margin: 0;
display: inline;
}
.wk-message-text-richhtml br {
content: "";
display: block;
margin: 2px 0;
}
/* Markdown rendering (react-markdown) */
.wk-message-text-markdown p {
margin: 0;
}
.wk-message-text-markdown ul,
.wk-message-text-markdown ol {
margin: 4px 0;
padding-left: 20px;
}
.wk-message-text-markdown pre {
margin: 4px 0;
}
/* Dark mode support */
body[theme-mode=dark] .wk-message-text-richhtml code {
background: rgba(255, 255, 255, 0.1);
}
body[theme-mode=dark] .wk-message-text-richhtml pre {
background: rgba(255, 255, 255, 0.1);
}
body[theme-mode=dark] .wk-message-text-richhtml a {
color: #4da3ff;
}
.icon-play::before {
content: "";
color: var(--wk-color-theme);
font-size: 20px;
}
.icon-pause::before {
content: "";
font-size: 20px;
color: var(--wk-color-theme);
}
.voicePlay {
width: 48px;
height: 48px;
background-color: white;
border-radius: 50%;
justify-content: center;
align-items: center;
cursor: pointer;
display: flex;
}
.wk-message-base-bubble-box.recv .voicePlay {
background-color: var(--wk-color-secondary-2);
}
.voicePlay .icon-play {
opacity: 1;
transform: scale(1);
transition: opacity .4s,transform .6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.voicePlay .icon-pause {
opacity: 0;
transform: scale(0.5);
}
.voicePlay i {
position: absolute;
}
.voicePlaying .icon-pause {
opacity: 1;
transform: scale(1);
transition: opacity .4s,transform .6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.voicePlaying .icon-play {
opacity: 0;
transform: scale(0.5);
}
.mediaLoading {
position: absolute;
cursor: pointer;
}
.voiceDownloading .icon-pause {
opacity: 0;
transform: scale(0.5);
}
.voiceDownloading .icon-play {
opacity: 0;
transform: scale(0.5);
}
.progressSpinner {
width: auto;
height: auto;
background: transparent url(data:image/svg+xml;base64,PHN2ZyAgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIzMTkiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PHBhdGggZD0iTTU2Mi4yODExNzMgNTEwLjgwMDY4NWwyOTQuOTk2NjY0LTI5My40NjY4MjFjMTMuOTQ5NzEtMTMuODc4MDc5IDE0LjAyMDMxOC0zNi4zNjcyNzkgMC4xNDIyNC01MC4zMTY5ODktMTMuOTEzODk0LTEzLjk4NDUwMy0zNi4zNjcyNzktMTQuMDIwMzE4LTUwLjMxNjk4OS0wLjE0MjI0TDUxMi4wMzQ3OTIgNDYwLjM3NzI3MiAyMTkuNTI4ODU1IDE2Ni45ODIwODJjLTEzLjg0MjI2My0xMy44NzgwNzktMzYuMzY3Mjc5LTEzLjk0OTcxLTUwLjMxNjk4OS0wLjA3MTYzMS0xMy45MTM4OTQgMTMuODc4MDc5LTEzLjk0ODY4NyAzNi40MDMwOTUtMC4wNzE2MzEgNTAuMzUyODA1TDQ2MS41NzY1ODcgNTEwLjU4NzgzNyAxNjYuNzIxMTM5IDgwMy44NzY2MDRjLTEzLjk0OTcxIDEzLjg3ODA3OS0xNC4wMjAzMTggMzYuMzY3Mjc5LTAuMTQyMjQgNTAuMzE2OTg5IDYuOTM5MDM5IDYuOTc0ODU1IDE2LjA4NDMyNyAxMC40OTcwNzUgMjUuMjI5NjE0IDEwLjQ5NzA3NSA5LjA3MzY1NiAwIDE4LjE0ODMzNS0zLjQ1MTYxMiAyNS4wODczNzUtMTAuMzU0ODM1bDI5NC45MjYwNTYtMjkzLjM2MDM5OCAyOTUuMTc0NzIgMjk2LjA2NDk5NmM2LjkzOTAzOSA2Ljk3NDg1NSAxNi4wNDg1MTEgMTAuNDYyMjgzIDI1LjE5Mzc5OSAxMC40NjIyODMgOS4xMDk0NzIgMCAxOC4xODQxNTEtMy40ODc0MjggMjUuMTIzMTktMTAuMzkwNjUxIDEzLjkxMzg5NC0xMy44NzgwNzkgMTMuOTQ5NzEtMzYuMzY3Mjc5IDAuMDcxNjMxLTUwLjMxNjk4OUw1NjIuMjgxMTczIDUxMC44MDA2ODV6IiAgZmlsbD0iIzJmNzBmNSI+PC9wYXRoPjwvc3ZnPg==) no-repeat 49% 49%;
}
.progressSpinner svg {
display: block;
transform: rotate(-90deg);
transform-origin: 50% 50%;
animation: 4s linear 0s infinite ProgressSpinnerAnimation;
}
.progressSpinner svg circle {
transition: stroke-dashoffset .5s;
}
@keyframes ProgressSpinnerAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.wk-message-voice {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.wk-message-voice-info {
display: flex;
flex-direction: column;
margin-left: 10px;
}
.wk-message-voice-info-status {
display: flex;
}
.wk-message-voice-info-time {
display: flex;
font-size: 14px;
}
.wk-message-voice-info-tail {
position: absolute;
right: 10px;
bottom: 10px;
}
.wk-message-voice-waveform {
position: relative;
width: 100%;
height: 100%;
}
.wk-message-voice-lightWavform {
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
transition: width 100ms ease-in-out;
width: 0%;
}
.wk-message-video-content {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
.wk-message-video-content-time {
align-items: center;
background-color: rgba(0,0,0,.35);
border-radius: 12px;
color: #fff;
display: flex;
font-size: 12px;
height: 1.125rem;
left: 6px;
line-height: 1;
padding: 0 6px;
position: absolute;
top: 6px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 2;
}
.wk-message-video-content-video img {
border-radius: 4px;
cursor: pointer;
}
.flexible-modal {
position: absolute;
z-index: 1;
border: 1px solid #ccc;
background: white;
}
.flexible-modal-mask {
position: fixed;
height: 100%;
background: rgba(55, 55, 55, 0.6);
top:0;
left:0;
right:0;
bottom:0;
}
.flexible-modal-resizer {
position:absolute;
right:0;
bottom:0;
cursor:se-resize;
margin:5px;
border-bottom: solid 2px #333;
border-right: solid 2px #333;
}
.flexible-modal-drag-area{
background: rgba(22, 22, 333, 0.2);
height: 50px;
position:absolute;
right:0;
top:0;
cursor:move;
}
.wk-iconclick {
padding: 4px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all 250ms ease-in-out;
&>div {
display: flex;
align-items: center;
}
}
.wk-iconclick:hover {
background-color: var(--wk-color-secondary-2);
transition: all 250ms ease-in-out;
}
.wk-iconclick img {
width: 18px;
height: 18px;
}
/* ===== MODERN EMOJI PANEL DESIGN ===== */
/* Clean, Professional, Premium UI - Inspired by Modern Chat Apps */
.wk-emojitoolbar {
padding: 4px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
&>div {
display: flex;
align-items: center;
}
}
.wk-emojitoolbar:hover {
background-color: rgba(0, 0, 0, 0.05);
background-color: var(--wk-surface-hover, rgba(0, 0, 0, 0.05));
}
.wk-emojitoolbar:active {
opacity: 0.8;
}
.wk-emojitoolbar img {
width: 20px;
height: 20px;
transition: transform 0.2s ease;
}
.wk-emojitoolbar:hover img {
transform: scale(1.1);
}
/* === EMOJI PANEL - GLASSMORPHISM CARD === */
.wk-emojitoolbar-emojipanel {
width: 420px;
height: 400px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
position: absolute;
left: 20px;
top: calc(-400px - 15px);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 16px;
overflow: hidden;
transition: opacity 0.25s cubic-bezier(0.2, 0, 0.2, 1),
transform 0.25s cubic-bezier(0.2, 0, 0.2, 1);
transform-origin: left bottom;
visibility: hidden;
opacity: 0;
transform: scale(0.9) translateY(5px);
pointer-events: none;
z-index: 999;
}
body[theme-mode=dark] .wk-emojitoolbar-emojipanel {
background: rgba(30, 30, 32, 0.95);
border-color: rgba(255, 255, 255, 0.1);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.wk-emojitoolbar-emojipanel-show {
/* Animation removed for performance */
visibility: visible;
pointer-events: auto;
opacity: 1;
transform: scale(1) translateY(0);
}
.wk-emojitoolbar-emojipanel-hide {
visibility: hidden;
pointer-events: none;
opacity: 0;
transform: scale(0.9) translateY(5px);
}
/* emojiPanelShow and emojiPanelHide animations removed */
/* === EMOJI PANEL INNER === */
.wk-emojipanel {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* === TAB BAR - MODERN DESIGN === */
.wk-emojipanel-tab {
width: 100%;
height: 48px;
background: linear-gradient(180deg,
#f5f5f5 0%,
#f0f0f0 100%);
background: linear-gradient(180deg,
var(--wk-surface-secondary, #f5f5f5) 0%,
var(--wk-surface-secondary, #f0f0f0) 100%);
border-top: 1px solid rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
padding: 0 4px;
gap: 2px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
flex-shrink: 0;
}
.wk-emojipanel-tab::-webkit-scrollbar {
display: none;
}
body[theme-mode=dark] .wk-emojipanel-tab {
background: linear-gradient(180deg,
rgba(40, 40, 44, 1) 0%,
rgba(35, 35, 38, 1) 100%);
border-top-color: rgba(255, 255, 255, 0.08);
}
/* Tab Items */
.wk-emojipanel-tab-item {
width: 44px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
position: relative;
color: #6b7280;
color: var(--wk-text-secondary, #6b7280);
}
.wk-emojipanel-tab-item img {
width: 24px;
height: 24px;
border-radius: 6px;
-o-object-fit: cover;
object-fit: cover;
transition: transform 0.2s ease;
}
.wk-emojipanel-tab-item:hover {
background: rgba(0, 0, 0, 0.06);
}
.wk-emojipanel-tab-item:hover img {
transform: scale(1.1);
}
.wk-emojipanel-tab-item:active {
transform: scale(0.95);
}
body[theme-mode=dark] .wk-emojipanel-tab-item:hover {
background: rgba(255, 255, 255, 0.08);
}
/* Tab Selected State */
.wk-emojipanel-tab-item-selected {
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.wk-emojipanel-tab-item-selected::after {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 3px;
background: #3b82f6;
background: var(--wk-accent, var(--wk-color-brand-500, #3b82f6));
border-radius: 2px;
}
body[theme-mode=dark] .wk-emojipanel-tab-item-selected {
background: rgba(255, 255, 255, 0.12);
}
/* Tab Manage Mode */
.wk-emojipanel-tab-item-manage {
position: relative;
}
.wk-emojipanel-tab-item-remove {
position: absolute;
top: 2px;
right: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ef4444;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 10px;
cursor: pointer;
transition: transform 0.2s ease;
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
}
.wk-emojipanel-tab-item-remove:hover {
transform: scale(1.2);
}
body[theme-mode=dark] .wk-emojipanel-tab-item-remove {
background: #f87171;
}
/* === EMOJI CONTENT AREA === */
.wk-emojipanel-content {
flex: 1 1;
overflow: hidden;
overflow-y: auto;
scroll-behavior: smooth;
}
.wk-emojipanel-content::-webkit-scrollbar {
width: 6px;
}
.wk-emojipanel-content::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
border-radius: 3px;
}
.wk-emojipanel-content::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.25);
}
body[theme-mode=dark] .wk-emojipanel-content::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
/* === EMOJI GRID === */
.wk-emojipanel-content ul {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding: 12px;
margin: 0;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-gap: 4px;
gap: 4px;
box-sizing: border-box;
}
.wk-emojipanel-content ul li {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 8px;
transition: all 0.15s cubic-bezier(0.2, 0, 0.2, 1);
}
.wk-emojipanel-content ul li:hover {
background: rgba(0, 0, 0, 0.06);
transform: scale(1.15);
}
.wk-emojipanel-content ul li:active {
transform: scale(0.95);
}
body[theme-mode=dark] .wk-emojipanel-content ul li:hover {
background: rgba(255, 255, 255, 0.1);
}
.wk-emojipanel-content ul li img {
width: 28px;
height: 28px;
display: block;
transition: transform 0.15s ease;
}
/* === STICKER GRID === */
.wk-emojipanel-sticker-list {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
grid-gap: 8px !important;
gap: 8px !important;
padding: 12px !important;
}
.wk-emojipanel-sticker-list li {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 12px;
background: #f5f5f5;
background: var(--wk-surface-secondary, #f5f5f5);
transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
overflow: hidden;
}
.wk-emojipanel-sticker-list li:hover {
background: rgba(59, 130, 246, 0.1);
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.wk-emojipanel-sticker-list li:active {
transform: scale(0.95);
}
body[theme-mode=dark] .wk-emojipanel-sticker-list li {
background: rgba(255, 255, 255, 0.06);
}
body[theme-mode=dark] .wk-emojipanel-sticker-list li:hover {
background: rgba(59, 130, 246, 0.2);
}
.wk-emojipanel-sticker-list li tgs-player {
width: 72px !important;
height: 72px !important;
}
/* === LOADING & PLACEHOLDER === */
.wk-emojipanel-loading,
.wk-emojipanel-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px;
box-sizing: border-box;
}
.wk-emojipanel-placeholder .semi-empty {
width: 100%;
}
.wk-emojipanel-placeholder .semi-empty-image {
width: 80px;
height: 80px;
opacity: 0.6;
}
/* === STICKER STORE === */
.wk-sticker-store-grid {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
overflow-y: auto;
box-sizing: border-box;
}
.wk-sticker-store-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: #f5f5f5;
background: var(--wk-surface-secondary, #f5f5f5);
border-radius: 12px;
transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
border: 1px solid transparent;
}
.wk-sticker-store-item:hover {
background: white;
border-color: rgba(59, 130, 246, 0.2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
body[theme-mode=dark] .wk-sticker-store-item {
background: rgba(255, 255, 255, 0.06);
}
body[theme-mode=dark] .wk-sticker-store-item:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(59, 130, 246, 0.3);
}
.wk-sticker-store-cover {
width: 56px;
height: 56px;
border-radius: 10px;
overflow: hidden;
background: white;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.wk-sticker-store-cover img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.wk-sticker-store-info {
flex: 1 1;
min-width: 0;
}
.wk-sticker-store-title {
font-size: 14px;
font-weight: 600;
color: #1f1f1f;
color: var(--wk-text-primary, #1f1f1f);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wk-sticker-store-desc {
font-size: 12px;
color: #8a8a8a;
color: var(--wk-text-tertiary, #8a8a8a);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wk-sticker-store-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
/* === STICKER SEARCH === */
.wk-sticker-search {
display: flex;
flex-direction: column;
height: 100%;
padding: 12px;
box-sizing: border-box;
gap: 12px;
}
.wk-sticker-search-bar {
display: flex;
gap: 8px;
}
.wk-sticker-search-bar .semi-input-wrapper {
flex: 1 1;
border-radius: 10px;
}
.wk-sticker-search-results {
flex: 1 1;
overflow-y: auto;
}
.wk-sticker-search-results ul {
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 8px;
gap: 8px;
}
.wk-sticker-search-results li {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
background: var(--wk-surface-secondary, #f5f5f5);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
}
.wk-sticker-search-results li:hover {
background: rgba(59, 130, 246, 0.1);
transform: scale(1.05);
}
body[theme-mode=dark] .wk-sticker-search-results li {
background: rgba(255, 255, 255, 0.06);
}
/* === MASK OVERLAY === */
.wk-emojitoolbar-mask {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 998;
cursor: default;
background: transparent;
}
/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
.wk-emojitoolbar-emojipanel {
width: calc(100vw - 40px);
max-width: 380px;
height: 360px;
top: calc(-360px - 10px);
}
.wk-emojipanel-content ul {
grid-template-columns: repeat(7, 1fr);
}
.wk-emojipanel-sticker-list {
grid-template-columns: repeat(3, 1fr) !important;
}
}
/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
.wk-emojitoolbar-emojipanel,
.wk-emojipanel-tab-item,
.wk-emojipanel-content ul li,
.wk-sticker-store-item {
transition: none !important;
animation: none !important;
}
}
/* High contrast support */
@media (prefers-contrast: high) {
.wk-emojipanel-tab-item-selected {
border: 2px solid currentColor;
}
.wk-emojipanel-content ul li:focus {
outline: 2px solid #3b82f6;
outline: 2px solid var(--wk-accent, #3b82f6);
outline-offset: 2px;
}
}
.wk-cardtoolbar {
display: flex;
align-items: center;
justify-content: center;
}
.wk-cardtoolbar-content {
padding: 4px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}
.wk-cardtoolbar-content img {
width: 22px;
height: 22px;
}
.wk-cardtoolbar-content:hover {
opacity: 0.8;
}
.wk-cardtoolbar-modal-content {
width: 100%;
height: 400px;
overflow-y: auto;
}
.wk-cardtoolbar-contact-list {
padding: 8px 0;
}
.wk-cardtoolbar-contact-item {
display: flex;
align-items: center;
padding: 10px 12px;
cursor: pointer;
border-radius: 8px;
transition: background-color 0.2s;
}
.wk-cardtoolbar-contact-item:hover {
background-color: rgba(0, 0, 0, 0.05);
background-color: var(--wk-color-hover, rgba(0, 0, 0, 0.05));
}
.wk-cardtoolbar-contact-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
-o-object-fit: cover;
object-fit: cover;
}
.wk-cardtoolbar-contact-info {
display: flex;
flex-direction: column;
}
.wk-cardtoolbar-contact-name {
font-size: 14px;
font-weight: 500;
color: #333;
color: var(--wk-color-text-primary, #333);
}
.wk-cardtoolbar-contact-remark {
font-size: 12px;
color: #999;
color: var(--wk-color-text-secondary, #999);
margin-top: 2px;
}
.wk-cardtoolbar-empty {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
color: #999;
color: var(--wk-color-text-secondary, #999);
}
.wk-cardtoolbar-search {
padding: 8px 0px;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--wk-color-border, #eee);
}
.wk-channelavatar {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
flex-direction: column;
background-color: white;
}
.wk-channelavatar-avatar {
width: 200px;
height: 200px;
margin-top: 20px;
}
.wk-channelavatar-upload {
margin-top: 20px;
}
.wk-imagetoolbar {}
.wk-imagetoolbar-content {
padding: 10px;
}
.wk-imagetoolbar-content-icon img {
width: 20px;
height: 20px;
}
.wk-imagetoolbar-content-icon {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.wk-imagedialog {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-app-region: no-drag;
z-index: 100;
}
.wk-imagedialog-mask {
position: absolute;
background-color: rgba(0, 0, 0, .3);
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.wk-imagedialog-content {
width: 420px;
position: relative;
padding: 28px;
background: var(--wk-color-item);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
box-sizing: border-box;
max-height: 580px;
}
.wk-imagedialog-content-close {
position: absolute;
width: 20px;
height: 20px;
top: 28px;
right: 28px;
font-size: 18px;
text-align: center;
border-radius: 50%;
cursor: pointer;
z-index: 1;
line-height: 18px;
}
.wk-imagedialog-content-close svg {
fill: var(--wk-text-item);
}
.wk-imagedialog-content-title {
font-size: 16px;
font-weight: 600;
}
.wk-imagedialog-content-body {
width: 100%;
font-size: 14px;
text-align: center;
margin-top: 28px;
}
.wk-imagedialog-content-preview {
box-sizing: border-box;
text-align: left;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
border-radius: 4px 4px 4px 4px;
}
.wk-imagedialog-content-previewImg {
width: auto;
height: auto;
max-width: 240px;
max-height: 240px;
background-size: auto 100%;
background-position: 50%;
margin: 0 auto 16px;
}
.wk-imagedialog-content-preview-file {
display: flex;
align-items: center;
width: 100%;
height: 100%;
}
.wk-imagedialog-content-preview--filecontent {
flex: 1 1;
width: 100%;
height: 78px;
padding: 12px 0px 12px 20px;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
background-color: rgb(247, 247, 247);
}
body[theme-mode=dark] .wk-imagedialog-content-preview--filecontent {
background-color: var(--wk-color-secondary);
}
.wk-imagedialog-content-preview-file-icon {
height: 78px;
width: 78px;
display: flex;
align-items: center;
border-radius: 0px 0px 0px 10px;
}
.wk-imagedialog-content-preview-file-thumbnail {
width: 48px;
height: 48px;
margin: auto 16px auto auto;
}
.wk-imagedialog-content-preview--filecontent-name {
color: var(--wk-text-item);
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
line-height: normal;
}
.wk-imagedialog-content-preview--filecontent-size {
font-size: 12px;
color: var(--wk-color-font-tip);
}
.wk-imagedialog-footer {
margin-top: 28px;
justify-content: flex-end;
display: flex;
}
.wk-imagedialog-footer button {
background-color: #fff;
border: 1px solid #dee0e3;
color: #1f2329;
border-radius: 4px;
height: 32px;
min-width: 100px;
padding: 0 16px;
cursor: pointer;
}
.wk-imagedialog-footer-okbtn {
margin-left: 16px;
color: white !important;
border: none !important;
}
.wk-message-system {
padding: 10px 20px;
width: 85%;
margin: 0 auto;
text-align: center;
margin-top: 15px;
font-size: 12px;
color: rgba(9,30,66,.87);
white-space: pre-line;
}
.wk-message-approve {
margin-left: 10px;
color: #f65835;
}
body[theme-mode=dark] .wk-message-system {
color: #999;
}
/* Bottom Navigation for Mobile - iOS Tab Bar Style */
/* Shown only on mobile screens (<768px) */
.wk-bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 49px; /* iOS standard tab bar height */
background: rgba(249, 249, 249, 0.94);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-top: 0.5px solid rgba(0, 0, 0, 0.12);
z-index: 300;
padding-bottom: env(safe-area-inset-bottom, 0);
}
/* Show on mobile */
@media (max-width: 767px) {
.wk-bottom-nav {
display: flex;
align-items: flex-start;
justify-content: space-around;
}
.wk-layout-tab,
.wk-sidebar {
display: none !important;
}
}
/* Navigation Items - iOS Style */
.wk-bottom-nav-item {
flex: 1 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 4px 0;
position: relative;
cursor: pointer;
color: #8e8e93; /* iOS inactive gray */
text-decoration: none;
-webkit-tap-highlight-color: transparent;
background: transparent;
border: none;
transition: color 0.15s ease;
}
/* Remove hover background - iOS doesn't have this */
.wk-bottom-nav-item:hover {
background: transparent;
}
/* Active press feedback */
.wk-bottom-nav-item:active {
opacity: 0.7;
}
/* Active state - iOS blue */
.wk-bottom-nav-item.active {
color: #007AFF; /* iOS system blue */
}
/* Icon - iOS size */
.wk-bottom-nav-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.wk-bottom-nav-icon svg {
width: 24px;
height: 24px;
stroke-width: 1.5;
}
/* Label - iOS style */
.wk-bottom-nav-label {
font-size: 10px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
letter-spacing: -0.01em;
}
/* Center QR Button - Raised Circle */
.wk-bottom-nav-item.center-btn {
position: relative;
flex: 0 0 auto;
width: 56px;
height: 56px;
margin-top: -20px;
}
.wk-bottom-nav-center-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
color: white;
}
.wk-bottom-nav-center-icon svg {
width: 26px;
height: 26px;
stroke: white;
stroke-width: 1.5;
}
.wk-bottom-nav-item.center-btn:active .wk-bottom-nav-center-icon {
transform: scale(0.95);
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}
/* Dark mode center button */
body[theme-mode=dark] .wk-bottom-nav-center-icon {
background: linear-gradient(135deg, #0A84FF 0%, #64D2FF 100%);
box-shadow: 0 4px 12px rgba(10, 132, 255, 0.4);
}
/* Badge for unread count */
.wk-bottom-nav-badge {
position: absolute;
top: 2px;
left: 50%;
margin-left: 6px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: #FF3B30; /* iOS red */
color: white;
font-size: 10px;
font-weight: 600;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
/* Online indicator */
.wk-bottom-nav-online-dot {
position: absolute;
top: 4px;
right: 50%;
margin-right: -16px;
width: 8px;
height: 8px;
background: #34C759; /* iOS green */
border: 2px solid rgba(249, 249, 249, 0.94);
border-radius: 50%;
}
/* Dark mode - iOS dark tab bar */
body[theme-mode=dark] .wk-bottom-nav {
background: rgba(28, 28, 30, 0.94);
border-top-color: rgba(255, 255, 255, 0.1);
}
body[theme-mode=dark] .wk-bottom-nav-item {
color: #8e8e93;
}
body[theme-mode=dark] .wk-bottom-nav-item.active {
color: #0A84FF; /* iOS dark mode blue */
}
body[theme-mode=dark] .wk-bottom-nav-online-dot {
border-color: rgba(28, 28, 30, 0.94);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.wk-bottom-nav-item {
transition: none;
}
}
/* Landscape phone */
@media (max-width: 767px) and (max-height: 450px) {
.wk-bottom-nav {
height: 40px;
}
.wk-bottom-nav-label {
display: none;
}
}
/* Modern WKLayout Styles */
/* Legacy styles for backward compatibility */
.wk-layout {
--wk-width-layout-tab: 60px;
--wk-height-layout-tab-min: 60px;
--wk-layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
--wk-slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
background-color: #f9fafb;
}
.wk-layout-tab {
width: var(--wk-width-layout-tab);
height: 100%;
background-color: white;
border-right: 1px solid #e5e7eb;
flex-shrink: 0;
}
.wk-layout-content {
width: 100%;
height: 100%;
display: flex;
transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
}
.wk-layout-content-left {
width: var(--wk-width-layout-content-left);
height: 100%;
background-color: white;
border-right: 1px solid #e5e7eb;
flex-shrink: 0;
}
.wk-layout-content-right {
width: calc(100% - var(--wk-width-layout-content-left));
height: 100%;
display: flex;
position: relative;
overflow: hidden;
background-color: #f9fafb;
}
/* Dark mode support */
body[theme-mode=dark] .wk-layout {
background-color: #0f172a;
}
body[theme-mode=dark] .wk-layout-tab {
background-color: #1e293b;
border-right-color: #374151;
}
body[theme-mode=dark] .wk-layout-content-left {
background-color: #1e293b;
border-right-color: #374151;
}
body[theme-mode=dark] .wk-layout-content-right {
background-color: #0f172a;
}
/* Responsive design for mobile */
@media screen and (max-width: 640px) {
.wk-layout-content-right {
width: 100%;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
transform: translate3d(0, 0, 0);
transition: transform var(--wk-layer-transition);
z-index: 50;
box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
}
.wk-layout-content:not(.wk-layout-open):not(.wk-layout-modern-open) .wk-layout-content-right {
transform: translate3d(100vw, 0, 0);
}
.wk-layout-content-left {
width: 100%;
}
/* Modern mobile layout */
.wk-layout-modern-open .wk-layout-content-right {
transform: translate3d(0, 0, 0);
}
}
.left-column-width {
width: 22rem;
}
/* ========== RESPONSIVE BREAKPOINTS ========== */
/* Tablet: 768px - 1023px */
@media screen and (max-width: 1023px) and (min-width: 768px) {
.left-column-width {
width: 18rem;
}
.wk-layout-content-left {
width: 280px;
}
}
/* Mobile: < 768px */
@media screen and (max-width: 767px) {
.left-column-width {
width: 100%;
}
.wk-layout-content-left {
width: 100%;
border-right: none;
}
/* Full screen chat view */
.wk-layout-content-right {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
z-index: 100;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}
.wk-layout-content.wk-layout-modern-open .wk-layout-content-right,
.wk-layout-content.wk-layout-open .wk-layout-content-right {
transform: translateX(0);
}
/* Hide sidebar completely on mobile */
.wk-layout-tab {
width: 0;
display: none;
}
/* Add padding for bottom navigation */
.wk-conversationlist {
padding-bottom: calc(130px + env(safe-area-inset-bottom, 0));
}
}
/* Small mobile: < 375px */
@media screen and (max-width: 374px) {
.wk-conversationlist-item-content {
padding: 8px 12px;
min-height: 64px;
}
.wk-conversationlist-item-avatar-box {
width: 44px;
height: 44px;
}
.wk-conversationlist-item-name h3 {
font-size: 14px;
}
}
/* Landscape phone */
@media screen and (max-width: 767px) and (max-height: 450px) {
.wk-conversationlist-item-content {
min-height: 56px;
padding: 6px 12px;
}
.wk-conversationlist-item-avatar-box {
width: 40px;
height: 40px;
}
}
.wk-report-webview-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: #ffffff;
background-color: var(--wk-bg-primary, #ffffff);
position: relative;
}
.wk-report-webview-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 16px;
}
.wk-report-webview-loading-text {
color: #6b7280;
color: var(--wk-text-secondary, #6b7280);
font-size: 14px;
}
.wk-report-webview-iframe {
width: 100%;
height: 100%;
border: none;
flex: 1 1;
}
.wk-report-webview-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 16px;
padding: 24px;
}
.wk-report-webview-error-icon {
font-size: 48px;
}
.wk-report-webview-error-message {
color: #6b7280;
color: var(--wk-text-secondary, #6b7280);
font-size: 14px;
text-align: center;
}
.wk-report-webview-retry-button {
padding: 8px 24px;
background-color: #1890ff;
background-color: var(--wk-primary, #1890ff);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s;
}
.wk-report-webview-retry-button:hover {
background-color: #40a9ff;
background-color: var(--wk-primary-hover, #40a9ff);
}
.wk-report-webview-retry-button:active {
background-color: #096dd9;
background-color: var(--wk-primary-active, #096dd9);
}
.wk-report-modal {
z-index: 9999;
}
.wk-report-modal .semi-modal-content {
height: 90vh;
display: flex;
flex-direction: column;
}
.wk-report-modal .semi-modal-body {
flex: 1 1;
display: flex;
flex-direction: column;
}
.wk-search-box {
display: flex;
padding: 0 10px;
min-width: 200px;
height: 45px;
background-color: #f4f4f5;
border-radius: 25px;
/* margin-top: 10px; */
border: 1px solid var(--wk-border-light);
}
.wk-search-box:has(input:focus-visible) {
border: 1px solid var(--wk-border-focus);
}
body[theme-mode=dark] .wk-search-box {
background-color: var(--wk-color-secondary-2);
}
.wk-search-icon {
display: flex;
align-items: center;
/* margin-left: 20px; */
}
.wk-search-input {
margin-left: 10px;
max-width: 100%;
border: none
}
.wk-search-input input {
/* display: flex;
flex: 1 1; */
height: 32px;
font-size: 12px;
line-height: 18px;
background-color: transparent;
color: #1f2329;
padding: 0;
outline: none;
border: none;
height: 100%;
}
body[theme-mode=dark] .wk-search-input input {
color: white;
}
.wk-search-input .semi-input-wrapper {
height: 100%;
border-radius: 8px;
background-color: white;
}
body[theme-mode=dark] .wk-search-input .semi-input-wrapper {
background-color: var(--wk-color-secondary-2);
}
.wk-search-input .semi-input-wrapper-focus {
border: none !important;
}
.wk-search-input .semi-input-wrapper-focus:active {
border-color: none !important;
}
:root {
--wk-height-navheader: 64px;
}
.wk-navheader {
height: 64px;
height: var(--wk-height-navheader);
width: 100%;
background-color: var(--wk-color-secondary);
}
.wk-navheader-content {
padding: 0px 20px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.wk-navheader-content-left-title {
font-size: 24px;
font-weight: 500;
color: var(--wk-color-brand-500);
color: var(--wk-color-brand-500, var(--wk-color-brand-500));
}
body[theme-mode=dark] .wk-navheader-content-left-title {
color: white;
}
/* QRCodeMy - Optimized for both modal and standalone usage */
.wk-qrcodemy {
width: 100%;
display: flex;
flex-direction: column;
}
/* Content wrapper - auto height for modal, full height for standalone */
.wk-qrcodemy-content {
display: flex;
align-items: flex-start;
justify-content: center;
padding: 20px;
animation: qrcodeFadeIn 0.25s ease-out;
}
/* When used standalone with header, use remaining height */
.wk-qrcodemy.wk-qrcodemy-standalone {
height: 100%;
background-color: var(--wk-color-secondary);
}
.wk-qrcodemy.wk-qrcodemy-standalone .wk-qrcodemy-content {
height: calc(100% - var(--wk-height-viewqueueheader));
}
@keyframes qrcodeFadeIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Main card */
.wk-qrcodemy-card {
width: 100%;
max-width: 260px;
background-color: var(--wk-color-item);
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
body[theme-mode=dark] .wk-qrcodemy-card {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
/* User info */
.wk-qrcodemy-user {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 16px;
}
.wk-qrcodemy-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
border: 2px solid var(--wk-color-theme);
margin-bottom: 8px;
}
.wk-qrcodemy-name {
font-size: 15px;
font-weight: 600;
color: var(--wk-color-text);
text-align: center;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body[theme-mode=dark] .wk-qrcodemy-name {
color: #fff;
}
/* QR Code wrapper with border */
.wk-qrcodemy-qr-wrapper {
padding: 3px;
border-radius: 8px;
background-color: var(--wk-color-theme);
}
.wk-qrcodemy-qr {
display: flex;
align-items: center;
justify-content: center;
width: 140px;
height: 140px;
background-color: #fff;
border-radius: 6px;
position: relative;
overflow: hidden;
}
/* Scan animation */
.wk-qrcodemy-scan {
position: absolute;
left: 8px;
right: 8px;
height: 2px;
background-color: var(--wk-color-theme);
opacity: 0.6;
animation: qrcodeScan 2s ease-in-out infinite;
}
@keyframes qrcodeScan {
0%, 100% {
top: 8px;
opacity: 0;
}
15% {
opacity: 0.6;
}
50% {
top: calc(100% - 10px);
opacity: 0.6;
}
65% {
opacity: 0;
}
}
/* Tip text */
.wk-qrcodemy-tip {
font-size: 12px;
color: var(--wk-color-text-secondary);
text-align: center;
margin-top: 12px;
line-height: 1.4;
max-width: 220px;
}
body[theme-mode=dark] .wk-qrcodemy-tip {
color: rgba(255, 255, 255, 0.5);
}
/* Action buttons */
.wk-qrcodemy-actions {
display: flex;
gap: 8px;
margin-top: 14px;
width: 100%;
justify-content: center;
}
.wk-qrcodemy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 10px;
border-radius: 6px;
border: none;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.15s, color 0.15s;
background-color: var(--wk-color-secondary);
color: var(--wk-color-text);
}
.wk-qrcodemy-btn:hover {
background-color: var(--wk-color-theme);
color: #fff;
}
.wk-qrcodemy-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.wk-qrcodemy-btn svg {
width: 13px;
height: 13px;
}
.wk-qrcodemy-btn.primary {
background-color: var(--wk-color-theme);
color: #fff;
}
.wk-qrcodemy-btn.primary:hover {
opacity: 0.85;
}
.wk-qrcodemy-btn.success {
background-color: #10B981;
color: #fff;
}
body[theme-mode=dark] .wk-qrcodemy-btn {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
}
body[theme-mode=dark] .wk-qrcodemy-btn:hover {
background-color: var(--wk-color-theme);
color: #fff;
}
/* Spinning animation for refresh button */
.wk-qrcodemy-btn.refreshing svg {
animation: qrcodeRefreshSpin 0.8s linear infinite;
}
@keyframes qrcodeRefreshSpin {
to { transform: rotate(360deg); }
}
/* Loading spinner container */
.wk-qrcodemy-qr .semi-spin {
display: flex;
align-items: center;
justify-content: center;
}
/* QR Scanner Styles - Clean Minimal Design */
.qr-scanner-container {
display: flex;
flex-direction: column;
height: 100%;
min-height: 450px;
background: transparent;
border-radius: 20px;
overflow: hidden;
}
.qr-scanner-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
background: rgba(255, 255, 255, 0.95);
color: #333;
position: relative;
z-index: 20;
}
.qr-scanner-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
.qr-scanner-close {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(0, 0, 0, 0.05);
border: none;
border-radius: 50%;
cursor: pointer;
color: #666;
transition: all 0.2s ease;
}
.qr-scanner-close:hover {
background: rgba(0, 0, 0, 0.1);
}
.qr-scanner-close:active {
transform: scale(0.95);
}
.qr-scanner-body {
flex: 1 1 auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
min-height: 280px;
overflow: hidden;
}
.qr-scanner-video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/* Hide default html5-qrcode UI elements */
#qr-reader {
border: none !important;
width: 100% !important;
height: 100% !important;
background: transparent !important;
}
#qr-reader video {
width: 100% !important;
height: 100% !important;
-o-object-fit: cover !important;
object-fit: cover !important;
border-radius: 0 !important;
}
#qr-reader__scan_region {
min-height: 300px !important;
background: transparent !important;
}
#qr-reader__dashboard,
#qr-reader__dashboard_section,
#qr-reader__header_message,
#qr-reader__status_span,
#qr-reader img {
display: none !important;
}
/* Scanner overlay with frame */
.qr-scanner-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 5;
}
.qr-scanner-frame {
position: relative;
width: 260px;
height: 260px;
border-radius: 24px;
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.3);
}
/* Corner decorations - solid color */
.qr-scanner-corner {
position: absolute;
width: 35px;
height: 35px;
}
.qr-scanner-corner::before,
.qr-scanner-corner::after {
content: '';
position: absolute;
background: #007AFF;
border-radius: 2px;
}
.qr-scanner-corner.top-left::before {
top: 0;
left: 0;
width: 35px;
height: 4px;
border-top-left-radius: 20px;
}
.qr-scanner-corner.top-left::after {
top: 0;
left: 0;
width: 4px;
height: 35px;
border-top-left-radius: 20px;
}
.qr-scanner-corner.top-right {
right: 0;
}
.qr-scanner-corner.top-right::before {
top: 0;
right: 0;
width: 35px;
height: 4px;
border-top-right-radius: 20px;
}
.qr-scanner-corner.top-right::after {
top: 0;
right: 0;
width: 4px;
height: 35px;
border-top-right-radius: 20px;
}
.qr-scanner-corner.bottom-left {
bottom: 0;
}
.qr-scanner-corner.bottom-left::before {
bottom: 0;
left: 0;
width: 35px;
height: 4px;
border-bottom-left-radius: 20px;
}
.qr-scanner-corner.bottom-left::after {
bottom: 0;
left: 0;
width: 4px;
height: 35px;
border-bottom-left-radius: 20px;
}
.qr-scanner-corner.bottom-right {
bottom: 0;
right: 0;
}
.qr-scanner-corner.bottom-right::before {
bottom: 0;
right: 0;
width: 35px;
height: 4px;
border-bottom-right-radius: 20px;
}
.qr-scanner-corner.bottom-right::after {
bottom: 0;
right: 0;
width: 4px;
height: 35px;
border-bottom-right-radius: 20px;
}
/* Scanning line animation - solid color */
.qr-scanner-line {
position: absolute;
left: 10px;
right: 10px;
height: 2px;
background: #007AFF;
border-radius: 1px;
animation: scanLine 2.5s ease-in-out infinite;
}
@keyframes scanLine {
0%, 100% {
top: 15px;
opacity: 0.5;
}
50% {
top: calc(100% - 18px);
opacity: 1;
}
}
/* Error state */
.qr-scanner-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px;
text-align: center;
background: rgba(255, 255, 255, 0.95);
}
.qr-scanner-error-icon {
color: #FF3B30;
margin-bottom: 20px;
}
.qr-scanner-error-text {
font-size: 15px;
color: #666;
margin-bottom: 24px;
line-height: 1.6;
}
/* Footer */
.qr-scanner-footer {
flex-shrink: 0;
padding: 20px 24px 28px;
background: rgba(255, 255, 255, 0.95);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
z-index: 10;
position: relative;
}
.qr-scanner-footer p {
margin: 0;
font-size: 14px;
color: #666;
}
/* Gallery button - clean style */
.qr-scanner-gallery-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 24px;
background: #007AFF;
border: none;
border-radius: 25px;
color: white;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.qr-scanner-gallery-btn:hover {
background: #0066DD;
}
.qr-scanner-gallery-btn:active {
transform: scale(0.98);
}
.qr-scanner-gallery-btn svg {
flex-shrink: 0;
}
/* Mobile responsive */
@media (max-width: 480px) {
.qr-scanner-container {
min-height: 400px;
border-radius: 16px;
}
.qr-scanner-header {
padding: 16px 20px;
}
.qr-scanner-header h3 {
font-size: 17px;
}
.qr-scanner-frame {
width: 220px;
height: 220px;
}
.qr-scanner-corner {
width: 28px;
height: 28px;
}
.qr-scanner-corner::before {
width: 28px !important;
}
.qr-scanner-corner::after {
height: 28px !important;
}
.qr-scanner-footer {
padding: 16px 20px 24px;
}
.qr-scanner-gallery-btn {
padding: 10px 20px;
font-size: 14px;
}
}
.wk-iconlistitem {
background-color: white;
height: 52px;
width: 100%;
cursor: pointer;
position: relative;
transition: background-color 0.15s ease;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 1px solid var(--wk-color-border-light, rgba(0, 0, 0, 0.05));
}
.wk-iconlistitem:last-child {
border-bottom: none;
}
.wk-iconlistitem:hover {
background-color: var(--wk-color-hover);
}
body[theme-mode=dark] .wk-iconlistitem {
background-color: var(--wk-color-item);
border-bottom-color: rgba(255, 255, 255, 0.05);
}
.wk-iconlistitem-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding: 0px 16px;
}
.wk-iconlistitem-content-icon img {
width: 32px;
height: 32px;
}
.wk-iconlistitem-content-title {
font-size: 15px;
font-weight: 500;
margin-left: 12px;
color: var(--wk-color-text);
}
body[theme-mode=dark] .wk-iconlistitem-content-title {
color: white;
}
.wk-iconlistitem-content-badge {
position: absolute;
right: 16px;
}
/* Modern File Upload Dialog Styles */
.wk-file-upload-dialog-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.wk-file-upload-dialog {
background: #fff;
background: var(--wk-surface-primary, #fff);
border-radius: 12px;
border-radius: var(--wk-radius-lg, 12px);
width: 90%;
max-width: 600px;
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
box-shadow: var(--wk-shadow-overlay, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
animation: slideUp 0.3s cubic-bezier(0.2, 0, 0.2, 1);
overflow: hidden;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Header */
.wk-file-upload-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
padding: var(--wk-space-4, 16px) var(--wk-space-5, 20px);
border-bottom: 1px solid #e5e7eb;
border-bottom: 1px solid var(--wk-border-default, #e5e7eb);
}
.wk-file-upload-dialog-title {
margin: 0;
font-size: 16px;
font-size: var(--wk-font-size-lg, 16px);
font-weight: 600;
font-weight: var(--wk-font-weight-semibold, 600);
color: #0f172a;
color: var(--wk-text-primary, #0f172a);
}
.wk-file-upload-dialog-close {
background: transparent;
border: none;
cursor: pointer;
color: #6b7280;
color: var(--wk-text-muted, #6b7280);
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
border-radius: var(--wk-radius-md, 8px);
transition: all 0.2s ease;
}
.wk-file-upload-dialog-close:hover {
background: rgba(0, 0, 0, 0.04);
background: var(--wk-hover-subtle, rgba(0, 0, 0, 0.04));
color: #0f172a;
color: var(--wk-text-primary, #0f172a);
}
/* Content */
.wk-file-upload-dialog-content {
flex: 1 1;
overflow-y: auto;
padding: 20px;
padding: var(--wk-space-5, 20px);
display: flex;
flex-direction: column;
gap: 16px;
gap: var(--wk-space-4, 16px);
}
.wk-file-upload-dialog-content::-webkit-scrollbar {
width: 6px;
}
.wk-file-upload-dialog-content::-webkit-scrollbar-thumb {
background: #d1d5db;
background: var(--wk-color-neutral-300, #d1d5db);
border-radius: 3px;
}
/* Image Preview */
.wk-file-preview-image {
width: 100%;
background: #f9fafb;
background: var(--wk-surface-secondary, #f9fafb);
border-radius: 8px;
border-radius: var(--wk-radius-md, 8px);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
max-height: 400px;
}
.wk-preview-img {
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain;
display: block;
}
/* Document Preview */
.wk-file-preview-document {
width: 100%;
background: #f9fafb;
background: var(--wk-surface-secondary, #f9fafb);
border-radius: 12px;
border-radius: var(--wk-radius-lg, 12px);
padding: 24px;
padding: var(--wk-space-6, 24px);
display: flex;
gap: 16px;
gap: var(--wk-space-4, 16px);
align-items: flex-start;
}
.wk-file-icon-container {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: 8px;
border-radius: var(--wk-radius-md, 8px);
background: #fff;
background: var(--wk-surface-primary, #fff);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
box-shadow: var(--wk-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.wk-file-thumbnail {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.wk-file-icon-placeholder {
color: var(--wk-color-brand-600);
color: var(--wk-color-brand-500, var(--wk-color-brand-600));
}
.wk-file-info {
flex: 1 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
gap: var(--wk-space-2, 8px);
}
.wk-file-name {
font-size: 15px;
font-size: var(--wk-font-size-base, 15px);
font-weight: 500;
font-weight: var(--wk-font-weight-medium, 500);
color: #0f172a;
color: var(--wk-text-primary, #0f172a);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wk-file-size {
font-size: 14px;
font-size: var(--wk-font-size-sm, 14px);
color: #6b7280;
color: var(--wk-text-muted, #6b7280);
}
.wk-file-type-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: #e8f4fb;
background: var(--wk-color-brand-50, #e8f4fb);
color: var(--wk-color-brand-700);
color: var(--wk-color-brand-600, var(--wk-color-brand-700));
border-radius: 4px;
border-radius: var(--wk-radius-sm, 4px);
font-size: 12px;
font-size: var(--wk-font-size-xs, 12px);
font-weight: 500;
font-weight: var(--wk-font-weight-medium, 500);
align-self: flex-start;
}
/* File Details */
.wk-file-details {
background: #f9fafb;
background: var(--wk-surface-secondary, #f9fafb);
border-radius: 8px;
border-radius: var(--wk-radius-md, 8px);
padding: 12px 16px;
padding: var(--wk-space-3, 12px) var(--wk-space-4, 16px);
display: flex;
flex-direction: column;
gap: 8px;
gap: var(--wk-space-2, 8px);
}
.wk-file-detail-item {
display: flex;
gap: 8px;
gap: var(--wk-space-2, 8px);
font-size: 14px;
font-size: var(--wk-font-size-sm, 14px);
}
.wk-detail-label {
color: #6b7280;
color: var(--wk-text-muted, #6b7280);
font-weight: 500;
font-weight: var(--wk-font-weight-medium, 500);
flex-shrink: 0;
}
.wk-detail-value {
color: #0f172a;
color: var(--wk-text-primary, #0f172a);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Footer */
.wk-file-upload-dialog-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
gap: var(--wk-space-3, 12px);
padding: 16px 20px;
padding: var(--wk-space-4, 16px) var(--wk-space-5, 20px);
border-top: 1px solid #e5e7eb;
border-top: 1px solid var(--wk-border-default, #e5e7eb);
background: #fff;
background: var(--wk-surface-primary, #fff);
}
/* Dark Mode Support */
body[theme-mode="dark"] .wk-file-upload-dialog {
background: #1a1d2e;
background: var(--wk-surface-primary, #1a1d2e);
}
body[theme-mode="dark"] .wk-file-upload-dialog-header {
border-bottom-color: #2d3748;
border-bottom-color: var(--wk-border-default, #2d3748);
}
body[theme-mode="dark"] .wk-file-preview-image,
body[theme-mode="dark"] .wk-file-preview-document,
body[theme-mode="dark"] .wk-file-details {
background: #242938;
background: var(--wk-surface-secondary, #242938);
}
body[theme-mode="dark"] .wk-file-icon-container {
background: #2d3748;
background: var(--wk-surface-tertiary, #2d3748);
}
body[theme-mode="dark"] .wk-file-upload-dialog-footer {
border-top-color: #2d3748;
border-top-color: var(--wk-border-default, #2d3748);
background: #1a1d2e;
background: var(--wk-surface-primary, #1a1d2e);
}
/* Responsive */
@media (max-width: 768px) {
.wk-file-upload-dialog {
width: 95%;
max-height: 90vh;
}
.wk-file-preview-document {
flex-direction: column;
align-items: center;
}
.wk-file-icon-container {
width: 100px;
height: 100px;
}
}
.wk-sex-select {
width: 100%;
height: 100%;
}
.wk-sex-select-item {
background-color: white;
height: 50px;
width: 100%;
background-color: var(--wk-color-item);
display: flex;
align-items: center;
cursor: pointer;
}
.wk-sex-select-item .checked {
color: var(--wk-color-theme);
margin-left: 40px;
}
.wk-sex-select-item .sex {
margin-left: 20px;
}
.totp-code-input {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.totp-code-digit {
width: 48px;
height: 56px;
text-align: center;
font-size: 24px;
font-weight: 600;
border: 2px solid #e5e7eb;
border-radius: 12px;
background-color: #f9fafb;
transition: all 0.2s ease;
outline: none;
color: #1f2937;
}
.totp-code-digit:focus {
border-color: #0064fa;
background-color: #ffffff;
box-shadow: 0 0 0 3px rgba(0, 100, 250, 0.15);
}
.totp-code-digit:disabled {
background-color: #f3f4f6;
color: #9ca3af;
cursor: not-allowed;
}
.totp-code-input-error .totp-code-digit {
border-color: #ef4444;
animation: shake 0.3s ease-in-out;
}
.totp-code-input-error .totp-code-digit:focus {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.totp-code-separator {
font-size: 20px;
color: #9ca3af;
margin: 0 4px;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
/* Responsive */
@media (max-width: 480px) {
.totp-code-digit {
width: 40px;
height: 48px;
font-size: 20px;
}
.totp-code-input {
gap: 6px;
}
}
.totp-setup {
padding: 32px;
max-width: 480px;
margin: 0 auto;
}
.totp-setup-step {
text-align: center;
}
.totp-setup-icon {
font-size: 56px;
margin-bottom: 16px;
}
.totp-setup-title {
font-size: 18px;
font-weight: 600;
color: #1f2937;
margin: 24px 0 12px 0;
}
.totp-setup-desc {
font-size: 14px;
color: #6b7280;
margin: 0 0 24px 0;
line-height: 1.5;
}
.totp-setup-apps {
background-color: #f9fafb;
border-radius: 12px;
padding: 16px 24px;
margin-bottom: 24px;
text-align: left;
}
.totp-setup-apps-title {
font-size: 14px;
color: #374151;
margin: 0 0 12px 0;
font-weight: 500;
}
.totp-setup-apps ul {
list-style: none;
padding: 0;
margin: 0;
}
.totp-setup-apps li {
font-size: 14px;
color: #6b7280;
padding: 4px 0;
}
.totp-setup-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 24px;
}
.totp-setup-btn-primary {
width: 100%;
height: 48px !important;
font-size: 16px !important;
border-radius: 12px !important;
}
.totp-setup-btn-secondary {
width: 100%;
height: 44px !important;
border-radius: 12px !important;
background: transparent !important;
color: #6b7280 !important;
}
.totp-setup-btn-secondary:hover {
background-color: #f3f4f6 !important;
}
/* QR Code Step */
.totp-qr-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.totp-qr-image {
width: 200px;
height: 200px;
border-radius: 16px;
border: 2px solid #e5e7eb;
padding: 8px;
background: white;
}
.totp-secret-container {
margin-bottom: 20px;
}
.totp-secret-label {
font-size: 13px;
color: #6b7280;
margin: 0 0 8px 0;
}
.totp-secret-box {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #f9fafb;
border-radius: 8px;
padding: 12px 16px;
}
.totp-secret-code {
font-family: 'Monaco', 'Consolas', monospace;
font-size: 14px;
color: #374151;
letter-spacing: 1px;
}
.totp-copy-btn {
background: none;
border: none;
color: #0064fa;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.totp-copy-btn:hover {
color: #0052cc;
}
.totp-expiry-warning {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background-color: #fef3c7;
border-radius: 20px;
font-size: 13px;
color: #92400e;
margin-bottom: 16px;
}
.totp-expired-warning {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
background-color: #fef2f2;
border-radius: 12px;
font-size: 14px;
color: #dc2626;
margin-bottom: 16px;
}
.totp-refresh-btn {
margin-left: 8px;
}
.totp-setup-error {
margin-top: 16px;
padding: 12px 16px;
background-color: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
color: #dc2626;
font-size: 14px;
}
/* Verify Step */
.totp-verify-input-container {
margin: 24px 0;
}
.totp-verify-hint {
font-size: 13px;
color: #9ca3af;
margin: 0;
}
/* Recovery Codes Step */
.totp-recovery-warning {
color: #b45309 !important;
font-weight: 500;
}
.totp-recovery-codes {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 8px;
gap: 8px;
background-color: #f9fafb;
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
}
.totp-recovery-code {
font-family: 'Monaco', 'Consolas', monospace;
font-size: 14px;
color: #374151;
padding: 8px 12px;
background-color: white;
border-radius: 6px;
border: 1px solid #e5e7eb;
}
.totp-recovery-actions {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
}
.totp-recovery-btn {
border-radius: 8px !important;
}
.totp-confirm-checkbox {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14px;
color: #374151;
cursor: pointer;
margin-bottom: 8px;
}
.totp-confirm-checkbox input {
width: 18px;
height: 18px;
cursor: pointer;
}
/* Responsive */
@media (max-width: 480px) {
.totp-setup {
padding: 24px 16px;
}
.totp-qr-image {
width: 160px;
height: 160px;
}
.totp-recovery-codes {
grid-template-columns: 1fr;
}
}
.totp-settings {
padding: 24px;
}
/* Status */
.totp-settings-status {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border-radius: 16px;
margin-bottom: 24px;
}
.totp-settings-status-icon {
font-size: 24px;
}
.totp-settings-status-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.totp-settings-status-label {
font-size: 13px;
color: #6b7280;
}
.totp-settings-status-value {
font-size: 18px;
font-weight: 600;
color: #059669;
}
/* Settings List */
.totp-settings-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.totp-settings-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 16px 20px;
background-color: #f9fafb;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
}
.totp-settings-item:hover {
background-color: #f3f4f6;
}
.totp-settings-item-danger:hover {
background-color: #fef2f2;
}
.totp-settings-item-content {
display: flex;
align-items: center;
gap: 16px;
}
.totp-settings-item-icon {
font-size: 24px;
}
.totp-settings-item-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.totp-settings-item-title {
font-size: 15px;
font-weight: 500;
color: #1f2937;
}
.totp-settings-item-danger .totp-settings-item-title {
color: #dc2626;
}
.totp-settings-item-subtitle {
font-size: 13px;
color: #6b7280;
}
.totp-settings-item-arrow {
color: #9ca3af;
font-size: 18px;
}
/* Recovery Codes View */
.totp-settings-codes {
text-align: center;
}
.totp-settings-codes-title {
font-size: 20px;
font-weight: 600;
color: #1f2937;
margin: 0 0 8px 0;
}
.totp-settings-codes-desc {
font-size: 14px;
color: #6b7280;
margin: 0 0 20px 0;
line-height: 1.5;
}
.totp-recovery-codes-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 8px;
gap: 8px;
background-color: #f9fafb;
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
}
.totp-recovery-code-item {
font-family: 'Monaco', 'Consolas', monospace;
font-size: 14px;
color: #374151;
padding: 10px 12px;
background-color: white;
border-radius: 8px;
border: 1px solid #e5e7eb;
}
.totp-recovery-code-item.used {
text-decoration: line-through;
color: #9ca3af;
background-color: #f3f4f6;
}
.totp-settings-codes-stats {
font-size: 14px;
color: #6b7280;
margin-bottom: 20px;
}
/* Verify Section */
.totp-settings-verify {
text-align: center;
}
.totp-settings-verify-title {
font-size: 20px;
font-weight: 600;
color: #1f2937;
margin: 0 0 8px 0;
}
.totp-danger-title {
color: #dc2626;
}
.totp-settings-verify-desc {
font-size: 14px;
color: #6b7280;
margin: 0 0 24px 0;
line-height: 1.6;
}
.totp-danger-text {
color: #dc2626;
}
.totp-settings-verify-input {
margin-bottom: 24px;
}
.totp-settings-error {
margin-top: 16px;
padding: 12px 16px;
background-color: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
color: #dc2626;
font-size: 14px;
}
/* Actions */
.totp-settings-actions {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 24px;
}
/* Responsive */
@media (max-width: 480px) {
.totp-settings {
padding: 16px;
}
.totp-recovery-codes-grid {
grid-template-columns: 1fr;
}
}
/* === MeInfo - Personal Info Modal (Horizontal Layout) === */
/* Professional design without gradients */
.wk-meinfo {
background-color: #F9FAFB;
background-color: var(--wk-color-neutral-50, #F9FAFB);
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/* === Horizontal Layout Container === */
.wk-meinfo-layout {
display: flex;
width: 100%;
height: 100%;
}
/* === Profile Sidebar (Left Panel) === */
.wk-meinfo-sidebar {
width: 200px;
min-width: 200px;
background-color: #FFFFFF;
border-right: 1px solid #E5E7EB;
border-right: 1px solid var(--wk-color-neutral-200, #E5E7EB);
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 20px 24px 20px;
box-sizing: border-box;
}
/* Desktop: Hide first section "基本信息" since sidebar already shows avatar/name */
.wk-meinfo-content .wk-sections>.wk-section:first-child .wk-channelsetting-section-rows .wk-section-row {
display: none !important;
}
.wk-meinfo-content .wk-sections>.wk-section:first-child .wk-channelsetting-section-rows .wk-section-row:nth-child(2) {
display: block !important;
}
.wk-meinfo-sidebar-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--wk-color-brand-600);
border: 3px solid var(--wk-color-brand-500, var(--wk-color-brand-600));
box-shadow: 0 4px 16px rgba(30, 150, 213, 0.15);
margin-bottom: 20px;
position: relative;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wk-meinfo-sidebar-avatar:hover {
transform: scale(1.03);
box-shadow: 0 6px 20px rgba(30, 150, 213, 0.25);
}
.wk-meinfo-sidebar-avatar img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: filter 0.2s ease;
}
.wk-meinfo-sidebar-avatar-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 32px;
background-color: rgba(0, 0, 0, 0.55);
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
opacity: 0;
transition: opacity 0.2s ease;
}
.wk-meinfo-sidebar-avatar:hover .wk-meinfo-sidebar-avatar-overlay {
opacity: 1;
}
.wk-meinfo-sidebar-avatar-overlay span {
color: #FFFFFF;
font-size: 11px;
font-weight: 500;
}
.wk-meinfo-sidebar-info {
text-align: center;
margin-bottom: 24px;
width: 100%;
}
.wk-meinfo-sidebar-name {
font-size: 18px;
font-weight: 600;
color: #111827;
color: var(--wk-color-neutral-900, #111827);
margin: 0 0 8px 0;
line-height: 1.3;
word-break: break-word;
}
.wk-meinfo-sidebar-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.wk-meinfo-sidebar-id {
font-size: 12px;
color: #6B7280;
color: var(--wk-color-neutral-500, #6B7280);
line-height: 1.4;
}
.wk-meinfo-sidebar-sex {
font-size: 12px;
color: #9CA3AF;
color: var(--wk-color-neutral-400, #9CA3AF);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 10px;
background-color: #F3F4F6;
background-color: var(--wk-color-neutral-100, #F3F4F6);
border-radius: 12px;
width: -moz-fit-content;
width: fit-content;
margin: 4px auto 0;
}
.wk-meinfo-sidebar-qrcode {
margin-top: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px;
border-radius: 12px;
background-color: #F9FAFB;
background-color: var(--wk-color-neutral-50, #F9FAFB);
cursor: pointer;
transition: background-color 0.15s ease;
width: 100%;
box-sizing: border-box;
}
.wk-meinfo-sidebar-qrcode:hover {
background-color: #F3F4F6;
background-color: var(--wk-color-neutral-100, #F3F4F6);
}
.wk-meinfo-sidebar-qrcode svg {
color: var(--wk-color-brand-600);
color: var(--wk-color-brand-500, var(--wk-color-brand-600));
}
.wk-meinfo-sidebar-qrcode span {
font-size: 12px;
color: #4B5563;
color: var(--wk-color-neutral-600, #4B5563);
font-weight: 500;
}
/* === Content Area (Right Panel) === */
.wk-meinfo-content {
flex: 1 1;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}
.wk-meinfo-content::-webkit-scrollbar {
width: 5px;
}
.wk-meinfo-content::-webkit-scrollbar-track {
background: transparent;
}
.wk-meinfo-content::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.12);
border-radius: 3px;
}
.wk-meinfo-content::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.wk-meinfo-sections {
padding: 20px;
}
/* === MOBILE RESPONSIVE (≤767px viewport - actual mobile devices) === */
@media only screen and (max-width: 767px) {
/* Only apply to actual mobile devices with small viewports */
body .wk-meinfo-layout {
flex-direction: column;
}
/* Mobile: Hide sidebar, show "基本信息" section instead */
body .wk-meinfo-sidebar {
display: none !important;
}
.wk-meinfo-content .wk-sections>.wk-section:first-child .wk-channelsetting-section-rows .wk-section-row {
display: block !important;
}
body .wk-meinfo-sections {
padding: 16px;
}
}
/* === DARK MODE === */
body[theme-mode=dark] .wk-meinfo {
background-color: #111827;
background-color: var(--wk-color-neutral-900, #111827);
}
body[theme-mode=dark] .wk-meinfo-sidebar {
background-color: #1F2937;
background-color: var(--wk-color-neutral-800, #1F2937);
border-right-color: #374151;
border-right-color: var(--wk-color-neutral-700, #374151);
}
body[theme-mode=dark] .wk-meinfo-sidebar-avatar {
border-color: #47A7DF;
border-color: var(--wk-color-brand-400, #47A7DF);
box-shadow: 0 4px 16px rgba(71, 167, 223, 0.15);
}
body[theme-mode=dark] .wk-meinfo-sidebar-name {
color: #F3F4F6;
color: var(--wk-color-neutral-100, #F3F4F6);
}
body[theme-mode=dark] .wk-meinfo-sidebar-id {
color: #9CA3AF;
color: var(--wk-color-neutral-400, #9CA3AF);
}
body[theme-mode=dark] .wk-meinfo-sidebar-sex {
background-color: #374151;
background-color: var(--wk-color-neutral-700, #374151);
color: #D1D5DB;
color: var(--wk-color-neutral-300, #D1D5DB);
}
body[theme-mode=dark] .wk-meinfo-sidebar-qrcode {
background-color: #374151;
background-color: var(--wk-color-neutral-700, #374151);
}
body[theme-mode=dark] .wk-meinfo-sidebar-qrcode:hover {
background-color: #4B5563;
background-color: var(--wk-color-neutral-600, #4B5563);
}
body[theme-mode=dark] .wk-meinfo-sidebar-qrcode svg {
color: #47A7DF;
color: var(--wk-color-brand-400, #47A7DF);
}
body[theme-mode=dark] .wk-meinfo-sidebar-qrcode span {
color: #D1D5DB;
color: var(--wk-color-neutral-300, #D1D5DB);
}
body[theme-mode=dark] .wk-meinfo-content {
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
body[theme-mode=dark] .wk-meinfo-content::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.1);
}
body[theme-mode=dark] .wk-meinfo-content::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.18);
}
/* === SMALL TABLE EDIT - MODERN DESIGN (NO GRADIENTS) === */
.wk-smalltableedit {
overflow-y: auto;
width: 100%;
height: 100%;
}
.wk-smalltableedit-content {
padding: 4px 0;
}
.wk-smalltableedit-content-items {
display: flex;
flex-direction: column;
gap: 2px;
}
.wk-smalltableedit-content-item {
display: flex;
align-items: center;
padding: 10px 16px;
background-color: transparent;
transition: background-color 0.15s ease;
cursor: pointer;
}
.wk-smalltableedit-content-item:hover {
background-color: #F9FAFB;
background-color: var(--wk-color-neutral-50, #F9FAFB);
}
.wk-smalltableedit-content-item:active {
background-color: #F3F4F6;
background-color: var(--wk-color-neutral-100, #F3F4F6);
}
.wk-smalltableedit-content-item-avatar {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
}
.wk-smalltableedit-content-item-avatar img {
width: 36px;
height: 36px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
border: 1px solid #E5E7EB;
border: 1px solid var(--wk-color-neutral-200, #E5E7EB);
transition: border-color 0.15s ease, transform 0.15s ease;
}
.wk-smalltableedit-content-item:hover .wk-smalltableedit-content-item-avatar img {
border-color: #7DC4EB;
border-color: var(--wk-color-brand-300, #7DC4EB);
transform: scale(1.02);
}
/* Avatar fallback placeholder */
.wk-smalltableedit-content-item-avatar-fallback {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #F3F4F6;
background-color: var(--wk-color-neutral-100, #F3F4F6);
border: 1px solid #E5E7EB;
border: 1px solid var(--wk-color-neutral-200, #E5E7EB);
display: flex;
align-items: center;
justify-content: center;
}
.wk-smalltableedit-content-item-name {
margin-left: 12px;
flex: 1 1;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: #111827;
color: var(--wk-color-neutral-900, #111827);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.15s ease;
}
.wk-smalltableedit-content-item:hover .wk-smalltableedit-content-item-name {
color: var(--wk-color-brand-600);
color: var(--wk-color-brand-500, var(--wk-color-brand-600));
}
.wk-smalltableedit-content-item-action {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
margin-left: 8px;
cursor: pointer;
border-radius: 50%;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.wk-smalltableedit-content-item-action:hover {
background-color: rgba(239, 68, 68, 0.1);
transform: scale(1.1);
}
.wk-smalltableedit-content-item-action:active {
background-color: rgba(239, 68, 68, 0.15);
transform: scale(1);
}
/* Add button styling */
.wk-smalltableedit-content-item-add {
border-top: 1px solid #F3F4F6;
border-top: 1px solid var(--wk-color-neutral-100, #F3F4F6);
margin-top: 4px;
padding-top: 8px;
}
.wk-smalltableedit-content-item-add .wk-smalltableedit-content-item-name {
color: var(--wk-color-brand-600);
color: var(--wk-color-brand-500, var(--wk-color-brand-600));
font-weight: 500;
}
.wk-smalltableedit-content-item-add:hover .wk-smalltableedit-content-item-name {
color: #1A7AB8;
color: var(--wk-color-brand-600, #1A7AB8);
}
/* === DARK MODE === */
body[theme-mode=dark] .wk-smalltableedit-content-item {
background-color: transparent;
}
body[theme-mode=dark] .wk-smalltableedit-content-item:hover {
background-color: #374151;
background-color: var(--wk-color-neutral-700, #374151);
}
body[theme-mode=dark] .wk-smalltableedit-content-item:active {
background-color: #4B5563;
background-color: var(--wk-color-neutral-600, #4B5563);
}
body[theme-mode=dark] .wk-smalltableedit-content-item-avatar img {
border-color: #4B5563;
border-color: var(--wk-color-neutral-600, #4B5563);
}
body[theme-mode=dark] .wk-smalltableedit-content-item:hover .wk-smalltableedit-content-item-avatar img {
border-color: #47A7DF;
border-color: var(--wk-color-brand-400, #47A7DF);
}
body[theme-mode=dark] .wk-smalltableedit-content-item-avatar-fallback {
background-color: #374151;
background-color: var(--wk-color-neutral-700, #374151);
border-color: #4B5563;
border-color: var(--wk-color-neutral-600, #4B5563);
}
body[theme-mode=dark] .wk-smalltableedit-content-item-name {
color: #F3F4F6;
color: var(--wk-color-neutral-100, #F3F4F6);
}
body[theme-mode=dark] .wk-smalltableedit-content-item:hover .wk-smalltableedit-content-item-name {
color: #47A7DF;
color: var(--wk-color-brand-400, #47A7DF);
}
body[theme-mode=dark] .wk-smalltableedit-content-item-action:hover {
background-color: rgba(239, 68, 68, 0.2);
}
body[theme-mode=dark] .wk-smalltableedit-content-item-add {
border-top-color: #374151;
border-top-color: var(--wk-color-neutral-700, #374151);
}
body[theme-mode=dark] .wk-smalltableedit-content-item-add .wk-smalltableedit-content-item-name {
color: #47A7DF;
color: var(--wk-color-brand-400, #47A7DF);
}
body[theme-mode=dark] .wk-smalltableedit-content-item-add:hover .wk-smalltableedit-content-item-name {
color: #7DC4EB;
color: var(--wk-color-brand-300, #7DC4EB);
}
/* DesktopBlocker - Clean minimal design */
.desktop-blocker {
position: fixed;
inset: 0;
background: #f5f5f7;
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 24px;
}
.desktop-blocker-card {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
max-width: 360px;
width: 100%;
padding: 32px 28px;
text-align: center;
position: relative;
}
/* Language Selector */
.desktop-blocker-lang-selector {
position: absolute;
top: 16px;
right: 16px;
}
.desktop-blocker-lang-button {
display: flex;
align-items: center;
gap: 6px;
background: #f0f0f0;
border: none;
border-radius: 8px;
padding: 6px 12px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: #1a1a2e;
transition: all 0.2s;
}
.desktop-blocker-lang-button:hover {
background: #e5e5e5;
}
.desktop-blocker-lang-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 8px;
background: white;
border: 1px solid #e5e5e5;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
min-width: 160px;
overflow: hidden;
z-index: 10;
}
.desktop-blocker-lang-option {
padding: 10px 16px;
cursor: pointer;
font-size: 14px;
color: #1a1a2e;
transition: all 0.2s;
text-align: left;
}
.desktop-blocker-lang-option:hover {
background: #f8f8f8;
}
.desktop-blocker-lang-option.active {
background: #e8f4ff;
color: #0064fa;
font-weight: 500;
}
/* Header */
.desktop-blocker-header {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
}
.desktop-blocker-logo {
width: 44px;
height: 44px;
border-radius: 10px;
}
.desktop-blocker-title {
font-size: 22px;
font-weight: 600;
color: #1a1a2e;
margin: 0;
}
/* Notice */
.desktop-blocker-notice {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff8e6;
color: #b8860b;
padding: 10px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
margin-bottom: 24px;
}
.desktop-blocker-notice-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* QR Code */
.desktop-blocker-qr {
margin-bottom: 24px;
}
.desktop-blocker-qr-img {
width: 160px;
height: 160px;
border-radius: 12px;
border: 2px solid #e5e5e5;
}
.desktop-blocker-qr-loading {
width: 160px;
height: 160px;
background: #f0f0f0;
border-radius: 12px;
margin: 0 auto;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.desktop-blocker-qr-text {
margin: 12px 0 0;
font-size: 14px;
color: #666;
}
/* Instructions */
.desktop-blocker-instructions {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.desktop-blocker-instruction {
display: flex;
align-items: center;
gap: 10px;
background: #f8f8f8;
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
color: #444;
text-align: left;
}
.desktop-blocker-instruction-badge {
background: #1a1a2e;
color: white;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
flex-shrink: 0;
}
.desktop-blocker-instruction-badge.android {
background: #34a853;
}
/* URL */
.desktop-blocker-url {
margin-bottom: 16px;
}
.desktop-blocker-url code {
display: inline-block;
background: #f0f0f0;
color: #007AFF;
padding: 8px 14px;
border-radius: 6px;
font-size: 12px;
word-break: break-all;
max-width: 100%;
}
/* Footer */
.desktop-blocker-footer {
font-size: 12px;
color: #999;
margin: 0;
}
/* PWA Install Prompt Styles - Mobile First */
/* ========== Main Banner ========== */
.pwa-install-prompt {
position: fixed;
left: 0;
right: 0;
z-index: 10000;
padding: 12px 16px;
/* Safe area for iOS notch */
padding-bottom: max(12px, env(safe-area-inset-bottom));
background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
animation: pwa-slide-in 0.3s ease-out;
}
.pwa-install-prompt--top {
top: 0;
padding-top: max(12px, env(safe-area-inset-top));
padding-bottom: 12px;
animation-name: pwa-slide-in-top;
}
.pwa-install-prompt--bottom {
bottom: 0;
animation-name: pwa-slide-in-bottom;
}
.pwa-install-prompt__content {
display: flex;
align-items: center;
gap: 10px;
max-width: 100%;
}
/* Icon */
.pwa-install-prompt__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 10px;
overflow: hidden;
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.pwa-install-prompt__icon img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
/* Text */
.pwa-install-prompt__text {
flex: 1 1;
min-width: 0;
}
.pwa-install-prompt__title {
margin: 0 0 2px;
font-size: 15px;
font-weight: 600;
color: white;
line-height: 1.3;
}
.pwa-install-prompt__desc {
margin: 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.85);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Actions */
.pwa-install-prompt__actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.pwa-install-prompt__btn {
border: none;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.pwa-install-prompt__btn--install {
padding: 8px 14px;
background: white;
color: #007AFF;
border-radius: 18px;
white-space: nowrap;
}
.pwa-install-prompt__btn--install:active {
transform: scale(0.96);
background: #f0f0f0;
}
.pwa-install-prompt__btn--dismiss {
width: 28px;
height: 28px;
padding: 0;
background: rgba(255, 255, 255, 0.15);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.pwa-install-prompt__btn--dismiss:active {
background: rgba(255, 255, 255, 0.25);
}
/* ========== Installation Guide Modal ========== */
.pwa-guide {
position: fixed;
inset: 0;
z-index: 10001;
display: flex;
align-items: flex-end;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: pwa-fade-in 0.2s ease-out;
}
.pwa-guide__content {
position: relative;
width: 100%;
max-width: 100%;
max-height: 85vh;
overflow-y: auto;
padding: 20px;
padding-bottom: max(20px, env(safe-area-inset-bottom));
background: white;
border-radius: 20px 20px 0 0;
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
animation: pwa-slide-up 0.3s ease-out;
}
.pwa-guide__close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
padding: 0;
border: none;
background: #f0f0f0;
color: #666;
border-radius: 50%;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.pwa-guide__close:active {
background: #e0e0e0;
transform: scale(0.95);
}
/* Header */
.pwa-guide__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-bottom: 20px;
}
.pwa-guide__app-icon {
width: 56px;
height: 56px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.pwa-guide__title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
text-align: center;
}
.pwa-guide__browser-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: #e3f2fd;
color: #1976d2;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.pwa-guide__browser-badge--warning {
background: #fff3e0;
color: #e65100;
}
/* Body */
.pwa-guide__body {
margin-bottom: 16px;
}
/* Steps */
.pwa-guide__steps {
margin: 0;
padding: 0;
list-style: none;
}
.pwa-guide__steps li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid #f0f0f0;
}
.pwa-guide__steps li:last-child {
border-bottom: none;
}
.pwa-guide__step-num {
flex-shrink: 0;
width: 26px;
height: 26px;
background: #007AFF;
color: white;
border-radius: 50%;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.pwa-guide__step-content {
flex: 1 1;
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: #333;
line-height: 1.5;
}
.pwa-guide__step-icon {
font-size: 20px;
line-height: 1;
}
.pwa-guide__step-content strong {
color: #007AFF;
}
/* Compact steps for redirect instructions */
.pwa-guide__steps--compact li {
padding: 10px 0;
}
.pwa-guide__steps--compact .pwa-guide__step-num {
width: 22px;
height: 22px;
font-size: 12px;
}
.pwa-guide__steps--compact .pwa-guide__step-content {
font-size: 14px;
}
/* Unsupported Browser Warning */
.pwa-guide__unsupported {
text-align: center;
}
.pwa-guide__warning {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
background: #fff3e0;
color: #e65100;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
margin-bottom: 16px;
}
.pwa-guide__warning-icon {
font-size: 18px;
}
.pwa-guide__redirect {
text-align: left;
}
.pwa-guide__redirect p {
margin: 0 0 8px;
font-size: 14px;
color: #666;
}
.pwa-guide__copy-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 24px;
margin-top: 16px;
background: #007AFF;
color: white;
border: none;
border-radius: 24px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.pwa-guide__copy-btn:active {
transform: scale(0.97);
background: #0056CC;
}
/* Generic instructions */
.pwa-guide__generic {
text-align: center;
}
.pwa-guide__generic p {
margin: 0 0 12px;
font-size: 14px;
color: #666;
}
.pwa-guide__options {
margin: 0 0 16px;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.pwa-guide__options li {
padding: 10px 16px;
background: #f8f9fa;
border-radius: 10px;
font-size: 14px;
color: #333;
}
.pwa-guide__tip {
padding: 12px;
background: #e3f2fd;
border-radius: 10px;
font-size: 13px;
color: #1565c0;
margin: 0;
}
/* Footer */
.pwa-guide__footer {
text-align: center;
padding-top: 12px;
border-top: 1px solid #f0f0f0;
}
.pwa-guide__footer p {
margin: 0;
font-size: 13px;
color: #999;
}
/* ========== Animations ========== */
@keyframes pwa-slide-in-top {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes pwa-slide-in-bottom {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes pwa-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes pwa-slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/* ========== Dark Mode ========== */
body[theme-mode='dark'] .pwa-install-prompt {
background: linear-gradient(135deg, #0066DD 0%, #004AAA 100%);
}
body[theme-mode='dark'] .pwa-guide__content {
background: #1e1e1e;
}
body[theme-mode='dark'] .pwa-guide__title {
color: #ffffff;
}
body[theme-mode='dark'] .pwa-guide__step-content {
color: #e0e0e0;
}
body[theme-mode='dark'] .pwa-guide__close {
background: #333;
color: #ccc;
}
body[theme-mode='dark'] .pwa-guide__close:active {
background: #444;
}
body[theme-mode='dark'] .pwa-guide__footer {
border-top-color: #333;
}
body[theme-mode='dark'] .pwa-guide__footer p {
color: #777;
}
body[theme-mode='dark'] .pwa-guide__steps li {
border-bottom-color: #333;
}
body[theme-mode='dark'] .pwa-guide__browser-badge {
background: #1e3a5f;
color: #64b5f6;
}
body[theme-mode='dark'] .pwa-guide__browser-badge--warning {
background: #4a2c00;
color: #ffb74d;
}
body[theme-mode='dark'] .pwa-guide__warning {
background: #4a2c00;
color: #ffb74d;
}
body[theme-mode='dark'] .pwa-guide__options li {
background: #2a2a2a;
color: #e0e0e0;
}
body[theme-mode='dark'] .pwa-guide__tip {
background: #1e3a5f;
color: #90caf9;
}
body[theme-mode='dark'] .pwa-guide__generic p,
body[theme-mode='dark'] .pwa-guide__redirect p {
color: #aaa;
}
/* ========== Responsive - Larger phones ========== */
@media (min-width: 400px) {
.pwa-guide__content {
max-width: 400px;
margin: 0 auto;
border-radius: 20px;
margin-bottom: 20px;
}
.pwa-guide {
align-items: center;
padding: 20px;
}
}
.wk-weblogin-confirm {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
padding: 20px;
}
.wk-weblogin-confirm-header {
text-align: center;
padding: 20px 0;
}
.wk-weblogin-confirm-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
margin-bottom: 16px;
}
.wk-weblogin-confirm-title {
font-size: 24px;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 8px 0;
}
.wk-weblogin-confirm-desc {
font-size: 14px;
color: #666;
margin: 0;
}
.wk-weblogin-confirm-body {
flex: 1 1;
padding: 20px 0;
}
.wk-weblogin-confirm-info {
background: #f7f8fa;
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
}
.wk-weblogin-confirm-info-item {
display: flex;
justify-content: space-between;
padding: 8px 0;
}
.wk-weblogin-confirm-info-label {
font-size: 14px;
color: #666;
}
.wk-weblogin-confirm-info-value {
font-size: 14px;
font-weight: 500;
color: #1a1a1a;
}
.wk-weblogin-confirm-warning {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
background: #fff7e6;
border-radius: 8px;
font-size: 13px;
color: #ff8800;
}
.wk-weblogin-confirm-footer {
display: flex;
gap: 12px;
padding-top: 20px;
}
.wk-weblogin-confirm-footer button {
flex: 1 1;
}
/* Mobile responsive */
@media (max-width: 767px) {
.wk-weblogin-confirm {
padding: 16px;
}
.wk-weblogin-confirm-title {
font-size: 20px;
}
}
.wk-webview-screen {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
}
.wk-webview-screen-header {
display: flex;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
background: #fff;
}
.wk-webview-screen-back {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 8px;
color: #1a1a1a;
transition: background 0.2s;
}
.wk-webview-screen-back:hover {
background: #f7f8fa;
}
.wk-webview-screen-back:active {
background: #e5e7eb;
}
.wk-webview-screen-title {
flex: 1 1;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 0 12px;
}
.wk-webview-screen-content {
flex: 1 1;
position: relative;
overflow: hidden;
}
.wk-webview-screen-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: #f7f8fa;
}
.wk-webview-screen-spinner {
width: 40px;
height: 40px;
border: 3px solid #e5e7eb;
border-top-color: #667eea;
border-radius: 50%;
animation: wk-webview-spin 0.8s linear infinite;
}
@keyframes wk-webview-spin {
to {
transform: rotate(360deg);
}
}
.wk-webview-screen-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 20px;
text-align: center;
}
.wk-webview-screen-error-icon {
font-size: 48px;
margin-bottom: 16px;
}
.wk-webview-screen-error-message {
font-size: 14px;
color: #666;
}
.wk-webview-screen-iframe {
width: 100%;
height: 100%;
border: none;
}
/* Mobile responsive */
@media (max-width: 767px) {
.wk-webview-screen-header {
padding: 8px 12px;
}
.wk-webview-screen-title {
font-size: 14px;
}
}
/* === GROUP NEW MODAL - MODERN DESIGN === */
.wk-main-modal-organizational-group-new .semi-modal-body-wrapper {
margin: 0;
}
.wk-main-modal-organizational-group-new .semi-modal-close {
display: none;
}
.wk-main-modal-organizational-group-new .semi-modal-body {
width: 100%;
height: 560px;
display: flex;
/* Animation removed for performance */
}
/* modalSlideIn animation removed */
.wk-main-modal-organizational-group-new .semi-modal-content {
border: none !important;
padding: 0px !important;
border-radius: 20px !important;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}
/* === LEFT PANEL === */
.wk-organizational-group-new-left {
width: 50%;
height: 100%;
background-color: var(--wk-color-secondary);
padding: 20px;
display: flex;
flex-direction: column;
border-right: 1px solid rgba(25, 151, 238, 0.1);
}
.wk-organizational-group-new-left .group-new-left-main {
flex: 1 1 auto;
overflow-y: auto;
}
/* Search Input */
.wk-organizational-group-new-left .group-new-left-search {
margin-bottom: 16px;
}
.wk-organizational-group-new-left .group-new-left-search .group-new-left-search-input {
border-radius: 12px !important;
border: 1px solid rgba(25, 151, 238, 0.15) !important;
transition: all 0.2s ease !important;
}
.wk-organizational-group-new-left .group-new-left-search .group-new-left-search-input.semi-input-wrapper-focus {
border: 1px solid var(--wk-color-theme) !important;
box-shadow: 0 0 0 3px rgba(25, 151, 238, 0.1) !important;
}
/* Friend Selection */
.group-new-left-main .friend-opt .organization-name {
display: flex;
align-items: center;
padding: 12px;
color: var(--semi-color-text-0);
cursor: pointer;
border-radius: 10px;
transition: all 0.2s ease;
margin-bottom: 4px;
}
.group-new-left-main .friend-opt .organization-name:hover {
background: linear-gradient(135deg, rgba(25, 151, 238, 0.08) 0%, rgba(25, 151, 238, 0.04) 100%);
transform: translateX(4px);
}
.group-new-left-main .friend-opt {
height: 100%;
display: flex;
flex-direction: column;
}
.friend-select-all-option {
padding: 12px;
border-bottom: 1px solid rgba(25, 151, 238, 0.1);
margin-bottom: 12px;
display: flex;
align-items: center;
border-radius: 10px;
background: rgba(25, 151, 238, 0.04);
}
.group-new-left-main .friend-opt .friend-opt-toolbar {
display: flex;
align-items: center;
padding: 8px 12px;
color: var(--semi-color-text-1);
font-size: 13px;
font-weight: 500;
}
.group-new-left-main .friend-opt .friend-opt-toolbar-count {
margin-left: 8px;
font-size: 12px;
color: var(--wk-color-theme);
background: rgba(25, 151, 238, 0.1);
padding: 2px 8px;
border-radius: 10px;
}
.group-new-left-main .friend-opt .friend-opt-main {
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
}
.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item {
display: flex;
align-items: center;
padding: 10px 12px;
font-size: 14px;
line-height: 20px;
color: var(--semi-color-text-0);
border-radius: 10px;
transition: all 0.2s ease;
margin-bottom: 4px;
}
.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item:hover {
background: linear-gradient(135deg, rgba(25, 151, 238, 0.08) 0%, rgba(25, 151, 238, 0.04) 100%);
transform: translateX(4px);
}
.friend-load-status {
text-align: center;
padding: 16px 0;
color: var(--semi-color-text-2);
font-size: 13px;
}
/* Organizational Tree */
.group-new-left-main .organizational-opt {
height: 100%;
display: flex;
flex-direction: column;
}
.group-new-left-main .organizational-opt-header {
height: 48px;
margin-bottom: 16px;
border-radius: 12px;
overflow: hidden;
}
.group-new-left-main .organizational-opt-header .wk-viewqueueheader {
background-color: var(--wk-color-item);
height: 100%;
border-radius: 12px;
}
.group-new-left-main .organizational-opt-main {
flex: 1 1 auto;
overflow-y: auto;
}
.organizational-tree {
width: 100%;
height: 100%;
}
.organizational-tree .semi-input-wrapper-focus {
border: 1px solid var(--wk-color-theme) !important;
box-shadow: 0 0 0 3px rgba(25, 151, 238, 0.1) !important;
}
.organizational-tree .semi-tree-option-list {
padding-top: 0;
flex: 1 1 auto;
overflow-y: auto;
}
.organizational-tree .semi-tree-option-list li.semi-tree-option {
box-sizing: border-box;
padding: 10px 12px;
border-radius: 10px;
margin-bottom: 4px;
transition: all 0.2s ease;
}
.organizational-tree .semi-tree-option-list li.semi-tree-option:hover {
background: linear-gradient(135deg, rgba(25, 151, 238, 0.08) 0%, rgba(25, 151, 238, 0.04) 100%);
}
.semi-checkbox:hover .semi-checkbox-inner-display {
background: var(--semi-color-fill-0);
box-shadow: inset 0 0 0 1px var(--wk-color-theme);
}
.semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
background: var(--wk-color-theme);
border-color: var(--wk-color-theme);
color: var(--semi-color-white);
}
.organizational-tree .semi-tree-option-list-block .department-icon {
color: var(--wk-color-theme);
}
.organizational-tree .semi-tree-option-list-block .semi-tree-option-selected .department-icon {
color: #fff;
}
.organizational-tree .semi-tree-option-list-block .semi-tree-option-selected {
background: linear-gradient(135deg, #0088cc 0%, #1997ee 100%) !important;
color: #fff;
border-radius: 10px;
}
.organizational-tree .semi-tree-option-list-block .semi-tree-option-selected:hover {
background: linear-gradient(135deg, #0099dd 0%, #2aa8ff 100%) !important;
color: #fff;
}
.organizational-tree .semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-expand-icon {
color: #fff;
}
/* === RIGHT PANEL === */
.wk-organizational-group-new-right {
width: 50%;
height: 100%;
background-color: var(--wk-color-item);
padding: 20px;
display: flex;
flex-direction: column;
}
.wk-organizational-group-new-right .organizational-group-new-right-title {
font-size: 16px;
font-weight: 600;
color: var(--wk-color-text);
margin-bottom: 4px;
}
.wk-organizational-group-new-right .organizational-group-new-right-body {
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
margin: 16px 0;
/* padding-right: 8px; */
}
.wk-organizational-group-new-right .organizational-group-new-right-body .opt-personnel-item {
padding: 12px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
line-height: 20px;
color: var(--semi-color-text-0);
background: rgba(25, 151, 238, 0.04);
border-radius: 12px;
margin-bottom: 8px;
transition: all 0.2s ease;
/* Animation removed for performance */
}
.wk-organizational-group-new-right .organizational-group-new-right-body .opt-personnel-item .user-info {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1 1;
}
.wk-organizational-group-new-right .organizational-group-new-right-body .opt-personnel-item .user-info span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 100%;
vertical-align: middle;
}
/* itemFadeIn animation removed */
.wk-organizational-group-new-right .organizational-group-new-right-body .opt-personnel-item:hover {
background: rgba(25, 151, 238, 0.08);
}
.wk-organizational-group-new-right .organizational-group-new-right-body .opt-personnel-item .user-info {
display: flex;
align-items: center;
gap: 12px;
}
.wk-organizational-group-new-right .organizational-group-new-right-body .opt-personnel-item .close-icon {
display: flex;
align-items: center;
}
.wk-organizational-group-new-right .organizational-group-new-right-body .opt-personnel-item .close-icon .semi-icon {
cursor: pointer;
width: 28px;
height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
color: var(--semi-color-text-2);
}
.wk-organizational-group-new-right .organizational-group-new-right-body .opt-personnel-item .close-icon .semi-icon:hover {
background-color: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
/* Footer Buttons */
.wk-organizational-group-new-right .organizational-group-new-right-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding-top: 16px;
border-top: 1px solid rgba(25, 151, 238, 0.1);
}
.wk-but-ok {
background: linear-gradient(135deg, #0088cc 0%, #1997ee 100%) !important;
border: none !important;
border-radius: 10px !important;
padding: 8px 24px !important;
font-weight: 500 !important;
transition: all 0.2s ease !important;
box-shadow: 0 2px 8px rgba(25, 151, 238, 0.3) !important;
}
.wk-but-ok:hover {
background: linear-gradient(135deg, #0099dd 0%, #2aa8ff 100%) !important;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(25, 151, 238, 0.4) !important;
}
.wk-but-ok:active {
transform: translateY(0);
}
/* Dark Mode */
body[theme-mode=dark] .wk-organizational-group-new-left {
background-color: var(--wk-color-secondary);
border-right-color: rgba(255, 255, 255, 0.08);
}
body[theme-mode=dark] .wk-organizational-group-new-right {
background-color: var(--wk-color-item);
}
body[theme-mode=dark] .wk-organizational-group-new-right .organizational-group-new-right-title {
color: white;
}
body[theme-mode=dark] .wk-organizational-group-new-right .organizational-group-new-right-body .opt-personnel-item {
background: rgba(255, 255, 255, 0.05);
}
body[theme-mode=dark] .wk-organizational-group-new-right .organizational-group-new-right-body .opt-personnel-item:hover {
background: rgba(255, 255, 255, 0.08);
}
body[theme-mode=dark] .friend-select-all-option {
background: rgba(255, 255, 255, 0.05);
border-bottom-color: rgba(255, 255, 255, 0.08);
}
body[theme-mode=dark] .wk-organizational-group-new-right .organizational-group-new-right-footer {
border-top-color: rgba(255, 255, 255, 0.08);
}
/* === MOBILE RESPONSIVE === */
@media screen and (max-width: 767px) {
/* Modal full screen on mobile */
.wk-main-modal-organizational-group-new .semi-modal-content {
border-radius: 16px 16px 0 0 !important;
max-height: 100% !important;
height: auto !important;
margin: 0 !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
}
.wk-main-modal-organizational-group-new .semi-modal-body {
/* height: 100% !important; */
flex-direction: column !important;
overflow: hidden;
}
/* Left panel - full width with scrollable friend list */
.wk-organizational-group-new-left {
width: 100% !important;
flex: 1 1 auto;
min-height: 0;
border-right: none !important;
padding: 16px !important;
overflow: hidden;
display: flex;
flex-direction: column;
order: 1;
}
.wk-organizational-group-new-left .group-new-left-main {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
/* Right panel - sticky footer at bottom */
.wk-organizational-group-new-right {
width: 100% !important;
flex: 0 0 auto;
padding: 16px !important;
background: var(--wk-color-item);
border-top: 1px solid rgba(25, 151, 238, 0.1);
order: 2;
height: auto !important;
}
/* Title shows selected count */
.wk-organizational-group-new-right .organizational-group-new-right-title {
font-size: 14px;
font-weight: 500;
margin-bottom: 12px;
text-align: center;
}
/* Show selected members as horizontal scroll */
.wk-organizational-group-new-right .organizational-group-new-right-body {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 8px;
margin: 0 0 12px 0;
padding-bottom: 8px;
max-height: 80px;
}
.wk-organizational-group-new-right .organizational-group-new-right-body .opt-personnel-item {
flex: 0 0 auto;
padding: 8px 12px;
margin-bottom: 0;
white-space: nowrap;
}
/* Footer buttons - full width */
.wk-organizational-group-new-right .organizational-group-new-right-footer {
padding-top: 0;
border-top: none;
display: flex;
gap: 12px;
}
.wk-organizational-group-new-right .organizational-group-new-right-footer .semi-space {
width: 100%;
display: flex;
gap: 12px;
}
.wk-organizational-group-new-right .organizational-group-new-right-footer .semi-button {
flex: 1 1;
min-width: 0;
width: auto !important;
height: 44px !important;
font-size: 16px !important;
border-radius: 10px !important;
}
/* Better touch targets for friend list items */
.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item {
padding: 14px 12px;
margin-bottom: 6px;
}
.friend-select-all-option {
padding: 14px 12px;
}
/* Search input larger on mobile */
.wk-organizational-group-new-left .group-new-left-search {
margin-bottom: 12px;
flex: 0 0 auto;
}
.wk-organizational-group-new-left .group-new-left-search .group-new-left-search-input {
height: 44px !important;
}
.wk-organizational-group-new-left .group-new-left-search .group-new-left-search-input .semi-input {
font-size: 16px !important; /* Prevent zoom on iOS */
background-color: transparent !important;
}
/* Buttons styling */
.wk-but-ok {
padding: 12px 16px !important;
font-size: 16px !important;
}
}
/* Small mobile adjustments */
@media screen and (max-width: 374px) {
.wk-organizational-group-new-left {
padding: 12px !important;
}
.wk-organizational-group-new-right {
padding: 12px !important;
}
.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item {
padding: 12px 10px;
}
}
.wk-blacklist {
}
.wk-blacklist-content ul li {
height: 80px;
width: 100%;
background-color: var(--wk-color-item);
display: flex;
align-items: center;
cursor: pointer;
}
.wk-blacklist-content-avatar {
margin-left: 15px;
}
.wk-blacklist-content-avatar img{
width: 50px;
height: 50px;
border-radius: 50%;
}
.wk-blacklist-content-title {
margin-left: 15px;
font-size: 15px;
font-weight: 500;
color: var(--wk-text-item);
}
.wk-contacts {
width: 100%;
height: 100%;
--wk-height-contacts-content-header: 50px;
border-right: var(--wk-line);
background-color: var(--wk-color-secondary);
}
.wk-contacts-content-header {
width: 100%;
padding: 8px 12px;
background-color: var(--wk-color-secondary);
}
.wk-contacts-content-header .wk-search-box {
background-color: var(--wk-color-item);
width: 100%;
border-radius: 8px;
transition: box-shadow 0.2s ease;
}
.wk-contacts-content-header .wk-search-box:focus-within {
box-shadow: 0 0 0 2px var(--wk-color-theme-alpha);
}
.wk-contacts-content {
width: 100%;
height: calc(100% - var(--wk-height-navheader));
overflow: auto;
}
.wk-contacts-content-contacts {
width: 100%;
padding: 0 8px 20px 8px;
}
/* Function buttons section (新朋友, 保存的群, 黑名单) - Horizontal layout */
.wk-contacts-content-fnc {
width: 100%;
padding: 8px 12px 16px 12px;
background-color: var(--wk-color-secondary);
display: flex;
justify-content: space-between;
gap: 0;
}
/* Each function button wrapper */
.wk-contacts-content-fnc>div {
flex: 1 1;
max-width: 100px;
}
/* Override IconListItem styles for horizontal layout */
.wk-contacts-content-fnc .wk-iconlistitem {
height: auto;
background-color: transparent !important;
border-bottom: none;
border-radius: 12px;
transition: background-color 0.15s ease;
}
.wk-contacts-content-fnc .wk-iconlistitem:hover {
background-color: var(--wk-color-hover);
}
.wk-contacts-content-fnc .wk-iconlistitem-content {
flex-direction: column;
/* padding: 12px 8px; */
text-align: center;
}
.wk-contacts-content-fnc .wk-iconlistitem-content-icon {
margin-bottom: 6px;
}
.wk-contacts-content-fnc .wk-iconlistitem-content-icon img {
width: 40px;
height: 40px;
}
.wk-contacts-content-fnc .wk-iconlistitem-content-title {
margin-left: 0;
font-size: 12px;
font-weight: 500;
color: var(--wk-color-text-secondary);
}
.wk-contacts-content-fnc .wk-iconlistitem-content-badge {
position: absolute;
top: 4px;
right: 20px;
}
body[theme-mode=dark] .wk-contacts-content-fnc .wk-iconlistitem-content-title {
color: rgba(255, 255, 255, 0.7);
}
/* Section container */
.wk-contacts-section {
margin-bottom: 8px;
}
/* Sticky section header with index letter */
.wk-contacts-section-header {
position: sticky;
top: 0;
z-index: 10;
padding: 8px 16px 6px 16px;
font-size: 13px;
font-weight: 600;
color: var(--wk-color-text-secondary);
background-color: var(--wk-color-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
body[theme-mode=dark] .wk-contacts-section-header {
color: rgba(255, 255, 255, 0.5);
background-color: var(--wk-color-secondary);
}
/* Contact list within section */
.wk-contacts-section-list {
background-color: var(--wk-color-item);
border-radius: 12px;
overflow: hidden;
/* Performance: skip rendering of off-screen items */
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}
/* Individual contact item */
.wk-contacts-section-item {
display: flex;
align-items: center;
padding: 12px 16px;
cursor: pointer;
transition: background-color 0.15s ease;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 1px solid var(--wk-color-border-light, rgba(0, 0, 0, 0.05));
}
.wk-contacts-section-item:last-child {
border-bottom: none;
}
body[theme-mode=dark] .wk-contacts-section-item {
background-color: var(--wk-color-item);
border-bottom-color: rgba(255, 255, 255, 0.05);
}
.wk-contacts-section-item:hover {
background-color: var(--wk-color-hover);
}
.wk-contacts-section-item-selected {
background-color: var(--wk-color-theme) !important;
color: white;
}
/* Remove old index column - now using sticky headers */
.wk-contacts-section-item-index {
display: none;
}
/* Avatar styling */
.wk-contacts-section-item-avatar {
flex-shrink: 0;
position: relative;
}
.wk-contacts-section-item-avatar img {
width: 44px;
height: 44px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
border: 2px solid rgba(0, 0, 0, 0.05);
border: 2px solid var(--wk-color-border-light, rgba(0, 0, 0, 0.05));
}
body[theme-mode=dark] .wk-contacts-section-item-avatar img {
border-color: rgba(255, 255, 255, 0.1);
}
/* Online status badge on avatar */
.wk-contacts-online-badge {
position: absolute;
bottom: 2px;
right: 2px;
width: 12px;
height: 12px;
background-color: #52c41a;
border: 2px solid var(--wk-color-item);
border-radius: 50%;
}
body[theme-mode=dark] .wk-contacts-online-badge {
border-color: var(--wk-color-item);
}
/* Info container for name and status */
.wk-contacts-section-item-info {
margin-left: 12px;
flex: 1 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
/* Name styling */
.wk-contacts-section-item-name {
font-size: 15px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--wk-color-text);
}
/* Name styling when inside info container (with status) */
.wk-contacts-section-item-info .wk-contacts-section-item-name {
margin-left: 0;
}
/* Name styling when standalone (without info container) */
.wk-contacts-section-item>.wk-contacts-section-item-name {
margin-left: 12px;
flex: 1 1;
min-width: 0;
}
body[theme-mode=dark] .wk-contacts-section-item-name {
color: white;
}
/* Online status text styling */
.wk-contacts-section-item-status {
font-size: 12px;
line-height: 1.2;
}
.wk-contacts-status-online {
color: #52c41a;
font-weight: 500;
}
.wk-contacts-status-recent {
color: var(--wk-color-text-secondary);
}
.wk-contacts-status-offline {
color: var(--wk-color-text-secondary);
opacity: 0.7;
}
body[theme-mode=dark] .wk-contacts-status-recent,
body[theme-mode=dark] .wk-contacts-status-offline {
color: rgba(255, 255, 255, 0.5);
}
/* Empty State Styles */
.wk-contacts-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
text-align: center;
}
.wk-contacts-empty-icon {
font-size: 56px;
margin-bottom: 20px;
opacity: 0.6;
}
.wk-contacts-empty-title {
font-size: 17px;
font-weight: 600;
color: var(--wk-color-text);
margin-bottom: 8px;
}
.wk-contacts-empty-desc {
font-size: 14px;
color: var(--wk-color-text-secondary);
max-width: 240px;
}
.wk-contacts-loading {
font-size: 14px;
color: var(--wk-color-text-secondary);
padding: 40px;
}
body[theme-mode=dark] .wk-contacts-empty-title {
color: white;
}
body[theme-mode=dark] .wk-contacts-empty-desc {
color: rgba(255, 255, 255, 0.6);
}
.wk-friendadd {
width: 100%;
height: 100%;
background-color: var(--wk-color-secondary);
}
.wk-friendadd-content {
padding: 16px;
height: calc(100% - var(--wk-height-viewqueueheader));
}
/* Search box */
.wk-friendadd .wk-search-box {
border-radius: 12px;
background-color: var(--wk-color-item);
border: none;
transition: box-shadow 0.2s ease;
}
.wk-friendadd .wk-search-box:focus-within {
box-shadow: 0 0 0 2px var(--wk-color-theme-alpha);
}
body[theme-mode="dark"] .wk-friendadd .wk-search-box {
background-color: var(--wk-color-item);
}
.wk-friendadd .wk-search-input {
max-width: 100%;
}
.wk-friendadd .wk-search-input input {
width: 100%;
font-size: 15px;
}
/* QR Code section */
.wk-friendadd-content-qrcode {
margin-top: 20px;
padding: 16px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--wk-color-item);
border-radius: 12px;
font-size: 14px;
color: var(--wk-color-text-secondary);
cursor: pointer;
transition: background-color 0.15s ease;
}
.wk-friendadd-content-qrcode:hover {
background-color: var(--wk-color-hover);
}
body[theme-mode="dark"] .wk-friendadd-content-qrcode {
color: rgba(255, 255, 255, 0.8);
}
.wk-friendadd-content-qrcode img {
margin-left: 8px;
width: 20px;
height: 20px;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.15s ease;
}
.wk-friendadd-content-qrcode:hover img {
opacity: 1;
}
/* Loading state */
.wk-friendadd .semi-spin-children {
width: 100%;
}
/* Hint text */
.wk-friendadd-hint {
margin-top: 16px;
text-align: center;
font-size: 13px;
color: var(--wk-color-text-secondary);
line-height: 1.6;
}
body[theme-mode="dark"] .wk-friendadd-hint {
color: rgba(255, 255, 255, 0.5);
}
.wk-groupsave {
width: 100%;
height: 100%;
border-right: var(--wk-line);
}
.wk-groupsave-content {
height: calc(100% - var( --wk-height-viewqueueheader));
width: 100%;
}
.wk-groupsave-content li {
height: 80px;
background-color: var(--wk-color-item);
display: flex;
align-items: center;
cursor: pointer;
}
.wk-groupsave-content-avatar {
margin-left: 15px;
}
.wk-groupsave-content-avatar img{
width: 50px;
height: 50px;
border-radius: 50%;
}
.wk-groupsave-content-title {
margin-left: 15px;
font-size: 15px;
font-weight: 500;
color: var(--wk-text-item);
}
.wk-newfriend {
width: 100%;
height: 100%;
border-right: var(--wk-line);
background-color: var(--wk-color-secondary);
}
.wk-newfriend-content {
height: calc(100% - var(--wk-height-viewqueueheader));
width: 100%;
overflow-y: auto;
padding: 20px 12px;
}
.wk-newfriend-content ul {
background-color: var(--wk-color-item);
border-radius: 12px;
overflow: hidden;
}
.wk-newfriend-content li {
display: flex;
width: 100%;
min-height: 72px;
padding: 12px 16px;
background-color: var(--wk-color-item);
align-items: center;
cursor: pointer;
transition: background-color 0.15s ease;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 1px solid var(--wk-color-border-light, rgba(0, 0, 0, 0.05));
box-sizing: border-box;
overflow: hidden;
}
.wk-newfriend-content li:last-child {
border-bottom: none;
}
.wk-newfriend-content li:hover {
background-color: var(--wk-color-hover);
}
body[theme-mode=dark] .wk-newfriend-content li {
border-bottom-color: rgba(255, 255, 255, 0.05);
}
.wk-newfriend-content-avatar {
flex-shrink: 0;
width: 48px;
height: 48px;
}
.wk-newfriend-content-avatar img {
width: 48px;
height: 48px;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
background-color: var(--wk-color-hover);
}
body[theme-mode=dark] .wk-newfriend-content-avatar img {
background-color: #444;
}
.wk-newfriend-content-title {
margin-left: 12px;
flex: 1 1;
min-width: 0;
max-width: calc(100% - 140px);
overflow: hidden;
}
.wk-newfriend-content-title-name {
font-size: 15px;
font-weight: 500;
color: var(--wk-color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
body[theme-mode=dark] .wk-newfriend-content-title-name {
color: white;
}
.wk-newfriend-content-title-remark {
font-size: 13px;
color: var(--wk-color-text-secondary);
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body[theme-mode=dark] .wk-newfriend-content-title-remark {
color: rgba(255, 255, 255, 0.5);
}
.wk-newfriend-content-action {
margin-left: 12px;
flex-shrink: 0;
}
.wk-newfriend-content-action .semi-button {
min-width: 64px;
}
/* Empty State */
.wk-newfriend-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
text-align: center;
}
.wk-newfriend-empty-icon {
font-size: 56px;
margin-bottom: 16px;
opacity: 0.6;
}
.wk-newfriend-empty-title {
font-size: 17px;
font-weight: 600;
color: var(--wk-color-text);
margin-bottom: 8px;
}
.wk-newfriend-empty-desc {
font-size: 14px;
color: var(--wk-color-text-secondary);
max-width: 240px;
}
body[theme-mode=dark] .wk-newfriend-empty-title {
color: white;
}
body[theme-mode=dark] .wk-newfriend-empty-desc {
color: rgba(255, 255, 255, 0.5);
}
/* Loading State */
.wk-newfriend-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
}
.wk-newfriend-loading-text {
font-size: 14px;
color: var(--wk-color-text-secondary);
margin-top: 12px;
}
/* Skeleton Loading */
.wk-newfriend-skeleton {
background-color: var(--wk-color-item);
border-radius: 12px;
overflow: hidden;
}
.wk-newfriend-skeleton-item {
display: flex;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 1px solid var(--wk-color-border-light, rgba(0, 0, 0, 0.05));
}
.wk-newfriend-skeleton-item:last-child {
border-bottom: none;
}
.wk-newfriend-skeleton-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
}
.wk-newfriend-skeleton-content {
flex: 1 1;
margin-left: 12px;
}
.wk-newfriend-skeleton-name {
width: 120px;
height: 16px;
border-radius: 4px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
margin-bottom: 8px;
}
.wk-newfriend-skeleton-remark {
width: 80px;
height: 12px;
border-radius: 4px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
}
.wk-newfriend-skeleton-button {
width: 64px;
height: 32px;
border-radius: 6px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
body[theme-mode=dark] .wk-newfriend-skeleton-avatar,
body[theme-mode=dark] .wk-newfriend-skeleton-name,
body[theme-mode=dark] .wk-newfriend-skeleton-remark,
body[theme-mode=dark] .wk-newfriend-skeleton-button {
background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s infinite;
}
#root {
width: 100%;
height: 100%;
}
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
/* App logo animation removed for performance */
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
:root {
--sider-width: 60px
}
.wk-main {
width: 100%;
height: 100%;
display: flex;
}
.wk-main-content {
width: calc(100% - 60px
);
width: calc(100% - var(--sider-width));
height: 100%;
background-color: white;
}
.wk-chat-empty {
background-image: url(../../static/media/start_chat.439c99541232c1fc369c.jpg);
}
body[theme-mode=dark] .wk-chat-empty {
background-image: url(../../static/media/start_chat_dark.e64bb567bca33977fc82.jpg);
}
/* QR Menu Options */
.qr-menu-options {
display: flex;
flex-direction: column;
gap: 4px;
}
.qr-menu-option {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: transparent;
border: none;
border-radius: 12px;
cursor: pointer;
text-align: left;
transition: background 0.2s;
position: relative;
}
.qr-menu-option:hover {
background: #f5f5f5;
}
.qr-menu-option:active {
background: #eee;
}
.qr-menu-option-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
border-radius: 12px;
color: white;
flex-shrink: 0;
}
.qr-menu-option-icon.scanner {
background: linear-gradient(135deg, #34C759 0%, #30D158 100%);
}
.qr-menu-option span {
font-size: 15px;
font-weight: 500;
color: #1a1a1a;
}
.qr-menu-option span:first-of-type {
flex: 1 1;
}
.qr-menu-option-desc {
font-size: 12px !important;
font-weight: 400 !important;
color: #8e8e93 !important;
position: absolute;
right: 16px;
}
/* Dark mode */
body[theme-mode=dark] .qr-menu-option:hover {
background: #2c2c2e;
}
body[theme-mode=dark] .qr-menu-option:active {
background: #3a3a3c;
}
body[theme-mode=dark] .qr-menu-option span {
color: #fff;
}
body[theme-mode=dark] .qr-menu-option-desc {
color: #8e8e93 !important;
}
.wk-main-sider {
width: var(--sider-width);
height: 100%;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
border-right: 1px solid #e2e8f0;
}
.wk-main-sider-content {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
position: relative;
}
.wk-main-sider-avatar {
margin-top: 10px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border: 2px solid #cbd5e1;
border-radius: 50%;
background: #ffffff;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.wk-main-sider-avatar:hover {
border-color: #3b82f6;
background: #f8fafc;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.wk-main-sider-avatar img {
width: 50px;
height: 50px;
border-radius: 40%;
}
.wk-main-sider-item {
width: 32px;
height: 32px;
margin-top: 30px;
cursor: pointer;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.wk-main-sider-item img {
width: 24px;
height: 24px;
}
.wk-main-sider-setting-box {
position: absolute;
bottom: 30px;
}
/* Hide avatar and settings button on mobile - use BottomNav instead */
@media screen and (max-width: 767px) {
.wk-main-sider-avatar {
display: none !important;
}
.wk-main-sider-setting-box {
display: none !important;
}
.wk-sider-setting-list {
display: none !important;
}
}
.wk-main-sider-setting {
width: 32px;
height: 32px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
}
.wk-sider-setting-position-re {
position: relative;
}
.wk-icon-bar {
width: 24px;
height: 2px;
margin: 5px 10px 0;
background-color: #475569;
border-radius: 1px;
transition: background-color 0.3s ease;
}
.wk-icon-bar:nth-child(2n-1) {
transform: rotateZ(0deg);
transition: background-color 0.2s, transform 0.2s;
}
.wk-main-sider-setting.collapsed .wk-icon-bar:nth-child(1) {
top: 7px;
transform: rotateZ(45deg);
}
.wk-main-sider-setting.collapsed .wk-icon-bar:nth-child(2) {
background-color: transparent;
}
.wk-main-sider-setting.collapsed .wk-icon-bar:nth-child(3) {
top: -7px;
transform: rotateZ(-45deg);
}
.wk-sider-setting-list {
position: absolute;
left: var(--sider-width);
bottom: 0;
z-index: 100;
z-index: var(--z-dropdown, 100);
width: 160px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
color: #334155;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
transform: scale(0);
transition: opacity .3s cubic-bezier(.2, 0, .2, 1), transform .3s cubic-bezier(.2, 0, .2, 1) !important;
transform-origin: left bottom;
}
.wk-sider-setting-list.open {
transform: scale(1);
}
.wk-sider-setting-list li {
height: 46px;
display: flex;
align-items: center;
padding-left: 4px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 8px;
margin: 4px 8px;
}
.wk-sider-setting-list li span {
color: inherit;
transition: color 0.3s ease;
margin-right: 8px;
}
.wk-sider-setting-list li:hover {
background: #f1f5f9;
transform: translateX(4px);
color: #3b82f6;
}
.wk-sider-setting-list li:hover span {
color: inherit;
}
.wk-main-sider-item-badge {
position: absolute;
top: -15px;
right: -5px;
}
.wk-main-sider-item-badge .semi-badge {
background-color: transparent;
}
.wk-versioncheckview-updateinfo {
font-weight: 500;
}
.wk-versioncheckview-updateinfo li {
margin-bottom: 10px;
}
.wk-versioncheckview-tip {
border-top: var(--wk-line);
}
.wk-versioncheckview-tip-title {
margin-top: 15px;
text-align: center;
font-size: 18px;
font-weight: 500;
margin-bottom: 15px;
}
.wk-versioncheckview-tip-content {
margin-bottom: 40px;
}
.wk-versioncheckview-tip-content li {
margin-bottom: 10px;
}
.wk-main-sider-setting-badge {
position: absolute;
right: 5px;
top: -10px;
}
.wk-main-sider-modal .semi-modal-content {
/* border: none !important; */
/* padding: 0px !important; */
max-height: none !important;
overflow: visible !important;
}
.wk-main-sider-modal .semi-modal-close {
display: none;
}
.wk-main-sider-modal .semi-modal-body-wrapper {
margin: 0px;
}
/* .wk-base-modal-userinfo .semi-modal-body{
height: 500px;
} */
/* MeInfo Modal Container - Desktop */
.wk-main-sider-meinfo .semi-modal-content {
width: 680px !important;
max-width: 95vw;
box-shadow:
0 30px 100px rgba(0, 0, 0, 0.4),
0 15px 50px rgba(0, 0, 0, 0.3),
0 5px 20px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}
.wk-main-sider-meinfo .semi-modal-body {
height: 560px;
min-height: 480px;
max-height: 85vh;
padding: 0 !important;
overflow: hidden !important;
}
/* Single scrollbar fix */
.wk-main-sider-meinfo .semi-modal-body::-webkit-scrollbar {
width: 6px;
}
.wk-main-sider-meinfo .semi-modal-body::-webkit-scrollbar-track {
background: transparent;
}
.wk-main-sider-meinfo .semi-modal-body::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.wk-main-sider-meinfo .semi-modal-body::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.2);
}
body[theme-mode=dark] .wk-main-sider-meinfo .semi-modal-body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
}
body[theme-mode=dark] .wk-main-sider-meinfo .semi-modal-body::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.25);
}
/* Hide MeInfo modal on mobile - shown in sidebar instead */
@media screen and (max-width: 767px) {
.wk-main-sider-meinfo {
display: none !important;
}
}
.mobile-settings {
width: 100%;
height: 100%;
background-color: #f5f5f5;
background-color: var(--wk-surface-secondary, #f5f5f5);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.mobile-settings-header {
padding: 20px 16px 16px;
background-color: #fff;
background-color: var(--wk-surface-primary, #fff);
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid var(--wk-border-light, #e5e5e5);
}
.mobile-settings-title {
margin: 0;
font-size: 24px;
font-weight: 600;
color: #1a1a1a;
color: var(--wk-text-primary, #1a1a1a);
}
.mobile-settings-list {
margin-top: 12px;
background-color: #fff;
background-color: var(--wk-surface-primary, #fff);
border-radius: 12px;
margin-left: 16px;
margin-right: 16px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.mobile-settings-item {
display: flex;
align-items: center;
padding: 16px;
cursor: pointer;
transition: background-color 0.15s ease;
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid var(--wk-border-light, #e5e5e5);
}
.mobile-settings-item:last-child {
border-bottom: none;
}
.mobile-settings-item:active {
background-color: #f5f5f5;
background-color: var(--wk-surface-secondary, #f5f5f5);
}
.mobile-settings-item-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background-color: #f5f5f5;
background-color: var(--wk-surface-secondary, #f5f5f5);
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0;
}
.mobile-settings-item-icon span {
font-size: 20px;
}
.mobile-settings-item-content {
flex: 1 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.mobile-settings-item-label {
font-size: 16px;
font-weight: 500;
color: #1a1a1a;
color: var(--wk-text-primary, #1a1a1a);
}
.mobile-settings-item-info {
font-size: 13px;
color: #999;
color: var(--wk-text-tertiary, #999);
display: flex;
align-items: center;
}
.mobile-settings-item-status {
font-size: 13px;
color: #3b82f6;
color: var(--wk-color-primary, #3b82f6);
}
.mobile-settings-item-arrow {
font-size: 20px;
color: #ccc;
color: var(--wk-text-tertiary, #ccc);
margin-left: 8px;
}
.mobile-settings-item-danger .mobile-settings-item-label {
color: #ef4444;
color: var(--wk-color-danger, #ef4444);
}
.mobile-settings-item-danger .mobile-settings-item-icon {
background-color: rgba(239, 68, 68, 0.1);
}
/* Modern Login/Register Page Styles */
/* Counter styles that can't be handled by Tailwind */
.counter-increment-item {
counter-increment: item;
}
.phone-container .semi-select {
width: 10rem !important;
height: 48px !important;
background: rgba(249, 250, 251, 0.8) !important;
border: none !important;
border-radius: 16px !important;
margin-right: 12px !important;
}
.phone-container .semi-select:hover {
background: rgba(255, 255, 255, 0.9) !important;
border-color: transparent !important;
}
.phone-container .semi-select.semi-select-focus {
background: rgba(255, 255, 255, 0.9) !important;
box-shadow: 0 0 0 2px rgba(0, 100, 250, 0.2) !important;
border-color: transparent !important;
}
.phone-container .semi-select .semi-select-selection {
height: 48px !important;
line-height: 48px !important;
padding: 0 16px !important;
border-radius: 16px !important;
}
.phone-container .semi-select .semi-select-selection-placeholder {
color: #9ca3af !important;
font-size: 15px !important;
line-height: 48px !important;
}
.phone-container .semi-select .semi-select-selection-text {
color: #1f2937 !important;
font-size: 15px !important;
line-height: 48px !important;
font-weight: 500 !important;
}
.semi-select-dropdown {
border-radius: 16px !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
border: 1px solid rgba(229, 231, 235, 0.5) !important;
overflow: hidden !important;
}
.semi-select-option {
border-radius: 8px !important;
margin: 2px 4px !important;
transition: all 0.15s ease !important;
}
.semi-select-option-selected {
background: rgba(0, 100, 250, 0.1) !important;
font-weight: 500 !important;
}
.semi-select-option:hover,
.semi-select-option-focused {
background: rgba(0, 100, 250, 0.1) !important;
}
/* Input Icon Positioning - Critical Fix */
.ant-input {
position: relative !important;
z-index: 1 !important;
}
.input-icon {
position: absolute !important;
top: 50% !important;
left: 16px !important;
transform: translateY(-50%) !important;
z-index: 10 !important;
pointer-events: none !important;
color: #9ca3af !important;
}
/* Ensure input text doesn't overlap with icons */
.ant-input.pl-12 {
padding-left: 48px !important;
}
/* Fix for Form.Item wrapper */
.ant-form-item-control-input {
position: relative !important;
}
.ant-form-item-control-input-content {
position: relative !important;
}
/* Icon container positioning */
.icon-container {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
padding-left: 16px !important;
z-index: 10 !important;
pointer-events: none !important;
}
.icon-container svg {
width: 20px !important;
height: 20px !important;
color: #9ca3af !important;
}
:where(.css-dev-only-do-not-override-1v28nim).ant-form-item {
margin-bottom: 0;
}
/* Custom animations - decorative animations removed for performance */
/* float, fadeInUp, pulse-glow animations removed */
/* Glassmorphism effect */
.glass-effect {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
/* Custom focus styles for inputs */
.custom-input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 100, 250, 0.1);
border-color: rgb(0, 100, 250);
}
/* Smooth transitions for all interactive elements */
.transition-smooth {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Custom button hover effects */
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
/* QR Code container - animation removed for performance */
/* Form validation error styling */
.has-error .custom-input {
border-color: rgb(239, 68, 68);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
/* Loading spinner customization */
.loading-spinner {
border-top-color: rgb(0, 100, 250);
animation: spin 1s linear infinite;
}
.phone-container {
display: flex;
position: relative;
}
/* Removed old country-select styles - now using Semi-UI Select */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* heartbeat animations removed for performance */
/* Success state styling */
.success-state {
color: rgb(34, 197, 94);
border-color: rgb(34, 197, 94);
}
/* Country Select Custom Styling */
.country-select-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-radius: 8px;
transition: all 0.15s ease;
}
.country-select-item:hover {
background: rgba(0, 100, 250, 0.1);
transform: translateX(2px);
}
.country-flag {
font-size: 20px;
margin-right: 8px;
}
.country-info {
display: flex;
flex-direction: column;
flex: 1 1;
}
.country-name {
font-size: 14px;
font-weight: 500;
color: #1f2937;
line-height: 1.2;
}
.country-code-small {
font-size: 12px;
color: #6b7280;
line-height: 1.2;
}
.country-code-main {
font-size: 14px;
font-weight: 600;
color: #0064fa;
}
.terms-checkbox {
display: flex;
align-items: center;
justify-content: start;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: #1f2937;
line-height: 1.2;
margin: 0 12px;
}
/* Semi-UI Select Search Input in Dropdown */
.semi-select-dropdown .semi-input {
padding: 8px 12px !important;
margin: 8px !important;
background: #f9fafb !important;
border: 1px solid #e5e7eb !important;
border-radius: 8px !important;
height: auto !important;
}
/* Responsive adjustments */
@media (max-width: 640px) {
.mobile-padding {
padding: 0.75rem;
}
.mobile-text {
font-size: 1.25rem;
}
/* Phone container - stack vertically on mobile */
.phone-container {
flex-direction: column;
gap: 10px;
}
.phone-container .semi-select {
width: 100% !important;
height: 42px !important;
margin-right: 0 !important;
border-radius: 12px !important;
}
.phone-container .semi-select .semi-select-selection {
height: 42px !important;
line-height: 42px !important;
padding: 0 12px !important;
border-radius: 12px !important;
}
.phone-container .semi-select .semi-select-selection-placeholder,
.phone-container .semi-select .semi-select-selection-text {
line-height: 42px !important;
font-size: 14px !important;
}
/* Input fields - smaller height */
.phone-container .relative.flex-1 {
flex: none;
width: 100%;
}
.phone-container input,
.relative input {
/* height: 42px !important; */
font-size: 16px !important;
border-radius: 12px !important;
/* padding-left: 40px !important; */
}
/* Icon positioning for smaller inputs */
.phone-container .absolute.inset-y-0.left-0.pl-4,
.relative .absolute.inset-y-0.left-0.pl-4 {
padding-left: 12px !important;
}
.phone-container .absolute svg,
.relative .absolute svg {
width: 18px !important;
height: 18px !important;
}
/* Terms checkbox - proper wrapping on mobile */
.terms-checkbox {
flex-wrap: wrap;
line-height: 1.5;
margin: 0 4px;
gap: 3px;
font-size: 12px;
}
.terms-checkbox a {
white-space: nowrap;
}
.terms-checkbox .semi-checkbox {
margin-right: 4px;
}
/* Login button - smaller */
.space-y-4 > button,
button.w-full.h-12 {
height: 44px !important;
border-radius: 12px !important;
font-size: 15px !important;
}
/* Spacing adjustments */
.space-y-4 {
gap: 12px;
}
/* Logo smaller on mobile */
.inline-flex.items-center.justify-center.w-20.h-20 {
width: 64px !important;
height: 64px !important;
}
/* Header text smaller */
.text-2xl {
font-size: 1.375rem !important;
}
.text-sm.text-gray-600 {
font-size: 13px !important;
}
/* Tab buttons smaller */
.flex.bg-gray-100.rounded-2xl.p-1 {
padding: 4px !important;
border-radius: 12px !important;
}
.flex.bg-gray-100.rounded-2xl.p-1 button {
padding: 8px 12px !important;
font-size: 13px !important;
border-radius: 10px !important;
}
/* Container padding */
.relative.bg-white\/80.backdrop-blur-lg.rounded-3xl {
padding: 20px !important;
border-radius: 20px !important;
}
/* Margin adjustments */
.text-center.mb-5 {
margin-bottom: 16px !important;
}
.mb-3 {
margin-bottom: 10px !important;
}
.mt-5 {
margin-top: 16px !important;
}
/* QR code instructions - single column on mobile */
.grid.grid-cols-2 {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
/* QR code container smaller */
.relative.mx-auto.w-48.h-48 {
width: 160px !important;
height: 160px !important;
}
}
/* Dark mode support (if needed) */
@media (prefers-color-scheme: dark) {
.dark-mode {
background: rgba(17, 24, 39, 0.95);
color: rgb(243, 244, 246);
}
}
/* Toast z-index fix - ensure Toast appears above Modal mask */
/* Semi-UI Modal mask has z-index around 1000-1060 */
.semi-toast-container {
z-index: 9999 !important;
}
.semi-toast {
z-index: 9999 !important;
}
/* Toast wrapper z-index fix for dynamic classes */
[class*="toast-wrapper"] {
z-index: 9999 !important;
}
/* Semi-UI portal z-index fix */
.semi-portal-inner {
z-index: 9999 !important;
}
.wk-visitorheader{
width: 100%;
height: 80px;
}
.wk-visitorheader-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.wk-visitorheader-content-avatar {
margin-left: 15px;
}
.wk-visitorheader-content-avatar img{
width: 50px;
height: 50px;
border-radius: 50%;
}
.wk-visitorheader-content-info {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 1;
padding: 0px 15px;
}
.wk-visitorheader-content-props {
font-size: 12px;
color: gray;
}
.wk-message-file {
width: 300px;
height: 68px;
clear: both;
cursor: pointer;
}
.wk-message-base-bubble-box.fileBox .fileHeader {
height: 100%;
width: 78px;
justify-content: center;
align-items: center;
display: flex;
float: left;
}
.wk-message-base-recv .wk-message-base-bubble-box.fileBox .fileHeader {
float: right;
}
.wk-message-base-bubble-box.fileBox .fileContent {
position: relative;
float: left;
flex: 1 1;
width: calc(100% - 78px);
box-sizing: border-box;
height: 100%;
}
.wk-message-base-bubble-box.fileBox .fileContent .name {
height: 16px;
padding: 0 10px;
line-height: 16px;
color: var(--wk-text-item);
font-size: 14px;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
letter-spacing: .4px;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wk-message-base-bubble-box.fileBox .fileContent .size {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
font-size: 12px;
color: #8f959e;
margin-bottom: 2px;
}
.wk-message-base-send .wk-message-base-bubble-box.fileBox .fileContent .name {
color: rgb(255, 255, 255);
}
.wk-message-base-send .wk-message-base-bubble-box.fileBox .fileContent .size {
color: rgb(255, 255, 255, 0.5);
}
.wk-message-file-video {
width: 320px;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
}
.wk-message-file-video-player {
width: 100%;
border-radius: 8px;
background-color: #000;
display: block;
}
.wk-message-file-video-meta .name {
font-size: 14px;
font-weight: 600;
color: var(--wk-text-primary);
word-break: break-word;
}
.wk-message-file-video-meta .meta {
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
color: var(--wk-text-muted);
}
.wk-message-file-video-meta .download {
color: #1e96d5;
color: var(--wk-color-theme, #1e96d5);
text-decoration: none;
}
.wk-message-file-video-meta .download:hover {
text-decoration: underline;
}
.wk-message-base-send .wk-message-file-video-meta .name {
color: #fff;
}
.wk-message-base-send .wk-message-file-video-meta .meta {
color: rgba(255, 255, 255, 0.7);
}
.wk-message-base-send .wk-message-file-video-meta .download {
color: #fff;
opacity: 0.9;
}
.wk-filetoolbar {}
.wk-filetoolbar-content {
padding: 4px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all 250ms ease-in-out;
&>div {
display: flex;
align-items: center;
}
}
.wk-filetoolbar-content:hover {
background-color: var(--wk-color-secondary-2);
transition: all 250ms ease-in-out;
}
.wk-filetoolbar-content-icon img {
width: 18px;
height: 18px;
}
.wk-filetoolbar-content-icon {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.wk-imagedialog {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-app-region: no-drag;
z-index: 100;
}
.wk-imagedialog-mask {
position: absolute;
background-color: rgba(0, 0, 0, .3);
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.wk-imagedialog-content {
width: 420px;
position: relative;
padding: 28px;
background: var(--wk-color-item);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
box-sizing: border-box;
max-height: 580px;
}
.wk-imagedialog-content-close {
position: absolute;
width: 20px;
height: 20px;
top: 28px;
right: 28px;
font-size: 18px;
text-align: center;
border-radius: 50%;
cursor: pointer;
z-index: 1;
line-height: 18px;
}
.wk-imagedialog-content-close svg {
fill: var(--wk-text-item);
}
.wk-imagedialog-content-title {
font-size: 16px;
font-weight: 600;
}
.wk-imagedialog-content-body {
width: 100%;
font-size: 14px;
text-align: center;
margin-top: 28px;
}
.wk-imagedialog-content-preview {
box-sizing: border-box;
text-align: left;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
border-radius: 4px 4px 4px 4px;
}
.wk-imagedialog-content-previewImg {
width: auto;
height: auto;
max-width: 240px;
max-height: 240px;
background-size: auto 100%;
background-position: 50%;
margin: 0 auto 16px;
}
.wk-imagedialog-content-preview-file {
display: flex;
align-items: center;
width: 100%;
height: 100%;
}
.wk-imagedialog-content-preview--filecontent {
flex: 1 1;
width: 100%;
height: 78px;
padding: 12px 0px 12px 20px;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
background-color: rgb(247, 247, 247);
}
body[theme-mode=dark] .wk-imagedialog-content-preview--filecontent {
background-color: var(--wk-color-secondary);
}
.wk-imagedialog-content-preview-file-icon {
height: 78px;
width: 78px;
display: flex;
align-items: center;
border-radius: 0px 0px 0px 10px;
}
.wk-imagedialog-content-preview-file-thumbnail {
width: 48px;
height: 48px;
margin: auto 16px auto auto;
}
.wk-imagedialog-content-preview--filecontent-name {
color: var(--wk-text-item);
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
line-height: normal;
}
.wk-imagedialog-content-preview--filecontent-size {
font-size: 12px;
color: var(--wk-color-font-tip);
}
.wk-imagedialog-footer {
margin-top: 28px;
justify-content: flex-end;
display: flex;
}
.wk-imagedialog-footer button {
background-color: #fff;
border: 1px solid #dee0e3;
color: #1f2329;
border-radius: 4px;
height: 32px;
min-width: 100px;
padding: 0 16px;
cursor: pointer;
}
.wk-imagedialog-footer-okbtn {
margin-left: 16px;
color: white !important;
border: none !important;
}
.wk-message-callsystem {
display: flex;
}
.wk-callsystem-content {
margin-left: 5px;
margin-right: 5px;
opacity: 0.9;
}
.wk-callsystem-icon {
opacity: 0.5;
}