/*css/app.css*/
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }   [hidden] { display: none !important; }   @media (hover: none) { .pin-bar-row-note-edit, .pin-bar-row-remove, .home-member-drag { opacity: 1 !important; }   .pin-bar-row { min-height: 44px; } .pin-bar-row-note-edit, .pin-bar-row-remove { flex: 0 0 40px !important; width: 40px !important; height: 44px !important; margin-left: 0 !important; margin-right: 0 !important; }   .pin-bar-row-due-ghost { display: none !important; }   .home-discovery-pin { opacity: 0.45 !important; } .home-discovery-pin.is-pinned { opacity: 1 !important; } .theme-table-fav-btn, .cabinet-pdf-tab-close { visibility: visible !important; }   .theme-table-fav-btn:not(.is-on) { opacity: 0.45 !important; }   .toast-compact-cta { min-height: 44px; padding-left: 12px; padding-right: 12px; }   .ai-chat-row-btn, .cc-copy-btn, .sc-copy, .settings-item-actions { opacity: 1 !important; }   .att-actions { opacity: 1 !important; visibility: visible !important; position: static !important; transform: none !important; flex: 0 0 auto; box-shadow: none !important; } .toast-incoming .toast-in-hover { visibility: visible !important; } .sp-pdf-card-hover, .splitter-collapse-btn { display: flex !important; }   .sp-pdf-card-hover { position: static !important; justify-content: center; gap: 8px; margin: 4px 0 2px; } .sp-pdf-card-hover .sp-pdf-card-btn { width: 44px; height: 44px; border-radius: 22px; }   .theme-fav-btn { display: inline-flex !important; } .theme-fav-btn:not(.on) { opacity: 0.45; }   .pin-bar-row-grip { opacity: 0.55 !important; } .pin-bar-row.is-dragging .pin-bar-row-grip { opacity: 1 !important; }   .quote-hover-bar:not(.is-hidden) { opacity: 1 !important; visibility: visible !important; } .quote-hover-bar .btn-quote-action.hover-only { display: none !important; } .quote-hover-bar .btn-quote-action.hover-only.btn-quote-more { display: inline-flex !important; opacity: 0.8; visibility: visible; }   .home-triage-kbd, .home-triage-kbd-on { display: none !important; }   .home-mailroom-tip { display: block !important; position: static !important; transform: none !important; width: auto !important; max-width: none !important; margin-top: 2px; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center !important; } .home-mailroom-tip-body, .home-mailroom-tip-foot { display: none !important; } .home-mailroom-tip-title { font-size: 11px; white-space: nowrap; }   .tr-prev-tip { display: flex !important; position: static !important; flex-direction: row !important; gap: 4px; max-width: 100%; margin: -10px 0 12px; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .tr-prev-tip > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; } .tr-prev-tip > span:nth-child(3) { display: none;   }   .cab-upper-lastupdated { visibility: visible !important; }   .home-space-avatar-hover { display: none !important; } } :root {     --color-primary: #22BB80;   --color-menu-bg-top: #FCFCFE; --color-menu-bg-bottom: #F5F5FA; --color-primary-dark: #1a9e6c; --color-primary-light: #3dd4a0; --color-primary-muted: #7ee8c0; --color-primary-surface: #e6f9f0; --color-primary-badge: #0F7A56;   --color-primary-on-surface: #147A52;   --color-primary-surface-light:#F0FBF6;   --color-primary-surface-muted:#D4F2E4;     --color-mention-to-bg: #E8F5E9; --color-mention-to-border: rgba(29, 155, 108, 0.376); --color-mention-cc-bg: #FFF4C8; --color-mention-cc-border: rgba(180, 150, 0, 0.376);   --color-bulk-selected-surface:#DEE7F2;   --color-bubble-inhouse-theirs:#F4FFEF;   --color-bubble-inhouse-mine: #D0FFE0;   --color-bubble-email-theirs: #E9ECEF;   --color-bubble-email-mine: #F8F9FA;   --color-bubble-slack: #F3E5F5;   --color-bubble-bulletin: #E8EAF6;     --color-text-on-primary: #FFFFFF;   --color-text-on-primary-muted: rgba(255, 255, 255, 0.73);   --color-bg-base: #ffffff; --color-bg-elevated: #fafbfc; --color-bg-sunken: #f4f5f7; --color-bg-deep: #f4f5f7; --color-border-default: #e8e8ef; --color-border-muted: #c4c4d0; --color-text-primary: #1a1a2e;   --color-text-primary-hover: #1F2937; --color-text-primary-pressed: #0F1419; --color-tab-close-pressed: #D32F2F;     --scrollbar-thumb: #C0C0C0; --scrollbar-thumb-hover: #999999; --color-text-secondary: #4a4a5e;   --color-text-tertiary: #6A6A7E; --color-text-disabled: #a8a8b8;   --color-sidebar-tool-label: #6A6A7E;   --color-avatar-palette-indigo: #6366F1; --color-avatar-palette-pink: #EC4899; --color-avatar-palette-amber: #F59E0B; --color-avatar-palette-emerald: #10B981; --color-avatar-palette-blue: #3B82F6; --color-avatar-palette-violet: #8B5CF6; --color-avatar-palette-red: #EF4444; --color-avatar-palette-teal: #14B8A6; --color-avatar-palette-orange: #F97316; --color-avatar-palette-cyan: #06B6D4;   --color-branch-purple: #7C3AED;   --color-error: #EF4444; --color-error-dark: #DC2626;   --color-error-surface: #fde8e8; --color-warning: #f59e0b; --color-warning-dark: #D97706;   --color-warning-badge: #B45309;   --color-warning-surface: #fff8e6; --color-badge-default-bg: #F3F4F6;     --color-warning-on-surface: #8A6200;   --color-error-on-surface: #B42318;   --color-aging-1-surface: #fffde7; --color-aging-2-surface: #fff3e0; --color-aging-2-text: #ea580c; --color-aging-3-text: #dc2626;   --color-super-dark-green: #1E8C4F;   --color-green: #DBFAEB; --color-no-response: #E67E22;   --color-success: #10b981; --color-success-dark: #059669;   --color-success-surface: #e6f9f0; --color-info: #4a73d9; --color-info-surface: #e8f0fd;   --color-slack-brand: #4a154b;   --color-status-banner-accent-error: #EF4444; --color-status-banner-accent-warning: #E8A000; --color-status-banner-accent-info: #4A73D9; --color-status-banner-icon-bg-error: #FDECEC; --color-status-banner-icon-bg-warning: #FFF6E0; --color-status-banner-icon-bg-info: #EAF0FC; --color-status-banner-icon-fg-error: #B91C1C; --color-status-banner-icon-fg-warning: #8A6200; --color-status-banner-icon-fg-info: #2F51A8;   --fb-band-mid: #1FA98C; --fb-band-logo-blue: #4A7FC1; --fb-band-info-mid: #4A8FD0; --fb-band-warn-mid: #E8A84C; --fb-dark-card-bg: #212B30; --fb-dark-card-label: #7FD6AE; --fb-dark-card-value: #FFFFFF; --fb-dark-card-value-muted: #9AA8AD; --fb-dark-card-divider: #354349; --fb-dark-card-link: #8FC4F5; --fb-dark-card-input-bg: #1A2226; --fb-dark-card-input-border: #4A5B62;   --connect-brand2: #3FD599; --connect-hero-bg: linear-gradient(135deg, #0A2A1E, #0E3A29); --connect-hero-fg: #F2FBF7; --connect-hero-muted: #A9D7C3; --connect-glyph-bg: linear-gradient(135deg, var(--color-primary), var(--connect-brand2)); --connect-done-bg: #E6F7F0; --connect-done-fg: #15996A;   --color-feature-message: #2563eb; --color-feature-file: #059669; --color-feature-timelog: #0D9488;   --color-feature-task: #0891b2; --color-feature-contact: #6366f1; --color-feature-pin: #B03A5B;   --color-feature-pin-surface: #FCEEF2;   --color-feature-phone: #7C3AED;     --color-ai-assist-accent: #6A1B9A;   --color-ai-sparkle: #FDC500;   --color-wakaba-yellow: #F2D53C;   --color-wakaba-green: #2FA84F;   --color-ai-assist-surface: #F3E5F5;   --color-ai-assist-border: #CE93D8;     --color-folder-front: #FCD879; --color-folder-back: #E2A12E; --color-folder-inbox-front: #8FBEF0; --color-folder-inbox-back: #3D78C0; --color-folder-local-front: #7FD8B0; --color-folder-local-back: #2FA679; --color-folder-message-front: #B79CEC; --color-folder-message-back: #7C5CD0;   --color-feature-tracking: #55607A;   --color-feature-tracking-surface: #EEF0F5;   --color-track-cta: #3E475C;   --color-feature-tracking-dark: #3E475C;     --color-label-paper: #FFFFFF;   --color-label-ink: #1A1A2E;   --color-label-cut-line: #B9B9C6;   --color-feature-contact-surface: #EEF2FF;   --color-feature-message-surface: #EFF6FF;     --color-google-brand: #1A73E8; --color-google-brand-surface: #EAF1FC;   --color-feature-pin-dark: #8E2C48;     --color-feature-tracking-deep: #2E3546;   --color-feature-message-dark: #1B4BC4;   --color-feature-message-light: #5B8BF0;   --color-feature-tracking-accent: #EC6A5E;   --color-feature-task-surface: #ECFEFF;     --color-feature-task-dark: #0D7A96;     --color-feature-task-deep: #0A6578;   --color-feature-file-surface: #ECFDF5;   --color-feature-timelog-surface: #F0FDFA;     --color-feature-timelog-dark: #0F766E;   --color-feature-timelog-deep: #115E59;   --color-overlay-white-40: #FFFFFF66;     --color-overlay-white-14: #FFFFFF24;     --color-tooltip-bg: #000000E6;   --color-tooltip-fg: #F0F0F0;   --shadow-tooltip: 0 4px 16px rgba(0, 0, 0, 0.35); --color-overlay-white-22: #FFFFFF38;   --color-overlay-white-20: #FFFFFF33;   --color-overlay-white-30: #FFFFFF4D;     --color-overlay-white-15: #FFFFFF26;   --color-overlay-white-25: #FFFFFF40;   --color-overlay-white-70: #FFFFFFB3;   --color-reply-context-chip-surface: rgba(255, 255, 255, 0.7);     --color-overlay-head-green-mid: #1FAA73;   --color-overlay-head-green-end: #18996A;   --color-overlay-head-blue-start: #3B82F6;   --color-overlay-head-blue-mid: #2B6CD9;   --color-overlay-head-blue-end: #1E5ABF;   --color-overlay-black-08: #00000015;     --color-overlay-black-50: #00000080;     --color-overlay-black-60: #00000060; --color-white: #FFFFFF;   --color-overlay-black-15: #00000026;     --color-overlay-black-30: #0000004D;     --color-overlay-black-70: #000000B3;   --color-overlay-white-80: #FFFFFFCC;   --color-address-from: #5599DD;     --color-unrecorded: #E8A84C;   --color-unrecorded-dark: #C87A30;   --color-unrecorded-subtle: #D4A060;   --color-unrecorded-surface: rgba(255, 243, 224, .094);   --color-unrecorded-stripe: rgba(232, 168, 76, .333);     --color-mail-receive: #0E9AA8; --color-mail-receive-dark: #0B7A85; --color-mail-receive-surface: #E4F5F6; --color-ai-primary: #667eea; --color-ai-secondary: #764ba2;   --color-plan-lite: #5F9EA0; --color-plan-single: #00BFFF; --color-plan-team: #FF8C00; --color-plan-business: #9ACD32; --color-plan-enterprise: #9370DB;   --color-plan-header-text-secondary: rgba(255,255,255,.71); --color-plan-header-close-bg: rgba(255,255,255,.149); --color-plan-header-close-bg-hover: rgba(255,255,255,.231); --color-plan-header-close-fg: rgba(255,255,255,.8);   --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.12); --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);   --shadow-overlay-card: 0 10px 40px rgba(0,0,0,0.25);     --font-3xs: 9px; --font-2xs: 10px; --font-xs: 12px; --font-sm: 13px; --font-base: 14px; --font-md: 15px; --font-lg: 17px; --font-xl: 20px; --font-2xl: 24px; --font-3xl: 32px;   --font-mono: 'Cascadia Mono', Consolas, 'Yu Gothic UI', ui-monospace, monospace;   --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.8;   --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;   --radius-none: 0px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;   --radius-avatar: var(--radius-sm);   --duration-instant: 50ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   --sidebar-width: 220px; --sidebar-width-expanded: 220px; --topbar-height: 40px;   --space-tabs-height: 48px; --space-tabs-collapsed-height: 31px; --folder-width: 200px;   --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-modal: 400; --z-popover: 500; --z-notification: 600; --z-tooltip: 700; --z-toast: 900; --z-skip: 1000;   --icon-xs: 12px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px;     } html, body { height: 100%; font-family: -apple-system, 'Segoe UI Variable', 'Segoe UI', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif; font-size: var(--font-base); color: var(--color-text-primary); background: var(--color-bg-sunken); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.01em; line-height: 1.6; }   p, [class$="-sub"], [class*="-sub "], [class$="-hint"], [class*="-hint "], [class$="-desc"], [class*="-desc "], [class$="-note"], [class*="-note "] { word-break: auto-phrase; text-wrap: pretty; } 
/*css/screens/01-shell.css*/
  .app-layout { display: flex; flex-direction: column; height: 100vh; } .app-topbar { height: var(--topbar-height); background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); display: flex; align-items: center; padding: 0 16px; gap: 10px; flex-shrink: 0; z-index: 1100; box-shadow: 0 1px 3px rgba(0,0,0,0.12); } .topbar-title { font-size: 15px; font-weight: var(--weight-bold); color: #fff; letter-spacing: 0.5px; }   .topbar-screen-title, .nav-mobile-extras { display: none; } .topbar-chip { font-size: 10px; color: var(--color-primary-dark); background: rgba(255,255,255,0.9); padding: 2px 10px; border-radius: 10px; font-weight: var(--weight-bold); letter-spacing: 0.3px; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }   .app-topbar .btn-hamburger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 4px; padding: 4px; } .app-topbar .btn-hamburger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 1px; }   .app-topbar .global-search-input-wrap { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); } .app-topbar .global-search-input { color: #fff; } .app-topbar .global-search-input::placeholder { color: rgba(255,255,255,0.6); } .app-topbar .global-search-icon { stroke: rgba(255,255,255,0.7); }   .app-topbar .global-search-hint { color: var(--color-text-tertiary); border-color: var(--color-border-default); opacity: 1; } .app-topbar .global-search-input-wrap:focus-within { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); }   .app-topbar .global-search-input-wrap:focus-within .global-search-input { color: var(--color-text-primary); } .app-topbar .global-search-input-wrap:focus-within .global-search-input::placeholder { color: var(--color-text-tertiary); } .app-topbar .global-search-input-wrap:focus-within .global-search-icon { stroke: var(--color-text-tertiary); } .app-topbar .global-search-input-wrap:focus-within .global-search-hint { color: var(--color-text-tertiary); border-color: var(--color-border-default); }   .app-topbar .vf-entry { background: var(--color-overlay-white-20); border-color: transparent; border-radius: 13px; color: var(--color-text-on-primary); } .app-topbar .vf-entry:hover { background: var(--color-overlay-white-30); border-color: transparent; color: var(--color-text-on-primary); } .app-topbar .topbar-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-muted);   flex-shrink: 0; } .app-body { display: flex; flex-direction: row; flex: 1; overflow: hidden; min-height: 0; }   .auth-guard { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--color-text-tertiary); font-size: var(--font-md); gap: 8px; } .auth-guard .btn-primary { margin-top: 12px; text-decoration: none; } .loading-spinner-large { width: 36px; height: 36px; border: 3px solid var(--color-border-default); border-top: 3px solid var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }   .sidebar { width: var(--sidebar-width); background: var(--color-bg-base); border-right: 1px solid var(--color-border-default); flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-border-muted) transparent; } .main-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; background: var(--color-bg-sunken); }   .nav-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px;   background: transparent; width: 100%; flex-wrap: wrap;   } .nav-header img { width: 32px; height: 32px; } .nav-header-info { display: flex; flex-direction: column; min-width: 0; } .user-name { font-size: 13px; color: var(--color-text-primary); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-bold); line-height: 1.2; } .user-email { font-size: 11px; color: var(--color-text-tertiary); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .avatar-btn-wrap { position: relative; display: inline-block; } .btn-avatar { width: 36px; height: 36px; border: none; background: transparent; border-radius: 50%; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .btn-avatar:hover { background: var(--color-primary-light); } .avatar-circle { width: 36px; height: 36px; border-radius: var(--radius-avatar); background: var(--color-primary-muted); border: 2px solid var(--color-primary); display: flex; align-items: center; justify-content: center; overflow: hidden; } .avatar-initial { font-size: 14px; font-weight: var(--weight-bold); color: var(--color-primary-dark); line-height: 1; } .avatar-img { width: 100%; height: 100%; border-radius: var(--radius-avatar); object-fit: cover; }   .avatar-group .avatar-circle.is-fallback { background: var(--color-primary-surface); border-color: var(--color-primary-surface); } .avatar-group .avatar-circle.is-fallback .avatar-initial { color: var(--color-text-on-primary); } .avatar-silhouette { width: 70%; height: 70%; fill: var(--color-text-on-primary); } .avatar-logo { width: 24px; height: 24px; border-radius: 0; }   .avatar-menu-overlay { position: fixed; inset: 0; z-index: 999; } .avatar-menu {   position: fixed; margin-top: 4px;   background: linear-gradient(to bottom, var(--color-menu-bg-top), var(--color-menu-bg-bottom)); border: 1px solid var(--color-border-default); border-radius: 3px; padding: 3px; z-index: var(--z-skip); min-width: 120px; box-shadow: 2px 2px 8px var(--shadow-sm); overflow: hidden; }   .avatar-menu::before { content: ""; display: block; height: 2px; margin: -3px -3px 3px; background: var(--color-primary); } .avatar-menu-item { display: block; width: 100%; padding: 8px 10px; border: none; background: transparent;   color: var(--color-text-primary); font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap; } .avatar-menu-item:hover { background: var(--color-primary-surface); border-radius: 2px; }   .avatar-menu-signout { color: var(--color-error); } .topbar-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; animation: pulse-status 3s ease-in-out infinite; } @keyframes pulse-status { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .nav-menu { display: flex; flex-direction: column; padding: 8px 8px; flex: 1; gap: 1px; }   .nav-group-label { font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.8px; color: var(--color-text-tertiary); padding: 14px 10px 4px; margin-top: 2px; user-select: none; } .nav-group-label:first-child { padding-top: 4px; } .nav-link { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 7px 10px; color: var(--color-text-secondary); text-decoration: none; font-size: 13px; font-weight: var(--weight-medium); border-radius: 8px; transition: all var(--duration-fast) ease; position: relative; } .nav-link:hover { background: var(--color-border-default); color: var(--color-text-primary); } .nav-link.active { background: var(--color-primary-surface-light); color: var(--color-primary-dark); font-weight: var(--weight-semibold); }   .nav-link.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-primary); } .nav-icon-svg { width: 20px; height: 20px; color: var(--color-text-secondary); transition: color var(--duration-fast); flex-shrink: 0; } .nav-link:hover .nav-icon-svg { color: var(--color-primary-on-surface); } .nav-link.active .nav-icon-svg { color: var(--color-primary-on-surface); }   .nav-link-button { width: 100%; border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; } .nav-link-button svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-text-secondary); } .nav-link-button:hover svg, .nav-link-button.active svg { color: var(--color-primary-on-surface); }   .nav-separator { height: 1px; background: var(--color-border-default); margin: 8px 10px; } .nav-tool-icons {   display: flex; flex-direction: column;   gap: 4px; padding: 6px 4px; } .nav-tool-row { display: flex; gap: 2px; justify-content: flex-start;   }   .nav-tool-icon {   display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 7px 10px; background: none; border: none; border-radius: var(--radius-md); text-decoration: none; cursor: pointer; position: relative; transition: transform var(--duration-fast) ease; } .nav-tool-glyph {   display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--radius-md); transition: background var(--duration-fast) ease, color var(--duration-fast) ease; } .nav-tool-icon svg { width: 16px; height: 16px; } .nav-tool-label {   font-size: 13px; font-weight: var(--weight-medium); line-height: 1.2; color: var(--color-text-secondary); text-align: left; white-space: nowrap; } .nav-tool-icon:hover { transform: translateY(-2px); } .nav-tool-icon:hover .nav-tool-glyph { box-shadow: var(--shadow-sm); }   .nav-tool-icon[data-tool="contacts"] .nav-tool-glyph { background: var(--color-feature-contact-surface); color: var(--color-feature-contact); } .nav-tool-icon[data-tool="contacts"]:hover .nav-tool-glyph { background: var(--color-feature-contact); color: #fff; } .nav-tool-icon[data-tool="task"] .nav-tool-glyph { background: var(--color-feature-task-surface); color: var(--color-feature-task); } .nav-tool-icon[data-tool="task"]:hover .nav-tool-glyph { background: var(--color-feature-task); color: #fff; } .nav-tool-icon[data-tool="timerecord"] .nav-tool-glyph { background: var(--color-feature-timelog-surface); color: var(--color-feature-timelog); } .nav-tool-icon[data-tool="timerecord"]:hover .nav-tool-glyph { background: var(--color-feature-timelog); color: #fff; }   .nav-tool-icon[data-tool="calendar"] .nav-tool-glyph { background: var(--color-feature-timelog-surface); color: var(--color-feature-timelog); } .nav-tool-icon[data-tool="calendar"]:hover .nav-tool-glyph { background: var(--color-feature-timelog); color: #fff; } .nav-tool-icon[data-tool="tracking"] .nav-tool-glyph { background: var(--color-feature-tracking-surface); color: var(--color-feature-tracking); } .nav-tool-icon[data-tool="tracking"]:hover .nav-tool-glyph { background: var(--color-feature-tracking); color: #fff; }   .nav-tool-icon[data-tool="activity"] .nav-tool-glyph { background: var(--color-info-surface); color: var(--color-info); } .nav-tool-icon[data-tool="activity"]:hover .nav-tool-glyph { background: var(--color-info); color: #fff; }   html.dark .nav-tool-icon .nav-tool-glyph { background: color-mix(in srgb, currentColor 18%, transparent); }   .nav-tool-edit-header { display: flex; align-items: center; justify-content: space-between; margin: 0 12px 4px; } .nav-tool-edit-title { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .nav-tool-reset { background: none; border: none; padding: 0; cursor: pointer; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .nav-tool-reset:hover { color: var(--color-primary-dark); text-decoration: underline; } .nav-tool-reset:active { opacity: .7; }   .nav-tool-badge { position: absolute; top: -3px; right: -3px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: var(--weight-bold); line-height: 1; color: #fff; pointer-events: none; z-index: 1; }   .nav-tool-badge.alert { background: var(--color-error); } .nav-tool-icons.editing .nav-tool-badge { display: none; }   .nav-tool-slot { position: relative; } .nav-tool-icons.editing .nav-tool-slot { cursor: grab; } .nav-tool-icons.editing .nav-tool-slot:active { cursor: grabbing; }   .nav-tool-icons.editing .nav-tool-icon { cursor: inherit; pointer-events: none; } .nav-tool-icons.editing .nav-tool-icon:hover { transform: none; } .nav-tool-icons.editing .nav-tool-icon:hover .nav-tool-glyph { box-shadow: none; }   @media (prefers-reduced-motion: no-preference) { .nav-tool-icons.editing .nav-tool-slot { animation: nav-tool-wiggle 1.1s ease-in-out infinite; transform-origin: 50% 50%; } } @keyframes nav-tool-wiggle { 0% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } 100% { transform: rotate(-1.6deg); } } .nav-tool-slot.dragging { opacity: .45; }   .nav-tool-remove { position: absolute; top: -4px; left: -4px; z-index: 2; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1.5px solid var(--color-bg-base); background: var(--color-text-secondary); color: var(--color-bg-base); font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .nav-tool-remove:hover { background: var(--color-error); color: #fff; } .nav-tool-remove:focus-visible { border-color: var(--color-primary); }   .nav-tool-slot.drop-target::before { content: ""; position: absolute; left: -4px; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: var(--color-primary); z-index: 3; }   .nav-tool-customize { width: 34px; height: 34px; margin: 2px 5px; padding: 0; border: none; border-radius: 7px; background: transparent; color: var(--color-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; align-self: flex-start; } .nav-tool-customize svg { width: 17px; height: 17px; } .nav-tool-customize:hover { background: var(--color-bg-sunken); color: var(--color-text-secondary); }   .nav-tool-tray { margin: 0 10px; } .nav-tool-tray-sep { height: 1px; margin: 2px 0 6px; background: var(--color-border-default); } .nav-tool-tray-title { margin-bottom: 4px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .nav-tool-tray-row { display: flex; flex-wrap: wrap; } .nav-tool-tray-chip { margin: 0 4px 4px 0; padding: 2px 8px 2px 6px; border-radius: 9px; border: 1px solid var(--color-border-default); background: transparent; color: var(--color-text-secondary); font-size: var(--font-2xs); cursor: pointer; } .nav-tool-tray-chip:hover { border-color: var(--color-primary); background: var(--color-primary-surface-light); }   .nav-tool-done { display: block; margin: 6px auto 0; padding: 3px 14px; border: none; border-radius: 11px; background: var(--color-primary); color: #fff; font-size: var(--font-xs); cursor: pointer; } .nav-tool-done:hover { background: var(--color-primary-dark); }   .topbar-geo-indicator { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: 4px; padding: 0; border: 0; border-radius: 15px; cursor: pointer; background: var(--color-overlay-white-20); color: var(--color-text-on-primary); } .topbar-geo-indicator:hover { background: var(--color-overlay-white-30); }   .global-search-open { display: none; }   .geo-prompt-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; background: var(--color-overlay-black-50); outline: none; } .geo-prompt-card { width: 400px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 26px 26px 20px; border-radius: var(--radius-xl); background: var(--color-bg-base); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); } .geo-prompt-badge { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-on-primary); } .geo-prompt-title { margin: 0 0 8px; text-align: center; font-size: var(--font-lg); font-weight: 700; color: var(--color-text-primary); } .geo-prompt-sub { margin: 0 0 20px; text-align: center; line-height: 21px; font-size: var(--font-sm); color: var(--color-text-secondary); } .geo-prompt-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .geo-prompt-btn { cursor: pointer; border-radius: var(--radius-sm); font-size: var(--font-sm); font-weight: 600; } .geo-prompt-btn-outline { padding: 10px 14px; background: transparent; border: 1px solid var(--color-border-muted); color: var(--color-text-secondary); } .geo-prompt-btn-primary { padding: 11px 14px; border: 0; background: var(--color-primary); color: var(--color-text-on-primary); } 
/*css/screens/02-talk.css*/
  .talk-layout { display: flex; height: 100%; overflow: hidden; position: relative;   gap: 0; background: var(--color-bg-sunken); }   .folder-panel { width: var(--folder-width);   background: var(--color-bg-sunken); flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; } .folder-panel.collapsed { width: 48px; } .folder-header { display: flex; justify-content: flex-end; padding: var(--space-2) var(--space-2) 0; } .folder-scroll { flex: 1; overflow-y: auto; padding: var(--space-1) var(--space-2); } .folder-list { list-style: none; } .folder-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); margin-bottom: 2px; cursor: pointer; border-radius: var(--radius-md); font-size: var(--font-base); color: var(--color-text-secondary); transition: all var(--duration-fast) var(--ease-default); } .folder-item:hover { background: var(--color-primary-surface-light); color: var(--color-text-secondary); } .folder-item.active { background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); } .folder-item-inner { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .folder-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.75; } .folder-item.active .folder-icon { opacity: 1; } .folder-icon-danger { color: var(--color-error); opacity: 1; } .folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .folder-dm-self { margin-left: 6px; font-size: var(--font-2xs); color: var(--color-text-tertiary); white-space: nowrap; flex: 0 0 auto; }   .panel-splitter { width: 1px; background: transparent; cursor: col-resize; flex-shrink: 0; position: relative; transition: background var(--duration-fast) var(--ease-default); } .panel-splitter:hover { background: var(--color-primary); width: 3px; } .splitter-collapse-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 40px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: 9px; color: var(--color-text-tertiary); cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; line-height: 1; z-index: 2; box-shadow: 0 2px 8px var(--shadow-sm); transition: all var(--duration-fast) var(--ease-default); } .panel-splitter:hover .splitter-collapse-btn { display: flex; } .splitter-collapse-btn:hover { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-on-surface); }   .message-detail-panel.collapsed { flex: 0 0 0px; overflow: hidden; min-width: 0; }   .message-list-panel { flex: 0.38; min-width: 280px;   background: var(--color-bg-sunken); display: flex; flex-direction: column; overflow: hidden; }     .msg-list-header-top { display: flex; align-items: center; flex-wrap: nowrap; padding: 4px 8px 4px 0; gap: var(--space-1); min-height: 32px; background: var(--color-bg-sunken);   }   .inbox-summary-bar { flex: 0 0 3px; align-self: stretch; background: var(--color-primary); border-radius: 2px 0 0 2px; }   .inbox-summary-check { width: 16px; height: 16px; flex: 0 0 auto; margin: 0 8px 0 8px; }   .msg-list-header-top .header-spacer { flex: 1 1 auto; min-width: 8px; }   .msg-list-header-left { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-1); overflow: hidden; } .msg-list-header-right { flex: 0 0 auto;   display: flex; align-items: center; gap: var(--space-1); margin-left: auto; } .header-loading { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-tertiary); font-size: var(--font-sm); } .btn-update { border: none; background: transparent; border-radius: var(--radius-md); cursor: pointer; padding: var(--space-2); display: flex; align-items: center; transition: all var(--duration-fast) var(--ease-default); } .btn-update:hover { background: var(--color-primary-surface); } .btn-update:active { transform: scale(0.95); } .btn-header-title { display: flex; align-items: center; gap: var(--space-2); border: none; background: transparent; border-radius: var(--radius-md); cursor: pointer; padding: var(--space-1) var(--space-2); transition: all var(--duration-fast) var(--ease-default);   min-width: 0; } .btn-header-title:hover { background: var(--color-primary-surface-light); } .header-title-text { font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-alert-circle { min-width: 20px; height: 20px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-bg-base); padding: 0 5px; } .header-alert-circle.red { background: var(--color-error); } .header-alert-circle.gray { background: var(--color-border-muted); } .alert-text-sm { font-size: 9px; }   .btn-icon-round { border: none; background: transparent; border-radius: var(--radius-md); cursor: pointer; padding: var(--space-2); display: flex; align-items: center; justify-content: center; transition: all var(--duration-fast) var(--ease-default); } .btn-icon-round:hover { background: var(--color-primary-surface); } .btn-icon-round:active { transform: scale(0.92); }     .search-bar { display: flex; padding: 1px 4px; gap: 0; align-items: center; background: var(--color-bg-sunken);   }   .search-input-wrap { flex: 1; position: relative;   display: flex; align-items: center; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: 14px; height: 30px; padding: 0 6px 0 0; transition: border-color var(--duration-fast) var(--ease-default); } .search-input-wrap:focus-within { border-color: var(--color-primary); } .search-input-wrap input { flex: 1; border: none; outline: none; font-size: var(--font-sm); background: transparent; color: var(--color-text-secondary); min-width: 0; }   .search-result-count { font-size: var(--font-xs); color: var(--color-text-tertiary); white-space: nowrap; margin-right: 4px; } .search-result-count.zero { color: var(--color-error); }   .btn-search-filter { position: relative; } .search-filter-badge { position: absolute; top: -2px; right: -2px; min-width: 12px; height: 12px; padding: 0 2px; border-radius: 6px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-2xs); line-height: 12px; text-align: center; } .search-input-wrap input::placeholder { color: var(--color-text-tertiary); }   .search-history-popup { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: var(--z-dropdown); background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); padding: 4px 0; } .search-history-row { display: flex; align-items: center; height: 28px; cursor: pointer; } .search-history-row:hover, .search-history-row.is-active { background: var(--color-bg-sunken); } .search-history-clock { margin: 0 8px 0 10px; color: var(--color-text-tertiary); flex-shrink: 0; } .search-history-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--font-sm); color: var(--color-text-primary); }   .search-popup-header { margin: 6px 10px 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-history-row.search-person-row { height: auto; min-height: 34px; padding: 2px 8px 2px 0; } .search-person-initial { width: 20px; height: 20px; margin: 0 8px 0 10px; border-radius: 50%; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: var(--font-2xs); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .search-person-lines { display: flex; flex-direction: column; min-width: 0; } .search-person-name, .search-person-detail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-person-name { font-size: var(--font-sm); color: var(--color-text-primary); } .search-person-detail { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .search-history-row.search-keyword-line .search-history-text { margin-left: 38px; }   .person-search-strip { margin: 2px 4px 4px 8px; } .person-search-head { display: flex; align-items: flex-start; } .person-search-lines { flex: 1; min-width: 0; } .person-search-title, .person-search-detail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .person-search-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .person-search-detail { font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .person-search-close { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; border: none; border-radius: var(--radius-sm); background: transparent; padding: 4px; cursor: pointer; color: var(--color-text-primary); } .person-search-close:hover { background: var(--color-bg-sunken); } .person-search-tabs { display: flex; flex-wrap: wrap; margin-top: 4px; } .person-search-tab { margin: 0 4px 0 0; padding: 2px 8px; border: none; border-radius: 10px; background: transparent; color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; } .person-search-tab.is-active { background: var(--color-primary-surface); color: var(--color-primary-on-surface); } .search-history-remove { width: 24px; height: 24px; margin-right: 4px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--color-text-tertiary); cursor: pointer; flex-shrink: 0; } .btn-search-icon { border: none; background: transparent; cursor: pointer; padding: var(--space-1); display: flex; align-items: center; border-radius: var(--radius-full); transition: background var(--duration-fast) var(--ease-default); } .btn-search-icon:hover { background: var(--color-primary-surface); } .btn-search-filter { border: none; background: transparent; cursor: pointer; padding: var(--space-1); display: flex; align-items: center; border-radius: var(--radius-full); transition: background var(--duration-fast) var(--ease-default); } .btn-search-filter:hover { background: var(--color-primary-surface); }   .btn-search-icon { position: relative; } .btn-search-icon::after, .btn-search-filter::after { content: ""; position: absolute; inset: -4px; }   .search-result-header { display: flex; align-items: center; gap: var(--space-3); flex: 1; font-size: var(--font-sm); color: var(--color-text-secondary); }   .btn-search-clear { display: inline-flex; align-items: center; gap: 3px; border: none; background: var(--color-border-default); color: var(--color-text-secondary); border-radius: 10px; padding: 2px 5px; margin-right: 2px; font-size: var(--font-2xs); font-weight: var(--weight-normal); cursor: pointer; white-space: nowrap; transition: opacity var(--duration-fast) var(--ease-default); } .btn-search-clear:hover { opacity: 0.85; }   .message-list { overflow-y: auto; flex: 1; background: var(--color-bg-sunken);   padding: 0 10px 0 0; }   .empty-list { padding: 60px 20px; text-align: center; color: var(--color-text-tertiary); font-size: var(--font-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } .empty-list-icon-circle { width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; background: var(--color-bg-sunken); color: var(--color-text-tertiary); } .empty-tone-done .empty-list-icon-circle { background: var(--color-primary-surface); color: var(--color-primary-on-surface); } .empty-tone-action .empty-list-icon-circle { background: var(--color-info-surface); color: var(--color-info); } .empty-list-actions { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }   .empty-list-action { min-height: 32px; padding: 6px 15px; background: var(--color-bg-base); color: var(--color-primary-on-surface); border: 1px solid var(--color-primary); border-radius: 6px; font-size: var(--font-xs); font-weight: var(--weight-bold); cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .empty-list-action:hover { background: var(--color-primary-surface-light); }   .empty-list-action.secondary { background: transparent; color: var(--color-text-tertiary); border-color: var(--color-border-default); } .empty-list-action.secondary:hover { background: var(--color-bg-sunken); color: var(--color-text-secondary); } .empty-title { font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .empty-description { font-size: var(--font-sm); color: var(--color-text-tertiary); }   .skeleton-list { padding: var(--space-2); display: flex; flex-direction: column; gap: 4px; } .skeleton-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); } .skeleton-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-border-default); flex-shrink: 0; animation: skeleton-pulse 1.5s ease-in-out infinite; } .skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; } .skeleton-line { height: 12px; border-radius: 6px; background: var(--color-border-default); animation: skeleton-pulse 1.5s ease-in-out infinite; } .skeleton-line.short { width: 40%; } .skeleton-line.medium { width: 70%; } .skeleton-line.long { width: 90%; } .skeleton-line:nth-child(2) { animation-delay: var(--duration-fast); } .skeleton-line:nth-child(3) { animation-delay: var(--duration-slow); } @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }     .date-header { padding: 12px 16px 4px 16px; font-size: var(--font-xs); color: var(--color-text-tertiary); font-weight: var(--weight-semibold); }   .message-item { display: flex; flex-direction: column; cursor: pointer; background: var(--color-bg-sunken); border-radius: 0; border: none; position: relative; margin-bottom: 0; transition: background var(--duration-fast) var(--ease-default), opacity var(--duration-fast) var(--ease-default); content-visibility: auto; contain-intrinsic-size: auto 56px; overflow: visible;   user-select: none; }   .message-item.tone-sent { background: var(--color-bg-elevated); } .message-item.tone-overdue { background: var(--color-error-surface); } .message-item.tone-bulk { background: var(--color-bulk-selected-surface); }   .message-item:hover .msg-row-main { background: var(--color-bg-elevated); }   .message-item.selected .msg-row-main, .message-item.selected:hover .msg-row-main { background: var(--color-primary-surface); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); }   .message-item.unread:not(.tone-bulk):not(.tone-overdue):not(.tone-sent) { background: inherit; }     .message-item.has-alert::after { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: var(--color-primary); border-radius: 0 2px 2px 0; } .message-item.checked-dim { opacity: 0.65; }   .message-item.checked-dim.selected, .message-item.checked-dim.tone-bulk { opacity: 1; }   .message-item.unread .msg-sender-name, .message-item.search-mode .msg-sender-name { font-weight: var(--weight-semibold); color: var(--color-text-secondary); }   .message-item.unread .msg-subject { font-weight: var(--weight-semibold); color: var(--color-text-primary); } .message-item.checked-dim .msg-subject { font-weight: var(--weight-normal); color: var(--color-text-tertiary); }   .message-item.selected .msg-subject { white-space: normal; overflow-wrap: anywhere;   min-width: min(8em, 100%); } .message-item.selected .msg-line2 { flex-wrap: wrap; }       .badge-state { display: inline-flex; align-items: center; min-height: 16px; padding: 1px 5px; border-radius: var(--radius-sm); font-size: var(--font-xs); font-weight: var(--weight-normal); white-space: nowrap; flex-shrink: 0; } .badge-alert { display: inline-flex; align-items: center; min-height: 16px; padding: 1px 6px; border-radius: var(--radius-sm); font-size: var(--font-xs); font-weight: var(--weight-bold); white-space: nowrap; flex-shrink: 0; background: var(--color-error); color: var(--color-text-on-primary); } .badge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; min-height: 18px; padding: 0 5px; border-radius: var(--radius-full); font-size: var(--font-xs); font-weight: var(--weight-semibold); line-height: 1; flex-shrink: 0; } .badge-count-fill { background: var(--color-error); color: var(--color-text-on-primary); } .badge-count-info { background: var(--color-info); color: var(--color-text-on-primary); }     .tone-neutral { background: var(--color-bg-sunken); color: var(--color-text-tertiary); } .tone-success { background: var(--color-success-surface); color: var(--color-success); } .tone-warning { background: var(--color-warning-surface); color: var(--color-warning); } .tone-error { background: var(--color-error-surface); color: var(--color-error-on-surface); } .tone-info { background: var(--color-info-surface); color: var(--color-info); } .tone-primary { background: var(--color-primary-surface); color: var(--color-primary-dark); }   .row-status-icon { flex-shrink: 0; } .row-icon-mute { color: var(--color-text-tertiary); } .row-icon-error { color: var(--color-error); } .row-icon-pin { color: var(--color-feature-pin); }   .row-icon-primary { color: var(--color-primary-on-surface); } .row-icon-mailitem { color: var(--color-feature-tracking); } .badge-aging { margin: 0 4px; } .badge-aging-1 { background: var(--color-aging-1-surface); color: var(--color-warning); } .badge-aging-2 { background: var(--color-aging-2-surface); color: var(--color-aging-2-text); } .badge-aging-3 { background: var(--color-error-surface); color: var(--color-aging-3-text); }     .msg-line1-right .badge-responded { margin: 0 4px 0 0; } .msg-line1-right .msg-timestamp { margin: 0 4px; } .msg-line1-right .msg-draft-badge { margin: 0 4px; } .msg-line1-right .msg-alert-badge, .msg-line1-right .msg-alert-loading { margin: 0; }   .msg-line1-right .msg-task-badge { margin: 0 0 0 6px; }   .badge-task-nudge { margin: 0 4px; background: var(--color-aging-1-surface); color: var(--color-warning); }     .convend-card { display: flex; align-items: flex-start; max-width: 460px; margin: 4px 0 8px 0; padding: 12px 16px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); } .convend-avatar-wrap { position: relative; width: 36px; height: 36px; flex-shrink: 0; }   .convend-avatar-wrap .convend-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); font-size: var(--font-sm); } .convend-avatar-wrap .convend-avatar .quote-avatar-img { width: 36px; height: 36px; border-radius: var(--radius-avatar); object-fit: cover; }   .convend-check-badge { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--color-primary); border: 2px solid var(--color-bg-base); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } .convend-check-badge svg { width: 7px; height: 7px; } .convend-body { margin-left: 12px; min-width: 0; } .convend-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .convend-sub { margin-top: 1px; max-width: 360px; font-size: var(--font-xs); color: var(--color-text-secondary); overflow-wrap: anywhere; }   .convend-note { margin-top: 8px; padding: 6px 11px; max-width: 360px; border-left: 2px solid var(--color-border-muted); font-size: var(--font-xs); color: var(--color-text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; } .convend-failed { display: flex; align-items: center; gap: 4px; margin-top: 7px; font-size: var(--font-2xs); color: var(--color-error); } .convend-check { margin-top: 7px; }   .ti-card { max-width: 520px;   flex-shrink: 0; align-self: flex-start; margin: 4px 0 8px 0; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 12px; overflow: hidden; cursor: pointer; } .ti-band { height: 5px;   background: linear-gradient(90deg, var(--color-feature-task) 0%, var(--color-feature-task-deep) 100%); }   .ti-kind-1 .ti-band { background: linear-gradient(90deg, var(--color-warning) 0%, var(--fb-band-warn-mid) 70%, var(--color-warning-dark) 100%); } .ti-kind-2 .ti-band { background: linear-gradient(90deg, var(--color-info) 0%, var(--fb-band-info-mid) 60%, var(--color-primary) 100%); } .ti-kind-3 .ti-band { background: var(--color-success); } .ti-kind-5 .ti-band, .ti-kind-6 .ti-band { background: var(--color-text-tertiary); } .ti-body { padding: 10px 16px 12px 16px; }   .ti-mini { font-size: var(--font-xs); color: var(--color-text-tertiary); } .ti-pill-row { display: flex; align-items: center; gap: 10px; min-width: 0; }   .ti-pill { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 3px 10px; border-radius: 11px; background: var(--color-feature-task-surface); color: var(--color-feature-task-deep); font-size: var(--font-xs); font-weight: var(--weight-bold); } .ti-kind-1 .ti-pill { background: var(--color-warning-surface); color: var(--color-warning-dark); } .ti-kind-2 .ti-pill { background: var(--color-info-surface); color: var(--color-info); } .ti-kind-3 .ti-pill { background: var(--color-success-surface); color: var(--color-success-dark); } .ti-kind-5 .ti-pill { background: var(--color-bg-sunken); color: var(--color-text-secondary); } .ti-kind-6 .ti-pill { background: var(--color-error-surface); color: var(--color-error-on-surface); } .ti-kicker { min-width: 0; font-size: var(--font-xs); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ti-title { margin-top: 8px; font-size: var(--font-md); font-weight: var(--weight-bold); color: var(--color-text-primary); overflow-wrap: anywhere; } .ti-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 8px; } .ti-meta-item { display: inline-flex; align-items: center; gap: 6px; } .ti-meta-label { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .ti-meta-value { font-size: var(--font-sm); color: var(--color-text-primary); } .ti-ask { margin-top: 8px; font-size: var(--font-xs); color: var(--color-text-secondary); }   .ti-comment { margin-top: 10px; padding: 6px 11px; max-width: 440px; border-left: 2px solid var(--color-border-muted); font-size: var(--font-xs); color: var(--color-text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }   .ti-footer { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--color-bg-elevated); border-top: 1px solid var(--color-border-default); } .ti-footer.overdue { background: var(--color-error-surface); border-top-color: var(--color-error); } .ti-status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 10px; background: var(--color-feature-task-surface); color: var(--color-feature-task-dark); font-size: var(--font-xs); font-weight: var(--weight-semibold); } .ti-footer.overdue .ti-status-chip { background: var(--color-error-surface); color: var(--color-error-on-surface); } .ti-footer.done .ti-status-chip { background: var(--color-success-surface); color: var(--color-success-dark); } .ti-due { font-size: var(--font-xs); color: var(--color-text-secondary); } .ti-footer.overdue .ti-due { color: var(--color-error-on-surface); font-weight: var(--weight-semibold); }   .quote-system-bubble { margin: 8px auto; max-width: 640px; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: 8px 14px; font-size: var(--font-sm); color: var(--color-text-secondary); } .quote-system-header { display: flex; align-items: center; gap: 6px; }   .quote-system-header .quote-system-more { flex: 0 0 auto; min-width: 28px; min-height: 28px; margin-left: 2px; }   .quote-system-title { flex: 1 1 auto; min-width: 0; font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .quote-system-time { flex: 0 0 auto; white-space: nowrap; margin-left: auto; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .quote-system-text { margin-top: 4px; white-space: pre-wrap; color: var(--color-text-secondary); } .quote-system-check { margin-top: 6px; font-size: var(--font-2xs); color: var(--color-primary-on-surface); background: none; border: 1px solid var(--color-primary); border-radius: var(--radius-full); padding: 2px 10px; cursor: pointer; } .quote-system-check:hover { background: var(--color-primary-surface); }   .first-unchecked-separator { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; color: var(--color-error); font-size: var(--font-2xs); font-weight: var(--weight-semibold); } .first-unchecked-separator::before, .first-unchecked-separator::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--color-error) 40%, var(--color-error) 60%, transparent); opacity: 0.4; }   .first-unchecked-separator span { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--color-error); border-radius: var(--radius-full); padding: 2px 12px; background: var(--color-bg-base); } .first-unchecked-separator span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-error); }     .floating-confirm-bar {   flex-shrink: 0; margin: 0 4px; display: flex; justify-content: flex-start; align-items: center; gap: 8px;   flex-wrap: wrap; row-gap: 6px;   padding: 6px 8px; width: auto; background: var(--color-bg-elevated); border: none; border-top: 1px solid var(--color-border-default); border-radius: 0; box-shadow: none; z-index: 5; }   .floating-confirm-bar.fcb-all-done { background: var(--color-success-surface, rgba(16,185,129,0.08)); border-top-color: var(--color-success); }   .fcb-reply, .d-field, .fcb-more { display: none; } .fcb-spacer { flex: 1; }   .fcb-check, .fcb-skip, .fcb-jump, .fcb-endconv, .fcb-all-checked, .fcb-goto-target { line-height: 1.3;   white-space: nowrap; flex-shrink: 0; }   @media (hover: none) { .fcb-check, .fcb-skip, .fcb-jump, .fcb-endconv, .fcb-goto-target { min-height: 44px; } }   .fcb-check { display: inline-flex; align-items: center; gap: 6px; background: var(--color-error); color: #fff; border: none; border-radius: 6px; padding: 5px 12px; font-size: var(--font-sm); cursor: pointer; } .fcb-check:hover { filter: brightness(0.92); }   .fcb-jump { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--color-border-default); color: var(--color-text-secondary); border-radius: 6px; padding: 5px 12px; font-size: var(--font-sm); cursor: pointer; } .fcb-jump:hover { background: var(--color-bg-sunken); }   .fcb-goto-target { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--color-border-default); color: var(--color-text-secondary); border-radius: 6px; padding: 5px 8px; margin-right: 8px; font-size: var(--font-sm); cursor: pointer; } .fcb-goto-target:hover { background: var(--color-bg-sunken); }   .fcb-skip { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--color-border-default); color: var(--color-text-secondary); border-radius: 6px; padding: 5px 10px; font-size: var(--font-sm); cursor: pointer; } .fcb-skip:hover { background: var(--color-bg-sunken); }   .fcb-all-checked { display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary-on-surface); font-size: var(--font-sm); }   .floating-confirm-bar.fcb-all-done { background: var(--color-success-surface, rgba(16, 185, 129, 0.08)); border-color: var(--color-success); }   .fcb-check.fcb-armed { background: var(--color-warning); color: #fff; }   .fcb-check.is-busy { position: relative; cursor: progress; opacity: .9; } .fcb-check.is-busy:hover { filter: none; } .fcb-check.is-busy svg { visibility: hidden; } .fcb-check.is-busy::before { content: ""; position: absolute; left: 12px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 2px solid transparent; border-top-color: currentColor; border-right-color: currentColor; border-radius: 50%; animation: fcb-busy-spin .7s linear infinite; } .fcb-check.is-done-a { animation: fcb-done-pop-a .42s ease-out 1; } .fcb-check.is-done-b { animation: fcb-done-pop-b .42s ease-out 1; } .thread-scroll-row.md-arrive-a { animation: md-arrive-a .26s ease-out 1; } .thread-scroll-row.md-arrive-b { animation: md-arrive-b .26s ease-out 1; } @keyframes fcb-busy-spin { to { transform: rotate(360deg); } }   @keyframes fcb-done-pop-a { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } } @keyframes fcb-done-pop-b { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } } @keyframes md-arrive-a { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes md-arrive-b { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }   @media (prefers-reduced-motion: reduce) { .fcb-check.is-done-a, .fcb-check.is-done-b, .thread-scroll-row.md-arrive-a, .thread-scroll-row.md-arrive-b, .fcb-check.is-busy::before, .fcb-check.is-busy::after { animation: none; } }     .fcb-endconv { display: inline-flex; align-items: center; gap: 6px; background: var(--color-primary); color: #fff; border: none; border-radius: 6px; padding: 5px 12px; font-size: var(--font-sm); cursor: pointer; } .fcb-endconv:hover { filter: brightness(0.92); }   .fcb-ring { width: 22px; height: 22px; flex-shrink: 0; } .fcb-ring-bg { fill: none; stroke: var(--color-border-default); stroke-width: 2.3; } .fcb-ring-fg { fill: none; stroke: var(--color-primary); stroke-width: 2.3; stroke-linecap: round; }   .fcb-overdue { background: var(--color-error); color: #fff; font-size: var(--font-xs); border: none; border-radius: 10px; padding: 2px 6px; white-space: nowrap; }   .quote-item.fcb-target { border-radius: var(--radius-sm); }     .fcb-ripple { fill: none; stroke: var(--color-error); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; } .fcb-ripple.is-on { animation: fcb-ripple-out 0.7s ease-out 1; } @keyframes fcb-ripple-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } } .fcb-connector-dot { transform-box: fill-box; transform-origin: center; } .fcb-connector-dot.is-pop { animation: fcb-dot-pop 0.3s ease-out 1; } @keyframes fcb-dot-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } } @keyframes fcb-arrival-pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); } 100% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } } .quote-item.fcb-pulse { animation: fcb-arrival-pulse 0.9s ease-out 1; }   .endconv-backdrop { position: fixed; inset: 0; z-index: 90; background: transparent; } .endconv-overlay { position: sticky; bottom: 56px; z-index: 91; margin: 0 auto; max-width: 480px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .endconv-title { font-size: var(--font-md); font-weight: var(--weight-bold); color: var(--color-text-primary); } .endconv-desc { font-size: var(--font-sm); color: var(--color-text-secondary); } .endconv-note-label { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .endconv-note { width: 100%; resize: vertical; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-sm); padding: 6px 8px; } .endconv-buttons { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;   } .endconv-buttons > button { white-space: nowrap; flex-shrink: 0; } .endconv-cancel { background: none; border: 1px solid var(--color-border-default); color: var(--color-text-secondary); border-radius: var(--radius-full); padding: 4px 14px; font-size: var(--font-sm); cursor: pointer; } .endconv-confirm { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-full); padding: 4px 18px; font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; } .endconv-confirm:disabled { opacity: 0.5; cursor: default; }   .dm-conv-pane { flex: 1; min-height: 0; display: flex; flex-direction: column;   background: var(--color-bg-sunken); overflow: hidden; }   .dm-conv-summary, .dm-conv-search { background: var(--color-bg-sunken); } .dm-conv-search { border-bottom: 1px solid var(--color-border-default); } .dm-conv-summary-text { flex-direction: column; align-items: flex-start; gap: 0; padding: 3px 0 3px 8px; } .dm-conv-summary-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .dm-conv-summary-count {   display: block; font-size: var(--font-xs); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }   .dm-conv-return { padding: 4px 8px; margin-right: 6px; border: none; border-radius: 6px; background: transparent; color: var(--color-primary-on-surface); font-size: var(--font-xs); cursor: pointer; white-space: nowrap; } .dm-conv-return:hover { background: var(--color-primary-surface); }   .dm-conv-start-new { margin-right: 2px; }   .dm-conv-search { padding: 2px 10px 8px; } .dm-conv-search .search-input-wrap { height: 36px; border-radius: 18px; background: var(--color-bg-base); padding: 0 12px 0 0; } .dm-conv-search-icon { display: inline-flex; align-items: center; margin: 0 0 0 13px; } .dm-conv-search .search-input-wrap input { padding: 0 0 0 7px; font-size: var(--font-xs); }   .dm-conv-pickbar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: var(--color-primary-surface-light); border-bottom: 1px solid var(--color-border-default); } .dm-conv-pickbar-text { flex: 1; min-width: 0; font-size: var(--font-xs); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   .dm-conv-list { background: var(--color-bg-base); } .dm-conv-list .message-item { background: var(--color-bg-sunken); }   .dm-conv-list .message-item.dm-conv-suggestion .msg-sender-name { font-weight: var(--weight-medium); } .dm-conv-list .message-item.dm-conv-suggestion .msg-row-main { min-height: 40px; }   .dm-conv-agent { flex: none; margin-left: 6px; padding: 0 4px; border-radius: 3px; background: var(--color-primary-muted); color: var(--color-text-primary); font-size: var(--font-2xs); font-weight: var(--weight-semibold); line-height: 15px; }   .dm-conv-sec-h { display: flex; align-items: center; gap: 8px; padding: 9px 10px 5px; } .dm-conv-sec-h > span { flex: none; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); } .dm-conv-sec-h > em { flex: 1; height: 1px; background: var(--color-border-default); }   .dm-conv-seeall { align-self: flex-start; margin: 2px 4px 8px; }   .dm-conv-list .message-item.selected .msg-row-main, .dm-conv-list .message-item.selected:hover .msg-row-main { border-color: transparent; } .dm-conv-list .message-item.selected::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-primary); border-radius: 0; }   .dm-conv-avatar { position: relative; } .dm-conv-online { position: absolute; right: 3px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success);   box-shadow: 0 0 0 1.5px var(--color-bg-sunken); }   .dm-conv-no-history { font-style: italic; }   .dm-conv-empty { flex: 1; min-height: 0; background: var(--color-bg-base); }   .bulletin-overlay { position: absolute; inset: 0;   background: var(--color-overlay-black-15); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); padding: 40px; } .bulletin-dialog { position: relative; display: flex; flex-direction: column; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 20px; width: min(600px, 100%); max-height: 500px; min-width: 0; }   .bulletin-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; background: none; border: none; font-size: var(--font-xl); line-height: 1; color: var(--color-text-secondary); cursor: pointer; } .bulletin-head { display: flex; align-items: baseline; min-width: 0; }   .bulletin-kind { font-size: var(--font-base); font-weight: var(--weight-semibold); color: var(--color-primary-on-surface); }   .bulletin-sender { margin-left: 15px; font-size: var(--font-xs); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .bulletin-subject { margin: 10px 0 5px; font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-text-primary); overflow-wrap: anywhere; }   .bulletin-body { flex: 1 1 auto; min-height: 0; margin: 5px 0; overflow-y: auto; font-size: var(--font-base); color: var(--color-text-primary); white-space: pre-wrap; overflow-wrap: anywhere; } .bulletin-actions { display: flex; justify-content: flex-end; margin-top: 10px; }   .bulletin-goto { height: 35px; padding: 0 20px; border: none; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-base); cursor: pointer; } .bulletin-goto:hover { background: var(--color-primary-dark); }   .pin-bar { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; max-height: 100%; background: var(--color-bg-sunken); border-bottom: 1px solid var(--color-border-default); }   .pin-bar-head { display: flex; align-items: center; flex: 0 0 auto; margin: 10px 16px 4px; color: var(--color-feature-pin); } .pin-bar-head-label { margin-left: 6px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); } .pin-bar-head-count { margin-left: 6px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .pin-bar-head-spacer { flex: 1; } .pin-bar-head-btn { margin-left: 2px; padding: 2px 6px; border: none; border-radius: 4px; background: transparent; font-size: var(--font-xs); color: var(--color-text-tertiary); cursor: pointer; } .pin-bar-head-btn.is-toggle { padding: 2px 7px; font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .pin-bar-head-btn:hover { background: var(--color-bg-elevated); } .pin-bar-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; }   .pin-bar-foot { flex: 0 0 auto; display: flex; align-items: center; margin: 0 16px 6px; padding-top: 6px; border-top: 1px solid var(--color-border-default); }   .pin-bar-foot-link.is-reset { margin-left: 14px; } .pin-bar-foot-hint { margin-left: auto; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .pin-bar-dormant-head { margin: 10px 16px 4px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); } .pin-bar-foot-link { padding: 0; border: none; background: transparent; font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); cursor: pointer; } .pin-bar-foot-link:hover { color: var(--color-text-primary); }   .pin-bar-row { position: relative; display: flex; align-items: center; height: 34px; margin: 0 4px; padding: 0 4px 0 16px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; user-select: none; } .pin-bar-row::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: var(--color-border-default); opacity: 0.5; } .pin-bar-row:hover { background: var(--color-bg-elevated); }   .pin-bar-row.is-selected, .pin-bar-row.is-selected:hover { border-color: var(--color-primary); background: var(--color-primary-surface); } .pin-bar-row.is-selected::after { opacity: 0; }   .pin-bar-row.is-dormant { opacity: 0.62; }   .pin-bar-row.is-dragging, .pin-bar-row.is-dragging:hover { opacity: 0.5; border-color: var(--color-feature-pin); background: var(--color-feature-pin-surface); }   .pin-bar-row-grip { position: absolute; left: 2px; top: 0; bottom: 0; width: 12px; display: flex; align-items: center; justify-content: center; font-size: var(--font-xs); color: var(--color-text-tertiary); cursor: move; opacity: 0; } .pin-bar-row:hover .pin-bar-row-grip { opacity: 0.55; } .pin-bar-row.is-dragging .pin-bar-row-grip { opacity: 1; }   .pin-bar-row-drop { position: absolute; left: 4px; right: 4px; height: 2px; border-radius: 1px; background: var(--color-feature-pin); z-index: 3; pointer-events: none; } .pin-bar-row-drop.is-before { top: -1px; } .pin-bar-row-drop.is-after { bottom: -1px; }   .pin-bar-row-dropzone { display: none; position: absolute; left: 0; right: 0; height: 50%; z-index: 4; } .pin-bar-row-dropzone.is-top { top: 0; } .pin-bar-row-dropzone.is-bottom { bottom: 0; } .pin-bar.is-dragging .pin-bar-row-dropzone { display: block; }   .pin-bar-row-ai { flex: 0 0 auto; margin-right: 3px; font-size: var(--font-2xs); color: var(--color-feature-pin); }   .pin-bar-row-unchecked { position: absolute; left: -5px; top: 4px; bottom: 4px; width: 3px; background: var(--color-primary); border-radius: 0 2px 2px 0; }   .pin-bar-row-avatar { flex: 0 0 18px; width: 18px; height: 18px; margin-right: 6px; border-radius: var(--radius-avatar); background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-size: var(--font-2xs); display: flex; align-items: center; justify-content: center; } .pin-bar-row-glyph { flex: 0 0 auto; display: inline-flex; margin-right: 5px; } .pin-bar-row-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-sm); color: var(--color-text-secondary); } .pin-bar-row.is-selected .pin-bar-row-title { color: var(--color-text-primary); font-weight: var(--weight-semibold); } .pin-bar-row-title-edit { flex: 1 1 auto; min-width: 0; padding: 1px 2px; border: none; border-bottom: 1px solid var(--color-feature-pin); background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-sm); outline: none; }   .pin-bar-row-note-edit, .pin-bar-row-remove, .pin-bar-row-due-ghost { opacity: 0; } .pin-bar-row:hover .pin-bar-row-note-edit, .pin-bar-row:hover .pin-bar-row-remove, .pin-bar-row:hover .pin-bar-row-due-ghost, .pin-bar-row :focus-visible { opacity: 1; } .pin-bar-row-note-edit { flex: 0 0 18px; width: 18px; height: 18px; margin: 0 2px 0 4px; padding: 0; border: none; border-radius: 4px; background: transparent; color: var(--color-text-tertiary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .pin-bar-row-remove { flex: 0 0 20px; width: 20px; height: 20px; margin-left: 4px; padding: 0; border: none; border-radius: 4px; background: transparent; color: var(--color-text-tertiary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .pin-bar-row-remove:hover { background: var(--color-border-default); }   .pin-bar-row.is-editing .pin-bar-row-remove { visibility: hidden; }   .pin-bar-row-due { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 5px; border: none; border-radius: 9px; background: var(--color-feature-pin-surface); color: var(--color-feature-pin-dark); font-size: var(--font-2xs); font-weight: var(--weight-semibold); cursor: pointer; } .pin-bar-row-due.is-soon { background: var(--color-warning-surface); color: var(--color-warning-on-surface); } .pin-bar-row-due.is-overdue { background: var(--color-error-surface); color: var(--color-error-on-surface); } .pin-bar-row-due-ghost { flex: 0 0 auto; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--color-border-default); border-radius: 9px; background: transparent; font-size: var(--font-2xs); color: var(--color-text-tertiary); cursor: pointer; } .pin-bar-row-time { flex: 0 0 auto; margin-left: 6px; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .pin-bar-row-alert { flex: 0 0 auto; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--color-error); color: var(--color-text-on-primary); font-size: var(--font-xs); font-weight: var(--weight-semibold); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }   .thread-preview-body { position: relative; display: flex; flex-direction: column; height: 100%; overflow-y: auto; outline: none; }   .thread-preview-state { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 24px; text-align: center; } .thread-preview-loading { font-size: var(--font-sm); color: var(--color-text-tertiary); } .thread-preview-empty-title { font-size: var(--font-sm); color: var(--color-text-secondary); } .thread-preview-empty-note { margin-top: 4px; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .msg-line3, .mobile-folder-chips, .mobile-bulk-top, .mobile-bulk-bottom, .mobile-new-message-fab { display: none; }   .mobile-detail-head, .compact-ai-pill, .mobile-sheet, .mobile-sheet-scrim { display: none; }   .msg-insight-bar { display: flex; margin: 0 10px 4px 10px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-base); overflow: hidden; } .msg-insight-accent { width: 3px; flex: 0 0 3px; background: var(--color-feature-timelog); } .msg-insight-rows { flex: 1 1 auto; min-width: 0; } .msg-insight-row { display: flex; align-items: center; gap: 4px; padding: 3px 6px 3px 0; } .msg-insight-text { flex: 1 1 auto; min-width: 0; margin: 2px 0 2px 10px; font-size: var(--font-sm); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-insight-btn { border: none; background: transparent; border-radius: 6px; padding: 2px 10px; font-size: var(--font-xs); font-weight: 600; cursor: pointer; } .msg-insight-btn.meeting { color: var(--color-feature-timelog-dark); } .msg-insight-btn.meeting:hover { background: var(--color-feature-timelog-surface); } .msg-insight-btn.task { color: var(--color-feature-task-dark); } .msg-insight-btn.task:hover { background: var(--color-feature-task-surface); } .msg-insight-btn.reply { color: var(--color-feature-message-dark); } .msg-insight-btn.reply:hover { background: var(--color-feature-message-surface); } .msg-insight-btn:disabled { opacity: .6; cursor: default; } .msg-insight-done { padding: 2px 10px; font-size: var(--font-xs); font-weight: 600; color: var(--color-feature-timelog-dark); opacity: .6; } .msg-insight-dismiss { border: none; background: transparent; border-radius: 6px; padding: 2px 7px; font-size: var(--font-xs); color: var(--color-text-tertiary); cursor: pointer; } .msg-insight-dismiss:hover { background: var(--color-bg-sunken); } 
/*css/screens/03-compose.css*/
    .compose-compact-bar { display: flex; align-items: center; gap: 4px; padding: 0 4px; min-height: 36px; border: 1.5px solid var(--color-primary); border-radius: 10px; background: var(--color-primary-surface); margin: 0 4px 4px 4px; }   .compose-compact-bar.t-email { background: var(--color-bg-sunken); border-color: var(--color-text-secondary); } .compose-compact-bar.t-bulletin { background: var(--color-info-surface); border-color: var(--color-info); }   .compact-type-btn { display: inline-flex; align-items: center; gap: 3px; background: transparent; color: var(--color-primary-on-surface); border: none; border-radius: 4px; padding: 3px 4px; cursor: pointer; } .compact-type-btn.t-email { color: var(--color-text-secondary); } .compact-type-btn.t-bulletin { color: var(--color-info); } .compact-type-btn:hover:not(:disabled) { background: var(--color-bg-sunken); } .compact-type-btn:disabled { opacity: 0.6; cursor: default; } .compact-caret { font-size: 9px; color: var(--color-text-tertiary); }   .compact-reply-input { flex: 1; min-width: 60px; border: none; border-radius: 0; background: transparent; color: var(--color-text-primary); font-size: var(--font-base); padding: 2px 8px; cursor: text; } .compact-reply-input::placeholder { color: var(--color-text-tertiary); font-size: var(--font-sm); } .compact-ai-label { color: var(--color-primary-on-surface); font-weight: var(--weight-bold); font-size: var(--font-xs); white-space: nowrap; margin-left: 2px;   }   .compact-ai-sparkle { display: inline-block; font-size: var(--font-xs); } .compact-ai-sparkle.is-running { animation: compact-ai-sparkle-pulse 1.2s ease-in-out infinite; }   .compact-ai-blocked { display: inline-flex; color: var(--color-error); } .compact-ai-label.is-blocked { color: var(--color-text-disabled); } @keyframes compact-ai-sparkle-pulse { 0% { transform: scale(0.8) rotate(0deg); } 50% { transform: scale(1.6) rotate(180deg); } 100% { transform: scale(0.8) rotate(360deg); } }   .compact-sep { width: 1px; height: 16px; background: var(--color-border-default); margin: 0 4px; flex-shrink: 0; }   .compose-compact-bar .btn-compose-tool { width: 28px; height: 28px; border-radius: 4px; } .compose-compact-bar .btn-compose-tool:hover:not(:disabled) { background: var(--color-bg-sunken); }   .compose-compact-bar .btn-compose-tool.compact-ai-btn { width: auto; height: auto; padding: 3px 4px; } .compose-compact-bar .btn-compose-tool.compact-ai-btn:hover:not(:disabled) { background: var(--color-primary-surface); } .compact-send-btn {   width: 24px; height: 24px; border-radius: 8px; border: none; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .compact-send-btn:hover:not(:disabled) { background: var(--color-primary-dark); } .compact-send-btn.email { background: var(--color-text-secondary); } .compact-send-btn:disabled { opacity: 0.5; cursor: default; }   .compact-attach-wrap { position: relative; display: inline-flex; } .compact-attach-badge { position: absolute; right: 0; bottom: 0; min-width: 13px; height: 13px; border-radius: 6.5px; background: var(--color-primary); color: #fff; font-size: var(--font-3xs); line-height: 13px; text-align: center; pointer-events: none; }   .compose-card-header { display: flex; align-items: center; gap: 6px; padding: 8px 10px 0 10px; } .compose-header-spacer { flex: 1; }   .compose-card-header .compose-type-badge { gap: 3px; padding: 2px 6px; border-radius: 4px; font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-on-primary); } .compose-card-header .compose-type-badge.t-email { background: var(--color-text-secondary); }   .type-popup .type-popup-note { margin: 10px 12px; max-width: 200px; font-size: var(--font-xs); color: var(--color-text-secondary); white-space: normal; } .compose-card-header .compose-type-badge .compact-caret { color: var(--color-text-on-primary); font-size: 8px; margin-left: 0; }   .compose-fixed-header { display: flex; align-items: center; gap: 6px; padding: 10px 14px 8px 14px; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-base); }   .compose-header-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--color-border-default); }   .compose-draft-toggle-wrap { position: relative; display: inline-flex; } .compose-draft-badge { position: absolute; top: -2px; right: -2px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: 9px; line-height: 14px; text-align: center; pointer-events: none; } .compose-type-wrap { position: relative; display: inline-flex; } .compose-type-badge { display: inline-flex; align-items: center; gap: 4px; border: none; border-radius: var(--radius-sm); padding: 4px 10px; font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; } .compose-type-badge.t-chat { background: var(--color-primary); color: #fff; } .compose-type-badge.t-email { background: var(--color-text-tertiary); color: #fff; }     .compose-toggle-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 2px 4px; font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); cursor: pointer; } .compose-toggle-btn:hover { color: var(--color-text-primary); }   .pcp-root { display: flex; align-items: center; gap: 4px; margin: 4px 8px; position: relative; } .pcp-storage { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px; background: transparent; cursor: pointer; } .pcp-storage:hover { background: var(--color-bg-sunken); } .pcp-avatar { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; background: var(--color-primary-surface); color: var(--color-primary-on-surface); font-size: var(--font-2xs); font-weight: var(--weight-semibold); flex-shrink: 0; } .pcp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--color-primary); border-radius: 11px; background: var(--color-primary-surface); font-size: var(--font-xs); cursor: pointer; max-width: 100%; }   .pcp-chip.empty { background: transparent; border-color: var(--color-border-default); } .pcp-chip.empty .pcp-chip-icon, .pcp-chip.empty .pcp-chip-title { color: var(--color-text-tertiary); }   .pcp-chip.warn { background: var(--color-warning-surface); border-color: var(--color-warning); } .pcp-chip.warn .pcp-chip-icon, .pcp-chip.warn .pcp-chip-title { color: var(--color-warning); } .pcp-chip.selected:hover { background: var(--color-primary-surface-muted, var(--color-primary-surface)); } .pcp-chip-icon { color: var(--color-primary-on-surface); flex-shrink: 0; } .pcp-chip-title { color: var(--color-primary-on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pcp-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .pcp-chip-edit { margin-left: 4px; opacity: 0.8; } .pcp-clear { margin-left: 2px; border: none; background: transparent; color: var(--color-text-tertiary); font-size: var(--font-2xs); cursor: pointer; } .pcp-selector { display: flex; align-items: center; gap: 6px; width: 100%; } .pcp-search { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--color-border-default); border-radius: 6px; background: transparent; color: var(--color-text-primary); font: inherit; font-size: var(--font-xs); }   .pcp-results { max-height: 220px; overflow-y: auto; }   .pcp-result, .pcp-action { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: none; background: transparent; color: var(--color-text-primary); font-size: var(--font-xs); text-align: left; cursor: pointer; } .pcp-result:hover, .pcp-action:hover { background: var(--color-primary-surface); }   .pcp-panel { position: absolute; top: 100%; left: 0; z-index: var(--z-dropdown); display: flex; flex-direction: column; gap: 6px; min-width: 320px; max-width: min(480px, calc(100vw - 32px)); width: max-content; max-height: 60vh; overflow-y: auto; margin-top: 4px; padding: 10px 12px 12px; border: 1px solid var(--color-border-default); border-radius: 12px; background: var(--color-bg-elevated); } .pcp-panel-head { display: flex; align-items: center; gap: 4px; } .pcp-panel-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); font-size: var(--font-sm); font-weight: var(--weight-bold); } .pcp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--color-text-secondary); cursor: pointer; flex-shrink: 0; } .pcp-icon-btn:hover { background: var(--color-bg-sunken); }   .pcp-icon-btn:active { background: var(--color-primary-surface); }   .pcp-member-toggle { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--color-border-default); border-radius: 13px; background: var(--color-bg-base); color: var(--color-text-secondary); font-size: var(--font-2xs); cursor: pointer; flex-shrink: 0; } .pcp-member-toggle.on { border-color: var(--color-primary); background: var(--color-primary-surface); color: var(--color-primary-on-surface); } .pcp-loading { display: flex; align-items: center; gap: 6px; color: var(--color-text-tertiary); font-size: var(--font-2xs); }   .pcp-sections { display: flex; flex-direction: column; gap: 10px; } .pcp-section { display: flex; flex-direction: column; } .pcp-section-head { display: flex; align-items: center; gap: 6px; padding: 2px 4px 4px; } .pcp-section-icon { color: var(--color-text-secondary); flex-shrink: 0; } .pcp-section-title { color: var(--color-text-primary); font-size: var(--font-xs); font-weight: var(--weight-bold); } .pcp-section-note { color: var(--color-text-tertiary); font-size: var(--font-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   .pcp-actions { display: flex; flex-direction: column; } .pcp-action-icon { color: var(--color-primary-on-surface); flex-shrink: 0; } .pcp-action-sep { height: 1px; margin: 4px 6px; background: var(--color-border-default); } .pcp-action-danger { color: var(--color-error); } .pcp-action-danger .pcp-action-icon { color: var(--color-error); }   .pcp-count { padding: 6px 10px 2px; color: var(--color-text-tertiary); font-size: var(--font-2xs); }   .pcp-search-count { display: flex; gap: 4px; margin: 0 0 6px 4px; font-size: var(--font-xs); color: var(--color-text-tertiary); } .pcp-search-empty { padding: 16px 0; text-align: center; font-size: var(--font-xs); color: var(--color-text-tertiary); }   .pcp-panel-full { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: var(--z-modal); width: min(700px, calc(100vw - 48px)); height: min(600px, calc(100vh - 48px)); min-width: 0; max-width: none; max-height: none; margin-top: 0; padding: 16px 20px 20px; border-radius: 16px; background: var(--color-bg-base); }   .group-popup { min-width: 200px; max-height: 350px; overflow-y: auto; padding: 10px; } .group-popup-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .group-popup-title { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .group-popup-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border: none; border-radius: 4px; background: transparent; color: var(--color-text-primary); font-size: var(--font-xs); cursor: pointer; text-align: left; } .group-popup-item:hover { background: var(--color-primary-surface); } .group-popup-empty { display: block; margin: 4px 0; font-size: var(--font-xs); color: var(--color-text-disabled); }     .rgm-panel { display: flex; flex-direction: column; height: 100%; } .rgm-root { display: flex; flex: 1; min-height: 0; } .rgm-list { width: 210px; display: flex; flex-direction: column; border-right: 1px solid var(--color-border-default); } .rgm-list-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 4px 4px; } .rgm-list-foot { padding: 8px 10px; border-top: 1px solid var(--color-border-default); } .rgm-new { width: 100%; padding: 8px; border: 1px dashed var(--color-border-default); border-radius: 6px; background: transparent; color: var(--color-primary-on-surface); font-size: var(--font-xs); cursor: pointer; } .rgm-new:hover { background: var(--color-primary-surface); } .rgm-item { display: flex; align-items: flex-start; gap: 8px; width: 100%; margin: 1px 0; padding: 10px 8px; border: none; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; } .rgm-item:hover { background: var(--color-bg-sunken); } .rgm-item.selected { background: var(--color-primary-surface); } .rgm-item-icon { color: var(--color-text-tertiary); flex-shrink: 0; margin-top: 2px; } .rgm-item-text { display: flex; flex-direction: column; min-width: 0; } .rgm-item-title { font-size: var(--font-xs); color: var(--color-text-primary); } .rgm-item-sub { font-size: var(--font-2xs); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; } .rgm-edit { flex: 1; min-width: 0; display: flex; flex-direction: column; } .rgm-edit-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 12px; }   .rgm-edit-scroll.disabled { opacity: 0.5; } .rgm-label { display: block; margin: 16px 0 6px 2px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .rgm-edit-scroll > .rgm-label:first-child { margin-top: 0; } .rgm-field { border: 1px solid var(--color-border-default); border-radius: 8px; } .rgm-input { width: 100%; padding: 10px; border: none; background: transparent; color: var(--color-text-primary); font: inherit; font-size: var(--font-sm); } .rgm-kind { display: flex; gap: 20px; padding: 10px 12px; border-radius: 8px; background: var(--color-bg-sunken); font-size: var(--font-xs); } .rgm-members { position: relative; min-height: 40px; padding: 4px 6px; border: 1px solid var(--color-border-default); border-radius: 8px; } .rgm-chips { display: flex; flex-wrap: wrap; } .rgm-chip { display: inline-flex; align-items: center; margin: 2px; padding: 4px 8px; border-radius: 6px; background: var(--color-primary-surface); font-size: var(--font-xs); color: var(--color-text-primary); } .rgm-chip-x { margin-left: 4px; border: none; background: transparent; color: var(--color-text-tertiary); font-size: var(--font-2xs); cursor: pointer; } .rgm-member-input { font-size: var(--font-xs); padding: 6px; } .rgm-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-dropdown); max-height: 200px; overflow-y: auto; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-bg-elevated); } .rgm-suggest button { display: block; width: 100%; padding: 6px 10px; border: none; background: transparent; color: var(--color-text-primary); font-size: var(--font-xs); text-align: left; cursor: pointer; } .rgm-suggest button:hover { background: var(--color-primary-surface); } .rgm-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--color-border-default); } .rgm-danger { padding: 8px 16px; border: 1px solid var(--color-error); border-radius: 6px; background: transparent; color: var(--color-error); font-size: var(--font-sm); cursor: pointer; } .rgm-primary { padding: 8px 16px; border: none; border-radius: 6px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-sm); cursor: pointer; } .rgm-danger:disabled, .rgm-primary:disabled { opacity: 0.5; cursor: default; }   .compose-quotebar { display: flex; flex-direction: column; align-items: flex-start; margin: 8px 8px 0 8px; }   .compose-quotebar-edit { width: 100%; margin: 2px 0 0 6px; padding: 2px 0 2px 10px; background: transparent; border: none; border-left: 3px solid var(--color-border-muted); color: var(--color-text-secondary); font: inherit; resize: vertical; } .compose-quotebar-edit.quote { color: var(--color-text-tertiary); } .compose-type-badge.t-bulletin { background: var(--color-info); color: var(--color-text-on-primary); } .compose-type-badge.t-slack { background: var(--color-slack-brand); color: var(--color-text-on-primary); }   .type-popup .ic-info { color: var(--color-info); } .type-popup .ic-slack { color: var(--color-error); } .compose-type-badge:disabled { cursor: default; } .type-popup { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 140px; } .btn-recip-overflow { background: var(--color-bg-sunken); border: none; border-radius: var(--radius-sm); color: var(--color-text-tertiary); padding: 4px 12px; cursor: pointer; font-size: var(--font-sm); } .btn-recip-overflow:hover { background: var(--color-bg-base); }   .compose-reply-subject-row { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; } .compose-reply-subject-label { flex: 0 0 auto; font-size: var(--font-xs); color: var(--color-text-tertiary); } .compose-reply-subject-input { flex: 1 1 auto; min-width: 0; border: none; border-bottom: 1px solid var(--color-text-tertiary); border-radius: 0; background: transparent; color: var(--color-text-primary); font-size: var(--font-md); font-weight: var(--weight-normal, 400); padding: 2px 0; outline: none; } .compose-reply-subject-input:focus { border-bottom-color: var(--color-primary); }   .compose-bm-left { display: flex; align-items: center; gap: 4px; position: relative;   min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: thin; } .compose-bm-right { display: flex; align-items: center; gap: 10px; margin-left: auto;   flex: 0 0 auto; } .bm-template-split { display: inline-flex; align-items: stretch; position: relative; } .bm-template-main { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm) 0 0 var(--radius-sm); color: var(--color-text-secondary); font-size: var(--font-sm); padding: 4px 8px; cursor: pointer; max-width: 130px; } .bm-template-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bm-template-arrow { background: none; border: 1px solid var(--color-border-default); border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--color-text-tertiary); font-size: 9px; padding: 4px 6px; cursor: pointer; }   .compose-panel.is-reply .bm-template-main { border: none; border-radius: 6px 0 0 6px; padding: 4px 4px 4px 8px; font-size: var(--font-xs); color: var(--color-text-secondary); } .compose-panel.is-reply .bm-template-main .bm-template-title { max-width: 72px; } .compose-panel.is-reply .bm-template-arrow { border: none; border-left: 1px solid var(--color-border-default); border-radius: 0 6px 6px 0; padding: 4px 6px 4px 2px; color: var(--color-text-secondary); } .compose-panel.is-reply .bm-template-main:hover, .compose-panel.is-reply .bm-template-arrow:hover { background: var(--color-primary-surface); }   .compose-panel.is-reply .compose-bm-left .three-point-icon { transform: none; color: var(--color-text-tertiary); } .bm-popup-up { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 60; min-width: 180px; max-height: 240px; overflow: auto; } .bm-response-limit { display: flex; align-items: center; gap: 6px; position: relative; } .bm-rl-time { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--color-primary-on-surface); font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; white-space: nowrap; } .bm-rl-popup { right: 0; left: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 240px; } .bm-rl-quick { display: flex; gap: 6px; } .bm-rl-quick button { flex: 1; background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); color: var(--color-text-secondary); font-size: var(--font-2xs); padding: 4px 6px; cursor: pointer; white-space: nowrap; } .bm-rl-quick button:hover { background: var(--color-primary-surface); color: var(--color-primary-on-surface); }   .sch-sheet-wrap { display: none; } .bm-send-split { display: inline-flex; align-items: stretch; position: relative; } .bm-send-split .btn-compose-send { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .bm-send-arrow { background: var(--color-primary); border: none; border-left: 1px solid rgba(255, 255, 255, 0.35); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: #fff; font-size: 9px; padding: 0 8px; cursor: pointer; } .bm-send-arrow.email { background: var(--color-text-tertiary); } .bm-send-popup { right: 0; left: auto; }   .compose-split-bottom.compact { height: auto !important; flex: 0 0 auto; overflow: visible; }   .compose-split-bottom.compact > .compose-panel { margin-top: 0; margin-bottom: 0; } .compose-split-bottom.compact .compose-compact-bar { margin-bottom: 0; }   .talk-layout.compose-full .folder-panel, .talk-layout.compose-full .message-list-panel, .talk-layout.compose-full .panel-splitter { display: none; }   .talk-layout.compose-full .message-detail-panel { flex: 1; }   .recipient-tag.to-chip { background: var(--color-primary-surface); border: 1px solid var(--color-primary); color: var(--color-text-primary); } .recipient-tag.cc-chip { background: var(--color-warning-surface); border: 1px solid var(--color-warning); color: var(--color-text-primary); } .recipient-tag.bcc-chip { background: var(--color-badge-default-bg); border: 1px solid var(--color-border-muted); color: var(--color-text-primary); } .recipient-tag .chip-at, .recipient-tag .chip-label { font-weight: var(--weight-bold); color: var(--color-text-primary); } .recipient-tag .chip-at { margin-left: 3px; } .recipient-tag .chip-label { margin: 0 4px 0 2px; } .recipient-tag.cc-chip .chip-at, .recipient-tag.cc-chip .chip-label, .recipient-tag.bcc-chip .chip-at, .recipient-tag.bcc-chip .chip-label { font-weight: var(--weight-normal); color: var(--color-text-secondary); } .recipient-tag .chip-suffix { margin-right: 4px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .recipient-tag .chip-plus { width: 9px; height: 9px; margin-right: 4px; color: var(--color-primary-on-surface); flex-shrink: 0; } .chip-clock { width: 12px; height: 12px; color: var(--color-text-tertiary); flex-shrink: 0; }   .recipient-tag.to-chip, .recipient-tag.cc-chip, .recipient-tag.bcc-chip { border-radius: 5px; display: inline-flex; align-items: center; gap: 0; font-size: var(--font-xs); padding: 2px 2px 2px 0; margin: 3px 4px; } .recipient-tag.to-chip .btn-tag-remove, .recipient-tag.cc-chip .btn-tag-remove, .recipient-tag.bcc-chip .btn-tag-remove { color: var(--color-text-tertiary); } .recipient-tag.to-chip .btn-tag-remove:hover, .recipient-tag.cc-chip .btn-tag-remove:hover, .recipient-tag.bcc-chip .btn-tag-remove:hover { color: var(--color-error); }   .quote-mentions-wrap { display: flex; align-items: center;   flex-wrap: nowrap; min-width: 0; max-width: 100%; gap: 4px;   padding-left: 2px; margin-top: 0; margin-bottom: 3px; } .qm-arrow { color: var(--color-text-tertiary); font-size: var(--font-sm); } .qm-cc { color: var(--color-text-tertiary); font-size: var(--font-2xs); margin-left: 8px; } .qm-pill { display: inline-flex; align-items: center; background: var(--color-bg-elevated); border: 1.5px solid var(--color-primary); border-radius: 6px; color: var(--color-text-primary); font-size: var(--font-sm); font-weight: var(--weight-semibold); padding: 2px 10px; cursor: pointer; } .qm-pill.cc { border-color: var(--color-warning); } .qm-pill:hover { background: var(--color-bg-sunken); }   .qm-name { display: inline; background: none; border: none; padding: 0; margin: 0; color: var(--color-text-tertiary); font-size: var(--font-sm); font-weight: var(--weight-normal); cursor: pointer; text-align: left;   min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;   flex: 0 1 auto; } .qm-name:hover { color: var(--color-text-secondary); text-decoration: underline; } .qm-name.bcc { cursor: default; } .qm-name.bcc:hover { color: var(--color-text-tertiary); text-decoration: none; }     .message-list.density-compact .msg-row-main { height: 48px; } .message-list.density-comfortable .msg-row-main { height: 68px; } .message-list.density-compact .message-item.selected .msg-row-main { height: auto; min-height: 48px; } .message-list.density-comfortable .message-item.selected .msg-row-main { height: auto; min-height: 68px; }     .message-list.unread-subtle .message-item.has-alert::after { opacity: 0.7; } .message-list.unread-strong .message-item.has-alert::after { background: var(--color-error); }   .quote-add-contact { width: 18px; height: 18px; border-radius: 50%; border: none; background: var(--color-primary); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .quote-add-contact:hover { filter: brightness(0.92); } .quick-contact-overlay { position: fixed; inset: 0; z-index: 130; background: rgba(0, 0, 0, 0.2); } .quick-contact-card { position: fixed; z-index: 131; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px; max-width: calc(100vw - 32px); background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); padding: 16px; display: flex; flex-direction: column; gap: 10px; } .qc-title { font-size: var(--font-md); font-weight: var(--weight-bold); color: var(--color-text-primary); } .qc-field { display: flex; align-items: center; gap: 8px; font-size: var(--font-sm); color: var(--color-text-secondary); } .qc-field span { width: 56px; flex-shrink: 0; } .qc-field input, .qc-field select { flex: 1; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-sm); padding: 5px 8px; } .qc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } .qc-cancel { background: none; border: 1px solid var(--color-border-default); color: var(--color-text-secondary); border-radius: var(--radius-full); padding: 5px 14px; font-size: var(--font-sm); cursor: pointer; } .qc-save { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-full); padding: 5px 18px; font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; } .qc-save:disabled { opacity: 0.6; cursor: default; }   .quote-agg-toggle { background: none; border: none; color: var(--color-text-tertiary); font-size: var(--font-2xs); cursor: pointer; padding: 2px 6px; margin-left: auto; white-space: nowrap; } .quote-agg-toggle:hover { color: var(--color-primary-on-surface); }   .new-arrival-indicator { position: sticky; top: 6px; z-index: 20; display: flex; align-items: center; gap: 6px; margin: 6px auto; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-full); padding: 5px 16px; font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; box-shadow: 0 3px 12px rgba(16, 185, 129, 0.4); } .new-arrival-indicator:hover { filter: brightness(0.94); }   .sender-group-header { position: sticky; top: 0; z-index: 5; padding: 6px 12px 4px; font-size: var(--font-2xs); font-weight: var(--weight-bold); color: var(--color-text-secondary); background: var(--color-bg-sunken); border-bottom: 1px solid var(--color-border-muted); } .sender-group-header .sgh-count { margin-left: 6px; font-weight: var(--weight-normal); color: var(--color-text-tertiary); }   .message-list .date-header { position: sticky; top: 0; z-index: 5; background: var(--color-bg-sunken); }     .bulk-select-bar { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; background: var(--color-primary-surface); border-bottom: 1px solid var(--color-primary); padding: 6px 12px; position: relative; }   .bulk-bar-fit { container-type: inline-size; container-name: bulkbar; }     @container bulkbar (max-width: 600px) { .bulk-select-bar .bulk-key-hint { display: none; } } @container bulkbar (max-width: 509px) { .bulk-select-bar .bulk-total { display: none; } }   @container bulkbar (max-width: 411px) { .bulk-select-bar .bulk-guide-btn { display: none; } }   @container bulkbar (max-width: 325px) { .bulk-select-bar .bulk-select-all { display: none; } }   @container bulkbar (max-width: 280px) { .bulk-select-bar .bulk-ai { display: none; } }   .bulk-select-bar.is-confirm-processing .bulk-select-all, .bulk-select-bar.is-confirm-processing .bulk-ai, .bulk-select-bar.is-confirm-processing .bulk-guide-btn { display: none; }   @supports not (container-type: inline-size) { .bulk-select-bar { flex-wrap: wrap; } }   .bulk-exit { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 26px; padding: 2px 6px; background: none; border: none; line-height: 1; color: var(--color-text-secondary); cursor: pointer; } .bulk-exit svg { width: 12px; height: 12px; flex-shrink: 0; }   .bulk-count { font-size: var(--font-xs); color: var(--color-text-secondary); white-space: nowrap; } .bulk-count strong { color: var(--color-primary-on-surface); font-size: var(--font-sm); font-weight: var(--weight-bold); } .bulk-count-label { margin-left: 2px; }   .bulk-total { margin-left: 2px; color: var(--color-text-secondary); font-size: var(--font-xs); } .bulk-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }     .bulk-btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); color: var(--color-primary-on-surface); font-size: var(--font-xs); padding: 4px 8px; cursor: pointer;   white-space: nowrap; }   .bulk-btn-icon { width: 12px; height: 12px; flex-shrink: 0; } .bulk-btn:hover:not(:disabled) { background: var(--color-bg-sunken); } .bulk-btn:disabled { opacity: 0.55; cursor: default; }     .bulk-btn.bulk-check { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary); font-weight: var(--weight-semibold); padding: 4px 10px; }   .bulk-btn.bulk-check:disabled { opacity: 1; background: var(--color-primary-dark); border-color: var(--color-primary-dark); } .bulk-spinner { width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } }     .bulk-key-hint { margin-right: 6px; font-size: var(--font-2xs); color: var(--color-text-secondary); white-space: nowrap; } .bulk-key-hint strong { font-weight: var(--weight-semibold); } .bulk-key-hint-gap { display: inline-block; width: 1em; } .bulk-guide-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 9px; border: 1px solid var(--color-border-default); background: transparent; color: var(--color-text-secondary); font-size: var(--font-2xs); white-space: nowrap; cursor: pointer; } .bulk-guide-btn svg { width: 12px; height: 12px; flex-shrink: 0; } .bulk-guide-btn:hover { background: var(--color-bg-base); border-color: var(--color-primary); } .bulk-guide-popup { position: absolute; top: calc(100% + 4px); right: 8px; z-index: 60; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);   padding: 10px 12px; font-size: var(--font-xs); color: var(--color-text-secondary); display: grid; grid-template-columns: auto auto; column-gap: 12px; row-gap: 3px; white-space: nowrap; } .bulk-guide-popup .bulk-guide-key { font-weight: var(--weight-semibold); color: var(--color-text-primary); }     .bulk-undo-bar { display: flex; align-items: center; gap: 6px; background: var(--color-primary-surface); border-bottom: 1px solid var(--color-primary); padding: 6px 12px; }   .bulk-undo-check { width: 12px; height: 12px; flex-shrink: 0; color: var(--color-primary-on-surface); } .bulk-undo-text { font-size: var(--font-xs); color: var(--color-text-secondary);   } .bulk-undo-text strong { font-weight: var(--weight-semibold); }   .bulk-undo-btn { margin-left: auto; background: transparent; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); color: var(--color-primary-on-surface); padding: 4px 8px; font-size: var(--font-xs); cursor: pointer; white-space: nowrap; } .bulk-undo-btn:hover { background: var(--color-primary-surface-light); }   .bulk-confirm-overlay { position: fixed; inset: 0;   background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); padding: 24px; } .bulk-confirm-dialog { background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: var(--radius-md);   box-shadow: var(--shadow-lg); padding: 16px 20px; width: min(560px, 100%); max-height: 80vh; overflow-y: auto; } .bulk-confirm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .bulk-confirm-title { margin: 0; font-size: var(--font-lg); font-weight: var(--weight-semibold); color: var(--color-text-primary); }   .bulk-confirm-chip { margin-left: auto; flex-shrink: 0; background: var(--color-primary-surface); color: var(--color-primary-dark); border-radius: var(--radius-sm); padding: 2px 8px; font-size: var(--font-2xs); font-weight: var(--weight-semibold); white-space: nowrap; } .bulk-confirm-card { background: var(--color-bg-sunken); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 10px; } .bulk-confirm-ai { background: var(--color-primary-surface-light); } .bulk-confirm-eyebrow { display: block; font-size: var(--font-xs); font-weight: var(--weight-bold); color: var(--color-primary-dark); margin-bottom: 4px; } .bulk-confirm-lead { margin: 0 0 8px; font-size: var(--font-sm); color: var(--color-text-primary); } .bulk-confirm-rowhead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .bulk-confirm-flip { background: none; border: none; padding: 0; font-size: var(--font-xs); font-weight: var(--weight-bold); color: var(--color-primary-dark); cursor: pointer; text-decoration: underline; } .bulk-confirm-colcap { margin-left: auto; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); } .bulk-confirm-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--color-border-default); cursor: pointer; }   .bulk-confirm-row:hover, .bulk-confirm-plainrow.is-previewable:hover { background: var(--color-bg-sunken); } .bulk-confirm-row:focus-visible, .bulk-confirm-plainrow.is-previewable:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }   .bulk-confirm-row-switch { flex-shrink: 0; display: flex; align-items: center; padding: 4px; cursor: pointer; } .bulk-confirm-row-main { flex: 1 1 auto; min-width: 0; } .bulk-confirm-row-subject { display: block; font-size: var(--font-sm); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bulk-confirm-row-sub { display: block; font-size: var(--font-2xs); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bulk-confirm-row-count { flex-shrink: 0; font-size: var(--font-2xs); color: var(--color-text-secondary); } .bulk-confirm-strong { margin: 0 0 4px; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .bulk-confirm-ok { margin: 0 0 10px; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .bulk-confirm-note { margin: 0 0 2px; font-size: var(--font-xs); color: var(--color-text-secondary); } .bulk-confirm-notes { margin-bottom: 10px; } .bulk-confirm-more { background: none; border: none; padding: 0 0 6px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-primary-dark); cursor: pointer; } .bulk-confirm-list { margin-bottom: 10px; } .bulk-confirm-plainrow { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-top: 1px solid var(--color-border-default); min-width: 0; } .bulk-confirm-plainrow .bulk-confirm-row-subject { flex: 1 1 auto; } .bulk-confirm-plainrow.is-previewable { cursor: pointer; align-items: center; }   .bulk-confirm-row-chevron { flex-shrink: 0; margin: 0 2px 0 10px; color: var(--color-text-tertiary); } .bulk-confirm-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; }   .bulk-confirm-cancel { background: none; border: none; padding: 6px 4px; font-size: var(--font-sm); color: var(--color-text-secondary); cursor: pointer; text-decoration: underline; } .bulk-confirm-proceed { background: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); color: var(--color-text-on-primary); padding: 6px 16px; font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; white-space: nowrap; } .bulk-confirm-proceed:hover { background: var(--color-primary-dark); } .bulk-confirm-alert { width: min(420px, 100%); } .bulk-confirm-alert-text { margin: 0; font-size: var(--font-sm); color: var(--color-text-primary); white-space: pre-wrap; }   .btn-header-icon {   position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: var(--color-text-primary); cursor: pointer; flex: none; }   .btn-header-icon::before { content: ""; position: absolute; width: 22px; height: 22px; border-radius: var(--radius-sm); background: transparent; } .btn-header-icon > * { position: relative; } .btn-header-icon:hover::before { background: var(--color-primary-surface); } .btn-header-icon:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -4px; border-radius: var(--radius-sm); } .btn-header-icon:disabled { opacity: .4; cursor: default; } .btn-header-icon:disabled:hover::before { background: transparent; }   .btn-header-icon.sort-cycle { display: inline-flex; align-items: center; gap: 4px; width: auto; padding: 0 8px; }   .btn-header-icon.sort-cycle::before { width: 100%; height: 22px; } .sort-mode-label { font-size: var(--font-2xs); color: var(--color-text-tertiary); white-space: nowrap; }   .quote-hover-bar { position: absolute; top: 0; right: 4px; z-index: 10; display: flex; align-items: center; gap: 2px; padding: 2px; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); opacity: 0; visibility: hidden; transition: opacity var(--duration-fast) var(--ease-default); } .quote-item:hover .quote-hover-bar { opacity: 1; visibility: visible; }   .quote-hover-bar .btn-quote-action { opacity: 1 !important; visibility: visible !important; width: 28px; height: 28px; }   .quote-hover-bar .btn-quote-action.btn-quote-task { width: auto; gap: 5px; padding: 0 8px; color: var(--color-feature-task-dark); font-size: var(--font-xs); font-weight: var(--weight-semibold); } .quote-hover-bar .btn-quote-action.btn-quote-task:hover { background: var(--color-feature-task-surface); }   .quote-hover-bar .btn-quote-action.btn-quote-askai {   width: auto; gap: 5px; padding: 0 8px; color: var(--color-ai-assist-accent); background: var(--color-ai-assist-surface); font-size: var(--font-xs); font-weight: var(--weight-semibold); } .quote-hover-bar .btn-quote-action.btn-quote-askai:hover { background: var(--color-ai-assist-surface); }   .quote-hover-bar .btn-quote-action.btn-quote-task > span, .quote-hover-bar .btn-quote-action.btn-quote-askai > span { white-space: nowrap; }   .quote-hover-bar.icons-only .btn-quote-action.btn-quote-task > span, .quote-hover-bar.icons-only .btn-quote-action.btn-quote-askai > span { display: none; } .quote-hover-bar.icons-only .btn-quote-action.btn-quote-task, .quote-hover-bar.icons-only .btn-quote-action.btn-quote-askai { width: 28px; padding: 0; gap: 0; justify-content: center; }   .quote-hover-bar.compact .btn-quote-action.btn-quote-pin, .quote-hover-bar.compact .btn-quote-action.btn-quote-reply, .quote-hover-bar.compact .btn-quote-action.btn-quote-forward { display: none; }   .quote-hover-bar .btn-quote-action.btn-quote-pin.is-on { background: var(--color-feature-pin); color: var(--color-text-on-primary); } .quote-hover-bar .btn-quote-action.btn-quote-pin.is-on:hover { background: var(--color-feature-pin-dark); }   .quote-hover-bar .btn-quote-action.btn-quote-protect.is-on { background: var(--color-primary); color: var(--color-text-on-primary); } .quote-hover-bar .btn-quote-action.btn-quote-protect.is-on:hover { opacity: .85; }     .reply-line-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }   .rlo-path { stroke: var(--rlo-color, var(--color-primary)); stroke-width: var(--rlo-thickness, 1); fill: none; opacity: 0.25; }   .rlo-dot { fill: var(--rlo-color, var(--color-primary)); opacity: 0.25; } .rlo-label-bg { fill: var(--color-bg-base); stroke: var(--color-border-muted); stroke-width: 1; opacity: 0.9; } .rlo-label-text { fill: var(--color-text-tertiary); font-size: var(--rlo-label-size, 11px); font-weight: 600; }   .thread-scroll-row { display: flex; flex: 1 1 auto; min-height: 0; } .thread-scroll-row > .inhouse-quote-list { min-width: 0; }   .thread-scroll-row:has(> .thread-timeline:not([hidden])) > .inhouse-quote-list { scrollbar-width: none; } .thread-scroll-row:has(> .thread-timeline:not([hidden])) > .inhouse-quote-list::-webkit-scrollbar { display: none; } .thread-timeline { position: relative;   z-index: 5; display: flex; flex: 0 0 26px; width: 26px; background: var(--color-bg-base); border-left: 1px solid var(--color-border-default); user-select: none; }   .thread-timeline[hidden] { display: none; } .thread-timeline-svg { display: block; flex: 1; min-width: 0; width: 100%; height: 100%; cursor: pointer; touch-action: none;   overflow: visible; }   .tl-track { fill: var(--color-border-muted); } .tl-tick { stroke: var(--color-border-muted); stroke-width: 1; } .tl-msg { stroke: var(--color-text-tertiary); stroke-opacity: .45; stroke-width: 1; }   .tl-dot-unchecked { fill: var(--color-primary); } .tl-dot-overdue { fill: var(--color-error); } .tl-occ { fill: var(--color-warning); } .tl-occ-cur { fill: var(--color-warning); stroke: var(--color-text-primary); stroke-width: 1.2; }   .tl-pill-text { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } .tl-edge-pill .tl-pill-bg { fill: var(--color-bg-base); stroke: var(--color-border-default); } .tl-edge-pill .tl-pill-text { fill: var(--color-text-tertiary); font-weight: 400; } .tl-flag-pill .tl-pill-bg { fill: var(--color-text-primary); } .tl-flag-pill .tl-pill-text { fill: var(--color-bg-base); } .tl-hint-pill .tl-pill-bg { fill: var(--color-warning); } .tl-hint-pill .tl-pill-text { fill: var(--color-text-on-primary); } .tl-hover { opacity: 0; pointer-events: none; }   .thread-timeline:hover .tl-hover, .thread-timeline.dragging .tl-hover { opacity: 1; }   .tl-thumb { fill: var(--color-primary); fill-opacity: .16; stroke: var(--color-primary); stroke-opacity: .55; stroke-width: 1; cursor: grab; } .tl-thumb.drag { cursor: grabbing; fill-opacity: .28; }   .tl-cursor { stroke: var(--color-text-tertiary); stroke-dasharray: 2 2; stroke-width: 1; pointer-events: none; }   .quote-thread-start, .quote-date-separator { display: flex; align-items: center; gap: 10px; margin: 10px 4px; color: var(--color-text-tertiary); font-size: var(--font-2xs); } .quote-thread-start::before, .quote-thread-start::after, .quote-date-separator::before, .quote-date-separator::after { content: ""; flex: 1; height: 1px; background: var(--color-border-muted); } .quote-thread-start span, .quote-date-separator span { white-space: nowrap; }   .qm-read { display: inline-flex; align-items: center; gap: 3px; font-size: var(--font-2xs); color: var(--color-text-tertiary); margin-right: 4px; } .qm-read::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }   .btn-download-all { display: inline-flex; align-items: center; gap: 6px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); color: var(--color-text-secondary); font-size: var(--font-2xs); padding: 4px 12px; margin-bottom: 6px; cursor: pointer; } .btn-download-all:hover { background: var(--color-bg-sunken); }   .quote-ctx-overlay { position: fixed; inset: 0; z-index: 120; }   .quote-ctx-menu { position: fixed; max-width: calc(100vw - 16px); z-index: 121; min-width: 200px;   max-height: calc(100vh - 16px); overflow: auto; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); padding: 4px; display: flex; flex-direction: column; } .quote-ctx-menu button { background: none; border: none; text-align: left;   display: flex; align-items: center; gap: 10px; padding: 7px 12px; font-size: var(--font-sm); color: var(--color-text-primary); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; } .quote-ctx-menu button:hover { background: var(--color-bg-sunken); } .quote-ctx-menu .ctx-danger { color: var(--color-error); }   .quote-ctx-menu .icon-CheckIcon { color: var(--color-success); } .quote-ctx-menu .icon-ShieldIcon { color: var(--color-feature-tracking); } .quote-ctx-menu .icon-PinOutlineIcon { color: var(--color-feature-pin); } .quote-ctx-menu .icon-PrintIcon, .quote-ctx-menu .icon-EyeIcon, .quote-ctx-menu .icon-InfoIcon, .quote-ctx-menu .icon-BellOffIcon, .quote-ctx-menu .icon-CloseIcon { color: var(--color-text-secondary); } .quote-ctx-menu .icon-SparkleIcon { color: var(--color-ai-assist-accent); fill: currentColor; } .quote-ctx-menu .icon-DeleteIcon { color: var(--color-error); } .quote-ctx-menu .icon-ReplyIcon, .quote-ctx-menu .icon-ForwardIcon, .quote-ctx-menu .icon-ContactsIcon { color: var(--color-primary-on-surface); } .quote-ctx-menu .icon-TaskIcon { color: var(--color-feature-task); } .quote-ctx-menu .icon-SmileIcon { color: var(--color-warning-dark); } .quote-ctx-menu .ctx-sep { height: 1px; background: var(--color-border-muted); margin: 4px 8px; }   .quote-ctx-menu .qcm-info { display: flex; align-items: center; gap: 6px; padding: 7px 12px 6px; font-size: var(--font-2xs); color: var(--color-text-tertiary); cursor: default; } .quote-ctx-menu .qcm-info-head { color: var(--color-text-secondary); font-weight: var(--weight-semibold); }   .quote-detail-panel { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-sunken); font-size: var(--font-2xs); color: var(--color-text-secondary); user-select: text; display: flex; flex-direction: column; gap: 2px; word-break: break-all; } .quote-detail-copy { align-self: flex-end; background: none; border: 1px solid var(--color-border-default); border-radius: var(--radius-full); color: var(--color-text-secondary); font-size: var(--font-2xs); padding: 2px 10px; cursor: pointer; }     .quote-search-fab.searching { color: var(--color-warning-dark); } .quote-search-fab { position: sticky; top: 4px; margin-left: auto; z-index: 30; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border-default); background: var(--color-bg-elevated); color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .quote-search-panel { position: sticky; top: 4px; z-index: 31; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 6px 10px; margin: 0 4px 8px 4px; } .qs-input { flex: 1; min-width: 120px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-sm); padding: 4px 8px; } .qs-status { font-size: var(--font-2xs); color: var(--color-text-tertiary); white-space: nowrap; } .qs-nav { background: none; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); color: var(--color-text-secondary); padding: 2px 8px; cursor: pointer; } .qs-chip { background: var(--color-bg-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); color: var(--color-text-secondary); font-size: var(--font-2xs); padding: 2px 10px; cursor: pointer; white-space: nowrap; } .qs-chip.on { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); }   .qs-chip-attach:hover { border-color: var(--color-feature-file); } .qs-chip-attach.on { background: var(--color-feature-file-surface); border-color: var(--color-feature-file); color: var(--color-feature-file); }   .attach-filter-notice { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) var(--space-4); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); background: var(--color-feature-file-surface); } .attach-filter-notice-text { flex: 1 1 auto; font-size: var(--font-xs); color: var(--color-text-primary); } .attach-filter-showall { flex: 0 0 auto; padding: 2px 10px; border: 1px solid var(--color-feature-file); border-radius: var(--radius-md); background: var(--color-bg-base); font-size: var(--font-xs); color: var(--color-feature-file); cursor: pointer; } .attach-filter-showall:hover { background: var(--color-feature-file-surface); }   .quote-item.attach-shelf { width: 100%; max-width: none; align-self: stretch; background: var(--color-bg-base); border-left: 3px solid var(--color-feature-file); border-radius: 0; }   .quote-item.attach-shelf.mine, .quote-item.attach-shelf.theirs { margin-left: 0; margin-right: 0; }   .quote-item.attach-shelf .quote-header { background: var(--color-feature-file-surface); }   .shelf-body-row { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) var(--space-4); } .shelf-body-head { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-sm); color: var(--color-text-secondary); } .shelf-read-in-thread { flex: 0 0 auto; border: 0; background: transparent; padding: 0; font-size: var(--font-xs); font-weight: 600; color: var(--color-primary-dark); cursor: pointer; } .shelf-read-in-thread:hover { text-decoration: underline; }   .quote-item.attach-shelf .quote-hover-bar, .quote-item.attach-shelf .quote-pin-badge { display: none; } .quote-item.search-hit { outline: 2px solid var(--color-warning); outline-offset: 2px; border-radius: var(--radius-md); } .quote-item.search-current { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-md); }   .compose-ghost { position: absolute; inset: 0; padding: 10px 12px; color: var(--color-text-tertiary); font-size: var(--font-sm); white-space: pre-wrap; overflow: hidden; pointer-events: none; } .compose-ghost-hint { position: absolute; right: 10px; bottom: 10px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); padding: 2px 10px; font-size: var(--font-2xs); color: var(--color-text-secondary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); pointer-events: none; }   .bm-emoji-btn { width: 34px; height: 34px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-elevated); font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .bm-emoji-btn:hover { background: var(--color-bg-sunken); } .bm-reaction-popup { display: flex; gap: 4px; padding: 6px; right: 0; left: auto; min-width: 0; }   .cg-btn { width: 28px; height: 28px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: transparent; font-size: var(--font-lg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .cg-btn:hover { background: var(--color-bg-sunken); } .cg-popup { right: 0; left: auto; min-width: 200px; padding: 12px; border-radius: 10px; display: flex; flex-direction: column; } .cg-title { font-size: var(--font-sm); font-weight: bold; color: var(--color-text-primary); margin-bottom: 8px; } .cg-sublabel { font-size: var(--font-xs); color: var(--color-text-secondary); margin-bottom: 2px; } .cg-input { height: 32px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-elevated); color: var(--color-text-primary); margin-bottom: 8px; } .cg-presets { display: flex; flex-wrap: wrap; gap: 6px; } .cg-preset { width: 56px; height: 34px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-elevated); color: var(--color-text-primary); font-size: var(--font-sm); font-weight: 600; cursor: pointer; } .cg-preset:hover { background: var(--color-primary-surface-light); border-color: var(--color-primary); } .cg-preset:active { background: var(--color-primary-surface); } .cg-preset-wide { width: 118px; } .cg-custom { display: flex; align-items: center; margin-top: 8px; } .cg-custom-input { width: 90px; margin-bottom: 0; } .cg-unit { margin: 0 8px 0 6px; color: var(--color-text-secondary); } .cg-note { margin-top: 8px; font-size: var(--font-xs); color: var(--color-text-secondary); }   .schedule-email-note { margin: 0 0 12px; font-size: var(--font-xs); color: var(--color-warning); white-space: normal; word-break: break-word; }   .compose-popup-menu.bm-schedule-popup { right: 0; left: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; width: 260px; min-width: 260px; max-height: none; overflow: visible;   background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 8px; color: var(--color-text-primary); } .compose-popup-menu.bm-schedule-popup .popup-section-label, .compose-popup-menu.bm-schedule-popup .popup-sub-label, .compose-popup-menu.bm-schedule-popup .schedule-dt-label { color: var(--color-text-secondary); padding: 0; }   .compose-popup-menu.bm-schedule-popup .endconv-buttons { display: flex; gap: 8px; margin-top: 4px; } .compose-popup-menu.bm-schedule-popup .endconv-buttons button { flex: 1 1 0; justify-content: center; padding: 6px 0; border-radius: var(--radius-sm); font-size: var(--font-sm); } .compose-popup-menu.bm-schedule-popup .endconv-cancel { background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); color: var(--color-text-secondary); } .compose-popup-menu.bm-schedule-popup .endconv-confirm { background: var(--color-primary); border: 1px solid var(--color-primary); color: var(--color-text-on-primary); } .compose-popup-menu.bm-schedule-popup .endconv-confirm:hover { background: var(--color-primary-dark); }   .compose-bm-left .btn-compose-tool.bm-ai-btn { width: auto; height: auto; padding: 4px 6px; border-radius: 4px; } .compose-bm-left .btn-compose-tool.bm-ai-btn:hover:not(:disabled) { background: var(--color-ai-assist-surface); } .bm-ai-label { color: var(--color-ai-assist-accent); font-weight: var(--weight-bold); font-size: var(--font-xs); white-space: nowrap; }   .ai-suggest-card { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); padding: 4px 8px; margin: 2px 4px 4px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }   .ai-suggest-head { display: flex; align-items: center; gap: 4px; margin: 2px 10px 0 0; } .ai-suggest-icon { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-primary-on-surface); } .ai-suggest-title { font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); white-space: nowrap; }   .ai-suggest-close { align-self: center; margin-left: 8px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-tertiary); cursor: pointer; } .ai-suggest-close:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); } .ai-polish-card { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-elevated); padding: 10px 12px; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; } .ai-polish-head { display: flex; align-items: center; gap: 8px; } .ai-polish-badge { background: #764ba2; color: #fff; font-size: var(--font-2xs); font-weight: var(--weight-bold); border-radius: var(--radius-full); padding: 2px 10px; } .ai-polish-reason { flex: 1; color: var(--color-text-secondary); font-size: var(--font-2xs); } .ai-polish-issues { margin: 0; padding-left: 18px; color: var(--color-text-secondary); font-size: var(--font-sm); } .ai-polish-rewritten-label { color: var(--color-text-tertiary); font-size: var(--font-2xs); } .ai-polish-rewritten { white-space: pre-wrap; user-select: text; font-size: var(--font-sm); color: var(--color-text-primary); background: var(--color-bg-sunken); border-radius: var(--radius-sm); padding: 8px 10px; max-height: 200px; overflow: auto; } .ai-polish-instruction { border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-sm); padding: 6px 8px; }   .ai-polish-style-hint { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .ai-polish-style-hint-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-polish-style-clear { flex-shrink: 0; background: none; border: none; padding: 0; font: inherit; color: var(--color-text-tertiary); text-decoration: underline; cursor: pointer; } .ai-polish-style-clear:hover { color: var(--color-text-secondary); } .ai-polish-actions { display: flex; justify-content: flex-end; gap: 8px; } .ai-polish-rerun { background: none; border: 1px solid var(--color-border-default); color: var(--color-text-secondary); border-radius: var(--radius-full); padding: 4px 12px; font-size: var(--font-sm); cursor: pointer; } .ai-polish-replace { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-full); padding: 4px 14px; font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; }     .quote-body-row { display: flex; align-items: center; gap: 4px;   } .quote-body-row > .quote-body-border { flex: 1; min-width: 0; } .quote-check-mark { flex-shrink: 0; z-index: 4; padding: 0; margin-left: -6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; border: none; }   .quote-body-row > .quote-check-mark { position: sticky; top: 8px; bottom: 88px; } .quote-check-mark svg { width: 12px; height: 12px; }   .quote-check-mark.checked { width: 20px; height: 20px; border-radius: 4px; background: var(--color-primary); } .quote-check-mark.checked:hover { filter: brightness(0.92); }   .quote-check-mark.target { width: 24px; height: 24px; border-radius: 5px; background: #fff; border: 2px solid var(--color-error); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .quote-check-mark.target:hover { background: var(--color-error-surface, rgba(239,68,68,0.08)); }   .quote-check-mark.unchecked { width: 20px; height: 20px; border-radius: 50%; background: transparent; } .quote-check-mark.unchecked::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--color-error); } .quote-check-mark.unchecked:hover::before { background: var(--color-error-surface, rgba(239,68,68,0.10)); }   .quote-check-mark.shield { width: 24px; height: 24px; border-radius: 4px; background: transparent; } .quote-check-mark.shield svg { width: 18px; height: 18px; } .quote-check-mark.shield.unchecked::before { content: none; }   .quote-check-mark.shield.unchecked { color: var(--color-error); } .quote-check-mark.shield.checked { background: transparent; color: var(--color-primary-on-surface); } .quote-check-mark.shield:hover { background: var(--color-bg-sunken); }   .quote-item.theirs { margin-left: 8px; }   .reply-target-badge { margin: 4px 0 2px 0; } .reply-target-badge span { display: inline-block; background: var(--color-primary); color: #fff; font-size: var(--font-2xs); font-weight: var(--weight-bold); border-radius: var(--radius-sm); padding: 2px 10px; } .quote-item.reply-target { border: 2px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-primary-surface); }   .details-close-row { display: flex; justify-content: flex-end; }   .compose-two-col .compose-body-border { display: flex; flex-direction: column; flex: 1; min-height: 0; } .compose-two-col .compose-body-scroll { display: flex; flex-direction: column; flex: 1; min-height: 0; } .compose-two-col .compose-body-grow { flex: 1; display: flex; flex-direction: column; min-height: 0; } .compose-two-col .compose-body-grow .compose-textarea { flex: 1; min-height: 120px; }   .message-detail-panel.composing-split.compose-two-col { flex-direction: row; } .message-detail-panel.compose-two-col .compose-split-top { flex: 1 1 50%; height: auto; min-width: 0; } .message-detail-panel.compose-two-col .compose-splitter { display: none; } .message-detail-panel.compose-two-col .compose-split-bottom { flex: 1 1 50%; height: auto; min-width: 0; overflow-y: auto; border-left: 1px solid var(--color-border-default); }   .guidance-plain { max-width: 520px; text-align: left; }   .guidance-title-wpf { color: var(--color-primary-on-surface); font-size: 13pt; font-weight: 800; margin: 0; }   .guidance-line { margin: 0; font-size: 12px; color: var(--color-text-primary); } .guidance-line-bold { font-weight: var(--weight-semibold); color: var(--color-text-primary); }   .guidance-line-gap { margin-top: 10px; }   .guidance-line-first { margin-top: 20px; } .guidance-line-bold.guidance-line-after-gap { margin-bottom: 10px; } .guidance-plain { max-width: none; }   .msg-row-main { display: flex; align-items: center;   margin: 0 4px; padding: 8px 4px 8px 12px; border: 1px solid transparent; border-radius: var(--radius-sm); gap: var(--space-2);   height: 56px;   box-sizing: border-box; overflow: hidden; }   .message-item.selected .msg-row-main, .message-item.search-mode .msg-row-main { height: auto; min-height: 56px; overflow: visible; }   .msg-row-main { position: relative; } .message-item:not(.selected)::before { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: var(--color-border-default); opacity: 0.5; }   .msg-checkbox { display: flex; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; cursor: pointer; position: relative; } .msg-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }   .msg-checkbox-mark { width: 16px; height: 16px; flex-shrink: 0; border: 1px solid var(--color-text-tertiary); border-radius: 2px; background: var(--color-bg-base); display: flex; align-items: center; justify-content: center; position: relative; transition: all var(--duration-fast) var(--ease-default); } .msg-checkbox:hover .msg-checkbox-mark { border-color: var(--color-primary); } .msg-checkbox input:checked ~ .msg-checkbox-mark { border-color: var(--color-primary); } .msg-checkbox input:checked ~ .msg-checkbox-mark::before { content: ''; position: absolute; width: 9px; height: 5px; border-left: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); } .msg-checkbox input:checked ~ .msg-checkbox-mark::after { display: none; }   .msg-avatar {   width: 35px; min-width: 35px; height: 25px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; overflow: visible;   align-self: center; margin-top: 0; }   .msg-avatar { margin-right: -6px; }   .msg-avatar > .msg-avatar-img, .msg-avatar > .msg-avatar-initial, .msg-avatar > .msg-avatar-logo { width: 25px; height: 25px; flex: 0 0 25px; }     .message-list .message-item .msg-avatar > .msg-avatar-initial[hidden], .message-list .message-item .msg-avatar > .msg-avatar-img[hidden], .msg-avatar .msg-avatar-initial[hidden], .msg-avatar .msg-avatar-img[hidden] { display: none; } .msg-avatar .msg-avatar-initial { width: 25px; height: 25px; border-radius: var(--radius-avatar); background: var(--color-primary-surface); display: flex; align-items: center; justify-content: center;   color: var(--color-primary-on-surface); font-size: var(--font-xs);   font-weight: var(--weight-bold); } .msg-center { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }   .msg-line1 { display: flex; align-items: center; gap: var(--space-1); line-height: 1.3; min-width: 0; } .msg-line1-right { display: flex; align-items: center;   gap: 0; flex-shrink: 0; margin-left: auto; padding-left: 6px; } .msg-line2 { display: flex; align-items: center; gap: var(--space-1); line-height: 1.35; min-width: 0; }   .msg-sender-name { color: var(--color-text-tertiary); font-size: var(--font-xs); font-weight: var(--weight-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }   .msg-status-icons { display: flex; align-items: center; gap: 3px; flex-shrink: 0; margin-left: 8px; }       .msg-checked-badge {   position: absolute; right: 4px; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--color-info); display: flex; align-items: center; justify-content: center; } .msg-checked-badge svg { width: 8px; height: 8px; } .status-icon { width: 13px; height: 13px; opacity: 0.7; } .status-icon-sm { width: 12px; height: 12px; }   .bookmark-tag-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 8px; font-size: 10px; line-height: 1.4; font-weight: var(--weight-medium); } .bookmark-tag-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }   .bookmark-note { font-size: 11px; color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }   .bookmark-filter-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--color-border-default); flex-wrap: wrap; }   .badge-recent { margin: 0 4px; }   .msg-subject {   margin: 4px 4px 0 0; font-size: var(--font-sm); font-weight: var(--weight-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); line-height: 1.4; flex: 1; min-width: 0; } .msg-timestamp { color: var(--color-text-tertiary); font-size: var(--font-xs); white-space: nowrap; }   .msg-alert-badge { min-width: 18px;   min-height: 18px;   background: var(--color-error); border-radius: var(--radius-full); color: var(--color-bg-base); font-size: var(--font-xs);   font-weight: var(--weight-semibold); display: flex; align-items: center; justify-content: center; padding: 0 5px; line-height: 1; flex-shrink: 0; } .msg-alert-badge.many { font-size: 9px; }   .msg-alert-loading { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dot-spinner { width: 12px; height: 12px; border: 2px solid var(--color-border-default); border-top-color: var(--color-primary); border-radius: 50%; animation: dot-spin 0.7s linear infinite; } @keyframes dot-spin { to { transform: rotate(360deg); } }   .msg-avatar-initial { font-size: var(--font-md); font-weight: var(--weight-bold); color: var(--color-primary-on-surface); line-height: 1; } .msg-avatar.rename-system .msg-avatar-initial { background: var(--color-bg-sunken); color: var(--color-text-tertiary); }   .msg-avatar-img { width: 25px; height: 25px; border-radius: var(--radius-avatar); object-fit: cover; } .msg-avatar-logo { width: 25px; height: 25px; border-radius: var(--radius-avatar); }   .msg-chat-mark {   position: absolute; top: -8px; right: 4px; bottom: auto; width: 16px; height: 16px; background: none; border-radius: 0; padding: 0; }     .badge-order, .badge-rename-track { margin-left: 4px; }     .filter-tags-bar { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-1); padding: var(--space-2) var(--space-3); background: var(--color-bg-base); border-bottom: 1px solid var(--color-border-default); } .filter-tags-flow { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }   .filter-tags-flow.is-expanded { max-height: 96px; overflow-y: auto; } .filter-tag-more { flex: none; background: transparent; border: 1px dashed var(--color-text-tertiary); color: var(--color-text-secondary); } .filter-tag-more:hover { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-on-surface); } .filter-tag { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--color-primary-surface); border: none; border-radius: var(--radius-full); padding: 3px 10px; font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-primary-on-surface); cursor: pointer; transition: all var(--duration-fast) var(--ease-default); } .filter-tag:hover { filter: brightness(0.97); }   .filter-tag-text, .filter-tag-x { background: transparent; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; } .filter-tag-x { font-size: var(--font-sm); font-weight: var(--weight-bold); margin-left: 2px; opacity: 0.6; } .filter-tag-x:hover { opacity: 1; } .filter-tag-clear { flex: none; background: transparent; color: var(--color-text-tertiary); } .filter-tag-clear:hover { background: var(--color-border-default); color: var(--color-text-secondary); }   .status-icon-tooltip { display: inline-flex; align-items: center; }     .load-more { padding: 10px 0 14px 0; text-align: center; background: var(--color-bg-sunken); } .load-more-band { min-height: 34px; display: flex; align-items: center; justify-content: center; }   .load-more-rule { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 20px; } .load-more-rule::before, .load-more-rule::after { content: ""; flex: 1; height: 1px; background: var(--color-border-default); } .load-more-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-full); background: var(--color-bg-base); color: var(--color-text-secondary); font-size: var(--font-sm); font-weight: var(--weight-medium); white-space: nowrap; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default); } .load-more-chip:hover { border-color: var(--color-primary); color: var(--color-primary-dark); background: var(--color-primary-surface); } .load-more-chip .load-more-count { color: var(--color-text-tertiary); font-weight: var(--weight-normal); font-variant-numeric: tabular-nums; }   .load-more-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-sm); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }   .remain-text { font-size: var(--font-xs); font-weight: var(--weight-normal); color: var(--color-text-tertiary); text-align: center; margin-bottom: 6px; } .btn-green { padding: 4px 16px; border: none; background: var(--color-primary); color: var(--color-bg-base); border-radius: 5px; cursor: pointer; font-size: 9pt; font-weight: var(--weight-semibold); } .btn-green:hover { background: var(--color-primary-light); color: var(--color-bg-base); } .btn-green:disabled { background: var(--color-border-default); color: var(--color-text-tertiary); cursor: default; }   .btn-load-more { display: inline-flex; align-items: center; justify-content: center; padding: 6px 20px; border: none; border-radius: 16px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; transition: background var(--duration-fast) var(--ease-default); } .btn-load-more:hover { background: var(--color-primary-dark); } .btn-load-more:disabled { background: var(--color-border-default); color: var(--color-text-tertiary); cursor: default; }   .btn-load-more:disabled.btn-load-more { background: var(--color-primary); color: var(--color-text-on-primary); }   .load-more-dots { display: inline-flex; align-items: center; margin-right: 10px; } .load-more-dots span { width: 10px; height: 10px; margin-right: 5px; border-radius: var(--radius-full);   background: currentColor; animation: load-more-dot 0.9s ease-in-out infinite; } .load-more-dots span:nth-child(2) { animation-delay: 0.15s; } .load-more-dots span:nth-child(3) { animation-delay: 0.30s; margin-right: 0; } @keyframes load-more-dot { 0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 1; } } .btn-gray { padding: 4px 16px; border: none; background: var(--color-border-default); color: var(--color-text-secondary); border-radius: 5px; cursor: pointer; font-size: 9pt; } .btn-gray:hover { background: var(--color-border-muted); }     .btn-new-message-header { display: flex; align-items: center; gap: 4px; border: none; background: var(--color-primary); color: var(--color-bg-base); border-radius: var(--radius-md); padding: 4px 10px; cursor: pointer; font-size: 11px; font-weight: var(--weight-semibold); white-space: nowrap; margin-left: 4px; flex-shrink: 0; } .btn-new-message-header:hover { background: var(--color-primary-dark); } .btn-new-message-header img { filter: brightness(10); }     .top-guidance { padding: 0 24px 0 30px; margin: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 100%; gap: 0; } .guidance-title { font-weight: var(--weight-bold); color: var(--color-text-primary); font-size: 18px; margin: 0; }   .btn-small-red { border: none; background: var(--color-error); color: var(--color-text-on-primary, #fff); border-radius: 12px; height: 25px; padding: 1px 10px; cursor: pointer; font-size: 12px; font-weight: 700; flex-shrink: 0; } .btn-small-red:hover { opacity: 0.85; }   .btn-small-green { border: none; background: var(--color-primary); color: var(--color-text-on-primary, #fff); border-radius: 12px; height: 25px; padding: 1px 10px; cursor: pointer; font-size: 12px; font-weight: 700; flex-shrink: 0; } .btn-small-green:hover { background: var(--color-primary-dark); }   .guidance-btn { align-self: flex-start; } .guidance-btn.guidance-btn-checked { margin: 15px 0; } .guidance-btn.guidance-btn-cleanup { margin: 0 0 10px; }   .icon-8 { width: 8px; height: 8px; } .icon-10 { width: 10px; height: 10px; } .icon-12 { width: 12px; height: 12px; } .icon-13 { width: 13px; height: 13px; } .icon-14 { width: 14px; height: 14px; } .icon-15 { width: 15px; height: 15px; } .icon-16 { width: 16px; height: 16px; } .icon-18 { width: 18px; height: 18px; } .icon-20 { width: 20px; height: 20px; } .icon-40 { width: 40px; height: 40px; }   @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .icon-spin { animation: spin 1s linear infinite; }   .filter-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; z-index: var(--z-skip); }   .pcp-section-items { display: flex; flex-direction: column; }   .bulk-ai-runnote { padding: 4px 12px; font-size: 12px; color: var(--color-text-secondary); background: var(--color-bg-base); border-bottom: 1px solid var(--color-border-default); } .bulk-ai-band { position: relative; display: grid; gap: 6px; padding: 8px 12px 8px 14px; background: var(--color-info-surface); border-bottom: 1px solid var(--color-border-default); } .bulk-ai-band::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-info); } .bulk-ai-band.is-done { background: var(--color-primary-surface); } .bulk-ai-band.is-done::before { background: var(--color-primary); } .bulk-ai-band-head { display: flex; gap: 8px; align-items: flex-start; } .bulk-ai-band-head .bulk-ai-band-icon { flex: none; margin-top: 1px; color: var(--color-info); } .bulk-ai-band.is-done .bulk-ai-band-icon { color: var(--color-primary-on-surface); } .bulk-ai-band-title { font-size: 13px; font-weight: 600; color: var(--color-text-primary); } .bulk-ai-band-desc { font-size: 12px; color: var(--color-text-secondary); margin-top: 1px; } .bulk-ai-band-facts, .bulk-ai-band-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 24px; } .bulk-ai-band-actions { gap: 8px; } .bulk-ai-fact { display: inline-flex; align-items: center; min-height: 18px; padding: 0 7px; border-radius: 9px; font-size: 10px; color: var(--color-text-secondary); background: var(--color-bg-base); border: 1px solid var(--color-border-default); } .bulk-ai-band-btn { min-height: 28px; padding: 4px 10px; border-radius: 4px; font: inherit; font-size: 12px; cursor: pointer; color: var(--color-primary-on-surface); background: var(--color-bg-base); border: 1px solid var(--color-border-muted); } .bulk-ai-band-btn:hover { background: var(--color-primary-surface-light); } .bulk-ai-band-btn.is-primary { color: var(--color-text-on-primary); font-weight: 600; background: var(--color-primary); border-color: var(--color-primary); } .bulk-ai-band-btn.is-primary:hover { background: var(--color-primary-dark); } .bulk-ai-band-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }   .bulk-ai-divider { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; background: var(--color-bg-sunken); } .bulk-ai-divider::before, .bulk-ai-divider::after { content: ""; flex: 1; min-width: 12px; height: 1px; } .bulk-ai-divider::before { background: linear-gradient(to right, transparent, var(--color-info)); } .bulk-ai-divider::after { background: linear-gradient(to left, transparent, var(--color-info)); order: 3; } .bulk-ai-divider-tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 10px; white-space: nowrap; color: var(--color-text-secondary); background: var(--color-bg-base); border: 1px solid var(--color-info); } .bulk-ai-divider-tag svg { color: var(--color-info); } .bulk-ai-divider-link { order: 2; border: 0; background: none; padding: 0 4px; font: inherit; font-size: 10px; white-space: nowrap; color: var(--color-primary-on-surface); cursor: pointer; } .bulk-ai-divider-link:hover { text-decoration: underline; }   .badge-state.bulk-ai-mark { border: 1px solid transparent; } .badge-state.bulk-ai-mark.is-reply { color: var(--color-warning-on-surface); background: var(--color-warning-surface); border-color: var(--color-warning); } .badge-state.bulk-ai-mark.is-unjudged { color: var(--color-text-secondary); background: var(--color-bg-base); border-color: var(--color-border-muted); }   .qr { width: 100%; } .qr-to { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--color-text-secondary); padding: 0 4px 8px; } .qr-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0 0 1px; font: inherit; cursor: pointer; color: var(--color-text-primary); font-weight: 600; border-bottom: 1.5px dashed var(--color-border-muted); } .qr-link:hover { border-bottom-color: var(--color-primary); color: var(--color-primary-dark); } .qr-link.is-external { color: var(--color-warning-on-surface); border-bottom-color: var(--color-warning); } .qr-ext-note { font-size: 12px; color: var(--color-warning-on-surface); background: var(--color-warning-surface); border-radius: var(--radius-full); padding: 1px 9px; } .qr-box { display: flex; align-items: flex-end; gap: 8px; background: var(--color-bg-base); border: 1.5px solid var(--color-primary); border-radius: 22px; padding: 6px 6px 6px 8px; box-shadow: 0 0 0 4px var(--color-primary-surface), var(--shadow-sm); } .qr-plus { width: 34px; height: 34px; flex: none; border-radius: 50%; border: none; background: none; display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); cursor: pointer; } .qr-plus:hover { background: var(--color-bg-sunken); } .qr-text { flex: 1; min-width: 0; resize: none; border: none; outline: none; background: transparent; font: inherit; font-size: 14px; line-height: 1.7; padding: 6px 2px; color: var(--color-text-primary); max-height: 200px; overflow-y: auto; } .qr-tools { display: flex; align-items: center; gap: 4px; flex: none; } .qr-tool { display: inline-flex; align-items: center; gap: 4px; height: 30px; border: none; background: none; border-radius: var(--radius-full); padding: 0 10px; font: inherit; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; } .qr-tool:hover { background: var(--color-bg-sunken); } .qr-tool.is-on { background: var(--color-info-surface); color: var(--color-info); } .qr-tool-ai svg { color: var(--color-ai-sparkle); } .qr-send { display: inline-flex; align-items: center; gap: 6px; height: 34px; border: none; border-radius: var(--radius-full); padding: 0 16px; font: inherit; font-size: 13px; font-weight: 700; background: var(--color-primary); color: var(--color-text-on-primary); cursor: pointer; } .qr-send:disabled { opacity: .5; cursor: default; } .qr-attachments { display: flex; gap: 6px; padding: 8px 4px 0; flex-wrap: wrap; } .qr-file { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); padding: 4px 10px; font-size: 12px; } .qr-file svg { color: var(--color-text-tertiary); } .qr-file-remove { border: none; background: none; color: var(--color-text-tertiary); cursor: pointer; padding: 0 2px; } .qr-hint { font-size: 11px; color: var(--color-text-tertiary); text-align: right; padding: 6px 8px 0; } .qr-kbd { border: 1px solid var(--color-border-default); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 10px; background: var(--color-bg-sunken); } @media (max-width: 760px) { .qr-box { flex-wrap: wrap; border-radius: 18px; } .qr-text { flex-basis: calc(100% - 46px); } .qr-tools { width: 100%; justify-content: flex-end; } .qr-tool-label { display: none; } .qr-tool { padding: 0 8px; } .qr-hint { display: none; } }   .compose-resume-draft { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) var(--space-3) 0; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border-radius: var(--radius-md); background: var(--color-info-surface); font-size: var(--font-sm); color: var(--color-text-secondary); } .compose-resume-draft-text { flex: 1 1 auto; min-width: 0; } .compose-resume-draft-btn { flex: 0 0 auto; min-height: 44px; padding: 0 var(--space-3); border: none; background: transparent; color: var(--color-primary); font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; } 
/*css/screens/04-performance-errorreport.css*/
  .perf-page { width: 100%; max-width: 960px; margin: 0 auto; padding: 24px 20px 48px; } .perf-title { margin: 0 0 16px; font-size: var(--font-xl); font-weight: var(--weight-bold); color: var(--color-text-primary); } .perf-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .perf-period-label { font-size: var(--font-xs); color: var(--color-text-tertiary); } .perf-period-buttons { display: flex; } .perf-period-btn { padding: 4px 12px; border: 1px solid var(--color-border-default); background: var(--color-bg-base); color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; } .perf-period-btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); } .perf-period-btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; } .perf-period-btn + .perf-period-btn { border-left: none; } .perf-period-btn.active { background: var(--color-primary-surface); color: var(--color-primary-dark); font-weight: var(--weight-semibold); } .perf-range { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .perf-aggregate { margin-left: auto; } .perf-loading { padding: 32px 0; text-align: center; font-size: var(--font-sm); color: var(--color-text-tertiary); } .perf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }   .perf-card { display: flex; flex-direction: column; align-items: flex-start; padding: var(--density-card-padding); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); font: inherit; text-align: left; cursor: pointer; } .perf-card:hover { border-color: var(--color-border-muted); } .perf-card-label { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .perf-card-value { margin-top: 2px; font-size: var(--font-xl); font-weight: var(--weight-bold); } .perf-card-sub { margin-top: 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .perf-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .perf-pill { padding: 2px 10px; border-radius: 999px; background: var(--color-bg-sunken); font-size: var(--font-2xs); color: var(--color-text-secondary); } .perf-subtitle { margin: 24px 0 8px; font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .perf-table { width: 100%; border-collapse: collapse; font-size: var(--font-xs); } .perf-table th, .perf-table td { padding: 6px 8px; border-bottom: 1px solid var(--color-border-muted); text-align: left; } .perf-table th { color: var(--color-text-tertiary); font-weight: var(--weight-semibold); }   .perf-card-tier { margin-top: 1px; font-size: var(--font-2xs); color: var(--color-text-secondary); }   .perf-pill-message { color: var(--color-feature-message); } .perf-pill-secondary { color: var(--color-text-secondary); } .perf-pill-warning { color: var(--color-warning); } .perf-pill-timelog { color: var(--color-feature-timelog); }   .perf-overdue { display: flex; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: var(--font-xs); } .perf-overdue-label { color: var(--color-text-tertiary); } .perf-overdue-sep { margin-left: 12px; } .perf-overdue-ontime { color: var(--color-success); font-weight: var(--weight-semibold); } .perf-overdue-count { color: var(--color-warning); font-weight: var(--weight-semibold); } .perf-overdue-mild { color: var(--color-text-secondary); } .perf-overdue-medium { color: var(--color-warning); } .perf-overdue-severe { color: var(--color-error); }   .perf-date { padding: 3px 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-xs); }   .perf-chart { margin-top: 24px; } .perf-chart-body { display: flex; align-items: stretch; gap: 6px; } .perf-chart-axis-y { align-self: center; font-size: var(--font-2xs); color: var(--color-text-tertiary); writing-mode: vertical-rl; } .perf-chart-axis-x { display: block; margin-top: 4px; text-align: center; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .perf-chart-plot { display: flex; align-items: flex-end; gap: 6px; flex: 1 1 auto; min-width: 0; height: 220px; padding: 8px; overflow-x: auto; border: 1px solid var(--color-border-muted); border-radius: var(--radius-md); background: var(--color-bg-sunken); } .perf-chart-group { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .perf-chart-bars { display: flex; align-items: flex-end; gap: 1px; height: 100%; } .perf-chart-bar { width: 6px; min-height: 1px; border-radius: 1px 1px 0 0; } .perf-chart-day { margin-top: 4px; font-size: var(--font-2xs); color: var(--color-text-tertiary); white-space: nowrap; } .perf-series-received { background: var(--color-feature-message); } .perf-series-sent { background: var(--color-text-tertiary); } .perf-series-checked { background: var(--color-success); } .perf-chart-legend { display: flex; justify-content: center; gap: 14px; margin-top: 6px; } .perf-legend-item { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-2xs); color: var(--color-text-secondary); } .perf-legend-swatch { width: 10px; height: 10px; border-radius: 2px; }   .perf-trend { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border-muted); } .perf-trend-title { margin: 0 0 8px; font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .perf-trend-rows { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; } .perf-trend-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: var(--font-2xs); } .perf-trend-row.no-data { opacity: 0.5; } .perf-trend-date { flex: 0 0 68px; color: var(--color-text-secondary); } .perf-trend-track { flex: 1 1 auto; min-width: 0; height: 8px; border-radius: 4px; background: var(--color-bg-sunken); overflow: hidden; } .perf-trend-fill { display: block; height: 100%; border-radius: 4px; background: currentColor; } .perf-trend-rate { flex: 0 0 40px; text-align: right; font-weight: var(--weight-semibold); color: var(--color-text-primary); } .perf-trend-grade { flex: 0 0 34px; text-align: right; font-weight: var(--weight-semibold); } .perf-note { margin: 6px 0 0; font-size: var(--font-2xs); color: var(--color-text-tertiary); line-height: 1.6; } .perf-scope-note { margin-top: 20px; }   .perf-info { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: min(420px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow-y: auto; padding: 14px 16px; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-elevated); box-shadow: var(--shadow-lg); } .perf-info-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .perf-info-title { font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .perf-info-close { width: 24px; height: 24px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-tertiary); cursor: pointer; } .perf-info-close:hover { background: var(--color-bg-sunken); color: var(--color-text-primary); } .perf-info-line { margin: 0 0 4px; font-size: var(--font-2xs); color: var(--color-text-secondary); line-height: 1.7; } .perf-info-key { font-weight: var(--weight-medium); color: var(--color-text-primary); }   .manual-page { display: flex; height: 100%; min-height: 0; } .manual-side { display: flex; flex-direction: column; width: 280px; flex: 0 0 280px; min-height: 0; border-right: 1px solid var(--color-border-default); background: var(--color-bg-sunken); } .manual-search { position: relative; padding: 12px 12px 4px; } .manual-search-box { width: 100%; padding: 6px 30px 6px 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-sm); } .manual-search-icon { position: absolute; right: 22px; top: 50%; transform: translateY(-40%); font-size: var(--font-2xs); opacity: 0.4; pointer-events: none; } .manual-search-result { max-height: 220px; overflow-y: auto; margin: 4px 12px; border: 1px solid var(--color-border-muted); border-radius: var(--radius-md); background: var(--color-bg-base); } .manual-search-list { list-style: none; margin: 0; padding: 0; } .manual-search-item { display: block; width: 100%; padding: 8px 10px; border: none; border-bottom: 1px solid var(--color-border-muted); background: transparent; text-align: left; cursor: pointer; } .manual-search-item:hover { background: var(--color-bg-sunken); } .manual-search-chapter { display: block; font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .manual-search-snippet { display: block; margin-top: 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); } .manual-toc { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 8px 16px; } .manual-toc-chapter-btn { display: block; width: 100%; padding: 6px 10px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-primary); font-size: var(--font-sm); text-align: left; cursor: pointer; } .manual-toc-chapter-btn:hover { background: var(--color-bg-base); } .manual-toc-chapter-btn.active { background: var(--color-primary-surface); color: var(--color-primary-dark); font-weight: var(--weight-semibold); } .manual-toc-sections { list-style: none; margin: 2px 0 6px; padding: 0 0 0 10px; } .manual-toc-section-btn { display: block; width: 100%; padding: 4px 10px; border: none; background: transparent; color: var(--color-text-secondary); font-size: var(--font-xs); text-align: left; cursor: pointer; } .manual-toc-section-btn:hover { color: var(--color-text-primary); } .manual-side-foot { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--color-border-default); } .manual-side-foot .manual-version { text-align: right; } .manual-version { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .manual-body { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 32px 40px 96px; } .manual-body h1 { margin: 0 0 8px; font-size: var(--font-2xl); font-weight: var(--weight-bold); color: var(--color-text-primary); } .manual-body h2 { margin: 40px 0 12px; padding-left: 12px; border-left: 4px solid var(--color-primary); font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-text-primary); } .manual-body h3 { margin: 24px 0 6px; font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .manual-body p, .manual-body li { font-size: var(--font-sm); line-height: 1.85; color: var(--color-text-secondary); } .manual-body table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: var(--font-xs); } .manual-body th, .manual-body td { padding: 6px 8px; border: 1px solid var(--color-border-muted); text-align: left; } .manual-body th { background: var(--color-bg-sunken); color: var(--color-text-primary); } .manual-body code { padding: 1px 4px; border-radius: var(--radius-sm); background: var(--color-bg-sunken); font-size: var(--font-xs); } .manual-body pre { padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-bg-sunken); overflow-x: auto; } .manual-body hr { border: none; height: 1px; margin: 32px 0; background: var(--color-border-default); } .manual-body img { max-width: 100%; }   .manual-chat { display: flex; flex-direction: column; width: 360px; flex: 0 0 360px; min-height: 0; border-left: 1px solid var(--color-border-default); background: var(--color-bg-sunken); } .manual-chat-head { padding: 12px; border-bottom: 1px solid var(--color-border-default); } .manual-chat-title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .manual-chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 12px; } .manual-chat-msg { margin-bottom: 8px; padding: 8px 10px; border-radius: var(--radius-md); font-size: var(--font-xs); line-height: 1.7; white-space: pre-wrap; } .manual-chat-msg.user { margin-left: 32px; background: var(--color-primary-surface); color: var(--color-primary-dark); } .manual-chat-msg.ai { margin-right: 32px; background: var(--color-bg-base); color: var(--color-text-secondary); } .manual-chat-input { display: flex; gap: 6px; padding: 10px 12px 64px; border-top: 1px solid var(--color-border-default); } .manual-chat-box { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-sm); }   .er-page { max-width: 720px; margin: 0 auto; padding: 24px 20px 48px; } .er-tech-toggle { padding: 0; border: none; background: none; color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; } .er-tech-arrow { display: inline-block; margin-right: 4px; transition: transform var(--duration-fast) ease; } .er-tech-arrow.open { transform: rotate(90deg); } .er-tech { width: 100%; resize: vertical; font-family: inherit; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-sunken); font-size: var(--font-2xs); color: var(--color-text-secondary); white-space: pre-wrap; word-break: break-all; } .er-actions { margin-top: 20px; }   .er-notify { max-width: 520px; } .er-notify-head { display: flex; align-items: center; gap: 16px; } .er-notify-icon { position: relative; flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-warning-surface); color: var(--color-feature-timelog); } .er-notify-icon svg { width: 24px; height: 24px; } .er-notify-bang { position: absolute; top: 20px; left: 0; right: 0; text-align: center; font-size: var(--font-base); font-weight: var(--weight-bold); color: var(--color-feature-timelog); } .er-notify-title { flex: 1 1 auto; margin: 0; font-size: var(--font-xl); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .er-notify-close { flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-full); background: transparent; color: var(--color-text-tertiary); font-size: var(--font-sm); line-height: 1; cursor: pointer; } .er-notify-close:hover { background: var(--color-bg-sunken); } .er-notify-text { margin: 16px 0 0; font-size: var(--font-sm); line-height: 24px; color: var(--color-text-secondary); white-space: pre-line; } .er-notify-hint { margin: 12px 0 18px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--color-success-surface); font-size: var(--font-sm); color: var(--color-success-dark); } .er-notify-copyrow { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .er-notify-copy { padding: 4px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; } .er-notify-copy:hover { background: var(--color-success-surface); border-color: var(--color-success); color: var(--color-success-dark); } .er-notify-copied { font-size: var(--font-xs); color: var(--color-success); }   .er-notify .er-actions { display: flex; justify-content: flex-end; gap: 8px; }   .sc-account-content { padding: 12px 16px 24px; } .sc-account-top { display: flex; flex-direction: column; align-items: flex-start; }   .sc-verify-banner { width: 100%; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--color-warning); border-radius: var(--radius-md); background: var(--color-warning-surface, var(--color-bg-sunken)); } .sc-verify-title { font-weight: var(--weight-bold); color: var(--color-warning-dark, var(--color-text-primary)); } .sc-verify-body { margin-top: 4px; font-size: var(--font-xs); color: var(--color-text-secondary); } .sc-verify-note { margin-top: 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); }       .sc-voice-area { display: flex; flex-direction: column; align-items: center; align-self: center; } .sc-voice-bubble { max-width: 165px; padding: 6px 10px; border-radius: 5px; background: var(--color-primary); font-size: var(--font-sm); color: #fff; word-break: break-word; }   .sc-voice-input { width: 165px; border: none; resize: none; font-family: inherit; line-height: 1.4; } .sc-voice-input:focus { outline: 2px solid rgba(255, 255, 255, .6); outline-offset: 1px; } .sc-voice-input::placeholder { color: rgba(255, 255, 255, .85); }   .sc-voice-triangle { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--color-primary); }   .sc-avatar-wrap { position: relative; display: inline-block; align-self: center; margin: 4px 0 0; } .sc-avatar-wrap.editable { cursor: pointer; } .sc-avatar {   width: 56px; height: 56px; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-primary-surface); color: var(--color-primary-dark); font-size: 20px; font-weight: var(--weight-bold); } .sc-avatar-img { width: 100%; height: 100%; object-fit: cover; } .sc-avatar-edit-badge { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-bg-base); border: 1px solid var(--color-border-default); color: var(--color-text-secondary); } .sc-avatar-edit-badge svg { width: 12px; height: 12px; }   .sc-avatar-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .sc-status-row { display: flex; align-items: center; gap: 5px; align-self: center; margin: 6px 0 0; } .sc-status-dot { width: 8px; height: 8px; border-radius: 50%; } .sc-dot-green { background: var(--color-success); } .sc-dot-gray { background: var(--color-text-tertiary); } .sc-status-label-bold { font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }   .sc-status-label-muted { color: var(--color-text-tertiary); }   .sc-deflist { width: 100%; margin: 14px 0 0; padding: 0 4px; display: grid; grid-template-columns: 72px 1fr; row-gap: 6px; column-gap: 8px; align-items: center; } .sc-deflist dt { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .sc-deflist dd { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; } .sc-deflist-value { font-size: var(--font-xs); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; } .sc-deflist-muted { font-size: var(--font-xs); color: var(--color-text-tertiary); }   .sc-copy { padding: 2px; border: none; background: none; color: var(--color-text-tertiary); cursor: pointer; line-height: 0; opacity: 0; transition: opacity var(--duration-fast) ease; } .sc-deflist dd:hover .sc-copy, .sc-copy:focus-visible { opacity: 1; } .sc-copy:hover { color: var(--color-primary-on-surface); } .sc-copy svg { width: 13px; height: 13px; } .sc-phone-pill { padding: 2px 8px; border: 1px solid var(--color-border-default); border-radius: 999px; background: transparent; font-size: var(--font-2xs); color: var(--color-text-secondary); text-decoration: none; cursor: pointer; }   .sc-qr-popup { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 200px; max-width: 240px; margin-top: 8px; padding: 12px; border: 1px solid var(--color-border-default); border-radius: 8px; background: var(--color-bg-elevated); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); } .sc-qr-title { font-size: var(--font-base); font-weight: 600; color: var(--color-text-primary); } .sc-qr-frame { padding: 8px; border-radius: 8px; background: #fff; } .sc-qr-frame img { display: block; width: 160px; height: 160px; } .sc-qr-name { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-primary); } .sc-qr-phone { font-size: var(--font-xs); color: var(--color-text-secondary); } .sc-linklike { padding: 0; border: none; background: none; color: var(--color-primary-on-surface); font-size: var(--font-2xs); cursor: pointer; } .sc-linklike:hover { text-decoration: underline; }   .sc-send-wrap { position: relative; align-self: flex-start; margin: 16px 0 0 5px; } .sc-send-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: none; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; font-size: var(--font-xs); cursor: pointer; } .sc-send-btn:hover { background: var(--color-primary-dark); } .sc-send-icon { width: 14px; height: 14px; } .sc-send-caret { margin-left: 6px; font-size: 9px; } .sc-send-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 2; min-width: 140px; padding: 4px; list-style: none; margin: 0; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.12)); } .sc-send-item { display: block; width: 100%; padding: 6px 10px; border: none; background: none; text-align: left; font-size: var(--font-xs); color: var(--color-text-primary); cursor: pointer; } .sc-send-item:hover { background: var(--color-bg-sunken); } .sc-sep { width: 100%; margin: 14px 0 10px; border: none; border-top: 1px solid var(--color-border-default); }   .sc-mile { width: 100%; } .sc-mile-head { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .sc-mile-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; width: 100%; } .sc-mile-badge { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: var(--weight-bold); background: var(--color-border-muted); }   .sc-mile-bar { flex: 0 1 130px; height: 6px; border-radius: 3px; background: var(--color-bg-sunken); overflow: hidden; } .sc-mile-bar-fill { height: 100%; background: var(--color-primary); } .sc-mile-info { border: none; background: none; color: var(--color-text-tertiary); cursor: pointer; font-size: 14px; } .sc-mile-place { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .sc-mile-place-label { font-size: var(--font-2xs); color: var(--color-text-tertiary); } .sc-mile-place-badge { font-size: var(--font-sm); } .sc-mile-place-city { font-size: var(--font-xs); color: var(--color-text-primary); } .sc-mile-legend { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-elevated); } .sc-mile-legend-title { font-size: var(--font-2xs); font-weight: var(--weight-bold); color: var(--color-text-primary); } .sc-mile-legend-body { margin-top: 2px; font-size: var(--font-2xs); color: var(--color-text-secondary); }   .sc-badges { width: 100%; display: flex; flex-direction: column; gap: 4px; } .sc-icon-label { display: flex; align-items: center; gap: 5px; font-size: var(--font-2xs); color: var(--color-text-secondary); } .sc-icon-12 { width: 12px; height: 12px; } .sc-badge-danger { color: var(--color-error); }   .sc-changing { width: 100%; margin-top: 10px; } .sc-changing-title { font-size: var(--font-2xs); color: var(--color-warning-dark, var(--color-text-secondary)); }   .sc-impersonations { width: 100%; margin-top: 12px; } .sc-impersonations-title { font-size: var(--font-2xs); font-weight: var(--weight-bold); color: var(--color-text-secondary); } .sc-impersonation-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .sc-impersonation-name { font-size: var(--font-xs); color: var(--color-text-primary); } .sc-impersonation-address { font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .sc-admin-menu-wrap { position: relative; width: 100%; margin-top: 16px; }   .sc-admin-menu-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px; border: none; border-radius: 6px; background: transparent; color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; } .sc-admin-menu-btn:hover { background: var(--color-bg-sunken); } .sc-admin-menu-dots { letter-spacing: 1px; } .sc-admin-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 2; min-width: 180px; max-width: 320px; padding: 4px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.12)); } .sc-admin-menu-item { display: block; width: 100%; padding: 6px 10px; border: none; background: none; text-align: left; font-size: var(--font-xs); color: var(--color-text-primary); cursor: pointer; } .sc-admin-menu-item:hover { background: var(--color-bg-sunken); } .sc-admin-menu-item.danger { color: var(--color-error); } .sc-impersonation-list { list-style: none; margin: 0; padding: 0; } .sc-admin-menu-group { padding: 6px 10px 2px; font-size: var(--font-2xs); color: var(--color-text-tertiary); }   .sc-admin-menu-group-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }   .sc-admin-menu-sep { height: 1px; margin: 6px 4px; border: none; background: var(--color-border-default); opacity: .5; } .sc-member-status-help { max-width: 300px; margin: 6px 6px 4px; padding: 8px 10px; border-radius: 6px; background: var(--color-bg-sunken); } .sc-member-status-help-head { font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .sc-member-status-help-body { margin: 2px 0 8px; font-size: var(--font-2xs); color: var(--color-text-secondary); line-height: 1.5; }   .sc-admin-menu-item-2line { display: flex; align-items: flex-start; gap: 10px; } .sc-admin-menu-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-bg-sunken); color: var(--color-text-secondary); } .sc-admin-menu-ico-success { color: var(--color-success); } .sc-admin-menu-ico-danger { color: var(--color-error); } .sc-admin-menu-texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sc-admin-menu-main { color: var(--color-text-primary); } .sc-admin-menu-main.danger { color: var(--color-error); } .sc-admin-menu-sub { font-size: var(--font-2xs); color: var(--color-text-tertiary); white-space: normal; line-height: 1.4; } .panel-empty-sub { margin-top: 4px; font-size: var(--font-xs); color: var(--color-text-tertiary); }       .tr-date-holiday { color: #E5484D; } .tr-date-saturday { color: #3B82F6; }   .tr-holiday-name { margin-left: 6px; font-size: var(--font-2xs); color: #E5484D; }     .mf-host { position: absolute; inset: 0; z-index: var(--z-toast); }   .mf-overlay { position: absolute; inset: 0; background: var(--color-overlay-black-15); } .mf-panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; background: var(--color-bg-base); border-left: 1px solid var(--color-border-default); outline: none; }   .mf-resize { position: absolute; top: 0; left: 0; bottom: 0; width: 4px; cursor: col-resize; z-index: 1; }   .mf-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border-default); } .mf-header-icon { color: var(--color-primary-on-surface); } .mf-title { flex: 1 1 auto; min-width: 0; font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--color-text-primary); } .mf-count { padding: 4px 8px; border-radius: 10px; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-2xs); line-height: 1; } .mf-pin, .mf-close { display: flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-md); background: transparent; color: var(--color-text-secondary); cursor: pointer; } .mf-pin { width: 28px; height: 28px; } .mf-close { width: 32px; height: 32px; } .mf-pin:hover, .mf-close:hover { background: var(--color-bg-sunken); } .mf-pin.on { color: var(--color-primary-on-surface); background: var(--color-primary-surface); }   .mf-body { flex: 1 1 auto; overflow-y: auto; }   .mf-activebar { padding: 8px 16px 4px; background: var(--color-primary-surface-light); border-bottom: 1px solid var(--color-border-default); } .mf-activebar-title { margin-bottom: 4px; font-size: var(--font-2xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .mf-pills { display: flex; flex-wrap: wrap; gap: 4px; } .mf-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 3px 2px 8px; border: 1px solid var(--color-primary); border-radius: 10px; background: var(--color-bg-base); } .mf-pill-text { font-size: var(--font-2xs); color: var(--color-text-primary); } .mf-pill-x { width: 16px; height: 16px; border: none; border-radius: 8px; background: transparent; color: var(--color-text-secondary); font-size: 9px; line-height: 1; cursor: pointer; } .mf-pill-x:hover { background: var(--color-bg-sunken); }   .mf-section { padding: 12px 16px; border-bottom: 1px solid var(--color-border-default); } .mf-section:last-of-type { border-bottom: none; } .mf-section-keyword { padding-bottom: 8px; } .mf-section-label { margin-bottom: 6px; font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-primary); }   .mf-keyword-box { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; background: var(--color-bg-sunken); } .mf-keyword-icon { color: var(--color-text-secondary); flex: 0 0 auto; } .mf-keyword-input { flex: 1 1 auto; min-width: 0; height: 24px; border: none; background: transparent; color: var(--color-text-primary); font-size: var(--font-sm); outline: none; } .mf-keyword-clear { flex: 0 0 auto; width: 18px; height: 18px; border: none; border-radius: 9px; background: transparent; color: var(--color-text-tertiary); font-size: 10px; cursor: pointer; } .mf-keyword-clear:hover { background: var(--color-border-default); }   .mf-row { display: flex; align-items: flex-start; gap: 4px; padding: 9px 0; border-bottom: 1px solid var(--color-border-default); } .mf-row-address { display: block; } .mf-row-head { display: flex; align-items: center; } .mf-row-label { flex: 0 0 78px; padding-top: 3px; font-size: var(--font-xs); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mf-row-head .mf-row-label { flex: 1 1 auto; padding-top: 0; } .mf-row-body { flex: 1 1 auto; min-width: 0; } .mf-row-x { flex: 0 0 auto; width: 24px; height: 24px; border: none; border-radius: 12px; background: transparent; color: var(--color-text-tertiary); font-size: 10px; cursor: pointer; } .mf-row-x:hover { background: var(--color-bg-sunken); }   .mf-period { display: flex; align-items: center; gap: 2px; } .mf-date { flex: 1 1 86px; min-width: 86px; padding: 3px 6px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-text-primary); font-size: var(--font-xs); } .mf-period-tilde { color: var(--color-text-secondary); font-size: var(--font-xs); } .mf-preset-wrap { position: relative; flex: 0 0 auto; } .mf-preset-btn { width: 26px; height: 26px; margin-left: 4px; border: 1px solid var(--color-border-default); border-radius: 5px; background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: var(--font-xs); line-height: 1; cursor: pointer; } .mf-preset-btn:hover { border-color: var(--color-primary); }   .mf-choices { display: flex; flex-wrap: wrap; gap: 6px; } .mf-choice { padding: 5px 10px; border: 1px solid var(--color-border-default); border-radius: 14px; background: transparent; color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; } .mf-choice:hover { border-color: var(--color-primary); } .mf-choice.active { border-color: var(--color-primary); background: var(--color-primary-surface); }   .mf-address { margin: 8px 0 4px; } .mf-address-field { margin-bottom: 10px; position: relative; } .mf-address-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .mf-address-tag { padding: 1px 4px; border-radius: 3px; font-size: var(--font-xs); font-weight: var(--weight-semibold); }   .mf-address-tag-from { background: var(--color-info-surface); color: var(--color-address-from); } .mf-address-tag-to { background: var(--color-primary-surface-light); color: var(--color-primary-on-surface); } .mf-address-tag-cc { background: var(--color-bg-sunken); color: var(--color-text-secondary); } .mf-address-caption { font-size: var(--font-xs); color: var(--color-text-secondary); } .mf-address-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 6px; background: var(--color-bg-sunken); }   .mf-address-chips { display: contents; } .mf-address-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 2px 1px 6px; border: 1px solid var(--color-border-default); border-radius: 10px; background: var(--color-bg-base); font-size: var(--font-2xs); color: var(--color-text-primary); } .mf-address-chip-x { width: 14px; height: 14px; border: none; border-radius: 7px; background: transparent; color: var(--color-text-tertiary); font-size: 8px; line-height: 1; cursor: pointer; } .mf-address-chip-x:hover { background: var(--color-bg-sunken); } .mf-address-input { flex: 1 1 120px; min-width: 80px; height: 24px; border: none; background: transparent; color: var(--color-text-primary); font-size: var(--font-sm); outline: none; }   .mf-address-summary { margin-top: 8px; padding: 6px 9px; border: 1px solid var(--color-border-default); border-radius: 6px; background: var(--color-primary-surface-light); font-size: var(--font-2xs); line-height: 19px; color: var(--color-text-secondary); } .mf-address-toggle { padding: 0; border: none; background: none; color: var(--color-primary-on-surface); font-size: inherit; font-weight: var(--weight-semibold); text-decoration: underline; cursor: pointer; } .mf-address-toggle.neg { color: var(--color-error); }   .mf-hint { margin-top: 6px; font-size: var(--font-2xs); color: var(--color-text-tertiary);   white-space: normal; } .mf-hint-empty { margin: 2px 0 10px; }   .mf-add-wrap { position: relative; margin-top: 10px; } .mf-add { width: 100%; padding: 9px 11px; border: 1px solid var(--color-border-muted); border-radius: 6px; background: transparent; color: var(--color-primary-on-surface); font-size: var(--font-xs); font-weight: var(--weight-semibold); text-align: left; cursor: pointer; } .mf-add:hover { background: var(--color-primary-surface-light); border-color: var(--color-primary); }   .mf-menu { position: absolute; z-index: 2; margin-top: 4px; min-width: 150px; padding: 4px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-base); box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .12)); } .mf-menu-item { display: block; width: 100%; padding: 5px 8px; border: none; background: none; text-align: left; font-size: var(--font-xs); color: var(--color-text-primary); cursor: pointer; } .mf-menu-item:hover { background: var(--color-bg-sunken); } .mf-bottom-space { height: 16px; }   .mf-footer { flex: 0 0 auto; padding: 8px 16px; background: var(--color-bg-elevated); border-top: 1px solid var(--color-border-default); } .mf-footer-row { display: flex; align-items: center; gap: 8px; } .mf-result-count { flex: 1 1 auto; font-size: var(--font-xs); color: var(--color-text-secondary); } .mf-clear { padding: 6px 12px; border: 1px solid var(--color-border-default); border-radius: 6px; background: transparent; color: var(--color-text-secondary); font-size: var(--font-xs); cursor: pointer; } .mf-clear:hover { background: var(--color-bg-sunken); } .mf-apply { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: none; border-radius: 6px; background: var(--color-primary); cursor: pointer; } .mf-apply:hover { opacity: 0.85; } .mf-apply-text { font-size: var(--font-xs); font-weight: var(--weight-semibold); color: var(--color-text-on-primary); } .mf-apply-key { font-size: var(--font-2xs); color: var(--color-text-on-primary); }   .mf-close-hint { margin-top: 4px; font-size: var(--font-2xs); color: var(--color-text-tertiary);   }   @media (max-width: 768px), (max-height: 500px) and (pointer: coarse) { .mf-panel { width: 100% !important; } } 
/*css/screens/05-message-detail.css*/
  .message-detail-panel {   flex: 0.62;   display: flex; flex-direction: column; overflow: hidden; background: var(--color-bg-sunken); min-width: 0; margin: 5px 32px 0 0; }   .message-detail-panel > .message-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; } .message-detail-panel > .reply-placeholder-bar { flex-shrink: 0; } .message-detail { padding: 0; }   .detail-head-menu { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--color-border-default); min-height: 38px; } .check-status { display: flex; align-items: center; } .check-indicator { display: flex; align-items: center; gap: 6px; } .check-label { font-size: 8pt; font-weight: var(--weight-semibold); color: var(--color-text-secondary); } .check-img { width: 24px; height: 24px; } .check-indicator.checked .check-label { color: var(--color-primary-on-surface); } .btn-check { padding: 3px 12px; background: var(--color-error); color: var(--color-bg-base); border: none; border-radius: 15px; cursor: pointer; font-size: 8pt; font-weight: var(--weight-semibold); } .btn-check:hover { background: LightPink; color: var(--color-text-primary); } .head-actions { display: flex; gap: 4px; } .btn-action-icon { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 5px; } .btn-action-icon:hover { background: var(--color-primary-surface); } .btn-action-icon img { width: 16px; height: 16px; }   .detail-header-info { display: flex; align-items: flex-start; padding: 10px 16px; gap: 10px; border-bottom: 1px solid var(--color-border-default); } .detail-avatar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--color-border-default); overflow: hidden; flex-shrink: 0; background: var(--color-border-default); display: flex; align-items: center; justify-content: center; } .detail-avatar img { width: 20px; height: 20px; opacity: 0.6; } .detail-address-block { flex: 1; min-width: 0; } .detail-from { font-size: 12pt; font-weight: var(--weight-semibold); margin-bottom: 2px; } .addr-secondary { font-weight: normal; font-size: 9pt; color: var(--color-text-tertiary); margin-left: 4px; } .detail-to-cc { font-size: 9pt; color: var(--color-text-secondary); display: flex; flex-wrap: wrap; gap: 2px; } .addr-label { font-weight: var(--weight-semibold); color: var(--color-text-tertiary); } .cc-label { margin-left: 8px; } .detail-timestamp { font-size: 9pt; color: var(--color-text-tertiary); flex-shrink: 0; white-space: nowrap; }   .return-complete-indicator { display: flex; align-items: center; gap: 8px; padding: 6px 16px; border-bottom: 1px solid var(--color-border-default); } .return-complete-indicator img { width: 16px; height: 16px; } .return-complete-indicator span { font-size: 9pt; color: var(--color-text-tertiary); }   .detail-subject-bar { display: flex; align-items: center; padding: 10px 16px; gap: 6px; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-elevated); } .detail-subject-text { font-size: 11pt; font-weight: var(--weight-semibold); color: var(--color-text-secondary); flex: 1; word-break: break-word; } .status-icon-detail { width: 14px; height: 14px; }   .detail-attachments {   display: flex; flex-direction: column; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--color-border-default); }   .detail-attachments-bar { display: flex; justify-content: flex-end; padding: 6px 16px 0; }   .detail-plaintext-switch { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 4px 16px 0; } .plaintext-switch-label { font-size: var(--font-xs); color: var(--color-text-tertiary); } .plaintext-switch-toggle { font-size: var(--font-2xs); padding: 2px 10px; border-radius: var(--radius-full); border: 1px solid var(--color-border-default); background: var(--color-bg-base); color: var(--color-text-secondary); cursor: pointer; } .plaintext-switch-toggle.is-on { background: var(--color-primary-surface); border-color: var(--color-primary); color: var(--color-primary-on-surface); }   .detail-body-loading { font-size: var(--font-xs); color: var(--color-text-tertiary); padding: 8px 0; }   .detail-floating-bar { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--color-bg-elevated); border-top: 1px solid var(--color-border-default); } .btn-floating-check { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: none; border-radius: var(--radius-md); background: var(--color-error); color: var(--color-text-on-primary); font-size: var(--font-sm); cursor: pointer; } .btn-floating-check:hover { opacity: 0.85; } .btn-floating-next { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: transparent; color: var(--color-text-secondary); font-size: var(--font-sm); cursor: pointer; } .btn-floating-next:hover:not(:disabled) { background: var(--color-bg-sunken); } .btn-floating-next:disabled { opacity: 0.4; cursor: default; } .floating-checked { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-sm); color: var(--color-primary-on-surface); }   .btn-uncheck { margin-left: 6px; font-size: var(--font-2xs); padding: 2px 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-bg-base); color: var(--color-text-secondary); cursor: pointer; } .btn-uncheck:hover { background: var(--color-bg-sunken); } .attachment-chip {   display: flex; align-items: center; gap: 8px; padding: 8px 10px; width: 100%; background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 8px; font-size: var(--font-sm); color: var(--color-text-primary); transition: all var(--duration-fast) var(--ease-default); } .attachment-chip:hover { border-color: var(--color-primary); background: var(--color-primary-surface); color: var(--color-primary-on-surface); } .attachment-chip img { width: 14px; height: 14px; opacity: 0.6; }   .detail-body { padding: 20px 24px; } .message-body-text { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: var(--font-base); line-height: 1.7; color: var(--color-text-primary); }   .html-mail-frame { width: 100%; min-height: 180px; max-height: 82vh;   border: none; background: #fff; display: block; }     .quote-item.html-wide .html-mail-block { max-width: none; }   .html-mail-block { margin: 4px 0; } .html-mail-open { display: inline-flex; align-items: center; gap: 6px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); color: var(--color-text-secondary); font-size: var(--font-sm); padding: 6px 14px; cursor: pointer; } .html-mail-open:hover { background: var(--color-bg-sunken); }   .html-mail-card { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-elevated); box-shadow: var(--shadow-sm); overflow: hidden; }   .html-mail-status { min-height: 44px; display: flex; align-items: center; padding: 10px 14px;   background: var(--color-bg-elevated); color: var(--color-text-secondary); font-size: var(--font-sm); }   .ext-img-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 8px 12px; background: var(--color-warning-surface); border-bottom: 1px solid var(--color-warning); color: var(--color-warning-on-surface); font-size: var(--font-xs); line-height: 1.5; } .ext-img-msg { flex: 1 1 160px; min-width: 0; overflow-wrap: break-word; }   .ext-img-show, .ext-img-trust { flex: 0 0 auto; white-space: nowrap; padding: 4px 12px; border: none; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-2xs); font-weight: var(--weight-semibold); cursor: pointer; } .ext-img-show:hover, .ext-img-trust:hover { background: var(--color-primary-dark); }   .html-mail-footer { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); padding: 6px 8px; background: var(--color-bg-elevated); border-top: 1px solid var(--color-border-default); }   .html-mail-footbtn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: none; border-radius: var(--radius-sm); background: var(--color-bg-sunken); color: var(--color-text-secondary); font-size: var(--font-xs); white-space: nowrap; cursor: pointer; } .html-mail-footbtn:hover { background: var(--color-border-default); } .html-mail-footbtn.primary { background: var(--color-primary-surface-light); color: var(--color-primary-on-surface); font-weight: var(--weight-semibold); } .html-mail-footbtn.primary:hover { background: var(--color-primary-surface); }   .html-mail-fullscreen { position: fixed; inset: 0; z-index: 140; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center;   padding: 48px; }   .html-mail-fs-inner { background: var(--color-bg-base); border: 1px solid var(--color-border-default); border-radius: 0; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; }   .html-mail-fs-bar { display: flex; align-items: center; gap: var(--space-2); padding: 12px 16px; background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border-default); }   .html-mail-fs-close { margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-sm); background: none; color: var(--color-text-secondary); cursor: pointer; } .html-mail-fs-close:hover { background: var(--color-bg-sunken); }   .html-mail-fs-title { font-size: var(--font-md); font-weight: 600; color: var(--color-text-primary); } .html-mail-fs-frame { flex: 1; width: 100%; border: none; background: #fff; }   .detail-thread { border-top: 1px solid var(--color-border-default); padding: 0; } .thread-header { padding: 10px 20px; font-size: var(--font-xs); font-weight: var(--weight-bold); color: var(--color-primary-on-surface); background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border-default); letter-spacing: 0.3px; text-transform: uppercase; } .thread-list { list-style: none; } .thread-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; cursor: pointer; transition: background var(--duration-fast); border-bottom: 1px solid var(--color-border-default); position: relative; } .thread-item:hover { background: var(--color-primary-surface-light); } .thread-item.current { background: var(--color-primary-surface); } .thread-item.current::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--color-primary); border-radius: 0 3px 3px 0; } .thread-avatar { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--color-primary-surface); display: flex; align-items: center; justify-content: center; } .thread-avatar img { width: 16px; height: 16px; opacity: 0.7; } .thread-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .thread-sender { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thread-subject { font-size: var(--font-xs); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thread-date { font-size: 8pt; color: var(--color-text-tertiary); flex-shrink: 0; }